JavaScript基礎介紹與實例

Posted on by

一、什麼是JavaScript

JavaScript是一種具有面向對象能力的、解釋性的程序設計語言。更具體一點，它是基於對象和事件驅動並具有相對安全性的客戶端腳本語言。因為他不需要在一個語言環境下運行，而隻需要支持它的瀏覽器即可。它的主要目的是：驗證發往服務器端的數據的合法性、增加web互動、加強用戶體驗度等。

  • 基於對象：JavaScript中內置瞭很多對象，直接調用對象的屬性和方法進行操作，簡化編程。
  • 事件驅動：程序開始運行到結束，可以一直偵聽事件。
  • 解釋性語言：不需要編譯成計算機專門去讀的文件，調用哪塊解釋哪塊，並非一次性編譯。例如：c#就是編譯性語言，如果要運行C#語言編寫的程序，就必須先編譯成exe或者dll文件才能運行。而JavaScript不需要預先編譯
  • 腳本語言：需要嵌入到別的語言之中，JS需要嵌入在HTML中，單獨存在沒有意義。

二、JavaScript和ECMAScript的關系

  • ECMAScript是JavaScript的標準和基礎

三、JavaScript特點

1、松散性（弱類型）

JavaScript語言核心與C、C++、Java相似，比如條件判斷、循環、運算符等。但是，它卻是一種松散類型的語言，也就是說，它的變量不必具有一個明確的類型。（變量無需聲明也可以使用，一個變量賦值為數字類型，還可以在賦值為字符串等其它類型）

2、對象屬性

JavaScript中的對象把屬性名映射為任意的屬性值。它的這種方式很像哈希表或關聯數組，而不像C中的結構體或者C++、Java中的對象。

3、繼承機制

JavaScript中的面向對象繼承機制是基於原型的（原型：最基礎的基類），和C++以及Java中的繼承大不相同（可以子類繼承父類）。

4、嚴格區分大小寫。

四、JavaScript組成部分

一個完整的JavaScript應該由下列三個不同的部分組成：

1、核心（ECMAScript）

  • 主要定義瞭JavaScript的語言基礎部分，各個瀏覽器都嚴格遵守該規范，沒有兼容性問題，ECMAScript規范由ECMA制訂。組成部分：語法、類型、語句、關鍵字、保留字、操作符、對象等。

2、文檔對象模型（DOM）

  • 文檔對象模型（Document object Model）主要定義瞭如何將HTML轉換成一顆符合DOM規范的樹，並且如何對這棵樹進行相應的操作。該規范由W3c定義，但是，部分瀏覽器沒有嚴格遵守該規范，寫代碼時需要考慮兼容性問題。
  • HTML和XML的應用程序接口（API）。
  • 把整個頁面規劃為層級式的節點結構。

3、瀏覽器對象模型（BOM）

  • 瀏覽器對象模型（Browser Object Model）內置瞭一些對象，用來操作窗口，這些對象包括window、screen、location、navigator、document、xmlhttprequet,雖然該部分沒有規范，但是，各個瀏覽器都支持這些對象。開發人員使用BOM可以控制瀏覽器顯示頁面以外的部分。而BOM真正與眾不同的地方（也是經常會導致問題的地方），還是它作為JavaScript實現的一部分，至今仍沒有相關的標準。

可對瀏覽器窗口進行訪問和操作，包括：

  • 彈出新的瀏覽器窗口。
  • 移動、關閉瀏覽器窗口及調節瀏覽器窗口大小。
  • 獲取用戶屏幕分辨率的屏幕對象。
  • web瀏覽器詳細的定位對象。

五、使用JavaScript

<Script>標簽解析

<script>xxx</script>這組標簽，是用於在HTML頁面中插入JS的主要方法。它主要有以下幾個屬性：

  • 1、charset：可選。表示通過src屬性指定的字符集。由於大多數瀏覽器忽略它，所以很少有人用它。
  • 2、defer：可選。表示腳本可以延遲到文檔完全被解析和顯示之後再執行。由於大多數瀏覽器不支持，故很少用。
  • 3、language：已廢棄。原來用於代碼使用的腳本語言。由於大多數瀏覽器忽略它，所以不要用瞭。
  • 4、src：可選。表示包含要執行代碼的外部文件。
  • 5、type：必需。可以看作是language的替代品。表示代碼使用的腳本語言的內容類型。范例：type="text/javascript"

<scripe>標簽示例：

<script type="text/javascript">
   alert('歡迎來到JavaScript世界!');
</script>

六、JavaScript使用方式：

1、事件定義式：在定義事件時直接寫入JavaScript腳本。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>事件定義式</title>
</head>
<body>
    <input type="button" value="點擊" onclick="alert('我被點擊瞭')" />
</body>
</html>

效果：

2、直接嵌入式：在網頁中直接嵌入JavaScript。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>直接嵌入式</title>
    <script>
       function btnClick(){
           alert("我是寫在head裡面的JavaScript");
       };
    </script>
</head>
<body>
    <input type="button" value="點擊" onclick="btnClick()" />
    <script>
       alert("我是寫在body裡面的JavaScript");
    </script>
</body>
</html>

效果：

註意：

  • 使用直接嵌入式的時候，JavaScript腳本可以寫在<head>標簽裡面，也可以寫在<body>標簽裡面。

3、文件調用式：在網頁中調用獨立的JavaScript文件。把js代碼寫在單獨的一個js文件中，通過src屬性引入即可。它具有維護性高、可緩存（加載一次，無需再次加載）、方便未來擴展的特點。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文件調用式</title>
    <script src="../demo.js"></script>
</head>
<body>
    <input type="button" value="點擊" onclick="btnClick()" />
</body>
</html>

註意：

  • 1、使用外部樣式引入js，雖然沒有任何代碼瞭，但也不能使用單標簽：
    <script type="text/javascript" src="demo.js"/>
  • 2、不能再裡面添加任何代碼，添加的代碼執行不到
    <script type="text/javascript" src="demo.js">alert('我很可憐，因為執行不到')</script>

到此這篇關於JavaScript基礎與實例的文章就介紹到這瞭。希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。

推薦閱讀：