JAVASCRIPT & JQUERY 超基礎入門 張家鈞 南台科技大學2012暑期推廣教育課程 1 

偉大的網頁設計師航道 • CSS • PHP • MySQL • HTML • javascript (jQuery) 2 

JAVASCRIPT在哪裡？ 3 

JAVASCRIPT在哪裡？ 4 

5 

比大小 6 

變數宣告 var num = 1; alert('test'); 7 

DEBUG var num = 1; alert(test); 8 

變數宣告 var num = 1; alert( num ); 9 

判斷是非:IF var num = 1; if( num == 1 ) { alert('對'); } 10 

判斷是非:IF+ELSE IF var num = 1; if( num == 1 ) { alert('對'); } else if( num == 2) { alert('對一半'); } else { alert('錯'); } 11 

整理一下 比大小需要的判斷 var num = 3; if( num > 3 ) { alert('對'); } else { alert('錯'); } 12 

給使用者輸入 var num = 3; if( num > 3 ) { alert('對'); } else { alert('錯'); } 13 

問題: 應該是要 按下去[大][小]按鈕 才跳出判斷結果 14 

加入函式:FUNCTION function guess() { var num = 3; if( num > 3 ) { alert('對'); } else { alert('錯'); } } 15 

按鈕事件 function guess( ) { var num = 3; if( num > 3 ) { alert('對'); } else { alert('錯'); } } 16 

按鈕事件-傳入變數 function guess( btn ) { var num = 3; if( num > 3 ) { alert('對'); } else { alert('錯'); } } 17 

判斷輸入的是大是小? function guess( btn ) { var num = 3; if( num > 3 ) { if( btn == ‘big’ ) alert('對'); if( btn == ‘small’ ) alert('錯'); } else { if( btn == ‘big’ ) alert('錯'); if( btn == ‘small’ ) alert('對'); } } 18 

似乎…答案很容易被猜中 var num = 3; 是固定的 → 使用亂數(隨機) 就可以模擬擲骰子的過程 19 

加入亂數函式 function guess( btn ) { var num = 3; if( num > 3 ) { if( btn == „big‟ ) alert('對'); if( btn == „small‟ ) alert('錯'); } else { if( btn == „big‟ ) alert('錯'); if( btn == „small‟ ) alert('對'); } } 20 function getRandom ( min , max ) { return Math.floor( Math.random() * (max-min+1)+min ); } 

加入亂數函式 function getRandom ( min , max ) { return Math.floor( Math.random() * (max-min+1)+min ); } function guess( btn ) { var num = 3; if( num > 3 ) { if( btn == „big‟ ) alert('對'); if( btn == „small‟ ) alert('錯'); } else { if( btn == „big‟ ) alert('錯'); if( btn == „small‟ ) alert('對'); } } 21 

取得1~6之間的亂數 function getRandom ( min , max ) { return Math.floor( Math.random() * (max-min+1)+min ); } function guess( btn ) { var num = getRandom( 1 , 6 ); if( num > 3 ) { if( btn == „big‟ ) alert('對'); if( btn == „small‟ ) alert('錯'); } else { if( btn == „big‟ ) alert('錯'); if( btn == „small‟ ) alert('對'); } } 22 

猜數字第一版完成 但仍有一些問題: • 答案每次都不一樣，應該要固定才公平 • 要讓使用者看到骰子的答案 23 

答案每次都不一樣， 應該要固定才公平:全域變數 function getRandom ( min , max ) { return Math.floor( Math.random() * (max-min+1)+min ); } var num = getRandom( 1 , 6 ); function guess( btn ) { if( num > 3 ) { if( btn == „big‟ ) alert('對'); if( btn == „small‟ ) alert('錯'); } else { if( btn == „big‟ ) alert('錯'); if( btn == „small‟ ) alert('對'); } } 24 

