以下為讀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

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


留言列表 (1)

發表留言
  • remi888
  • 你一連寫了這麼多篇,我都看沒有耶..怎麼辦阿?