JavaScriptの概要と記述のルール
JavaScriptは、一般的なプログラムのような動作をホームページ上で実現できるスクリプト言語です。JavaScript学習の第一歩となるステップ01では、javaScriptの概要、およびJavaScriptの記述方法について学習します。
1.1 JavaScriptの概要
ホームページを作成するには、テキストエディタなどでHTMLを記述し、HTMLファイルを作成するのが一般的です。また、HTMLファイル内にCSSを記述し、ホームページ内の各要素について書式を指定することも可能です。
もちろん、これらの２言語だけでもホームページは十分に作成できます。ただし、このようにして作成されたホームページは“動きのないホームページ”にしかなりません。一方、JavaScriptを利用してホームページを作成すると、閲覧者の操作に応じて“動きのあるホームページ”を作成できるようになります。
たとえば、『ボタンをクリックすると画像表示を変更する』などの演出をJavaScriptで実現することも可能です。
※それぞれのボタンをクリックすると表示される画像が変更されます。(図1-1)
また、「選択された項目について合計金額を算出する」など、実用的な仕組みをJavaScriptで実現する事も可能です。
※ボタンにチェックを入れると合計金額が自動的に算出されます。(図1-2)
体育館の利用料金
1.2 JavaScriptを記述する場所
続いては、JavaScriptの記述方法について解説します。通常、JavaScriptを利用したホームページは、HTMLファイル内にJavaScriptを記述するのが一般的です。たとえば、図1-2の場合、JavaScriptの位置は以下のようになります。
▼Sample1_1.html
1.3 JavaScriptを記述する際のルール
これで、JavaScriptを記述する場所は理解出来たと思います。続いては、JavaScriptを記述する際のルール について解説します。命令文や各種指定などを半角英数字で記述する点はHTMLやCSSと同じですが、JavaScriptでは 大文字／小文字が区別されることに注意してください。そのほか、JavaScriptを記述する際の ルールは以下の通りです。
・<script>～</script>の間にJavaScriptを記述する
HTMLファイル内にJavaScriptを記述する場合は、<script>～</script>内にJavaScriptを記述しなければいけません。 また、type属性に“text/JavaScript”を指定し、タグ内の記述がJavaScriptであることを示しておく必要があります。
・コメントを示す<!-- ～ //-->を記述する
scriptタグに対応していないWebブラウザでは、JavaScriptの記述がそのまま画面に表示されてしまう場合があります。これを防ぐには、JavaScriptの記述を<!--と//-->で挟み、JavaScriptの記述をコメント文として処理する必要があります。 ・JavaScriptは半角文字で記述する
JavaScriptの命令文や各種指定は半角文字で記述します。これらの記述に全角文字を使用すると、 正しくJavaScriptが動作しません。
・大文字と小文字は区別される
JavaScriptでは、大文字と小文字が別の文字として認識されます。 たとえば「ABC」「abc」「Abc」は、いずれも別の文字となります。HTMLやCSSのように、大文字／小文字を無視 して記述出来ない点に十分注意してください。
・命令文の最後にセミコロン
JavaScriptでは、各文の最後に「；」(セミコロン)を記述し文の区切りを明確に示す必要があります。 CSSの場合と同様、改行は無視される点に注意してください。
| ○正しい記述 | ×間違った記述 |
・半角スペース、タブ文字の扱い
JavaScriptでは、連続した半角スペースおよびタブ文字は無視されます。 このため、行頭に半角スペース文字でインデント（余白）を設け、JavaScriptを見やすく記述することも可能です。