- 2008-04-19 (土) 13:24
- トレーニング
今回は、JavaScriptを記述する際の注意事項です。私はこのあたりはわかっている（つもりな）ので簡単に済ませます。
JavaScriptの記述方法
JavaScriptはwebページを動作させるスクリプトとして扱う場合、HTML文書（ドキュメント）に組み込んで使用します。HTMLに組み込ませる方法はCSS同様、HTML文書に直接埋め込む場合と外部ファイルから読み込む場合の2種類あります。まずは、HTML文書に直接埋め込む場合のサンプルを示します。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>JavaScriptのサンプルソース</title>
<script type="text/javascript" language="Javascript">
<!--
//ここにスクリプトを記述。この行はコメントです。
document.write('Hallo! JavaScript');
-->
</script>
</head>
<body>
<script type="text/javascript" language="Javascript">
/*
ここにスクリプトを記述。
この行はコメントです。
複数行にわたってコメントを書くことができます。
*/
document.write('<h1>JavaScriptのテスト</h1>');
document.write('<p>bodyにもJavaScriptは記述できます。</p>');
document.write('<img src="image/photo.jpg">');
<noscript>
<p>JavaScriptを有効にしてください。</p>
</noscript>
</script>
</body>
</html>
上から説明していきます。
metaタグを記述する
まず4行目。HTML文書にJavaScriptを記述する際は、metaタグを利用して、JavaScriptを使用していることを明示しなければなりません。場合によってはこれをちゃんと記述していないとJavaScriptが正常に動作しない場合もあるので注意です。
script typeを記述する
HTML文書にJavaScriptを記述する際は、script type内に記述します。HTML 4.01ではlanguage=”Javascript”は非推奨なのですが、これを書かないとかなり古いブラウザではJavaScriptを読み込めません。どこまでのブラウザを保障するかが問題となります。
JavaScriptを認識できないブラウザの対処
7行目(閉じタグは10行目）ではJavaScriptを認識できないブラウザのための対処がなされています。JavaScriptを認識できないブラウザは、スクリプトをテキスト（文字）として表示してしまうので、HTMLのコメントタグを使用して、テキストとして表示されないようにしています。
ただし、XHTMLではHTMLのコメントタグが利用できません。専用にコメントタグが用意されているのでそちらを使います。
//<![CDATA[ ここにスクリプトを記述。 //]]>
しかし、現在ブラウザは完全にXHTMLに対応しておらず、CDATAセクションを認識するかどうかもブラウザによってはまちまちの現状です。そのため、できるだけHTML文書に直接スクリプトを書かないほうが無難と言えば無難です。
コメント
8行目および15行目（閉じタグは19行目）には、コメントが書かれています。一行のみのコメントは先頭に//を記述します。複数行の場合は/* ～ */で囲みます。
大文字と小文字を区別する
JavaScriptでは大文字と小文字を区別します。そのため10行目の例で言えば、Document.write(’Hallo! Javascript’);と最初のDを大文字で書いてしまえば動作しなくなってしまいます。
ステートメントの最後にセミコロン
ステートメント（1つの命令の最小単位）の最後にセミコロンをつけます。CSSもそうですね。CSSと同様に1行のみであればセミコロンは省略できますが、ステートメントの最後にセミコロンをつける習慣をつけておいたほうがよいので、1行でもセミコロンはつけましょう。
クォーテーションの入れ子
例えば22行目のように、クォーテーションを入れ子にしたいときがあるでしょう。その場合は、外部にシングルクォーテーションで囲んだら内部はダブルクォーテーションで囲みます。その逆も有効です。ただし、シングルクォーテーションをシングルクォーテーションで囲んだら（あるいはダブルクォーテーションをダブルクォーテーションで囲んだら）エラーになるので注意です。
では、さらに入れ子をしたいときはどうすればよいのか？その場合は、バックスラッシュ(\)を使用してクォーテーションをエスケープします。このあたりは、とほほのＷＷＷ入門のサイトを参考にされたし。
JavaScript非対応のブラウザにメッセージを表示する
JavaScript非対応のブラウザにメッセージを表示するには23行目（閉じタグは25行目）のようにnoscriptタグを使用します。この中には普通にHTMLタグも使用できます。
JavaScriptスクリプトを外部ファイルから読み込む
HTMLとは別にJavaScriptを管理したいときや、1つのスクリプトを複数のHTMLファイルで使用する場合は、JavaScriptスクリプト用の外部ファイルを作成し、HTML文書に読み込ませます。その場合は、head内部に以下のように記述して外部ファイルを読み込ませます。
<script type=”text/Javascript” src=”javascript.js”>
注意しなければならないのは、外部ファイルの拡張子を.jsにすることです。そうしなければJavaScriptとして認識されません。
- Newer: jQueryサンプル集
- Older: [1日目]私のJavaScriptに対するイメージ
Comments:0
Trackbacks:0
- Trackback URL for this entry
- http://jspt.coolwebwindow.com/2008/04/19/12/trackback/
- Listed below are links to weblogs that reference
- [2日目]JavaScriptを記述する際の注意事項 from JSPT