スクリプトの記述場所

[新着] Webテンプレートを仮オープンしました

0   名前： める ： 2007/05/10（木） 00:46  ID:fIfV8NKh sub-.G
http://www.tagindex.com/cgi-lib/q1bbs/patio.cgi?mode=view&no=2959
http://www.tagindex.com/cgi-lib/q1bbs/patio.cgi?mode=view2&f=2959&no=7
こちらで新規にスレッドを立てるように指摘されましたので新規で立てます。

こちらのサンプルソースの中の
http://www.tagindex.com/cgi-lib/q1bbs/patio.cgi?mode=view2&f=2959&no=3
<script type="text/javascript">
function CangeImage(obj,url){
	document.getElementById(obj.parentNode.name).src = url;
}
</script>

この部分が
</head>と<body>の間に書かれていて（意図したものではないと思いますが）
実際には<head>内と<body>内のどちらに書くのかを知りたいと思い、
こちらのスレッドで質問した際に参照先を提示されましたが読んでもわかりません。
http://www.tagindex.com/cgi-lib/q1bbs/patio.cgi?mode=view2&f=2959&no=7

<head>内と<body>内の「どちら」かを教えていただけませんか。
1   名前： NullPo ： 2007/05/10（木） 00:46  ID:Z0FHbpib sub-ii
SCRIPT要素は、HTML文書にスクリプトを組み込むもので、 HEAD要素あるいは BODY要素に、何回出現してもよい。

って書いてあるし、どっちでもいいのかな。
2   名前： カヅサツ ◆ThCi95HEzw ： 2007/05/10（木） 00:46  ［URL］  ID:O5hEMlpW sub-r2
回答ミスに関わることなので(と私は思う)、件のスレッドに返信しました

こちらには一般論を書いておきますと、script要素はhead要素およびbody要素内に置けます。
3   名前： Z ◆XTzyosZXcL ： 2007/05/10（木） 00:46  ID:tWsRhjqj sub-Cl
　HTML4.01のルール上は>>1-2のとおりですが、では「どちらがより良いのか」という意味でのご質問でしたら

1.記述するのはHEAD要素内部（<head>〜</head>）
2.できれば外部ファイル化してSCRIPT要素のsrc属性で読み込ませる
3.XHTMLへの移行も考慮するならばコメントアウト（<--　〜　-->）はしない（もちろん移行するには他にも変更点はありますけれど）

ということになるかと思いますので補足しておきます。

参考資料(HTML4.01付属書B)：
http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/appendix/notes.html#h-B.3.2
http://www.w3.org/TR/html401/appendix/notes.html#h-B.3.2

　こうなった理由は簡単に言えば「過去の経緯から」（現実を仕様という形で再定義しようとしたため）でしょうね。
（もちろんこの件だけでHTML4.0及びHTML4.01が勧告された訳ではありませんが。）

ブラウザ戦争(WikiPedia)：
http://ja.wikipedia.org/wiki/%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E6%88%A6%E4%BA%89

ブラウザ戦争、そして標準化への道（ウェブ ブラウザ小史 2001）：
http://www.kanzaki.com/works/2001/pub/ua-history.html#comp2std

ブラウザの歴史：
http://www.scollabo.com/banban/tips/browser.html

#個人的には過去ログでかつて行われた興味のある議論展開（http://www.tagindex.com/kakolog/q4bbs/401/582.html）に詳細な経緯が潜んでいるように思うのですが、まとめ直す力量がありませんので紹介だけに留めます(^^;。
4   名前： める ： 2007/05/10（木） 00:46  ID:N/tYsfCJ sub-.G
皆様お返事ありがとうございました。

私はあのサンプルソースのスクリプト部分が 実際にはどちらに書くつもりだったのか ということが知りだかっただけなのですが、いろいろ参考資料を提示いただきありがとうございました。
難しい資料を提示されても理解できないのですが（汗） 結論は「どちらでもいい」ということですね。
ありがとうございました。
5   名前： 匿名 ： 2007/05/10（木） 00:46  ID:BD0Er6nW sub-Cz
>>3
横からすみませんが、1〜3 を『より良い』とする理由がイマイチ分かりません（特に 1）。よろしければ補足して下さると助かります。

