掲示板/総合質問板/過去ログ/一覧/ JavaScript と　空要素について

0 名前： ななみ ： 2007/02/12（月） 20:35 ID:NwGvZPE0 sub-.G

JavaScript を使うために HTML に書き加えたものについての質問です。
JavaScript か HTML か迷いましたので　こちらに書き込ませていただきました。

Highslide JS というものを使って　拡大画像を表示したり　次々と
画像を表示したりするように致しました。
　
　Highslide JS : http://vikjavev.no/highslide/

六つ並んでいるサンプルの右下のものを使いました。
動きは順調で　満足しております。

ただ　HTML-lint でチェックしてみると　レベル１ですがエラーを指摘されました。
HTML に書き加えたのは　以下の二箇所です。

　１. body の下に

<div id="highslide-container"></div>

　２. 画像とキャプションの下に

<div id="controlbar" class="highslide-overlay controlbar">
<a href="javascript:void(0)" onclick="return hs.previous(this)" onkeypress="return hs.previous(this)" title="前の画像"></a>
<a href="javascript:void(0)" onclick="return hs.next(this)" onkeypress="return hs.next(this)" title="次の画像"></a>
<a href="javascript:void(0)" class="highslide-move" title="Click and drag to move" style="margin-left: 10px"></a>
<a href="javascript:void(0)" onclick="hs.close(this)" onkeypress="hs.close(this)" title="Close"></a>
</div>

指摘されたエラー
　１. <DIV> と </DIV> の間が空です。
　２. <A> と </A> の間が空です。

こういうことは　JavaScript を使う限り　避けられないことなのでしょうか？
それとも　何か違った書き方とか方法があるのでしょうか？
教えていただけると　ありがたく存じます。
どうぞ　よろしくお願いいたします。

1 名前：匿名： 2007/02/12（月） 20:35 ID:rEkc4Z1y sub-kJ: まず用語の注意だが、空要素というのは、<img>、<br>、<input> のように内容を持たない要素（HTML 的には終了タグを持たない要素）のことを指す。div 要素は空要素ではない。

ついでに、非常に多い誤用として、空タグというのは <>、</> のように、タグ名を書かず、文脈によって決まるタグのことを指す。HTML でも空タグを使用することはできるが、対応ブラウザはほとんどない。

> こういうことは　JavaScript を使う限り　避けられないことなのでしょうか？

直に書かず、JavaScript で div[@id="highslide-container"] 生成してやれば良い。

// hasFeature('HTML', '1.0')
var node = document.createElement('div');
node.id = 'highslide-container';
document.body.insertBefore(node, document.body.firstChild);

a 要素も同様。そもそも、まず HTML によるマークアップがあって、それに基づいてスタイルやスクリプトを作成するんだ。そのとき、どうしてもスクリプトで必要な要素を生成してやれば良い。

最初からスクリプトのための HTML を書くなんて本末転倒と言うか、個人的に気持ち悪い。

2 名前： ななみ ： 2007/02/12（月） 20:35 ID:Fw3vrX1/ sub-.G: 匿名　ID:rEkc4Z1y　さん　お返事ありがとうございました。

「空要素」については　よくわかりました。
中身が空っぽなので　「空要素」と呼ぶのかと思い違いをしておりました。
ありがとうございます。

スクリプトについては　全く知識がありませんので　よく理解できません。
ダウンロードしたものを　そのままアップして　使えるようにするまでが精一杯で　
それだけにも何日間も頭をひねりました。

教えていただいたものを　どこに　どのように　書き加える（書き換える？）のかが
わかりません。
jsファイルなのでしょうか？　htmlなのでしょうか？

ご厚意に甘えるようで申し訳ないのですが　書き加える（書き換える？）場所と
あわせて　<a> についても教えていただけると　ありがたく存じます。
どうぞ　よろしくお願いいたします。

3 名前：匿名： 2007/02/12（月） 20:35 ID:rEkc4Z1y sub-kJ

>>1 のように DOM ツリーを操作すれば、スクリプト側から全部コントロールできるので楽なんだけど、

もし一括コントロールが必要でないなら、その都度 document.write() で書き出しても良い。かえって面倒かもしれないが。

・body 要素直下

document.write('<div id="highslide-container"><\/div>');

・キャプションの下

document.write('<div id="controlbar" class="highslide-overlay controlbar">'
+ '<a href="javascript:void(0)" onclick="return hs.previous(this)" onkeypress="return hs.previous(this)" title="前の画像"><\/a>'
+ '<a href="javascript:void(0)" onclick="return hs.next(this)" onkeypress="return hs.next(this)" title="次の画像"><\/a>'
+ '<a href="javascript:void(0)" class="highslide-move" title="Click and drag to move" style="margin-left: 10px"><\/a>'
+ '<a href="javascript:void(0)" onclick="hs.close(this)" onkeypress="hs.close(this)" title="Close"><\/a>'
+ '<\/div>');

この場合の注意点として、終了タグ </div>、</a> の "<" と "/" を続けて書かないようにすること（上記参照……なお、外部スクリプトにするなら気にしなくても良い）。

4 名前： ななみ ： 2007/02/12（月） 20:35 ID:Fw3vrX1/ sub-.G: 匿名　ID:rEkc4Z1y　さん　お返事ありがとうございました。

早速　書き換えてみました。
が　そのまま書いてみると　document.write の文字が見えました。
それで　前後に　　を書き加えてみると　その文字は消えました。
HTML-lint も　100点！　と言ってくれました。

でも　Highslide JS が効いておりません。　どうしてなのでしょう？
説明するのが難しいのですが　「画像とキャプションとコントロールバー」は
dd の中にありますので　それが原因でしょうか。

私流の書き方で　お見苦しいかと思いますが　ご覧いただけますでしょうか。

　元のページ　：　http://www.nagominoniwa.net/sakuin/tsubaki05.html
　書き換えたもの　：　http://www.nagominoniwa.net/sakuin/tsubaki01.html

何度も　お手数をかけて申し訳ありませんが
どうぞ　よろしくお願いいたします。

5 名前：匿名： 2007/02/12（月） 20:35 ID:rEkc4Z1y sub-kJ: >>1 も >>3 もスクリプト（HTML を書き出す JavaScript）なんだから、script 要素の中に入れなきゃ。

6 名前： ななみ ： 2007/02/12（月） 20:35 ID:Fw3vrX1/ sub-.G: 匿名　ID:rEkc4Z1y　さん　何度もすみませんでした。

出来ました！

「script 要素」って何？　
という疑問は　こちらの「JavaScriptの基本」を拝見して解消できました。

「HTML-lint の　100点を選ぶ」　か　「HIghslide JS の動きを選ぶ」　か
二者択一しか無いのかと思ってましたが　両方を手に入れることができて
とても嬉しく思っております。

分かりの良くない私に　辛抱強くお付き合いいただきまして
本当に　ありがとうございました。

JavaScript と 空要素について

JavaScript と　空要素について