Timmy's Column: BDSE15 - Learn JavaScript

　　對於資料分析職務而言，學習JavaScript多半是為了培養撰寫爬蟲程式能力，因此是重要性比較次之的技能；但對於DevOps職務而言，JavaScript也是基本能力之一。有鑑於日前工作有開發、架設網站的需求，因此我重新複習於BDSE進修時留下來的紙本講義，重新整理為筆記以方便日後查詢。

一、Script語言

Script語言需嵌入於HTML文件中

l <script>JavaScript敘述;</script>

l 可置於HTML文件的任何位置，通常建議置於<head>中。

l 若置於<body>中需置於所有網頁內容的後面。

l 允許內嵌多個<script>程式區塊。

使用<script>標籤嵌入JavaScript敘述

l type屬性用來說明使用哪種Script語言，一般都不用寫，因所有瀏覽器皆預設為JavaScript：
<script type="text/javascript"></script>

l src屬性用來載入獨立的JavaScript程式檔，不可以寫成<script src="hello.js"/>，因其內文會插入外部JavaScript程式敘述：
<script src="hello.js"></script>

l 獨立的JavaScript檔副檔名必須以.js命名，檔裡只需包含JavaScript敘述，無需<script>標籤。

樣板

l   置於<head>中：
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Example Title</title>
    <script>
    </script>
</head>
<body>
</body>
</html>

l   置於<body>中：
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Example Title</title>
</head>
<body>
    <script>
    </script>
</body>
</html>

JavaScript的撰寫

l 每行敘述的尾端加上分號;做為結束，但JavaScript允許不寫分號;。

l 程式撰寫是Free Format，但最好一行敘述單獨寫一行。

l 使用大括號{}來限制隸屬程式範圍，謂之程式區塊(Block)。

l 單行程式註解使用//，多行程式註解使用/**/。

Console指令

l 以下指令可用在Chrome開發人員工具：
console.log('output'); // 輸出訊息
console.info('output'); // 輸出資訊
console.warn('output'); // 警示輸出(黃色)
console.error('output'); // 錯誤輸出(紅色)
console.table(); // 以表格輸出組合結構訊息
console.assert(2<1, 'output'); // 對狀況進行斷定，此例會因錯誤輸出'output'
console.clear(); // 清空console面板中的指令、訊息
console.count(); // 計算函式的執行次數
console.time(); // 計算兩行指令中間的函式執行時間(起)
console.timeEnd(); // 計算兩行指令中間的函式執行時間(訖)

二、JavaScript基礎寫法

document物件

l document物件代表目前的HTML文件本體，瀏覽器會自動為每一個HTML文件建立一個document物件，並將標籤內容新增至<body>中：
document.write("Hello World!<br>");
document.write("Hello World!", "<br>");

宣告變數

l 使用var來宣告變數：
宣告範圍在函式(Function)外會變成全域(Global)變數，宣告範圍在函式內會變成函式的區域(Local)變數。

l 使用let來宣告變數：
一般使用在變數可能會被重新指定值，故較常使用在函式內的區塊(Block)中做為區塊變數，例如在迴圈中做為變數宣告使用。

l 使用const來宣告常數變數：
不得變更其值，例如const PI = 3.1416;。

變數範圍

l 全域(Global)變數：
所有程式區塊皆可使用，需在函式外宣告，若在函式內宣告則不使用var宣告。

l 區域(Local)變數：
只有此函式內可使用，在函式內使用var宣告。

l 區塊域(Block)變數：
只有此區塊內可使用，特別適合使用在函式中的For迴圈。

變數值

l 變數值為0、null和undefined，其布林值(Boolean)為false。

l 變數值不為0，其布林值為true。

l 未定義值(undefined)為宣告時未給值。

l 空值(null)為不存在的物件。

變數類型轉換

l 將字串轉成整數：
var a = "123";
document.write(typeof a, "<br>"); // string
var b = parseInt(a);
document.write(typeof b, "<br>"); // number

