2007/03/31

[技術系]   予約語っぽい名前は使わないほうがいいらしいぞぉ by ぷりぷりはかせ

at 06:51JST
 
お絵描きし終わって覗いてみたら、またDan氏が
「IEで動かないJavaScript」
を量産していた。…昨日もこの時間に発見したような気がする。もしかしてライフサイクルが同じなのかしらん。

どっちにしても乗りかかった船だし勉強になるので、なぜ動かないのかチェックしてみることにした。

404 Blog Not Found:perl - 任意のURIのStatusを確認するAPI
http://blog.livedoor.jp/dankogai/archives/50798572.html

もとのHTML+JavaScriptソースは下記のとおり。

<script> 
function $(id){ return document.getElementById(id) }
function Status(cb){
this.proxy = 'http://api.dan.co.jp/status/';
this.loader_img = 'http://blog.livedoor.jp/dankogai/img/ajax-loader.gif';
this.idle_img = 'http://blog.livedoor.jp/dankogai/img/1x1.gif';
this.cb = (cb || 'callback');
this.parse = function(uri, cb){
if ($('ajax-loader')) $('ajax-loader').src = this.loader_img;
if (! cb) cb = this.cb;
var script = document.createElement('script');
script.id = this.proxy + cb + '/' + uri;
script.charset = 'UTF-8';
script.src = script.id;
document.lastChild.appendChild(script);
};
return this;
}
var status = new Status();
function callback(json){
$('status.time').innerHTML = json.time;
$('status.uri').innerHTML = json.uri;
$('status.code').innerHTML = json.code;
$('status.chain').innerHTML = '';
if (json.chain){
var chain = document.createElement('table');
chain.width = '100%';
for (var i = 0,l = json.chain.length; i < l; i++){
var tr = document.createElement('tr');
for (var j = 0, m = json.chain[i].length; j < m; j++){
var td = document.createElement('td');
td.innerHTML = json.chain[i][j];
tr.appendChild(td);
}
chain.appendChild(tr);
}
$('status.chain').appendChild(chain);
}
$('status.header').innerHTML = '';
if (json.header){
var header = document.createElement('table');
header.width = '100%';
for (var h in json.header){
var tr = document.createElement('tr');
var th = document.createElement('th');
th.style.whiteSpace = 'nowrap';
th.innerHTML = h;
tr.appendChild(th);
var td = document.createElement('td');
td.innerHTML = json.header[h];
tr.appendChild(td);
header.appendChild(tr);
}
$('status.header').appendChild(header);
}
$('ajax-loader').src = status.idle_img;
}
</script>
<style>
.status td,th { text-align: left; border: dotted 1px }
.status td { font-family:sans-serif }
</style>
<div style="border:dotted 1px;padding: 0.5em">
<img id="ajax-loader" src="http://blog.livedoor.jp/dankogai/img/1x1.gif" alt="loader" border="0" align="right">
<input id="uri" type="text" size="64"
value="http://blog.livedoor.jp/dankogai"><br>
<select onchange="$('uri').value=this.value;status.parse($('uri').value)">
<option>http://blog.livedoor.jp/dankogai</option>
<option>http://item.rakuten.co.jp/wine/99xx99xx/</option>
<option>http://www.amazon.co.jp/gp/product/0123456789X</option>
<option>http://d.hatena.ne.jp/nonexistent</option>
<option>http://b.hatena.ne.jp/nonexistent</option>
</select>
<input type="submit" onclick="status.parse($('uri').value)">
<table class="status" width="100%">
<tr><th width="15%">Time</th><td id="status.time"></td><tr>
<tr><th>URI</th><td id="status.uri"></td><tr>
<tr><th>Code</th><td id="status.code"></td><tr>
<tr><th>Status Chain</th><td id="status.chain"></td><tr>
<tr><th>Header</th><td id="status.header"></td><tr>
</table>
</div>

submitボタンを押すと、Windows XP SP2 + IE7では
「status.parseがundefinedでエラー」
となる。…なんでだ?

はじめ、コンストラクタの書き方がおかしいのかと思ってチェックしてみたが違った。printfデバッグすると、script定義領域を抜けた時点ですでにstatusがundefinedになっている。

-_-; もしかして…なんか予約語とバッティングしてんの?

