JavaScript 基本

JavaScriptについて書いていきます。

JavaScriptはHtmlファイルに埋め込んだり、Jsファイルに書いて、Htmlファイルから参照したりします。
(サーバサイドJavaScriptは扱いません)

Htmlファイルを作成して、そのままブラウザに表示しても動作しますが、Apache、IIS、TomcatなどWebサーバを用意することをお勧めします。

Htmlファイルに埋め込み

まずはalert関数を使用して、ダイアログを表示してみます。

				
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScriptのテストページ</title>
<script type="text/javascript">
	alert("Hello World!!");
</script>
</head>
<body>
</body>
</html>

それでは実行してみましょう。

Jsファイルに書いて、Htmlファイルから参照

JavaScriptファイルは別ファイルに書くことが出来ます。

				
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScriptのテストページ</title>
<script src="test.js"></script>
</head>
<body>
</body>
</html>

test.js

				
alert("Hello World!!");

最初の例と同じ動作をするので、実行イメージは省略します。

				
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScriptのテストページ</title>
<script type="text/javascript">
	// 1行コメント

/*
	複数行コメント
*/
	
</script>
</head>
<body>
</body>
</html>

ログ出力

デバッグで上記のAlert関数を使うことがありますが、ログ出力の方がデバッグしやすいです。

				
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScriptのテストページ</title>
<script type="text/javascript">
	console.log("Hello World!!");
</script>
</head>
<body>
</body>
</html>

ログはブラウザの開発者ツールで確認します。
ブラウザを表示してF12キーを押すと以下の様な画面が出てくるので、そこでConsoleを選択するとログが確認できます。

今回はGoogle Chromeで確認しましたが、FireFoxでもIEでも同じような操作で確認できます。

変数と関数

変数を定義するには変数の前にvarを付けます。文字列、数値のどちらでも同じです。
関数を定義するには関数の前にfunctionを付けます。戻り値を返す場合はreturnにセットします。

				
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScriptのテストページ</title>
<script type="text/javascript">
	function show(arg)
	{
	    alert(arg);
	}

	function add(arg)
	{
	    return arg + "World!!";
	}
	
	var msg = "Hello "
	
	show(add(msg));

</script>
</head>
<body>
</body>
</html>

条件分岐

条件分岐はif文とswitch文があります。

				

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScriptのテストページ</title>
<script type="text/javascript">
	var test = 0;
	
	if (test == 0){
		alert("zero");
	} else if (test == 0){
		alert("one");
	} else {
		alert("else");
	}
	
	switch(typeof test){
		case 'string':
			alert("文字列");
			break;
		case 'number':
			alert("数値");
			break;
		default:
			alert("その他");
	}

</script>
</head>
<body>
</body>
</html>

ループ

ループはfor文、while文、do～while文があります。

				

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScriptのテストページ</title>
<script type="text/javascript">
	// 普通のループ
	for(var i = 0;i < 3;i++){
		console.log("for:" + i);
	}

	var k = 0;
	while(k < 3){
		console.log("while:" + k);
		k++;
	}

	var m = 0;
	do{
		console.log("do:" + m);
		m++;
	}while(m < 3)
	
	// 配列のループ
	var ary = ["one","two","three"];
	
	for(var idx in ary){
		console.log("in:" + ary[idx]);
	}

	for(var n = 0;n < ary.length;n++){
		console.log("len:" + ary[n]);
	}
	
	// continueとbreak
	var cv = 0;
	for(var cv = 0;cv < 5;cv++){
		if(cv == 0){
			continue;
		}
		if(cv == 2){
			break;
		}
		console.log("ContinueBreak:" + cv);
	}

</script>
</head>
<body>
</body>
</html>

例外処理

例外処理はtry～catch～finallyがあります。tryの中で例外が発生したらcatchの処理が行われ、例外発生有無に関わらず、finally処理が実行されます。

				
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScriptのテストページ</title>
<script type="text/javascript">
	function aaa(){
		var bbb = null;

		// ここで例外発生
		alert(bbb.length);
	}
	try{
		aaa();
	}
	catch(e){
		alert(e);
	}
	finally{
		alert("end");
	}
</script>
</head>
<body>
</body>
</html>

ページのトップへ戻る