《客戶端腳本語言-JavaScript》

2024-04-27 15:12:32

字體：大中小

來源：轉載

供稿：網友

前言：

在之前學習的項目中接觸過javaScript，并且在參與的積分系統中也有涉略。但對于其的認識是碎片化的，通過此《北風網李炎恢視頻》的學習，對于Javascript有了一個較為系統的認識。此篇博文重點為大家展示JavaScript是何物？

JavaScript

基于對象和事件驅動并且具有相對安全性的、具有面向對象能力的、解釋型的程序設計語言，具體來說，便是客戶端腳本語言。運行依賴于可支持的瀏覽器。

特點：

（1）松散性：變量無需一個明確的類型

（2）對象屬性：對象可把屬性名映射為任意的屬性值

（3）繼承機制：基于原型

組成:

（1）核心（ECMAScript）

（2）文檔對象模型（DOM：Document Object Model）：針對HTML和xml的API（應用程序接口）描繪了一個層次化的節點樹，運行開發人員添加、移除、修改頁面的某一部分，是表現和操作頁面標記的真正跨平臺、語言中立的方式。

D：整個web加載的網頁文檔

O：類似Window對象之類的東西，可調用屬性和方法

M:網頁文檔的樹形結構

（3）瀏覽器對象模型（BOM：Browser Object Model）:提供很多對象，用于訪問瀏覽器的功能。

用法：

JavaScript是輕量級的編程語言，可插入HTML頁面，由所有的現代瀏覽器執行。

簡而言之：JavaScript與HTML、CSS一起工作。具體關系為：HTML定義網頁的內容；CSS描述網頁的布局；JavaScript關乎網頁的行為

基本原則：

1. HTML 中的腳本必須位于 <script> 與 </script> 標簽之間。

2. 腳本可被放置在 HTML 頁面的 <body> 和 <head> 部分中。

實例：

（1）直接寫入HTML輸出流

<!DOCTYPE html><html><head><meta charset="utf-8"><title>JavaScript實例</title></head><body>	<p>JavaScript 能夠直接寫入 HTML 輸出流中：</p><script>document.write("<h1>清風明月</h1>");document.write("<p>清風徐來</p>");</script><p>您只能在 HTML 輸出流中使用	</body></html>
運行結果：
 
（2）對事件作出反應：alert()函數在起作用，可用于代碼測試
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>JavaScript實例</title></head><body><h1>我的第一個JavaScript</h1><p><button type="button" onclick="alert('歡迎加入')"/>點我!</p></body></html>
結果：
        
（3）改變HTML內容
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>JavaScript實例</title> </head><body><h1>我的第一段 JavaScript</h1><p id="demo">//*********************************************以ID為鏈接，改變此處的內容顯示JavaScript 能改變 HTML 元素的內容。</p><script>  function myFunction(){    x=document.getElementById("demo"); // 找到元素    x.innerHTML="Hello JavaScript!"; // 改變內容  }</script><button type="button" onclick="myFunction()">點擊這里</button> //*******************************創建按鈕，觸發myFunction()</body></html>
結果：
        
 
（4）改變HTML樣式
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>JavaScript實例</title> </head><body><h1>我的第一段 JavaScript</h1><p id="demo">JavaScript 能改變 HTML 元素的樣式。</p><script>    function myFunction(){          x=document.getElementById("demo") // 找到元素          x.style.color="#ff0000"; // 改變樣式     }</script><button type="button" onclick="myFunction()">點擊這里</button> //***********************改變字體顏色，運行機制與改變HTML內容一致</body></html>結果：
        
（5）驗證輸入
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>JavaScript實例</title> </head><body><h1>我的第一段 JavaScript</h1><p>請輸入數字。如果輸入值不是數字，瀏覽器會彈出提示框。</p><input id="demo" type="text"><script>function myFunction()//***********************************************關鍵部分{var x=document.getElementById("demo").value;if(x==""||isNaN(x)){   alert("不是數字");}}//****************************************************************************</script><button type="button" onclick="myFunction()">點擊這里</button></body></html>
結果：        
后記：
   學習一個項目，首先要進行宏觀把控，其次要進行反饋跟蹤，最終要撰寫學習總結。在學習的每一個階段要了解這部分在整體中居怎樣的地位，產生怎樣的作用。讓學習有方向可言。