2011年8月16日 星期二

JavaScript 雜記

先說 這篇不是為了教學,而是本著學過要留下點痕跡才不會因為忘記而就像沒學過一樣。這篇文章就是基於這樣的理念才生出來的,之前已經摸過JavaScript,但是卻因為沒留下點什麼而全部忘光光,重頭又學習讓我花費了不少時間。



Java Script

首先 Java Script 跟Java的關係大概只有名字跟都是程式語言吧,兩者在不少地方的寫法都不相同,所以請盡量把這兩個程式當作不同的東西來看待比較妥當。

如果把Java Script放在html裡面請用以下tag把js的程式碼包住,主要是跟Browser說我們裡面的東西是用Java Script撰寫的。

直接把Java Script宣告在html內的寫法
<script type="text/javascript">
  /*這是第一行敘述*/
  document.write("A"+"b");
</script>

引用外部的Java Script
<script type="text/javascript" src="外部的URL.js"></script>
note

每行敘述完請加上";"。

// or /**/ 是註解

+ 不只可以當數字加減,也可以當作字串的連接


1.宣告變數的寫法----

var 變數名稱 = new dataType ;

var 是宣告一個變數名稱 但是還未分配東西
new 則是創造一個東西出來
dataType則是你要用的資料型別(Number,String,Boolean,Array(),image()...ect)
可以只宣告(var)


另外有特殊的DataType

null : 保留字,非空字串而是表示什麼都沒有,舉個比方來說,就是不是空的牛奶瓶,而是那裡什麼都沒有。


2.宣告函式
有三種方法

1.一般的函數定義方式
function 函式名稱(變數1,變數2...){
    函式內容
    return 回傳值;
}
2.使用函數文字
var 變數 = function(n1,n2,op) {return eval("n1"+op+"n2")};

3.使用Function()建構子
var fun3 = new Function("n1","n2","op","return eval('n1'+op+'n2')");

3.建立物件

function 物件名稱(變數1 ,變數2...){
    this.變數1=變數1;
    this.變數2=變數2;
    ...
}

物件名稱1 = new 物件名稱("xxx",10,...);
物件名稱2 = new 物件名稱("yyy",30,...);


臨時有需要可以在物件名稱1插入一個新的屬性

物件名稱1.變數3="zzzz";

但是這樣的改動不會影響到一開始的 物件名稱 跟後來宣告的 物件名稱2
如果要全員改動只能回一開始的 物件名稱 來改

要在物件中增加方法則是先寫好方法,等寫物件的建構式才放進去
 example:

先宣告方法
function 顯示變數(){    document.write("變數1:"+this.變數1); }

再撰寫物件建構式的時候加入
 this.顯示變數 = 顯示變數;

然後繼承方面...有點懶得談了,就利用prototype方法下去做繼承
childern.prototype=new parent();

另外可以利用 prototype 這個關鍵字來增加基底物件的屬性或方法,例如: 「基底物件.prototype.屬性 = 值」,或「基底物件.prototype.方法 =方法」,衍生後的物件自動繼承了增加的屬性或方法。

4.常用物件
document物件 - 也就是網頁

document.物件名稱.物件屬性
-存取該物件的屬性

document.物件名稱.element[0]
-該物件內的第一個元素
例如
<div id="test">>
  <h></h>
  <h2></h2>
</div>

test內的第一個元素就是
<h></h>

document.write("xxx")
-此函式是把String xxx寫進網頁(document)裡面。
document.getElementById("xxx")
-尋找document元素中名為xxx的元素,其後可繼續接物件/屬性

Date物件
-交給另外一篇談 (暈

5.常用函式

parseInt();
-把()內的字串轉成數字
parseFloat();
-把()內的字串轉成浮點數

prompt("顯示訊息","輸入區的預設值");
-會將()內訊息顯示在DiaLog裡面,並且等待使用者輸入資料,當按下 確定/Enter 以後會以字串(String)方式回傳,當按下 取消 以後會回傳一個 null (保留字非空字串)。

alert("顯示訊息");
-會跳出一個Dialog出來

confirm("顯示訊息");
-跟alert很像,只是多了一個取消按鈕,並且會回傳一個boolean(確定=true / 取消=false)

6.在html中呼叫Java Script 函式
超連結的用法

<a href="javascript:函式名稱( 變數名稱 )"></a>

請注意 href 的內容, javascript:函式名稱( 變數 )。
Javascript 提供了一個特別的用法,稱之為 JavaScript Pseudo-Protocol,而其 specifier 為 javascript:(請特別注意最後的冒號);一般來說,javascript: 之後會加上一個函數名稱,函數可以是 Javascript 內建的函數,也可以是自行定義的函數。例如,你可以直接在瀏覽器輸入 javascript:alert(document.links.length) 來得知目前這個網頁總共有多少超連結(links)。當然,你也可以將這段程式碼用來取代這個範例的 href 值。

按鈕的用法

<input name="Button1" onclick=函式名稱( 變數 )" type="button" value="請按我" />

圖片上的滑鼠移動事件

<img name="mypic" border="0" src="圖片來源" onMouseOut="函式( 變數 );" onMouseOver="函式( 變數 );"/>

重要 - 以上內容為參考以下文章 :D

 JavaScript Note
這文章裡面還有一些範例跟更詳細的說明,以及蠻好用的Dom 物件表

0 意見:

張貼留言