ほんっとにはじめてのHTML5とCSS3：[44] script要素で HTMLにスクリプトを読み込む or 直接書く

[44] script要素で HTMLにスクリプトを読み込む or 直接書く

最終更新日：2017年12月05日　（初回投稿日：2012年08月02日）

今回は <script>要素 を使ってみましょう。
<script>要素は、HTMLファイルに Javascript などのスクリプトを読み込む要素。
メタデータ・コンテンツの1つです。

スクリプトが無効なときに代替コンテンツを表示する <noscript>要素もあります。
これは単独で使わず、<script>要素を使ったときだけ使用します。

使用する要素	`<script> 〜 </script> <noscript> 〜 </noscript>`

<script>の属性	`type属性、src属性、charaset属性、defer属性、async属性、crossorigin属性`

本日のINDEX

<script>要素のルール
<script>要素の属性一覧
1. async・defer属性のスクリプト読み込み・実行のタイミングの違い
スクリプトが無効の時のための<noscript>要素

<script>要素のルール

外部ファイルを読み込む（src属性あり）

外部スクリプトファイルは「src属性」でURLを指定して読み込みます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="../js/pagescroll.js"></script>

このように1つの<script>要素に1つのスクリプトを書きます。
複数読み込みたければ <script>も複数書きます。これは<link>要素と同じですね。
ただし、<link>と違って<script>要素は、終了タグがあります。
「src属性」を使う場合は、<script> 〜 </script> の間は「空（カラ）」にします。

「コメント文」なら中に入れられる
「src属性」を使って外部ファイルを読み込む場合でも、著作権情報や API情報などを「コメント文」で入れることができます。
この場合の「コメント」は、スクリプト用のモノを使います。

<script src="cool-effects.js">
  // create new instances using:
  //    var e = new Effect();
  // start the effect using .play, stop using .stop:
  //    e.play();
  //    e.stop();
</script>

JavaScriptの「コメント文」は、CSSと同じ「/*」と「*/」で囲んでもいいし、先頭に「//」を記述した行は行末まで（改行するまで）コメントになります。

type属性は省略可能
「type属性」は、読み込むファイルの種類を「MIMEタイプ」で書きます。

＊詳細は「ちょっとメモ：MIMEタイプ」をご覧ください。

HTML4.01では <script>要素に「type属性」は必須でしたが、 HTML5で、デフォルト値「text/javascript」なら省略できるようになりました。
ですので、たいていの場合「type属性」は書かなくてOK。

HTML上にじかにスクリプトを書く（src属性なし）

<script>
$(function() {
    $("a[href^=#]").click(function() {
        var Hash = $(this.hash);
        var HashOffset = $(Hash).offset().top;
        $("html,body").animate({
            scrollTop: HashOffset
        }, 700);
        return false;
    });
});
</script>

短いスクリプトなら外部ファイルにするより、HTMLにインラインで書いたほうが、ネットワーク上での往復が無いぶんページの読み込みが速いそうです。
参考：レンダリングを妨げる JavaScript を削除する | Google Developers

<script>要素はどこにでも置ける

ただ、縦に長くてユーザーがスクロールしないとコンテンツが見れないサイトの場合、 <body>の最後にスクリプトがあると、ページが表示された後にスクリプトを取り込み・実行されますが、そのときスクロールがカクカクしたり、なかなかスクロールできなかったりします。（ちょっと待てばスクリプトの実行も終わってスクロールもすんなりできる）
スクリプトを使って、スクロールによってレイアウトが変わるサイトもあります。
こんな場合は、<script>要素を <head>内に置いたほうが良いようです。
何事も臨機応変に。

<script>要素の属性一覧

「async属性」と「crossorigin属性」は HTML5 からできた新しい属性です。

「charset属性」「defer属性」「async属性」「crossorigin属性」は「src属性」と一緒でなければ使いません（=外部スクリプトファイル用）