l 將數字轉成字串：
var a = 123;
document.write(typeof a, "<br>"); // number
var b = a.toString();
document.write(typeof b, "<br>"); // string

關係運算子

l ===－若兩個運算元的值相等且資料型態相同，則傳回true：
var x = 3, y = "3";
document.write(x == y, "<br>"); // true
document.write(x === y, "<br>"); // false

l !==－若兩個運算元的值不相等或資料型態不同，則傳回true：
var x = 3, y = "3";
document.write(x != y, "<br>") // false
document.write(x !== y, "<br>") // true

邏輯運算子

l &&(and)－若其中一個運算元不是邏輯值，第一個運算元為false，就傳回false，否則傳回第二個運算元的值：
document.write(false && "A", "<br>"); // false
document.write("A" && false, "<br>"); // false
document.write(true && "A", "<br>"); // A
document.write("A" && true, "<br>"); // true
document.write("A" && "B", "<br>"); // B

l ||(or)－若其中一個運算元不是邏輯值，第一個運算元為true、數值或字串，就傳回第一個運算元的值，否則傳回第二個運算元的值：
document.write(false || "A", "<br>"); // A
document.write("A" || false, "<br>"); // A
document.write(true || "A", "<br>"); // true
document.write("A" || true, "<br>"); // A
document.write("A" || "B", "<br>"); // A

l !(not)－若對數值或字串做NOT運算，則一律傳回false：
document.write(!"A", "<br>"); // false

String物件方法

l String物件方法範例：
var str = "Hello world, welcome to JavaScript world.";
document.write(str.length, "<br>"); // 41
document.write(str.charAt(6), "<br>"); // w
document.write(str.substr(6, 5), "<br>"); // world
document.write(str.substring(6, 11), "<br>"); // world
document.write(str.slice(6, 11), "<br>"); // world
document.write(str.indexOf("world"), "<br>"); // 6
document.write(str.indexOf("World"), "<br>"); // -1
document.write(str.lastIndexOf("world") + "<br>"); // 35
var tokens = str.split(" ");
for (let i = 0; i < tokens.length; i++) {
document.write(tokens[i], "<br>");
}

document物件方法與屬性

l document物件方法範例：
document.getElementById("test1") // test1為Element ID
document.getElementsByTagName("p") // p為Tag Name，回傳[object HTMLCollection]
document.querySelector(".test2") // 輸入Selector，例如此例為.test2
document.querySelectorAll(".test3") // 輸入Selector，例如此例為.test3，回傳[object NodeList]

l document物件屬性範例：
document.getElementById("test1").innerText // 傳回內文
document.querySelector(".test2").innerHTML // 傳回內文

l 其它document物件常用的屬性：
console.log(document.title); // 設定和傳回文件的標題
console.log(document.URL); // 傳回該文件的網址
console.log(document.lastModified); // 文件最後修改日期和時間
console.log(document.forms); // 所有<form>的集合，以陣列表示，使用document.表單名稱或document.forms[索引值]來存取
console.log(document.images); // 所有<img>的集合，以陣列表示
console.log(document.links); // 所有超連結的集合，以陣列表示

l querySelector條件：
document.querySelector("#input", "[name='login']"); // or條件
document.querySelector("[id='input'][name='login']"); // and條件

l 增加節點寫法一：
var body = document.getElementsByTagName("body");
var h1 = document.createElement("h1");
var text = document.createTextNode("Hello World");
h1.appendChild(text);
body[0].appendChild(h1);

l 增加節點寫法二：
var body = document.querySelector("body");
var h1 = document.createElement("h1");
h1.innerHTML = "Hello World";
body.appendChild(h1);

選擇性敘述

l   If寫法：
if (condition) {
    statements;
} else if (condition) {
    statements;
} else {
    statements;
}

l   Switch Case範例：
var num = 3;
switch(num) {
    case 1: document.write("input 1<br>"); break;
    case 2: document.write("input 2<br>"); break;
    case 3: document.write("input 3<br>"); break;
    default: document.write("input error<br>");
}

l 條件運算子寫法與範例：
variable = (condition) ? true_value : false_value;
var status = (score >= 60) ? "pass" : "fail";

自訂物件

l 自訂物件範例一：
var person = {};
person.name = "Timmy";
person.age = 28;
person.mobile = "0945666123";

l   自訂物件範例二：
var person = {
    name: "Timmy",
    age: 28,
    mobile: "0945666123"
};

l 使用物件屬性範例一：
var myName = person.name;

l 使用物件屬性範例二：
var myName = person["name"];

l   其餘自訂物件操作：
var person = {
    name: "Timmy",
    age: 33,
    mobile: "0933111222",
    print: function() {
        document.write(this.name + "," + this.age + "," + this.mobile + "<br>");
    }
}
person.print(); // Timmy,33,0933111222
document.write(person.print, "<br>");
person.addr = "Taipei";
document.write(person.addr, "<br>"); // Taipei

迴圈敘述

l   For寫法與範例，大括號內若只有一行敘述，大括號可以省略：
for (init expression; condition; update expressions){
    statements;
}
for (let n = 1; n <= 10; n++)
    document.write(n*n, "<br>");

l For... In範例，用來重複執行指定物件的所有屬性：
var str = "";
for (let attrname in person){
str += person[attrname] + "<br>";
}
document.write(str);

l For... In範例，改由陣列來處理多筆資料：
var names = ["Tom", "Mary", "John"];
for (let i in names)
document.write("names[", i, "]=", names[i], "<br>");

l   Do...While寫法與範例：
do {
    statements;
} while (condition);
var i = 0;
do {
    i += 1;
    document.write(i, "<br>");
} while (i < 10);

l   While寫法與範例：
while (condition) {
    statements;
}
var i = 0;
while (i < 10) {
    i++;
    document.write(i, "<br>");
}

l   Label命名範例：
var i = 0;
Loop:
while (true) {
    i++;
    document.write(i, "<br>");
    if (i == 5) {
        break Loop;
    }
}

陣列方法與屬性

l var objs = [21, "Mary", "John"];
document.write(objs.length, "<br>"); // 3
document.write(objs.toString(), "<br>"); // 21,Mary,John
document.write(objs.indexOf("Mary"), "<br>"); // 1
document.write(objs.push(6), "<br>"); // 4 // 21,Mary,John,6
document.write(objs.unshift("Doris"), "<br>"); // 5 // Doris,21,Mary,John,6
document.write(objs.shift(), "<br>"); // Doris // 21,Mary,John,6
document.write(objs.pop(), "<br>"); // 6 // 21,Mary,John
document.write(objs.reverse(), "<br>"); // John,Mary,21
document.write(objs.splice(1, 1, "May"), "<br>"); // Mary // John,May,21
document.write(objs.join('#'), "<br>"); // John#May#21
document.write(objs.slice(1, 3), "<br>"); // May,21

l In不能用在陣列，但能用在自訂物件：
var arr = ["a", "b", "c", "d", "e"];
document.write(("a" in arr), "<br>"); // false
var obj = {a: "A", b: "B", c: "C", d: "D", e: "E"};
document.write(("a" in obj), "<br>"); // true

l 走訪陣列（可迭代的物件）：
var arr = ["a", "b", "c", "d", "e"];
for (let i of arr)
document.write(i, "<br>");

l 走訪自訂物件（不可迭代的物件）：
var obj = {a: "A", b: "B", c: "C", d: "D", e: "E"};
for (let i of Object.keys(obj))
document.write(i, "<br>");

JSON方法

l var jsonstr = '[{"name": "Timmy", "age": 28, "mobile": "0939111222"}, {"name": "Wendy", "age": 26, "mobile": "0935123456"}]';
var customers = JSON.parse(jsonstr);
document.write(customers[0]["name"], "<br>"); // Timmy
var jsonstr2 = JSON.stringify(customers) // 轉換為字串的方法

自訂函式

