• 開啟台大校長室首頁
  • 打開 開發人員選項 -> 檢視元素
  • 滑鼠在頁面滑動，看是否可以看得出 DOM structure?
  • 滑到管校長玉照，click on its parent <div> element (有看到旁邊多了一個 $0 嗎？)
  • 打開 "console", 輸入 $0 試試看！
  • (先到網路上選一張圖片，複製連結) 輸入 $0.innterHTML = "<img src='你的圖片連結'… 照著原先的打"
  • (選到 "校長 管中閩博士" 的 <p>) 用 $0.innterText 改改看！

A new web language was born

• Year 1995 (rise of IE; Netscape/Sun/Microsoft)

• Brendan Eich created it in a few weeks

• 披著 Java 皮，流著 Scheme (first-class function) / Self (prototype-based)的血

醜小鴨變天鵝

• 短時間生產出來的畸形兒
• ECMA standardization (ES): 1 (1997), 2 (1998)
• ES3: the first big change (1999)
• ES4: the unborn child
• ES3.1 (2008) -> ES5 (2009)

ES6 (aka. ES 2015): The Modern JS

• let/const
• arrow function
• class
• promise (to relieve callback hells)
• generator
• binary/octal literals

ES7 and Beyond

• ES7 (aka. ES 2016)
  • minor changes (e.g. exponential **)
• ES2017
  • async/await (to improve "promise")
  • shared memory and atomics
• ES2018
  • asynchronous iteration
  • generator arrow functions

What's next?

• Inter-platform operability

• Native support on VM

• (Already is) Full-stack language

相異之處

• 弱型別，所有的變數都是 var (or let/const)

var a = “38”;
var b = false;
console.log(a + !b);

• Statement 的後面可以不用加 “;”
• 數字都是 “double“

0.1 + 0.2; // = 0.30000000000000004

• 除了 ==, 還有 ===
• 字串可以用 ' ' or " "

Prototype-Based object construction

不用先定義 class 即可建置物件，且一旦一個物件被建置好，後續的物件可以用它來當作原型來建置類似的物件

First-Class Functions

也就是說 functions 被當成是一般的變數(物件)，可以當成其他 function 的參數或是回傳值，也可以被 assigned 給別的變數

In JS, almost everything is an object

• Object in JavasScript is represented as:

{ property: value, ... }

var me = { name: "Ric", age: 18 }

• Note: No need to define "type" or "var" for "name" and "age"

三種產生 object 的方法

1. Object literal

var a = { name:"Ric", score:100 }; 

2. “new” operator

var b = new Date;

3. Constructor function

function Student(name, score) {
  this.name = name;
  this.score = score;
}
var c = new Student(“Ric”, 100); // return this

• What happens for “var d = Student(“Nacy”, 20);”?
  // The returned type of Student() is "undefined"

不要把五種內建型別宣告成 object

var a = new Number(3); // 不建議

var b = Number(3); // What's the difference?

console.log(a === b); // false

var a = 3; // a is a primitive

var b = Number(3); // b is a primitive

var c = new Number(3); // c is an object

The keyword “Object” defines an object

var o = new Object;

“prototype-based” object construction

var o = new Object;
console.log(o);

// No need to define "name" and "score" in advance
o.name = "Ric";
o.score = 100;

var o2 = new Object;
console.log(o);
console.log(o2);

Primitive variable assignment makes a “copy”

var a = 3;
var b = a;  // {a, b} = {3, 3}
b = 4;      // {a, b} = {3, 4}
a = 5;      // {a, b} = {5, 4} 

Object variable assignment pass the “reference” to the object’s address

var i = { a:3 };
var j = i;
j.a = 4;   // i.a = 4
i.a = 5;   // j.a = 5

Function assignment

• 如同 object assignment (i.e. pass by reference)

// f is an reference to add
var f = function add(a, b) { return a + b; }; 

// print out the returned value of f(3,4)
console.log(f(3,4)); 

// print out f itself
console.log(f); 

// Error (why?)
console.log(add); 

Return of a function

• By default, the return value of a function is "undefined", unless call by "new" (return this)

var f = function(a, b) { return a + b; };

f(3,5); 

f(f(1,2),3);

Return a function

var f = function(s) {
  return s? 
    function(a,b) { return a+b; }:
    function(a,b) { return a-b; } 
};
var f1 = f(true); f1(3,5);
var f2 = f(false); f2(3,5);

Methods in Objects

• Recall: prototype-based object construction

var a = { name:"Ric", score:100 };
a.gender = "Male";

• Since function is also an object, we can define “method functions” in an object as:

