NCC-JavaScript-Week#2

+BWB4DSJQU 8FFL !〵猰㣐玑䒭鏤鎙灇瑖爢 #Z*SFOF$IBOH 㛇燊铃岁♧

‣ 醳绢㛇燊铃岁♧ ˋ ‣ 㛇燊铃岁✳ 须俲㘗䢀ꤏ⴪ 崩玑䱾ⵖ哭⟝䒭JGFMTF FMTFJG
簮䱖ㄤ⼦㝆 ‣ 箻绢✳JGFMTF ˋ ‣ 㛇燊铃岁♲ 崩玑䱾ⵖ鶬㕖GPS ‣ 箻绢♲GPS 崩玑䱾ⵖ鶬㕖XIJMF ‣ 箻绢♲XIJMF GPS ‣ 䮋䨞겗 "HFOEB

醳绢㛇燊铃岁♧ 鱒ⴀ莅鱒Ⰵ 隶侸须俲㘗ⴽ侸㶶㶶⚮䋒卌㘗ⴽ鱲䳖莅焷钢
麌皿㶩鏽鍑

1 console.log("Hello World!"); 鱒ⴀ 㷸绢♧⦐倞铃鎊㽠⫹驎Ⰵ♧⦐倞涸⚆歲

1 alert("Watch out!"); //瀏覽器的訊息提⽰示窗 2 confirm("Are you sure?"); //詢問使⽤用者是或否，回傳布林值〥㢫鼩剤䖎㢵

1 var name = prompt(); 2 console.log(name); 3 var age
= prompt("What’s your age?"); 4 console.log("Your age is " + age); 鱒Ⰵ 鱒Ⰵ涸⧩鿪僽㶶⚮ 銴⨞Ⱖ➮欽鸁㽠꨾銴鱲䳖㘗䢀

隶侸 7BSJBCMF

隶侸7BSJBCMF ‣ 欽⢵⮭㶸须俲⮭㶸㖈鎹䥊넓⚥ ‣ 倰⤑⛓䖕涸鎙皿䧴Ⱖ➮贖椚 ‣ 〳⟃㖈㛂遤涸麕玑⚥佖隶 ‣ ♧Ꟛ㨥꨾銴竤麕㹒デ
‣ 㹒デ䖕㽠〳⟃湬䱺㶸《

1 var myName = "Irene"; 2 console.log("I am " +
myName); 3 var myName = "Ethan"; 4 console.log("I am " + myName); ꅾ醳㹒デ僽搂㹳涸剚⟃剓倞涸捀⚺ "I am Irene" "I am Ethan"

岤䠑✲갪 ‣ 隶侸そ珖㣐㼭㻨剤ⴽDBTFTFOTJUJWF  NZOBNFㄤNZ/BNF僽♶♧垺涸 ‣ ㄐそ䗳갭ざ岁䗳갭⟃㶶嫢、䏁箁 @ 䧴僽 $ Ꟛ걧♶䖤⟃侸㶶Ꟛ걧
‣ ㄐそ♶腋ㄤ⥃殆㶶♧垺 ‣ 剤䠑纏涸ㄐそ倰⤑ꠗ隡玑䒭槈 ‣ 꾁꽦䒭ㄐそ岁$BNFM$BTF

须俲㘗ⴽ %BUBUZQF

㛇劥㘗ⴽ1SJNJUJWFUZQFT ‣ 侸㶶/VNCFS ‣ 㶶⚮4USJOH ‣ 䋒卌#PPMFBO ‣ OVMM ‣
VOEFOFE

1 var a = 1; //數字 2 var b =
0.01; //數字 3 var c = 'JavaScript'; //字串 4 var d = "JavaScript"; 5 //單引號、雙引號都可以表⽰示字串 6 var e = true; //布林值 7 var f = false; //布林值 8 var g = null; //無值 9 var h = undefined; //未定義

1 Number("123"); //把字串轉成數字 2 String(true); //把布林轉成字串 3 Boolean(null); //把null轉成布林㘗ⴽ鱲䳖

1 typeof "John" // Returns 'string' 2 typeof 3.14 //
Returns 'number' 3 typeof false // Returns 'boolean' 4 typeof [1,2,3,4] // Returns 'object' 5 typeof {name:'John', age:34} 6 // Returns 'object' 㘗ⴽ焷钢 ‣ typeof

麌皿㶩 0QFSBUPST

皿遯麌皿㶩"SJUINFUJD0QFSBUPST 倰岁 &YQSFTTJPO ⸈岁 + 幾岁 - ⛨岁 * ꤑ岁
/ 垸侸《긅侸 %

