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

一，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標籤,腳本代碼能夠在文檔任何地方書寫，若是是普通寫入（不涉及事件），
區分代碼的書寫位置插入

2、基礎語法

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. 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，相等與全等

 

1. • 相等：不考慮數據類型，只作值的比較(包含自動類型轉換)

   • 全等：不會進行數據類型轉換，要求數據類型一致而且值相等才判斷全等

5.6邏輯運算符：

1. && 邏輯與 ：表達式同時成立，最終結果才爲true；1則1

2. || 邏輯或 ：表達式中只要有一個成立，最終結果即爲true；有1則1

3. ! 邏輯非 ：對已有表達式的結果取反 注意：除零值之外，全部值都爲真

5.7三目運算符：

語法 :

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

過程 :

判斷表達式1是否成立，返回布爾值；

若是表達式1成立，執行表達式2；

若是表達式1不成立，執行表達式3；

 

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 (){
​
};