有關javascript的知識（JavaScript中必須掌握的基本知識）

2023-04-13 11:30:33

Javascript（JS）是一門高級的、解釋型的動態程式語言。用於 HTML或web應用，可被瀏覽器直接執行。

完整的JavaScript包括以下幾個部分：

JavaScript的基本特點：

JavaScript常用來完成以下任務：

1.嵌入HTML

HTML 中的腳本必須位於 與 標籤之間。

腳本可被放置在 HTML 頁面的 和 部分中。

document.write("hello world");.document.write("hello world");.

如果 放在 body 中，建議放在底部。因為瀏覽器會按照代碼在文件中的順序解析 HTML。如果先加載的 JavaScript 期望修改其下方的 HTML，那麼它可能由於 HTML 尚未被加載而失效。所以，要將 JavaScript 代碼放在 body 中，應置於 HTML 頁面底部。

2.外部js腳本

也可以把腳本保存到外部文件中。外部文件通常包含被多個網頁使用的代碼。

外部 JavaScript 文件的文件擴展名是 .js。外部文件不使用 標籤，直接寫 javascript 代碼。

如需使用外部文件，請在 標籤的 "src" 屬性中設置該 .js 文件：

3.在console調試

可以進入瀏覽器中console，如chrome F12 進入console，以命令行的形式輸入js命令

4.事件觸發

把 JavaScript 代碼放入函數中，在事件發生時調用該函數。

按鈕function myFunction{ alert("hello");}

JavaScript 使用關鍵字 var 來定義變量， 使用等號來為變量賦值

也可以使用let,const來定義，這三者的區別是：var與let涉及塊級作用域，let 命令只在所在的代碼塊 {} 內有效，具體參考這裡；const定義一個只讀常量

一般用var即可，let更推薦

var a; //聲明var a = 10; //初始化a = 20 ; //賦值

注意: 在JavaScript中，所有代碼指令都會以分號結尾 (;)

JavaScript中數據類型主要有:

算數運算符主要有:

比較運算符主要有:

在常規的比較中，數據類型是被忽略的

var x = 10;var y = "10";if (x == y) //返回true，所以要用===

1.條件語句

if 語句只有當指定條件為 true 時，該語句才會執行代碼。

if (condition){ 當條件為 true 時執行的代碼}

使用 if....else 語句在條件為 true 時執行代碼，在條件為 false 時執行其他代碼。

if (condition){ 當條件為 true 時執行的代碼}else{ 當條件不為 true 時執行的代碼}

使用 if....else if...else 語句來選擇多個代碼塊之一來執行。

if (condition1){ 當條件 1 為 true 時執行的代碼}else if (condition2){ 當條件 2 為 true 時執行的代碼}else{ 當條件 1 和 條件 2 都不為 true 時執行的代碼}

三目運算

let variablename = (condition)?value1:value2 condition成立則variablename = value1 否則value2

2.循環語句

JavaScript 支持不同類型的循環：

for 循環

for (語句 1; 語句 2; 語句 3){ 被執行的代碼塊}//語句 1 （代碼塊）開始前執行//語句 2 定義運行循環（代碼塊）的條件//語句 3 在循環（代碼塊）已被執行之後執行

for/in遍歷

for (x in 可遍歷對象) // x 為屬性名{ 執行代碼塊}

while 循環會在指定條件為真時循環執行代碼塊。

while (條件){ 需要執行的代碼}

do/while 循環是 while 循環的變體。該循環會在檢查條件是否為真之前執行一次代碼塊，然後如果條件為真的話，就會重複這個循環。

do{ 需要執行的代碼}while (條件);

3.函數語法

函數就是包裹在花括號中的代碼塊，前面使用了關鍵詞 function：

function functionname{ // 執行代碼}

加上形參

function myFunction(var1,var2){代碼return var3 //使用 return 語句時，函數會停止執行，並返回指定的值}

匿名函數，函數存儲在變量中，不需要函數名稱，通常通過變量名來調用。

var x = function (a, b) {return a * b};var z = x(4, 3);

4.異常判斷

try 語句允許我們定義在執行時進行錯誤測試的代碼塊。

catch 語句允許我們定義當 try 代碼塊發生錯誤時，所執行的代碼塊。

JavaScript 語句 try 和 catch 是成對出現的。

finally 語句不論之前的 try 和 catch 中是否產生異常都會執行該代碼塊。

try { ... //異常的拋出} catch(e) { ... //異常的捕獲與處理} finally { ... //結束處理}

在瀏覽器中，頁面被加載的時候，會自動生成這個頁面的DOM對象（document）

DOM對象是一個樹模型

可以通過這個對象：

1.查找HTML元素

通過id查找

var x=document.getElementById("intro");//如果找到該元素，則該方法將以對象（在 x 中）的形式返回該元素。//如果未找到該元素，則 x 將包含 null。

通過標籤查找

var y=document.getElementsByTagName("div");//如果有多個同類標籤，則返回多個對象的數組

通過類名查找

var x=document.getElementsByClassName("intro");

因為查找返回的元素也是對象，所以可以對它再進行查找

var x=document.getElementById("main");var y=x.getElementsByTagName("p");//本例查找 的元素，然後查找 元素中的所有 元素

2.修改HTML元素

改變HTML輸出流

document.write;//如果在文檔(DOM)加載完成之後使用則會覆蓋該文檔

修改 HTML 內容

document.getElementById(id).innerHTML=新的 HTML內容

改變 HTML 元素的屬性

document.getElementById(id).attribute=新屬性值

3.DOM事件

事件可以是瀏覽器行為，也可以是用戶行為，當事件觸發時，可以執行對應的js代碼

常見事件

HTML 元素中可以添加事件屬性，並添加 JavaScript 代碼，當此元素的事件被觸發時，就會觸發執行js代碼

現在的時間是?

也可以由DOM對象分配事件，因為事件也是html的一個屬性

document.getElementById("myBtn").onclick=function{displayDate};

addEventListener 方法

element.addEventListener("click", function{ alert("Hello World!"); });

語法為

element.addEventListener(event, function, useCapture);

第一個參數是事件的類型 (如 "click" 或 "mousedown").

第二個參數是事件觸發後調用的函數。

第三個參數是個布爾值用於描述事件是冒泡還是捕獲。該參數是可選的。

詳細的事件類型參考https://developer.mozilla.org/zh-CN/docs/Web/Events,注意與在元素屬性中的事件是不同的