![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
マンガで分かる JavaScriptプログラミング講座
http://crocro.com/write/manga_javascript/wiki.cgi
『<script>～</script>』は、この範囲がプログラムという意味です。
<script type="text/javascript">
<!--
alert("test");
// -->
</script>
書き方は以下の2種類です。
『var a = 3;』は
『[変数][a]は、[3]です（[終わり]）』 という意味になる
var 『これから変数を書く』という宣言 a 『変数の名前』 = 『左部分の中身は、右部分です』という記号 3 数字の3 ; この式は終わり、以降は次の式ですという記号
これが『var a = 3;』の 意味になる
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
// Webページに文字列を表示
document.write("文字列1");
.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
『条件分岐』を行うための『if』文は、以下のように書きます。
if (/* 条件式 */) {
// Aの処理
} else {
// Bの処理
}
条件分岐式には、『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; // 処理終了
}
for (var i = 1; i <= 1000; i ++) {
document.writeln(i + "回目：桑立");
}
→ カウンターの「i」を「var i = 1;」で宣言して、用意している。
ループ処理に慣れてくると、ある処理を無視したり、途中で終了したりといった、特殊な動作をしたくなってきます。
そういった時に使うのが、『break』『continue』『ラベル』といった命令です。
『break』は、ループ処理を終了します。
for (var i = 0; i < 10; i ++) {
if (i == 7) {
// 変数『i』が『7』ならループを抜ける
document.write(i + "finish!<br>");
break;
}
document.write(i + "<br>");
}
『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!』と出力した時点で処理が終了しています。
さて、この『ラベル』ですが、『ラベル』の末尾は『;』（セミコロン）ではなく『:』（コロン）なので、注意してください。
慣れない内は、よく間違えます。
→「ラベル」ってのは便利だな！ 複雑な制御が必要なときに、ラベルが使える？
『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);
→ 無限ループに注意！ 終了条件を間違えないこと。
『配列』は、以下のようにして作れます。
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()メソッドで、リスト（配列）を作る方法。『連想配列』（ハッシュ）は、以下のようにして作ります。
→連想配列＝キー（要素を参照するためのポインター）に数字ではなく、文字列を使った配列。
var tensuuHash = new Array(); tensuuHash["足立"] = 65; tensuuHash["安藤"] = 78; tensuuHash["内木"] = 87;
var tensuuHash = {"足立" : 65 ,"安藤" : 78 ,"内木" : 87};
→連想配列のリテラル{キー:値, …}に初期値をセットして、連想配列を作る方法。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
『連想配列』は、『.length』で要素の数を知ることはできません。
また、数字の添え字を使って要素にアクセスすることもできません。
『連想配列』の各要素をループ処理で利用する際には、『for』文ではなく、『for in』文を利用します。
『for in』文では、『for (～)』の括弧内の書き方が『for』文とは異なります。
for (変数の初期化; 継続条件; 変数の増減) {
// ループ処理（何度も実行する処理）
}for (キーを取得する変数 in 連想配列の変数) {
// ループ処理（何度も実行する処理）
}『for in』文では、『for (～)』の括弧内で、『連想配列の変数』と、その要素の『キー』を取得する変数を書きます。
この『キー』を取得する変数には、ループが1回行われるごとに、『キー』が1つずつ代入されていきます。
ループ処理の中では、この『キー』を利用して、連想配列の各要素の値を取得します。
そして、全ての『キー』を処理し終えたあとに、ループを抜けます。
『関数』は、何度も行う処理を、一度だけ書いて済ませるプログラムの書き方です。
この方法を使えば、プログラムをいくつかの部品に分けて、組み立てるようにしてプログラムを書くことができます。
『関数』は、以下の方法で作れます。
function 関数名(引数) {
内部処理
return 戻り値;
}
作成した『関数』は、以下のように利用できます。
var kekka = han(16);
『再帰関数』とは、『関数』から『それ自身を呼び出す』関数のことです。
// 再帰関数を呼び出し
saiki(0, 12);
// 再帰関数
function saiki(no, max) {
// 『no』（再帰回数）を引数1として取得
// 『max』（終了条件の値）を引数2として取得
// 終了条件を満たせば終了
if (no >= max) return;
// グラフの作成
var str = "";
for (var i = 0; i < no; i ++) {
for (var j = 0; j <= i; j ++) {
str += "+";
}
}
document.write(str + no + "<br>");
// 再び自分自身を呼び出す
saiki(no + 1, max);
}
「スコープ」（scope）＝変数が有効な「範囲」のこと。
JavaScriptのプログラムでは、『関数』の内側の領域は、外側の領域とは違う空間になっています。
『関数』の外側の通常の場所を『グローバル』と呼び、『関数』の内側になる場所を『ローカル』と呼びます。
『グローバル』で宣言された変数を『グローバル変数』、『ローカル』で宣言された変数を『ローカル変数』と呼びます。
【グローバルな領域】
var globalVar = 1; // グローバル変数
function kansuu() {
【ローカルな領域】
var loclalVar = 0; // ローカル変数
}
【グローバルな領域】
var globalVar2 = 2; // グローバル変数
（参考）
スコープ - Wikipedia
プログラミングでのスコープとは、ある変数や関数が特定の名前で参照される範囲のこと。
変数の種類のことを『型』と言います。
変数の『型』は、『typeof』関数を使って調べることができます。
var no = 0; // 『数値変数』を初期化 var str = "文字列"; // 『文字列変数』を初期化 // 『typeof』関数で、変数の『型』を調べる alert(typeof(no)); // 『number』（数）と表示 alert(typeof(str)); // 『string』（文字）と表示
『オブジェクト』型の変数は、内部に変数や関数を保持している変数です。
『オブジェクト』型変数内の変数や関数は、『オブジェクト.変数名』『オブジェクト.関数名()』として利用することができます。
object.variable; // 『オブジェクト』型変数内の変数を利用 object.function(); // 『オブジェクト』型変数内の関数を利用
→クラスベースか、プロトタイプベースか、とかの仕組みの話を持ち出さない間は、JavaScriptのオブジェクトも、他のプログラム言語と同じなんだよなー。
つまり、
そんだけの話？
下記の『document』は、Webページ内でJavaScriptを利用する際に、最初から用意されているオブジェクトになります。
他にも、『window』などのオブジェクトが、用意されています。
document.title; // 『document』オブジェクトの『title』変数
document.write(""); // 『document』オブジェクトの『write』関数
documentオブジェクトには、最初から『title』変数や、『write』関数が用意されている、っていう話ですね？
『連想配列』と『オブジェクト』は同じものです。
→何気に、これ重要な説明だな！！！（JSの特徴）
var tensuuArray = {
"足立" : 65,
"安藤" : 78,
"木村" : 43
};
alert(tensuuArray.足立); // 『65』と表示
本来は『tensuuArray["足立"]』と書くべきところを『tensuuArray.足立』と書いています。
書き方を変えても、正しく値を参照できます。
『オブジェクト』を『連想配列』として、『for in』文で処理すれば、キーと値を表示させることができます。
以下の例では、『document』オブジェクトを『連想配列』として扱い、キー、型、値を調べて表示させています。
var str = "";
for (var key in document) {
str += "キーが " + key
+ " : 型が " + typeof(document[key])
+ " : 値が " + document[key]
+ "<br>"; // 改行タグ
}
document.write(str);
プロパティの中でも、関数は特別に『メソッド』と呼びます。
変数の『型』には『function』型と呼ばれるものがあります。
これは、『関数』を変数として格納したものです。
JavaScriptでは、『関数』も数値や文字列と同じように、変数に入れて利用することができます。
→ これがJavaScriptのコードが、他の言語と比べて、読みにくい理由の一つなんだよねー？
→ 「見た目が変数でも、中身は関数」って場合があるから、変数と関数のどっちなのか？を勘違いしなようにしないといけない。
以下、『関数』を変数に入れて利用する例を示します。
// 関数を作成
var func = function () {
alert("関数を変数にしたよ！");
};
// 関数を実行 func(); // 変数の後に『()』を付けて実行
変数の中身に、関数が入っている場合のみ、変数名の後ろに();を付ければ、関数が実行される。
これが、自分にとっての罠、分かりにくかった点だな！！！
JavaScriptのFunction型変数の正体を見破ったり！！！
次からは、騙されへんで～ｗｗｗ
// 配列に関数を入れて実行 var aArray = new Array(1); aArray[0] = func; aArray[0](); // 配列の後に『()』を付けて実行
// 『連想配列』に関数を入れて // プロパティとして実行 aArray["rensou"] = func; aArray.rensou(); // プロパティの後に『()』を付けて実行
3種類示しましたが、いずれもきちんとダイアログが表示されます。
『function () {～}』のように、『function』の後に名前がない関数のことを『無名関数』と呼びます。
JavaScriptでは、ある程度以上に高度なプログラムを書き始めると、この『無名関数』を多用するようになります。
そのため、こういった「名前のない関数」があるということを覚えておいてください。
よーく、覚えておこう！
