マンガで分かるJavaScriptプログラミング講座メモのバックアップ(No.2)

バックアップ一覧
差分を表示
現在との差分を表示
ソースを表示
マンガで分かるJavaScriptプログラミング講座メモへ行く。
- 1 (2015-03-08 (日) 14:57:12)
- 2 (2015-03-08 (日) 16:56:06)
- 3 (2015-03-08 (日) 20:39:07)

JavaScript

学習メモ †

マンガで分かる JavaScriptプログラミング講座
http://crocro.com/write/manga_javascript/wiki.cgi

↑

第3話：書いてみよう †

↑

『<script>』タグ †

『<script>～</script>』は、この範囲がプログラムという意味です。

<script type="text/javascript">
<!--
alert("test");
// -->
</script>

↑

『コメントアウト』 †

書き方は以下の2種類です。

行の途中に『//』と書く『//』の右側が無視される。
本文中に『/*～*/』と書く『～』の部分が無視される。

↑

第4話：数値変数と計算 †

↑

変数の宣言 †

『var a = 3;』は
『[変数][a]は、[3]です（[終わり]）』という意味になる

var 『これから変数を書く』という宣言
a   『変数の名前』
=   『左部分の中身は、右部分です』という記号
3   数字の3
;    この式は終わり、以降は次の式ですという記号

これが『var a = 3;』の意味になる

↑

Mathオブジェクトのメソッド †

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話：文字列変数と様々な出力 †

↑

『alert』以外の『文字列』の表示方法 †

// Webページに文字列を表示
document.write("文字列1");

↑

改行文字についての補足 †

Windowsでは、普通のテキストファイルの改行は『\r\n』と2つの文字で表されています。
Unix系のOSでは、テキストファイルの改行は『\n』と1文字になっています。

『\r』は『キャリッジリターン』（carriage return）で、『復帰』という意味です。
『\n』は『ニューライン』（newline）で、『改行』という意味です。

↑

Stringオブジェクトのメソッド †

.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話：真と偽条件分岐と演算子 †

↑

『if』文 †

『条件分岐』を行うための『if』文は、以下のように書きます。

if (/* 条件式 */) {
    // Aの処理
} else {
    // Bの処理
}

↑

『switch』文 †

条件分岐式には、『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話：ループ処理 †

↑

『for』文 †

for (var i = 1; i <= 1000; i ++) {
   document.writeln(i + "回目：桑立");
}

→ カウンターの「i」を「var i = 1;」で宣言して、用意している。

↑

ループ処理内での特殊な動作 †

ループ処理に慣れてくると、ある処理を無視したり、途中で終了したりといった、特殊な動作をしたくなってきます。
そういった時に使うのが、『break』『continue』『ラベル』といった命令です。

↑

『break』 †

『break』は、ループ処理を終了します。

for (var i = 0; i < 10; i ++) {
   if (i == 7) {
       // 変数『i』が『7』ならループを抜ける
       document.write(i + "finish!<br>");
       break;
   }
   document.write(i + "<br>");
}

↑

『continue』 †

『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>");
}

↑

『ラベル』 †

『ラベル』は、少し複雑です。『ラベル』は、『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』 †

『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話：配列 †

↑

『配列』の様々な作り方 †

『配列』は、以下のようにして作れます。

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()メソッドで、リスト（配列）を作る方法。

↑

『連想配列』（ハッシュ）の作り方 †

『連想配列』（ハッシュ）は、以下のようにして作ります。
→連想配列＝キー（要素を参照するためのポインター）に数字ではなく、文字列を使った配列。