「for」タグアーカイブ

繰り返してみるってことは？

コメントを残す

スクリーンショット 2016-06-10 17.58.57
前回の続きで今回は繰り返し。
サンプルプログラム
前回もforEach, forを使って配列の要素を繰り返しをしましたが今回はもうちょっとシンプルに。
数値を選んで「how many times shall I call you?」ボタンをクリックした時の動きです。

function call_you() {
	if($('my_name').value == '') {
		$('call_you').innetText = 'Tell me your name!!!';
		return;
	}
	var value = $('my_name').value;
	var times = $('times').value;
	var list_text = '';
	for(i = 0; i < times; i++) {
		var t = ''
		if (i > 0) {
			t= 's'
		}
		var count = i + 1;
		list_text+= 'Hey ' + value+ '! I call you ' + count+ 'time' + t+ '
';
	}
	$('call_you').innerHTML = list_text;
}

これはそのまま何回あなたの名前を呼びますか？と言うことをしています。
最初に「what is your name?」に入力した値を見て、
入力されていない場合は「教えてよ！」と叫んで処理を終了します。
名前が入力された場合は名前そして繰り返しの回数を変数に代入します。
表示するテキストを初期化して、選択した回数分繰り返してあなたの名前を叫びます！
前回も説明したとおりfor(i = 0; i < times; i++) はiが変数timesより小さい間、 すなわちiが選択した数より小さい間処理を繰り返してくださいと命令しています。 i++は一回の処理の度にiに1を加算してくださいと命令しています。 はい、そうですわかりやすく言うと6回繰り返してくださいと言うことです。 その結果、選択した数だけあなたの名前を呼んでくれます！ 動きは一緒ですが違う繰り返しの書き方もあります。 

function call_you_while() {
	if($(‘my_name’).value == ”) {
		$(‘call_you’).innetText = ‘Tell me your name!!!’;
		return;
	}
	var value = $(‘my_name’).value;
	var times = $(‘while’).value;
	var list_text = ”;
	var i = 0;
	while(i < times) {
		var t = ''
		if (times > 1) {
			t = ‘s’
		}
		list_text += ‘Hey ‘ + value + ‘! I call you while I count ‘ + times + ‘
‘;
		i++;
	}
	$(‘call_you’).innerHTML = list_text;
}

これは回数を選択して「while I call you how many counts do you need?」を押した時の処理です。
while(i < times) iがtimesより小さい間は処理を継続してくださいと命令しています。 前述のforと何が違うのかと言うと、for文は前もって繰り返しの回数が指定されていると言うことです。 whileの場合は繰り返しの処理中に何らかの条件を変わったことを検知して繰り返しの処理を停止します。 ここでは繰り返しのたび、iに1を加算してその値がtimeより小さい場合は繰り返しているので前述の処理と同じような感じになっていますが、大きな違いは繰り返しを停止する条件を常に処理の間確認していると言う点です。 いい例は学校の進級試験ですかね。試験で一定の点数を超えない限りは何度も繰り返して試験を受けなければならないとかもう一年おなじ学年繰り返さなければならないと言うことです。 もし条件から外れない限り永久にループです。そう一生その学年を繰り返さなければなりません。 え？脱出方法はないかって？う〜ん、プログラムを強制的に停止するか、コンピュータが勝手に停止するか、コンピュータを強制的に停止しないとダメですね。 こんな感じですがイメージできますかね？ここまで理解できればほぼプログラムは書けるようになります。 とにかく書くだけであれば本当になんとなります。が更なる飛躍のためにはもうちょっといろいろ知っていた方がいいですよね。 でも今シリーズはこれにて終了。次はまた違うことを考えます。ブログ自体はプログラムの話はちょっとお休みするかもしれませんが懲りずに今後ともお付き合いください。

いろいろ入れたり出したりしましょう

コメントを残す

