javascript手習い

かなり前にjavascriptさわってみよう！と思って作ってみたものを二つ．ソースコードはgistで公開していますが，あらためてブログで公開っていうのはなんだか恥ずかしい感じもあります．

整数並び替え

主観評価実験をやるときの提示順序を決定するときによく，1からNまでの整数をランダムに並び替えるということをやっていて，これをjavascriptで書いてみよう！と思って，やってみたもの． HTMLファイルで保存してあったので，gistにはHTMLファイルをアップロードした．

	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<title>1からNまでの整数をランダムに並び替える</title>
	</head>
	<body>
	<h1>1からNまでの整数をランダムに並び替える</h1>

	<p>並び替えたい数の最大値を入力してください: <input type="text" name="max" id="max" value="0" /> <input type="button" value="決定" onclick="getMax();" /></p>
	<p><input type="button" value="並び替える" onclick="randOrder();"/></p>

	<p>並び替え前: <span id="before"></span></p>
	<p>並び替え後: <span id="after"></span></p>

	<script>
	var before;
	var after;

	function getMax(){
	var max = document.getElementById('max').value;
	before = new Array(max);
	after = new Array(max);
	for(var i=0;i<max;i++) {
	before[i] = i+1;
	}
	document.getElementById('before').innerHTML = before;
	}

	function randOrder() {
	var j = 0;
	while(before.length > 0) {
	var r = Math.floor(Math.random() * before.length);
	after[j] = before[r];
	before.splice(r,1);
	j++;
	}
	document.getElementById('after').innerHTML = after;
	}
	</script>
	</body>
	</html>

view raw randomOrder.html hosted with ❤ by GitHub

実際には，よく使っているのはRuby版でした．

	# -- encoding: utf-8 --

	# 2012/11/01
	# 1からNまでの整数をランダムに並び替える

	# 上限値Nを入力してもらう
	puts "並び替えたい数の上限値を入力してください"
	max = gets.to_i

	# 並び替え前の数字が入る配列と並び替え後の配列を用意する
	before = Array.new(max)
	after = Array.new(max)

	# 1からmaxを配列beforeに入れる
	for i in 1..max do
	before[i-1] = i
	end

	# 1からNの数字をランダムな順序に並び替える
	j = 0
	while before.length > 0 do
	r = rand(before.length)
	after[j] = before[r]
	before.delete_at(r)
	j += 1
	end

	# 並び替えた数字を出力する
	puts "並び替えました"
	after.each_index { \|i\|
	puts after[i]
	}

view raw randomOrder.rb hosted with ❤ by GitHub

M2のときに修論がんばるためにつくったもの．研究室のPCを起動したら，ブラウザがたちあがって，修論提出までの日数が表示されるというふうにして，自分のケツを叩きまくってました．

	<!DOCTYPE HTML>
	<html lang="ja">
	<head>

	<meta charset="UTF-8"/>
	<title>いろいろカウントダウン</title>

	</head>
	<body>
	<h1>残り日数を計算できます</h1>

	<p><span id="event">*</span>まで，あと<span id="day">*</span>日!</p>
	<p>イベント名:<input type="text" name="eventName" id="eventName" value="お正月" /></p>
	<p>開催日:<input type="date" name="xday" id="xday" value="2013-01-01"/></p>
	<input type="button" value="計算!" onclick="countdown();"/>

	<script>
	function countdown() {
	var eventName = document.getElementById('eventName').value;
	var xday = document.getElementById('xday').value.split("-");

	var d1 = new Date(xday[0], xday[1]-1, xday[2]);
	var d2 = new Date();
	count = Math.floor((d1 - d2) / (10006060*24));

	document.getElementById('event').innerHTML = eventName;
	document.getElementById('day').innerHTML = count;
	}

	</script>

	</body>
	</html>

view raw countdown.html hosted with ❤ by GitHub