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 物件表