なお、script 要素に関しては以下が詳しいです。
http://suika.fam.cx/~wakaba/-temp/wiki/wiki?script
6   名前： Z ◆XTzyosZXcL ： 2007/05/10（木） 00:46  ID:tWsRhjqj sub-Cl
>>5
　下記の資料によりそのように判断しました。

Webデザイン指針「スクリプトは可能な限り、外部スクリプトファイルによって提供すること」：
http://nekoshiki.fc2web.com/guidline/guidline.html#gdln10

XHTML1.0付録C.4「埋め込みスタイルシート及びスクリプト」：
http://www.doraneko.org/webauth/xhtml10/20000126/Overview.html#guidelines
http://www.w3.org/TR/xhtml1/#C_4
7   名前： 匿名 ： 2007/05/10（木） 00:46  ID:BD0Er6nW sub-Cz
ありがとうございます。その資料は主に (2) と (3) に関するものですね。納得です。

私見ですが、

(2). XHTML 1.0 で、前方互換性と後方互換性を同時に保証するには、外部スクリプト以外に選択肢はありません。従来の HTML パーサのほとんどは、「<![CDATA[」を解釈できずにそのままスクリプトエンジンに渡すので、スクリプトエラーになります。XML パーサは、「<![CDATA[」は解釈できますが、「<!--」は素直にコメント開始と見なすので、スクリプトが実行されません。

現状、XHTML で書かれたページで script 要素内をコメントにしても動作するように見えますが、これは XHTML を HTML としてパースしているので、問題が表面化していないだけです。Firefox、Opera、Safari で XML モードを使えば、正しく無視されます。

(3). HTML 4.0 では、スクリプトデータをコメントで隠すことについて、「しなければならない」でも「すべきである」でもなく、淡々と「こういうやり方もある」くらいのトーンでしか語っていません。古い携帯端末がネックになりますが、それも外部化すれば無問題なので、コメントアウトの習慣はもう廃れて良いと思います。

ただし、外部スクリプトは、(a) 文字コードの問題、(b) 相対パス基準の問題、(c) キャッシュの問題など、慣れないと面倒なこともあります。特に、今回のように画像が絡むと、外部化はちょっと面倒になります。今のところ、私はそこまでは求めません。


で、(1) に関してなんですが、script 要素を head 要素内に書くメリットは、実は少ないのです。経験的にベターな場所は、ドキュメントの最後尾です。これは以下の理由からです。

・ドキュメント内の全ての要素が出現しているため、load/DOMNodeInserted/readystatechange イベントに頼る必要がないこと。
・外部スクリプトの場合、defer 属性がない限り、ファイルを読み込み終えるまでパースが一時中断されます（特に、アクセス解析やアフィリエイトの位置を間違えると悲惨）。最後尾におけば、外部ファイルの到着を待たずにレンダリングできます。

head 要素内に置くメリットを挙げるとすれば：

・スクリプトの実行前に、スクリプトを必要とするボタン類が押されることを防げる。ただし、これに関しては、スクリプト設計次第で何とでもなるので、メリットとして挙げるほどではないかも。
・本文（body 要素内）を汚さない。スタイルシートのように、メタ的な情報であることを表現できる。

ですから、この点については、どちらが良いという問題ではなく、状況と用途に応じて置く位置を決めた方が良いと、私は思います。

# 個人的には、xml-stylesheet 処理命令のように、(X)HTML に依存しないスクリプト結合機構が必要だと思います。それが、昔なら HTML Component、今なら XML Events や XBL とかなんですが、XHTML2 の策定が遅れ、HTML5 に焦点が移りつつある今、果たしてどうなることやら。
8   名前： 匿名 ： 2007/05/10（木） 00:46  ID:BD0Er6nW sub-Cz
>>7
訂正。

> 従来の HTML パーサのほとんどは、「<![CDATA[」を解釈できずに

HTML 4.0 の script 要素の内容は CDATA でマークアップ解釈をしませんから、HTML パーサとしてはむしろ、この動作が妥当ですね。失礼。

> head 要素内に置くメリット

「head 要素内で複数スクリプトを一括管理」というのも考えましたが、head 要素である必要もないんですよね……。
一覧へ戻る