以下為讀AJAX 網頁程式設計--Google成功背後的技術一書的筆記
prototype.js原有物件的擴充
●Array物件
新增加的函式
clear():清除陣列中所有元素。
first():回傳陣列中第一個元素。
last():回傳陣列中最後一個元素。
compact():回傳一個新的陣列，這這個新的陣列中，所有為null或未定義的物件都不包含在內。
flatten():回傳一個新的陣列，如果原本的陣列為多維陣列，將轉為一維。
without():回傳一個新的陣列，其中將不包含參數中所指定的元素。
indexOf():回傳object所在的索引值，若找不到，則回傳-1。
reverse():回傳一個新的陣列，其中的元素以相反順序排列。參數inline若為true時，陣列本身的排列也會跟著改變。
shift():回傳陣列中第一個元素，並將之從陣列中移除。
inspect():將陣列轉換成人類可以讀得懂的字串。
<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 isDigit (val) {
if (val.length > 1) { return false; }
var str = "1234567890";
if (str.indexOf (val)!=-1) {return true;}
return false;
}
function isNum(val) {
for (var i = 0; i < val.length; i++) {
if (!isDigit(val.charAt(i))) {
return false;
}
}
return true;
}
function isOperator(val) {
var str = "()*/+-";
if (str.indexOf (val) != -1) { return true;}
return false;
}
function caculate() {
var elements = document.getElementById ('formula').value.split(' ');
if (elements.length == 0) {
alert ('請輸入算式');
return false;
}
var postfix = new Array();
var tmp_stack = new Array();
var i;
// 轉為 Postfix
for (i = 0; i < elements.length; i++) {
if (isNum(elements[i])) {
postfix.push (parseInt (elements[i]));
} else if (isOperator(elements[i])) {
if (elements[i] == '(') {
tmp_stack.push(elements[i]);
} else if (elements[i] == ')') {
while (tmp_stack.length) {
var t = tmp_stack.pop();
if (t == '(')
break;
postfix.push (t);
}
} else if (elements[i] == '*' || elements[i] == '/') {
var t = tmp_stack.last();
while (tmp_stack.length && (t == '*' || t == '/')) {
postfix.push(tmp_stack.pop());
t = tmp_stack.last();
}
tmp_stack.push (elements[i]);
} else {
var t = tmp_stack.last();
while (tmp_stack.length &&
(t == '*' || t == '/' || t == '+' || t == '-')) {
postfix.push (tmp_stack.pop());
t = tmp_stack.last();
}
tmp_stack.push (elements[i]);
}
} else {
alert ('錯誤的運算元或運算子');
return false;
}
}
while (tmp_stack.length > 0) {
postfix.push (tmp_stack.pop());
}
Element.update('postfix', 'Postfix:' + postfix.inspect());
tmp_stack.clear();
// 開始運算
while (postfix.length) {
var t = postfix.shift();
if (typeof t == 'number') {
tmp_stack.push (t);
} else {
var n1 = tmp_stack.pop();
var n2 = tmp_stack.pop();
tmp_stack.push (eval (n2 + t + n1));
}
}
Element.update('answer', '' + tmp_stack.last());
}
</script>
</head>
<body>
<table width="50%" border="0">
<tr>
<td width=60%>
<input type="text" id="formula" size=30>=
</td>
<td>
<b><div id="answer"></div></b>
</td>
</tr>
<tr><td><div id="postfix"></div></td></tr>
</table>
<input type="button" value="Go" onClick="caculate()">
</body>
</html>
●Number物件
toColorPart():
succ():
times():
●String物件
stripTags():
stripScripts():
escapeHTML():
unescapeHTML():
extractScripts():
evalScripts():
toQueryParams():
parseQuery():
toArray():
<html>
<head>
<meta http-equiv="Content-Type=text/html; charset=BIG5"/>
<script type="text/javascript" src="script/prototype.js"></script>
<script type="text/javascript">
function process() {
var content = document.getElementById('content').value;
alert ('去除所有 HTML 標籤：' + content.stripTags());
alert ('去除所有 Script 區塊：' + content.stripScripts());
alert ('轉換保留的關鍵字：' + content.escapeHTML());
}
</script>
</head>
<body>
<textarea id="content" rows=20 cols=40></textarea><br>
<input type="button" value="Go" onClick="process()">
</body>
</html>
●Event物件
新增屬性
KEY_BACKSPACE
KEY_TAB
KEY_RETURN
KEY_ESC
KEY_LEFT
KEY_UP
KEY_RIGHT
KEY_DOWN
KEY_DELETE
新增函式：
element():
observe():
stopObserving():
isLeftClick():
pointerX():
pointerY():
<html>
<head>
<script type="text/javascript" src="script/prototype.js"></script>
<script type="text/javascript" language="JavaScript">
function mouseTracing(e) {
var coorDis = document.getElementById('coordinate');
coorDis.innerHTML = 'X:' + Event.pointerX(e) + ',Y:' + Event.pointerY(e);
}
function stopTracing(e) {
var obj = Event.element(e);
if (Event.isLeftClick(e) ) {
Event.stopObserving(window.document, 'mousemove', mouseTracing, false);
}
}
// 註冊 mousemove 和 mousedown 事件處理函式
Event.observe(window.document, 'mousemove', mouseTracing, false);
Event.observe(window.document, 'mousedown', stopTracing, false);
</script>
</head>
<body>
<div id="coordinate"></div>
</body>
</html>
參考資料：AJAX 網頁程式設計--Google成功背後的技術
prototype.js原有物件的擴充
●Array物件
新增加的函式
clear():清除陣列中所有元素。
first():回傳陣列中第一個元素。
last():回傳陣列中最後一個元素。
compact():回傳一個新的陣列，這這個新的陣列中，所有為null或未定義的物件都不包含在內。
flatten():回傳一個新的陣列，如果原本的陣列為多維陣列，將轉為一維。
without():回傳一個新的陣列，其中將不包含參數中所指定的元素。
indexOf():回傳object所在的索引值，若找不到，則回傳-1。
reverse():回傳一個新的陣列，其中的元素以相反順序排列。參數inline若為true時，陣列本身的排列也會跟著改變。
shift():回傳陣列中第一個元素，並將之從陣列中移除。
inspect():將陣列轉換成人類可以讀得懂的字串。
<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 isDigit (val) {
if (val.length > 1) { return false; }
var str = "1234567890";
if (str.indexOf (val)!=-1) {return true;}
return false;
}
function isNum(val) {
for (var i = 0; i < val.length; i++) {
if (!isDigit(val.charAt(i))) {
return false;
}
}
return true;
}
function isOperator(val) {
var str = "()*/+-";
if (str.indexOf (val) != -1) { return true;}
return false;
}
function caculate() {
var elements = document.getElementById ('formula').value.split(' ');
if (elements.length == 0) {
alert ('請輸入算式');
return false;
}
var postfix = new Array();
var tmp_stack = new Array();
var i;
// 轉為 Postfix
for (i = 0; i < elements.length; i++) {
if (isNum(elements[i])) {
postfix.push (parseInt (elements[i]));
} else if (isOperator(elements[i])) {
if (elements[i] == '(') {
tmp_stack.push(elements[i]);
} else if (elements[i] == ')') {
while (tmp_stack.length) {
var t = tmp_stack.pop();
if (t == '(')
break;
postfix.push (t);
}
} else if (elements[i] == '*' || elements[i] == '/') {
var t = tmp_stack.last();
while (tmp_stack.length && (t == '*' || t == '/')) {
postfix.push(tmp_stack.pop());
t = tmp_stack.last();
}
tmp_stack.push (elements[i]);
} else {
var t = tmp_stack.last();
while (tmp_stack.length &&
(t == '*' || t == '/' || t == '+' || t == '-')) {
postfix.push (tmp_stack.pop());
t = tmp_stack.last();
}
tmp_stack.push (elements[i]);
}
} else {
alert ('錯誤的運算元或運算子');
return false;
}
}
while (tmp_stack.length > 0) {
postfix.push (tmp_stack.pop());
}
Element.update('postfix', 'Postfix:' + postfix.inspect());
tmp_stack.clear();
// 開始運算
while (postfix.length) {
var t = postfix.shift();
if (typeof t == 'number') {
tmp_stack.push (t);
} else {
var n1 = tmp_stack.pop();
var n2 = tmp_stack.pop();
tmp_stack.push (eval (n2 + t + n1));
}
}
Element.update('answer', '' + tmp_stack.last());
}
</script>
</head>
<body>
<table width="50%" border="0">
<tr>
<td width=60%>
<input type="text" id="formula" size=30>=
</td>
<td>
<b><div id="answer"></div></b>
</td>
</tr>
<tr><td><div id="postfix"></div></td></tr>
</table>
<input type="button" value="Go" onClick="caculate()">
</body>
</html>
●Number物件
toColorPart():
succ():
times():
●String物件
stripTags():
stripScripts():
escapeHTML():
unescapeHTML():
extractScripts():
evalScripts():
toQueryParams():
parseQuery():
toArray():
<html>
<head>
<meta http-equiv="Content-Type=text/html; charset=BIG5"/>
<script type="text/javascript" src="script/prototype.js"></script>
<script type="text/javascript">
function process() {
var content = document.getElementById('content').value;
alert ('去除所有 HTML 標籤：' + content.stripTags());
alert ('去除所有 Script 區塊：' + content.stripScripts());
alert ('轉換保留的關鍵字：' + content.escapeHTML());
}
</script>
</head>
<body>
<textarea id="content" rows=20 cols=40></textarea><br>
<input type="button" value="Go" onClick="process()">
</body>
</html>
●Event物件
新增屬性
KEY_BACKSPACE
KEY_TAB
KEY_RETURN
KEY_ESC
KEY_LEFT
KEY_UP
KEY_RIGHT
KEY_DOWN
KEY_DELETE
新增函式：
element():
observe():
stopObserving():
isLeftClick():
pointerX():
pointerY():
<html>
<head>
<script type="text/javascript" src="script/prototype.js"></script>
<script type="text/javascript" language="JavaScript">
function mouseTracing(e) {
var coorDis = document.getElementById('coordinate');
coorDis.innerHTML = 'X:' + Event.pointerX(e) + ',Y:' + Event.pointerY(e);
}
function stopTracing(e) {
var obj = Event.element(e);
if (Event.isLeftClick(e) ) {
Event.stopObserving(window.document, 'mousemove', mouseTracing, false);
}
}
// 註冊 mousemove 和 mousedown 事件處理函式
Event.observe(window.document, 'mousemove', mouseTracing, false);
Event.observe(window.document, 'mousedown', stopTracing, false);
</script>
</head>
<body>
<div id="coordinate"></div>
</body>
</html>
參考資料：AJAX 網頁程式設計--Google成功背後的技術
全站熱搜
留言列表
