JavaScript 標籤整理

tags: `網頁` `JavaScript`

基本HTML範例











<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title></title>
	<script></script>
</head>
<body>
	<p>Hello JavaScript!</p>
</body>
</html>

JS 基本認識

JavaScript屬於高階的程式語言，並支援物件導向(OOP)，使一部份計算及驗證的功能由用戶端電腦解決，減輕伺服器的計算資源及網路流量。

基本功能

表單前端認證
動態更改HTML標籤或CSS樣式
動態建立文件內容
增加網頁的互動性

JS 套用方法

直接呼叫

範例 : JS01.htm





<body>
    <script>
        //JavaScript 程式碼
    </script>
</body>

內部載入













<head>
    <meta charset="utf-8"/>
    <title></title>
    <script>
        function SayHello()
        {
            alert("Hello JavaScirpt!");
        }
    </script>
</head>
<body>
    <input type="button" value="Hello" onclick="SayHello()"/>
</body>

外部載入

範例 : JS02.htm





<head>
	<meta charset="utf-8"/>
	<title></title>
	<script src="myjs.js"></script>
</head>





//檔案:myjs.js
function SayHello()
{
	alert("Hello JavaScirpt!");
}

JS 註解

//單行註解寫在這裡

/*多行註解寫在這裡*/

JS 變數

var 變數名稱 宣告變數
- 數字(number)，包含整數和福點數，如1、20
- 字串(string)，"Andy"
- 布林常數(boolean)，有true和false兩種值
- 物件(object)，如{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}
- 未定義(undefined)
typeof 內容 傳回內容的屬性
let 區域內的變數，不影響原來的值
const 常數，不可更改

JS 數字

JavaScript真不愧是高階語言，超級聰明，數字完全不用管是int還是float，也完全不用擔心溢位問題，因為一個數字用了51個bit存…，編譯器會自己判斷是整數還是小數。

更扯的是，除了加會當作連接字串，字串和字串間竟然可以減乘除

NaN (Not-a-Number)運算結果不為數字時，isNaN()可以檢查
Infinityor-Infinity 無限或負無限
num.toString(進位) 轉成指定進位，空白代表10進位，傳回字串
num.toExponential() 轉成科學記號，傳回字串
num.toFixed() 固定小數點位數，傳回字串
num.toPrecision() 固定數字長度，傳回字串

從String轉成Number

Number() 任何變數轉成數字
parseInt() 轉成整數
parseFloat() 轉成小數

JS 字串

str.length 取str的長度
str.indexOf("day") 找str中第一個day的首字的位置
str.lastIndexOf("day") 找str中最後一個day的首字的位置
找不到時return=-1
str.search("day") 搜尋day在str中的位置
slice(起點, 終點) 切割成子字串，負號代表顛倒過來
substring(起點, 終點) 切割成子字串，和slice差不多，但不能用負號
substr(起點, 長度) 切割成子字串，從起點開始取指定長度
replace(被替換的字串,替換上去的字串) 替換字串
- 正規表達法，預設為嚴格比對
- /字串/i 寬鬆比對
- /字串/g 全域比對
str1.concat(str2) str1後接上str2
str.toUpperCase() 轉大寫
str.toLowerCase() 轉小寫
str.trim() 幫你削掉多餘的空格
charAt(位置) 回傳指定位置的字元(char)
split(",") 依照,做分割

沒錯，你發現了… … 這不是和Java一樣的函式嗎!? JavaScript和Java真的87%像，學過Java後學JavaScript就會很快上手><

JS 陣列

一維陣列

//建立指定大小的陣列
var 陣列名稱 = new Array(陣列大小);

//建立指定元素的值的陣列
var 陣列名稱 = new Array(元素1,元素2,...,元素n);   //不建議的寫法
var 陣列名稱 = [元素1,元素2,...,元素n];            //建議的寫法

元素的值可以是數字，也可以是字串(Chrome不知道為什麼會怪怪的，IE就可以)

二維陣列

var 陣列名稱 = new Array();
陣列名稱[0] = [元素1,元素2,...,元素n];
陣列名稱[1] = [元素1,元素2,...,元素n];
.
.
.
陣列名稱[n] = [元素1,元素2,...,元素n];

陣列函式

Array.isArray(ary) ary是否為陣列
ary.length 取陣列長度
ary.pop() 取走陣列尾端的內容，回傳值為陣列尾端的內容
ary.push("內容") 將內容加在陣列的尾端，回傳值為新陣列的長度
ary.shift() 取走陣列頂端的內容，回傳值為陣列頂端的內容
ary.unshift("內容") 將內容加在陣列的頂端，回傳值為新陣列的長度
delete ary[index] 將該位置的內容導向undefined
ary.splice(加入的數量,刪除的數量,欲加入的內容) 拼接陣列，回傳陣列
ary1.concat(ary2) ary1之後接上ary2，回傳陣列
ary.forEach() 尋訪陣列中的每個元素
ary.map() 依照指定方程式產生新的陣列，回傳陣列
ary.filter() 篩選出符合條件的元素，回傳陣列
ary.indexOf("內容") 尋找該內容的第一個出現位置，回傳數字
ary.find() 尋找符合條件的第一個內容，回傳元素
ary.findIndex() 尋找符合條件的第一個內容的位置，回傳數字

陣列排序

ary.sort() 依照字串的首字母排序
ary.reverse() 翻轉字串
比較數字大小較為麻煩，因為電腦會和字串一樣，從首字母開始比，然而這樣是不對的，所以要改成以下程式碼:

ary.sort(function(a, b){return a - b});

function(a, b){return a - b} 比較方程式，兩個兩個來比，如果是負值則a小，如果是正值則a大，依此類推
隨機排序

ary.sort(function(a, b){return 0.5 - Math.random()});

隨機排序(洗牌算法)
Math.max.apply(null, arr) 尋找最大值
Math.min.apply(null, arr) 尋找最小值
物件也可以排序

var cars = [
  {type:"Volvo", year:2016},
  {type:"Saab", year:2001},
  {type:"BMW", year:2010}];

//依照年份(數字)
cars.sort(function(a, b){return a.year - b.year});

//依照品牌名稱(字串)
cars.sort(function(a, b)
{
  var x = a.type.toLowerCase();
  var y = b.type.toLowerCase();
  if (x < y) {return -1;}
  if (x > y) {return 1;}
  return 0;
});

JS 物件

基本上和Java差不了多少

定義物件

var 物件名稱 = {
  變數名稱1 : 值1,
  變數名稱2 : 值2,
  函式名稱 : function() 
  {
      //執行內容
      return this.變數名稱1;
  }
};

使用物件內的變數

物件名稱.變數名稱;

呼叫物件內的函式

物件名稱.函式名稱();

this.變數/函式 呼叫此範圍內的變數或函式

JS 事件

<元素事件="執行內容">
- onclick 按下按鈕時
- onmouseover 滑鼠游標移到物件上時
- onmouseout 滑鼠游標離開物件上時
- onmousedown 長壓住物件時
- onmouseup 長壓後放開物件時
- onload 網頁一完成載入時
- onunload 離開網頁時
- onfocus 滑鼠點擊過後
- onchange 切換元素時
- onkeydown 按下鍵盤時
元素.addEventListener("事件",執行內容,事件捕捉/事件泡泡); 事件監聽
- 事件，就是上面的事件去掉on，如onclick=click
- 事件捕捉/事件泡泡，B被包含在A中，false的話，會優先點到B，true則會優先點到A，預設是false，可省略
元素.removeEventListener("事件",執行內容);

JS 常用輸出

document.write("欲顯示在網站上的內容") 印出內容在網站上
可以是文字，也可以是HTML標籤
alter("訊息方塊的內容") 跳出訊息方塊
存取HTML元素

var 變數名稱 = document.getElementById("ID名稱");
變數名稱.value = 欄位值;

.value 存取選取清單欄位的內容
.selectedIndex 存取清單第幾個編號
.options[i].text 存取清單第幾個<option>標籤上的內容
.style.屬性=值 改變CSS樣式
.src='圖片路徑' 改變圖片
.innerHTML 存取元素的內容或HTML元素

var 變數名稱 = document.getElementById("ID名稱");
變數名稱.innerHTML = 欲顯示在網站上的內容;

console.log() 在執行欄顯示結果
window.print() 列印此頁

JS 流程控制

其實就是很簡單的if…else…或for迴圈，跟C和Java學的一模一樣，這邊就不多說了

選擇敘述

if…else…
if…else if…else…
巢狀if
switch

迴圈敘述

for(初值;終止條件;增值)
while 前測式迴圈
do…while 後測式迴圈
巢狀for
for(x in 物件){}
for(x of 陣列/字串/數字){}

JS 函式

//定義函式
funciton 函式名稱(引數1,引數2,...,引數n)
{
    //函式主體
    return 函式回傳值;
}

//呼叫函式
函式名稱(引數1,引數2,...,引數n);

引數可以是變數、常數、陣列或物件

JS 時間

var d = new Date() 當今時間，回傳物件
d.getFullYear() 取得當今年份，更多…
d.setFullYear() 設定當今年份，更多…

時間格式

ISO Date : (YYYY-MM-DD)
Short Date : (MM/DD/YYYY)
Long Date : (MMM DD YYYY)
Date.parse() 可以將日期轉成毫秒

JS 數學運算

Math.round(x) x四捨五入
Math.pow(x, y) x的y次方
Math.sqrt(x) x開根號
Math.abs(x) x的絕對值
Math.ceil(x) 上高斯符號
Math.floor(x) 下高斯符號
Math.sin(弧度) sin，角度要轉成弧度
Math.cos(x) cos，角度要轉成弧度
Math.min() 取最小值
Math.max() 取最大值
Math.random() 從0到1的隨機小數
Math.PI PI常數
更多…

JS 報錯機制

try 
{
  Block of code to try
}
catch(err) 
{
  Block of code to handle errors
}
finally 
{
  Block of code to be executed regardless of the try / catch result
}

throw 字串/數字/布林常數 拋出錯誤

JS HTML DOM

HTML DOM (Document Object Model)

尋找HTML元素

document.getElementById(id) 找到符合id的元素，沒找到回傳null
document.getElementsByTagName(name) 找到符合選擇器的元素，沒找到回傳null
document.getElementsByClassName(name) 找到符合className的元素，沒找到回傳null

改變HTML元素內容

element.innerHTML = "內容"
element.屬性 = 值
element.style.屬性 = 值
element.setAttribute( "屬性" , "值" ) 修改屬性值

增減HTML元素(節點)

document.write("欲顯示在網站上的內容") 印出內容在網頁上
document.createElement(元素) 創造新元素，創造完一定要呼叫 document.appendChild(元素)
document.appendChild(元素) 加入新元素
document.createTextNode("This is new.") 加入文字內容
document.removeChild(元素) 移除元素
元素.remove() 移除元素，新版本可用
document.replaceChild(新的元素, 舊的元素) 置換元素
document.createAttribute(屬性) 創造新屬性

var h1 = document.createAttribute(屬性)
h1.value = 欲新增的內容

尋找HTML物件(Object)

document.body 找到<body>元素
document.head 找到<head>元素
document.querySelectorAll("p") 找到HTML裡所有的<p>

更多..

BOM 節點繼承關係

節點.nodeValue 取節點內的內容
節點.nodeName 取節點的標籤，唯讀
- 如果是元素，回傳標籤名稱，如p、h1
- 如果是屬性，回傳屬性名稱
- 如果是純文字，回傳#text
- 如果是根節點，回傳#document
parentNode
childNodes[n] 第n個節點，從0開始
節點[n] 此節點下的第n個子節點
節點.length 節點下共有幾個子節點
firstChild = childNodes[0] 第一個子節點
lastChild 最後一個子節點
nextSibling
previousSibling

JS JSON

JSON是一種資料交換語言，該語言以易於讓人閱讀的文字為基礎，用來傳輸由屬性值或者序列性的值組成的資料物件。

JSON的語法

"名稱1":"值1" JSON基本單位
{"名稱1":"值1","名稱2":"值2"} JSON物件
JSON陣列

"陣列名稱":    //物件組成的Array
[
  {"名稱1":"值1","名稱2":"值2"},   //物件1
  {"名稱1":"值1","名稱2":"值2"},   //物件2
  {"名稱1":"值1","名稱2":"值2"}    //物件3
]

var string = JSON.parse(object) 將JSON型態(object)轉為JSON字串(string)
var object = JSON.parse("text") 將JSON字串(text)轉成JS的物件(object)