JavaScript Basic For 6 Weeks（1/6）

+BWB4DSJQU#BTJD Rails Girls Weekly 2015-09-15 @ 五倍紅寶⽯石出礦坑 Speaker: Win Wu
Week 1

About Win ‣       ‣ 2-3 year X
Web Development        ‣ Recently…. :P @yiyingwu1990 Frontend HTML / CSS / JavaScript Backend PHP / Node.js … Engineer

Agenda ๏ JavaScript Introduction ๏ IDE (Sublime…) ๏ JavaScript Debugging
Tools ๏ 變數與運算⼦子 ๏ 變數型態介紹 ๏ 加減乘除, Numbers…

JavaScript Introduction

–w3schools 「 JavaScript is the programming language of HTML and
the Web」 and Server Side Language

• 早期由 Netscape 公司開發。 • 在 client 端就是利⽤用瀏覽器執⾏行，內嵌在網⾴頁的程式語⾔言。註: Client
就是指使⽤用者操作端，Server 為在網路上提供服務的電腦

Frontend Backend Node.js JavaScript 以網站開發的分⼯工來說，可以分為前端跟後端。 Client ⽤用⼾戶端 Server 端

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!!

前端跟後端都有很複雜的學問如果你想更加了解兩種⼯工作的分野，可以從⼈人⼒力需求上去了解。

JavaScript is Powerful HTML CSS JavaScript ⾝身體構造打扮⾏行為/反應 HTML
+ CSS + JavaScript 可以讓網⾴頁達到互動性  它也可以知道 user 跟網⾴頁之間的互動是什麼

JavaScrip can do… JavaScript Can Change HTML Content / Attributes
/ Styles (CSS) Validate Input Data Animation Ajax (不⽤用刷新網⾴頁，即能更新資料) Object base 任務不外乎三件事: (1)更新⾴頁⾯面 (2)取得伺服器的資料 (3)傳送資料給伺服器。

JavaScript is Powerful 學好它，你可以透過 JavaScript 控制 HTML / CSS 但
不要失控 XD

Write for Who? Boss ? Browser https://raw.github.com/alrra/browser-logos/master/main-desktop.png

瀏覽器要如何看得懂 JavaScript? • 瀏覽器有 JavaScript 直譯器(不需要經過編譯器轉換)，  這個直譯器的⼯工作就是執⾏行出現在網⾴頁中的 JavaScript。 • 使⽤用
HTML 的 <script> 標籤

瀏覽器如何執⾏行 JavaScript? • 循序執⾏行: 瀏覽器 load 到網⾴頁之後，載⼊入 JavaScript 之後就開始執⾏行。 
  • 事件驅動: 當使⽤用者跟網⾴頁產⽣生某些⾏行為之後，觸發 JavaScript 程式碼來執⾏行某些程式。 onClick, onMouseOver, onChange, onSelect…

Script 標籤 <html> <head> <title>JavaScript for 6 weeks</title> <script type=“text/javascript”>
alert(“hellowin~”); </script> </head> </html>

Script 標籤 <html> <head> <title>JavaScript for 6 weeks</title> <script type=“text/javascript”>
alert(“hellowin~”); </script> </head> </html> ⽤用來讓 Browser 知道接下來是指令稿語⾔言，接著它就會把這⼀一段當作是 script 處理⽽而⾮非 HTML。 script 必須要有結尾標籤

Script 標籤 <html> <head> <title>JavaScript for 6 weeks</title> </head> <script
src=“main.js” type=“text/javascript”></script> </html> main.js 把程式移到另⼀一個檔案裡

Playground http://jsbin.com/ https://jsﬁddle.net/ http://plnkr.co/

Q: <script> 的 type ⼀一定要有嗎? 以現在前端的發展來說不⼀一定需要，當初 <script> 的設計是希望 type 屬性能夠⽀支援多種指令稿，所以才會希望⽤用
type 指定使⽤用 JavaScript。

Q: alert 是什麼? 是⼀一種讓瀏覽器彈出視窗的函式，可以將想要對使⽤用者傳遞的資訊以彈出視窗的⽅方式呈現。 Q: 函式是什麼? ⼀一段負責常⾒見的任務, 可以重複使⽤用的程式碼。

Debugging Tools •按理，你無法在編輯器上寫程式的時候就知道會不會出現錯誤。 (有些 Plugin 例外...，有的 Plugin 可以幫你檢查語法)。 •瀏覽器幾乎都會提供除蟲的⼯工具
(錯誤主控台)。但每家瀏覽器的作⾵風(⽤用法)都不太⼀一樣。 •相信⼀一家瀏覽器不代表你能相信所有的瀏覽器。 •初學時，其實⼤大部份時候是⼈人為疏失，真正的 Bug 還蠻少的。 •出錯的地⽅方可能很簡單，但⼀一個⼩小地⽅方⾜足以讓網⾴頁發⽣生悲劇。

