script要素

Home>HTML>要素リファレンス>script

この情報はお役に立ちましたか?よろしければ皆様にもお知らせください。

  このエントリーをはてなブックマークに追加 mixiチェック  

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タイプ」をご覧ください。

関連リンク

よく読まれている記事

UpDate:2010-5-22