var a = {
  name:"Ric", score:100, 
  report: function() {
    return this.name + " got " + this.score;
  } 
};
a.report();   // Ric got 100

Define a method afterwards

a.isPass = function() {
  console.log(this.score >= 60? “Yes”: “No”); 
};
a.isPass()    // Yes

Immediately Invokable Function Expression

• When a function is used only once, we can declare it anonymously and evoke it immediately

(function() {
... some statements
})();

Test yourself #2 (Any errors?)

var f = function add(a, b) { return a + b; };
add(10, 20); // Error!
f(20, 30);
 
var g = f;
g(30, 40);
 
var h = add; // Error!
h(40, 50); // Error!

Test yourself #3 (Any errors?)

var f = function add(a, b) { return a + b; };
 
var g = add; // Error
 
var h = function add(a, b) { return a + b; };
 
var i = function add(a, b, c) { return a + b + c; };
 
var f = "Hello";  // overloading f

Test yourself #4 (Any errors?)

var f = function pp() { ... }
 
var g = f;
 
var f = function qq() { ... }
 
console.log(f);  // qq
 
console.log(g);  // pp

To define an array

1. Using array literal

var students = [ "John", "Mary", "Ric" ]; 

2. Using new Array // not recommended

var students = new Array("John", "Mary", "Ric");

Data in an array can be of any types

var a = [ "Ric", 100, function() { return "Hello!"; } ];

a[2]();  // Hello!

”length” property and “push” method in Array

// initialized as an empty array
var s = [ ];

s.push("John"); // recommended

s[s.length] = "Mary"; // length is now 2
 
s[3] = "Ric"; // OK, but create an “undefined” in [2]

Array is a special kind of object

var students = [ "John", "Mary", "Ric" ];

typeof students; // object

Array.isArray(students);  // true

Array elements MUST BE accessed by numbers

• 雖然一些 object 的行為看起來很像 array, 但嚴格來說，他們是不一樣的

var a = { name:"Ric", score:100 };

a["name"]; // "Ric"

a[0]; // undefined

Array.isArray(a); // false

Array or Object

• Array is an object.

var s = [];
s[0] = "John";
s["Name"] = "Ric";

console.log(s);  // ["John", name: "ric"]
Array.isArray(s); // true

Function Hoist

• Function declaration 定義的位置會被抬升到最前面

sum(3,5);   // This is OK!
function sum(a, b) { return a + b; };

• 但用 expression 定義的 function 變數則不會被抬升
  => 如果在定義之前就被使用，就會是 error

sum(3,5);  // Error
var sum = function(a, b) { return a + b; };

Variable Scope

• 在同一個範圍內重複用 “var” 宣告同名字的變數，後者會被無視，而只進行 assignment

var a = 0;
{ var a = 10; } // 仍屬同一範圍之 'a'. a = 10 now

var b = function() { var a = 20; }
b(); // local 'a' 並非 global 'a'. 所以 a 仍然為 10

“let” 跟 C/C++ 的變數一樣，採取 block scope

• 同一個 scope 不能宣告相同名稱的變數
• 不能在宣告變數之前就使用 (i.e. 用 let 宣告的變數不會被抬升 (hoist) 到 scope 的最前面)
• 在 global scope 用 let 宣告的變數並不是真正的 global variable
  ==> 並不會變成 “window” 這個全域物件底下的屬性，因此，像是用 module 載入的程式碼並看不到這個 global scope 的 let 變數

“const” 亦跟 C/C++ 一樣，表示 “read-only” 的常數變數

• 養成習慣，多多使用 const

在一個瀏覽器的頁面 “window” 是唯一的全域物件，
而 “document” 是它的一個屬性

如前所述，所謂的動態網頁就是在 event 觸發之後，選擇某個/某些 DOM 節點，然後改寫其內容或是周邊的節點 (node/element)

事件監聽綁定 (方法一)

<button id="target">是個按鈕</button>

var targetElement = document.getElementById("target");

targetElement.addEventListener(
  "click", 
  function() {
    // ..做一些事，任何事，你希望按鈕按了要幹麻？
    alert('你希望按鈕按了要幹麻？');
  }
);

事件監聽綁定 (方法二) – GlobalEventHandlers [ref]

• target.onclick = functionRef;

<p>Click anywhere in this example.</p>
<p id="log"></p>

let log = document.getElementById('log');

log.onclick = inputChange;

function inputChange(e) {
  //.. some something here
}

事件監聽綁定 (方法三) –
As a tag attribute

• List of global attributes [ref]

<div class="myClass" onclick="clickHandler()">