[Javascript] Falsy & Truthy

falsy

1. false
2. 0
3. ''
4. ""
5. null
6. undefined
7. NaN

truthy

others are truthy

[Javascript] Keyword

運算符號優先順序
javascript operator precedence

字串逃漏字元
javascript escape notation

內建物建
Standard built-in objects

[Javascript] What is Prototype?

Function's prototype

It is the object instance that will become the prototype for all objects created using this function as a constructor.

Object's prototype

It is the object instance from which the object is inherited.

[Back To Basic] Javascript - XMLHttp

XMLHttpRequest

• XMLHttpRequest 是 AJAX 的基石
• 所有瀏覽器都支援(IE7+)
• 可在背景進行資料交換

跨域訪問

• 為了安全的理由，現今瀏覽器不允許跨域訪問。
• 網站和資料來源需要在同一個伺服器上

舊瀏覽器(IE5、IE6)

• 舊瀏覽器使用ActiveX代替XMLHttpRequest

XMLHttpRequest 物件方法

• new XMLHttpRequest()
• 建立XMLHttpRequest物件

• abort()
• 取消現存請求

• getAllResponseHeaders()
• 取得所有Header資訊

• getResponseHeader()
• 取得指定Header資訊

• open(method, url, async, user, psw)
• method: GET POST...
• url: 檔案位置
• async: 是否要非同步處理
• user: 使用者名稱
• psw: 使用者密碼

• send()
• 發送請求(get使用)

• send(string)
• 發送請求(post使用)

• setRequestHeader()
• 新增請求的Header

XMLHttpRequest 物件屬性

• onreadystatechange
• 當readyState改變成ready時，要執行的function

• readyState
• XMLHttpRequest的狀態
• 0: 請求尚未初始化
• 1: 伺服器連線建立
• 2: 請求被接收
• 3: 處理請求中
• 4: 完成請求，且response已回覆

• responseText
• response的資料視為text

• responseXML
• response的資料視為XML格式

• status
• 請求回覆的狀態(代號)

• statusText
• 請求回復的狀態(文字)

source code

[Back To Basic] Javascript - AJAX

什麼是AJAX

AJAX(Asynchronous JavaScript And XML): 非同步的javascript和XML

• AJAX不是程式語言
• AJAX是藉由 XMLHttpRequest 向伺服器發出請求並透過HTML和Javascript顯示資料的組合
• AJAX是一個不太好的名稱，傳輸的資料格式可以用XML也可以用json
• 可以更新部分的頁面，不用重新載入整個頁面

source code

[Back To Basic] Javascript - Cookies

什麼是 Cookie

• 當 Server 傳送頁面到瀏覽器(browser)時，Server 會遺忘所有跟使用者(User)有關的資訊
• Cookie 的目的就是紀錄和使用者(User)有關的資訊
• 當瀏覽器(browser) 向 Server請求(request)頁面時，cookies會附加在請求(request)上，達成上述目的
• 所以 cookie 會跟著每一個請求(request)
• 存太多資訊在 cookies 會有效能問題

新增 Cookie:

document.cookie = "userName=Shawn";

指定有效日期: 

document.cookie = "userName=Shawn; expires=Thu, 18 Dec 2019 12:00:00 UTC";

指定路徑:

document.cookie = "userName=Shawn; expires=Thu, 18 Dec 2019 12:00:00 UTC; path=/";

讀取 Cookie:

const data = document.cookie;

變更 Cookie:

• 跟新增 Cookie 做法相同。
• 舊的 Cookie 會被覆蓋掉。

刪除 Cookie:

• 指定有效日期(讓它過期)
• 且指定路徑，確保刪除正確的 Cookie

source code

[Back To Basic] Javascript - Timing Events

Javascript ，可以指定特定的時間間隔(time intervals)，執行函式。

共有三種方法跟時間間隔(time intervals)有關:

• setTimeout(function, milliseconds)
• 等待 milliseconds 後，執行一次 function

• setInterval(function, milliseconds)
• 每經過 milliseconds ，執行一次 function，持續不斷

• clearTimeout(timeoutVariable)
• 停止指定的計時

source code

[Back To Basic] Javascript - Popup Boxes

javascript有三種彈出窗(popup boxes)

• Alert Box

window.alert('alert');

• Confirm box

window.confirm('Yes or No');

• Prompt box

window.prompt('enter somthing:', 'Test');

source code

[Back To Basic] Javascript - Navigator

window.navigator 包含了訪客的瀏覽器資訊。

