JavaScript語法基礎使用JS操作網頁（DOM）使用JS操作瀏覽器（BOM）

阿新 • • 發佈：2018-12-25

JavaScript

體驗JavaScript

<html >
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>體驗JavaScript語言</title>
	</head>
	<body>
		<h1>體驗JavaScript語言</h1>
		<script type="text/javascript">
			window.document.write("hello,world");
		</script>
	</body>
</html>

語法

引入方式與引入位置

向HTML頁面插入JavaScript的主要方法，就是使用<script元素>。
使用<script>元素的方式有兩種：直接在HTML頁面中嵌入JavaScript程式碼和包含外部的JavaScript檔案。

JS程式碼存放在標籤對<script>．．．</script>中。
使用script標籤的src屬性引入一個js檔案。（方便後期維護，擴充套件）

例：<script src=”test.js” type=”text/javascript”></script>
注：規範中script標籤中必須加入type屬性。

內部
在這裡插入圖片描述

外部
html檔案
在這裡插入圖片描述

<script>標籤的位置
關於<script>標籤的位置，<script>應該放在頁面的<head>元素中。

<html >
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>在HTML中使用JavaScript</title>
		<script type="text/javascript" >
			window.document.write("世界你好！！！");
		</script>
	</head>
	<body>
		<h1>將JavaScrip標籤放在head上</h1>
	</body>
</html>

注意：
1、頁面上可以有多個<script>標籤
2、 <script>標籤按順序執行
3、 <script>標籤可以出現在任意的頁面位置
4、<script>標籤一定要寫</script>關閉，而不能<script/>這樣關閉。否則沒有任何錯誤資訊，但是沒有執行結果。

常用函式

window.alert() 或寫為 alert() ：顯示一個提示框顯示內容。
window.document.write() ：在網頁的當前位置處寫內容。

變數

<script type="text/javascript" >
			//定義變數
			var color = "red";
			var num = 25;
			var visible = true;
</script>

同時，可以隨時改變變數所存資料的型別（儘量避免這樣做）。

<script type="text/javascript" >
			//定義變數
			var message = "hello";
			message = 100;
			alert(message);
</script>

該案例中變數message一開始儲存了一個字串值"hi" 然後又被一個數值100取代。這在ECMAScript是有效的，但是不建議這樣使用。
使用細節：
1、 var關鍵字在定義變數的時候可以省略不寫
2、變數名可以重複，後面的將覆蓋前面的變數
3、變數的型別取決於值的型別
一條語句定義多個變數。
中間使用豆號隔開即可，可初始化，也可以不初始化。

<script type="text/javascript" >
			var name = "jack", 
			age = 28, 
			gender = "男";
</script>

JavaScript程式碼塊及其程式碼塊變數作用域

<script type="text/javascript" >
			//程式碼塊 (Java)對程式碼進行封裝 隔離變數的作用域
			{
				var a = 100;
				document.write(a + "</br>");
			} {
				document.write(a + "</br>");
				//JavaScript不會隔離變數作用域
			}

		</script>

JavaScript函式基礎

函式主要用來封裝具體的功能程式碼。
函式是由這樣的方式進行宣告的：關鍵字 function、函式名、一組引數，以及置於括號中的待執行程式碼。

注意：函式的形參是不用宣告使用的。

函式的基本語法是這樣的：
function functionName(arg0, arg1, … argN) {
statements
}

例如：

function sayHi(sName, sMessage) {
  alert("Hello " + sName + sMessage);
}

呼叫函式？

函式可以通過其名字加上括號中的引數進行呼叫，如果有多個引數。

如果您想呼叫上例中的那個函式，可以使用如下的程式碼：

sayHi("David", " Nice to meet you!")

呼叫上面的函式 sayHi() 會生成一個警告視窗。

函式的返回值

沒有返回值型別，如果一個函式需要返回值直接使用return即可.
該函式只需要使用 return 運算子後跟要返回的值即可。

function sum(iNum1, iNum2) {
  return iNum1 + iNum2;
}

註釋：如果函式無明確的返回值，或呼叫了沒有引數的 return 語句，那麼它真正返回的值是 undefined。

函式格式
	Function 函式名(引數列表){
	程式碼;
	return 返回值; //return 不是必須的.
}
	示例:
		function foo() {
			alert("test");
		}
		function foo2( a ){
			alert(a);
			return; // 沒有返回值，表示方法執行完了，後面如果有程式碼就不會執行了
		}
		function foo3( a, b ){
			alert(a + b);
		}
		function foo4( a, b ){
			return a + b;
		}

