首頁>技術>

JavaScript中必須掌握的基本知識

一.簡介

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

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

ECMAScript，描述了該語言的語法和基本物件文件物件模型（DOM），描述處理網頁內容的方法和介面瀏覽器物件模型（BOM），描述與瀏覽器進行互動的方法和介面

JavaScript的基本特點：

是一種解釋性指令碼語言（程式碼不進行預編譯）。主要用來向HTML頁面新增互動行為。可以直接嵌入HTML頁面，但寫成單獨的js檔案有利於結構和行為的分離。

JavaScript常用來完成以下任務：

嵌入動態文字於HTML頁面對瀏覽器事件作出響應讀寫HTML元素在資料被提交到伺服器之前驗證資料檢測訪客的瀏覽器資訊控制cookies，包括建立和修改等二.用法

1.嵌入HTML

HTML 中的指令碼必須位於 <script> 與 </script> 標籤之間。

指令碼可被放置在 HTML 頁面的 <body> 和 <head> 部分中。

<!DOCTYPE html><html><head><script>document.write("hello world");</script></head><body>.<script>document.write("hello world");</script>.</body></html>

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

2.外部js指令碼

也可以把指令碼儲存到外部檔案中。外部檔案通常包含被多個網頁使用的程式碼。

外部 JavaScript 檔案的副檔名是 .js。外部檔案不使用 <script> 標籤，直接寫 javascript 程式碼。

如需使用外部檔案，請在 <script> 標籤的 "src" 屬性中設定該 .js 檔案：

<!DOCTYPE html><html><body><script src="xx.js"></script></body></html>

3.在console除錯

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

4.事件觸發

把 JavaScript 程式碼放入函式中，在事件發生時呼叫該函式。

<button type="button" onclick="myFunction()">按鈕</button><script>function myFunction(){    alert("hello");}</script>
三.變數

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

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

一般用var即可，let更推薦

var a;   //宣告var a = 10;  //初始化a = 20 ;   //賦值

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

JavaScript中資料型別主要有:

變數

解釋

示例

String

字串（一串文字）。字串的值必須將用引號（單雙均可，必須成對）擴起來。

var name = "John";

字元訪問:name[0] name[1]

Number

數字。JavaScript 只有一種數字型別。數字可以帶小數點，也可以不帶

let x1=34.00; let x2=34;

Boolean

布林值（真 / 假）。 true/false 是 JS 裡的特殊關鍵字，無需引號。

let x=true;let y=false;

Array

陣列，用於在單一引用中儲存多個值的結構。

let cars=["Saab","Volvo","BMW"];

元素引用方法：cars[0],cars[1]

Object

物件，JavaScript 裡一切皆物件，一切皆可儲存在變數裡。

物件由花括號分隔。在括號內部，物件的屬性以名稱和值對的形式 (name : value) 來定義。屬性由逗號分隔

let person={firstname:"John", lastname:"Doe", id:5566};

let newObject = document.querySelector('h1');

物件屬性訪問:object.AttributesName object[''AttributesName'']

算數運算子主要有:

+ 加法

- 減法

* 乘法

/ 除法

% 取模

++自增

--自減

比較運算子主要有:

==等於

=== 絕對等於（值和型別均相等）

!= 不等於

!== 不絕對等於（值和型別有一個不相等，或兩個都不相等）

> 大於

< 小於

>= 大於或等於

<= 小於或等於

在常規的比較中，資料型別是被忽略的

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/in - 迴圈遍歷物件的屬性while - 當指定的條件為 true 時迴圈指定的程式碼塊do/while - 同樣當指定的條件為 true 時迴圈指定的程式碼塊

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物件

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

DOM物件是一個樹模型

可以透過這個物件：

JavaScript 能夠改變頁面中的所有 HTML 元素JavaScript 能夠改變頁面中的所有 HTML 屬性JavaScript 能夠改變頁面中的所有 CSS 樣式JavaScript 能夠對頁面中的所有事件做出反應

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");//本例查詢 id="main" 的元素，然後查詢 id="main" 元素中的所有 <p> 元素

2.修改HTML元素

改變HTML輸出流

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

修改 HTML 內容

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

改變 HTML 元素的屬性

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

3.DOM事件

事件可以是瀏覽器行為，也可以是使用者行為，當事件觸發時，可以執行對應的js程式碼

常見事件

事件

描述

onchange

HTML 元素改變

onclick

onmouseover

使用者在一個HTML元素上移動滑鼠

onmouseout

使用者從一個HTML元素上移開滑鼠

onkeydown

使用者按下鍵盤按鍵

onload

瀏覽器已完成頁面的載入

HTML 元素中可以新增事件屬性，並新增 JavaScript 程式碼，當此元素的事件被觸發時，就會觸發執行js程式碼

<button onclick="getElementById('demo').innerHTML=Date()">現在的時間是?</button><p id="demo"></p>

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

<script>document.getElementById("myBtn").onclick=function(){displayDate()};</script>

addEventListener() 方法

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

語法為

element.addEventListener(event, function, useCapture);

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

第二個引數是事件觸發後呼叫的函式。

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

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

12
最新評論

相關內容

  • ∧ BSA-TRITC(10mg/ml) TRITC-BSA 牛血清白蛋白改性標記羅丹明
  • ∨ 面向更好的眾包軟體測試過程