JavaScriptはHTMLの
<head>〜<head><body>〜<body>の中に直接書込む事が出来ます。関数などは<head></head>の間にまとめて記述しておく事が多く、それらの関数を呼び出す形式が一般的です。
下のような記述になります、後で説明をしますのでざっとながして見て下さい。
<html>
<head>
<title>Sample</title>
<script language="JavaScript">
<!--
ここにJavaScriptを記述します。
//-->
</script>
</hed>
<body>
</body>
以下の記述は、ここからスクリプトが始まってスクリプト言語にはJavaScriptを使用していますと宣言しています。通常のタグと同じで囲んである中にスクリプトを記述します。
<script language="JavaScript"> 〜 </script>
この部分はJavaScriptに対応していないブラウザの為の記述です。<!-- -->はHTMLではコメントになります、JavaScriptに対応していないブラウザでは通常の意味であるコメントとしてJavaScriptのソースを解釈しないでブラウザ上にも表示されなくなる訳です。
<!-- 〜 //-->
スクリプトは全て半角文字で記述します。全角文字を書いてしまうとエラーになってしまいます。ただし文字列やコメントでしたら使用しても問題はありません。当然全角文字を文字列として表示する事も可能です。
Perlでは文(ステートメント)の末尾には必ずセミコロン [ ; ] を付ける必要がありましたが、JavaScriptではセミコロンを付けなくても正常に動作します。ただしステートメントの終わりを明示的にする意味でも付ける事をお勧めします。
document.write("Hello World!!");
//セミコロンが無くてもエラーにならない
document.write("Hello World!!")
大文字と小文字
JavaScriptでは大文字、小文字は異なる文字として区別して扱われます。つまり documentと Documentでは全く違った事になります。
document.write("Hello World!!"); // 正
Document.write("Hello World!!"); // 誤 ( documentのDが大文字 )
コメント
JavaScriptでのコメントは [
// ] から始まるものと [
/* 〜 */ ] で囲む二種類あります。それぞれ動作が異なってきますので下記を参照して下さい。
//を使用する行末までのコメント
document.write("Hello World!!"); // ここからコメント行末まではコメント文です。
ここはもうコメント文ではありません!!エラーになります。
// この行はすべてコメントになります!!
/* */を使用する複数行に及ぶコメント
/* この行はコメント行です
この行もコメント行になります*/
document.write("Hello World!!");
文字列
文字列はダブルコーテーション [
" ] 又はシングルコーテーション [
' ] で囲んで記述します。Perlではダブルコーテーションに含まれる変数やエスケープシーケンスを展開してくれましたが、JavaScriptではこれを展開してくれません。
var str = "World" ;
document.write("Hello str"); // Hello strと表示されてしまう
シングルコーテーション自体、またはダブルコーテーション自体を表わしたい場合は以下のような記述で表現できます。
"'" // シングルコーテーションを表わす。
'"' // ダブルコーテーションを表わす。
JavaScriptの数値
JavaScriptでは次の表現を数値として認識します。
12345 // 整数
12_345 // 整数(アンダーバーは無視)
123.45 // 小数
1.23E45 // 指数
0x12345 // 16進数
012345 // 8進数
ではJavaScriptのプログラム作成の第一歩として、定番の [ Hello World ] を表示させてみましょう。
BODYタグにスクリプトを記述する例
<html>
<head>
<title>Hello</title>
</head>
<body>
<script language="JavaScript">
<!--
document.write("Hello World");
//-->
</script>
</body>
</html>
HEADタグにスクリプトを記述する例
<html>
<head>
<title>Hello</title>
<script language="JavaScript">
<!--
function hello(){
document.write("Hello World");
}
//-->
</script>
</head>
<body>
<script language="JavaScript">
<!--
hello();
//-->
</script>
</body>
</html>
上のオレンジの部分を関数とよび処理を記述してある箇所です。実際にその関数が呼び出されるのが下のオレンジの部分になります。