XHTML/CSS・トップ | JavaScript&CSS・目次

●JavaScriptソースを外部ファイルとして置く

 XHTML環境におけるJavaScriptのポイントは別項の「XHTML文書におけるJavaScriptの注意点」をご参照いただくとして、ここではウェブに数多く紹介されているJavaScriptのソース、書籍のソースを有効に利用する方法を解説します。難しいことはありません。JavaScriptのソース(スクリプト)を「js」の拡張子として外部ファイルに置き換える方法です。なお、ウィンドウズ環境だと拡張子「js」ファイルはJavaScriptと互換性のある「JScript」ファイルとなります。

<script type="text/javascript">
<!--
 JavaScriptのソース
// -->
</script>

または

<script language="Javascript">
<!--
 JavaScriptのソース
// -->
</script>

 具体的には上のscript要素からJavaScriptのソースを抜き出し、拡張子「txt」(ピリオド入れると「.txt」)のメモ帳またはテキストファイルを開き、ソースを貼り付けます。次に拡張子を「txt」から「js」に変更すれば完了です。外部ファイルへのスクリプトの呼び出しは次のようにsrc属性を付加します。

<script type="text/javascript" src="外部ファイル名またはパス、またはURL"></script>

★ポインタを追いかける文字、流れる文字列

 このscript要素をもともと記載されていた場所のscript要素と置き換えて貼り付けます。ちなみにここのページにはポインタの後ろを波のように流れる文字列をJavaScriptで動作させています。JavaScriptのソースは「nami.js」ファイル内に書かれており、追いかける文字列にCSSの内部スタイルシートとしてのstyle要素を適用させています。(ソースは公開しませんが、ウェブや市販の書籍に似たようなものが掲載されていると思います。)

 また、body要素に"onload"のイベントハンドラを適用しています。JavaScriptにはイベントハンドラが適用されている場合もあるので必要時、記載します。(イベントハンドラとはページがロードされたり、クリックのように特定の動作が起こることをイベントといい、そのイベントの取得を行うものをいいます。)

【ポイント】

・Script要素から純粋にJavaScriptのソースまたはスクリプトを抜き出し、テキスト形式の別ファイルに記載する。

・拡張子を「js」へ変更する。

・src属性を配置したScript要素を実行させる位置へ貼り付ける。↓

<script type="text/javascript" src="URL"></script>

・必要なイベントハンドラがあれば記載する。

・CSSのスタイルシートを必要時、適用させる。

・HTMLソースの<body>〜</body>間、<head>〜</head>間のどこへ記載する必要があるか注意する。(両方必要な場合もあります。)

【そのほか】

・JavaScriptのソースまたはスクリプトをHTMLソースに記載する場合はmeta要素を<head>〜</head>間へ配置します。指定しなくてもエラーとはなりませんが、指定するのが正式です。↓

<meta http-equiv="content-script-type" content="text/javascript">

・JavaScriptのソースをHTMLソースに記載する場合CDATAセクション(<![CDATA[ 〜 ]]>)で囲うとエラーとなるので避ける。

・スクリプト言語名指定に使われる「language」属性は、文法的にエラーか、または、廃止されているのでご注意。

・「XHTML文書におけるJavaScriptの注意点」もご参照ください。

XHTML/CSS・目次 | JavaScript&CSS・目次

Copyright (C) 2006-2008 http://www.xml.vc/