おきがるみがる

お気軽&身軽にスナップ写真を楽しむ雑記ブログです。はてなブログテーマ Sentenceの配布も行っております。

JavaScriptを記述する場所と基本的なルール -『JavaScript本格入門』第2章

改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

山田祥寛さんの『改訂新版JavaScript本格入門』を使ってJavaScriptの勉強をしていきましょう。

今回からいよいよコーディングしながらの勉強になります。ただ、まだ基礎の基礎なので実際に動作するページは用意しません。

まずはJavaScriptのコードをどこに記述するかと、基本的なルールを学びましょう。

※前回はこちら

www.okigaru-migaru.net

JavaScripを記述・挿入する方法

bodyタグ内に書く

<body>
<script type="text/javascript">
// window.alertは、指定された文字列をダイアログを表示するための命令です。
window.alert('こんにちは、世界!');
</script>
<noscript>JavaScriptが利用できません。</noscript>
</body>

これはbodyタグ内に記述するタイプです。

コードの外部化

<body>
<script type="text/javascript" src="script/hello_ex.js"></script>
</body>

-------------------------------
script/hello_ex.js
-------------------------------
// window.alertは、指定された文字列をダイアログを表示するための命令です。
window.alert('こんにちは、世界!');

スクリプトのコードを別のjsファイルに記述し、呼び出すことも可能です。

レイアウトとスクリプトを分離することでコードを再利用しやすくなります。特にコードが長い場合に有効ですね。

アンカータグに埋め込む

<a href="JavaScript:window.alert('こんにちは、世界!');">ダイアログを表示</a>

アンカータグに埋め込むことで、リンクをクリックしたらスクリプトが動作するようにすることも可能です。

JavaScriptの基本的なルール

script要素

script要素を記述する場所は以下の3つ。

  1. body要素の配下:コンテンツと混在するので非推奨
  2. body閉じタグの直前:他のコンテンツを優先させて読み込み速度をアップ
  3. head要素の配下:関数を呼び出すscriptよりも、関数定義のscriptを先に記述する必要

body閉じタグの直前、すなわちフッタに挿入することが多いのはそういう意味なのかもしれませんね。

HTML5ではtext/javascriptがデフォルト値になっているので、script要素を省略してもOKです。

文(statement)のルール

JavaScriptのコードは1つの文(statement)から構成されます。

これにもいくつかルールがあります。

  1. 文の末尾には;(セミコロン)をつける
  2. 文の途中で空白や改行、タブを含めることも可能
  3. 大文字・小文字が区別される
  4. 複数の文を一行で書くこともできる(ただし見づらい)

コメントの挿入

コメントはスクリプトの動作には関係しないメモ的な情報です。

コメントを記述するには以下の3つの記法を使います。

1. // comment :単一行コメント(行末までをコメントと見なす)
2. /* comment */ :複数行コメント
3. /* comment */ :ドキュメンテーションコメント(特殊なコメント)

既に記述しているコードをコメント化して無効にするコメントアウトという手法もあります。逆はコメントインと言います。デバックの際によく使います。

この3つのうち、単一行コメントを優先的に使うべきとのこと。複数行コメントは入れ子で使えず、正規表現リテラルとやらで不具合が起きる可能性があるからです。

次回は変数について勉強します。

次回は変数や定数について勉強しましょう。

改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで