Slide 1
Slide 1 text
+BWB4DSJQU#BTJD
Rails Girls Weekly
2015-09-15 @ 五倍紅寶⽯石出礦坑
Speaker: Win Wu
Week 1
Slide 2
Slide 2 text
About
Win
‣
‣ 2-3 year X Web Development
‣ Recently….
:P
@yiyingwu1990
Frontend HTML / CSS / JavaScript
Backend PHP / Node.js
…
Engineer
Slide 3
Slide 3 text
Agenda
๏ JavaScript Introduction
๏ IDE (Sublime…)
๏ JavaScript Debugging Tools
๏ 變數與運算⼦子
๏ 變數型態介紹
๏ 加減乘除, Numbers…
Slide 4
Slide 4 text
JavaScript Introduction
Slide 5
Slide 5 text
–w3schools
「 JavaScript is the programming language of
HTML and the Web」
and Server Side Language
Slide 6
Slide 6 text
• 早期由 Netscape 公司開發。
• 在 client 端就是利⽤用瀏覽器執⾏行，內嵌在網⾴頁的程式語⾔言。
註: Client 就是指使⽤用者操作端 ，Server 為在網路上提供服務的電腦
Slide 7
Slide 7 text
Frontend
Backend
Node.js
JavaScript
以網站開發的分⼯工來說，可以分為前端跟後端。
Client ⽤用⼾戶端 Server 端
Slide 8
Slide 8 text
Frontend
Backend
Rails / PHP / Java / Python
Go / Node.js …
HTML / CSS / JavaScript
In software engineering, the terms "front end" and "back end" are
distinctions which refer to the separation of concerns between a
presentation layer and a data access layer respectively.
- wiki
Frontend v.s Backend
mucho mucho!!
mucho mucho!!
Slide 9
Slide 9 text
前端跟後端都有很複雜的學問
如果你想更加了解兩種⼯工作的分野，可以從⼈人⼒力需求上去了解。
Slide 10
Slide 10 text
JavaScript is Powerful
HTML CSS
JavaScript
⾝身體構造 打扮
⾏行為/反應
HTML + CSS + JavaScript
可以讓網⾴頁達到互動性
它也可以知道 user 跟
網⾴頁之間的互動是什麼
Slide 11
Slide 11 text
JavaScrip can do…
JavaScript Can Change HTML Content / Attributes / Styles
(CSS)
Validate Input Data
Animation
Ajax (不⽤用刷新網⾴頁，即能更新資料)
Object base
任務不外乎三件事: (1)更新⾴頁⾯面 (2)取得伺服器的資料 (3)傳送資
料給伺服器。
Slide 12
Slide 12 text
JavaScript is Powerful
學好它，你可以透過 JavaScript 控制 HTML / CSS
但 不要失控 XD
Slide 13
Slide 13 text
Write for Who?
Boss ?
Browser
https://raw.github.com/alrra/browser-logos/master/main-desktop.png
Slide 14
Slide 14 text
瀏覽器要如何看得懂
JavaScript?
• 瀏覽器有 JavaScript 直譯器(不需要經過編譯器轉換)，
這個直譯器的⼯工作就是執⾏行出現在網⾴頁中的 JavaScript。
• 使⽤用 HTML 的 標籤
Slide 15
Slide 15 text
瀏覽器如何執⾏行
JavaScript?
• 循序執⾏行: 瀏覽器 load 到網⾴頁之後，載⼊入 JavaScript 之後就開
始執⾏行。
• 事件驅動: 當使⽤用者跟網⾴頁產⽣生某些⾏行為之後，觸發 JavaScript
程式碼來執⾏行某些程式。
onClick, onMouseOver, onChange, onSelect…
Slide 16
Slide 16 text
Script 標籤
JavaScript for 6 weeks
alert(“hellowin~”);
Slide 17
Slide 17 text
Script 標籤
JavaScript for 6 weeks
alert(“hellowin~”);
⽤用來讓 Browser 知道接下來是指令稿語⾔言，接著它
就會把這⼀一段當作是 script 處理⽽而⾮非 HTML。
script 必須要有結尾標籤
Slide 18
Slide 18 text
Script 標籤
JavaScript for 6 weeks
main.js
把程式移到另⼀一個檔案裡
Slide 19
Slide 19 text
Playground
http://jsbin.com/
https://jsfiddle.net/
http://plnkr.co/
Slide 20
Slide 20 text
元素名稱,
標籤名
屬性
值
Slide 21
Slide 21 text
Q: 的 type ⼀一定要有嗎?
以現在前端的發展來說不⼀一定需要，當初 <script>
的設計是希望 type 屬性能夠⽀支援多種指令稿，所以才會希望⽤用
type 指定使⽤用 JavaScript。
Slide 22
Slide 22 text
Q: alert 是什麼?
是⼀一種讓瀏覽器彈出視窗的函式，可以將想要對使⽤用者傳遞的資
訊以彈出視窗的⽅方式呈現。
Q: 函式是什麼?
⼀一段負責常⾒見的任務, 可以重複使⽤用的程式碼。
Slide 23
Slide 23 text
Debugging Tools
•按理，你無法在編輯器上寫程式的時候就知道會不會出現錯
誤。 (有些 Plugin 例外...，有的 Plugin 可以幫你檢查語法)。
•瀏覽器幾乎都會提供除蟲的⼯工具 (錯誤主控台)。但每家瀏覽器
的作⾵風(⽤用法)都不太⼀一樣。
•相信⼀一家瀏覽器不代表你能相信所有的瀏覽器。
•初學時，其實⼤大部份時候是⼈人為疏失，真正的 Bug 還蠻少的。
•出錯的地⽅方可能很簡單，但⼀一個⼩小地⽅方⾜足以讓網⾴頁發⽣生悲劇。
Slide 24
Slide 24 text
Debugging Tools
•瀏覽器不⼀一定會給你完全正錯的錯誤資訊，但通常會提供線
索。
Browser
IE F12
Firefox http://getfirebug.com/javascript
Google Chrome http://tinyurl.com/c-debugger
Opera Dragonfly
Safari 詳⾒見附圖
Slide 25
Slide 25 text
Debugging Tools - chrome
按右鍵 開啟 menu 尋找
Slide 26
Slide 26 text
Debugging Tools - Firefox
按右鍵 開啟 menu 尋找
Slide 27
Slide 27 text
Debugging Tools - Safari
偏好設定 > 進階 勾選在選單列中檢視『開發』選單
Slide 28
Slide 28 text
按下右鍵的檢查元件
Slide 29
Slide 29 text
Debugging Tools - IE
F12
Slide 30
Slide 30 text
JavaScript 三種 Error
•執⾏行期錯誤 Runtime Error
•語法錯誤 Syntax Error
•邏輯錯誤 Login Error
Slide 31
Slide 31 text
JavaScript 三種 Error
•執⾏行期錯誤 Runtime Error
因執⾏行的條件⽽而出現的錯誤，像是使⽤用者在表單輸⼊入特定的類
型, 或是無法處理的資料，試圖初始化前取⽤用物件等等。
Slide 32
Slide 32 text
JavaScript 三種 Error
•語法錯誤 Syntax Error
違反 JavaScript 語⾔言規則⽽而造成的錯誤。
Slide 33
Slide 33 text
JavaScript 三種 Error
•邏輯錯誤 Login Error
因錯誤邏輯造成的錯誤。
Slide 34
Slide 34 text
JavaScript 除蟲檢查
•確定括號都成對。
•沒有打錯字。
•適當的註解⼀一些程式碼。
•利⽤用 alert 或是 console 等函式來補助。
•變數命名避免跟保留字相衝。
Slide 35
Slide 35 text
JavaScript 語彙結構
⼀一個語⾔言的語彙結構講的就是指⼀一套基礎規則。
JavaScript 的語彙規則如下:
字元集: JavaScript 是⽤用 Unicode 字元集所撰寫。
⼤大⼩小寫之分: JavaScript 是區分⼤大⼩小寫 (case-sensitive) 的語⾔言。
Unicode 轉義序列。
正規化: Unicode 允許同⼀一個字元以⼀一種⼀一樣的⽅方式編碼。
註解: ⽀支援兩種註解⽅方式。
識別字: 識別字 (Identifier) ⽤用來為變數或是函式命名。
Slide 36
Slide 36 text
JavaScript 語彙結構
保留字: JavaScript 保留了幾個語⾔言本⾝身會⽤用到的單字，所以你
不能⽤用這些字當識別字 (變數名稱)，像是..
break delete function return typeof case do if switch
catch else in new null for default debugger try true
false …
Slide 37
Slide 37 text
JavaScript 註解
// 單⾏行註解
/*
多⾏行註解
我真的好幾⾏行
*/
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
JavaScript 變數及資料型別
JavaScript 的變數其實就是⽤用來儲存資料在某個地⽅方的意思
(嚴格來說是記憶體裡)，儲存資料之後，JavaScript 就會把他
記起來，⽅方便之後的計算或其他處理。
Slide 40
Slide 40 text
常數 (Constant) : 是不會改變的資料，如 Pi。
JavaScript 常數
Slide 41
Slide 41 text
變數 (Variable) : 是會在 JavaScript 執⾏行過程中
會改變的資料。
JavaScript 變數
Slide 42
Slide 42 text
不管是變數還是常數，都需要經過宣告，宣告必
須要給它⼀一個名稱，他都是⼀一個儲存資料的標
籤，⽐比⽅方說你要告訴 JavaScript 你要儲存 3.14
這個數字，但是你必須給 3.14 ⼀一個命名，然後告
訴 JavaScript 下次你會⽤用該命名跟他換真正儲存
的資料 (3.14)。
Slide 43
Slide 43 text
如何宣告⼀一個常數
宣告⼀一個常數要使⽤用 const 關鍵字。
⼩小⼼心! 有⼀一些⽐比較舊的瀏覽器不⽀支援。
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const
通常會⽤用全⼤大寫字⺟母命名
Slide 44
Slide 44 text
const 常數名稱 = 常數值;
Try it!
Slide 45
Slide 45 text
如何宣告⼀一個變數
宣告⼀一個變數要使⽤用 var 關鍵字。
Slide 46
Slide 46 text
var 變數名稱 = 變數值;
var 變數名稱;
等號(=) 把資訊存到變數裡。
Slide 47
Slide 47 text
變數宣告注意事項
• 變數名稱⼤大⼩小寫有別，如 errorMessage 跟 errormessage 是不⼀一
樣的。
• JavaScript 是⼀一個很鬆散的語⾔言，就算你不⽤用 var 關鍵字也可以
宣告變數，但這不是好作法 (幾乎可以說千萬不要這樣做)。
• 變數儲存的地⽅方是有範圍的，⼜又分為區域變數 (local variable) 跟
全域變數 (global variable)，我們之後在函式的地⽅方會在介紹。
• 命名要合法，必須以字⺟母, 底線(_), 或是 $ 開頭。(注意不能⽤用數
字開頭!)
Slide 48
Slide 48 text
重複宣告是無害的，只是會以最新的為主。
Slide 49
Slide 49 text
由於 JavaScript 會為不同的資料做不同的分類，
因此有了資料型別。
資料型別
Slide 50
Slide 50 text
在 JavaScript 中，你不但要注意型別，還要注意
它的⽤用途。
資料型別
Slide 51
Slide 51 text
在 JavaScript 中，型別分兩⼤大類:
資料型別
基本型別 (Primitive types)
物件型別 (Object types)
Slide 52
Slide 52 text
基本型別 (Primitive types)
數字(Number), 字串(String), 布林(Boolean)
特殊值 null 以及 undefined 屬於基本型別值。
但他們不是數字, 字串跟布林。
Slide 53
Slide 53 text
物件型別 (Object types)
任何不是數字(Number), 字串(String), 布林(Boolean)
, null, undefined 的都是 Object。
Slide 54
Slide 54 text
物件型別 (Object types)
• ⼀一個物件是⼀一組特性(prop)的群集。
• 物件為⼀一組具名的無序群集⼜又稱為陣列 (Array)。
• function 函式是⼀一種⽐比較特別的物件，⼀一個 function 是⼀一個
物件，⽽而是具有可執⾏行的能⼒力，他也可以被調⽤用(invoke)，
所以函式的⾏行為跟其他物件不同。
Slide 55
Slide 55 text
No content
Slide 56
Slide 56 text
•JavaScript 可以⾃自由的轉換型別。如本來是字串最後改成數字。
•JavaScript 不區分整數跟浮點數 (但數字都以符點數值表⽰示)。
Slide 57
Slide 57 text
JavaScript 提供的算數運算⼦子:
算數運算
⽅方法 Expression
加法 +
減法 -
乘法 *
除法 /
模數 (取餘數) %
Slide 58
Slide 58 text
除了基本的運算⼦子之外，JavaScript 內建 Math
物件特性的 function 提供你更強⼤大的數學運算:
算數運算
Slide 59
Slide 59 text
Q: 0/0 等於什麼?
算數運算
Slide 60
Slide 60 text
算數運算
• 零除以零沒有明確定義的值，所以 JavaScript 會回傳 NaN。
• NaN: not a number value。
• NaN 對 JavaScript 是⼀一個『⾮非數』值，但是 NaN 的型態仍然會
被認為是 Number，⾮非數值有的特點是，他的值跟任何直都不相
等。所以當你要判斷⼀一個數值是不是 NaN 時，可以⽤用內建函數
isNaN。
Slide 61
Slide 61 text
字串可以⽤用單引號跟雙引號刮起來，但⼩小⼼心有時
候需要反斜線來跳脫字元。
字串
Slide 62
Slide 62 text
JavaScript 內建幾個常⽤用的⽅方法:
字串
字串可以相加:
Slide 63
Slide 63 text
Boolean ⽤用 true 或是 false。有時候你會直接把 true/false 存在
變數裡，有時候 Boolean 是由判斷結果⽽而來。
布林
Slide 64
Slide 64 text
null 是⼀一個特殊的值，他代表沒有值存在，雖然
對 null ⽤用 typeof 你會拿到⼀一個 object 的字串，
然⽽而實務上典型的看法是 null ⾃自成⼀一個型別，他
是這個型別唯⼀一的成員。
Null 跟 undefined
undefined 代表值不存在(可能是沒有被宣告過的
變數...)，undefined 是預先定義的全域變數，他
不像 null 是語⾔言關鍵字，undefined 也是這個型
別唯⼀一個成員。
Slide 65
Slide 65 text
Null 跟 undefined
Slide 66
Slide 66 text
Mission 2
⼩小明去了瞞著媽餐廳買了三份 TWD 399 的餐點給媽媽吃，
但是因為買三份就可以有九折優惠，請問⼩小明總共要付多少
錢? (答案有⼩小數點)
客⼾戶網站上的訂單系統要讓滿三份的客⼾戶在結帳時總額打九折。
Slide 67
Slide 67 text
Mission 3
但是新台幣最⼩小⾯面額是⼀一塊錢耶，⽼老闆虧錢賺，所以請你將
⼩小數點無條件捨去
Slide 68
Slide 68 text
Mission 4
你接⼿手了⼀一個國⼩小健康評量網的網站，在網站的開始，你要
先忙計算該使⽤用者的 IBM 值，請幫忙計算這位⼩小朋友的
IBM 值為多少?
Slide 69
Slide 69 text
Mission 5
左邊是某位先⽣生⼩小姐的基本資料，請你⽤用變數的⽅方式，將他
的資料依序存到每個變數裡。
姓名 肚⼦子⼆二
年齡 26
職業 Engineer
居住地 taiwan
⾝身⾼高 180
體重 68
是否吃素 否
var age = ??
var job = ??
var location = ??
var height = ??
var weight = ??
var isVegetarian = ??
Slide 70
Slide 70 text
IDE 編輯器
Slide 71
Slide 71 text
多得數不清...
• Dreamweaver
• Sublime Text
• Notepad++
• ….
Slide 72
Slide 72 text
Sublime Text
http://www.sublimetext.com/
Slide 73
Slide 73 text
Sublime Text
必裝 Plugin
Emmet http://emmet.io/download/
Sublime 有⾮非常多的 plugin，不過都得⾃自⼰己裝。
裝 Plugin 之前，請你先安裝 Sublime 的 Package Control。
結束後請我或是助教幫忙 XD
Slide 74
Slide 74 text
Sublime Text - Package
Control
Slide 75
Slide 75 text
Books?
Slide 76
Slide 76 text
我沒有特別可以推薦的書籍
但如果你想看書的話，請你找⼀一本你看得下去的書...
(i think) 能夠讓你持續學習的第⼀一本 JavaScript 書籍遠⽐比名著好些。
雖然 JavaScript 是⼀一個很重經驗的技能，但書還是要看。
⼩小聲講: 台灣不缺初階書
Slide 77
Slide 77 text
Questions
你可以在 Slack 發問
你可以問我發問技巧
但不要問我實際跑跑看就可以知道結果的問題 :P
，⽐比⽅方說 『3 的 10 次⽅方是多少 ?』
Slide 78
Slide 78 text
「總之不⽤用害怕發問，
⼤大部份的 RD 都是 XD 進化⽽而來的」
Slide 79
Slide 79 text
Reference
• JavaScript ⼤大全，David Flanagan 著 (O’Reilly) 978-0-596-80552-4
• HTML5: The Missing Manual 國際中⽂文版 第⼆二版，Matthew MacDonald
著 (O’Reilly) 978-986-347-268-1
• 深⼊入淺出 JavaScript，Michael Morrison 著 (R’Reilly) 9789866840241
Slide 80
Slide 80 text
Learning Source
• https://www.codecademy.com/en/tracks/javascript INTRODUCTION TO
JAVASCRIPT
• https://www.codeschool.com/courses/javascript-road-trip-part-1
• https://www.codeschool.com/courses/discover-devtools
Slide 81
Slide 81 text
Thank you :)