以下為讀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成功背後的技術

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