注意事項:
1.不需要型別，只寫形參的名稱就可以了。
2宣告時不需要指定返回值型別；return可以有，也可以沒有。
3. javascript中的函式沒有過載的形式，後定義的函式會直接覆蓋前面的函式。
4. 一個函式可以接收任意個引數。

引數:
		JS的函式都是類似於Java中可變引數的。

在函式中可以直接使用arguments變數，arguments是一個數組，表示所有傳遞過來的引數。
在宣告函式時，定義的形參就對應arguments陣列中相應位置的引數值，寫形參只是用著方便一點。
引數示例
定義：

			function foo( a, b, c ){
				...
			}
		呼叫：	
			foo()
			foo( 1, 2 )
			foo( 1, 2, 3 )
			foo( 1, 3, 5, 7, 9 )
			foo( "aa", null, "cc" )
	沒有過載
		當同一個名稱的函式定義多次時，最終使用的是最後一個的定義。沒有過載！
		例：
			function sum(){ alert("11"); }
			function sum(a,b){ alert("22"); }*
			呼叫時寫sum(1,2)，結果還是顯示“22”。

總結：
特點：
1、使用function關鍵字定義函式。
2、沒有任何的返回值型別。
3、函式的定義優先執行，與順序無關。
4、可以通過函式名賦值函式，函式變數的型別是function物件。
5、引數列表不能有var關鍵字。
6、函式的引數列表在具體呼叫的時候實參個數可以和形參個數不同。
7、JavaScript函式天然的支援可變引數。
8、同名的函式最後宣告會覆蓋前面以宣告。Javascript中沒有函式過載。
案例:體驗JavaScript
定義一個輸入框輸入的月份，然後輸出本月對應的天數。

<html>
	<head>
		<title>學習JavaScript</title>
	</head>
	<body>
		月份：
		<input type="text" id="month">
		<input type="button" value="顯示天數" onclick="foo()">
		<!--
		31天：1,3,5,7,8,10,12
		30天：4,6,9,11
		28天：2
		-->
		<script type="text/javascript">
			function foo(){
				var monthValue = document.getElementById("month").value;
				// 如果是非數字，則不再繼續執行
				if( isNaN(monthValue) ){
					alert("請輸入正確的月份！");
					return;
				}
				// 轉為數字
				monthValue = parseInt(monthValue);
				// 判斷範圍
				if( monthValue < 1 || monthValue > 12){
					alert("請輸入正確的月份（1--12）！");
					return;
				}
				// 根據月份顯示天數
				switch(monthValue){ // 這時不會自動轉換型別，所以先轉型
					case 2:
						alert("28天");
						break;
					case 4:
					case 6:
					case 9:
					case 11:
						alert("30天");
						break;
					default:
						alert("31天");
						break;
				}
			}
		</script>
	</body>
</html>

自定義物件

無參建構函式

/*
 * 自定義物件
 *
 *  */
function Person() {
	window.document.write("constructor()<br>");
}

var person = new Person();
//定義屬性
person.name = "jack";
person.age = 23;
//定義方法
person.work = function() {
	window.document.write("person working...<br/>");
};
//獲取建構函式
window.document.write(person.constructor + "<br/>");

window.document.write(person.name + "," + person.age + "<br/>");
person.work();

有引數建構函式

function Person(name, age) {
	this.name = name;
	this.age = age;
	this.work = function() {
		alert(this.name + ":" + this.age);
	}
}

var person = new Person("jack", 28);
person.work();

BOM

BOM程式設計基礎

全稱 Browser Object Model，瀏覽器物件模型。
JavaScript是由瀏覽器中內建的javascript指令碼直譯器程式來執行javascript指令碼語言的。
為了便於對瀏覽器的操作，javascript封裝了對瀏覽器的各個物件使得開發者可以方便的操作瀏覽器。

window 物件

Window 物件是 JavaScript 層級中的頂層物件。
Window 物件代表一個瀏覽器視窗或一個框架。
Window物件會在或每次出現時被自動建立。

window中的方法

document	對 Document 物件的只讀引用 
location	用於視窗或框架的 Location 物件
history	對 History 物件的只讀引用。  
document.tilte	設定網頁的標題
moveto()  將視窗左上角的螢幕位置移動到指定的 x 和 y 位置。
moveby()    相對於目前的位置移動。
resizeTo()   調整當前瀏覽器的視窗。
open()		開啟新視窗顯示指定的URL（有的瀏覽器中是打一個新的選項卡）
setTimeout(vCode, iMilliSeconds)		超時後執行程式碼。
setInterval(vCode, iMilliSeconds)		定時執行程式碼，第一次也是先待，到時再執行。

事件

a) 事件說明

基本上所有的HTML元素中都可以指定事件屬性。
每個元素支援什麼樣事件應查詢文件。
所有的事件屬性都是以on開頭，後面的是事件的觸發方式，如：
	onclick，表示單擊
	onkeydown，表示鍵按下
	...

b) 常用的事件型別：

滑鼠點選相關：
	onclick 在使用者用滑鼠左鍵單擊物件時觸發。 
	ondblclick 當用戶雙擊物件時觸發。 
	onmousedown 當用戶用任何滑鼠按鈕單擊物件時觸發。 
	onmouseup 當用戶在滑鼠位於物件之上時釋放滑鼠按鈕時觸發。 

滑鼠移動相關：
	onmouseout  當用戶將滑鼠指標移出物件邊界時觸發。 
	onmousemove 當用戶將滑鼠劃過物件時觸發。 

焦點相關的：
	onblur 在物件失去輸入焦點時觸發。 
	onfocus 當物件獲得焦點時觸發。

其他：
	onchange 當物件或選中區的內容改變時觸發。 
	onload 在瀏覽器完成物件的裝載後立即觸發。 
	onsubmit 當表單將要被提交時觸發。

location 物件

Location 物件是由 JavaScript runtime engine 自動建立的，包含有關當前 URL 的資訊。
location中的重要方法：

href屬性	設定或獲取整個 URL 為字串。
reload()	重新裝入當前頁面

screen 物件

Screen 物件是由 JavaScript runtime engine 自動建立的，包含有關客戶機顯示螢幕的資訊。

屬性：

availHeight	獲取系統螢幕的工作區域高度，排除 Microsoft Windows 工作列。 	
availWidth	獲取系統螢幕的工作區域寬度，排除 Windows 工作列。 	
height		獲取螢幕的垂直解析度。 
width		獲取螢幕的水平解析度。

示例：

document.write("螢幕工作區: " + screen.availHeight + ", " + screen.availWidth + "<br>");
document.write("螢幕解析度: " + screen.height + ", " + screen.width + "<br>");

document物件

該物件代表整個文件頁面

物件的集合：

all     獲取頁面所有元素物件
forms   獲取頁面所有表單物件
images	獲取頁面所有圖片物件
links   獲取所有超連結或area物件

DOM

DOM簡介

全稱Document Object Model，即文件物件模型。
DOM描繪了一個層次化的樹，允許開發人員新增、刪除、修改頁面的某一部分。

    瀏覽器在解析HTML頁面標記的時候，其實不是按照一行一行讀取並解析的，
	而是將HTML頁面中的每一個標記按照順序在記憶體中組建一顆DOM樹，
	組建好之後，按照樹的結構將頁面顯示在瀏覽器的視窗中。

節點層次

在這裡插入圖片描述

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
// 獲取dom 樹, 獲取document 物件.
var dom = window.document;
// all 獲取頁面中所有的標籤節點 ,註釋和文件型別約束.
function testAll() {
	var allArr = dom.all;
	alert(allArr.length);
	for (var i = 0; i < allArr.length; i++) {
		//獲取節點名稱
		alert(allArr[i].nodeName);
	}
}
// anchors 獲取頁面中的所有的錨連線.
function testAnchors() {
	var anArr = dom.anchors;
	alert(anArr.length);
}
// froms  獲取所有的form 表單物件
function testForms() {
	var formArr = dom.forms;
	alert(formArr.length);
	alert(formArr[0].nodeName);
}
// images
function testImages() {
	var imageArr = dom.images;
	alert(imageArr.length);
}
// links  獲取頁面的超連結.
function testLinks() {
	var linkArr = dom.links;
	//alert(linkArr.length);
	for (var i = 0; i < linkArr.length; i++) {
		//alert(linkArr[i].nodeName);
	}
	for (var i in linkArr) {
		alert(i);
	}
}
//testLinks();
// 獲取頁面的Body
var body = dom.body;
alert(body.nodeName);
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript</title>
</head>
<body onmousemove="test(this)">
	<img src="xxx" alt="這是一個美女"/>
		<img src="xxx" alt="這是一個美女"/>
		<img src="xxx" alt="這是一個美女"/>
		<a href="http://www.baidu.com">百度一下</a>
		<a href="http://www.google.com">百度兩下</a>
		<a href="http://www.baigu.com">百穀一下</a>
		<a name="one"></a>
		<a name="two"></a>
		<form>
			<label>姓名:</label><!--預設不寫type 就是文字輸入框-->
			<input  type="text"/>
		</form>
