分類：JavaScript精選14堂

JavaScript 精選14堂課(五)

文件物件模型DOM
DOM是一個階層的樹狀結構，就像目錄關係一樣，一個根目錄下會有子目錄，子目錄下還包括另一個子目錄，每一個物件都稱為一個節點。
舉例來說，瀏覽器最上層的節點是window，也就是根結點root，接下來是HTML文本文件本身doucument，而HTML文件的組成是HTML標記，<html>文件標記的下一層是<body>標記，因此<body>標記就是<html>標記的子節點，當我們在JavaScript語法裡要參考<body>標籤，就可以表示：
    window.document.body

範例：取得網頁元件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>取得元件</title>
	<style>
	*{
		font-size:20px;
		font-family: Microsoft JhengHei;
	}
	</style>
	<script>
	function chgBorder(){
		document.getElementById('myImg').border="5";
		document.getElementById('myImg').style.borderStyle="double";

	}
	function chgColor(){
		document.getElementsByTagName('p')[0].style.cssText = "color:blue;font-size:25px;";
	}
	</script>
</head>
<body>
	<p>您好</p>
	<p>很高興認識您！</p>
	<!--圖片-->
	<img id="myImg" src="17.jpg" boder="0" width="200">
	<br>
	<!--按鈕-->
	<input type = "button" onclick="chgBorder()" value ="圖片加框線">
	<input type = "button" onclick="chgColor()" value ="改變字體顏色">

	
</body>
</html>
按我
範例中使用了document.getElementById('myImg')表示取得id名稱為myImg的原件，也就是<img>物件；document.getElementsByTagName('p')[1]表示取得標記為<p>的物件，其中[1]是索引值，從0開始，因此[1]表示取得第2個<p>物件。
修改物件CSS的樣式必須透過HTMLElement.style屬性，它會傳回CSSStyleDeclration物件，使用方式如下:

範例：處理物件節點

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>NodeList</title>
	<style>
	*{
		font-size:20px;
		font-family: Microsoft JhengHei;
	}
	div{
		color:red;
		border:1px solid red;
		width:500px;
		padding:10px;
		text-align:center
	}
	</style>
	<script>
	function check(){
		let result = document.getElementById("result");
		let d1 = document.getElementById("div1");
		
		result.value = "第一個子節點(firstChild)的nodeValue = "+
		d1.firstChild.nodeValue +"\n";

		result.value +="第一個子節點(childNodes)的nodeValue= "+
		d1.childNodes.item(0).nodeValue+"\n";

		result.value +="最後一個子節點(lastChild)的nodeType ="+
		d1.lastChild.nodeType+"\n";

		result.value +="div1 物件下一個的節點(nextSibling) = "+
		d1.firstChild.nextSibling.getAttribute("id")+"\n";

		result.value +="a1的父節點(parentNode) = "+document.getElementById
		("a1").parentNode.getAttribute("id");
	}
	</script>
</head>
<body>
	
	<input type = "button" onclick="check()" value ="檢查節點關係"><br>
	<textarea cols="50" rows="9" id="result"></textarea>
	<div id="div1"> Coffee
	<a href="#" id="a1">這是a1</a>
	<a href="#" id="a2">這是a2</a>
	<a href="#" id="a3">這是a3</a>
	</div>
</body>
</html>
按我
DOM物件模型可以將HMTL文件視為樹狀結構，利用下表屬性，就可以走訪和處理樹狀結構中的節點。
屬性說明
firstChild第一個子節點
parentNode走訪母節點
childNodes走訪子節點
previousSibling走訪上一個節點
nextSibling走訪下一個節點
走訪節點時，可以取得節點的名稱、內容及物件的種類，如下表所示：
屬性說明
nodeName名稱
nodeValue內容
nodeType種類
nodeType為取得物件種類，1表示元素節點、3表示文字節點。

JavaScript 精選14堂課(四)

自訂函式

使用函式Function有下列優點：
1.可重複叫用，簡化程式流程。
2.程式除錯容易。
3.便於分工合作完成函式。

格式：
function 函式名稱 ()
{
    程式敘述;
    return 回傳值
}

函式宣告式(Function Declaration)

<script type="text/javascript">
	
	myfunc(10, 20);     //呼叫放在函式前
	function myfunc(a, b){
		console.log('a='+a+',b='+b);
	}
	myfunc(100,200);    //呼叫放在函式後
</script>

呼叫函式方法不管放在函式定義之前或之後都可以，很方便就能夠重複使用。

函式表達式Function Expressions

格式：
var 變數 = function [函式名稱](參數1,參數2,...,參數n){
     程式敘述;
     return 回傳值;
};
<script type="text/javascript">
	
	function checkflag(flag){
		if(flag) {
			var myfunc = function(a,b){
				return a + "+" + b +"=" + (a+b);
			};
		}else{
			var myfunc = function(a,b){
				return a + "*" + b + "=" + (a*b);
			};
		}
		console.log(myfunc(10,20));
	}

	checkflag(true);
	checkflag(false);
 </script>