スクリーンショット 2016-06-09 19.18.56
配列のおさらいです。
サンプルプログラム
代数は物を入れる箱と言う説明をしましたが、配列はその箱が何個もまとめた物です。
いいたとえかどうかはさておき、引き出しをイメージしてください。
そんなに大きくないやつがいいです。
厳密にはその引き出しには同系の物を入れる必要があります。
例えば、お金とか。一段目には1000円、二段目には5000円、三段目には10000円を入れて行く感じです。
なぜ同じような物にすべきなのか？ってまぁこれ本当は何でも入れる引き出しを作れないことはないんだけど
お金を入れる引き出しと言うことにしておけば、そこに入っている金額の合計を出したり、
いくら抜くには何段目の引き出しから取り出せばいいとかそんな感じで金勘定にもつながるからです
という感じでイメージしてください。
厳密になんだよぉわかんないよぉとか言って留まるよりここはそう言う物だと飲み込んで先に進みましょう。
例のごとく初期化の部分はスキップしますね。
さて一番最初のプログラム
「add a certain word」にテキストを入力して「add this!」をクリックした時の処理です。

var word_list = []
function add_word() {
	var add_value = $('add_word').value;
	word_list.push(add_value);
	var list_text = '';
	word_list.forEach(function(value) {
		list_text += value + '
';
	});
	$('word_list').innerHTML = list_text;
	$('add_word').value = '';
}

funnction … の上に宣言されている変数。
今まではfunction(){}の中で宣言していたのにここではfunctionの外に置きます。
その理由は、変数のスコープ、有効範囲によるものです。
function(){}の中で宣言した変数はそのfunctionの中だけ有効で、他の場所では使えません。
これを外においてあげると、このファイルの中のどこでもこの変数が利用できるようになります。
さて次に処理の内容を見てみましょう。
まずは「add_word(add a certain word)」に入力された値を変数add_valueに代入します。
続いてword_listにその値を追加します。
word_list.pushでは
ここでは引き出しを追加してその中に値を代入します。
配列でははじめからこの引き出しは何段ですよ見たいな感じで宣言することはありますが、
今回は宣言時にはこれは「引き出しです」と言うことだけを宣言します。
変数list_textに空文字を代入します。
word_list.forEach
は配列の要素を展開して繰り返す処理です。
展開して繰り返すやり方の一つで、引数に処理を書くことが出来ると言う利点があります。
まぁ後から出て来るfor(…)というやり方もありますが、これは配列のサイズとか気にしないで
処理を実行できるのでかなり便利だよねって私はよく使います。
forEach内の処理ですがここではlist_textに配列に格納した値を追加して行きます。
繰り返しの処理が終わったら、「add_value」の中にhtmlとしてlist_textを表示させます。
最後に「add_value」の文字列を消します。
もう一度テキスト「add a certain word」にテキストを入力して「add this!」ボタンをクリックしてください。
新たに入力した文字が表示されましたよね。
これは入力した文字列を配列に追加した結果です。なんとなくわかりましたか？

続いては「delete a word from list」にテキストを入力して「delete this!」をクリックした時の処理です。

function delete_word() {
	var delete_value = $('delete_word').value;
	var list_text = '';
	var count = 0;
	var result = false;
	// var del_index = null; not in use
	// check word
	for(i = 0; i < word_list.length; i ++) {
		if (word_list[i] == delete_value) {
			result = true;
		break;
		}
	};
	// delete index
	if(!result) {
		return;
	}
	word_list.splice(count, 1);
	word_list.forEach(function(value) {
		list_text += value + '
';
	});
	$('word_list').innerHTML = list_text;
	$('delete_word').value = '';
}

結構長い！
まずは「delete_word(delete a word from list)」に入力された値を変数delete_valueに代入します。
変数list_textに空文字を代入します。
変数countに0を代入します。
変数resultにfalseを代入します。
続いて配列word_listを要素の数だけ繰り返します。
for(i = 0; i < word_list.length; i++) これはiに0を代入して、iがword_listの要素数より少ない間繰り返してください、繰り返す間iは1ずつ増やしてください と言うことを命令しています。 この繰り返しの処理ではword_listのi番目の値が入力した値と同じの場合に繰り返しを停止することを指示しています。 停止する前にはresult(結果)をtrueにします。 ifの処理の後にcount++とありますが、これは停止するまでcountの値を1ずつ増やすことになります。 さてここでわかることは、繰り返しが停止されたのはword_listのcount番目の要素の時 すなわちcount番目の値が入力された値と同じであったと言うことがわかります。 仮に同じ値がない場合はresultはfalseのままです。そう、同じ値がある場合はその結果はtrueです。 resultには同じ結果があったよと言う結果が格納されていると言うわけです。 さて、同じ値がなかった場合はreturnで処理を終了させます。 同じ値があった場合はcount番目の要素を削除して再度、配列の内容を表示させるようにします。 という感じで、配列から要素を削除をすることができました。 物理的な引き出しは引き出しの段そのものを削除することは出来ませんがプログラムの配列ではそれが可能です。 まぁ引き出しと言うよりはだるま落とし積んで落としてって感じの方がわかりやすいかもしれませんね。 という感じで前半戦終了。残りはまた次回で。結構大変。。。

