JavaScript的基礎語法及DOM元素和事件

YJ同心發表於2020-05-25

一,JavaScript是什麼?

1,JavaScript簡稱:js,是一種瀏覽器解釋型語言,巢狀在HTML檔案中交給瀏覽器解釋執行。主要用來實現網頁的動態效果,使用者互動及前後端的資料傳輸等。

2,JavaScript 組成

1,核心語法 - ECMAScript (ES5-ES6) 規範了JavaScript的基本語法

 

2.1 瀏覽器物件模型 :-BOM Browser Object Model,提供了一系列操作瀏覽器的方法

 

2.2 文件物件模型: -DOM Document Object Model ,提供了一系列操作的文件的方法

3. 使用方式

 

3.1元素繫結事件

 

 

  • 事件 :指使用者的行為(單擊,雙擊等)或元素的狀態(輸入框的焦點狀態等)

 

  • 事件處理:元素監聽某種事件並在事件發生後自動執行事件處理函式
  • 常用事件:onclick (單擊事件)
  • 語法 :將事件名稱以標籤屬性的方式繫結到元素上,自定義事件處理
<!--實現點選按鈕在控制檯輸出-->
<button onclick="console.log('Hello World');">點選</button>

3.2文件內嵌:使用<script type="text/javascript"></script>標籤書寫。

<script type="text/javascript">
  alert("網頁警告框");
</script>

注意 :<script></script>標籤可以書寫在文件的任意位置,書寫多次,一旦載入到script標籤就會立即執行內部的JavaScript程式碼,因此不同的位置會影響程式碼最終的執行效果

3.3外部連結:建立外部的JavaScript檔案 XX.JavaScript,在HTML文件中使用<script src=""></script>引入

<script src="index.JavaScript"></script>

注意 :<script></script>既可以實現內嵌 JavaScript 程式碼,也可以實現引入外部的 JavaScript 檔案,但是隻能二選一。

3.44 JavaScript 輸入和輸出語句:

 

alert("");普通的網頁彈框

console.log();控制檯輸出,多用於程式碼除錯

document.write("<h1>Hello</h1>");實現在動態在網頁中寫入內容,
可以識別HTML標籤,指令碼程式碼可以在文件任何地方書寫,如果是普通寫入(不涉及事件),
區分程式碼的書寫位置插入

二、基礎語法

1.,語法規範:

  1. JavaScript是由語句組成,語句由關鍵字,變數,常量,運算子,方法組成。

  2. 分號可以作為語句結束的標誌,也可以省略

  3. JavaScript嚴格區分大小寫

  4. 註釋語法 單行註釋使用 // 多行註釋使用 /* */

2. JavaScript的變數與常量:

1,變數:

 

 

1.1作用 : 用於儲存程式執行過程中可動態修改的資料

 

1.2語法 : 使用關鍵var宣告,自定義變數名

var a;      //變數宣告
a = 100;    //變數賦值
var b = 200; //宣告並賦值
var m,n,k;  //同時宣告多個變數
var j = 10,c = 20; //同時宣告並賦值多個變數

 

1.3 命名規範 :

 

    1. 變數名,常量名,函式名,方法名自定義,可以由數字,字母,下劃線,$組成,禁止以數字開頭

    2. 禁止與關鍵字衝突(var const function if else for while do break case switch return class)

    3. 變數名嚴格區分大小寫

    4. 變數名儘量見名知意,多個單片語成採用小駝峰,例如:"userName"

 

1.4使用注意 :

 

 

變數如果省略var關鍵字,並且未賦值,直接訪問會報錯

 

2,變數使用var關鍵字宣告但未賦值,變數初始值為undefined

3,變數省略var關鍵字宣告,已被賦值,可正常使用,影響變數作用域

2,常量

 

2.1 作用 : 儲存一經定義就無法修改的資料

 

2.2 語法 : 必須宣告的同時賦值

const PI = 3.14;

 

 

2.3 注意 :

 

 

 

常量一經定義,不能修改,強制修改會報錯

 

 

命名規範同變數,為了區分變數,常量名採用全大寫字母

 

 

2.4操作小數位:

 

toFixed(n); 保留小數點後 n 位,並且四捨五入。

使用 :

var num = 3.1415926;
//保留當前變數小數點後兩位
var res = num.toFixed(2);

3. 資料型別

 

3.1number 數值型別:

整數

 

 

 

十進位制表示

 

   var a = 100;

 

八進位制表示 以0為字首

 

   var b = 021; //結果為十進位制的 17

使用 : 整數可以採用不同進製表示,在控制檯輸出時一律會按照十進位制輸出

 

小數:

 var m = 1.2345;

 

科學計數法 例 : 1.5e3 e表示10為底,e後面的數值表示10的次方數 1.5e3 等價於 1.5 * 10(3)

 

 

3.2string 字串型別:

字串:由一個或多個字元組成,使用""或''表示,每一位字元都有對應的Unicode編碼

var s = "100";
var s1 = "張三";

 

 

3.3boolean 布林型別:

只有真和假兩個值,布林值與number值可以互相轉換。true 為 1,false 為 0

var isSave = true;
var isChecked = false;

 

 

