こんにちは,
JavaScriptとエスケープ
まず,
さて,
その具体的な方法の1つがJSONです。最近では多くの言語がJSONをネイティブにサポートしていますし,
ただし,
scriptの閉じタグ
<script>
var data = {"a":1,"b":[1,2,3],"c":{"d":"XXX</script><script>"}};
</script>
この場合は当然HTMLとしてのエスケープも必要で,
scriptの閉じタグのエスケープ
<script>
var data = {"a":1,"b":[1,2,3],"c":{"d":"XXX</script><script>"}};
</script>
この場合は/の前にバックスラッシュを入れることで閉じタグとして解釈されることを回避できますが,
なお,
HTMLの出力方法
さて,
DOMのメソッドによる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);
}
この方法は,
しかし,