Debugging Tools •瀏覽器不⼀一定會給你完全正錯的錯誤資訊，但通常會提供線索。 Browser IE F12 Firefox http://getﬁrebug.com/javascript Google
Chrome http://tinyurl.com/c-debugger Opera Dragonﬂy Safari 詳⾒見附圖

Debugging Tools - chrome 按右鍵開啟 menu 尋找

Debugging Tools - Firefox 按右鍵開啟 menu 尋找

Debugging Tools - Safari 偏好設定 > 進階勾選在選單列中檢視『開發』選單

按下右鍵的檢查元件

Debugging Tools - IE F12

JavaScript 三種 Error •執⾏行期錯誤 Runtime Error •語法錯誤 Syntax Error •邏輯錯誤
Login Error

JavaScript 三種 Error •執⾏行期錯誤 Runtime Error 因執⾏行的條件⽽而出現的錯誤，像是使⽤用者在表單輸⼊入特定的類型, 或是無法處理的資料，試圖初始化前取⽤用物件等等。

JavaScript 三種 Error •語法錯誤 Syntax Error 違反 JavaScript 語⾔言規則⽽而造成的錯誤。

JavaScript 三種 Error •邏輯錯誤 Login Error 因錯誤邏輯造成的錯誤。

JavaScript 除蟲檢查 •確定括號都成對。 •沒有打錯字。 •適當的註解⼀一些程式碼。 •利⽤用 alert 或是 console 等函式來補助。
•變數命名避免跟保留字相衝。

JavaScript 語彙結構⼀一個語⾔言的語彙結構講的就是指⼀一套基礎規則。 JavaScript 的語彙規則如下: 字元集: JavaScript 是⽤用 Unicode 字元集所撰寫。 
⼤大⼩小寫之分: JavaScript 是區分⼤大⼩小寫 (case-sensitive) 的語⾔言。  Unicode 轉義序列。  正規化: Unicode 允許同⼀一個字元以⼀一種⼀一樣的⽅方式編碼。  註解: ⽀支援兩種註解⽅方式。  識別字: 識別字 (Identiﬁer) ⽤用來為變數或是函式命名。

JavaScript 語彙結構保留字: JavaScript 保留了幾個語⾔言本⾝身會⽤用到的單字，所以你不能⽤用這些字當識別字 (變數名稱)，像是.. break delete function
return typeof case do if switch catch else in new null for default debugger try true false …

JavaScript 註解 // 單⾏行註解 /* 多⾏行註解我真的好幾⾏行 */

JavaScript 變數及資料型別 JavaScript 的變數其實就是⽤用來儲存資料在某個地⽅方的意思 (嚴格來說是記憶體裡)，儲存資料之後，JavaScript 就會把他記起來，⽅方便之後的計算或其他處理。

常數 (Constant) : 是不會改變的資料，如 Pi。 JavaScript 常數

變數 (Variable) : 是會在 JavaScript 執⾏行過程中會改變的資料。 JavaScript 變數

不管是變數還是常數，都需要經過宣告，宣告必須要給它⼀一個名稱，他都是⼀一個儲存資料的標籤，⽐比⽅方說你要告訴 JavaScript 你要儲存 3.14 這個數字，但是你必須給 3.14 ⼀一個命名，然後告訴
JavaScript 下次你會⽤用該命名跟他換真正儲存的資料 (3.14)。

如何宣告⼀一個常數宣告⼀一個常數要使⽤用 const 關鍵字。⼩小⼼心! 有⼀一些⽐比較舊的瀏覽器不⽀支援。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const 通常會⽤用全⼤大寫字⺟母命名

const 常數名稱 = 常數值; Try it!

如何宣告⼀一個變數宣告⼀一個變數要使⽤用 var 關鍵字。

var 變數名稱 = 變數值; var 變數名稱; 等號(=) 把資訊存到變數裡。

變數宣告注意事項 • 變數名稱⼤大⼩小寫有別，如 errorMessage 跟 errormessage 是不⼀一樣的。  • JavaScript
是⼀一個很鬆散的語⾔言，就算你不⽤用 var 關鍵字也可以宣告變數，但這不是好作法 (幾乎可以說千萬不要這樣做)。  • 變數儲存的地⽅方是有範圍的，⼜又分為區域變數 (local variable) 跟全域變數 (global variable)，我們之後在函式的地⽅方會在介紹。 • 命名要合法，必須以字⺟母, 底線(_), 或是 $ 開頭。(注意不能⽤用數字開頭!)

重複宣告是無害的，只是會以最新的為主。

由於 JavaScript 會為不同的資料做不同的分類，因此有了資料型別。資料型別

在 JavaScript 中，你不但要注意型別，還要注意它的⽤用途。資料型別

在 JavaScript 中，型別分兩⼤大類: 資料型別基本型別 (Primitive types)     物件型別
(Object types)

基本型別 (Primitive types) 數字(Number), 字串(String), 布林(Boolean) 特殊值 null 以及 undeﬁned
屬於基本型別值。但他們不是數字, 字串跟布林。

