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

改行文字についての補足

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話:配列

『配列』の様々な作り方

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

『連想配列』(ハッシュ)の作り方

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

Arrayオブジェクトのメソッド

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


トップ   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS