Slide 1
Slide 1 text
JavaScript Basic
Rails Girls Weekly
2015-09-22 @ 五倍紅寶⽯石出礦坑
Speaker: Win Wu
Week 2
Slide 2
Slide 2 text
Agenda
๏ Alert, Console, Confirm, Prompt 介紹
๏ JavaScript 流程控制
• while
• if else
• switch
Slide 3
Slide 3 text
JavaScript 可以利⽤用以下⽅方
式顯⽰示你的”資料”:
• Alert
• Console
• Confirm
• Prompt
• …
http://www.w3schools.com/js/js_output.asp
Slide 4
Slide 4 text
http://www.w3schools.com/js/js_popup.asp
Alert()
window.alert(“Hello!");
alert() 函式
瀏覽器的訊息提⽰示框
並且你要按下 ok 或是確定才能繼續使⽤用網⾴頁
alert(“Hello!");
Slide 5
Slide 5 text
Alert()
change alert message text color using javascript?
http://stackoverflow.com/questions/13451873/change-alert-message-text-color-using-javascript
Slide 6
Slide 6 text
Console
在控制台印出訊息
01.js
https://msdn.microsoft.com/en-us/library/hh696634.aspx
Slide 7
Slide 7 text
Console
https://msdn.microsoft.com/en-us/library/hh696634.aspx
console.log(message);
console.debug(message);
console.dir(object);
console.error(message);
console.info(message);
Slide 8
Slide 8 text
Confirm()
confirm 可以詢問使⽤用者 Yes or No，回傳 (return) 布林值
02.js
https://msdn.microsoft.com/en-us/library/hh696634.aspx
Slide 9
Slide 9 text
Confirm()
https://msdn.microsoft.com/en-us/library/hh696634.aspx
Slide 10
Slide 10 text
Prompt()
跟 confirm ⼀一樣是詢問使⽤用者的答案，只是答案
可以讓使⽤用者⾃自⼰己填
https://msdn.microsoft.com/en-us/library/hh696634.aspx
Slide 11
Slide 11 text
Prompt()
https://msdn.microsoft.com/en-us/library/hh696634.aspx
03.js
Slide 12
Slide 12 text
流程控制
決定做事情的順序跟選擇
Slide 13
Slide 13 text
常⾒見必較運算⼦子
Equality
相等
x == y
假如 x 等於 y 就會得到
true, 否則為 false
Inequality
不相等
x !=y
x !== y
假如 x 不等於 y 就會得
到 true, 否則為 false
Less than
⼩小於
x < y
假如 x ⼩小於 y 就會得到
true, 否則為 false
Great than
⼤大於
x > y
假如 x ⼤大於 y 就會得到
true, 否則為 false
Neation
反義
!x
若 x 為 true, 則為 false.
若 x 為 false, 則為 true
還有 >= (⼤大於等於) , <= (⼩小於等於)…
Slide 14
Slide 14 text
流程控制
• while (當....)
• if else (如果)
• switch (如果)
Slide 15
Slide 15 text
while
while 可以⼀一直重複執⾏行⼀一件事情
直到符合某個條件後，他就會停⽌止了。
http://www.w3schools.com/js/js_loop_while.asp
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
if else
if (判斷條件描述)
{
// 若符合條件，就執⾏行這段 { } 裡⾯面的 程式碼。
} else {
// 不符合條件，就執⾏行這段 { } 裡⾯面的 程式碼。
}
Slide 18
Slide 18 text
if( ) { } else { }
如果結帳總額超過 1000 元，就跟使⽤用者說
你有9折優惠，否則則通知使⽤用者沒有優惠。
var total = _______;
if (total >= 1000) {
// TODO
} else {
// TODO
}
Slide 19
Slide 19 text
if( ){ } else if( ){ } else { }
如果結帳總額超過 1000 元，就跟使⽤用者說
你有9折優惠，
如果超過 600 元，
就跟使⽤用者說你有 95 折優惠
否則則通知使⽤用者沒有優惠。
04.js
Slide 20
Slide 20 text
var total = _______;
if (total >= 1000) {
// TODO
} else if (total >= 600) {
// TODO
} else {
// 前者兩種情況都不成⽴立時。
}
Slide 21
Slide 21 text
• 可以⽤用 if 做⼆二選⼀一，或者是更多的選擇。
• 使⽤用 if 敘述句，執⾏行⼀一段有條件的程式碼。
• if 敘述的結果必須要是 true/false。
• if 可以放在別的 if 裡。
if 的結論
Slide 22
Slide 22 text
switch
switch 可以有效率地在多個情況中作出選擇。
Slide 23
Slide 23 text
switch
break 可以讓條件符合之後，並且執⾏行完
該執⾏行的程式碼後，離開整個 switch 的程式。
有 break ⽐比較安全哦
Slide 24
Slide 24 text
switch
Slide 25
Slide 25 text
for 迴圈
設定⼀一件事情要做幾次
Slide 26
Slide 26 text
定義⼀一個變數
並且要有初始值
只要變數值⼩小於結束值，就執⾏行條件
(不⼀一定是⼩小於，這裏是舉例)
每⼀一次都更新變數的值
Slide 27
Slide 27 text
從 1 數到 100
Slide 28
Slide 28 text
從 1 數到 100，但是⼀一次累加 2
Slide 29
Slide 29 text
當然也能遞減，從 100 數到 1 呢?
Slide 30
Slide 30 text
• https://www.codecademy.com/en/tracks/javascript
Homework!
Slide 31
Slide 31 text
Thank you :D