開発環境
- OS X Mavericks - Apple(OS)
- Emacs (CUI)、BBEdit - Bare Bones Software, Inc. (GUI) (Text Editor)
- Safari、Firefox + Firebug (Webプラウザ、プラグイン)
- JavaScript (プログラミング言語)
- jQuery (JavaScript Library)
Head First JavaScript ―頭とからだで覚えるJavaScriptの基本( Michael Morrison (著), 豊福 剛 (翻訳)、オライリージャパン)の12章(ダイナミックなデータ)、エクササイズ(p.585)、自分で考えてみよう(p.587)を解いてみる。
その他参考書籍
エクササイズ(p.585)、自分で考えてみよう(p.587)
URLエンコード形式
"releaseDate=01/13/1989&title=Gleaming the Cube&director=Greame Clifford"
コード(BBEdit)
ajax.js
var Blog = function (date, body, image) {
this.date = date ? new Date(date) : new Date();
this.body = body || 'Nothing going on today';
this.image = image;
},
AjaxRequest = function () {
this.request = null;
if (window.XMLHttpRequest) {
try {
this.request = new XMLHttpRequest();
} catch (e) {
this.request = null;
}
} else if (window.ActiveXObject) {
try {
this.request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
this.request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
this.request = null;
}
}
}
},
getText = function (elem) {
var text = '',
i,
max,
child,
value,
nodes;
if (elem) {
if (elem.childNodes) {
for (i = 0, max = elem.childNodes.length; i < max; i += 1) {
child = elem.childNodes[i];
value = child.nodeValue;
if (value) {
text += value;
} else {
nodes = child.childNodes;
if (nodes) {
value = nodes[0].nodeValue;
if (value) {
text += value;
}
}
}
}
}
}
return text;
},
div = document.getElementById('d0'),
entry_n = document.getElementById('entry_n'),
add_entry = document.getElementById('add_entry'),
contents = [],
ajax_req,
url = 'http://mkamimura.com/kamimura_blog/javascript/' +
'head_first_javascript/blog.xml',
handler = function () {
var xml_data,
blog,
title,
author,
entries,
entry,
i,
max;
if (ajax_req.getReadyState() === 4 && ajax_req.getStatus() === 200) {
xml_data = ajax_req.getResponseXML();
blog = xml_data.getElementsByTagName('blog')[0];
title = blog.getElementsByTagName('title')[0];
Blog.title = getText(title);
author = blog.getElementsByTagName('author')[0];
entries = blog.getElementsByTagName('entry');
Blog.prototype.signature = getText(author);
for (i = 0, max = entries.length; i < max; i += 1) {
entry = entries[i];
contents.push(new Blog(
getText(entry.getElementsByTagName('date')[0]),
getText(entry.getElementsByTagName('body')[0]),
getText(entry.getElementsByTagName('image')[0])));
}
Blog.showBlog(5);
document.getElementById('search_blog').disabled = false;
document.getElementById('show_blog').disabled = false;
document.getElementById('show_all_blog').disabled = false;
document.getElementById('view_random').disabled = false;
}
},
loadBlog = function () {
contents = [];
div.innerHTML = '読み込み中 <progress />'
ajax_req.send('GET', url, handler)
},
addBlogEntry = function () {
var url = 'http://mkamimura.com/kamimura_blog/javascript/' +
'head_first_javascript/addblogentry.php';
add_entry.disabled = true;
div.innerHTML = '<progress>追加中...</progress>';
ajax_req.send('POST', url, handleRequest,
'application/x-www-form-urlencoded; charset=UTF-8',
'date=' + document.getElementById('entry_date').value +
'&body=' + document.getElementById('entry_body').value +
'&image=' + document.getElementById('entry_image').value);
},
handleRequest = function () {
if (ajax_req.getReadyState() === 4 && ajax_req.getStatus() === 200) {
add_entry.disabled = false;
div.innerHTML = '';
alert('新しいエントリが追加されました!');
contents = [];
loadBlog();
}
},
showBlog = function () {
Blog.showBlog(parseInt(entry_n.value, 10));
};
Date.prototype.shortFormat = function () {
return (this.getMonth() + 1) + '/' + this.getDate() + '/' +
this.getFullYear();
};
Blog.blogSorter = function (entry1, entry2) {
return entry2.date - entry1.date;
};
Blog.showBlog = function (n) {
var blog_html = '<h3>' + Blog.title + '</h3>',
i,
highlight = true;
contents.sort(Blog.blogSorter);
if (!n) {
n = contents.length;
}
for (i = 0; i < n; i += 1) {
blog_html += contents[i].toHTML(highlight);
highlight = ! highlight;
};
div.innerHTML = blog_html;
};
Blog.showSignature = function () {
return 'This blog created by ' + Blog.prototype.signature;
};
Blog.searchBlog = function () {
var text = document.getElementById('search_text').value,
i,
max,
entry,
result;
for (i = 0, max = contents.length; i < max; i += 1) {
entry = contents[i];
if (entry.containText(text)) {
result = entry.toHTML(true);
break;
}
}
if (i === max) {
result = '検索テキストを含むエントリは見つかりませんでした';
}
div.innerHTML = result;
};
Blog.randomBlog = function () {
var entry = contents[Math.floor(Math.random() * contents.length)];
div.innerHTML = entry.toHTML(true);
};
Blog.prototype.toHTML = function (highlight) {
var blog_html = highlight ? '<div style="background-color: #EEEEEE;">' :
'<div>';
blog_html += '<strong>' + this.date.shortFormat() + '</strong><br />';
if (this.image) {
blog_html += '<table><tr><td><img src="' + this.image + '" /></td>' +
'<td style="vertical-align:top">' + this.body + '</td></tr>' +
'</table>';
} else {
blog_html += this.body + '<br />';
}
blog_html += '<em>' + Blog.showSignature() + '</em></div><br />';
return blog_html;
};
Blog.prototype.containText = function (text) {
return this.body.toLowerCase().indexOf(text.toLowerCase()) !== -1;
};
AjaxRequest.prototype.send = function (type, url, handler, post_data_type,
post_data) {
if(this.request !== null) {
this.request.abort();
url += "?dummy=" + new Date().getTime();
try {
this.request.onreadystatechange = handler;
this.request.open(type, url, true);
if (type.toLowerCase() === 'get') {
this.request.send(null);
} else {
this.request.setRequestHeader('Content-Type',post_data_type);
this.request.send(post_data);
}
} catch (e) {
div.innerHTML = 'サーバとの通信でAjaxエラー\n' + '詳細: ' + e;
}
}
};
AjaxRequest.prototype.getReadyState = function () {
return this.request.readyState;
};
AjaxRequest.prototype.getStatus = function () {
return this.request.status;
};
AjaxRequest.prototype.getResponseXML = function () {
return this.request.responseXML;
};
ajax_req = new AjaxRequest();
youcube.html
<button onclick="loadBlog()">読み込み開始</button> <button id="search_blog" disabled="disabled" onclick="Blog.searchBlog()" > ブログな内を検索 </button> <input type="text" id="search_text" name="search_text" value="" /> <div id="d0"> </div> <label>Date: <input type="text" id="entry_date" value="10/04/2000"/></label><br /> <label>Body: <input type="text" id="entry_body" value="私は本当に月末の..." /></label><br /> <label>Image: <input type="text" id="entry_image" value="" /></label><br /> <button id="add_entry" onclick="addBlogEntry()">新しいエントリを追加</button> <br /> <label>表示数: <input type="text" id="entry_n" value="5" size="2"></label> <button id="show_blog" disabled="disabled" onclick="showBlog()">エントリを表示</button> <button id="show_all_blog" disabled="disabled" onclick="Blog.showBlog()"> エントリをすべて表示</button> <button id="view_random" disabled="disabled" onclick="Blog.randomBlog()">エントリのランダム表示</button>
0 コメント:
コメントを投稿