ちょっと詳しく（script要素編）〜御隠居のJavaScript入門

５. ちょっと詳しく（script要素編）

JavaScriptをXHTML（HTML）に組込むためには、script要素を使用しました。この要素のDTD（xhtml1-strict.dtd）を見てみましょう。

<!ELEMENT script (#PCDATA)>
<!ATTLIST script
  id          ID             #IMPLIED
  charset     %Charset;      #IMPLIED
  type        %ContentType;  #REQUIRED
  src         %URI;          #IMPLIED
  defer       (defer)        #IMPLIED
  xml:space   (preserve)     #FIXED 'preserve'
  >

id属性: 要素を一意に識別するためのid値を設定します。
charset属性: src属性で指定した外部ファイルのエンコーディング形式を設定します。
type属性: スクリプト言語の種類を設定します。JavaScriptの場合は、「text/javascript」と記述します。
src属性: スクリプトを記述した外部ファイルへのURLを記述します。この外部ファイルによるスクリプトの記述方法が推奨された方法です。
defer属性: 通常は、XHTML（HTML）を読み込む順序でスクリプトも実行されますが、 defer属性を指定すると（defer="defer"）スクリプトの実行を先送り（遅延）させ、先にXHTML（HTML）をすべて読み込みます。
xml:space属性: XHTML（HTML）をXML文書として扱い、空白を保持させる場合に設定します。

このscript要素はインライン要素、ブロックレベル要素どちらでも使用できます。また、head部にもbody部にも記述できます。そのため複数んもscript要素がXHTML（HTML）中に存在する場合は、 JavaScriptの実行及び解析は、その読み込まれた順序で行われます。

さて、これまではJavaScriptを使用することを前提に説明してきましたが、ブラウザによっては、その機能が無効にされていたり、機能そのものを持っていない場合もあります。そこで、そうしたブラウザに対応させるための要素としてnoscript要素が用意されています。

<!ELEMENT noscript %Block;>
<!ATTLIST noscript
  %attrs;
  >

noscript要素の内容モデルに記述されたブロックレベル要素は、ブラウザのスクリプト機能が有効な場合には無視されますが、ブラウザのスクリプト機能が無効あるいはスクリプト機能を持たないブラウザの場合は、ブロックレベル要素の部分が有効になります。前の勉強で上げたXHTML（HTML）にnoscript要素を組込んでみます。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
   PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>はじめてのJavaScriptサンプル</title>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<noscript>
<p>JavaScriptの機能が有効でないと、このページは正常に動作しません。</p>
</noscript>
<form action="test.html">
<p>
<input type="button" value="val1の表示" onclick="alert(val1);" /><br />
<input type="button" value="val2の表示" onclick="alert(val2);" /><br />
<input type="button" value="val3の表示" onclick="alert(val3);" /><br />
<input type="button" value="val4の表示" onclick="alert(val4);" />
</p>
</form>
</body>
</html>

先頭に戻る