[[JavaScript]]
#norelated
#contents
//----------------------------------------
* 学習メモ [#ne586b62]
//----------------------------------------
マンガで分かる JavaScriptプログラミング講座
http://crocro.com/write/manga_javascript/wiki.cgi
//----------------------------------------
* 第3話：書いてみよう [#cf86a205]
//----------------------------------------
//----------------------------------------
**『<script>』タグ [#cab190f8]
『<script>～</script>』は、この範囲がプログラムという意味です。
<script type="text/javascript">
<!--
alert("test");
// -->
</script>
//----------------------------------------
**『コメントアウト』 [#n73a3b0d]
書き方は以下の2種類です。
- 行の途中に『//』と書く 『//』の右側が無視される。
- 本文中に『/*～*/』と書く 『～』の部分が無視される。
//----------------------------------------
* 第4話：数値変数と計算 [#e3fc6b24]
//----------------------------------------
//----------------------------------------
** 変数の宣言 [#r4b71c72]
『var a = 3;』は
『[変数][a]は、[3]です（[終わり]）』 という意味になる
var 『これから変数を書く』という宣言
a 『変数の名前』
= 『左部分の中身は、右部分です』という記号
3 数字の3
; この式は終わり、以降は次の式ですという記号
これが『var a = 3;』の 意味になる
//----------------------------------------
** Mathオブジェクトのメソッド [#h1dd9b8c]
Math.ceil(n) 小数点以下を繰り上げ a = Math.ceil(1.55); 変数『a』に『2』を代入
Math.floor(n) 小数点以下を繰り下げ a = Math.floor(1.55); 変数『a』に『1』を代入
Math.round(n) 小数点以下を四捨五入 a = Math.round(1.55); 変数『a』に『2』を代入
等
（参考）
http://www.tohoho-web.com/js/operator.htm
http://www.tohoho-web.com/js/math.htm
http://memopad.bitter.jp/w3c/jsref/jsref_obj_math.html
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math
//----------------------------------------
* 第5話：文字列変数と様々な出力 [#sd77652a]
//----------------------------------------
//----------------------------------------
** 『alert』以外の 『文字列』 の表示方法 [#k89fb8af]
// Webページに文字列を表示
document.write("文字列1");
//----------------------------------------
**改行文字についての補足 [#o9ea4cb6]
- Windowsでは、普通のテキストファイルの改行は『\r\n』と2つの文字で表されています。
- Unix系のOSでは、テキストファイルの改行は『\n』と1文字になっています。
-『\r』は『キャリッジリターン』（carriage return）で、『復帰』という意味です。
-『\n』は『ニューライン』（newline）で、『改行』という意味です。
//----------------------------------------
** Stringオブジェクトのメソッド [#z211bf10]
.length 文字列の長さ a = "ABCDEF".length; 変数『a』に『6』が入る
等
（参考）
http://www.tohoho-web.com/js/string.htm
http://memopad.bitter.jp/w3c/jsref/jsref_obj_string.html
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String
//----------------------------------------
* 第6話：真と偽 条件分岐と演算子 [#k300b295]
//----------------------------------------
//----------------------------------------
**『if』文 [#v84b28d7]
『条件分岐』を行うための『if』文は、以下のように書きます。
if (/* 条件式 */) {
// Aの処理
} else {
// Bの処理
}
//----------------------------------------
**『switch』文 [#x5867b88]
条件分岐式には、『if』以外に、『switch』もあります。
var tensuu = 3;
switch (tensuu) {
case 1:
// 変数『tensuu』の数値が『1』の場合
alert("成績1番 おめでとう！");
break; // 処理終了
case 2:
// 変数『tensuu』の数値が『2』の場合
alert("成績2番 銀メダル！");
break; // 処理終了
case 3:
// 変数『tensuu』の数値が『3』の場合
alert("成績3番 銅メダル！");
break; // 処理終了
default:
// 変数『tensuu』の数値が『その他』の場合
alert("もっと頑張りましょう");
break; // 処理終了
}
//----------------------------------------
* 第7話：ループ処理 [#q705cfb6]
//----------------------------------------
//----------------------------------------
** 『for』文 [#wbf57872]
for (var i = 1; i <= 1000; i ++) {
document.writeln(i + "回目：桑立");
}
→ カウンターの「i」を「var i = 1;」で宣言して、用意している。
//----------------------------------------
** ループ処理内での特殊な動作 [#bcddf12e]
ループ処理に慣れてくると、ある処理を無視したり、途中で終了したりといった、特殊な動作をしたくなってきます。
そういった時に使うのが、『break』『continue』『ラベル』といった命令です。
***『break』 [#y454155c]
『break』は、ループ処理を終了します。
for (var i = 0; i < 10; i ++) {
if (i == 7) {
// 変数『i』が『7』ならループを抜ける
document.write(i + "finish!<br>");
break;
}
document.write(i + "<br>");
}
***『continue』 [#o386790b]
『continue』は、ループ処理をスキップして、『for (～)』の行に戻ります。
for (var i = 0; i < 10; i ++) { // *1
if (i == 7) {
// 変数『i』が『7』なら、
// 『*2』以下を処理せず『*1』に戻る。
document.write("skip!<br>");
continue;
}
// *2
document.write(i + "<br>");
}
***『ラベル』 [#n77f5e1a]
『ラベル』は、少し複雑です。『ラベル』は、『break』や『continue』と組み合わせて使います。
『for』文が入れ子になっている場合、『break』や『continue』は、内側の『for』文に対して働きます。
// 『*1』の『for』文に
// 『outer』という『ラベル』を付ける
outer:
for (var i = 0; i < 10; i ++) { // *1
for (var j = 0; j < 10; j ++) { // *2
if (j == 7) {
// 変数『j』が『7』なら
// 『outer』という『ラベル』が付いた
// 『*1』のループを抜ける
document.write(i + "-" + j + "finish!<br>");
break outer;
}
document.write(i + "-" + j + ", ");
}
}
『outer』という『ラベル』で指定した『for』文を『break』の対象として、外側の『for』文を一気に抜けています。
そのために、内部の『for』文であるにも関わらず、『finish!』と出力した時点で処理が終了しています。
さて、この『ラベル』ですが、『ラベル』の末尾は『;』（セミコロン）ではなく『:』（コロン）なので、注意してください。
慣れない内は、よく間違えます。
→「ラベル」ってのは便利だな！ 複雑な制御が必要なときに、ラベルが使える？
**『while』『do while』 [#k5d39831]
『for』以外に、『while』『do while』という『ループ文』もあります。
これらの『ループ文』は、『for』文から『変数の初期化』と『変数の増減』を省略したような形をしています。
var i = 0;
while (i < 10) {
document.write(i + ",");
i ++;
}
var i = 0;
do {
document.write(i + ",");
i ++;
} while (i < 10);
→ 無限ループに注意！ 終了条件を間違えないこと。
//----------------------------------------
* 第8話：配列 [#v30109a7]
//----------------------------------------
//----------------------------------------
**『配列』の様々な作り方 [#e5707a04]
『配列』は、以下のようにして作れます。
- new演算子
var nameArray = new Array(3);
nameArray[0] = "足立";
nameArray[1] = "安藤";
nameArray[2] = "内木";
→配列に、「キー」と「値」を1個ずつセットしていく方法。
- コンストラクター
var nameArray = new Array("足立","安藤","内木");
→new演算子でオブジェクトを作るときに、コンストラクターに初期値を与えて、配列を作る方法。
- リスト
var nameArray = ["足立","安藤","内木"];
→配列のリテラル[ ]に初期値をセットして、リスト（配列）を作る方法。
- 文字列の分割
var name = "足立,安藤,内木";
var nameArray = name.split(","); // 『,』で分割して配列に
→Stringオブジェクトのsplit()メソッドで、リスト（配列）を作る方法。
//----------------------------------------
** 『連想配列』（ハッシュ）の作り方 [#m99995c5]
『連想配列』（ハッシュ）は、以下のようにして作ります。
→連想配列＝キー（要素を参照するためのポインター）に数字ではなく、文字列を使った配列。
- new演算子
var tensuuHash = new Array();
tensuuHash["足立"] = 65;
tensuuHash["安藤"] = 78;
tensuuHash["内木"] = 87;
- 連想配列のリテラル
var tensuuHash = {"足立" : 65 ,"安藤" : 78 ,"内木" : 87};
→連想配列のリテラル{キー:値, …}に初期値をセットして、連想配列を作る方法。
//----------------------------------------
** Arrayオブジェクトのメソッド [#c9116cc5]
>var a = ["aa","bb"];
.length 配列の要素の個数 x = a.length; 変数『x』に『2』が入る
（参考）
http://www.tohoho-web.com/js/array.htm
http://memopad.bitter.jp/w3c/jsref/jsref_obj_array.html
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array
