【HTML】「script」タグ - 「Javascript」を実行する方法

【HTML】
「script」タグ
「Javascript」を実行する方法

「script」タグは、
「クライアントサイドスクリプト」を実行するための「HTMLタグ」。

代表的な「クライアントサイドスクリプト」は、
現在のところ「JavaScript」になっていて、
「script」タグは、
ほぼ、
「Javascript」を利用するための「HTMLタグ」となっている。

「script」タグでは、

・「Javascript」コードを「HTMLファイル」に直書きし実行する
・「Javascript」の外部ファイルを読み込む

などのことが実行できます。

詳しくは、
下記を参照してください。

INDEX

■ 「script」タグとは
■ 「script」タグの書式
■ 「Javascript」外部ファイルとリンクさせる方法
■ 「Javascript」を「HTMLファイル」に直書きする方法

「script」タグとは

「script」タグは、
「HTML文書」に
「クライアントサイドスクリプト（JavaScript）」を埋め込むための「HTMLタグ」。

「Javascript」を外部ファイルに記述して、
外部ファイルを読み込んで、
「Javascript」を実行することもできる。

Back

「script」タグの書式

「script」タグは、
現在は、主に「Javascript」の外部ファイルに
リンクし、読み込むのに使用されている。

「HTMLファイル」内に、
「script」タグを使用し、
直接記述することも可能で、
外部サービスを適用するときに、
「script」タグを使用し、
外部サービスにリンクさせることもできる。

「script」タグの書式は、
決まっているので、
覚えてしまえば簡単。

記述ミスをすると機能しないので、
機能しない時は、
「打ち間違い」「URLの記述ミス」をチェックする。

「script」タグの書式

「script」タグの基本書式
<script 属性="属性値">Javascriptコードを記述</script>
<noscript>
「script」タグが実行不可能な場合の処理コードを記述する
</noscript>

■ 「Javascript」外部ファイルとリンクさせる書式
<script type="text/javascript" src="./ディレクトリ名/ファイル名.js"></script>

■ 「Javascript」外部ファイルに記述した「関数」を呼び出す書式
<img src="ファイルのURL" width="100px" height="100px" onclick="javascript:関数名(引数, 引数, ・・・・);">

■ 「Javascript」を「HTMLタグ」に直書きする書式
<img src="ファイルのURL" width="100px" height="100px" onclick="javascript:this.src='新ファイルのURL';">

■ Javascriptを直接書き込む場合のプログラムコード
<script type="text/javascript">
JavaScriptのプログラムコードを記述
</script>

■ Javascriptの外部ファイルへのリンク
<script type="text/javascript" src="javascript.js"></script>

「script」タグの属性

属性	説明
async	埋め込まれたスクリプトの実行タイミングを指定する属性。「src」属性が指定されている場合のみ指定可能。文書を読み込むタイミングは、この属性が指定されたスクリプトが「実行可能」となった時点で読み込む。「async」属性は論理属性。
charset	埋め込まれたスクリプトの「文字コード」を指定する属性。読み込む文書の「文字コード」と、外部スクリプトの「文字コード」が異なる場合、スクリプトの「文字コード」を指定することで「文字化け」などを防げる。「src」属性が指定されている場合のみ指定可能。
defer	埋め込まれたスクリプトの実行タイミングを指定する属性。「src」属性が指定されている場合のみ指定可能。文書の読み込みが完了した時点で、この属性が指定されたスクリプトを実行する。「defer」属性は論理属性。「async」属性と同時に指定した場合、「async」属性に対応する環境の場合は、「async」属性が有効となり、「async」属性が対応しない環境は、「defer」属性が有効となる。
src	「HTML文書」内に、 JavaScriptの「外部ファイル」を読み込むときに、「外部ファイルのURL」を指定する属性。
type	埋め込まれる外部ファイルの「MIMEタイプ」を指定する属性。「Javascript」の場合、「type="text/javascript"」と指定する。

Back

「Javascript」外部ファイルとリンクさせる方法

「Javascript」は、HTMLファイルに直接記述することができます。
「Javascript」専用の外部ファイルに記述して、リンクさせる方法もあります。
「Javascript」外部ファイルは、ヘッダー部分にのみ記述することになっています。
記載の順序もプログラム実行に影響することがあります。

「Javascript」外部ファイルとリンクさせる書式

「Javascript」外部ファイルへ記述した「関数」を実行させる方法

Back

「Javascript」を「HTMLファイル」に直書きする方法

「script」タグは、
「Javascript」を「HTMLファイル」に直書きすることもできる。

書式を守って、
記述すれば、
「HTML文書」の
「head」「body」タグの範囲内に記述することが可能。

記述する書式は簡単なので、
簡単にコーディングできるが、
基本的には、「Javascript」の外部ファイルに記述して、
「Javascript」を実行するのが基本となっています。

「Google」などの
色々な外部のサービスを利用するときに、
「script」タグを使用して埋め込みをすることがあるので、
知識としては知っておくと便利です。

「HTMLタグ」内に、
簡単な「Javascript」コードを記述することも可能です。
画像のURLを変更するぐらいなら、
「HTMLタグ」に直書きすることも可能。
関数の指定も可能。

「Javascript」を「HTML」に記述する方法

「アラート画面」を表示させる「Javascript」のサンプルコード

「Javascript」を「HTMLタグ」に直書きする書式

Back