皿遯麌皿㶩"SJUINFUJD0QFSBUPST ꤑ✫㛇劥涸麌皿㶩⛓㢫+BWB4DSJQUⰉ䒊.BUI 暟⟝暶䚍涸GVODUJPO䲿⣘⡹刿䓽㣐涸侸㷸麌皿 1 Math.pow(2,3); //Returns 8, 2的3次⽅方 2
Math.round(0.6); //Returns 1, 四捨五⼊入 3 Math.abs(-10); //Returns 10, 取絕對值 4 Math.max(1,20,30); //Returns 30, 取最⼤大值 5 Math.min(1,20,30) //Returns 1, 取最⼩小值 6 Math.random() //取介於0到1之間的亂數

䭸崣麌皿㶩"TTJHONFOU0QFSBUPST &YQSFTTJPO &YBNQMF 4BNF"T x = y x = y
+= x += y x = x + y -= x -= y x = x - y *= x *= y x = x * y /= x /= y x = x / y %= x %= y x = x % y =

嫲鯱麌皿㶩$PNQBSJTPO0QFSBUPST 倰岁 &YQSFTTJPO 瘞倴⧩ 瘞倴⧩㘗ⴽ ♶瘞倴⧩ != ♶瘞倴⧩㘗ⴽ !== 㣐倴
> 㼭倴 < 㣐倴瘞倴 >= 㼭倴瘞倴 <= == ===

齅鱀麌皿㶩-PHJDBM0QFSBUPST ⚂"OE 䧴0S 1 false || false; /* is false
2 其餘皆是 true */ や/PU 1 !true; // is false 2 !false; // is true 1 true && true; /* is true 2 其餘皆是 false

鏽鍑$PNNFOU ⴕ䧭㋲遤鏽鍑 // ㄤ㢵遤鏽鍑 /* */  1 // 我是單⾏行註解
2 /* 我是多⾏行註解 3 我可以有好幾⾏行 4 可以有⾮非常多⾏行 5 要記得結尾唷 */

㛇燊铃岁✳ 须俲㘗䢀"SSBZ 崩玑䱾ⵖ哭⟝䒭JGFMTF FMTFJG

ꤏ⴪ "SSBZ

‣ 䖎㢵匌銯佞㖈♧饱꧌⚥盘椚 ꤏ⴪"SSBZ 1 var names = ["JS","Python","Scratch"]; 2 var
number = [1, 3.14, 7749, 0.001]; 3 var mixed = [1, "Irene", 2015, "Hi"]; 4 var empty = [];

1 var mixed = ["JS",123,"Scratch"]; 2 console.log(mixed[0] == "JS"); //
true 3 console.log(mixed[1]); // 123 ꤏ⴪"SSBZ ‣ 嫦♧갪鿪剤♧⦐管贫*OEFY ‣ 管贫䖰Ꟛ㨥CBTFEJOEFYJOH

1 var names = "JavaScript"; 2 console.log(names[2] == "v"); //
true 3 console.log(names[4]); // "S" 酢⯏ 㶶⚮⛳剤JOEFY涸嚌䙂

1 var doubleArray =[[1,2],["a","b"]]; 2 console.log(doubleArray[0]);// [1,2] 3 console.log(doubleArray[1][1]); //
"b" ꧱㾵ꤏ⴪UXPEJNFOTJPOBMBSSBZ ꤏ⴪"SSBZ 4 console.log(doubleArray[1][2]); // undefined

1 var fruits =[1, 3, 2, "Orange", "Apple"]; 2 fruits.sort();
//按照數字⼤大⼩小、字⺟母順序排列 3 fruits.reverse(); //按照數字⼤大⼩小、字⺟母倒序排列 4PSUJOH3FWFSTJOH ꤏ⴪"SSBZ

1 var fruits =["Mango", "Orange", "Apple"]; 2 fruits.shift(); //刪除第⼀一項 "Mango"
3 fruits.pop(); //刪除最後⼀一項 “Apple" 4 console.log(fruits); // ["Orange"] 4IJGUJOH1PQQJOH ꤏ⴪"SSBZ

1 var fruits =["Orange", "Apple"]; 2 fruits.unshift("Kiwi"); //在第⼀一項加⼊入"Kiwi" 3 fruits.push("Lemon");
//在最後⼀一項加⼊入”Lemon" 4 console.log(fruits); 5 // ["Kiwi","Orange","Apple","Lemon"] 6OTIJGUJOH1VTIJOH ꤏ⴪"SSBZ

崩玑䱾ⵖ 'MPX$POUSPM ➊랃〳⟃く㌨

哭⟝䒭 JGFMTF FMTFJG

JG FMTF

