記述のルール

Webブラウザはオブジェクトの集まり
  • windowオブジェクト
  • documentオブジェクト
  • imageオブジェクト
JavaScriptとDOM
  • 初期のJavaScriptでは、オブジェクトとして扱えるHTML要素は多くありませんでした
  • HTMLドキュメントの任意の要素をオブジェクトとして扱えるようにした技術が「DOM（Document Object Model）」

記述のルール

  • シングルコーテーションもダブルコーテーションも同じ扱いです
  • Google JavaScript Style Guide ではシングルコーテーションの使用を推奨しています
行の終わりには必ずセミコロンを付ける
<script>
  window.alert( 'セミコロンは必ず記述しましょう' );
</script>
大文字・小文字について

JavaScriptは大文字と小文字を区別します。

コメントの記述法

コメントを１行で記述する

//　コメントです。日本語で記述できます。


コメントを複数行で記述する

/*　複数行のコメントです。
日本語で記述できます。*/
終了タグ「/」の前には「\」を付ける

この記述を「エスケープ」と呼びます。


円マークとバックスラッシュ

C:￥My Document￥Pictuer￥

「Cドライブ」内に有る「マイドキュメントフォルダ」の中にある「ピクチャーフォルダ」をさします。


情報の入力量が増えた段階で、キーから直接文字入力できるようにした日本語拡張キーボードが開発されました。
そのとき英文作成時にも便利なように、ふだんあまり使われないとだろうと思われたバックスラッシュ（\）のキーに対応する文字コードに円記号を割り振ったのだろうと思われます。

  • Windowsでは「バックスラッシュキー」
  • Macでは「文字パレット」から（キー入力の円マークは使用不可）

記述する場所

bodyタグの間に記述する

HTML文書内に実行結果を表示したいとき。

属性に記述する

イベントハンドラから直接呼び出すとき。
「input」などHTMLタグの属性に記述します。

headタグの間に関数を記述する

イベントハンドラに指定した関数を呼び出すときなどは、「head」内に関数部分を記述します。

HTML内部に記述する
  • 「</body>」の前に記述します
<script>
　ここにコードを記述
</script>


《XHTMLの場合》

<script type="text/javascript">
<![CDATA[
　ここにコードを記述
]]>
</script>
HTMLファイルから外部JavaScriptファイルを読み込む

「JavaScriptファイル」を別に作成し、「script要素」でそのファイルの場所を指定します。
スクリプトファイルは「src属性」で呼び出します。

<script src="jsファイル名"></script>

meta要素

<meta http-equiv="Content-Script-Type" content="text/javascript">


XHTMLの場合は必須ですが、HTML5の場合は記述しません。
同様に、「type属性」も不要です。


エラー

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Hello!</title>
</head>
<body>
<script>
  window.alert( 'Hello World!! );
</script>
</body>
</html>


Dreamweaverでは「エラー」表示されます。


ブラウザでは表示されません。

Firefoxの「エラーコンソール」

Safariの「エラーコンソール」


JavaScript開発においての注意点


  • サーバー側でも入力漏れがあるかどうかチェックする仕組みをつける。
  • たとえばサーバー側のPHPなどのサーバーサイドプログラムで、
    エラーを検知して先に進まないようにする。


《JavaScript有効》


《JavaScript無効》


JavaScriptでのメニュー表示

JavaScriptを使った動的メニューの場合、JavaScriptを無効にすると表示されない可能性があります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScriptメニューがオフの場合</title>
</head>
<body>
<script>
　メニューを生成するJavaScriptのコード
</script>
<noscript>
　代替えメニューを表示するHTMLのコード
</noscript>
</body>
</html>