JavaScript入門

標籤：獨立   動態效果   white   物件模型   函數   png   row   post   click   

概述：

　　JavaScirpt是一種指令碼語言，是一種直譯試指令碼語言，是一種基於對象的指令碼語言，是一種動態類型，弱類型，基於原型的語言，主要用於網頁編程

一、什麼是JavaScript：

　　JavaScript是一種屬於網路的指令碼語言，已經被廣泛的用於Web應用開發，常用來為網頁添加各式各樣的動態功能，為使用者提供更流暢美觀的瀏覽效果。通常JavaScript指令碼是嵌入在HTML中來實現自身的功能的。

二、JavaScript的優勢

　　1、動態寫入HTML輸出

　　　　使用這個方法可以動態在頁面中添加新的元素

　　　　執行個體：動態在網頁輸出當前日期時間

　　JavaScript代碼：

document.write("<p><b>時間:<b><font color=‘red‘>" + new Date().toLocaleString() + "</font></p>");

　　2、對事件作出反應

　　　　使用事件讓頁面與使用者有更好的互動性，根據使用者的操作做出不同的響應。

　　　　執行個體：單擊網頁中的按鈕時，彈出提示對話方塊

　　HMTL代碼：

<button type="button"onclick="alert(‘你好‘)">點擊這裡</button>

　　3、改變HTML內容

　　　　使用JavaScript來處理HTML內容是非常強大的功能。

　　　　執行個體：根據頁面中的HTML元素的id名，擷取頁面元素並改變該元素的內容

　　HTML代碼：

    <div id="demo">你還沒有許可權查看內容</div>    <input id="btn" type="button" value="先睹為快" />

　　JavaScript代碼：

document.getElementById("btn").onclick = function () {    var ss = document.getElementById("demo");//尋找元素    ss.innerHTML = "正在建設中ing.....";//改變內容}

　　4、改變HTML映像（標籤屬性）

　　　　使用者可以根據需要選擇不同的映像，常用於圖片動態切換中

　　HTML代碼：

    <img id="image" src="img1.png" />    <input id="btn1" type="button" value="下一張"/>

　　JavaScript代碼：

document.getElementById("btn1").onclick = function () {    var ele = document.getElementById("image");//尋找元素    ele.src = "img1.png";//改變引用的圖片檔案    this.disabled = true;//禁用按鈕}

　　5、改變HTML樣式

　　　　常用於改變HTML元素的樣式，曾強使用者體驗

　　執行個體：當滑鼠移動到當前行時，高亮度顯示

　　HTML代碼：

    <ul>        <li class="list">測試1</li>        <li class="list">測試2</li>        <li class="list">測試3</li>        <li class="list">測試4</li>    </ul>

　　JavaScript代碼：

    var rows = document.getElementsByClassName("list");    for (i = 0; i < rows.length; i++) {        rows[i].onmouseover = function () { this.style.backgroundColor = ‘gray‘; }        rows[i].onmouseout = function () { this.style.backgroundColor = ‘white‘; }    }

　　6、驗證輸入

　　　　JavaScript常用於驗證使用者的輸入

　　樣本：當使用者輸入手機號並離開次對話方塊判斷是否是有效電話號碼

　　HTML代碼：

<input id="phoneNumber" onblur="" type="text" />

　　JavaScript代碼：

doucument.getElementById("phoneNumber").onblur = function () {    var num = this.value;    if(isNaN(num)||num.length!=11){alert("不是手機號碼");}}

 總之：JavaScript是用戶端指令碼語言，讓頁面羽使用者更加有互動性，涉及動態效果，增加使用者體驗。

　　

三、JavaScript實現基礎

　　JavaScript指令碼如何來實現自己想要實現的效果？首先必須瞭解JavaScript的基礎文法

　　　　JavaScript指令碼是基於對象的操作。可以分為是三部分　　

　　　　　　ECMAScript核心：為不同的宿主環境提供核心的指令碼能力。

　　　　ECMAScript規定了能適應於各種宿主環境的指令碼核心文法規則，關於ECMAScript語言，ECMA-262描述如下：

　　　　　　ECMAScript可以為不同種類的宿主環境提供核心的指令碼編程能力，因此核心的指令碼語言是與任何特定的宿主換件分開進行規定的

　　　　　　ECMAScript僅僅是個人描述，定義了指令碼語言所有的對象、屬性和方法，其主要描述了以下內容

　　　　　　£：文法

　　　　　　£：資料類型

　　　　　　£：關鍵字

　　　　　　£：保留字

　　　　　　£：運算子

　　　　　　£：對象

　　　　　　£：語句

　　　　　　ECMAScript標準定義了JavaScript指令碼中最為核心的內容，是JavaScript指令碼的骨架，有了骨架，就可以在其上進行擴充，典型的擴充如DOM（文件物件模型）和BOM（瀏覽器物件模型）等。

　　　　DOM（文件物件模型）：規定了訪問HTML和XML的應用程式介面。

　　　　DOM定義了JavaScript可以進行操作的文檔的各個功能組件的介面，提供訪問文檔各個功能組件（如：document、form、textarea等）的途徑以及操作方法。

　　　　樣本：　　　　

 <a  id="demo" href="#">顯示當前日期時間</a>    <span id="date"></span>    <script>        document.getElementById("demo").onclick = function () {            //在id為"date"的頁面元素中顯示當前日期時間文本            document.getElementById("date").innerText = new date.toLocaleString();            //阻止預設瀏覽器動作(W3C)            if (e && e.preventDefault) {                e.preventDefault();            } else {                //IE中阻止函數器預設動作的方式                window.event.returnValue = false;            }            return false;        }    </script>

 

　　　　BOM（瀏覽器物件模型）：提供了獨立於內容而在瀏覽器視窗之間進行互動的對象和方法。

　　　　BOM定義了JavaScript可以進行操作的瀏覽器的個個功能組件的介面，提供訪問文檔的各個功能組件（如視窗本身、螢幕功能組件、瀏覽歷程記錄等）的途徑以及操作方法。

　　　　通常情況下瀏覽器特定的JavaScript擴充都被看做BOM的一部分，主要包括：

　　　　£：關閉、行動瀏覽器及調整瀏覽器視窗的大小；

　　      £：彈出新的瀏覽器視窗；

　　　　£：提供瀏覽器的詳細資料的定位對象；

　　　　£：提供載入到瀏覽器視窗的文檔詳細資料的定位對象；

　　　　£：提供使用者螢幕解析度詳細資料的螢幕對象；

　　　　£：提供cookie的支援；

    　　  £：加入ActiveXObject類擴充BOM，通過JavaScript執行個體化ActionX對象；

BOM有一些事實上的標準，如視窗對象、導航對象等，但每種瀏覽器都為這些對象定義或擴充屬性及方法。

　　執行個體：

 

<a href="JavaScript:window.close();">關閉視窗</a>

 

JavaScript入門