以下為讀AJAX 網頁程式設計--Google成功背後的技術一書的筆記

prototype.js新增加的物件

●雜湊(Hash)物件
keys():
values():
merge():
toQueryString():
inspect():
雜湊(Hash)物件本身並無建構式，它必須透過$H()函式來建立。

prototype_hash.html
<html>
<head>
<script type="text/javascript" src="script/prototype.js"></script>
<script type="text/javascript" language="JavaScript">
function show() {
　var hash = $H();
　hash['Name'] = 'syshen';
　hash['Age'] = 28;
　alert(hash.toQueryString());
}
</script>
</head>
<body>
<input type="button" onClick="show()" value="Go">
</body>
</html>

●$()
這函式相當於document.getElementById()的替代函式，但可傳遞多個ID給$()函式，它會傳回一個相對於各ID的物件陣列。

prototype_func.html
<html>
<head>
<script type="text/javascript" src="script/prototype.js"></script>
<script type="text/javascript">
function go() {
　var qstr = '';
　var params = $('paramA', 'paramB', 'paramC', 'paramD');
　for (var p = 0; p < params.length; p++) {
　　if (qstr != '')
　　　qstr += '&';
　　qstr += params[p].name + '=' + params[p].value;
　}
　$('paramStr').value = qstr;
　alert(qstr);
}
</script>
</head>
<body>
　<form>
　　值1 :<input type="text" name="paramA" id="paramA"><br>
　　值2 :<input type="text" name="paramB" id="paramB"><br>
　　值3 :<input type="text" name="paramC" id="paramC"><br>
　　值4 :<input type="text" name="paramD" id="paramD"><br><br>
　　結果:<input type="text" name="paramStr" id="paramStr" size="30">
　　<input type="button" onClick="go()" value="Go">
　</form>
</body>
</html>

●$F()
相當於document.getElementById('ID').value，ID所代表的物件需有value屬性。
如$F('paramStr')=qstr;

●PeriodicalExecuter物件
這物件被賦予一個任務，持續地執行所指定的函式。可用來簡化SetTimeout()函式。
<script>
var timer=10000;
function periodicalCallback(){
　alert('test');
　setTimeout(periodicalCallback, timer);
}
setTimeout(periodicalCallback, timer);
</script>
簡化成
<script>
function periodicalCallback(){
　alert('test');
}
var task=new PeriodicalExecuter(periodicalCallback, 10);
</script>

clock.html
<html>
<head>
<script type="text/javascript" src="script/prototype.js"></script>
<script type="text/javascript">
function displayTime() {
　var now = new Date();
　var h = now.getHours();
　var m = now.getMinutes();
　var s = now.getSeconds();
　$('TIME_DISPLAY').innerHTML = h + ':' + m + ':' + s;
}
function startTime() {
　displayTime();
　var task = new PeriodicalExecuter(displayTime, 1);
}
</script>
</head>
<body onload="startTime()">
<h2>現在時間：</h2><div id="TIME_DISPLAY"></div>
</body>
</html>

●Element物件
比較抽象的物件，可透過這個物件簡化DHTML的實做，改變文件中DIV或SPAN的屬性。
hide():
show():
visible():
update():
getStyle():
setStyle():

prototype_element.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=big5"/>
<script type="text/javascript" src="script/prototype.js"></script>
<script type="text/javascript">
function bigger() {
　Element.setStyle('textsize', {'font-size':'40px'});
}
function smaller() {
　Element.setStyle('textsize', {'font-size':'20px'});
}
function disappear() {
　Element.hide('textshow');
　setTimeout("Element.show('textshow')", 3000);
}
</script>
</head>
<body>
<div id="textsize" style="font-size: 20px" 
　　onmouseover="bigger()" 
　　onmouseout="smaller()">改變字形大小</div>
<br>
<div id="textshow" onclick="disappear()">消失..</div>
</body>
</html>

參考資料：
AJAX 網頁程式設計--Google成功背後的技術
http://www.prototypejs.org/api/hash
http://www.prototypejs.org/api/utility
http://www.prototypejs.org/api/periodicalExecuter
http://www.prototypejs.org/api/element
arrow
arrow
    全站熱搜

    jck11 發表在 痞客邦 留言(1) 人氣()

    E-mail轉寄