属性名	概要と値
type	「type=" MIMEタイプ "」という形で使います。デフォルトは「text/javascript」で、これの場合は省略可。使える MIMEタイプはこちら→ Scripting languages \| W3C HTML5.1 ★ブラウザは、画像（image/）・動画（video/）・音声（audio/*）・text/csv のタイプで提供されたスクリプトだけはブロックし、error イベントが発生します。（その他はMIMEタイプが間違ってても大丈夫らしい）
src	「src="URL"」という形で、外部スクリプトファイルの場所を絶対パスや相対パスで指定します。
charset	「charset="文字コード"」という形で使います。外部スクリプトファイルの文字エンコーディングを指定します。「src属性」があるときのみ使用可。
async	<script async src="xxx.js"> といった形で使います。「src属性」があるときのみ使用可。スクリプトの読み込み・実行するタイミングを指定する論理属性です。詳細は「async属性・defer属性のスクリプト実行のタイミングの違い」で。
defer
crossorigin	CORS（Cross-Origin Resource Sharing = クロスドメイン通信）設定属性で、そのHTML文書と異なるオリジンのリソース（同じドメインじゃないところのファイルってこと）を読み込む時のルールの指定をする。値は「anonymous（ユーザ認証情報不要）」か「use-credentials（ユーザ認証情報が必要）」値を略して crossorigin だけ書けばデフォの「anonymous」に。

async・defer属性のスクリプト読み込み・実行のタイミングの違い

「defer（デファー）」は「延期する」という意味。
「async（エイスィンク）」は「非同期」という意味です。

ブラウザは、ページを表示する前に「解析（パース。要素の構造や属性などを調べて、表示可能なデータ構造に変換）」しています。
外部スクリプトがあると、その都度 解析を中断してスクリプトを読み込むので、ページが最初に表示されるまで時間がかかります。
そのため、スクリプトの読み込み・実行のタイミングを変える属性があるんです。

W3C の仕様書の図解がわかりやすいので転載しておきます。

parserとは：構文解析プログラム。HTMLパーサはマークアップ言語を解析する。
fetchとは：CPUが命令コードを取り出す動作。スクリプトを取り出すこと。
executionとは：スクリプトの実行。

<script src="◯◯.js">（=どっちも無し）：
書いた順でスクリプトが取り出し・実行され（同期実行）、その都度ページの読み込みが中断します。

<script defer src="◯◯.js">（=defer属性あり）：
ページ読み込み終了までスクリプトの実行を延期します。

<script async src="◯◯.js">（=async属性あり）：
スクリプトが利用可能になった時点で非同期に実行します。
（Google は async属性の使用を推奨しています）

スクリプトが無効の時のための<noscript>要素

<noscript>要素はスクリプトが無効なときに 代替のコンテンツを表示するための要素。なので <script>要素を使った時だけ使用します。
ブラウザは、スクリプトが有効なら <noscript>の内容を非表示にします。

スクリプトが有効な環境でも、エラーでスクリプトが実行され無かった場合には <noscript>の内容が表示されます。

下の例は、<canvas>要素で描画をしている場合の代替の静止画像を置いています。

<script>
  //カンバス用のスクリプト
</script>
<canvas id="canvas" width="600" height="300">
  <noscript>
    <img src="noscriptimage.jpg" alt="代替イメージ">
  </noscript>
</canvas>

下記は W3C の仕様書に載っていたサンプルコードです。

<form action="calcSquare.php">
  <p>
    <label for=x>数字</label>:
    <input id="x" name="x" type="number" placeholder="入力">
  </p>
  <script>
    var x = document.getElementById('x');
    var output = document.createElement('p');
    output.textContent = '数字を入力すれば、すぐ二乗にします！';
    x.form.appendChild(output);
    x.form.onsubmit = function () { return false; }
    x.oninput = function () {
      var v = x.valueAsNumber;
      output.textContent = v + ' の二乗は ' + v * v;
    };
  </script>
  <noscript>
    <input type=submit value="二乗を計算">
  </noscript>
</form>

スクリプトが有効なら、このようなフォームが表示され、インラインのスクリプトで計算もできます。（下のサンプルで計算できます。（スクリプトがエラーになっていなければ）

スクリプトが無効なら、<noscript>要素の内容のボタンが表示され、サーバー側で計算を行えるようにしてるというサンプルです。
（下のサンプルはサーバにphpファイルがないので無いので何も起こりませんけどね）

数字:

W3C では「スクリプトが有効でも何らかの理由でエラーになることもある」ので、下記のように <noscript>要素を使わない <script>の書き方をしたほうが良い としています。

<form action="calcSquare.php">
  <p>
    <label for=x>数字</label>:
    <input id="x" name="x" type="number">
  </p>
  <input id="submit" type=submit value="二乗を計算">
  <script>
    var x = document.getElementById('x');
    var output = document.createElement('p');
    output.textContent = '数字を入力すれば、すぐ二乗にします！';
    x.form.appendChild(output);
    x.form.onsubmit = function () { return false; }
    x.oninput = function () {
      var v = x.valueAsNumber;
      output.textContent = v + ' の二乗は ' + v * v;
    };
    var submit = document.getElementById('submit');
    submit.parentNode.removeChild(submit);
  </script>
</form>

17・18行目で <input>要素の「id="submit"」のボタンのリムーブを命じているので、全部スクリプトが実行されたらこのボタンは非表示です。
スクリプトが失敗したらボタンは表示のままなので、サーバのPHPファイルで計算できるというわけです。

代替えを表示するだけで問題ない内容なら <noscript>要素を利用し、上記のサンプルのようにスクリプトが無いと台無しになるような内容なら、サーバ側のスクリプトを使うなどの工夫をしろってコトだと思います。

次回予告

次回から <meta>要素です。
<meta>要素は、HTML文書に関する情報をいろいろ指定する要素です。
この要素も1回では済まないので、何回かに分けていきますね。

関連記事

やる気を保つためにランキングに参加しています。
応援してくださるとすっごいやる気を出します！ (笑)

初心者にも使いやすい（と思う）レンタルサーバー

「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーや ロリポップ！です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。

最終更新日：2017-12-05（Tue）│
投稿日：2012-08-02（Thu）│
カテゴリ：はじめてのHTML

Pagetop ↑

« next ホーム prev »

コメントの投稿