物件型別 (Object types) 任何不是數字(Number), 字串(String), 布林(Boolean) , null, undeﬁned 的都是
Object。

物件型別 (Object types) • ⼀一個物件是⼀一組特性(prop)的群集。 • 物件為⼀一組具名的無序群集⼜又稱為陣列 (Array)。 • function
函式是⼀一種⽐比較特別的物件，⼀一個 function 是⼀一個物件，⽽而是具有可執⾏行的能⼒力，他也可以被調⽤用(invoke)，所以函式的⾏行為跟其他物件不同。

•JavaScript 可以⾃自由的轉換型別。如本來是字串最後改成數字。 •JavaScript 不區分整數跟浮點數 (但數字都以符點數值表⽰示)。

JavaScript 提供的算數運算⼦子: 算數運算⽅方法 Expression 加法 + 減法 - 乘法
* 除法 / 模數 (取餘數) %

除了基本的運算⼦子之外，JavaScript 內建 Math 物件特性的 function 提供你更強⼤大的數學運算: 算數運算

Q: 0/0 等於什麼? 算數運算

算數運算 • 零除以零沒有明確定義的值，所以 JavaScript 會回傳 NaN。 • NaN: not a
number value。 • NaN 對 JavaScript 是⼀一個『⾮非數』值，但是 NaN 的型態仍然會被認為是 Number，⾮非數值有的特點是，他的值跟任何直都不相等。所以當你要判斷⼀一個數值是不是 NaN 時，可以⽤用內建函數 isNaN。

字串可以⽤用單引號跟雙引號刮起來，但⼩小⼼心有時候需要反斜線來跳脫字元。字串

JavaScript 內建幾個常⽤用的⽅方法: 字串字串可以相加:

Boolean ⽤用 true 或是 false。有時候你會直接把 true/false 存在變數裡，有時候 Boolean 是由判斷結果⽽而來。
布林

null 是⼀一個特殊的值，他代表沒有值存在，雖然對 null ⽤用 typeof 你會拿到⼀一個 object 的字串，然⽽而實務上典型的看法是
null ⾃自成⼀一個型別，他是這個型別唯⼀一的成員。 Null 跟 undefined undefined 代表值不存在(可能是沒有被宣告過的變數...)，undefined 是預先定義的全域變數，他不像 null 是語⾔言關鍵字，undefined 也是這個型別唯⼀一個成員。

Null 跟 undeﬁned

Mission 2 ⼩小明去了瞞著媽餐廳買了三份 TWD 399 的餐點給媽媽吃，但是因為買三份就可以有九折優惠，請問⼩小明總共要付多少錢? (答案有⼩小數點) 客⼾戶網站上的訂單系統要讓滿三份的客⼾戶在結帳時總額打九折。

Mission 3 但是新台幣最⼩小⾯面額是⼀一塊錢耶，⽼老闆虧錢賺，所以請你將⼩小數點無條件捨去

Mission 4 你接⼿手了⼀一個國⼩小健康評量網的網站，在網站的開始，你要先忙計算該使⽤用者的 IBM 值，請幫忙計算這位⼩小朋友的 IBM 值為多少?

Mission 5 左邊是某位先⽣生⼩小姐的基本資料，請你⽤用變數的⽅方式，將他的資料依序存到每個變數裡。姓名肚⼦子⼆二年齡 26 職業 Engineer
居住地 taiwan ⾝身⾼高 180 體重 68 是否吃素否 var age = ?? var job = ?? var location = ?? var height = ?? var weight = ?? var isVegetarian = ??

IDE 編輯器

多得數不清... • Dreamweaver • Sublime Text • Notepad++ • ….

Sublime Text http://www.sublimetext.com/

Sublime Text 必裝 Plugin Emmet http://emmet.io/download/ Sublime 有⾮非常多的 plugin，不過都得⾃自⼰己裝。裝
Plugin 之前，請你先安裝 Sublime 的 Package Control。結束後請我或是助教幫忙 XD

Sublime Text - Package Control

Books?

我沒有特別可以推薦的書籍但如果你想看書的話，請你找⼀一本你看得下去的書... (i think) 能夠讓你持續學習的第⼀一本 JavaScript 書籍遠⽐比名著好些。雖然 JavaScript 是⼀一個很重經驗的技能，但書還是要看。
⼩小聲講: 台灣不缺初階書

Questions 你可以在 Slack 發問你可以問我發問技巧但不要問我實際跑跑看就可以知道結果的問題 :P   ，⽐比⽅方說『3
的 10 次⽅方是多少 ?』

「總之不⽤用害怕發問，⼤大部份的 RD 都是 XD 進化⽽而來的」

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

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

Thank you :)

JavaScript Basic For 6 Weeks（1/6）

JavaScript Basic For 6 Weeks（1/6）

More Decks by winwu

Other Decks in Programming

Featured

Transcript