目次

javascript記述上の注意

本当は外部ファイルが推奨されている

xhtmlでは script タグの内容が特別扱いされないため、書き方に制約があります。無用な手間を省くためプログラムを別のファイルに書いて、表示時に読み込む方法が推奨されています。

<script type="text/javascript" src="ファイルのパス"></script>

たとえば、次のようにプログラムを書いて、

function showimg1(){
     document.getElementById("area1").src = "images/img1.png";
}
function showimg2(){
     document.getElementById("area1").src = "images/img2.png";
}
function showimg3(){
     document.getElementById("area1").src = "images/img3.png";
}

拡張子.jsで保存して、head部に次のように書きます。ここでは test.js という名前だったとして、

<script type="text/javascript" src="test.js"></script>

これで、test.js 内の function が使えます。

別ファイルにしない場合

xhtmlでは、scriptタグの内容も(styleの内容も)他のタグと区別なく処理します。つまり次の文字は特別な意味をもつことになりますからそのまま書いてはいけません。

<
タグの始まりです。<em>などとつながったり、</p>などとつながっていくと解釈されてしまいます。プログラムの中では大きさの比較で使う文字ですが、正しく解釈されません。
&
テキストの中に < の文字を含めることが絶対にできないとすると、ここにあるような説明もできなくなります。そこで、特殊な文字を書く方法を定めています。&lt;で < というようにします。これを実体参照(Entity reference)といいます。この仕組みのために & 自体を書けなくなりますので、&amp; と書きます。このような事情ですので、プログラムの中では && として「かつ」という論理積に使う文字ですが、正しく解釈されません。
]]>
特殊な文字の並びです。これを使うことはないでしょうから説明を略します。

このテキストでは次のように解決しています。

<

&lt; と書くと、javascriptがプログラムとして < と見るか、&lt; と見るかはっきりしません。ブラウザにより異なる可能性があるので使えません。

xmlでは<や&を特殊文字と解釈しない範囲だと指定する方法がありますが、ブラウザが対応していないことがあります。xhtmlをxmlと解釈するかhtmlと解釈するかのわずらわしい問題が絡みます。これも使えません。

実は > がそのまま通るので比較の順序を変えればいいのです。

if ( x < 10 ) { … }

という部分は

if ( 10 > x ) { … }

とすればいいのです。

&

たとえば、次のようなプログラムを書きたい時は、

if ( a > 0 && 10 > a ){
    // aが0より大きく、なおかつ10より小さい場合の処理
}

次のように分けて書くことで同じことができます。

if ( a > 0 ){
   if( 10 > a ){
      // aが0より大きく、なおかつ10より小さい場合の処理
   }
}

ウェブページ(Nov.2009)
聖愛中学高等学校
http://www.seiai.ed.jp/