javascript概述

javascript是一種腳本語言,嵌入在網頁應用程序,是web2.0的主要推手。目前幾乎所有的網站都是用javascript來構建頁面,尤其是ajax技術的流行,更是促進了javascript的發展。

javascript只能由瀏覽器解釋執行,因此要嵌入到網頁中才能發揮作用,javascript最大的特點就是操作頁面DOM節點實現頁面應用程序。一般來說,使用javascript的方式有兩種:

  • 在頁面中直接寫javascript代碼
<head>
<title>頁面中直接編寫javascript</title>
<script language="javascript">
//在這裏直接編寫javascript代碼
</script>
</head>

  • 引入外部javascript
<head>
<title>引入外部javascript文件</title>
<script language="javascript" src="js/mian.js"></script>
</head>

不嚴格的說,javascript也是一門編程語言,瞭解其解釋執行原理對於編寫出高質量代碼至關重要。

首先需要闡明一個非常重要的概念:頁面加載。因爲它需要從無到有將頁面DOM結構以及javascript代碼由上而下按照順序解釋一遍,實際上javascript代碼也可看作是DOM結構中的一部分。

  • 對於普通DOM元素是這樣處理的:瀏覽器邊解釋邊加載直到文檔結束,此時瀏覽器即按照w3c的標準將文檔結構圖展示在頁面上。
  • 而對於javascript代碼是這樣處理的:瀏覽器自上而下(包括引入的外部js文件也是這樣):如果javascript是執行代碼,那麼立即執行此代碼;如果javascript是定義代碼(如變量定義和函數定義)那麼就預定義變量或者函數,直至所有的javascript代碼都被解釋完全。

需要說明的是,普通DOM元素和javascript是同時加載的,這樣就會造成這樣一個問題:頁面加載中如果遇到了可執行的javascript代碼,並且這個代碼操縱了頁面中的某個DOM節點,那麼就會出現兩種情況:第一,此javascript代碼出現在需要操作的DOM節點之前,就會報錯(找不到元素或者引用元素爲null,因爲此時的節點還沒有加載);第二,此javascript代碼出現在需要操作的DOM節點之後,就不會出現錯誤(因爲此時相應的DOM元素已經存在於此文檔中了)。

頁面加載完之後就會觸發頁面的onload事件。這個事件相對於其他事件的特殊之處就在於它是在頁面加載完成之後自動執行的。注意到這個特殊之處,當然可以把它當成普通事件來處理。下面即討論事件的有關內容。

所謂事件就是針對頁面元素的用戶動作,比如針對某個DOM元素用戶單擊或者雙擊都可以稱作一個事件。瀏覽器監聽用戶行爲,並對不同的行爲做出不同的響應。事件交互是頁面應用程序的基礎。而事件處理機制就是在做這樣一個事情:對於用戶的不同行爲需要做出什麼響應。首先讓我們來看一看一般頁面事件都有哪些,關於這個常識性的內容,本人使用w3c官網的截圖來說明:


上圖羅列出了二十一個事件句柄。下面需要說明的就是如何通過事件句柄來處理事件並做出響應:爲了實現這一目的,首先需要進行事件監聽,一旦事件發生就進行處理,即調用預定義函數。通常有以下幾種方式:

第一:在DOM節點上直接給出事件句柄及其屬性。如:

<body onload="initPage()">……</body>:這樣就處理了頁面加載事件,在頁面加載完成之後調用initPage()函數。注意這裏函數名後有括號

<div onclick="show()"></div>:在單擊此div時觸發show()函數

第二:通過javascript語句實現事件處理。如:

document.getElementById('mydiv').onclick=show;//在單擊id爲'mydiv'的層時觸發show函數,注意這裏函數名之後沒有括號,表示不立即執行


寫到這裏,應該有一個清晰的認識:javascript是什麼,它是如何運行的,它是怎樣操縱DOM節點實現頁面應用程序的。基於這樣的認識,我們即將進入下一步更具體而深入的研究。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章