關於Javascript 考題

2011年9月28日星期三

關於Javascript 考題

1. 解釋jsonp 為何?

ANS : 什麼是JSONP：JSONP(JSON with Padding)是一個非官方的協議，它允許在服務器端集成Script tags 返回至客戶端，通過javascript callback的形式實現[跨網域訪問]（這僅僅是JSONP簡單的實現形式）。由於 JSON 只是一種含有簡單括號結構的純文本，因此許多通道都可以交換 JSON 消息。因為同源策略的限制(上述提到的安全性問題)，我們不能在與外部服務器進行通信的時候使用 XMLHttpRequest。而JSONP是一種可以繞過同源策略的方法，即通過使用 JSON 與 <script> 標記相結合的方法，從服務端直接返回可執行的JavaScript函數調用或者 JavaScript對象。

-----------------------------------------------------------------------------------------------
2. 請解釋下列程式第02~14 , 18, 22 作用為何？


 var request = false;
try {
    request = new XMLHttpRequest();
 } catch (trymicrosoft) {
     try {
      request = new ActiveXObject("Msxml2.XMLHTTP");
     } catch (othermicrosoft) {
          try {
            request = new ActiveXObject("Microsoft.XMLHTTP");
          } catch (failed) {
            request = false;
         }  
     }
 }
var phone = document.getElementById("phone").value;
var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone);
request.open("GET", url, true);
request.onreadystatechange = updatePage;
request.send(null);

function updatePage() { 
    if (request.readyState == 4) {
        if (request.status == 200) {
          var response = request.responseText.split("|");
          document.getElementById("order").value = response[0];
         document.getElementById("address").innerHTML =
           response[1].replace(/\n/g, "");
       } else
         alert("status is " + request.status);
    }
 }

ANS : 02~14 依據不同的瀏覽器，取得 XMLHttpRequest 物件. 18 設定非同步傳輸完成函式後觸發function updatePage. 22 request.readyState=4 代表伺服器已經完成該請求.

-----------------------------------------------------------------------------------------------

3. 請寫出下列 javascript 執行結果?


 function foo(){
        foo.abc = function(){alert('def')}
        this.abc = function(){alert('xyz')}
        abc = function(){alert('@@@@@')};
        var abc = function(){alert('$$$$$$')}
}
    foo.prototype.abc = function(){alert('456');}
    foo.abc = function(){alert('123');}
    var f = new foo();
    f.abc();
    foo.abc();
    abc();

ANS :
alert ('xyz');
alert ('def');

-----------------------------------------------------------------------------------------------

4. 請完成下列程式.
程式動作: 當滑鼠點擊[按鈕2]時, 將div1的背景顏色置換成#ff0000,並且將div 顯示出來.


HTML Code :   
    <div id="div1" style="background-color:#ffffff;display:none;" >Hello world !</div>
    <input type="button" id="bt1" value="按鈕1" /> 
    <input type="button" id="bt2" value="按鈕2" /> 
    <input type="button" id="bt3" value="按鈕3" />  
Javascript Code:
   <script> 
   $(function(){
       $('input').live('click',function(e){        
              ***請完成這部份程式***              
       });
   });
   </script>

ANS :


 var $this = $(e.target); 
        if ($this.is('#bt2')) {
            $('#div1').css('background','#ff0000').show();
        }

-----------------------------------------------------------------------------------------------

5. 請用jquery寫法寫出讓第1,3,5 的checkbox狀態改變成 checked 的code.


HTML Code : 
<input type="checkbox" name="chk[]" value="1">
<input type="checkbox" name="chk[]" value="2">
<input type="checkbox" name="chk[]" value="3">
<input type="checkbox" name="chk[]" value="4">
<input type="checkbox" name="chk[]" value="5">
Javascript Code:
   <script> 
   $(function(){
       ***請完成這部份程式***       
   });
   </script>

ANS :


   $('input:eq(0),input:eq(2),input:eq(4)').attr('checked',true);

沒有留言:

張貼留言

PHP 程式學習筆記本

2011年9月28日星期三