一つ一つ確認 : Weblog : SimpleIsm

一つ一つ確認

Operaだけblockquote要素のcite属性、title属性の表示がおかしいと言ったけど、Javascript Developer ToolsとかFirebugで確認してもエラーは見られなかった(細かいエラーはあるけど、許容範囲内…だと思う)。だから一つ一つ確認しながら何がいけないのか発見してみようと思った。

以下、cite属性とtitle属性を表示させるためのJavaScriptと、一応(多分)理解している部分。

function extractBlockquoteCitations() {
 var quotes = document.getElementsByTagName('blockquote');
  for(var i = 0; i < quotes.length; i++) {
  var title = quotes[i].getAttribute('title');
  if(title !== null && title !== '') {
   var p = document.createElement('p');
   p.className = 'title';
   quotes[i].appendChild(p);
   p.innerHTML = "引用元 : "+title+"";
  }
  else {
   var p = document.createElement('p');
   p.className = 'title';
   quotes[i].appendChild(p);
   p.innerHTML = "引用元 : ";
  }
  var cite = quotes[i].getAttribute('cite');
  if(cite !== '') {
   var a = document.createElement('a');
   a.setAttribute('href', cite);
   a.setAttribute('title', title);
   a.appendChild(document.createTextNode(a));
   var p = document.createElement('p');
   p.className = 'uri';
   p.appendChild(a);
   quotes[i].appendChild(p);
  }
 }
}

function addEvent(obj, evType, fn) {
 if(obj.addEventListener) {
  obj.addEventListener(evType, fn, true);
  return true;
 }
 else if(obj.attachEvent) {
  var r = obj.attachEvent("on"+evType, fn);
  return r;
 }
 else {
  return false;
 }
}

addEvent(window, 'load', extractBlockquoteCitations);

function extractBlockquoteCitations() {

blockquote要素の属性を抜き出す

var quotes = document.getElementsByTagName('blockquote');

quotesを宣言, quotes = blockquote要素

for(var i = 0; i < quotes.length; i++) {

for文開始, iを宣言, i = 0, iは(quotes.length = 6)未満のときに繰り返す, このfor文が開始する度にiは+1される

if(title !== null && title !== '') {

もしtitle属性が空もしくはtitle属性がない場合

var p = document.createElement('p');

pを宣言, p要素を生成

p.className = 'title';

p要素のclass属性に"title"を挿入

quotes[i].appendChild(p);

quotes[i]に子要素"p"を追加

p.innerHTML = "引用元 : "+title+"";

"引用元 : title(blockquote要素で指定したtitle属性)"をp要素でマークアップ

}

if文終了

else {

もしそれ以外だった場合

var p = document.createElement('p');

pを宣言, p要素を生成

p.className = 'title';

p要素のclass属性に"title"を挿入

quotes[i].appendChild(p);

quotes[i]に子要素"p"を追加

p.innerHTML = "引用元 : ";

"引用元 : "をp要素でマークアップ

}

else文終了

var cite = quotes[i].getAttribute('cite');

citeを宣言, cite = cite属性

if(cite !== '') {

もしciteが無い場合

var a = document.createElement('a');

aを宣言, a要素を生成

a.setAttribute('href', cite);

a要素にhref属性を追加, 属性値はcite属性で指定したURI

a.setAttribute('title', title);

a要素にtitle属性を追加, 属性値はtitle属性で指定した文字

a.appendChild(document.createTextNode(a));

a要素にテキストノードaを追加 ※ここ微妙に分かんない；

var p = document.createElement('p');

pを宣言, p要素を生成

p.className = 'uri';

p要素のclass属性に"uri"を挿入

p.appendChild(a);

p要素にa要素を追加

quotes[i].appendChild(p);

quotes[i]に子要素"p"を追加

}

if文終了

}

for文終了, ここまでをi < 6まで繰り返す？

}

blockquote要素に関する記述の終了

一部参考にしたサイト

とりあえずここまでが限界；それ以下の文はよく分かんない（；´Д｀）真剣に意味を調べながら書いてみると、JavaScriptって難しいのね。今までコピペしたものをちょこちょこっと整形していただけだったから。でもちょっと楽しいかも。

これだけを見ると、やっぱりfor文がおかしいような気がする。プロパティlengthは文字列の長さを取り出すプロパティ。つまり"abc.length"は3ということになる。これをfor文に当てはめると"quotes.length = 6"ってことだから、iは6未満のときに繰り返すっていうfor文で合ってるとは思うんだけど、blockquote要素って大体cite属性とtitle属性の2つ、多くてもclass属性入れて3つだと思うから、6未満、つまり5回も繰り返す必要なくね？とか言っててよく分からなくなってきた。どこか何か根本的に理解してない気がするorz

ヘルプ～（；´Д｀）ノシ

追記(2007/12/13)

アドバイスを頂きまして、opera addeventlistenerでググると幸せになれるみたいです。ユーザーJavaScriptとか？正直全然分かりませんｗもうちょい勉強してから弄ることにします。Operaユーザーの人ごめんなさい。

追記2(2007/12/14)

lengthは配列の総数では？

マジすか；

文字列の長さは、プロパティlengthによって取り出すことができます。例えば、
"aab".length
は3となります。また、JavaScriptでは、全角文字(2バイト文字)もきちんと扱えますので、
"ああい".length
も3となります。

とあったので、鵜呑みにしてしまいました。これがJavaScriptの書籍は間違いだらけと言われている所以ですかね。

2007/12/12(Wed) 01:18

SimpleIsm