JavaScript 學習（1）

參考資料：http://www.w3school.com.cn/js/index.asp

額，發現 http://www.w3cschool.cc 這裏的資料彷佛比上面那個更新鮮一些...

---

1、教程

    js是一種輕量級的編程語言，可插入html頁面中，並由瀏覽器執行。

    （1）簡介

<script>
    document.write("<h1>標題一</h1>");
    function al(){
//        alert("button clicked.");
//        document.getElementById("aa").innerHTML = "<h2>O(∩_∩)O哈哈~</h2>";
        if(isNaN(document.getElementById("num").value)){
            alert("not num");
        }
    }
    function am(){
        document.getElementById("aa").style.color = "#006060";
    }

</script>
<input type="text" name="num" id="num" />
<input type="button" value="submit" onclick="al()" />
<input type="button" value="submit" onclick="am()" />
<div id="aa"></div>

    （2）實現

// <script>標籤， 在html中，使用 。type="text/javascript"，不用添加。JS是現代瀏覽器以及HTML5中的默認腳本。

// 向html中，輸入文本
document.write("<h1>This is a heading.</h1>");
// JS 函數和事件

<script>
    function myFunction(){
// 必定要注意id名字！！！ 將demo寫成dome了 ...
        document.getElementById("demo").innerHTML="My First JS Function.";
    }
</script>
<div id="demo"> ... </div>
<button type="button" onclick="myFunction()">Try it.</button>

// 輸出
document.getElementById(id); // 來得到某個html元素的訪問 
innerHTML; // 獲取或插入元素內容

// 寫到控制檯
console.log("...") //

    （3）語句

// 瀏覽器會按照編寫的順序來執行每條語句。
// js對大小寫敏感

    （4）註釋

// 第一種註釋方法
/*
第二種註釋方法
*/

    （5）變量

// 變量
var x = 2;
var y = 3;
var z = x + y;

// 聲明(建立)JS變量
var carname;

// 一條語句，多個變量
var name="Gates", age=56, job="CEO";

// Value = undefined;
var carname; // carname的值將是 undefined

    （6）數據類型

        字符串，數字，布爾，數組，對象，Null，Undefined

        JS擁有動態類型。相同的變量，可用做不一樣的類型。

var x ;
var x = 6;
var carname = "Bill Gates"; var carname = 'Bill Gates';
var x = true; var y = false;

// 數組
var cars = new Array();
cars[0] = "Audi";
cars[1] = "BMW";
// 或者使用
var cars = new Array("Audi", "BMW");

// 對象
// 對象由花括號分隔。在括號內部，對象的屬性以名稱和值對的形式(name: value)來定義。屬性由逗號分隔
var person = {
    firstname   : "Bill",
    lastname    : "Gates",
    id          : 5566
};
// 對象屬性的訪問
person.lastname; person["lastname"]

// 聲明變量類型
var carname = new String;
var x = new Number;
var y = new Boolean;
var cars = new Array;
var person = new Object;

    （7）對象

        JS中全部事物都是對象：字符串，數字，數組，日期等待

        在JS中，對象時擁有屬性和方法的數據。

        屬性：與對象有關的值。方法：可以在對象上執行的動做。

// 訪問對象的屬性
objectName.propertyName

// 訪問對象的方法
objectName.methodName

    （8）函數

        函數是由事件驅動的或者當他被調用時執行的可重複使用的代碼塊。

function functionname(){
    // 執行代碼 ...
}

// 調用帶參數的函數
function myFunction(var1, var2){
    // 執行代碼 ...
}

<button onclick="myFunction("Bill Gates", "CEO")">點擊這裏</button>

// 帶有返回值的函數
function myFunction(){
    // 執行代碼 ...
    return x;
}

// 變量的生存期
// 局部變量會在函數運行之後被刪除
// 全局變量會在頁面關閉後被刪除

    （8-1）事件

        HTML事件是發生在HTML元素上的事情。

<button onclick="document.getElementById("demo").innerHTML=Date()">The time is ?</button>

