![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
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 : : |