</body>
</html>

獲取節點物件案例

document.getElementById(“html元素的id”)
document.getElementsByTagName(“標籤名”)
document.getElementsByName(“html元素的name”)

示例：
1，得到所有的div元素並顯示資訊（innerHTML）。
2，得到所有div元素中id為"test"的結果。

Var dom = window.document;
function testByTagName() {
	var iptArr = dom.getElementsByTagName("input");
	for (var i = 0; i < iptArr.length; i++) {
		alert(iptArr[i].value);
	}
}
// window 物件提供了一個事件, onload 事件 onload(頁面載入完畢執行該程式碼) 是一個事件, 給事件一個方法,
//window.onload = testByTagName;
//2，得到所有標籤id為"username"的結果。獲取舊value值並設定value值
function testById() {
	var user = dom.getElementById("username");
	alert(user.value);
	user.value = "rose";
}
//testById();
//3. 獲取所有標籤name 為like的元素.獲取value值.
function testByName() {
	var likeArr = dom.getElementsByName("like");
	for (var i = 0; i < likeArr.length; i++) {
		alert(likeArr[i].value);
	}
}
testByName();

屬性操作練習
1，寫一個form，其中有多個checkbox。
2，獲取所有選中的數量。
3，實現全選與全不選的效果。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>

<script type="text/javascript">
function getSum()
{
	/*
	需求：通過點選總金額按鈕獲取被選中的條目的金額的總和，並將總金額顯示在按鈕右邊。
	思路：
	1，先獲取所有的checkbox物件。
	2，對這些物件進行遍歷。判斷哪個物件被選中。
	3，對被選中物件的金額進行累加。
	4，顯示在按鈕右邊。
	*/
	
	var items = document.getElementsByName("item");
	var sum = 0;
	for(var x=0; x<items.length; x++)
	{
		if(items[x].checked)
		{
			sum += parseInt(items[x].value);
		}
	}
	var str = sum+"元";
	document.getElementById("sumid").innerHTML = str.fontcolor('red');
}

function checkAll(node)
{
	/*
	需求：通過全選checkbox，將其他條目都選中。
	思路：
	只要將全選checkbox的checked狀態賦值給其他的item checked狀態即可。
	
	
	*/
	//var allNode = document.getElementsByName("all")[index];
	
	var items = document.getElementsByName("item");
	for(var x=0; x<items.length; x++)
	{
		items[x].checked = node.checked;
	}
}
</script>
</head>

<body>


<div>商品列表</div>
<input type="checkbox" name="all" onclick="checkAll(this)"  /> 全選<br />
<input type="checkbox" name="item" value="3000" />膝上型電腦3000元<br />
<input type="checkbox" name="item" value="3000"  />膝上型電腦3000元<br />
<input type="checkbox" name="item" value="3000"  />膝上型電腦3000元<br />
<input type="checkbox" name="item" value="3000"  />膝上型電腦3000元<br />
<input type="checkbox" name="item" value="3000"  />膝上型電腦3000元<br />
<input type="checkbox" name="item" value="3000"  />膝上型電腦3000元<br />
<input type="checkbox" name="all" onclick="checkAll(this)"  /> 全選<br />
<input type="button" value="總金額：" onclick="getSum()" /><span id="sumid"></span>


</body>
</html>

通過節點關係查詢節點

從一個節點出發開始查詢：
parentNode 獲取當前元素的父節點。
childNodes 獲取當前元素的所有下一級子元素。
firstChild 獲取當前節點的第一個子節點。
lastChild 獲取當前節點的最後一個子節點。
nextSibling 獲取當前節點的下一個節點。（兄節點）
previousSibling 獲取當前節點的上一個節點。（弟節點）

示例1：
	firstChild屬性最普遍的用法是訪問某個元素的文字：
	var text=x.firstChild.nodeValue; 
	
示例2：	
	parentNode 屬性常被用來改變文件的結構。
	假設您希望從文件中刪除帶有 id 為 "maindiv" 的節點：
	var x=document.getElementById("maindiv");
	x.parentNode.removeChild(x);