以下函式為本身呼叫自己的模式稱為「遞迴呼叫」Recursive Calls。使用遞迴函式可以讓程式碼變得簡潔，正確使用有助於提升執行效率，但是使用時要特別注意遞迴的結束條件，否則會造成無窮迴圈。
<script type="text/javascript">
	
	var myfunc = function factorial(n){
		let x = (n ==1 ? n : n * factorial(n-1));
		console.log(n + ">" + x)
		return x;
	};

	console.log("5!=" + myfunc(5));
</script>

箭頭函式  Arrow function 一種函式精簡的寫法

格式：
(參數) => {
   程式敘述;
   return value;
}
var myFunc = function(a,b){
    return a+b;
}
console.log(myFunc(10,20));

改為用箭頭函式就直接以箭頭來代替function

var myFunc = (a,b) =>{
    return a+b;
}
console.log(myFunc(10,20));
物件、方法與屬性
我們想要製作一個名稱為cat的物件，並且給兩個屬性名稱：Name;Age，以及一個run方法。
建立完成之後，只要用new關鍵字就能產生物件實體。例如實作一隻名為kitty的5歲貓。
var kitty = new cat("kitty", 5);
kitty物件實作完成了，我們就可以使用點(.)來呼叫物件的屬性attribute與方 法method，由於方法是函式，所以要加括號來呼叫。
console.log(kitty.Name+"是一隻"+ kitty.Age+"歲的貓");
kitty.run();

kitty.htm 完整程式碼

<script type="text/javascript">
	
	var cat = function (catName, catAge){
		this.Name = catName;
		this.Age = catAge;
		this.run = function(){
			console.log(this.Name, "跑走了!");
		};
	};

	var kitty = new cat("kitty",5);

	console.log(kitty.Name+"是一隻"+ kitty.Age+"歲的貓");
	kitty.run();
 </script>
原型鏈prototype chain 與擴充 extneds
student 繼承 person 主要使用兩個方法，一個是call()方法，一個是Object.create()方法，我們來看看這兩個方法如何使用。
call()語法如下：
otherObj.call(thisObj[, arg1,arg2,...]);

JavaScript 精選14堂課(三)

JavaScript 的內建物件，可分為四大類：
1. 日期(Date)
2. 數學(Math)
3. 字串(String)
4. 陣列(Array)
Date 日期物件
<script type="text/javascript">
	var theDate = new Date();
	var nowDT = theDate.getFullYear() + "/" +
				(theDate.getMonth() +1 )+ "/" +
				theDate.getDate() +"/" +
				theDate.getHours() +":"+
				theDate.getMinutes() + ":" +
				theDate.getSeconds();
	console.log("現在日期時間:"+nowDT);
    </script>

結果：

Tips：
setMonth()與getMonth()的數值是從0開始，0代表一月，11代表十二月，所以使用這兩個方法時都必須再加1，才是正確的月份值。
字串物件(string)
屬性
字串物件可搭配的屬性有length，作用是取字串的長度。
var name = "good job!";
len = name.length;     //len的值為9

   方法

方法說明格式
toString 
將數值或物件轉換為字串
number[object].toString()
charAt()傳回指定位置index的
字元index從0開始		String.charAt(index)
charCodeAt()傳回指定位置index的Unicode編
碼，數值為0到65535之間的整
數。index從0開始		String.charCodeAt(index)
includes()搜尋字串，傳回布林值true或
flase區分大小寫		String.includes(searchString)
indexOf()搜尋字串，回傳搜尋字串第一
次相符的位置索引值，1表示
找不到。		String.indexOf(searchString)
lastIndexOf()搜尋字串，回傳搜尋字串最後
相符的位置索引值，-1表示找
不到。		String.lastIndexOf(searchString)
match()以正則表示式regexp搜尋字
串(如果輸入非regexp會自動
轉換)，回傳陣列，包含
groups、index、input，找
不到會傳回null。
String.match(regexp)
matchAll()以正則表示式regexp搜尋字
串，返回所有符合的結果，
返回值是正則表示式字串疊
代器RegExpStringIterator		String.matchAll(regexp)
concat()合併字串String.concat(string1,string2)
Math 數學運算物件
Math是JavaScript內建物件，提供了數學運算常用的常數以及三角函數、對數函數和數學函數。
屬性說明
Math.Ee數學常數，自然對數函數的底數或稱為歐拉數，約為2.718
Math.LM2loge2，2的自然對數，約為0.693
Math.PI圓周率，約為3.1416

範例

let r=10;
let circleArea = r * r * Math.PI;
console.log(`半徑${r}公分的圓形面積為${circleArea}`);
陣列

宣告陣列物件

方法一：
var arrayName = new Array();
arrayName[0] = "元素一";
arrayName[1] = "元素二";

方法二：
var arrayName = new Array("元素一","元素二");

方法三：
var arrayName = ["元素一","元素二"];

陣列屬性property

array.property

取的陣列的個數
myArray.length