要讓使用者看到骰子的答案 function getRandom ( min , max ) { return Math.floor( Math.random() * (max-min+1)+min ); } var num = getRandom( 1 , 6 ); function guess( btn ) { alert('答案是'+num); if( num > 3 ) { if( btn == „big‟ ) alert('對'); if( btn == „small‟ ) alert('錯'); } else { if( btn == „big‟ ) alert('錯'); if( btn == „small‟ ) alert('對'); } } 25 

把答案寫在網頁上? javascript可以做到， 但是非常麻煩 這時候我們需要 jQuery 26 

下載JQUERY http://jquery.com/ 下載PRODUCTION 版本到網頁目錄 27 

設定JQUERY function getRandom ( min , max ) { return Math.floor( Math.random() * (max-min+1)+min ); } var num = getRandom( 1 , 6 ); function guess( btn ) { alert('答案是'+num); if( num > 3 ) { if( btn == „big‟ ) alert('對'); if( btn == „small‟ ) alert('錯'); } else { if( btn == „big‟ ) alert('錯'); if( btn == „small‟ ) alert('對'); } } 28 

用DIV畫一下答案區 function getRandom ( min , max ) { return Math.floor( Math.random() * (max-min+1)+min ); } var num = getRandom( 1 , 6 ); function guess( btn ) { alert('答案是'+num); if( num > 3 ) { if( btn == „big‟ ) alert('對'); if( btn == „small‟ ) alert('錯'); } else { if( btn == „big‟ ) alert('錯'); if( btn == „small‟ ) alert('對'); } } 29 