• cookie是否啟用: navigator.cookieEnabled
• 瀏覽器的應用名稱: navigator.appName
• 註: IE11, Chrome, Firefox, and Safari的應用名稱都是NetScape
• 瀏覽器的應用代碼名稱: navigator.appCodeName
• 註: Chrome, Firefox, IE, Safari, and Opera的應用代碼名稱都是Mozilla
• 瀏覽器引擎的產品名稱: navigator.product
• 註: 大部分瀏覽器都是Gecko
• 瀏覽器版本: navigator.appVersion
• 使用者代理標頭: navigator.userAgent
• 瀏覽器平台(作業系統): navigator.platform
• 瀏覽器語言: navigator.language
• 瀏覽器是否連上網路: navigator.onLine
• 使否可使用Java: navigator.javaEnabled()

註: 不要用這些資訊判斷瀏覽器的版本

source code

[Back To Basic] Javascript - History

window.history 包含瀏覽器的歷史

為了保護使用者的隱私，javascript 在操作這個物件上，會有一些限制。

• 回到上一個 url: history.back()
• 前往下一個 url: history.forward()

source code

[Back To Basic] Javascript - Location

window.location 可以取得現在頁面的 URL，且可導向到新的頁面

• 取得現在頁面的URL: location.href
• 取得網域名稱(domain name): location.hostname
• 取得現在頁面的路徑和檔案名稱: location.pathname
• 取得現在頁面使用的協定: location.protocol
• 導向新的頁面: location.assign('新的URL')
• 取得現在頁面使用的port號: location.port
• 大部分的瀏覽器不會顯示預設的port號

source code

[Back To Basic] Javascript - Screen

• window.screen 包含使用者螢幕的資訊
• window.screen 的 window 可以省略寫成 screen.xxx

screen 的屬性(properties)

• 螢幕寬度: screen.width
• 螢幕高度: screen.height
• 螢幕可視寬度(扣除任務欄、邊框等): screen.availWidth
• 螢幕可視高度(扣除任務欄、邊框等): screen.availHeight
• 顏色深度(單一顏色使用N個 bits):screen.colorDepth
• 螢幕像素深度: screen.pixelDepth

source code

[Back To Basic] Javascript - Window

BOM(Browser Object Model)

• 瀏覽器物件模型，允許 javascript 和瀏覽器溝通。
• 沒有官方標準
• 大部分現代瀏覽器都已經實作

Window 物件(Object)

• 被所有的瀏覽器支持
• window 代表的就是瀏覽器
• 所有全域的 javascript 物件、方法、變數都是 window 的一部分
• 全域變數(global variables) 是 window 的屬性(properties)
• 全域函式(global functions) 是 window 的方法(methods)

DOM是Window的一部分

視窗大小(window size)

這兩個屬性(properties)可以決定視窗的大小

• window.innerHeight 瀏覽器高度
• window.innerWidth 瀏覽器寬度

註: 這兩個數值不包含滾動條(scrollbar)和工具列(toolbar)的寬、高度

IE瀏覽器

IE8、7、6、5使用以下的屬性

• document.documentElement.clientHeight
• document.documentElement.clientWidth
• document.body.clientHeight
• document.body.clientWidth

跨瀏覽器解決方案

var width = window.innerWidth

    || document.documentElement.clientWidth

    || document.body.clientWidth;

var height = window.innerHeight

    || document.documentElement.clientHeight

    || document.body.clientHeight;

source code

[Back To Basic] Javascript - DOM Node Lists

NodeList 物件(objects) 是一組從document中的節點(nodes)。

NodeList 和 HTMLCollection 幾乎相同。

• getElementsByClassName() 有些瀏覽器回傳 NodeList，有些回傳 HTMLCollection
• childNodes 回傳 NodeList
• querySelectorAll() 大部分瀏覽器回傳 NodeList

NodeList和HTMLCollection的差別

• HTMLCollection 可以用 name / index / id 來搜尋；NodeList 只能用 index
• NodeList可以包含 attributes nodes 和 text nodes；HTMLCollection不行

HTMLCollection 不是陣列，不能用陣列的方法(methods)

source code

[Back To Basic] Javascript - DOM Collections

HTMLCollection 是一個物件(object)，陣列狀的一種型別。

可以用 index 取出 HTMLCollection 中的元素

e.g.
const collection = document.getElementsByTagName('p');
const text = collection[1].textContent; // 取出文字

取得 HTML Collection 數量: collection.length; // 取得長度

HTMLCollection 不是陣列，不能用陣列的方法(methods)

source code

[Back To Basic] Javascript - DOM Nodes

新增節點

• 建立元素
• 附加元素

const div1 = document.createElement('div'); // 建立元素

const text1 = document.createTextNode('This is my div'); // 建立文字節點

div1.appendChild(text1); // 附加文字

document.body.appendChild(div1); // 附加元素到body

insertBefore()

附加元素都會在最後面，若想新增再最前面可用 insertBefore()

語法: parent.insertBefore(newChild, refChild);

parent: 父節點

newChild: 新增的節點

refChild: 參考的節點

新增的節點，會新增在參考的節點之前

const text2 = document.createTextNode('This is my second setence.');

div1.insertBefore(text2, text1);

刪除節點

