前言

這篇會來整理關於JS原型、類別、物件導向、原型鍊、繼承、建構子等。這幾個關聯又有點難懂的關鍵字，在學JS時時常聽到，一開始只是去使用JS、Vue到現在去了解他背後運作的原理，才恍然大悟原是這樣啊！

Javascript

JavaScript 是一個以原型為基礎 (Prototype-based)、多範型的、動態語言。支援物件導向(Object-oriented programming, OOP)、指令式以及宣告式 (如函數式程式設計)。

前言

箭頭函式(Arrow Functions)是一個ES6的新語法，對我來說前前後後接觸js，一直有碰到this，但要詳細解釋還是很難，因此想藉由這篇讓我更加深this的觀念，會整理出this在箭頭函式的差別與其他this的觀念。另外感謝Kuro大的文章，讓我更容易了解this，分享連結在下面。

前言

這篇會來整理宣告變數傳統的var和ES6新語法let, const的差異比較。

var

傳統變數宣告，作用域(scope)為function，在function內宣告只有在function才有作用。如果在function外則為全域(global)。

1
2
3
4

function fn(){
  var a = 'ABC';
};
console.log(a); //  a is not defined

前言

接續上一篇同步非同步霧煞煞(上)-AJAX，這篇會介紹Callback hell, promise, Async, Await

Callback hell 回呼地獄

上一篇提到有非同步特性方法像是Ajax, setTimeout等，當我們使用這些有非同步特性方法，但又希望可以按照我們想要的順序來執行時，一種解決方式是用callback function

Introduction

• Day 36 - ES6 起步走 - Template String 樣板字串
• Day 37 - let 與 const
• Day 38 - let 與 const 觀念複習
• Day 39 - 箭頭函式(arrow function)
• Day 40 - ES6 團戰關卡
• Day 41 - new Date() 時間處理
• Day 42 - new Date() 與字串處理
• Day 43 - GitHub Pages
• Day 44 - window.location
• Day 45 - window.location
• Day 46 - window.location

前言

這篇會來介紹正規表達式，第一次看到正規表達式時，只會想說這是什麼鬼…為何一小串就可以做完一般判斷式可能要寫好幾行的事。如果可以更深入了解活用的確可以在coding中幫助極大。因此這次我會藉由這篇讓我自己更釐清觀念。

介紹

正規表達式(Regular Expression, RegEx)是被用來匹配字串中字元組合的模式。
常搭配與這些字串方法(match、replace、search、split)來使用。

為什麼使用正則表達式？

> 用來測試字符串是否符合模式

可以用於驗證，像是電話,Email,信用卡號碼是否輸入正確

> 收尋匹配的字串

> 取代匹配到的字串

> 擷取出匹配到的字串

正則表達式使用規則

前言

接觸Js一段時間後，開始學習如何串接API，剛開始時就直接先被介紹用了Axios這個好用的套件，但原理等等還是不能理解，因此看了很多文章文件，才摸索到原來同步,非同步,Event Queue,Ajax,XMLHttpRequest,fetch,promise,Async,Await等等之間的關聯性，才把觀念串通。這篇會來把我所認知的概念整理起來。

同步Synchronous與非同步Asynchronous

Javascript是單執行緒 (single threaded)、同步(Synchronous) 的程式語言，一次只能做一件事，但為何google上很多人都說Javascript是非同步呢？其實是使用setTimeout、AJAX、Promise等而有非同步的特性，但其實這些方法並不是由javascript程式語言本身提供的，不受單執行緒限制，他們會被放到Event Queue中。

前言

c3.js是一個免費開源的圖表套件，源自d3.js(操控SVG向量圖形進行資料視覺化的JavaScript程式庫)，類似的套件還有ChartJS

C3.js 圖表整合文件

前言

學習Javascript到應用時，最常使用的就是陣列方法來處理資料，因此多知道一個方法但不需要死背用法來的更重要。這篇也會持續更新學到的方法。

另外整理這篇的契機是在學習過程中，看了偷米騎巴哥的影片和整理圖，十分喜歡，也讓觀念更加清晰。

出處連結在此

• 偷米騎巴哥-操作JS陣列的20種方式

Introduction

接續上篇，這邊開始第11天 JS函式陣列

• Day 11 - 函式參數再練習
• Day 12 - DOM 操作
• Day 13 - 函式+if 判斷
• Day 14 - 監聽與函式設計
• Day 15 - 物件運用 - 資料與渲染分離
• Day 16 - forEach 與 HTML 字串累加
• Day 17 - innerHTML+forEach
• Day 18 - 字串相加 innerHTML+ 樣式搭配
• Day 19 - 驗收前夕
• Day 20 - BMI 計算機團戰關卡