と思ってstatusを全部statに書き換えたら動作した。

<script> 
function $(id){ return document.getElementById(id) }
function Status(cb){
this.proxy = 'http://api.dan.co.jp/status/';
this.loader_img = 'http://blog.livedoor.jp/dankogai/img/ajax-loader.gif';
this.idle_img = 'http://blog.livedoor.jp/dankogai/img/1x1.gif';
this.cb = (cb || 'callback');
this.parse = function(uri, cb){
if ($('ajax-loader')) $('ajax-loader').src = this.loader_img;
if (! cb) cb = this.cb;
var script = document.createElement('script');
script.id = this.proxy + cb + '/' + uri;
script.charset = 'UTF-8';
script.src = script.id;
document.lastChild.appendChild(script);
};
return this;
}
var stat = new Status();
function callback(json){
$('stat.time').innerHTML = json.time;
$('stat.uri').innerHTML = json.uri;
$('stat.code').innerHTML = json.code;
$('stat.chain').innerHTML = '';
if (json.chain){
var chain = document.createElement('table');
chain.width = '100%';
for (var i = 0,l = json.chain.length; i < l; i++){
var tr = document.createElement('tr');
for (var j = 0, m = json.chain[i].length; j < m; j++){
var td = document.createElement('td');
td.innerHTML = json.chain[i][j];
tr.appendChild(td);
}
chain.appendChild(tr);
}
$('stat.chain').appendChild(chain);
}
$('stat.header').innerHTML = '';
if (json.header){
var header = document.createElement('table');
header.width = '100%';
for (var h in json.header){
var tr = document.createElement('tr');
var th = document.createElement('th');
th.style.whiteSpace = 'nowrap';
th.innerHTML = h;
tr.appendChild(th);
var td = document.createElement('td');
td.innerHTML = json.header[h];
tr.appendChild(td);
header.appendChild(tr);
}
$('stat.header').appendChild(header);
}
$('ajax-loader').src = stat.idle_img;
}
</script>
<style>
.stat td,th { text-align: left; border: dotted 1px }
.stat td { font-family:sans-serif }
</style>
<div style="border:dotted 1px;padding: 0.5em">
<img id="ajax-loader" src="http://blog.livedoor.jp/dankogai/img/1x1.gif" alt="loader" border="0" align="right">
<input id="uri" type="text" size="64"
value="http://blog.livedoor.jp/dankogai"><br>
<select onchange="$('uri').value=this.value;stat.parse($('uri').value)">
<option>http://blog.livedoor.jp/dankogai</option>
<option>http://item.rakuten.co.jp/wine/99xx99xx/</option>
<option>http://www.amazon.co.jp/gp/product/0123456789X</option>
<option>http://d.hatena.ne.jp/nonexistent</option>
<option>http://b.hatena.ne.jp/nonexistent</option>
</select>
<input type="submit" onclick="stat.parse($('uri').value)">
<table class="stat" width="100%">
<tr><th width="15%">Time</th><td id="stat.time"></td><tr>
<tr><th>URI</th><td id="stat.uri"></td><tr>
<tr><th>Code</th><td id="stat.code"></td><tr>
<tr><th>Status Chain</th><td id="stat.chain"></td><tr>
<tr><th>Header</th><td id="stat.header"></td><tr>
</table>
</div>

んー。ホントはどうなのかチェックしてないけど、やっぱ

教訓:
予約語っぽい名前は使わないほうがいい

ってことかな(注:「statだってperlじゃ予約語だろ」っつーつっこみはナシ)。

ついでにアサマシエイト。



関連しそうな過去記事:
さらに過去の記事
2009/04 (1)   2008/12 (3)   2008/11 (9)   2008/10 (10)   2008/09 (20)   2008/08 (2)   2008/07 (23)   2008/06 (16)   2008/05 (22)   2008/04 (11)   2008/03 (21)   2008/02 (20)   2008/01 (21)   2007/12 (32)   2007/11 (37)   2007/10 (46)   2007/09 (63)   2007/08 (33)   2007/07 (41)   2007/06 (81)   2007/05 (173)   2007/04 (168)   2007/03 (113)   2007/02 (123)   2007/01 (92)   2006/12 (111)   2006/11 (185)   2006/10 (20)  
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。