[44] script要素で HTMLにスクリプトを読み込む or 直接書く
最終更新日:2017年12月05日 (初回投稿日:2012年08月02日)今回は <script>要素 を使ってみましょう。
<script>要素は、HTMLファイルに Javascript などのスクリプトを読み込む要素。
メタデータ・コンテンツの1つです。
<script>要素だけで
・外部スクリプトファイルの読み込み
・HTML上にじかにスクリプトを記述
の両方ともできます。
スクリプトが無効なときに代替コンテンツを表示する <noscript>要素もあります。
これは単独で使わず、<script>要素を使ったときだけ使用します。
使用する要素 | <script> 〜 </script> |
---|
<script>の属性 | type属性、src属性、charaset属性、defer属性、async属性、crossorigin属性 |
---|
<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> 〜 </script>内に直接(インラインで)スクリプトを書くこともできます。
この場合、当然ですが「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>要素はどこにでも置ける
<script>要素は、<head>内、<body>内、どっちにも書く事ができます。
<script>要素は、メタデータ・コンテンツだけど、フロー、フレージング・コンテンツでもあるので。
<script>要素は一般的に <body>の一番最後( </body>の直前 )に書くべきと言われています。
スクリプトの読み込み・実行中は、ページの解析が中断するし、Javascriptエラーが出ると 以降の処理が全部止まってしまうので。
ただ、縦に長くて ユーザーがスクロールしないとコンテンツが見れないサイトの場合、 <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回では済まないので、何回かに分けていきますね。
- 関連記事
-
- [45-5] meta要素で OGPを設定しよう
- [45-4] meta要素の http-equiv属性で動作を指示しよう
- [45-3] meta要素の name属性でサイトの情報を指定しよう
- (ちょっとメモ)文字コード、文字集合、エンコードについて(2)
- (ちょっとメモ)文字コード、文字集合、エンコードについて(1)
- [45-2] meta要素の charset属性で文字コードを指定しよう
- [45-1] meta要素で基本情報(メタデータ)を指定しよう
- [44] script要素で HTMLにスクリプトを読み込む or 直接書く
- [43] style要素で CSS を HTML文書内に書こう
- [42-4] link要素で ショートカットアイコン(favicon)を表示させよう
- [42-3] link要素の「rel属性」の値(リンクタイプ)
- (ちょっとメモ)CSSの @import と @media(メディアクエリ)
- [42-2] link要素の media属性で 外部CSSをメディア別に切り替えよう
- [42-1] link で外部CSSファイルの読み込み・グループ化をしよう
- (ちょっとメモ)MIMEタイプ
初心者にも使いやすい(と思う)レンタルサーバー
「初心者ですがレンタルサーバーはどこがいい?」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、
スターサーバーや ロリポップ!
です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。
ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー
は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。
スポンサーリンク