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

最終更新日:-0001年11月30日  (初回投稿日:2012年08月02日)

今回は <script>要素 です。
<script>要素は、HTMLファイルに「Javascript」などのスクリプトを読み込むための要素。

そして、スクリプトが実行できない環境に代替コンテンツを入れるための<noscript>要素ってのもあるんです。
今日はこの2つを使ってみましょう。

使用する要素 <script> 〜 </script>
<noscript> 〜 </noscript>
<script>の属性 type属性、src属性、charaset属性、defer属性、async属性

<script>要素を使ってみよう

とにかくまず、<script>要素のソースを見てみましょう。
外部スクリプトファイルを読み込む時は、このように書きます。
ここで読み込んでいるのは、外部Javascriptファイル(Javascriptを書いたテキストファイルに、拡張子を「.js」として名前を付けたもの)です。

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/effects.js"></script>
<script type="text/javascript" src="js/accordion.js"></script>

このように1つの<script>要素に1つのスクリプトを書きます。
ですので、HTMLに読み込みたいスクリプトが複数あるなら、このように<script>も複数書くんです。
これは<link>要素と同じですね。
ただし、<link>と違って<script>要素は、終了タグがありますので要注意〜♪

次に、スクリプトを外部ファイルでなく、直接HTMLに書いてみましょう。
ここで書いているのもJavascriptです。

<script>
Event.observe(window, 'load', function(){
new accordion("accordion");
}, false);
</script> 

スクリプトを<script>〜</script>内に直接書くんです。

<script>要素は、<head>内でも<body>内でも書く事ができます。
HTMLの中で繰り返し使うスクリプトなら、<head>内に書いた方が無難。単に効率の問題ですけどね。(HTML内で何回も同じスクリプトを書くより、<head>で1回指定して、ページ内で何回でも呼び出すほうがマシってことです)
<body>の中に書くなら、フレージング・コンテンツが置ける場所に書きます。

「フレージング・コンテンツが置ける場所」とは、コンテンツ・モデルがフレージング・コンテンツOKな要素の中…という事だと思います。今まで深く考えずに、スクリプトを適用したい要素の前とかに書いてましたけどね。
「フレージング・コンテンツ」については「[37] HTML5要素の「カテゴリー」を見てみよう」を、
「コンテンツ・モデル」については「[38-2] 「コンテンツ・モデル」一覧」を参照してください。

Javascriptそのものに関しての説明は省略します。
上記サンプルのJavascriptは「アコーディオン_Prototype」というモノ。これは、小さくたたまれたブロックをクリックすると、びろ〜んと伸びて内容が見えるってやつ。
Ajaxライブラリで用意されたJavascriptやCSSを、HTMLに組み込んで使います。
ご興味があれば 「Ajaxライブラリ 使用サンプル集:アコーディオン-prototype」をご覧ください。

<script>要素の属性のルール

<script>要素の属性には「type属性」「src属性」「charset属性」「defer属性」「async属性」の
5つがあります。最後の「async属性」はHTML5からできた新しい属性です。

●type属性
「type=" MIMEタイプ "」という形で使います。
デフォルトは「text/javascript」ですので、Javascriptを使うときは省略できます。

●src属性
「src="URL"」という形で、外部スクリプトファイルの場所を絶対URLや相対URLで指定します。

★このあと↓の3つの属性は「src属性」と一緒でなければ使いません。
(外部スクリプトファイルを読み込むときしか使わないってことです。)

●charset属性
「charset="文字コード"」という形で使います。外部スクリプトファイルの「文字コード」を指定するときに使います。
文字コードは<meta>要素の時に説明します。「Shift_JIS」や「UTF-8」などがあります。

★サーバの設定によっては、コレを指定するとうまく読み込まない場合もあるので要注意だそうです。
 コレを使ってヘンになったら、自分が使うサーバの文字エンコーディング設定を調べてみる必要があります。

●defer属性
「defer」「defer="defer"」「defer=""」のいずれかの形で使います。
「実行の保留」をさせる属性で、ページ全体の読み込みが完了してからスクリプトが実行されるようにします。

●async属性
「async」「async="async"」「async=""」のいずれかの形で使います。「非同期で実行」させます。
<body>内に<script>要素を入れると、外部スクリプトが読み込まれて実行されるまで、ブラウザはページの読み込みをブロックされる=時間がかかる、んですが、「async属性」で外部スクリプトのロードと実行を非同期にすれば、ブラウザの処理がブロックされないのだそうです。
(まだ各ブラウザが非対応ぽい。ごめんなさい、そのうちサンプルを作って実験してみますw )

<noscript>要素でスクリプトの代替コンテンツを指定しておこう

最後に、あって良かった<noscript>要素です。
<noscript>要素は単独で使わない、<script>要素を使った時だけ使用します。
「スクリプトが実行されない環境」で、代替のコンテンツを表示するための要素です。
ですので、スクリプト実行OKなら <noscript>の内容は非表示になるんです。

このように、代替のテキストを入れたりします。

<noscript>
<p> 
○○○○のためにJavascriptを使用しています。
表示する場合はブラウザで「Javascriptを有効」にしてください。
</p>
</noscript> 

「スクリプトが実行されない環境」とは、
すっごい古いブラウザを使ってるとか(は今はもうあんまり無いと思うけど)、
ビジタが自分のブラウザの設定で、スクリプトを無効にしている場合です。

ブラウザの環境設定で、左のようにJavascriptを有効にするかどうか選べるようになっています。
Javascriptで広告を出したり、アニメーションを表示したりするのが不要だと思うユーザのためにある設定です。

以前は、Javascriptのせいで読み込みが遅くなるのを嫌う人がコレで無効にしていました。(PCや通信回線の速度が遅かった時代です)
今は、主にアクセシビリティ上の選択で無効にしている人が多いと思うんです(Javascriptは視覚表現を目的とするのがほとんどだと思うので、不要な人は無効にしますよね)。
しかし、視覚情報を得たいんだけどウッカリ無効にしている人には「無効になってるけど?」と気づいてもらうために、上記のような<noscript>を入れておくほうが親切。

ムービーなどをスクリプトで表示している場合は、代替の静止画像を入れます。
サイトのイメージ(ムード)的な動画を入れてるだけなら、このように、つつましく(笑)代替の静止画を指定しておけば十分。

<noscript>
<img src="noscriptimage.jpg" alt="ムービー代替イメージ" width="600" height="250">
</noscript> 

次回予告

次回からは<meta>要素です。やっと<meta>要素。
<meta>要素は、HTML文書に関する情報をいろいろ指定する要素で、けっこう最初の方に紹介すべき基本中の基本な要素ですが…、こんなに遅くなってしまいました〜。
この要素も1回では済まないので、何回かに分けてやっていきますね。

関連記事
この記事をはてなブックマークに追加

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

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

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2017/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.