JavaScriptの記述

記述のルール

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

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

コメントの記述法

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

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


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

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

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


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

C:￥My Document￥Pictuer￥

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


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

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

記述する場所

bodyタグの間に記述する
  • HTML文書内に実行結果を表示したいとき
  • 「</body>」の前に記述します
<body>

　・・・・

<script>
　ここにコードを記述
</script>
</body>
</html>

HTMLファイルから外部JavaScriptファイルを読み込む

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

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

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

<head>
<script src="jsファイル名"></script>
</head>
属性に記述する

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

エラー

  • ブラウザの「要素検証」の「コンソール」でチェックする
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Hello!</title>
</head>

<body>
<script>
  window.alert( 'Hello World!! );
</script>
</body>
</html>


DreamweaverでJavaScript

JavaScript支援機能

「Ctrl」+「space」


《Macの場合》
「Spotlight」のショートカットキーと重なります。
オフにしないと、機能しません。注意しましょう。

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>