NCC-JavaScript-Week#1

+BWB4DSJQU 8FFL !〵猰㣐玑䒭鏤鎙灇瑖爢 #Z*SFOF$IBOH 㛇燊ⰅꟌ

"CPVU 䓹꧉蘟 *SFOF$IBOH ‣ 〵猰㣐ⶾ鏤✳䎃秹⚺⥜㉂噠鏤鎙 ‣ 〵猰㣐玑䒭鏤鎙灇瑖爢鏤鎙䌌+BWB4DSJQU爢铭闍䌌 ‣ &9."㕰꥙䱺⟤⵹畮㼠呪 JSFOF!HNBJMDPN

‣ +BWB4DSJQU➝稲 ‣ 橇㞯㸞酤 ˋ ‣ 㛇燊铃岁♧ 鱒ⴀ莅鱒Ⰵ
隶侸须俲㘗ⴽ侸㶶㶶⚮䋒卌㘗ⴽ鱲䳖莅焷钢麌皿㶩鏽鍑 ‣ 箻绢♧ "HFOEB

+BWB4DSJQU➝稲

“JavaScript is the programming language of HTML and the Web.”
— w3Schools and the Sever Side language.

笪畀Ꟛ涮ⴕ䧭䖕畮 #BDLFOE ⵹畮 'SPOUFOE

䖕畮 #BDLFOE ⵹畮 'SPOUFOE Client Side ⽤用⼾戶端 Server Side 伺服端

Rails, PHP, Java, Python, Node.js … )UNM $44 +BWB4DSJQU
'SPOUFOEWT#BDLFOE *OTPGUXBSFFOHJOFFSJOH UIFUFSNTGSPOUFOEBOECBDLFOEBSF EJTUJODUJPOT XIJDI SFGFS UP UIF TFQBSBUJPO PG DPODFSOT CFUXFFO B QSFTFOUBUJPOMBZFSBOEBEBUBBDDFTTMBZFSSFTQFDUJWFMZ XJLJ

˖ 佖隶)UNM笪갤Ⰹ㺂 ˖ 佖隶$44笪갤㢫錚 ˖ 焷钢鱒Ⰵ涸须俲僽や剤佪 ˖ ⹛殥 ˖ "KBY♶欽ⵘ倞笪갤⽰腋刿倞须俲
⋯⋯ +BWB4DSJQUDBOEP

⟤⹡♶㢫⛖♲⟝✲ 刿倞갤꬗ 《䖤⠿剪㐼涸须俲 ⫄鷑须俲窍⠿剪㐼 +BWB4DSJQUDBOEP

⡹〳腋聃麕+BWB +BWB⛓倴+BWB4DSJQU 㥶ず䖸⛓倴䒒䖸 ➮⦛尝剤ꡠ⤚

⡹〳腋⛳聃麕⟃♴ K2VFSZ 3FBDUKT 1BQFSKT %KT 5ISFFKT QKT 4PVOE+4 鸏❉鿪僽+BWB4DSJQU涸ⴅ䒭䏨

+BWB4DSJQU僽⾲欰涸玑䒭铃鎊䧮⦛䖎㼱欽㸐湬䱺䭭⢵Ꟛ涮䖎㢵牟➃欽㸐涮㾝ⴀ刿㥪欽涸ⴅ䒭䏨ず♧⦐佪卓欽ⴅ䒭䏨⢵㻨〳腋〫銴♲遤 +BWB4DSJQU㻨饱⢵〳腋銴⼧䎙遤

➊랃僽ⴅ䒭䏨 ‣ ぐ珏牟➃㛇倴⾲欰铃鎊涮㾝罜ⴀ ‣ 捀✫刿䘰刿剤佪㖒麨䧭厥珏湡涸 鷴麕ⴅ䒭䏨荈䊹㹁纏涸ⴅ䒭莅倰岁 ‣ 剤荈䊹涸礶牟莅ㆹ㷸 ‣ 荈䧭♧㤛倞涸铃岁㻨岁

䟝✫鍑刿㢵㽠㉏㣐牟

籏⛓ +BWB4DSJQU剤䖎㢵涸倾单劣眏 ⯓䪾㛇燊㷸㥪ゅ

+BWB4DSJQU㻨窍铪溏

㽠僽⡹䖎擿䜫涸 http://eu.dubli.com/assets/img/outdatedbrowsers-bg.png

懳錒㐼䙦랃溏䖤䥢+BWB4DSJQU ˖ 懳錒㐼剤+BWB4DSJQU湬陼㐼♶꨾銴竤麕管陼㐼鱲䳖  鸏⦐湬陼㐼涸䊨⡲㽠僽㛂遤ⴀ植㖈笪갤갤⚥涸+BWB4DSJQU ˖ ⢪欽欽)5.-涸TDSJQU垦硹

" # 懳錒㐼㥶⡦㛂遤+BWB4DSJQU 䗅䎸㛂遤 懳錒㐼鯺Ⰵ笪갤䖕隡《ⵌ+BWB4DSJQU⤑Ꟛ㨥㛂遤  ✲⟝뀝⹛ 殹⢪欽罏莅笪갤欴欰厥❉遤捀儘鍸涮+BWB4DSJQU玑䒭焺⢵㛂遤厥❉⹛⡲ FYPO$MJDL
PO.PVTF0WFS PO$IBOHF PO4FMFDU

