JavaScriptの基礎 †HTMLを用意する †<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>JavaScriptの基礎</title> </head> <body> <h1>JavaScriptの練習</h1> <script> </script> </body> </html> 変数、データ型、演算子 †変数 †変数=値をいれておく「箱」 代入演算子 †var x = 5; 文字列に’関する演算子 †var x = "hello" + "world"; 数値に関する演算子 †余り var x = 5 % 5; x = x + 5; var x = + 5; x = x + 1; x++; x = x - 1; x--; ifと比較演算子 †条件分岐(if) †var score = 80; if (score >=70) { alert("合格!"); } else if (score >= 30) { alert("不合格!"); } else { alert("追試!"); } 条件分岐(switch) †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) †while文 †var i = 0; while (i < 10) { console.log(i); i++; } // 0 - 9までの数字が表示される for文 †var i = 0; for (var i = 0; i < 10; i++) { console.log(i); } // 0 - 9までの数字が表示される 関数(Functions) †// 関数は複数の処理をまとめたもの。 function sum(a, b) { // a, bは引数 return (a + b); } var result = sum(50, 33); alert(result); ローカル変数(Local Variables) †function getPrice(x) { var rate = 0.02; // ローカル変数 return (x * rate); } console.log(getPrice(83);) 実行結果(console) 1.6600000000000001 配列(Arrays) †// 配列はグループ化されたデータ var sales = [ 100, 200, 150 ]; // var sales0 = 100; // var sales0 = 200; // var sales0 = 150; console.log(sales[1]); 実行結果(console) 200 連想配列(Associative Arrays) †var sales = { 'year2000' : 100, 'year2001' : 200, 'year2002' : 150 } console.log(sales[ 'year2002' ]); 実行結果(console) 150 Javascriptオブジェクト(Javascript Object) †日付、数字、文字列 // プロパティ(属性) var s = new String("this is a pen."); console.log(s.length); // メソッド(処理) var d = new Date(); console.log(d.getFullYear()); 実行結果(console) 14 2011 Stringオブジェクト †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オブジェクト †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オブジェクト †// 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オブジェクト †// プロパティ // 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 †Browser Object Model (BOM) †console.log(window.innerHeight); window.location.href = 'http://google.com'; Document Object Model (DOM) †console.log(document.width); document.body.bgColor = 'red'; 実行結果(console) 1072 DOMを操る †<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(): The style ref(filename,pagename) is ambiguous and become obsolete. Please try ref(pagename/filename) イベントを理解する †<body> <input type="button" id="myButton" value="クリック!!" /> <script> var e document.getElementById('myButton'); e.onclick = function() { alert('Clicked'); } </script> </body> 実行結果 #ref(): File not found: "event1.png" at page "var/www/html/attach" #ref(): File not found: "event2.png" at page "var/www/html/attach" タイマー処理 †// setTimeout setTimeout(function () { console.log("2秒たちました!"); }, 2000); // setInterval var i = 0; setInterval(function () { console.log(i); i++; }, 1000); 実行結果 0 2秒たちました! 1 2 3 4 : : |