常見的陣列運用方式

123456const people = [ { name: "bob", age: 20, position: "developer", id: 1 }, { name: "mary", age: 18, position: "cooker", id: 2 }, { name: "jim", age: 68, position: "artist", id: 3 }, { name: "tom", age: 28...

Read More

JavaScript - AJAX

AJAX非同步 JavaScript 及 XML (Asynchronous JavaScript and XML,AJAX)不是一種「技術」,而是一種開發架構,主要以 JavaScript 與 XML 為主,也包括 CSS、DOM(Document Object Model)與 HTML 等,最重要的是 XMLHttpRequest 物件。使 AJAX 能達到非同步資料交換的目的。使瀏覽器不需要重新載入整個頁面就可以跟後端或伺服器取得資料。Jesse Garrett 的文章中,對 AJA...

Read More

JavaScript - 單執行緒、同步與非同步

JavaScript 的執行方式是單執行緒 (single threaded) 可以理解成它一次只做一件事情。 單執行緒單執行緒的意思是任務的執行需要排隊。瀏覽器只分配給 JavaScript 一個主執行緒(stack),但一次只能執行一個任務,這些任務形成一個事件佇列 (Queue) 排隊等候執行,但是瀏覽器不只運作 JavaScript 這個程式而已。因為瀏覽器的內核是多線程的,它們藉由瀏覽器內核的控制保持同步,舉例來說有三個常駐線程: JavaScript 引擎 GUI 渲染 瀏覽...

Read More

JavaScript - Hoisting(提昇)

重點有三: 變數宣告跟函式宣告都會提升 只有宣告會提升,賦值不會提升 別忘了函式裡面還有傳進來的參數 Javascript 執行時會經過創造執行環境的階段。JavaScript 跟其他程式語言不同,它可以在還沒宣告函式前就先呼叫並且執行。在下列的範例中,假如我們把呼叫移到程式碼最上方,函式宣告之前,會發生什麼事?JavaScript 不僅執行函式,而且沒有錯誤。Called b! 正常印出來,代表函式 b 正常執行,但是 undefined 是怎麼回事? 123456b();conso...

Read More

JavaScript - Closure(閉包)

參考來源一參考來源二參考來源三參考來源四參考來源五 閉包是 JavaScript 最強大的特性之一。JavaScript 允許巢狀函式(nesting of functions)並給予內部函式完全訪問(full access)所有變數、與外部函式定義的函式(還有所有外部函式內的變數與函式)不過,外部函式並不能訪問內部函式的變數與函式。這保障了內部函式的變數安全。另外,由於內部函式能訪問外部函式定義的變數與函式,將存活得比外部函式還久。 MDN 範圍鏈複習閉包概念與範圍鏈關係密切。範圍鏈的一...

Read More

JavaScript - LocalStorage(本機端儲存)

LocalStorage 是一種在瀏覽器資料庫中儲存資料的方式,允許將資料儲存在瀏覽器中。有兩種型態的網頁儲存:本機端儲存 (LocalStorage)、連線期間儲存 (SessionStorage) cookie在 HTML5 之前,cookie 是瀏覽器儲存資訊最主要的方式,是伺服器傳送給使用者瀏覽器的一個小片段資料。常見的應用是判例如: 廣告追蹤、身份驗證、購物車,或任何其他伺服器應該記住的資訊 但限制如下: 不能儲存太多資料,有容量的限制 4kb 每次請求網頁時都需傳送到伺服器端...

Read More

JavaScript - Event bubbling and capturing (事件冒泡與捕獲)

參考來源一參考來源二 事件機制JavaScript 是「事件驅動」的程式語言,雖然瀏覽器在載入網頁後就會讀取 JavaScript 相關程式碼,但只有等到「事件」發生 (像是使用者滑鼠點擊、按下鍵盤)才會執行相關程式。 以網頁對話框為例:按下開啟 (觸發事件)-> 彈出對話框 (執行相關事件) 這整個對話框從觸發到開啟的過程牽涉到 DOM 的事件流程,就是「網頁元素接收事件的順序」 事件流程 (event flow)由於 inner 也是 outer 的一部分,所以點擊 inner ...

Read More

JavaScript - Event-addEventListener (事件監聽)

事件 EventEvent 事件就是在瀏覽頁面的時候,根據使用者不同的行為,而觸發瀏覽器不同的動作。(例如使用者點擊、按下鍵盤等) w3school - event sample 常見事件類型 click 點擊事件 mousedown 按下滑鼠 mouseup 放開滑鼠鍵 mouseenter 游標移入 mouseleave 游標移出 事件監聽 (addEventListener)JavaScript 是一種由「事件驅動」(Event-driven)的程式語言,在瀏覽器載入頁面的時候,要...

Read More

JavaScript - DOM

DOMDOM (document object modal) 是一種應用程式介面 (API),能以樹狀結構描述頁面元素在瀏覽器的組成結構。DOM 定義特性和方法,供程式存取和變更模型中的每個物件。DOM 讓文檔可以採取為由節點和物件 (包含屬性和方法的物件)的組成結構。簡言之,DOM 連接了網頁、腳本及程式語言。 參考來源一 下面範例,HTML 裡面每個元素、屬性都代表著其中一個節點 123456<html> <head>my title</head>...

Read More


Powered by Hexo and Hexo-theme-hiker

Copyright © 2013 - 2020 CYC'S BLOG All Rights Reserved.

UV : | PV :