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

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2013-08-10 (土) 01:48:31 (4109d)