JavaScriptを勉強しよう(1)

top2012_0122.jpg2012年になりました。今年もよろしくお願いします。

さて、今回はJavaScriptに関して書き留めておこうと思います。
ドットインストールでいろいろと勉強をしようと考えております。
現在はTwitter Bootstrapの基礎とJavaScriptの勉強しか完了しておりませんが、 実に充実した内容で三日坊主になる事なく続いております。

■JavaScriptに関して
jQueryを通してかなり身近になったJSですが、基本が分かっていないのが現状でした。
例えば、関数、変数、引数、配列などの知識。なんとなくはわかっているけど・・・。
という自分には良い感じの内容でした。

そこで回想を意味も含め自分なりのポイントを抑えていこうと思います。

■変数
変数とは、変数は値を入れておく「箱」である。
◇記述方法
変数 = 値を入れておく「箱」
var message = "Hello World";

箱の中に格納するデータによって、いろいろな「型」がある。
文字列型、数値型、真偽、その他に「定義されていない」という意味のundefinedや「何もない」という意味のnullがある。
更に配列やオブジェクトというデータ型もある。

	var message = "Hello World, Again"; //文字列型
	var x = 55; //数値型(-や小数点なども可能 -55や5.5)
	var f = true //真偽(false/true)
	var x = undefined; //定義されていない。という意味
	var y = null; //何もない。という意味

◇データ型には演算子などの定義もある。

	//文字列に関する演算子
	var x ="Hello" + "World"; // +を使って文字列を連結させる
	
	//数値に関する演算子
	var x = 5 + 5; // % も使用できる。この場合は「余り」を出す時に使用
	var x += 5; // x = x + 5;という意味
	x++; // x = x + 1;
	x--; // x = x - 1;

同じ値を追加回す、データを格納して別の時に使用するなどに使えそう。
具体的な使い方は今後勉強して中で把握していこうと思います。

■条件分岐
条件分岐にはifとswitchを使用したパターンがある。
◇ifの場合

	//条件分岐 (if)
	var score = 29;
	if (score >= 70) { //何々と同じという場合は == となる。!=は等しくない。という時に使用する。
		alert("スコアが70より大きい時に表示");
	} else if (score >= 30 ) {
		alert("スコアが70より小さく30よりも大きい時に");
	} else {
		alert("スコアが30未満の時に表示");
	}

ifは、はじめに条件分岐である事を宣言して、続いて条件を定義する。(if)
次にその定義に当てはまらない時の処理を記載する。(else)
また、新たな条件分岐を加える時は、else if を用いて条件を定義することも可能。(else if)
上記を繰り返すことで条件分岐を複数設定する事ができる。

◇switchの場合
条件分岐処理の一つで、複数の処理まとめて記載する時に便利。

	var direction = 'right';
	switch (direction) {
		case 'right':
			x = x + 10;
			break; //処理終了
		case 'left':
			x = x - 10;
			break;
		case 'up':
			y = y - 10;
			break;
		case 'down':
			y += 10; // y = y + 10;
			break;
		default:
		//例外処理
		break;
ピンとこないけど、カーソルやマウスなどを使用した際の複数の処理をまとめて記述するのに向いて いる!らしい。処理を抜ける時は break を使用。

■ループ処理
ループ処理とは繰り返しの処理を行う。
ループ処理を行うにはwhileとforで行う。
特徴は、指定の条件がくるまで処理を行う。

◇whileの記述方法

	//ループ (while)
	var i = 0;
	while (i < 10) {
		console.log(i);
		i++; // i = i + 1; iを一つ足しなさい。という意味
	}

◇ifの記述方法

	for (var i = 0; i < 10; i++) {
	//iを0で初期化して、iが10よりも小さい場合、iを1づつ増やしながらこの処理を行いなさい
		console.log(i);
	}
whileとforの使い所がいまいち分かっていない。処理の方法と記述方法は把握したが、
どういうシーンでwhileかforを使うべきなのかは、分かっていない。

ということでGoogle先生に聞いてみました。

参考にしたのは@ITの、第5回 JavaScriptで繰り返し処理をしてみようです。
whileに関して
http://www.atmarkit.co.jp/fcoding/articles/js/05/js05a.html

while(繰り返す条件){
繰り返したい動作
}

forに関して
http://www.atmarkit.co.jp/fcoding/articles/js/05/js05b.html

for(カウント用変数の用意;繰り返す条件;カウント用変数の変更){
繰り返したい動作
}

この他にもdo~を使用した記述方法もあるみたいですね。
さてさて、今回はここまで。
残りはまた次回にでもまとめていこうと思います。
しかし、上記だけでもどんな事が出来るのでしょうか。
ちょっと考えただけでワクワクしますねー。

JavaScriptの基礎をひとまずやってみよう!という方はドットインストールで一歩を踏み出してみてはいかがでしょうか。