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, 'year2...
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の基礎 [#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, 'year2...
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
:
:
ページ名: