1.物件
在物件內"變數"被稱為property,而物件內的函式被稱為method
物件以property形式記住資料。
planeObject={
engines : "4",
type : "passenger",
propellor : "NO"
};
可以使用點號語法參照物件的任何內容特性。
ex.
palneObject.engines ;
2.UML圖
依照UML圖建構物件
var myCountry = { // 使用關鍵字var 建立名為myCountry之物件
getCaptial : function() { //建立名為getCaptial之方法,當方法被呼叫到執行function
alert(this.myCapital);
}
myName : 'USA', //設定內容特性之值
myCapital : 'LA'
}
3.建立物件並與物件互動
function myPerson(a,b) //為了替物件建立建構子,不要用var建立物件,而該用function
{
this.name = a;
this.age = b;
}
var actor1 = new myPerson('Melo',27);
var actor2 = new myPerson('James',29);
alert(actor1.name);
alert(actor2.age);
4.JavaScript Array
陣列中的變數可以是任何形態之變數,字串,數字,物件,HTML元素....
以下幾種建立陣列之方法:
A. var my_Var1 = new Array();
B. var my_Var2 = new Array( 'USA' , 'CHINA' , 'TW');
C. var my_Var3 = [ 'USA' , 'CHINA' , 'TW' ];
note : 在JQ與JS的中幾乎一切都是物件,陣列也不例外,所以陣列也有他自己的內容特性 length,特過array_name.length; 可以取得陣列長度。
5.存取陣列
不像建立陣列,存取陣列只有一種方法。(且陣列是採取zero-index)
alert(my_arr[0]); //即可顯示陣列第一個元素。
6.增加及更新陣列之元素
my_arr[0] = "Melo"; //將Melo增加給陣列
my_arr[0] = "Melo1"//更新陣列
7.inArray 從陣列找特定值
var myArr1 = new Array('melo','curry','wade','james','CP3');
inArray方法會回傳你要找的值在陣列的哪個位址,如果找不到會回傳-1。
inArray expression : var index = $.inArray(value , array)
// index : 用來接收回傳值判斷有沒有找到
// value : 放要找的值
//array : 你想要找的陣列
ex. var myPlayer = $.inArray('CP3', myArr1);
會回傳4
8. Jquery empty
Jquery的remove方法將選擇之原素以及其子元素從DOM中移除。
Jqeury的empty方法,可以把主要元素保留下來,並且把內容清空。
範例:
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
$("p").empty();
});
});
</script>
</head>
<body>
<p style="width:200px;height:200px;background-color:yellow">This is a paragraph. <b>Bold</b> and <i>italic</i> text.</p>
<button class="btn1">删除 p 元素的内容</button>
</body>
</html>
按下button後<p>內容會被清空
<p style="width:200px;height:200px;background-color:yellow"></p>
雖然empty非常方便,不過在這方面使用JS也非常便利。
note: JS清除陣列
- int[] ary = {1,2,3,4};
- ary.length = 0;
只要將陣列長度設為0,即可清空陣列。
本章大範例:
$(document).ready(function(){
var used_cards = new Array();
function card(name,suit,value) {
this.name = name;
this.suit = suit;
this.value = value;
} //end of card function
//52張牌
var deck = [
new card('Ace', 'Hearts',11),
new card('Two', 'Hearts',2),
new card('Three', 'Hearts',3),
new card('Four', 'Hearts',4),
new card('Five', 'Hearts',5),
new card('Six', 'Hearts',6),
new card('Seven', 'Hearts',7),
new card('Eight', 'Hearts',8),
new card('Nine', 'Hearts',9),
new card('Ten', 'Hearts',10),
new card('Jack', 'Hearts',10),
new card('Queen', 'Hearts',10),
new card('King', 'Hearts',10),
new card('Ace', 'Diamonds',11),
new card('Two', 'Diamonds',2),
new card('Three', 'Diamonds',3),
new card('Four', 'Diamonds',4),
new card('Five', 'Diamonds',5),
new card('Six', 'Diamonds',6),
new card('Seven', 'Diamonds',7),
new card('Eight', 'Diamonds',8),
new card('Nine', 'Diamonds',9),
new card('Ten', 'Diamonds',10),
new card('Jack', 'Diamonds',10),
new card('Queen', 'Diamonds',10),
new card('King', 'Diamonds',10),
new card('Ace', 'Clubs',11),
new card('Two', 'Clubs',2),
new card('Three', 'Clubs',3),
new card('Four', 'Clubs',4),
new card('Five', 'Clubs',5),
new card('Six', 'Clubs',6),
new card('Seven', 'Clubs',7),
new card('Eight', 'Clubs',8),
new card('Nine', 'Clubs',9),
new card('Ten', 'Clubs',10),
new card('Jack', 'Clubs',10),
new card('Queen', 'Clubs',10),
new card('King', 'Clubs',10),
new card('Ace', 'Spades',11),
new card('Two', 'Spades',2),
new card('Three', 'Spades',3),
new card('Four', 'Spades',4),
new card('Five', 'Spades',5),
new card('Six', 'Spades',6),
new card('Seven', 'Spades',7),
new card('Eight', 'Spades',8),
new card('Nine', 'Spades',9),
new card('Ten', 'Spades',10),
new card('Jack', 'Spades',10),
new card('Queen', 'Spades',10),
new card('King', 'Spades',10)
];
var hand = {
cards : new Array(),
current_total : 0,
sumCardTotal: function() {
this.current_total = 0;
for(var i=0;i<this.cards.length;i++){
var c = this.cards[i];
this.current_total += c.value;
}
//顯示目前手上共幾點
$("#hdrTotal").html("Total: " + this.current_total );
//若大於21點,就GG了
if (this.current_total > 21) {
//trigger裡面放要觸發事件之類型,因此就是#btnStick被按下
//若大於21點,觸發stick(攤牌)事件
$("#btnStick").trigger("click");
//增加爆了的特效圖片
$("#imgResult").attr('src','images/x2.png');
//增加html爆牌提示
$("#hdrResult").html("BUST!").attr('class', 'lose');
}else if(this.current_total == 21){
//如果等於21點一樣去觸發攤牌事件
$("#btnStick").trigger("click");
$("#imgResult").attr('src','images/check.png');
$("#hdrResult").html("BlackJack!").attr('class', 'win');
//如果手上排小於21點且目前牌數量等於5張,也算是贏
}else if(this.current_total <= 21 && this.cards.length == 5){
$("#btnStick").trigger("click");
$("#imgResult").attr('src','images/check.png');
$("#hdrResult").html("BlackJack - 5 card trick!")
.attr('class', 'win');
//其他情形就繼續
}else{ }
} //end of sumCardTotal
}; //end of var hand
function getRandom(num){
var my_num = Math.floor(Math.random()*num);
return my_num;
}
//一開始連發兩張牌
function deal(){
for(var i=0;i<2;i++){
hit();
}
}
//發牌
function hit(){
var good_card = false;
do{
var index = getRandom(52);
//$.inArray(index, used_cards ),index隨機取得去跟used_cards(目前被抽到的牌比較),如果找不到會回傳-1,所以前面有加!
//結論這一行是用來判斷目前拿到的隨機號碼是否有被抽過。
if( !$.inArray(index, used_cards ) > -1 ){
//若沒有抽過,將其設為true
good_card = true;
//把隨機拿到的號碼(index),去牌組(deck)內當index取牌,再給C
var c = deck[ index ];
used_cards[used_cards.length] = index;
hand.cards[hand.cards.length] = c;
var $d = $("<div>");
$d.addClass("current_hand")
.appendTo("#my_hand");
$("<img>").attr('alt', c.name + ' of ' + c.suit )
.attr('title', c.name + ' of ' + c.suit )
.attr('src', 'images/cards/' + c.suit + '/' + c.name + '.jpg' )
.appendTo($d)
.fadeOut('slow')
.fadeIn('slow');
}//end of if 若是挑到的牌已經是手上的牌了,下一行就會去while判斷
//如果挑的牌已經在手上了,跳回do重挑,如果是沒有用過的牌被挑出就會跳離while
}while(!good_card);
good_card = false;
//每挑一張牌,就算一次總和
hand.sumCardTotal();
}
//如果id為btnDeal的元素被按下(一開始發牌要發兩張)
$("#btnDeal").click( function(){
//去call deal()
deal();
$(this).toggle();
$("#btnHit").toggle(); //可以去看css,因為#btnHit設為隱藏,toggle後就是顯示(顯示要排)
$("#btnStick").toggle();//(顯示攤牌)
});
$("#btnHit").click( function(){
hit();
});
function end(){
$("#btnHit").toggle();
$("#btnStick").toggle();
$("#btnRestart").toggle();
}
//攤牌被按下後觸發事件
$("#btnStick").click( function(){
$("#hdrResult").html('Stick!')
.attr('class', 'win');
$("#result").toggle();
end();
});
$("#btnRestart").click( function(){
$("#result").toggle();
$(this).toggle();
$("#my_hand").empty();
$("#hdrResult").html('');
$("#imgResult").attr('src','images/check.png');
used_cards.length = 0;
hand.cards.length = 0;
hand.current_total = 0;
$("#btnDeal").toggle()
.trigger('click');
});
});
note 1:
$("#hdrResult").html("BUST!").attr('class', 'lose');
$("指定元素").html("顯示文字").attr("宣告是CSS的class",名稱為lose)
.html() : 加入文字
.attr() : 加入CSS
留言列表
RWD (1)