獲取節點物件的資訊

每個節點都包含的資訊的，這些屬性是：
nodeType 節點型別
nodeName 節點名稱
nodeValue 節點值

nodeType
nodeType 屬性可返回節點的型別。	
	---------------------------------
	元素型別 節點型別 
	------------------
	  元素		1		就是標籤元素，例<div>..</div>
	  文字		3		標籤元素中的文字
	  註釋		8       表示為註釋

nodeName
	nodeName 屬性含有某個節點的名稱。
	--------------------------------
	元素節點的 nodeName 是標籤名稱 
	屬性節點的 nodeName 是屬性名稱 
	文字節點的 nodeName 永遠是 #text 
	文件節點的 nodeName 永遠是 #document 

nodeValue
	對於文字節點，nodeValue 屬性是所包含的文字。
	對於屬性節點，nodeValue 屬性是屬性值。
	對於註釋節點，nodeValue 屬性註釋內容。
	nodeValue 屬性對於文件節點和元素節點是不可用的。

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
//節點和節點之間的關係.
//獲取dom樹
var dom = window.document;
//獲取指定id 的標籤節點.
function test() {
	var form = dom.getElementById("form1");
	//獲取父節點.
	//alert(form.parentNode.nodeName);
	// 獲取子節點(Node 包含 文字,註釋,標籤)
	var childArr = form.childNodes;
	//alert(childArr.length);
	/*
	for (var i = 0; i < childArr.length; i++) {
	alert(childArr[i]);
	}
	*/
	// 獲取第一個孩子.
	var first = form.firstChild;
	//alert(first);
	//最後一個孩子.
	var last = form.lastChild;
	//alert(last);
	// 獲取下兄弟(獲取弟弟)
	var sibling = form.nextSibling;
	//alert(sibling.nodeName);
	// 獲取大哥
	var previous = form.previousSibling;
	alert(previous.nodeName);
}
test();
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>javascript</title>
</head>
<body onmousemove="test(this)">
		<a>哈哈</a>
		<form id="form1">
			<label>姓名:</label>
			<input type="text" />
		</form>
</body>
</html>

節點操作

document.createElement(“標籤名”) 建立新元素節點
elt.setAttribute(“屬性名”, “屬性值”) 設定屬性
elt.appendChild(e) 新增元素到elt中最後的位置
elt.insertBefore(new, child); 新增到elt中，child之前。 // 引數1：要插入的節點引數 2：插入目標元素的位置
elt.removeChild(eChild) 刪除指定的子節點

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
/*
建立節點：
document.createElement("標籤名")		建立新元素節點
elt.setAttribute("屬性名", "屬性值")	設定屬性
新增節點到文件樹上:
elt.appendChild(e)						新增元素到elt中最後的位置  把元素新增最後一個子節點的後面。
elt.insertBefore(new, child);			新增到elt中，child之前。
								// 引數1：要插入的節點  引數2：插入目標元素的位置	 
														
*/
/*
function add(){
	//
	var inputNode = document.createElement("input"); // 建立一個節點的物件
	inputNode.setAttribute("type","file"); //給新節點設定type的屬性值。
	var body = document.getElementsByTagName("body")[0];
	body.appendChild(inputNode);	//把新節點新增到body體中。
}
*/
var count = 1;
function add(){
	var trNode  = document.createElement("tr");
	var tdNode  = document.createElement("td");
	var inputNode  = document.createElement("input");
	inputNode.setAttribute("type","button");
	inputNode.setAttribute("value",count+"");
	count++;
	tdNode.appendChild(inputNode);
	trNode.appendChild(tdNode);
	//trNode新增 到指定 的位置上。
	var tbodyNode = document.getElementsByTagName("tbody")[0];
	//tableNode.appendChild(trNode);
	var button1 = document.getElementById("b1");
	tbodyNode.insertBefore(trNode,button1); // 注意： 使用obj.insertBefore(o1,o2)這個方法的時候
	//obj必須是o1,o2的直接父節點。
	//alert(button1.nodeName+"~~"+trNode.nodeName+"~~"+tableNode.nodeName);
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
</head>
<body>
	<table>
    	<tr>
        	<td>
            	<input type="button" value="0">
            </td>
        </tr>
        <tr id="b1">
        	<td>
            	<input type="button" value="新增" onclick="add()">
            </td>
        </tr>
    </table>

JavaScript語法基礎 使用JS操作網頁（DOM） 使用JS操作瀏覽器（BOM）