JG FMTF 1 if(condition) 2 { 3 //若符合條件，就執⾏行這段{}裡⾯面的程式碼 4 }
5 else{ 6 //不符合條件，就執⾏行這段{}裡⾯面的程式碼 7 }

JG FMTF 1 var total = Number(prompt("數⼊入總⾦金額：")); 2 if(total >
1000){ 3 console.log("恭喜你獲得9折優惠！你所要⽀支付的⾦金額為：" + total*0.9); 4 } 5 else{ 6 console.log("你所要⽀支付的⾦金額為：" + total); 7 }

JG FMTFJG FMTF

JG FMTFJG FMTF 1 if(condition) 2 { 3 //若符合條件，就執⾏行這段{}裡⾯面的程式碼 4
} 5 else if(condition) 6 { 7 /*不符合上⼀一個條件但符合這⼀一個條件， 8 就執⾏行這段{}裡⾯面的程式碼*/ 9 } 10 else{ 11 //其他條件都不符合，就執⾏行這段{}裡⾯面的程式碼 12 }

㼭鑑魨䩛锞⢪欽罏鱒Ⰵ⟤䠑ꆄ겙 ꆄ겙㣐倴㽠䩧䫔 ➝倴։䩧䫔 ➝倴։䩧䫔剓䖕鱒ⴀ銴佅➰涸ꆄ겙

1 var total =Number((prompt(“數⼊入總⾦金額：”)); 2 if(total >= 1000){ 3 console.log("恭喜你獲得7折優惠！你所要⽀支付的⾦金額為："
+ 4 total*0.7); 5 } 6 else if(total < 1000 && total >= 700){ 7 console.log("恭喜你獲得8折優惠！你所要⽀支付的⾦金額為： " + 8 total*0.8); 9 } 10 else if(total < 700 && total >= 400){ 11 console.log("恭喜你獲得9折優惠！你所要⽀支付的⾦金額為： " + 12 total*0.9); 13 } 14 else{ 15 console.log("你所要⽀支付的⾦金額為： " + total); 16 }

簮䱖ㄤ⼦㝆

1 var total =(prompt("數⼊入總⾦金額："); 2 if(total >= 1000){ 3 console.log("恭喜你獲得7折優惠！你所要⽀支付的⾦金額為："
+ 4 total*0.7); 5 } 6 else if(total < 1000 && total >= 700){ 7 console.log("恭喜你獲得8折優惠！你所要⽀支付的⾦金額為： " + 8 total*0.8); 9 } 10 else if(total < 700 && total >= 400){ 11 console.log("恭喜你獲得9折優惠！你所要⽀支付的⾦金額為： " + 12 total*0.9); 13 } 14 else{ 15 console.log("你所要⽀支付的⾦金額為： " + total); 16 } 縮排⽅方便閱讀，流程控制、function... Tab 或 Space，不要混⽤用

1 var total =(prompt("數⼊入總⾦金額："); 2 if(total >= 1000){ 3 console.log("恭喜你獲得7折優惠！你所要⽀支付的⾦金額為："
+ 4 total*0.7); 5 } 6 else if(total < 1000 && total >= 700){ 7 console.log("恭喜你獲得8折優惠！你所要⽀支付的⾦金額為： " + 8 total*0.8); 9 } 10 else if(total < 700 && total >= 400){ 11 console.log("恭喜你獲得9折優惠！你所要⽀支付的⾦金額為： " + 12 total*0.9); 13 } 14 else{ 15 console.log("你所要⽀支付的⾦金額為： " + total); 16 } 區塊定義作⽤用域，流程控制、function... 記得⼤大括號要成對

箻绢✳JGFMTF " 宠#.*⧩鹎ꥣ晝 # ⶩⴉ瀖걧䋒 $ ⴼ倬♲錬䕎

" 宠#.*⧩鹎ꥣ晝 1. 請使⽤用者輸⼊入⾝身⾼高和體重 2. 輸出 BMI 值  hint: BMI＝體重(kg)
/ ⾝身⾼高2(m2). 3. 判斷使⽤用者過輕、標準或過重  hint: 過輕<18.5<=標準<24<=過重 IUUQTKTCJODPNGPNPZPFEJU KT DPOTPMF

# ⶩⴉ瀖걧䋒 1. 請玩家輸⼊入剪⼑刀、⽯石頭或布 2. 設定電腦隨機出拳  hint: var computer =
Math.random(); 3. 判斷玩家勝負（贏、輸、平⼿手） IUUQTKTCJODPNGVIJYPFEJU KT DPOTPMF

$ ⴼ倬♲錬䕎 1. 設定三⾓角形的三個邊 2. ⽐比較邊與邊的關係，判斷三⾓角形是銳⾓角、鈍⾓角還是直⾓角三⾓角形  hint: Math.pow(x,y)、雙層判斷 var
number = prompt("輸⼊入三個數字，⽤用空⽩白隔開：").split(" "); for (var i = 0; i < number.length; i++){ number = number.sort(function(a, b){return a-b;});   // 修正 bug } number.sort(); console.log(number); IUUQTKTCJODPNCJCVFEJU KT DPOTPMF

㛇燊铃岁♲ 崩玑䱾ⵖ鶬㕖GPS XIJMF

崩玑䱾ⵖ 'MPX$POUSPM 雊䧮⦛ⱄ妄㔐ⵌ

鶬㕖 -PPQ

갸⯓鏤㹁䱾ⵖ隶侸剤佪哭⟝ 锅侮䱾ⵖ隶侸⧩ 鶬㕖-PPQ 鶬㕖♲㣐哭⟝

GPS 鏤㹁♧⟝✲䞕銴ꅾ醳⨞䎙妄 1 for(var i = start; i < end;
i++){ 2 // 做條件成⽴立的事 3 }

GPS 1 for(var num = 1; num <= 100; num++){
2 console.log(num); 3 } 1 for(var num = 1; num <= 100; num = num + 1){ 3 console.log(num); 4 }

GPS 1 for(var num = 1; num <= 100; num
+= 2){ 2 console.log(num); 3 } 1 for(var num = 100; num >= 1; num--){ 2 console.log(num); 3 }

完全數：除了⾃自⼰己以外的因數的和，恰好等於它本⾝身㼭鑑魨䩛䧮⦛⢵鑑鑑溏鱒ⴀ⟃Ⰹ涸㸤侸ゅ

1 var result = []; 2 for( var i =
1; i <= 500; i++){ 3 var count = []; 4 var sum = 0; 5 6 for( var j = 1; j < i ; j++){ 7 if( i % j === 0 ){ 8 count.push(j); 9 } 10 } 11 12 for( var n = 0; n < count.length; n++ ){ 13 sum += count[n]; 14 } 15 16 if( i === sum){ 17 result.push(i); 18 } 19 } 20 console.log('500以內的完全數為：', result);

箻绢♲GPS JGFMTF " 宠㔔侸 # 宠Ⰽ侸剓㣐Ⱇ㔔侸 $ 'J[[#V[[

" 宠㔔侸 1. 請使⽤用者輸⼊入任意數字 2. 使⽤用 for 和 if 判斷該數字的因數 
hint: % 取餘數＝0 3. 輸出該數字之因數（包含1與本⾝身） IUUQTKTCJODPNYJEPIJFEJU KT DPOTPMF

# 宠Ⰽ侸剓㣐Ⱇ㔔侸 1. 請使⽤用者輸⼊入兩個數字，以空⽩白隔開 2. 轉換型態、建⽴立空 array 3. 使⽤用 for
和 if 判斷兩數最⼤大公因數  hint: Math.max(), .push() IUUQTKTCJODPN[FCJWJFEJU KT DPOTPMF

$ 'J[[#V[[ 1. 輸出 1 到 100 2. 如果是 3
的倍數就輸出 Fizz 3. 如果是 5 的倍數就輸出 Buzz 4. 如果同時是 3 和 5 的倍數就輸出 FizzBuzz  hint:雙層迴圈 IUUQTKTCJODPNXPLVTJFEJU KT DPOTPMF

XIJMF 殹⡹♶濼麥鑪㛂遤䎙妄

XIJMF ♶倬ꅾ醳㛂遤♧⟝✲ 湬ⵌ痘ざ厥⦐哭⟝䩞⨢姺 1 while(condition){ 2 // 做條件成⽴立的事 3 }

锞⢪欽罏鱒Ⰵ♧⦐侸㶶OVN ⢪欽XIJMF鱒ⴀ։OVN 1 var num = prompt("輸⼊入數字"); 2 var i
= 0; 3 while(i < num){ 4 i++; 5 console.log(i); 6 } XIJMF

㼭鑑魨䩛雊䧮⦛⢵梖枤侸㶶涸麉䨡 锞⢪欽罏鱒Ⰵ♧⦐➝倴_涸侸㶶デ鏰⢪欽罏枤㼩✫㣖㣐䧴㣖㼭 ⿾銼鑉㉏湬ⵌ⢪欽罏枤㼩瘸呪

• 如果迴圈處理的條件從來都沒有符合過，就永遠不會執⾏行迴圈。 • 如果⼀一直符合測試條件，便會造成無限迴圈。鶬㕖-PPQ 岤䠑

箻绢♲XIJMF GPS % 宠ꥣ⛨籏ㄤ

% 宠ꥣ⛨籏ㄤ 1. 請使⽤用者輸⼊入任意數字 2. 使⽤用 while 計算階乘 3. 使⽤用
for 計算總和 IUUQTKTCJODPNNBRBKJFEJU KT DPOTPMF

䮋䨞겗

鱒ⴀ_涸颶侸㔐㹻⹛䩛鑑鑑溏ゅ sӟA 

&/% !〵猰㣐玑䒭鏤鎙灇瑖爢 #Z*SFOF$IBOH

NCC-JavaScript-Week#2

NCC-JavaScript-Week#2

More Decks by Irene Chang

Other Decks in Education

Featured

Transcript