3.4undefined 特殊值

變數宣告未賦值時顯示undefined

var a;
console.log(a);//undefined

 

 

3.5null 空型別 :

定義物件引用時使用null,表示物件為空

  • 引用資料型別 主要指物件,函式等
  • 檢測資料型別 ​ typeof 變數或表示式 ​ typeof (變數或表示式)

 

var n = "asda";
console.log(typeof n);//string
console.log(typeof(n));//string

4. 資料型別轉換

不同型別的資料參與運算時,需要轉換型別

4.1強制型別轉換

 

1,轉換字串型別 方法:toString() 返回轉換後的字串

 

 var a = 100;
 a = a.toString(); //"100"
 var b = true;
 b = b.toString(); //"true"

 

2,轉換number型別

 

 

Number(param) 引數為要進行資料型別轉換的變數或值,返回轉換後的結果: 如果轉換成功,返回number值 如果轉換失敗,返回NaN,(Not a Number),是非number字元,一律轉換失敗,返回 NaN

 

4.2隱式型別轉換(自動轉換)

  1. 當字串與其他資料型別進行"+"運算時,表示字串的拼接,不再是數學運算 轉換規則 :將非字串型別的資料轉換成字串之後進行拼接,最終結果為字串

  2. 其他情況下,一律將運算元轉number進行數學運算

5. 運算子

5.1賦值運算子:

= 將右邊的值賦給左邊變數

5.2算數運算子:

+ - * / % 加 減 乘 除 取餘

5.3符合運算子:

+= -= *= /= %=  

5.4 自增或自減運算子:

++ -- 變數的自增和自減指的是在自身基礎上進行 +1或-1 的操作

注意:自增或自減運算子在單獨與變數結合時,放前和放後沒有區別,如果自增或自減運算子與其他運算子結合使用,要區分字首和字尾,做字首,那就先++/--,再進行賦值或其他運算,如果做字尾,就先結合其他運算子,再進行++ / --

5.5關係運算子/比較運算子:

> < 
>= <=
==(相等) !=(相等)
===(全等) !==(不全等)

 

1,關係運算子用來判斷表示式之間的關係,結果永遠是布林值 true/false

 

 

2,使用

 

 

  • 字串與字串之間的比較 依次比較每位字元的Unicode碼,只要某位字元比較出結果,就返回最終結果

  • str.charCodeAt(index)

    方法可返回指定位置的字元的 Unicode 編碼。這個返回值是 0 - 65535 之間的整數

    index必需。表示字串中某個位置的數字,即字元在字串中的下標。

 

 

3,相等與全等

 

    • 相等:不考慮資料型別,只做值的比較(包含自動型別轉換)

    • 全等:不會進行資料型別轉換,要求資料型別一致並且值相等才判斷全等

5.6邏輯運算子

  1. && 邏輯與 :表示式同時成立,最終結果才為true;1則1

  2. || 邏輯或 :表示式中只要有一個成立,最終結果即為true;有1則1

  3. ! 邏輯非 :對已有表示式的結果取反 注意:除零值以外,所有值都為真

5.7三目運算子:

語法 :

表示式1 ? 表示式2 : 表示式3;

過程 :

判斷表示式1是否成立,返回布林值;

如果表示式1成立,執行表示式2;

如果表示式1不成立,執行表示式3;

 

三、DOM 元素和事件

什麼是事件?:事件是指使用者的行為或元素的狀態。由指定元素監聽相關的事件,並且繫結事件處理函式。

事件處理函式:元素監聽事件,並在事件發生時自動執行的操作。

1,事件函式分類

1.1 滑鼠事件

onclick //單擊
ondblclick //雙擊
onmouseover //滑鼠移入
onmouseout //滑鼠移出
onmousemove //滑鼠移動

 

1.2文件或元素載入完畢

 

onload //元素或文件載入完畢

 

1.3表單控制元件狀態監聽

 

onfocus //文字框獲取焦點
onblur //文字框失去焦點
oninput //實時監聽輸入
onchange //兩次輸入內容發生變化時觸發,或元素狀態改變時觸發
onsubmit //form元素監聽,點選提交按鈕後觸發,通過返回值控制資料是否可以傳送給伺服器

2,獲取元素節點

2.1根據標籤名獲取元素節點列表

var elems = document.getElementsByTagName("");
/*
引數 : 標籤名
返回值 : 節點列表,需要從節點列表中獲取具體的元素節點物件,新增相應下標。
*/

2.2根據 class 屬性值獲取元素節點列表

var elems = document.getElementsByClassName("");
/*
引數 : 類名(class屬性值)
返回值 : 節點列表
*/

2.3根據 id 屬性值取元素節點

var elem = document.getElementById("");
/*
引數 : id屬性值
返回值 : 元素節點
*/

2.4根據 name 屬性值取元素列表

var elems = document.getElementsByName("");
/*
引數 : name屬性值
返回 : 節點列表
*/

3,事件繫結方式

3.1內聯方式: 將事件名稱作為標籤屬性繫結到元素上

例 :

<button onclick="alert()">點選</button>

3.2動態繫結 :獲取元素節點,動態新增事件

例 :

btn.onclick = function (){
​
};

相關文章