陣列方法method()

方法說明
sort()排列陣列元素
reverse()反轉陣列元素排列

sort()方法是將陣列排列，而reserse()方法則是將陣列反方向排列。

pop()取出陣列尾端元素
push()新增元素到陣列尾端
shit()取出陣列第一個元素
unshift()新增元素到陣列開端

JavaScript 精選14堂課(二)

程式控制結構

選擇結構
如果if及else內的程式敘述只有一行，同樣可以省略大跨號{}。例如：
if (a==1) b=1; else b=2;

也可以用三運算子?來達成，三元運算子格式如下：
條件運算式？ 程式敘述1 : 程式敘述2

條件運算式成立就執行敘述1，否則就執行程式敘述2。
上述程式可以改寫為：
b = (a==1 ? 1:2);
加上括號只是為了程式易讀。
重複結構

範例：

<script>
//for
for (i=1; i<=10; i++){
    console.log(i + "平方 = "+ (i*i));
}
console.log("現在 i 值 = " +i);
</script>

範例：

let fruit = ["apple", "tomato", "Strawberry"];
for (let x in fruit) {
	console.log(fruit[x]);
}

範例：

<script>
//forEach
let fruit = ["apple", "tomato", "Strawberry"];
fruit.forEach(function(x){
     console.log(x);
});

範例：

<script>
//while 
let = 1;
while(i<=10){
    console.log(i + "平方 = " + (i*i));
}
console.log("現在i值 = "+ i);
</script>
使用while loop 有兩個重點，提醒您留意：
1.必須先指定變數的起始值。
2.條件式中的變數值的增減，必須寫在while{}內，否則變數i永遠不會改變，迴圈一直執行就會造成無窮迴圈！
<script>
// do....while
let i=1;
do {
   console.log(i + "平方 = "+ (i*i));
   i++;
}while(i<=10)

console.log("現在i值 = "+ i);
</script>
break 和continue 敘述
break跟continue敘述可以用來控制迴圈流程

break敘述的作用是強迫終止迴圈的執行，跳出最靠近的迴圈，直接執行迴圈外的第一行指令。
例如：
if (i>5)  break;

continue敘述的作用是馬上回到迴圈的一開始，再繼續執行迴圈。
if(i<7) continue;
<script type="text/javascript">
	for (let a=0; a<=10; a++){
		if (a===3){
			console.log(a);
			continue;
		}
		if (a===8){
			console.log(a);
			break;
		}
		console.log("for loop a="+a);
	}
 </script>

forEach 迴圈不能使用break指令中斷循環

JavaScript 精選14堂課(一)


安裝軟體Node
執行 Node 
在命令提示字元下，執行 node  檔案.js

離開 Node    
輸入 .exit   或 Ctrl+D
console.log()
console.log()
是瀏覽器的開發者工具(web developer tool)顯示括號()內的資料。只要在瀏覽器開啟檔案，按一下F12就會顯示開發者工具並印出console.log()的訊息。
變數宣告
var 宣告變數 
方法： var 變數名稱 
1.全域變數
  不在函數內的變數都屬於全域範圍變數，此程式文件內都可以使用此一變數。
2.區域變數
  當變數在函數之內宣告，那麼只有在這一個函數區域可以使用此一變數。
let 變數宣告
方法： let 變數名稱
var變數宣告的方式，常常讓人詬病。因為關鍵字認定的作用域只有函數，但是程式中的區塊不只有函數。程式的區塊敘述是以一對大跨號{}來界定，像是if、else、for、while等控制結構或是純粹定義範圍的純區塊{}等等都是區塊。
變數 Z 沒有宣告
使用 const 關鍵字宣告常數
Const 跟 Let 關鍵字一樣都是ES6新加入的宣告方式，跟let一樣，具有區塊作用域的概念，Const是用來宣告常數(Constants)，也就是不變的常量，因此常數不能重複宣告，而且必須指定初始值，之後也不能再變更它的值。
parseInt():將字串轉換為整數
a = parsInt("35");             // a = 35
b = parsInt("55.87");          // b = 55
c = parsInt("3天");            // c = 3
d = parsInt("page 2");         // d = NaN
parseFloat():將字串轉換成浮點數
a = parsFloat("35.345");      // a = 35.345
b = parsFloat("55.87");       // b = 55.87  
Number():將物件或字串轉換為數值
如果物件或字串無法轉換為數值，則傳回 NaN
a = Number("10a");          // a = NaN
b = Number("11.5");         // b = 11.5
c = Number("0x11");         // c = 17
d = Number("true");         // d = 1
e = Number(new Date());     // e = 1553671784021(傳回1970/1/1至今的毫秒)
typeof:傳回資料型別
* typeof 資料
* typeof(資料)

typeof("Eileen");          //  傳回 "string"
typeof 123;                //  傳回 "number"
typeof null;               //  傳回 "object"
查詢物件的屬性與方法
console.log( Date.prototype)
Chrome瀏覽器中按F12，中控選項(console)