scriptタグはJavaScriptなど、クライアントサイドスクリプトと呼ばれるもののコードをHTMLなどの文書に埋め込んで実行するためのタグです。
scriptの要素内(<script>〜</script>)に直接ソースコードを記述することもできますし、外部のスクリプトファイルを用意して、そのURLを指定して読み込むこともできます。
記述する場所はhead要素内が多いですが、body要素内でも大丈夫。
script要素で使用できる属性について確認しておきます。
script要素で使用できる属性
script要素では外部ファイルを読み込むsrc属性をはじめ、いくつか使用できる属性があります。
src(ソース)
src属性はimg要素などでも使われる属性ですが、外部リソースのURLを指定するためのもの。
script要素でいうと、JavaScriptなどの外部スクリプトファイルの場所(URL)を指定するためのものです。
async(エイシンク)
async属性は文書に埋め込んだスクリプトを実行するタイミングを指定する属性で、src属性が指定されている場合に使えます。
src属性によって文書を読み込むとき、そのスクリプトが実行可能になった時点で実行されます。
ちなみにasync属性は論理属性といって、値を必要としません。
defer(ディファー)
defer属性もasync属性と同じく、埋め込まれたスクリプトを実行するタイミングを指定する属性で、こちらもsrc属性が指定されている場合のみ使えます。
async属性ではそのスクリプトが実行可能になった時点で実行されますが、defer属性では文書の読み込みが完了した時点でスクリプトを実行します。
もしasync属性と両方指定する場合、async属性に対応している環境であればasync属性が有効になって、async属性が対応していない環境ではdefer属性が有効になります。
defer属性もasync属性と同じく論理属性です。
type(タイプ)
type属性はMIMEタイプというテキスト・画像・動画・音声などのデータファイル形式を示す識別子を指定するもの。
MIMEタイプには以下のようなものがあります。
MIMEタイプ | ファイル形式 |
---|---|
text/plain | プレーンテキスト |
text/html | HTMLファイル |
text/css | CSSファイル |
text/javascript | JavaScriptファイル |
img/jpeg | Jpegファイル |
img/png | PNGファイル |
img/gif | GIFファイル |
video/mp4 | MP4ファイル |
video/ogg | Oggファイル |
audio/mp3 | MP3ファイル |
audio/mp4 | MP4ファイル |
audio/wav | WAVEファイル |
audio/aac | AACファイル |
application/shockwave-flash | Flashファイル |
application/pdf | PDFファイル |
初期値では「text/javascript」となっているので、JavaScriptを読み込む際は記述せずに省略してもかまいません。
charset(キャラクターセット)
charset属性は他の要素でもよく使われる属性ですが、埋め込んだスクリプトの文字コードを指定するときに使います。
この属性を指定するのは、読み込むHTML文書の文字コードと、外部のスクリプトの文字コードが異なる場合で、スクリプトの文字コードを指定することによって文字化けなどを防げます。
なおsrc属性が指定されている場合のみ指定可能な属性です。
script要素はsrc属性を使って外部スクリプトを読み込む場合が多く、必要に応じてスクリプトの実行タイミングを指定するasync属性やdefer属性を使い、文字コードが異なればcharset属性で文字コードを指定するといった感じで使います。
[…] 『script(スクリプト)要素で使用できる属性【HTML】』で書いたように、script要素を使ってHTMLにJavaScriptなどのプログラムを書き込んだり読み込むといったことができるわけですが、スクリプトが動作しない環境もあったりします。 […]