JAVASCRIPT & JQUERY 超基礎入門 張家鈞

南台科技大學2012暑期推廣教育課程

1

偉大的網頁設計師航道 • CSS

• PHP

• MySQL

• HTML

• javascript

(jQuery)

2

JAVASCRIPT在哪裡？

3

JAVASCRIPT在哪裡？

4

5

比大小

6

變數宣告 <script>

var num = 1;

alert('test');

</script>

7

DEBUG <script>

var num = 1;

alert(test);

</script>

8

變數宣告 <script>

var num = 1;

alert( num );

</script>

9

判斷是非:IF <script>

var num = 1;

if( num == 1 )

{

alert('對');

}

</script> 10

判斷是非:IF+ELSE IF <script>

var num = 1;

if( num == 1 )

{

alert('對');

}

else if( num == 2)

{

alert('對一半');

}

else

{

alert('錯');

}

</script> 11

整理一下 比大小需要的判斷

<script>

var num = 3;

if( num > 3 )

{

alert('對');

}

else

{

alert('錯');

}

</script>

12

給使用者輸入 <script>

var num = 3;

if( num > 3 )

{

alert('對');

}

else

{

alert('錯');

}

</script>

<input type="button" value="大" />

<input type="button" value="小" /> 13

問題:

應該是要

按下去[大][小]按鈕

才跳出判斷結果

14

加入函式:FUNCTION <script>

function guess()

{

var num = 3;

if( num > 3 )

{

alert('對');

}

else

{

alert('錯');

}

}

</script>

<input type="button" value="大" />

<input type="button" value="小" /> 15

按鈕事件 <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()" />

按鈕事件-傳入變數 <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')" />

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

似乎…答案很容易被猜中

var num = 3; 是固定的

→ 使用亂數(隨機)

就可以模擬擲骰子的過程

19

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

}

加入亂數函式 <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')" />

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

答案每次都不一樣， 應該要固定才公平:全域變數

<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')" />

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

把答案寫在網頁上?

javascript可以做到，

但是非常麻煩

這時候我們需要 jQuery

26

下載JQUERY http://jquery.com/

下載PRODUCTION 版本到網頁目錄

27

設定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')" />

用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')" />

將答案寫入 骰子結果 <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('對');

}

}</script>

30

<div id="result"> 骰子結果 </div>

<input type="button" value="大" onclick="guess('big')" />

<input type="button" value="小" onclick="guess('small')" />

除掉討人厭的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')" />

除掉討人厭的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')" />

來點動畫 <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>

33

<div id="result" style="display:none"> 骰子結果 </div>

<input type="button" value="大" onclick="guess('big')" />

<input type="button" value="小" onclick="guess('small')" />

加入::[再一次]的按鈕 <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()" />

隱藏答案，重設答案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('錯');

}

else

{

if( btn == 'big' ) alert('錯');

if( btn == 'small' ) alert('對');

}

}</script>

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都換掉 <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 + ' : 對');

}

}</script>

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()" />

記錄一下玩的次數 <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 + ' : 錯');

}

else

{

if( btn == „big‟ ) $("#result").html( num + ' : 錯');

if( btn == „small‟ ) $("#result").html( num + ' : 對');

}

}</script>

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

美化按鈕 <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);

times++;

$("#timebox").attr("value",'第'+times+'次');

}

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 + ' : 對');

}

}

</script>

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