將答案寫入 骰子結果 function getRandom ( min , max ) { return Math.floor( Math.random() * (max-min+1)+min ); } var num = getRandom( 1 , 6 ); function guess( btn ) { alert('答案是'+num); $("#result").html( num ); if( num > 3 ) { if( btn == „big‟ ) alert('對'); if( btn == „small‟ ) alert('錯'); } else { if( btn == „big‟ ) alert('錯'); if( btn == „small‟ ) alert('對'); } 30 <div id="result"> 骰子結果 </div> <input type="button" value="大" onclick="guess('big')" /> <input type="button" value="小" onclick="guess('small')" /> 

除掉討人厭的ALERT() function getRandom ( min , max ) { return Math.floor( Math.random() * (max-min+1)+min ); } var num = getRandom( 1 , 6 ); function guess( btn ) { $("#result").html( num ); if( num > 3 ) { if( btn == „big‟ ) alert('對'); if( btn == „small‟ ) alert('錯'); } else { if( btn == „big‟ ) alert('錯'); if( btn == „small‟ ) alert('對'); } } 31 

除掉討人厭的ALERT() function getRandom ( min , max ) { return Math.floor( Math.random() * (max-min+1)+min ); } var num = getRandom( 1 , 6 ); function guess( btn ) { $("#result").html( num ); if( num > 3 ) { if( btn == „big‟ ) alert('對'); if( btn == „small‟ ) alert('錯'); } else { if( btn == „big‟ ) alert('錯'); if( btn == „small‟ ) alert('對'); } } 32 

來點動畫 function getRandom ( min , max ) { return Math.floor( Math.random() * (max-min+1)+min ); } var num = getRandom( 1 , 6 ); function guess( btn ) { $("#result").html( num ); $("#result").show(3000); if( num > 3 ) { if( btn == 'big' ) alert('對'); if( btn == 'small' ) alert('錯'); } else { if( btn == 'big' ) alert('錯'); if( btn == 'small' ) alert('對'); } 33 <div id="result" style="display:none"> 骰子結果 </div> <input type="button" value="大" onclick="guess('big')" /> <input type="button" value="小" onclick="guess('small')" /> 

加入::[再一次]的按鈕 function getRandom ( min , max ) { return Math.floor( Math.random() * (max-min+1)+min ); } var num = getRandom( 1 , 6 ); function guess( btn ) { $("#result").html( num ); $("#result").show(3000); if( num > 3 ) { if( btn == 'big' ) alert('對'); if( btn == 'small' ) alert('錯'); } else { if( btn == 'big' ) alert('錯'); if( btn == 'small' ) alert('對'); } } 34 

隱藏答案，重設答案RESET() function getRandom ( min , max ) { return Math.floor( Math.random() * (max-min+1)+min ); } function reset() { num = getRandom( 1 , 6 ); $("#result").hide(1000); } var num = getRandom( 1 , 6 ); function guess( btn ) { $("#result").html( num ); $("#result").show(3000); if( num > 3 ) { if( btn == 'big' ) alert('對'); if( btn == 'small' ) alert('錯'); 35 <div id="result" style="display:none"> 骰子結果 </div> <input type="button" value="大" onclick="guess('big')" /> <input type="button" value="小" onclick="guess('small')" /> <input type=“button” value=“再一次" onclick="reset()" /> 

把討人厭的ALERT都換掉 function getRandom ( min , max ) { return Math.floor( Math.random() * (max- min+1)+min ); } function reset() { num = getRandom( 1 , 6 ); $(“#result”).hide(1000); } var num = getRandom( 1 , 6 ); function guess( btn ) { $("#result").html( num ); $("#result").show(3000); if( num > 3 ) { if( btn == „big‟ ) $("#result").html( num + ' : 對'); if( btn == „small‟ ) $("#result").html( num + ' : 錯'); } else { if( btn == „big‟ ) $("#result").html( num + ' : 錯'); if( btn == „small‟ ) $("#result").html( num + ' : 對'); } 36 <div id="result" style="display:none"> 骰子結果 </div> <input type="button" value="大" onclick="guess('big')" /> <input type="button" value="小" onclick="guess('small')" /> <input type=“button” value=“再一次" onclick="reset()" /> 

記錄一下玩的次數 function getRandom ( min , max ) { return Math.floor( Math.random() * (max-min+1)+min ); } function reset() { num = getRandom( 1 , 6 ); $(“#result”).hide(1000); times++; $("#timebox").attr("value",'第'+times+'次'); } var num = getRandom( 1 , 6 ); var times = 1; function guess( btn ) { $("#result").html( num ); $("#result").show(3000); if( num > 3 ) { if( btn == „big‟ ) $("#result").html( num + ' : 對'); if( btn == „small‟ ) $("#result").html( num + ' : 錯'); } 37 <div id="result" style="display:none"> 骰子結果 </div> <input type="button" value="大" onclick="guess('big')" /> <input type="button" value="小" onclick="guess('small')" /> <input type=“button” value=“再一次" onclick="reset()" /> <input id="timebox" type="textbox" size="3" value="第1次" onclick="" /> 

JQUERY UI:美化按鈕 http://jqueryui.com 選擇Stable版本下載 38 

值得一翻的範例檔案 39 

美化按鈕 function getRandom ( min , max ) { return Math.floor( Math.random() * (max-min+1)+min ); } var num = getRandom( 1 , 6 ); var times = 1; $(function(){ $("input").button(); }); function reset() { num = getRandom( 1 , 6 ); $("#result").hide(1000); 40 <div id="result" style="display:none"> 骰子結果 </div> <input type="button" value="大" onclick="guess('big')" /> <input type="button" value="小" onclick="guess('small')" /> <input type=“button” value=“再一次" onclick="reset()" /> <input id="timebox" type="textbox" size="3" value="第1次" onclick="" /> 

JQUERY PLUGIN jQuery BlockUI Plugin (v2) http://www.malsup.com/jquery/block/ DataTables http://datatables.net/ 41 

網頁結構：DOM 42 http://www.cainiao8.com/web/html_dom/html_dom _01_jiegou.html 

其他屬性參考/參考資料 jQuery 教學- jQuery Tutorial http://webdesign.kerthis.com/jquery/ jQuery: The Write Less, Do More, JavaScript Library http://jquery.com/ PTT::ajax http://www.ptt.cc/bbs/Ajax/index.html JSDC http://jsdc.tw/2012/ jQuery plugin 大集合 http://chen7768.blogspot.tw/2009/04/jquery-plugin.html 43