l 自訂函式範例一（宣告式函式）：
function toCelsius1(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
document.write(toCelsius1(95), "<br>"); // 35

l 自訂函式範例二（匿名函式）：
const toCelsius2 = function(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
document.write(toCelsius2(95)); // 35

l 自訂函式範例三（箭頭函式）：
const toCelsius3 = (fahrenheit) => {
return (5/9) * (fahrenheit-32);
}
document.write(toCelsius3(95), "<br>"); // 35
const toCelsius4 = fahrenheit => (5/9) * (fahrenheit-32);
document.write(toCelsius4(95), "<br>"); // 35

l   自訂函式傳入不定變數範例一：
function add() {
    var sum = 0;
    for (let i = 0; i < arguments.length; i++) {
        sum += arguments[i];
    }
    return sum;
}
document.write(add(120, 5, 12), "<br>"); // 137
document.write(add(10, 20, 30, 40), "<br>"); // 100

l   自訂函式傳入不定變數範例二：
function add(...args) {
    var sum = 0;
    for (let i = 0; i < args.length; i++) {
        sum += args[i];
    }
    return sum;
}
document.write(add(120, 5, 12), "<br>"); // 137
document.write(add(10, 20, 30, 40), "<br>"); // 100

閉包函式(Closure Function)

l   閉包函式範例：
function multiplier(n) {
    function multi(x) {
        return x * n;
    }
    return multi;
}
times3 = multiplier(3);
document.write(times3(4), "<br>"); // 12

日期與時間

l Date物件寫法：
new Date() // 取得今天的日期與時間
new Date(milliseconds) // 以毫秒取得日期與時間
new Date(dateString) // 使用字串設定日期與時間

l Date物件常用get方法：
new Date().getMonth() // 回傳值為0至11
new Date().getDay() // 回傳值為0至6，0是星期日，1是星期一
new Date().getDate()+5 // 取得五天後的日期與時間
new Date().getHours() // 回傳值為0至23
其它方法還有getFullYear()、getDate()、getMinutes()、getSeconds()、getTime()等。

l Date物件常用set方法：
new Date().setDate("21") // 將今日日期改為21日並回傳Unix Timestamp
其它方法還有setFullYear()、setMonth()、setHours()、setMinutes()、setSeconds()、setTime()等。

l window物件有關計時器的方法：
setTimeout(code_func, millisec) // 設定某段時間後開始執行某程序
timer_id = setTimeout("do_task()", 5000);
timer_id = setTimeout(do_task, 5000);
clearTimeout(timer_id); // 重複執行直到設定clearTimeout()或視窗關閉為止

setInterval(code_func, millisec) // 設定每隔多少時間重複執行某程序
timer_id = setInterval("do_task()", 1000);
timer_id = setInterval(do_task, 1000);
clearInterval(timer_id); // 重複執行直到設定clearInterval()或視窗關閉為止

Math物件方法與屬性

l Math為靜態物件，可直接使用Math來呼叫方法或屬性。

l Math物件常用的屬性：
document.write(Math.E, "<br>"); // 2.718281828459045
document.write(Math.PI, "<br>"); // 3.141592653589793

l Math物件常用的方法：
document.write(Math.ceil(Math.PI), "<br>"); // 4
document.write(Math.floor(Math.PI), "<br>"); // 3
document.write(Math.round(Math.PI), "<br>"); // 3
document.write(Math.pow(3, 2), "<br>"); // 9
document.write(Math.sqrt(9), "<br>"); // 3
document.write(Math.random(), "<br>");

window物件

l window物件是瀏覽器的預設物件，可省略window這個字，若window物件有名稱，可直接使用該名稱來操作：
document.write("Hello World", "<br>");
window.document.write("Hello World", "<br>");

l window物件常用的屬性：
console.log(window.name); // 設定和傳回視窗的名稱
console.log(window.status); // 設定狀態列的訊息
console.log(window.self); //傳回目前window物件
console.log(window.document); // 傳回window物件的document子物件
console.log(window.history); // 傳回window物件的history子物件
console.log(window.location); // 傳回window物件的location子物件

l window物件常用的方法（對話框）：
alert("Hello World"); // 顯示警告訊息視窗
confirm("Hello World"); // 顯示確認訊息視窗，確定傳回true，取消false
prompt("Hello World", "Default Value"); // 會有一個文字欄位供使用者輸入，確定傳回輸入的字串，取消傳回null

l   window物件視窗範例：
<button onclick="openWin()">開啟新視窗</button>
<button onclick="closeWin()">在原視窗中關閉新視窗</button>
<button onclick="openDoc()">開啟新文件</button>
<button onclick="closeNow()">關閉當前視窗</button>
<script>
    var myWindow;
    function openWin() {
        myWindow = document.open("", "myWindow", "width=250, height=250");
        myWindow.document.open("text/html","replace");
        myWindow.document.write("<p>這是在原視窗中開啟的新視窗</p><br><button onclick=window.close();>在新視窗中關閉視窗</button>");
        myWindow.document.close();
    }
    function closeWin() {
        if (myWindow) {
            myWindow.close();
        }
    }
    function openDoc() {
      window.open("text/html");
        window.document.write("<p>這是在原視窗中開啟的新文件</p><br><button onclick=window.location.reload()>重新整理以回復原文件</button>");
        window.document.close();
    }
    function closeNow(){
        window.close();
    }
</script>

HTML Events

l Mouse Events常用的屬性：
onclick、ondbclick、onmousedown、onmousemove、onmouseover、onmouseout、onmouseup

l Keyboard Events常用的屬性：
onkeydown、onkeypress、onkeyup

l Frame/Object Events常用的屬性：
onabort、onerror、onload、onsize、onscroll、onunload

l Form Events常用的屬性：
onblur、onchange、onfocus、onreset、onselect、onsubmit

l   Mouse Events範例：
<div onmousedown="whichButton(event)">click your mouse on the text</div>
<script>
    var shownbutton;
    function whichButton(event) {
        switch(event.button) {
            case 0: shownbutton = "left"; break;
            case 1: shownbutton = "middle"; break;
            case 2: shownbutton = "right"; break;
        }
        alert("you pressed button: " + shownbutton);
    }
</script>

l 事件監聽器：
EventTarget.addEventListener(event, listener)，將指定的事件監聽器動態地註冊到EventTarget實作物件上，EventTarget可能是Document中的Element物件、Document物件本身或Window物件。

l   事件監聽器範例：
<button id="show">Show Add Event Listener</button>
<p class="test">This is paragraph.</p>
<div id="demo"></div>
<script>
    document.getElementById("show").addEventListener("click", function() {
        var elements = document.querySelectorAll(".test");
        var txt = "";
        for (let i = 0; i < elements.length; i++)
            txt += elements[i].innerHTML + "<br>";
        document.getElementById("demo").innerHTML = txt;
    });
</script>

AJAX技術

l AJAX技術在JavaScript中，傳統使用XMLHttpRequest物件(簡稱為XHR)向伺服器提出需求並取得伺服器提供的資料。

l   XMLHttpRequest方法範例：
<div id="demo1"></div>
<div id="demo2"></div>
<script>
    var xhttp = new XMLHttpRequest();
    xhttp.onload = function() {
        document.getElementById("demo1").innerHTML       = this.responseText;
        document.getElementById("demo2").innerHTML       = this.status;
    }
    xhttp.open("GET", "res/info.txt", true);
    xhttp.send();
</script>

l   Fetch方法範例，Fetch是近年來號稱要取代XHR的新技術標準，是一個HTML5的API：
<div id="demo"></div>
<script>
    fetch("res/info.txt", {method: "get"}) // 返回一個Promise物件
    .then(function(response) {return response.text();}) // 解析Response物件返回string
    .then(function(text) {document.getElementById("demo").innerHTML = text;});
</script>

Timmy's Column

2022年11月8日星期二

BDSE15 - Learn JavaScript

沒有留言:

張貼留言

2022年11月8日 星期二

BDSE15 - Learn JavaScript

沒有留言:

張貼留言

2022年11月8日星期二