アレーな感じ

コメントを残す

スクリーンショット 2016-06-07 20.46.09
今回は配列と繰り返しの処理。これはプログラミングではとても良く使われます。
配列って何？ってところからですかね。
色んな考え方があります。変数が一つの箱であれば配列はその箱が複数個あると言う感じです。
例としては、アパートのフロアとか、部屋とか複数段の引き出しとか。
っていい例がやっぱり見つからない。。。
何だろうな、同じような物を繰り返し使う時に、バラバラに放置しないで一つの塊として保持する感じです。
と言うことで解説はまた次回ですね。それではまた。
そしてサンプルはこちら。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>What do you alternate?</title>
<body>
<p>
<input type="text" id="add_word" placeholder="add a certain word">
<button id="button1">add this!</button>
</p>
<p>
<input type="text" id="delete_word" placeholder="delete a word from list">
<button id="button4">delete this!</button>
</p>
I added ...
<div id="word_list">
</div>
<p>
<input type="text" id="my_name" placeholder="what is your name?">
</p>
<p>
<select id="times">
<option value="1">001</option>
<option value="2">002</option>
<option value="3">003</option>
<option value="4">004</option>
<option value="5">005</option>
<option value="6">006</option>
</select>
<button id="button2">how many times shall I call you?</button>
</p>
<p>
<select id="while">
<option value="1">001</option>
<option value="2">002</option>
<option value="3">003</option>
<option value="4">004</option>
<option value="5">005</option>
<option value="6">006</option>
</select>
<button id="button3">while I call you how many counts do you need?</button>
</p>
<div id="call_you"></div>
</body>
<script type="text/javascript">
window.onload = function(){
	init_event();
}
function init_event(){
	$('button1').onclick = add_word;
	$('button2').onclick = call_you;
	$('button3').onclick = call_you_while;
	$('button4').onclick = delete_word;
}
var word_list = []
function add_word() {
	var add_value = $('add_word').value;
	word_list.push(add_value);
	var list_text = '';
	word_list.forEach(function(value) {
		list_text += value + '<br>';
	});
	$('word_list').innerHTML = list_text;
	$('add_word').value = '';
}
function delete_word() {
	var delete_value = $('delete_word').value;
	var list_text = '';
	var count = 0;
	var result = false;
	var del_index = null;
	// check word
	for(i = 0; i < word_list.length; i ++) {
		if (word_list[i] == delete_value) {
			result = true;
		break;
		}
	};
	// delete index
	if(!result) {
		return;
	}
	word_list.splice(count, 1);
	word_list.forEach(function(value) {
		list_text += value + '<br>';
	});
	$('word_list').innerHTML = list_text;
	$('delete_word').value = '';
}
function call_you() {
	if($('my_name').value == '') {
		$('call_you').innetText = 'Tell me your name!!!';
		return;
	}
	var value = $('my_name').value;
	var times = $('times').value;
	var list_text = '';
	for(i = 0; i < times; i++) {
		var t = ''
		if (i > 0) {
			t= 's'
		}
		var count = i + 1;
		list_text+= 'Hey ' + value+ '! I call you ' + count+ 'time' + t+ '<br>';
	}
	$('call_you').innerHTML = list_text;
}
function call_you_while() {
	if($('my_name').value == '') {
		$('call_you').innetText = 'Tell me your name!!!';
		return;
	}
	var value = $('my_name').value;
	var times = $('while').value;
	var list_text = '';
	var i = 0;
	while(i < times) {
		var t = ''
		if (times > 1) {
			t = 's'
		}
		list_text += 'Hey ' + value + '! I call you while I count ' + times + '<br>';
		i++;
	}
	$('call_you').innerHTML = list_text;
}
/**
* get object
*/
function $(id) {
	return document.getElementById(id);
}
</script>
</html>