JavaScript基礎筆記

李李要早睡發表於2020-09-26
JavaScript筆記

JavaScript語言特點：

1、互動性；2、安全性；3、跨平臺性

它是一種弱型別的語言，與Java不同，Java是強型別。

JavaScript和HTML程式碼的結合方式

1、在head標籤或者body標籤中，使用script標籤來書寫JavaScript程式碼；

<!DOCTYPE html> 
<html lang="en">
<head>       
	<meta charset="UTF-8">          
	<title>Title</title> 
		<script type="text/javascript">              
 		// alert 是 JavaScript 語 言 提 供 的 一 個 警 告 框 函 數         
		 // 它 可 以 接 收 任 意 類 型 的 參 數 ， 這 個 參 數 就 是 警 告 框 的 提 示 信 息 
 			alert("hello!")               
		</script>
</head>
<body>               

</body> 
</html>

2、使用script標籤引入單獨的JavaScript程式碼檔案；

<!DOCTYPE html>   
<html lang="en">    
<head>     
	<meta charset="UTF-8">       
	<title>Title</title> 
	<!--使用 script 引入外部的 js 檔案來執行 src 屬性專門用來引入 js 檔案路徑
	--> 
	<script type="text/javascript" src="1.js"></script> 
	<script type="text/javascript"> 
		alert("hello"); 
	</script> 
</head> 
<body> 

</body> 
</html>

變數

變數就是可以存放某些值的記憶體的命名

JavaScript的變數型別：
數值型別： number
字串型別： string
物件型別： object
布林型別： boolean
函式型別： function

JavaScript裡特殊的值：
undefined ------------- 未定義，所有的js變數未賦予初始值，預設都是undefined
null ------------- 空值
NaN ------------- 全稱是Not a Number 。非數字非數值

JS中的定義變數格式：
var 變數名；
var 變數名=值；

關係（比較）運算

等於： ==
全等於： ===
等於是簡單的字面值的比較；全等於除了做字面值的比較之外，還會比較兩個變數的資料型別。

<!DOCTYPE html>   
<html lang="en">     
<head>     
	<meta charset="UTF-8">       
	<title>Title</title> 
	<script type="text/javascript"> 
		var a = "2"; 
		var b = 2; 
		alert( a == b ); // 顯示為true 
		alert( a === b ); // 顯示為false 
	</script> 
</head> 
<body> 
</body> 
</html>

邏輯運算

且運算： &&
或運算： ||
取反運算： ！
在JavaScript語言中，所有的變數，都可以作為一個boolean型別的變數去使用。

0、null、undefined、”“（空串）都認為是false

&& 且運算
第一種：當表示式全為真的時候。返回最後一個表示式的值。
第二種：當表示式中，有一個為假的時候。返回第一個為假的表示式的值

|| 或運算
第一種情況：當表示式全為假時，返回最後一個表示式的值
第二種情況：只要有一個表示式為真。就會把回第一個為真的表示式的值

並且 && 與運算 和 ||或運算 有短路。
短路就是說，當這個&&或||運算有結果了之後 。後面的表示式不再執行

陣列

JS陣列的定義方式：
var 陣列名 = []；//空陣列
var 陣列名 = [1,‘abc’,true];//定義陣列同時賦值元素

<!DOCTYPE html> 
<html lang="en"> 
<head> 
	<meta charset="UTF-8"> 
	<title>Title</title> 
	<script type="text/javascript">       
		var arr = [true,1]; //定 義 一 個 空 數 組 
		arr[0] = 12; 
		alert( arr[0] );//輸出為12
		// javaScript語 言 中 的 數 組 ， 只 要 我 們 通 過 數 組 下 		標 賦 值 ， 那 麼 最 大 的 下 標 值 ， 就 會 自 動 的 給 數 組 做 擴 容 操 作 。 
 		arr[2] = "abc"; 
		alert(arr.length); //輸出為3
		
 	// undefined // 數 組 的 遍 歷 
		for (var i = 0; i < arr.length; i++){ 
			alert(arr[i]); 
		} 
	</script> 
</head> 
<body>       
</body> 
</html>

函式

函式的兩種定義方式：

1、可以使用function關鍵字來定義函式
function 函式名(形參列表){
函式體
}

