こんにちは、
JavaScriptとエスケープ
まず、
さて、
その具体的な方法の1つがJSONです。最近では多くの言語がJSONをネイティブにサポートしていますし、
ただし、
<script>
var data = {"a":1,"b":[1,2,3],"c":{"d":"XXX</script><script>"}};
</script>
この場合は当然HTMLとしてのエスケープも必要で、
<script>
var data = {"a":1,"b":[1,2,3],"c":{"d":"XXX</script><script>"}};
</script>
この場合は/の前にバックスラッシュを入れることで閉じタグとして解釈されることを回避できますが、
なお、
HTMLの出力方法
さて、
function TwitterCallback1(data){
var div = document.getElementById('twitter-search-r1');
/* 前回の結果がある場合に削除 */
while (div.firstChild) {
div.removeChild(div.firstChild);
}
var results = data.results;
var ul = document.createElement('ul');
ul.className = 'twl';
for (var i = 0, len = results.length;i < len; i++){
var usr = results[i];
var user = usr.from_user;
/* 要素を作る */
var li = document.createElement('li');
var link = document.createElement('a');
var icon = document.createElement('img');
var name = document.createElement('span');
var entry = document.createElement('p');
var time = document.createElement('div');
var timelink = document.createElement('a');
/* CSS用にclassを設定 */
li.className = ((i+1)%2) ? 'odd' : 'even';
link.className = 'usr';
entry.className = 'entry';
time.className = 'time';
/* リンクや画像などの属性を設定 */
link.href = 'http://twitter.com/' + user;
var src = usr.profile_image_url;
if (src.indexOf('http') === 0) {
icon.src = src;
}
icon.width = 48;
icon.height = 48;
timelink.href = 'http://twitter.com/' +
user +'/status/' + usr.id;
var d = new Date(usr.created_at);
var date = d.getFullYear() + '/' + (d.getMonth()+1) +
'/' + d.getDate() + ' ' + d.getHours() + ':' +
('0'+d.getMinutes()).slice(-2);
/* テキストノードの挿入 */
entry.appendChild(document.createTextNode(usr.text));
timelink.appendChild(document.createTextNode(date));
name.appendChild(document.createTextNode(user));
/* 要素の組み立て */
link.appendChild(icon);
link.appendChild(document.createElement('br'));
link.appendChild(name);
li.appendChild(link);
li.appendChild(entry);
time.appendChild(timelink);
li.appendChild(time);
ul.appendChild(li);
}
/* 画面に反映 */
div.appendChild(ul);
}
var b1 =document.getElementById('twitter-search-b1');
b1.onclick=function(){
var script = document.createElement('script');
script.src = 'http://search.twitter.com/search.json'+
'?callback=TwitterCallback1&lang=ja&q=JavaScript';
document.body.appendChild(script);
}
この方法は、
しかし、
cloneNodeによる要素の組み立て
そこでオススメなのが、
<ul id="twitter-search-t2" style="display:none;">
<li>
<a class="usr">
<img width="48" height="48"><br>
<span>boosim</span>
</a>
<p class="entry"></p>
<div class="time"><a></a></div>
</li>
</ul>
このHTMLをベースに、
var _t=document.getElementById('twitter-search-t2');
var tmpl = _t.getElementsByTagName('li')[0];
function TwitterCallback2(data){
var div = document.getElementById('twitter-search-r2');
/* 前回の結果がある場合に削除 */
while (div.firstChild) {
div.removeChild(div.firstChild);
}
var results = data.results;
var ul = document.createElement('ul');
ul.className = 'twl';
for (var i = 0, len = results.length;i < len; i++){
var usr = results[i];
var user = usr.from_user;
/* 要素を作る */
var li = tmpl.cloneNode(true);
var link = li.getElementsByTagName('a')[0];
var icon = link.getElementsByTagName('img')[0];
var name = link.getElementsByTagName('span')[0];
var entry = li.getElementsByTagName('p')[0];
var time = li.getElementsByTagName('div')[0];
var timelink = time.getElementsByTagName('a')[0];
/* CSS用にclassを設定 */
li.className = ((i+1)%2) ? 'odd' : 'even';
/* リンクや画像などの属性を設定 */
link.href = 'http://twitter.com/' + user;
var src = usr.profile_image_url;
if (src.indexOf('http') === 0) {
icon.src = src;
}
icon.width = 48;
icon.height = 48;
timelink.href = 'http://twitter.com/' +
user +'/status/' + usr.id;
var d = new Date(usr.created_at);
var date = d.getFullYear() + '/' + (d.getMonth()+1) +
'/' + d.getDate() + ' ' + d.getHours() + ':' +
('0'+d.getMinutes()).slice(-2);
/* テキストノードの挿入 */
entry.appendChild(document.createTextNode(usr.text));
timelink.appendChild(document.createTextNode(date));
name.appendChild(document.createTextNode(user));
/* 要素の組み立て */
ul.appendChild(li);
}
/* 画面に反映 */
div.appendChild(ul);
}
var b2 =document.getElementById('twitter-search-b2');
b2.onclick=function(){
var script = document.createElement('script');
script.src = 'http://search.twitter.com/search.json'+
'?callback=TwitterCallback2&lang=ja&q=JavaScript';
document.body.appendChild(script);
}
ご覧の通り、
またパフォーマンスの点でも、
なお、
また、
IE6でmin-heightを使う方法とは、
li p.entry{
min-height:60px;
}
/*スターハック IE6(とIE7の互換モードなど)のみに適用*/
* html li p.entry{
height:60px;
}
なお、
まとめ
今回はDOM操作の実例に触れてみましたが、
次回はJavaScriptから操作するCSSを中心に取り上げる予定です。