JavaScriptの基礎の変更点

追加された行はこの色です。
削除された行はこの色です。
JavaScriptの基礎へ行く。
JavaScriptの基礎の差分を削除
* JavaScriptの基礎 [#i86f1007]

#contents

** HTMLを用意する [#ic4dd6a8]
 <!DOCTYPE html>
 <html lang="ja">
 	<head>
 		<meta charset="UTF-8">
 		<title>JavaScriptの基礎</title>
 	</head>
 	<body>
 		<h1>JavaScriptの練習</h1>
 		<script>
 		</script>
 	</body>
 	</html>

** 変数、データ型、演算子 [#w2c8701a]
*** 変数 [#p8dd5db9]
変数＝値をいれておく「箱」

*** 代入演算子 [#l0fb4008]
 var x = 5;

*** 文字列に’関する演算子 [#x20d6fd8]
 var x = "hello" + "world";

*** 数値に関する演算子 [#m3816d87]
余り
 var x = 5 % 5;
x = x + 5;
 var x = + 5;
x = x + 1;
 x++;
x = x - 1;
 x--;

** ifと比較演算子 [#q04fcc6f]
*** 条件分岐(if) [#h62dcf22]
 var score = 80;
 if (score >=70) {
 	alert("合格！");
 } else if (score >= 30) {
 	alert("不合格！");
 } else {
 	alert("追試！");
 }

*** 条件分岐(switch) [#jc882aa9]
 var direction = 'right';
 switch (direction) {
 	case 'right';
 		x = + 10;
 		break;
 	case 'left';
 		x = + 10;
 		break;
 	case 'up';
 		y = y - 10;
 		break;
 	case 'down';
 		y += 10; // y = y + 10;
 		break;
 	default; // 例外処理
 		break;
 }

** ループ(Loup) [#d34843df]
*** while文 [#j9a4d11d]
 var i = 0;
 while (i < 10) {
 	console.log(i);
 		i++;
 }
 // 0 - 9までの数字が表示される

*** for文 [#e2eab9b0]
 var i = 0;
 for (var i = 0; i < 10; i++) {
 	console.log(i);
 }
 // 0 - 9までの数字が表示される

** 関数(Functions) [#t7b5870b]
 // 関数は複数の処理をまとめたもの。
 function sum(a, b) { // a, bは引数
 	return (a + b);
 }
 var result = sum(50, 33);
 alert(result);

*** ローカル変数(Local Variables) [#w3d5651b]
 function getPrice(x) {
 	var rate = 0.02; // ローカル変数
 	return (x * rate);
 }
 console.log(getPrice(83);)

実行結果(console)
 1.6600000000000001

** 配列(Arrays) [#s1b93a37]
 // 配列はグループ化されたデータ
 var sales = [ 100, 200, 150 ];
 // var sales0 = 100;
 // var sales0 = 200;
 // var sales0 = 150;
 console.log(sales[1]);

実行結果(console)
 200

*** 連想配列(Associative Arrays) [#s3bed2c2]
 var sales = { 'year2000' : 100, 'year2001' : 200, 'year2002' : 150 }
 console.log(sales[ 'year2002' ]);

実行結果(console)
 150

** Javascriptオブジェクト(Javascript Object) [#rae35bec]
日付、数字、文字列
 // プロパティ(属性)
 var s = new String("this is a pen.");
 console.log(s.length);
 
 // メソッド(処理)
 var d = new Date();
 console.log(d.getFullYear());

実行結果(console)
 14
 2011

*** Stringオブジェクト [#lcbd7eb5]
 var s = new String("this is a pen.") // new String()省略可
 consolo.log(s.substr(2, 2));'
 console.log(s.replace("pen","pencil"));

実行結果(console)
 is
 this is a pencil.

*** Arrayオブジェクト [#m5136012]
 var a = [12, 22, 44, 55];
 // var a = new Array(12,22,44, 55);
 // JavaScriptで自動的にArrayと認識
 console.log(a.join(","));
 console.log(a.reverse());

実行結果(console)
 12,22,44,55
 [55, 44, 22, 12]

*** Dateオブジェクト [#lfa9298c]
 // var d = new Date(2011, 7, 21, 15, 52, 00);
 // 月: 0 - 11
 var d = new Date(); // 現在のDATE
 console.log(d.getMonth());
 console.log(d.getTime());

実行結果(console) (12/31/14:30)
11
1325309472769

*** Mathオブジェクト [#uaada5ff]
 // プロパティ
 // var m = new Math();
 //  // 変数宣言は省略可
 console.log(Math.PI); // 円周率
 console.log(Math.SQRT2); // 2の平方根
 
 // メソッド
 var x = 5.238;
 console.log(Math.floor(x)); // 小数点切り捨て
 console.log(Math.ceil(x)); // 小数点繰り上げ
 console.log(Math.round(x)); // 四捨五入
 console.log(Math.random(x)); // 乱数

実行結果(console)
 3.141592653589793
 1.4142135623730951
 5
 6
 5
 0.2683755224570632

** Object Model [#saa5dc7f]
*** Browser Object Model (BOM) [#n4e3d46e]
 console.log(window.innerHeight);
 window.location.href = 'http://google.com';

*** Document Object Model (DOM) [#o294833a]
 console.log(document.width);
 document.body.bgColor = 'red';

実行結果(console)
 1072

*** DOMを操る [#d8ca055e]
 <body>
 	<p>僕の名前は<span id ="myName">Yuji</span>です。</p>
 	<input type="text" id="price" />円。
 	<script>
 		var e  document.getElementById('myName');
 		e.innerHTML = '祐二';
 		
 		var n = document.getElementById('price');
 		n.value = 500;
 	</script>
 </body>
 
実行結果
#ref(operating_dom.png, /var/www/html/attach/)

** イベントを理解する [#b370dcfe]
 <body>
 	<input type="button" id="myButton" value="クリック!!" />
 	<script>
 		var e  document.getElementById('myButton');
 		e.onclick = function() {
 			alert('Clicked');
 		}
 	</script>
 </body>

実行結果
#ref(/var/www/html/attach/event1.png, left )
#ref(/var/www/html/attach/event2.png, left )

** タイマー処理 [#f5d2ef02]
 // setTimeout
 setTimeout(function () {
 	console.log("2秒たちました！");
 	}, 2000);
 
 // setInterval
 var i = 0;
 setInterval(function () {
 	console.log(i);
 	i++;
 }, 1000);

実行結果
 0
 2秒たちました！
 1
 2
 3
 4
 :
 :
JavaScriptの基礎 の変更点

JavaScriptの基礎の変更点
