打造資深實力 - 你該學好的 JavaScript - 高見龍

歡迎來到 MOPCON 2020 共筆

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

共筆入口：https://hackmd.io/@mopcon/2020
手機版請點選上方按鈕展開議程列表。

講者

高見龍 @eddiekao
- a.k.a Eddie
部落格
 小教室

投影片連結：https://speakerdeck.com/eddie/learn-javascript-well

學習不需要為公司，不為長官，不需要為別人，只為你自己
高見龍

轉職軟體工程師？

484學會框架就能找到工程師工作！？
內容自行謹慎評估

大綱

Javascript 的好與不好
那些有趣的 JavaScript 語法背後的故事
你該把技能點數點在這些地方！
新手上路到老馬識途

JavaScript 的好跟不好

花惹發.., JavaScript 那什麼爛設計！(# ﾟДﾟ) 高見龍

世界上只有兩種程式語言，一種被罵到臭頭，一種沒人在用 (OS: 嘴巴上罵，身體卻很誠實)
C++ 之父 Bjarne Stroustrup

JSLint

可能會讓你覺得自己不會寫程式！

function hello() {
    console.log('Hello, world!');
}

vs.

function hello()
{
    console.log('Hello, world!');
}

每種程式語言都有好跟不好的一面
只花十天就開發出來，就不要太苛刻(?)
不要只是跟著鄉民一起罵，要拳拳到肉（才會痛?

有趣語法

JS 變數宣告

你知道變數宣告是怎麼回事嗎？
var、let、或都不要用（會掛到 window 物件下面）
```
console.log(a);
var a = 1;
/* output: undefined */
```
變數提升 Variable Hoisting
編譯 vs. 直譯 Compilation vs. Interpretation
- 硬要區分的話，JavaScript 算直譯，但因為執行有分階段
建立期 v.s.執行期
- 建立期
  - (1A)註冊名稱(Identifire) + (1B)進行初始化
- 執行期
  - 執行函數 / 變數賦值


a = 1;
console.log(a);

在建立這段1a時會給一個變數初始值，因此在建立conlog(a)是不會執行的
在第二階段執行期




var a = 1;
var a;
console.log(a);
// output: 1





if(false) {
    var a = 1;
}
console.log(a);
// output: undefined

另一種變數宣告 – let




console.log(a);    // reference Error
let a = 1;
// 因為let不會有變數提升嗎？
// a會被蓋起來 TDZ

建立期
第一階段宣告1a 但第二階段不會跑1B，會有個蓋子蓋住a變出 tdz
執行期：
- 遇到 TDZ，拋出 reference error
  暫時死區ＴＤＺ (Temporary Dead Zone)


let a = 1;
console.log(a);

第一階段1a被蓋子蓋起來了（ＴＤＺ），第二階段才有a=1

let是新版的var?(有爭議，且不能完全替代)

Function 宣告








sayHello(); //這行不動

function sayHello() {
/**
 * 這邊 sayHello() 1a 1b在建立時都做完了，後面才執行2
 **/
 console.log('hello');
}

看到{}為物件也是一個Block;









{
    // 這裏的"hello"不是key, 是 label
    hello: for(let i=0 ; i<10 ; i++) {
        if(i % 2 == 0) {
            continue hello;
        }
        console.log(i);
    }
}

+加號還是十字架?
//coercion => 會被強制轉型轉出奇怪的結果






+'' // 0
+[] // 0
+{} // NaN
+-1 // -1
+true // 0
+null // 0

如何嘲笑JavaScript

三個都會動而且不會壞↓



[] + [] // ? -> ''空字串
// 空陣列加空陣列 依據JS手冊 會幫兩個物件做字串的轉型 然後會得到空字串
//[].toStriing() + [].toString()


[] + {} // ? -> '[object Object]'
// 用中括號以字串轉型前面得到空字串，後面會得到[object Object]的空字串


{} + [] // ? -> 0
// 被解釋成 Block 後面接上 +[]，會得到 0

typeof NAN 印出來會是 Number
NAN用來表示不是數字，但他本身是數型態型態還是數字型態型態型態型態型態型態型態型態字

來源

兩個等號跟三個等號差別？

型別（型態）不同
- 兩個等號：比較型態
- 三個等號：比較值
  來源
- ref: 7.2.14章節

理解細節

就像尼特羅會長，雖然它存在過，但是沒人在乎他了。

你該把技能點數點在這些地方

技能點數有限
盡量點在 CP 值高的地方

如果要投資在JS的話…學工作較會用到的

深入 JavaScript

物件導向
JS：Prototype(其他語言：class)
function / closure
函數/Closure
this
~~我是誰~~
有箭頭函數跟沒箭頭函數
非同步
ES6 / Module

該學前端框架嗎？該學哪一個？

最輕量化的框架 Vanilla.js
聽眾

除非你原生JS超強，還能不學嗎…

2020 還要不要學 jQuery?

VAR 三大家
(jQuery)時代的產物，透過jQuery去存取DOM元素(還是有意義)
隨著ES6被拔了但還是很多舊專案在用。

該學資料結構，演算法嗎？

當時間有限，也許這不是第一考量 (前端的話)
前端：可以之後再補

版本控制git：（非業配）JD都說需要啦

Asset 打包工具

養成看文件，英文很重要

新手上路到老馬識途

不是科班畢業的…
- 素人轉職是有可能但並不輕鬆
- 講者本身也非本科系出身，但花了三年自己摸索
先學哪個語言
- 我要先學哪一款程式語言？
- 如果你有朋友是工程師可以跟他學一樣的看看
- 不管是什麼鳥語言，但首先你要先有會程式語言的朋友
- 先拿到入門的門票，先跨過那道檻
做學問的方法
- 大部分的技術，都是為了解決特定問題
老馬識途之輸入篇
- 官網文件 ECMA （超無聊但有code可以看）<- EMCA 有扣? <- 是pseudocode吧?
- MDN (好一些而且有範例code)
理解細節
不要再相信沒有根據的說法了
讀書!

閱讀原始碼

跟著打程式碼，跟著抄

輸出

試著去教別人
講給阿嬤聽(?)

如果阿嬤都聽得懂，那應該是真的講得很清楚
錄影＋自言自語
Side Project
- 寫文章當網紅(X)
- uBIN網址縮小燈
IT鐵人賽

當你學會原理，你就會看到不同的世界

以上です！

聊天室.:* ﾟ*｡☆

(´・ω・｀)　しょぼぼん。　
(╬ﾟдﾟ)▄︻┻┳═一嘣～嘣～嘣～嘣～嘣～嘣～嘣
(☄◣ω◢)☄ 很兇喔

(~ ‾▿‾)~
(◔⊖◔)つ
征服宇宙，征服地球 (=^ ↀωↀ ^=)ฅ 喵喵喵喵喵

請愛用 const, let

www找太快了8
聽到關鍵字就直接找了

JS裡面亂加檢乘除結果自行負責
JS其實是一種♂哲♂學
三位一體的語
我存在我又不存在–->種花冥國？–->幻夢境(New!!)
介於有跟沒有之間

NaN === NaN // false （白眼

一個JavaScript規則各自表述(???)
尼特羅：都死多久了還被拿來當成梗
尼特羅表示：

人生好難
為啥我學了JS…
等等…有多少人還知道天堂的，笑出來會被發現是老人嗎
人生苦短愛用Python..等等…這裡JS場？！抱歉我走錯了XD

同是迷因系Python工程師一起貼貼(?)

沒錯！
每個人都忘記還有暴力牧師了!
暴力牧師：點力量錯了嗎？
亞絲娜表示？

要學的太多了我學學投胎好了。

老子學不動了
不懂這著梗的點一下連結XD
人生重來槍（遞
還可以順便轉生到異世界嗎？
有很大機率投胎不會變成人喔…
就算變成人也可能投胎在對岸…
怕，我還是投胎成貓貓，每天只要可愛跟可惡就好(=^ ↀωↀ ^=)ฅ

學習程式語言之從入門到入土

Mysql從刪庫到跑路
C語言從入門到放棄

框架戰爭要開打了嗎
到哪都有鄙視鏈怕
維護的時候還是不得不學 jquery

UI被要求要學前端框架正常嗎@@
這裡有一帖良藥，買了什麼框架就學會了

非相關科系錯了嗎？

當初我讀所謂的相關科系，我也沒有學任何程式語言啊XD ~~學校重心都放在商業軟體和ERP啊~~
資工也沒在教應用阿w

剛入門寫程式從新手到老手的過程

窩不知道要唸 vite，不僅連主持人都唸錯，高見龍都唸錯，窩怎麼可能唸對

Ｖ特！！！！！！　ヴィット！

葉佩沒關係～～再怎麼置入都比《我的婆婆》自然

阿罵表示：「我聽的懂喔」

JS台羅版要出了嗎

雙馬尾小姊姊好可愛

雙馬尾姊姊是ar那位嗎
–現在回來看這共筆迷因應該是最多的怕.jpg–

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`	在筆記中貼入程式碼
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.

打造資深實力 - 你該學好的 JavaScript - 高見龍

講者

轉職軟體工程師？

大綱

JavaScript 的好跟不好

JSLint

有趣語法

Function 宣告

如何嘲笑JavaScript

理解細節

你該把技能點數點在這些地方

深入 JavaScript

該學前端框架嗎？該學哪一個？

2020 還要不要學 jQuery?

該學資料結構，演算法嗎？

版本控制git：（非業配）JD都說需要啦

Asset 打包工具

養成看文件，英文很重要

新手上路到老馬識途

推薦書目

閱讀原始碼

輸出

當你學會原理，你就會看到不同的世界

以上です！

聊天室.:* ﾟ*｡☆

tags: `MOPCON 2020`

打造資深實力 - 你該學好的 JavaScript - 高見龍

講者

轉職軟體工程師？

大綱

JavaScript 的好跟不好

JSLint

有趣語法

Function 宣告

如何嘲笑JavaScript

理解細節

你該把技能點數點在這些地方

深入 JavaScript

該學前端框架嗎？該學哪一個？

2020 還要不要學 jQuery?

該學資料結構，演算法嗎？

版本控制git：（非業配）JD都說需要啦

Asset 打包工具

養成看文件，英文很重要

新手上路到老馬識途

推薦書目

閱讀原始碼

輸出

當你學會原理，你就會看到不同的世界

以上です！

聊天室.:* ﾟ*｡☆

tags: MOPCON 2020

tags: `MOPCON 2020`