// 常見事件
onchange // HTML元素改變
onclick // 用戶點擊HTML元素
onmouseover // 用戶在一個HTML元素上移動鼠標
onmouseout // 用戶從一個HTML元素上移開鼠標
onkeydown // 用戶按下鍵盤按鍵
onload // 瀏覽器已完成頁面加載

   （8-2）字符串

        字符串可使插入到引號中的任何字符。可使用單引號或者雙引號。

// 可使用索引位置來訪問字符串的每一個字符
var carname = "Volvo XC60";
var character = carname[7];

// 字符串的長度
var sln = carname.length

// 特殊字符
"\""; // 進行轉義

    （9）運算符

        +，-，*，/，%，++，--

        =，+=，-=，*=，/=，%=

    （10）比較

// 比較運算符
==        等於
===       全等(值和類型)
!=, >, <, >=, <= 

// 邏輯運算符
&&        and
||        or
!         not

// 條件運算符
variablename = (condition)?value1:value2;

    （11）If...Else

if (條件1){
    // ...
}
else if (條件2){
    // ...
}
else {
    // ...
}

    （12）Switch

switch(n){
case 1:
    // ...
    break;
case 2:
    // ...
    break;
// ...
default:
    // ...
}

    （13）For

for (var i=0; i<cars.length; i++){
    document.write(cars[i] + "<br>");
}

    （14）While

while (條件){
    // ...
}


do{
    // ...
}
while(條件);

    （15）Break

        break語句跳出循環。continue用於跳過循環中的一個迭代。

    （16）錯誤

try     // 語句測試代碼塊的錯誤
catch   // 語句處理錯誤
throw   // 語句建立自定義錯誤 

try{
    // 在這裏運行代碼
} catch(err){
    // 在這裏處理錯誤
}

// 簡單示例
function mm(){
    try{
        alelrt("welcome guest!"); // alert() 
    } catch(err){
        alert(err.message);
    }
}

    （17）驗證

        js可用來在數據被送往服務器前對HTML表單中的這些輸入數據進行驗證。

        典型：①是否已填寫表單中的必填項 ②輸入的郵件是否合法 ③書否輸入合法日期 ④是否在數據域(numeric field)中輸入了文本

<script>
    function validate_form(){
// 獲取當前頁面forms，中的元素，的value
        var x = document.forms["form_a"]["name"].value;
        if(x == null || x == ""){
            alert("不能爲空！");
            return false;
        } else {
            return true;
        }
    }
</script>

<form action="action.php" name="form_a" onsubmit="return validate_form()" method="post">
    用戶名: <input type="text" name="name" />
    <input type="submit" value="Submit">
</form>

    （18）JSON

        json是JavaScript Object Notation。是一種輕量級的數據交換格式。

// 建立JavaScript字符串
var text = '{ "employees" : [' +
    '{ "firstName":"John" , "lastName":"Doe" },' +
    '{ "firstName":"Anna" , "lastName":"Smith" },' +
    '{ "firstName":"Peter" , "lastName":"Jones" } ]}';

// 使用JS內置函數 JSON.parse() 將字符串轉換爲 JavaScript 對象
var obj = JSON.parse(text);

    （19）void
        常常使用到 javascript:void(0) 這樣的代碼。

<a href="javascript:void(0)">單擊此處什麼也不會發生</a>

// href="#" 與 href="javascript:void(0)" 的區別
// #包含了一個位置信息，默認錨的位置是 #top 也就是網頁的上端。
// 而JavaScript:void(0)，僅僅表示一個死連接

---

2、HTML DOM

    （1）DOM簡介

        經過HTML DOM，能夠訪問JavaScript HTML 文檔的全部元素。

        當網頁被加載時，瀏覽器會建立頁面的文檔對象模型（Document Object Model）。

        查找HTML元素：①經過id ②經過標籤名 ③經過類名

    （2）HTML

// 改變HTML輸出流
document.write(Date());

// 改變HTML內容
<p id="p1">Hello World</p>
<script>
    document.getElementById("p1").innerHTML = "New text!";
</script>

// 改變HTML屬性
<img id="image" src="smiley.gif">
<script>
    document.getElementById("image").src = "landscape.jpg";