4DSJQU垦硹 <html> <head> <title>NCC JavaScript</title> <script type=“text/javascript”> alert(“Hello World!”); </script>
</head> </html>

4DSJQU垦硹 <html> <head> <title>NCC JavaScript</title> <script type=“text/javascript”> alert(“Hello World!”); </script>
</head> </html> 欽⢵雊懳錒㐼濼麥䱺♴⢵僽䭸⟂珳铃鎊懳錒㐼㽠剚䪾鸏♧媯殹⡲僽4DSJQU贖椚罜ꬌ)UNM

橇㞯㸞酤

⡹〫꨾銴♧⦐㥪欽涸管鱀㐼

⢿㥶 4VCMJNF5FYU /PUFQBE "UPN

⛳䖎剤㢵箁♳管鱀㐼

+4#JO +4'JEEMF $PEFQFO ⢿㥶

IUUQKTCJODPN

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

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

隶侸 7BSJBCMF

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

1 var myName = "Irene"; 2 console.log("I am " +
myName); 㹒デ♧⦐隶侸 "I am Irene"

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

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"

须俲㘗ⴽ %BUBUZQF

须俲㘗ⴽ%BUBUZQF 㖈+BWB4DSJQU⚥㘗ⴽⴕⰍ㣐겳 " 㛇劥㘗ⴽ1SJNJUJWFUZQFT # 暟⟝㘗ⴽ0CKFDUUZQFT ꤑ✫岤䠑㘗ⴽ鼩銴岤䠑欽鸁

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

暟⟝㘗ⴽ0CKFDUUZQFT ⟤⡦♶僽侸㶶/VNCFS㶶⚮4USJOH 䋒卌#PPMFBOOVMMVOEFOFE 鿪僽暟⟝0CKFDU

暟⟝㘗ⴽ0CKFDUUZQFT ‣ ♧⦐暟⟝僽♧穉暶䚍QSPQ涸纈꧌ ‣ 暟⟝捀♧穉Ⱘそ涸搂䎸纈꧌⿶珖捀ꤏ⴪"SSBZ ‣ ⴅ䒭GVODUJPO僽♧珏嫲鯱暶ⴽ涸暟⟝  ♧⦐ⴅ䒭僽♧⦐暟⟝Ⱘ剤〳㛂遤涸腋⸂⛳〳 ⟃鄄锅欽JOWPLF䨾⟃ⴅ䒭涸遤捀ㄤⰦ➮暟 ⟝♶ず

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 var i = { 2 name: "Irene", 3 school:
'NTUST', 4 }; 5 //i 是 Object 6 7 var j = ['1', 'JS', 3.14]; 8 //j 是 array

㘗ⴽ鱲䳖莅焷钢

㘗ⴽ鱲䳖 ‣ Number(); ‣ String(); ‣ Boolean();

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

㻜⡲溏溏ゅ

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

麌皿㶩 0QFSBUPST

麌皿㶩0QFSBUPST 㖈+BWB4DSJQU⚥麌皿㶩ⴕ㔋珏 " 皿遯麌皿㶩"SJUINFUJD0QFSBUPST # 䭸崣麌皿㶩"TTJHONFOU0QFSBUPST $ 嫲鯱麌皿㶩$PNQBSJTPO0QFSBUPST % 齅鱀麌皿㶩-PHJDBM0QFSBUPST

皿遯麌皿㶩"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 倰岁 &YQSFTTJPO 且（and） && 或（or） || ⾮非（not） !

⚂"OE 1 true && true; // is true 2 true
&& false; // is false 3 false && true; // is false 4 false && false; // is false

䧴0S 1 true || true; // is true 2 true
|| false; // is true 3 false || true; // is true 4 false || false; // is false

や/PU 1 !true; // is false 2 !false; // is
true

鏽鍑 $PNNFOU

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

箻绢♧ " 字㕜䎃䳖皿銯⯋䎃 # 宠#.*⧩ $ 伢孒影䏞䳖皿螠孒影䏞

" 字㕜䎃䳖皿銯⯋䎃 1. 請使⽤用者輸⼊入⺠民國年 2. 輸出相對應的⻄西元年  ex. 輸⼊入84，輸出1995

# 宠#.*⧩ 1. 請使⽤用者輸⼊入⾝身⾼高和體重 2. 輸出 BMI 值  hint: BMI＝體重(kg)
/ ⾝身⾼高2(m2).

$ 伢孒影䏞䳖皿螠孒影䏞 1. 請使⽤用者輸⼊入攝⽒氏溫度（℃） 2. 輸出相對應的華⽒氏溫度（℉）  ex. 輸⼊入30，輸出86

"OTXFS IUUQTKTCJODPNYVHPCFFEJU KT DPOTPMF

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

NCC-JavaScript-Week#1

NCC-JavaScript-Week#1

More Decks by Irene Chang

Other Decks in Education

Featured

Transcript