って書いてみたけど、私の第一回javascript復習シリーズみたいな感じでしたね。と言うことでリンクをまとめてみました。タイトルはどれも本当にひどいね！はい、セコいですが広告も付けちゃいましたよ。。。小銭稼げたらなぁなんて。さて、プログラムな話は違うテーマで今後もやりたいけどどんなのがいいのかなぁ？と模索中です。多分。。。ですが、SQLかなぁ。それ用のWebアプリも作りながらやってみようかと思っています。と言っても予定は予定。それ以外にもいろいろ面白いことあったら投稿して行きます。あとSNSもよろしくと言うことで。
このシリーズのパイロット版です。なにげに色んな要素を詰め込みんでいました。。。。
変数のお話です。オブジェクトの参照とか本当にめんどうですよね。
if文です。論理演算本当に面倒な場合もあるけど、プログラ民の基本はシンプルに書く。
配列のおさらいです。
サンプルプログラム
代数は物を入れる箱と言う説明をしましたが、配列はその箱が何個もまとめた物です。
いいたとえかどうかはさておき、引き出しをイメージしてください。
そんなに大きくないやつがいいです。
厳密にはその引き出しには同系の物を入れる必要があります。
例えば、お金とか。一段目には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番目の要素を削除して再度、配列の内容を表示させるようにします。
という感じで、配列から要素を削除をすることができました。
物理的な引き出しは引き出しの段そのものを削除することは出来ませんがプログラムの配列ではそれが可能です。
まぁ引き出しと言うよりはだるま落とし積んで落としてって感じの方がわかりやすいかもしれませんね。
という感じで前半戦終了。残りはまた次回で。結構大変。。。
今回は配列と繰り返しの処理。これはプログラミングではとても良く使われます。
配列って何？ってところからですかね。
色んな考え方があります。変数が一つの箱であれば配列はその箱が複数個あると言う感じです。
例としては、アパートのフロアとか、部屋とか複数段の引き出しとか。
っていい例がやっぱり見つからない。。。
何だろうな、同じような物を繰り返し使う時に、バラバラに放置しないで一つの塊として保持する感じです。
と言うことで解説はまた次回ですね。それではまた。
そしてサンプルはこちら。
<!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>