iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 2
1
Modern Web

線上讀書會-2016 年學 JavaScript 是一種什麼樣的體驗系列 第 2

學Reactjs前先把JavaScript 基礎搞定嚕

Polo站在新手入門的角度 跟大家介紹 幾篇線上讀書會 JavaScript 快速入門篇 , 這邊推薦讀書會 Andy 大大的這一篇javascript入門影片 大約50分鐘

https://www.youtube.com/watch?v=-M3R1g3k1HM

整理影片內容中提到了幾個javascript入門重點

var - 本身不需要定義型別,例如 var x=5 這樣x就是Number,x="polo"為字串,x=true是布林,x=[]為陣列
Number - 除了ParseInt("500",10) 可以變化不同進位比較重要的是isNaN用來判斷是否為數字這個函數
Boolean - false, 0 ,'',NaN,null,undefined 都算 false歐 , 反之其他有值的數字就是 true
弱型態 - 這邊強調的是 兩個值做運算時如果兩個的 type 不一致則會導致問題舉例說 '6'+2 並不會等於8而是62
function - 除了正常的寫法外 還可以把function 匿名函數 當作一個變數 這個部分程式碼可以參考影片中的範例
object - var person=new Object(); person.name="polo"; 使用 new 就可以使用物件嚕
簡潔寫法 - 更簡單的三元運算 var data=(point>60)?"及格":"不及格"
使用json儲存 - 並使用 serialization 與 deserialization 通常用於傳送網路時要先serialization在實際使用時在使用deserialization 變回json 方便使用
&& - 例如影片中提到 connection && login() 就是要符合connection == true 後在執行login
|| - 通常使用在預設值
正規表示式 - 簡單demo 使用 repalce_all
=== 這個很多人不知道 三個等於在判別時連型別都要一致
function中使用object 傳遞方式 免去一推參數的麻煩
join - 可以使用某個字串或是符合串連陣列,最後輸出字串
concat - 組合兩個陣列
filter - 使用pure function 陣列會回傳過濾掉的條件後輸出
Closure (閉包) - 主要是在scope的範圍,運用可以參考影片中 3:45 秒部分
callback - 可以將函式放到另外一個函式的參數之中使用 ,常會看到用在 ajax,但是使用時要注意callback hell

然後Es6出現嚕

ecmascript - 介紹一下javascript的歷史,但es8快出來嚕,什麼!! (javascript變化真快啊),這邊有個重點是babel,如果是在瀏覽器端的話基本上Google已經有支援es6,但是其他瀏覽器沒有完全支持,所以大部份會使用babel這個工具去轉成es5的語法,目前主流 Browser 對 es6 的支援度都已經有 80% 含蓋率,詳細可以參考 http://kangax.github.io/compat-table/es6/ 另外再額外補充一點 在npm套件中可以使用babel-polyfill去填滿 各瀏覽器不足的部分歐 之後會再補充如何使用polyfill
default value - 可以在function(name='person'){...} 這個給預設值
let const - let 是某區段裡有效的變數可以想說是var的進階,不能重複名稱宣告,禁止在宣告前使用
,const就是常數 定義後就不能再變動了
String Template - 透符號` 包起來可以使用變數方式方式給值let str=`${name} 今天好嗎`,之前es5使用字串+號連結斷行會有許多問題,使用了這一帖就方便許多
arrow function - 省略了function
classes - 新增建構子以及class中function的function字可以省略

在讀書會中會推薦 andy大大 讀書會影片,是應為節奏很輕快,明暸,句句是重點參考 ,50分鐘學javascript的影片這是Cp值非常高的,很推大家來看看

承億 的這一篇 後半部提到的 javascript 作用域、閉包、this 觀念也很重要呦,而且講得很清楚易懂口條清晰思維引人入勝 影片中 19:20 地方開始
https://www.youtube.com/watch?v=14hNN6veRjc

javascript 的 scope ,Closure (閉包),this 是非常重要的,影片中會帶大家去了解這三個主題,真的看完後會恍然大悟
因為承億的部分,影片DEMO範例清楚快速理解,所以這邊建議直接觀看影片 19:20 開始 ,精采推薦別錯過嚕

那polo這邊主要是整理今年所參加過的一些讀書會心得,在排30天的順序再加上介紹給大家,希望可以降低想要學習reactjs的門檻,但目前也是在學習階段
如果對文中有不清楚或誤刊的地方隨時都可以加入 https://www.facebook.com/groups/906048196159262/ 一起討論學習成長

關於javascript 或是es6 其實都是很大的範圍,就介紹影片中大大介紹的的部分,需要更多es6的教學可以參考阮一峰老師的http://es6.ruanyifeng.com/ 的教學網址嚕 之後也會在介紹es6相關心得

另外 線上讀書會 2017/01/09 andy 大會再加開一場 javascript 入門 火力加強篇 歡迎要入門的朋友快來參加


上一篇
今年是2016年所以javascript要學reactjs,但怎樣入門呢
下一篇
什麼是 reactjs 可以吃嗎 基本入門
系列文
線上讀書會-2016 年學 JavaScript 是一種什麼樣的體驗30

1 則留言

2
Ivan Wei
iT邦新手 5 級 ‧ 2016-12-05 01:19:18

有幾個問題,

  1. function 的範例 var print=function(s){print('s')} 有明顯的問題,執行時應該會發生錯誤
  2. colsure 錯字,是 Closure (閉包) ,好像所有這個字都錯了
  3. EMCAScript(前端變化真快啊) ,我認為容易被誤解 JavaScript 只有前端,實際上還有 Node.js,而 Node.js 也已經支援 ES6+
  4. 承上,目前主流 Browser 近幾版的更新對 es6 的支援度都已經有 80% 含蓋率,詳細可以參考 這裡

我要留言

立即登入留言