本文內容涵蓋
- Web 應用程式生命週期
- 處理 HTML 以產生網頁
- JS 程式碼的執行順序
- 與事件互動
- 事件迴圈
Web 應用程式生命週期
Web 應用程式真正的生命起始於第四步驟:收到伺服器回傳的頁面時。
Web 應用程式真正的生命起始於第四步驟:收到伺服器回傳的頁面時。
記錄著關於初學 REACT 時,官方文件提及的主要概念,基本上都是文件上的內容,希望用自己是初心者的方式整理關於 JSX、生命週期、事件處理器、官方文件的觀念,可以更記得住。
ReactDOM.render(<h1>Hello, world!</h1>, document.getElementById('root'));
往下瞭解其他概念之前,可以先閱讀「重新介紹 JavaScipt」,如果好幾年沒碰 JavaScript 的話,看一下「三個心法」。
它是一個「打包工具」。將眾多模組與資源打包成一包檔案,並編譯我們需要預先處理的內容,變成瀏覽器看得懂的東西,讓我們可以上傳到伺服器。
前端日新月異,我們寫的內容已不只是寫 HTML、CSS、JavaScript 單純的檔案。前端出現了許多預處理工具及框架,預處理工具如 PUG、SASS、Babel;框架如 Vue、React。不過瀏覽器並看不懂我們寫的預處理內容,每每都需要透過編譯才能使用,也因此出現了自動化工具,Webpack、Gulp、Grunt、Parcel、Browserify…等。
// 原始寫法
function test(fruit) {
// 條件語句
if (fruit === "apple" || fruit === "strawberry") {
console.log("red fruit");
}
}
乍看之下,寫法沒什麼錯誤。可是當我們有更多紅色水果的選項時,如 cherry
(櫻桃)和 cranberries
(蔓越莓),難道我們要增加更多的 ||
邏輯運算子來判斷?
我們用 Array.includes 來改寫一次上面的判斷式:
// 改寫後
function test(fruit) {
// 將選項提取出來,放入陣列當中
const redFruits = ["apple", "strawberry", "cherry", "cranberries"];
if (redFruits.includes("apple")) {
console.log("red fruit");
}
}
i
for(var i = 0; i<10; i++) {
console.log(i)
}
console.log(i) // 10
10
。i
本篇文章翻譯自 How to clone an array in JavaScript - by Yazeed Bzadough on freeCodeCamp @medium,搭配 JS 的拷貝 by Kai @github 提及的概念,整理成筆記。
8.
JSON.parse and JSON.stringify 是深拷貝。其他都是淺拷貝。object
時,會參考到同一個物件,並沒有將此物件拷貝到並建立出新的關聯。object
時,會獨立出來不共用同一個記憶體位置,改動 newObject
時不會動到 oldObject
。將 this
鎖在 function
當中。
為了取代舊有的.bind()
(.bind()
會綁定 this 到指定的 obj
)。
只要 function
內的 this
還要再往下傳的時候,就適合使用 arrow function
。
node.js
JavaScript
運行於瀏覽器外。LTS
是較穩定的版本,Current
是有其他新的功能。iTerm
建立 js
檔案,並用 node
執行寫好的程式。JavaScript
:vim index.js
// index.js
console.log(123)
前置 確保電腦與手機裝置是在同一個網域底下 要確認電腦是否有裝 python 方法(2019-07-16 更新) 在 iTerm 進入專案的資料夾根目錄。 找到對外 IP,要找 IPV4 的 。 ifconfig // MacOS ipconfig // Windows 輸入以下指令,預設 port
名詞解釋 Staging Area (Index) 暫存區域是一個單純的檔案,一般來說放在 Git 目錄,儲存關於下一個提交的資訊。有時稱為索引(Index),但現在將它稱為暫存區域已開始成為標準。 用來比較差異的 diff 指令 比較 Working Directory 和 Staging Are
1. array 複數 像火車車廂的概念。 有順序性,可以放各種資料,但建議資料類型相似的一組資料結構/格式。 適合資料處理。 表達複數的概念,多個相同的複類別。 可以放不一樣型別的值,而強型別語言中都會相同型別的值。(2019-7-16 更新) 2. object 單數 單體 描述 Key,紀錄
緣起 為了解決 facebook API 需要 https,所以利用 ngrok 架了一個網頁伺服器(Web Server)。 跟著步驟做,輕鬆就能架起來,並且可以達成以下這些事: Public URLs for sending previews to clients. 讓客戶可以輕鬆預覽你的專案。
基礎知識 JQuery AJAX: contentType 不填寫時,預設為 application/x-www-form-urlencoded 。 FormData FormData 介面可為表單資料中的欄位/值建立相對應的的鍵/值對(key/value)集合,之後便可使用 XMLHttpRequ
我是 Askie Lin,一位前端工程師。 這裡是我放置想法、靈感與筆記的部落格,平常喜歡透過實驗性的事情來驗證學習,Web 技術實在是很有趣且永遠學不完的領域,自從與好想工作室夥伴們一同參與 iT 邦鐵人賽寫完實踐無障礙網頁設計(Web Accessibility)更加深對於親和力網頁的關注。 L