Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

JAVASCRIPT在哪裡? 3

Slide 4

Slide 4 text

JAVASCRIPT在哪裡? 4

Slide 5

Slide 5 text

5

Slide 6

Slide 6 text

比大小 6

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

判斷輸入的是大是小? 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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

加入亂數函式 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 ); }

Slide 21

Slide 21 text

加入亂數函式 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

Slide 22

Slide 22 text

取得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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

答案每次都不一樣, 應該要固定才公平:全域變數 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

Slide 25

Slide 25 text

要讓使用者看到骰子的答案 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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

設定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

Slide 29

Slide 29 text

用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
骰子結果

Slide 30

Slide 30 text

將答案寫入 骰子結果 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')" />

Slide 31

Slide 31 text

除掉討人厭的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
骰子結果

Slide 32

Slide 32 text

除掉討人厭的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
骰子結果

Slide 33

Slide 33 text

來點動畫 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')" />

Slide 34

Slide 34 text

加入::[再一次]的按鈕 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
骰子結果

Slide 35

Slide 35 text

隱藏答案,重設答案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()" />

Slide 36

Slide 36 text

把討人厭的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()" />

Slide 37

Slide 37 text

記錄一下玩的次數 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="" />

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

值得一翻的範例檔案 39

Slide 40

Slide 40 text

美化按鈕 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="" />

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

其他屬性參考/參考資料 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