• 刪除元素

div1.removeChild(text1);

刪除時一定要知道"父節點"是誰，很麻煩。

最常使用的解決方式(找出自己的父節點，再刪除自己)：

text1.parentNode.removeChild(text1); // 刪除text1

替換節點: replaceChild()

語法: parent.replaceChild(newChild, refChild);

parent: 父節點

newChild: 新增的節點

refChild: 要被替代的節點

const text3 = document.createTextNode('My new text3.');

div1.replaceChild(text3, text2);

source code

[Back To Basic] Javascript - DOM Navigation

HTML DOM是由節點(nodes)所組成。

節點(nodes)和節點(nodes)之間有階層關係(上下或平行)，可以用以下方法來切換節點。

• parentNode
• childNodes[nodenumber]
• firstChild
• lastChild
• nextSibling
• previousSibling

DOM Root Node

可以透過以下兩個方法來取得整個頁面的DOM

• document.body
• document.documentElement

屬性: nodeName

• 永遠是大寫
• 唯讀
• HTML元素(elements)節點的nodeName是標籤(tag)名稱
• HTML屬性(attributes)節點的nodeName是屬性(attributes)名稱
• 文字節點(text nodes)的nodeName永遠是 #text
• 文件節點(document nodes)的nodeName永遠是 #document

屬性: nodeValue 

• HTML元素(elements)節點的nodeValue是null
• 文字節點(text nodes)的nodeValue是自己本身
• HTML屬性(attributes)節點的nodeValue是屬性值

屬性: nodeType

會回傳目前節點的類型

• 1: HTML元素(elements)節點 / ELEMENT_NODE
• 2: HTML屬性(attributes)節點 / ATTRIBUTE_NODE
• 3: 文字節點(text nodes) / TEXT_NODE
• 8: 註解 / COMMENT_NODE
• 9: 文件節點(document nodes) / DOCUMENT_NODE
• 10: 文件型態節點 / DOCUMENT_TYPE_NODE

source code

[Back To Basic] Javascript - DOM EventListener

事件監聽(Event Listener)

• 可以附加處理邏輯(event handlers)到特定的HTML元素(elements)上
• 不會覆蓋原本存在的事件(events)
• 可以附加多個事件到同一個HTML元素(element)上
• 可以附加多個處理邏輯(event handlers)到同一個HTML事件(events)上
• 可以附加到任意 DOM object 上，e.g. window object
• 完全分離 HTML 和 javascript，提升可讀性

• addEventListener(): 新增處理邏輯
• removeEventListener() 移除處理邏輯

addEventListener()

語法: element.addEventListener(event, function, useCapture);

• event: 事件名稱，不用加on，e.g. click 不要用 onclick
• function: 事件發生時，要執行的 function
• useCapture: true：事件冒泡(event bubbling) / false：事件捕獲(event capturing)，預設false(外層先處理，內層後處理)

事件捕獲(event capturing) 和 事件冒泡(event bubbling)

HTML DOM 的事件傳播(event propagation)有兩種，捕獲和冒泡。

事件傳播(event propagation)，定義了事件(events)發生時，元素(elements)的順序。

e.g.

<div>

  <p></p>
</div>

若點擊p時，應該先執行 div 的 click 事件，還是 p 的 click 事件呢？

事件冒泡(event bubbling)：內層先處理，外層後處理；p先處理，div後處理

事件捕獲(event capturing)：外層先處理，內層後處理；div先處理，p後處理

IE8

addEventListener() 和 removeEventListener() IE9以後都支援。

IE8以前要用 attachEvent 和 detachEvent

var button = document.getElementById("button");

if (button.addEventListener) {     // For all major browsers, except IE 8 and earlier

 button.addEventListener("click", myFunction);

} else if (button.attachEvent) {   // For IE 8 and earlier versions

  button.attachEvent("onclick", myFunction);

}

source code

[Back To Basic] Javascript - DOM Events

javascript 可以和 HTML 的事件(events) 互動。

• 在HTML中使用 this ，代表該 HTML DOM

e.g.

<div id="demo1" onclick="demo1click(this)">Click me</div>

this代表整個 <div></div>

• 可在 HTML 上直接加入事件，也可用 javascript 賦予事件

<button onclick="demo2click()">Show Time</button>

<button id="show-date">Show Time !</button>

document.getElementById('show-date').onclick = demo3click;

onload 和 onunload

當進入或離開頁面時，可使用者兩個方法。

source code

[Back To Basic] Javascript - DOM Animate

改變 HTML 和 CSS 都非常容易，試試 animate 吧。

動畫會和時間互動，因此會使用到

• setInterval(handler, interval)
• clearInterval(handle)

• setInterval會回傳一個數字，這個數字是 handler 的代號
• handler 是一個 function，每隔 interval 毫秒，執行一次。
• clearInterval 可停止一個 handler，做為結束的用途

source code