今天也是整理筆記，主要是MDN上學習。有一些地方寫了連自己都看不懂，但還是可能會用到，邏輯很醜還請見諒。
本筆記DOM比較清楚、物件章節學得很亂，有誤還請指教！

and明天談談送出給火箭隊的履歷。

其他

API - 瀏覽器的主要部分
window 窗口(載入瀏覽器的標籤)
navigator 用戶代理(狀態、標識)
document 文件(實際載入頁面)

this 指向當前代碼運行時的對象
原文: the curret object the code is written inside.

DOM

document.querySelector()　抓第一個>>變量
document.querySelectorAll()　所有>>數組
參數為Css選擇器

*使用在舊瀏覽器上(不適用Dom.querySelector時)
document.getElementById()　id作傳遞參數　
document.getElementByTagName()　元素作傳遞參數
document.getElementsByClassName 

document.createElement()　參數元素
document.createTextNode("")　創建文本節點(#text節點)

Node.appendChild()　附加子節點至父節點(Node)末尾
參數(子節點)可以為Css選擇器、元素、變量
也可以拿來做移動子節點(因為引用，非clone複製特性)
Node.cloneNode()　複製節點

Node.removeChild()　刪除子節點
注意！以下為一個刪除自身的辦法（基於自身引用Node，自己無法刪除自己）
Node.parentNode.removeChild(Node)　即抓父節點(parentNode)刪除自身

Node.textContent()
Node應可以為Css選擇器、元素、變量　(element.textContent())
ex:para.textContent("Hi")

*操作樣式*
HTMLElement.style
ex:　para.style.background = "red"
         para.style.padding = "10px"

Element.setArribute()
參數為("屬性名稱","值")，ex:　("class","redOne")、("id","shoppingCar")
也可以空值ex: ("disabled", "")

Math

Math的兩種傳回整數方法

Math.ceil()　傳回大於參數的整數
Math.floor()　傳回小於參數的整數

Event.target

事件對象e.target屬性是剛剛發生事件的元素的引用

btn.addEventListner('click',bgchange) //btn即為事件對象
bgchange()=e.target.style.background=randomcol()
(經常使用在"多個元素"上設置"相同"事件處理程序)

preventDeffault()

preventDeffault()避免默認(程序)函數
ex:表單中用戶輸入錯誤－避免提交

冒泡、捕捉

冒泡 向上　video → div → html
捕捉 向下　html → div → video
依序檢查 是否註冊 事件處理程序

防止擴大(在事件處理程序中)

stopPropagation()
// ex:(MDN範例，video(目前節點)點擊播放、但div(父節點)到顯示none)
video.onclick = function(e){
e.stopPropagation();
video.play();
};

事件委託

需要大量子元素任一可以運行一段代碼時，
可將事件監聽裝在父節點上，
使子節點"冒泡"到父節點上，即不需要每個子節點都裝事件監聽器
ex:
在 ul 表單中擁有許多個 li 子元素，並且可能包含JS代碼刪除、增加等等，
此時即可只在 ul 上安裝事件監聽器，li則包含事件處理程序，
使點擊(事件)任一 li 即可冒泡至 父節點 ul 上。

物件

對象包/命名空間 object package/namespace
存儲/封裝 對象的數據
對象也常用於作為數據存儲體(data stores)以在網路上運輸數據

也可以用括號表示法訪問值(關聯值的成員名)
ex: person["age"] =>32
可使用戶在數據庫裡存儲自定義的值、成員
let 成員 = input.value ex:height (表單)
let 值 = name.Value　 ex:1.75m (表單)
person["成員"] => 1.75m

以下對象、類，暫時不更改翻譯問題

class

類 class－像是定義特質的模版
對象從類中創建，即類的構造函數運行創建此實例－實例化
(以下為類的創建、實例化、創建子類、實例子類)

目前先使用引用包為一個區塊

ex:Class:Person{
Name[first,last]
Age
}
實例化
Object:Person1{
Name[Blight,Amity]
Age:18
}
也可基於其他類的創建新類－繼承特質（父－子）
Class:Person{
Name[first,last]
Age
Greeting{"Hi! I'm [Name]."}
}
繼承
Class:Teacher{
Name[first,last]
Age
Greeting{"Hello.My name is [Prefix]...，and I teach [Subject]."}
}
或是
Class:Student{
Name[first,last]
Age
Greeting{"Yo! I'm [Name]"}
}
再根據子類創造 (上述類)
Object:teacher1{
Name[Dave,Griffen]
Age
Greeting{"Hello.My name is Griffen...，and I teach math."}
}

構造函式

Object()構造函數
用new告知創建一個對象，類似功能調用例如：
var person1 = new Object ()，()內可放 {對象成員:"值"}
向此對象_添加屬性_、方法例如：
person1.name="Chris"

create()方法
基於 現有對象 創建 新對象
var person2 = Object.create(person1)
有相同對象成員、屬性、方法。

原型練

原型對象→對象原型鏈。
注意創建新對象（或類），不是複制特殊屬性的人群。

都有一個特殊的屬性叫原型(prototype)
_proto_從構造函數的prototype 屬性派生（非複制）

找屬性（properties）的過程，真實瀏覽器找一個屬性
因無該屬性，位置名單最終會找到doSomeIns函式的_pro_的_pro_的_pro_
（該函式的基礎對象為doSomething式，又該函式的基礎對象為window.Object）

• 第一個發現是doSomeIns函式內有無此屬性，沒找到往上_（對象）_
• 第一個_proto_，doSomeIns的_proto_也就是doSomething.prototype，沒找到往上
• 第二個_proto_，doSomething的_proto_也就是window.Object.prototype（稱Object.prototype），沒找到往上
• 第三個_proto_，Object的_proto_，不存在此特殊屬性（沒有該示例對象），因此查找的屬性不存在顯示值undefined。

再次重點，_proto_原型對象屬性也就是上一個（構造函數）prototype
不是複制，以訪問原型鏈的方式。

繼承

需要繼承的屬性、方法都必須存儲在原型屬性中。
前任：
對象.原型.名稱
對象名稱
繼承（改革差異）
doSome{proto{name...}}
doSome{proto{...}}

構造器(函式)constructor，JS的類

面向對象理論

基於類創建類 (底下的基於類創建類)
基於類創建對象
基於對像創建對象

1. var 對象 = new 構造函式(傳入值)
2. var 新對象 = Object.create(原型對象)
3. var 對象 = new (原型對象).constructor(傳入)　調用對象的構造器函數，創建新對象

對象.constructor.name　取得對象的構造器名字：值="Person"

修改原形
在構造器的原型加上屬性、方法
前任： Person.protype.farewell = fn(){}
→整條繼承方法會動態更新，每一件作品創建的實例都會自動獲得（該屬性或）

一般說在構造器上定義合適的
原型在定義非 常數屬性 (constant property 不會改變的屬性）時，會遇到一些問題。
前任： Person.prototype.fullName = this.name.first + this.name.last
→ 吃不到這個範圍……等等問題

最常見的定義模式

//構造器只定義屬性
fn Test(a,b,c,d){
//屬性定義
};
//prototype定義不同方法，使代碼分裝且易讀
Test.prototype.xMethod = fn(){}
//第二種方法
Test.prototype.yMethod = fn(){}

基於類創建類

基於類創建類 call()函數式
fn 新類 (參數...){
原類.call(this,參數...)
this.(屬性or方法) //增加屬性、方法
}

添加方法也可以使用以下
新類.prototype.方法 = fn(){}

繼承類語法

class 新類 extends 父類{
　constructor(所有參數) //包含新增參數
　super(父類參數) //注意在this.屬性前使用，挪用父類的參數
　//簡單理解成目前的this是父類，故會發生錯誤，需使用super

　this.屬性 = 屬性; //賦予this.屬性(成員)值(傳入的參數值，在所有參數中)
}

以類創建類補充

以類創建類 (構造器創建構造器)

最初定義新構造函數
fn 新構造(全部參數，包含原型對象構造器參數){
原型構造器.call(原型參數)
this.屬性、方法...
}

第二步繼承自構造器（才可以向上尋找
新構造器.prototype = Object.create(原型構造器)

第三部將構造器基准定位置新構造器（循環尋找自身新構造器，原先定位在原型）
新構造器.prototype.construstor = 新構造器

get、set

使用get set函式可以在調用及設置時運行代碼
應該歸 類、物件中（應也可以置於構造器中？）
get 虛擬屬性(){
　//其他運行代碼
　return this.屬性
}
set 虛擬屬性(新值){
　this.屬性 = 新值
　//其他代碼
}

繼承用意

對象繼承的使用
當開始創建相似的對象時，何不常用功能的通用
而在需要更特殊的對像類型時，在繼承自能特性，即更方便使用。

繼承的原理
功能的共享雖不繼承，其適用為委託
因為該特殊對象並不會復制其通用功能。

對象的使用
創建相關變量、函數時，並希望可以打包、追踪，
分類使用對象。
對像在希望把數據集合起來給另一個端時，非常特殊。
（這些都可以在不使用構造器、繼承下使用；簡單的對象）。

其他

const 宣告的變數物件，可以直接改屬性，不得"賦值
ex:

const obj={tag:"Hello"}
obj.tag="goodbye"
ex:

const obj={tag:"Hello"}
obj={} //Uncaught TypeError //物件->"賦值"物件

let 的變數才可以改變型態，得賦予

let obj={tag:"Hello"}
obj={} //物件->"賦值"物件

JSON

JSON 物件表示法
JavaScript 對象表示法
將結構化數據格式為JS物件的標準格式
常用於網站上的資料、傳輸
例如：將資料從服務器端傳送到用戶端，以顯示網頁

當你從JSON中讀取資料時，JSON可作為物件。
當要跨網路發送JSON時，就是字串

JSON方法

接收到字串作為JSON數據，需轉換(返回)成對象
ex: .responseType="text" 、 "{"tag"："Hello"}"
使用JSON.parse函式
ex: *
onload = fn(){
返回 = 請求對象.reponse //若返回的是上述字串型別，則使用下列函式式
返回 = JSON.parse(返回) //返回為字串的情況下，函式將字串轉換(返回)為對象
其他...
}

把對象 轉換(返回)為JSON字串
JSON.stringify(對象)
上段例子即是
返回 = 請求對象.reponse
返回 = JSON.stringify(返回)

未完待續

(2021/07/22以後物件、非同步，尚未整理)