script要素
script要素の役割
script要素は、HTMLファイル内に別言語のプログラムを埋め込みます。このプログラムのことを、クライアントサイドスクリプトと呼びます。
多くの場合、実行するプログラムにはJavaScriptが使われます。
script要素にsrc属性を設定することで、外部に保存したスクリプトを読み込んで実行させることもできます。
なお、初期のブラウザでは、スクリプトを認識しない環境があるために、script要素を記述した後のソースコード部分には、<!-- -->を組み込んでコメントアウトする、という習慣がありましたが、現在ではスクリプトを認識しないブラウザはほとんどないことから、コメントアウトしないケースも多く見られます。
ただし、HTMLファイルのソースをきれいにするという意味でも、スクリプトは外部ファイルに書いて読み込む方法をとる方がいいでしょう。
script要素は、head要素の中に配置することも、body要素の中に配置することもできます。
script要素に設定できる属性
属性名 | 意味 |
charset | スクリプトを外部ファイルから読み込む際にその文字コードを指定する。 |
class | クラス名。CSSを適用するときなどに使用する。 |
defer | HTMLソースを新たに追加するスクリプトでないことを明示。 |
dir | 文字表記の方向。左から右(ltr)と、右から左(rtl)を指定する。通常はltrなので、右から左へ表記する言語を使わないのであれば、指定しなくてよい。 |
id | ID名。CSSを適用するときに使用する。 |
lang | 言語コード。日本語、英語といった言語を指定する。html要素に記述してあれば、明示する必要はない。 |
language | スクリプト言語のバージョンを指定。非推奨。 |
src | 外部ファイルのスクリプトを参照する場合にURLを指定。 |
style | スタイルシートを直接記述する。 |
title | 補足情報。テキストにカーソルを合わせるとtitle属性に指定した文字列をポップアップで表示する。 |
type | スクリプト言語のMIMEタイプを指定。 |
script要素の使い方
<script type="text/javascript">
JavaScriptのコードを記述
</script>
上記は、直接HTMLコードに記述する場合の書き方です。
コメントアウトを入れる場合には、
<script type="text/javascript">
<!--
JavaScriptのコードを記述
-->
</script>
のようにします。
以下は外部ファイルとして用意したJavaScriptのファイル(.js)を読み込む場合の書き方です。
<script src="xxx.js" type="text/javascript">
JavaScriptのコードを記述
</script>
charset属性
Shift_JIS | シフトJIS。Windowsで一般的に使われるコード。 |
EUC-JP | UNIX環境で使われることが多いコード。 |
UTF-8 | シフトJISから移行しつつあるコード。 |
ISO-2022-JP | JISコードのこと。メールなどで使われることが多い。 |
defer属性
defer属性は、そのスクリプトが新たなHTMLソースを生成しないことを宣言します。
ブラウザでHTMLファイルを表示する場合、ソースコードを上から順に読み込みます。このとき、script要素が含まれていると、その部分を解析・実行してからその他のHTMLコードを読むことになります。
しかし、スクリプトが直接最初のHTMLファイルの表示にかかわっていなければ、その間の解析はロスタイムとなってしまいます。
そういったときに、defer属性を指定することで、そのスクリプトの解析を飛ばして他のコードを読み込むようになるため、表示速度が上がります。
記述するときは、以下のように書きます。
<script defer></script>
または、
<script defer="defer"></script>
language属性
そのscript要素内で使用するスクリプトのバージョンを指定します。ただし、language属性は非推奨なので、type属性でMIMEタイプを指定するようにします。
language属性に指定できる値には、[ JScript ] [ JavaScript ] [ JavaScript1.1~1.7 ]などがあります。
type属性
スクリプト言語のMIMEタイプを指定します。script要素を使う場合には必ず設定します。
→詳しくは「MIMEタイプ」をご覧ください。
関連リンク
よく読まれている記事
- 右クリックメニューの表示が遅い【Information】
- 画像の一部にリンクを貼る(クリッカブルマップ【Dreamweaver】
- 一定時間でローテーションする広告【JavaScript】
- Dreamweaver【Dreamweaver】
- クリックした画像を拡大・縮小する【JavaScript】
UpDate:2010-5-22