在JavaScript語言中，定義帶有返回值的函式，只需要在函式體內直接使用return語句返回即可

2、
var 函式名 = function（形參列表）{函式體}

在JS中函式的過載會直接覆蓋掉上一次的定義

函式的arguments 隱形引數（只在function函式內）
什麼叫做隱形引數：就是在函式中不需要定義，但卻可以直接用來或取所有引數的變數，叫做隱形引數。
隱形引數和Java的可變長引數很像，操作類似陣列。

JS中的自定義物件

object形式的自定義物件

物件的定義：
var 變數名 = new Object（）；//物件例項（空物件）
變數名.屬性名 = 值； //定義一個屬性
變數名.函式名 = function（）{} //定義一個函式
物件的訪問：
變數名.屬性/函式名（）；

{}形式的自定義物件

物件的定義：
var 變數名 = { //空物件
屬性名 ： 值， //定義一個屬性
屬性名 ： 值， //定義一個屬性
函式名 ：function（）{} //定義一個函式
}；
物件的訪問：
變數名.屬性/函式名（）；

JS 中的事件

什麼是事件：事件就是電腦輸入裝置與頁面進行互動的相應。

常用的事件：
onload 載入完成事件： 頁面載入完之後，常用於做頁面JS程式碼初始化操作
onclick 單擊事件： 常用於按鈕的點選響應操作
onblur 失去焦點事件： 常用於輸入框失去焦點後驗證其輸入內容是否合法
onchange 內容發生改變事件： 常用於下拉選單和輸入框內容發生改變後操作
onsubmit 表單提交事件： 常用於表單提交前，驗證表單項是否合法

事件的註冊
告訴瀏覽器，當事件響應後要執行哪些操作，叫事件的註冊或事件的繫結。

1、靜態註冊事件：通過HTML標籤的事件屬性直接賦於事件響應後的程式碼，這種方式叫靜態註冊。

2、動態註冊事件：是指通過JS程式碼得到標籤的dom物件，然後再通過dom物件.事件名 = function（）{} 這種形式賦於事件響應後的程式碼，叫動態註冊。
動態註冊基本步驟：
1、獲取標籤物件
2、標籤物件.事件名 = function（）{}

dom模型

dom 全稱是Document Object Model 文件物件模型

1、document 它管理了所有的HTML文件內容
2、document 它是一種樹結構的文件。有層級關係
3、它讓我們把所有的標籤都物件化
4、我們可以通過document訪問所有的標籤物件

document物件中的方法介紹

document.getElementById(elementId)
通過標籤的 id 屬性查詢標籤 dom 物件，elementId 是標籤的 id 屬性值

document.getElementsByName(elementName)
通過標籤的 name 屬性查詢標籤 dom 物件，elementName 標籤的 name 屬性值

document.getElementsByTagName(tagname)
通過標籤名查詢標籤 dom 物件。tagname 是標籤名

document.createElement( tagName)
通過給定的標籤名，建立一個標籤物件。tagName 是要建立的標籤名

document物件的三個查詢方法，如果有id屬性，優先使用getElementById方法來進行查詢，如果沒有id屬性，則優先使用getElementsByName方法，如果id和name屬性都沒有，最後再按標籤名查getElementsByTagNam
以上三種方法，一定要在頁面載入完之後執行，才能查詢到標籤物件。

節點的常用屬性和方法

節點就是標籤物件

方法：通過具體的元素節點呼叫
getElementsByTagName() 方法，獲取當前節點的指定標籤名孩子節點
appendChild(oChildNode) 方法，可以新增一個子節點，oChildNode 是要新增的孩子節點

屬性：
childNodes 屬性，獲取當前節點的所有子節點
firstChild 屬性，獲取當前節點的第一個子節點
lastChild 屬性，獲取當前節點的最後一個子節點
parentNode 屬性，獲取當前節點的父節點
nextSibling 屬性，獲取當前節點的下一個節點
previousSibling 屬性，獲取當前節點的上一個節點
className 用於獲取或設定標籤的 class 屬性值
innerHTML 屬性，表示獲取/設定起始標籤和結束標籤中的內容
innerText 屬性，表示獲取/設定起始標籤和結束標籤中的文字

相關文章