ITメモ
HTML
外部Link
【HTML ドキュメント】MDN Web Docs(Mozilla)
「HTML」リファレンス
HTMLメールの作り方「指定キーワード」を検索した「Google検索結果ページ」への「リンク」を作る方法「Google Map」へ「リンク」を作る方法「HTMLタグ」に「マウスアクション」を指定する方法「HTML」で「空白」を表示する方法「HTML」で「タブ(空白)」を表示する方法【XML】サイトマップ作り方
「HTML」の基礎知識
「HTML」の書式「HTML」でのコメントの仕方「HTML」での「改行」の仕方「CSS」の使い方「Javascript」の使い方「HTMLタグ」の使い方「HTML」の特殊文字一覧ブラウザやタブに表示される小さなアイコン「favicon(ファビコン)」の作り方他のページに移行する「リンク」の作り方 表の作り方Webページに画像の埋め込む方法動画を埋め込む方法音声ファイルを埋め込む方法地図を埋め込む方法入力フォームの作り方
「HTML」タグ
【DOCTYPE】「HTML」の「DOCTYPE宣言」【html】すべての「HTMLタグ」の親要素「html」タグ【head】「Webページ」の付属情報を設定する場所【meta】「Webページ」の設定をする「HTMLタグ」【title】「Webページ」の「タイトル」を設定する「HTMLタグ」【link】外部ファイルとの関係定義や読み込みをする方法【script】「Javascript」を実行する方法【div】レイアウトの枠として使う方法【p】文章の段落ごとに区分する方法【li】リスト(箇条書き)で表示をする方法【table】表の作り方【br】「HTML」での「改行」の仕方【a】リンクの作り方【h1-h6】Webページの見出しの設定方法【img】画像を表示する方法【span】文字列の一部を装飾する方法【ruby】「ルビ」をふるための要素
SEO(Search Engine Optimization)
「SEO対策」の具体的な方法「検索エンジン」に登録する方法「SEO対策」に有効な「ページタイトル」の記述方法「SEO対策」に有効な「キーワード」の記述方法「SEO対策」に有効な「ディスクリプション」の記述方法





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

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




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

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


「script」タグでは、

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

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



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



「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」外部ファイルとリンクさせる書式

<script type="text/javascript" src="./ディレクトリ名/ファイル名.js"></script>


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

<img src="ファイルのURL" width="100px" height="100px" onclick="javascript:関数名(引数, 引数, ・・・・);">


Back

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


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

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


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


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


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



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

<script type="text/javascript">
「Javascript」のプログラムコード
</script>


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

<script type="text/javascript">
alert("Test Alert!!");
</script>


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

<img src="ファイルのURL" width="100px" height="100px" onclick="javascript:this.src='新ファイルのURL';">


Back