以下為讀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
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
全站熱搜
留言列表