* 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 : :