</script>

    （3）CSS

        改變HTML元素的樣式

document.getElementById(id).style.property = new style;

// 例子
<p id="p2">Hello World!</p>
<script>
    document.getElementById("p2").style.color = "blue";
</script>

    （4）事件

        HTML DOM 使JavaScript有能力對HTML事件做出反應。

        能夠向HTML事件屬性添加JavaScript代碼。

<p id="p1" onclick="this.innerHTML='hi world.'">Hello world!</p>

// 使用HTML DOM 來分配事件
// HTML DOM 容許您使用JavaScript來向HTML元素分配事件。
<p id="p1">Hello world!</p>
<script>
    document.getElementById("p1").onclick = function(){alert("aa");};
</script>
// 此時，須要將元素<p>放置在 script 前面。或者使用 function() 函數


// onload 和 onunload 事件，會在用戶進入或離開頁面時觸發
<body onload="checkCookies()">
// onchange 事件
<input type="text" onchange="alert(this.value)" />
// onmouseover, onmouseout, onmousedown, onmouseup, onclick

    （5）EventListener

element.addEventListener(event, function, useCapture);

    （6）元素

        如需向HTML DOM 添加新元素，必須先建立該元素（元素節點），而後向一個已存在的元素追加該元素。

// 建立新的HTML元素
<div id="div1">
 <p id="p1">This is a paragraph.</p>
 <p id="p2">This is another paragraph.</p>
 </div>

<script>
 var para=document.createElement("p");
 var node=document.createTextNode("This is new.");
 para.appendChild(node);

 var element=document.getElementById("div1");
 element.appendChild(para);
 </script>

// 刪除已有的HTML元素
<div id="div1">
 <p id="p1">This is a paragraph.</p>
 <p id="p2">This is another paragraph.</p>
 </div><script>
 var parent=document.getElementById("div1");
 var child=document.getElementById("p1");
 parent.removeChild(child);
 </script>

---

3、高級教程

    （1）對象

        js中全部的事物都是對象：字符串，數值，數組，函數 ...   此外，JS容許自定義對象

        對象只是一種特殊的數據，對象擁有屬性和方法。

objectName.propertyName;

objectName.methodName();

        建立對象，並實例

person = new Object();
person.firstname="John";
person.lastname="Doe";
person.age=50;
person.eyecolor="blue"; 

// 

person = {firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"}

        使用對象構造器。

<script>
    function person(firstname, lastname, age, eyecolor){
        this.firstname = firstname;
        this.lastname = lastname;
        this.age = age;
        this.eyecolor = eyecolor;

        this.changeName = changeName;
        function changeName(name){
            this.changeName = name;
        }
    }
    var a_person = person("John", "Doe", 25, "blue");
    a_person.changeName("Doe");
</script>

    （2）Number 對象

        JS只有一種數字類型。

        全部JavaScript數字均爲64位。

// 八進制
var y = 0377;
// 十六進制
var z = 0xFF;

// 可使用 toString(x)， 輸出 x 進制
var num = 128;
num.toString(16);

    （3）String 字符串

// String 使用長度屬性 length 來計算字符串長度
// 使用 indexOf() 來定位字符串中某一個指定的字符串首次出現的位置
// match() 函數用來查找字符串特定的字符，而且若是查找到的話，則返回這個字符串
// replace() 在字符串中用某些字符替換另外一些字符
// toUpperCase(), toLowerCase()
// split() 轉換爲數組
// 特殊字符，轉義 '\'

    （4）Date 日期

new Date();

    （5）Array 數組， Boolean 布爾， Math 算術， RegExp 對象

// 數組
var num = [1, 2, 3, 4]; new Array();

// 布爾
// 0,-0,null,"",false,undefined,NaN

// 算術
Math.sqrt(16); Math.PI; Math.round(4.7); // 四捨五入

// 正則
// regular expression 
var str = "Is this all there is?";
var pattern = /is/i; // 前面的字符串，後面的'i'忽略大小寫。'g'全文搜索
str.match(pattern);