Javascript & jQuery 超基礎入門

Transcript

1. JAVASCRIPT & JQUERY 超基礎入門 張家鈞 南台科技大學2012暑期推廣教育課程 1
2. 偉大的網頁設計師航道 • CSS • PHP • MySQL • HTML • javascript (jQuery) 2
3. JAVASCRIPT在哪裡？ 3
4. JAVASCRIPT在哪裡？ 4
6. 比大小 6
7. 變數宣告 <script> var num = 1; alert('test'); </script> 7
8. DEBUG <script> var num = 1; alert(test); </script> 8
9. 變數宣告 <script> var num = 1; alert( num ); </script> 9
10. 判斷是非:IF <script> var num = 1; if( num == 1 ) { alert('對'); } </script> 10
11. 判斷是非:IF+ELSE IF <script> var num = 1; if( num == 1 ) { alert('對'); } else if( num == 2) { alert('對一半'); } else { alert('錯'); } </script> 11
12. 整理一下 比大小需要的判斷 <script> var num = 3; if( num > 3 ) { alert('對'); } else { alert('錯'); } </script> 12
13. 給使用者輸入 <script> var num = 3; if( num > 3 ) { alert('對'); } else { alert('錯'); } </script> <input type="button" value="大" /> <input type="button" value="小" /> 13
14. 問題: 應該是要 按下去[大][小]按鈕 才跳出判斷結果 14
15. 加入函式:FUNCTION <script> function guess() { var num = 3; if( num > 3 ) { alert('對'); } else { alert('錯'); } } </script> <input type="button" value="大" /> <input type="button" value="小" /> 15
16. 按鈕事件 <script> function guess( ) { var num = 3; if( num > 3 ) { alert('對'); } else { alert('錯'); } } </script> 16 <input type="button" value="大" onclick="guess()" /> <input type="button" value="小" onclick="guess()" />
17. 按鈕事件-傳入變數 <script> function guess( btn ) { var num = 3; if( num > 3 ) { alert('對'); } else { alert('錯'); } } </script> 17 <input type="button" value="大" onclick="guess('big')" /> <input type="button" value="小" onclick="guess('small')" />
18. 判斷輸入的是大是小? <script> 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('對'); } } </script> 18 <input type="button" value="大" onclick="guess('big')" /> <input type="button" value="小" onclick="guess('small')" />
19. 似乎…答案很容易被猜中 var num = 3; 是固定的 → 使用亂數(隨機) 就可以模擬擲骰子的過程 19
20. 加入亂數函式 <script> 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('對'); } } </script> 20 <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 ); }
21. 加入亂數函式 <script> 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('對'); } } </script> 21 <input type="button" value="大" onclick="guess('big')" /> <input type="button" value="小" onclick="guess('small')" />
22. 取得1~6之間的亂數 <script> 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('對'); } } </script> 22 <input type="button" value="大" onclick="guess('big')" /> <input type="button" value="小" onclick="guess('small')" />
23. 猜數字第一版完成 但仍有一些問題: • 答案每次都不一樣，應該要固定才公平 • 要讓使用者看到骰子的答案 23
24. 答案每次都不一樣， 應該要固定才公平:全域變數 <script> 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('對'); } } </script> 24 <input type="button" value="大" onclick="guess('big')" /> <input type="button" value="小" onclick="guess('small')" />
25. 要讓使用者看到骰子的答案 <script> 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('對'); } }</script> 25 <input type="button" value="大" onclick="guess('big')" /> <input type="button" value="小" onclick="guess('small')" />
26. 把答案寫在網頁上? javascript可以做到， 但是非常麻煩 這時候我們需要 jQuery 26
27. 下載JQUERY http://jquery.com/ 下載PRODUCTION 版本到網頁目錄 27
28. 設定JQUERY <script src="jquery.min.js"></script> <script> 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('對'); } }</script> 28 <input type="button" value="大" onclick="guess('big')" /> <input type="button" value="小" onclick="guess('small')" />
29. 用DIV畫一下答案區 <script src="jquery.min.js"></script> <script> 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('對'); } }</script> 29 <div id="result"> 骰子結果 </div> <input type="button" value="大" onclick="guess('big')" /> <input type="button" value="小" onclick="guess('small')" />
30. 將答案寫入 骰子結果 <script src="jquery.min.js"></script> <script> 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')" />
31. 除掉討人厭的ALERT() <script src="jquery.min.js"></script> <script> 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('對'); } }</script> 31 <div id="result"> 骰子結果 </div> <input type="button" value="大" onclick="guess('big')" /> <input type="button" value="小" onclick="guess('small')" />
32. 除掉討人厭的ALERT() <script src="jquery.min.js"></script> <script> 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('對'); } }</script> 32 <div id="result"> 骰子結果 </div> <input type="button" value="大" onclick="guess('big')" /> <input type="button" value="小" onclick="guess('small')" />
33. 來點動畫 <script src="jquery.min.js"></script> <script> 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')" />
34. 加入::[再一次]的按鈕 <script src="jquery.min.js"></script> <script> 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('對'); } }</script> 34 <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()" />
35. 隱藏答案，重設答案RESET() <script src="jquery.min.js"></script> <script> 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()" />
36. 把討人厭的ALERT都換掉 <script src="jquery.min.js"></script> <script> 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()" />
37. 記錄一下玩的次數 <script src="jquery.min.js"></script> <script> 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="" />
38. JQUERY UI:美化按鈕 http://jqueryui.com 選擇Stable版本下載 38
39. 值得一翻的範例檔案 39
40. 美化按鈕 <script src="jquery.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.22.custom.min.js"></script> <link type="text/css" href="css/smoothness/jquery-ui-1.8.22.custom.css" rel="stylesheet" /> <script> 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="" />
41. JQUERY PLUGIN jQuery BlockUI Plugin (v2) http://www.malsup.com/jquery/block/ DataTables http://datatables.net/ 41
42. 網頁結構：DOM 42 http://www.cainiao8.com/web/html_dom/html_dom _01_jiegou.html
43. 其他屬性參考/參考資料 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