NCC-JavaScript-Week#4

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

‣ 䮋䨞겗"OTXFS ‣ 㛇燊铃岁㔋 Ը ⴅ爚GVODUJPO ‣ 㛇燊铃岁❀ Ը 暟⟝PCKFDU
‣ TDSJQU ‣ 4VCMJNF5FYU ˋ ‣ %0.矦➝ ‣ )5.-ⰅꟌ ‣ %0.✲⟝&WFOU "HFOEB 2

䮋䨞겗"OT " 鱒ⴀ_涸颶侸 # _涸颶侸鱒ⴀ痧_갪 3

1 for (var i = 2; i < 100; i
++) { 2 var isPrime = true; 3 for(var j = 2; j < i; j ++ ) { 4 if (i % j === 0) { 5 isPrime = false; 6 break; 7 } 8 } 9 if (isPrime) { 10 console.log(i); 11 } 12 } 鱒ⴀ_涸颶侸 4

䒊用♧⦐ꤏ⴪ 佞Ⰵ_涸颶侸鱒ⴀ痧_갪 1 var prime =[]; 2 for( var
i = 50; i <= 500; i++ ){ 3 for( var j = 2; j < i; j++ ){ 4 if( i % j === 0 ){ 5 break; 6 } 7 else{ 8 prime.push(i); 9 break; 10 } 11 } 12 } 13 14 for( var n = 20; n < 27; n++){ 15 console.log(prime[n]); 16 } 5

㛇燊铃岁㔋 ⴅ䒭GVODUJPO 6

ⴅ䒭 'VODUJPO ➊랃〳⟃く㌨ 7

‣ ♶ず涸굺勞JOQVUT ‣ 湱ず涸捸掑倰䒭ㄤ麕玑GVODUJPO ‣ ♶ず涸跗票PVUQVUT ⡹♶剚䟝嫦妄掑跗票鿪銴䪾麕玑ⱄ㻨♧麒㽠⫹掑跗票♧垺矦㋲ 8

1 function fnName(x, y) { 2 // Do something 3
}; Ⱘそⴅ侸 1 var fnName = function(x, y) { 2 // Do something 3 }; ⼣そⴅ侸 ⴅ䒭GVODUJPO 9

1 function add(x, y) { 2 var total = x
+ y; 3 console.log(total); 4 }; 5 6 add(3,4); // 輸出7 ㄎ〭 ⴅ䒭GVODUJPO 10

1 function add(x, y) { 2 var total = x
+ y; 3 return total ; // 回傳運算後的值 4 }; 5 add(3,4); // 直接呼叫沒有意義 6 var result = add(3,4); // 把值存起來 7 console.log(result * 10); // 輸出70 鸒䌢䧮⦛꨾銴GVODUJPO㔐⫄㛂遤䖕涸穡卓⢵⨞Ⱖ➮✲ ⴅ䒭GVODUJPO 11

岤䠑 ⴅ䒭麂ⵌSFUVSO湱殹倴用⽰⨢姺䖕꬗涸玑䒭  䨾⟃䧮⦛鸒䌢䪾SFUVSO佞㖈剓䖕罜⚂〫剤♧⦐ 䵩ꂂ崩玑䱾ⵖJGFMTF㽠〳⟃剤㥪䎙⦐SFUVSO 㥶卓ⴅ䒭尝剤鏤㹁SFUVSO㸐剚㔐⫄VOEFOFE 12

1 function square(num) { 2 var result = num *
num; 3 return result ; // 回傳運算後的值 4 }; 5 console.log(square(10)); // 輸出100 ⿮侸〳⟃⟤䠑ㄐそ⡎僽ⴽ䒚ⵌ鸮荈䊹鿪溏♶䥢 ⴅ䒭GVODUJPO 13

1 function countNumber() { 2 for(var i = 0; i
<= 100; i++){ 3 console.log(i); 4 }; 5 }; 6 countNumber(); GVODUJPO♶♧㹁銴剤⿮侸《对⡹䟝銴麨䧭涸湡涸 ⴅ䒭GVODUJPO 參數的數量沒有實際上的限制，但還是盡量控制在 2～3 個左右 14

D.R.Y %PO’U3FQFBU:PVSTFMG ,FFQZPVSTFMG 殹⡹涮植⡹♧湬ꅾ醳䩧ず垺涸玑䒭焺 ㈔♧⥜佖涸鿈ⴕ〫剤⿮侸罜䊺齡⡹ 㽠䥰鑪⢪欽GVODUJPO 15

㛇燊铃岁❀ 须俲㘗ⴽ暟⟝ 16

⡹䟝銴䒊用♧⦐匌銯 鸏⦐匌銯剤䖎㢵㿂䚍 17

%BUBUZQFそ㶶䎃룲欰傈䩛堥⥌盳耷噠鼩剤 .FUIPE鸏⦐➃〳⟃⨞➊랃 18

暟⟝ 0CKFDU 19

暟⟝0CKFDU ♧⦐暟⟝僽♧❉㿂䚍涸꧌ざ罜㿂䚍僽꒳莅⧩⛓꟦涸ꡠ耢 LFZWBMVFQBJST 20

1 var objName = { 2 key: value, 3 key:
value, 4 key: function(){ 5 //Do Something 6 }; 7 }; 暟⟝0CKFDU 21

value, 4 key: function(){ 5 //Do Something 6 }; 7 }; 〳⟃䪾㿂䚍QSPQFSUZ 䟝䧭僽꣡㿂倴鑪暟⟝涸隶侸欽⢵䲾鶤鑪暟⟝ 涸暶颶 暟⟝0CKFDU 22

value, 4 key: function(){ 5 //Do Something 6 }; 7 }; 㿂䚍QSPQFSUZ 㶶⚮♶欽䒸贫 侸㶶倰岁.FUIPE 岤䠑ㄐそ鿪剤ⴕ㣐㼭㻨㿂䚍莅㿂䚍⛓꟦欽鸊럊ⴕꟚ 暟⟝0CKFDU 23

1 var myself = { 2 name: "Irene", 3 age:
19, 4 calling: function(){ 5 console.log('Calling to' + this.name + 'at' + this.phone); 6 }, 7 }; 暟⟝0CKFDU 24

1 objectName.propertyName 《ⴀ㿂䚍涸倰岁 1 objectName["propertyName"] " # 暟⟝0CKFDU 25

1 objectName.propertyName 《ⴀ㿂䚍涸倰岁 1 objectName["propertyName"] " # LFZ⺫わ瑠涯꒳鸮㶶贫䧴僽⟃侸㶶Ꟛ걧瘞〫腋欽鸏珏《岁 ⹛䢀㹒デ㥶瘞䖊⢪欽罏鱒Ⰵ欽鸏珏《岁湱㼩鯱㸞 暟⟝0CKFDU
26

ⴅ䒭'VODUJPOWT倰岁.FUIPE ⴅ䒭〳⟃㖈暟⟝⟃㢫涸⟤ざ㖒倰鄄㹒デ䧮⦛〳⟃湬䱺ㄎ〭㸐蕰ⴅ䒭㖈暟⟝酭꬗鄄㹒デ㸐㽠隶䧭倰岁倰岁䗳갭鷴麕㸐䨾㿂倴涸暟⟝⢵ㄎ〭 27

1 function test(){ 2 console.log("JavaScript"); 3 } 4 test(); //
呼叫函式 5 var objTest = { 6 test: function(){ 7 console.log("JavaScript"); 8 } 9 }; 10 objTest.test(); //呼叫⽅方法 ⴅ䒭'VODUJPOWT倰岁.FUIPE 28

⡹涮植✫㌨ arrayName.sort(), Math.random() 鿪僽㖈ㄎ〭倰岁罜"SSBZ .BUI劥魨㽠僽䊺竤鄄㹁纏㥪剤䖎㢵㿂䚍莅倰岁涸暟⟝ ⴅ䒭'VODUJPOWT倰岁.FUIPE 29

㣐鿈⟨涸玑䒭铃鎊鿪갸⯓㹁纏✫♧❉ 呍䗱暟⟝4UBOEBSECVJMUJOPCKFDUT ⢿㥶.BUI 0CKFDU "SSBZ⟃⿻4USJOH 㸐⦛剤ぐ荈涸㿂䚍莅倰岁雊⢪欽罏〳⟃䘰鸠《欽鸏⛳僽捀➊랃䧮⦛銴鼚⯝⢪欽⥃殆㶶涸⾲㔔 ⴅ䒭'VODUJPOWT倰岁.FUIPE 30

㼭鑑魨䩛䒊用♧⦐暟⟝荛㼱銴剤♲⦐㿂䚍ㄤ♧⦐倰岁 ⢪欽GPS鶬㕖鱒ⴀ鿈须俲ㄎ〭⡹㹁纏涸倰岁 31

TDSJQU 32

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

TDSJQU 鸒䌢䧮⦛剚䪾墂呪ⴕꟚ⢵㻨 ⱄ鏤㹁騟䖜䱺饱⢵ 34

<html> <head> <title>NCC JavaScript</title> </head> <body> <script src="main.js" type="text/javascript"> alert("Hello
World!"); </script> </body> </html> TDSJQU main.js 35

4VCMJNF5FYU 㖈荈䊹涸ꨶ舡♳㻨+BWB4DSJQUゅ 36

㸞酤4VCMJNF5FYU 1MVHJO&NNFU IUUQTHPPHMVW)0 37

%0.矦➝ 38

%0. %PDVNFOU0CKFDU.PEFM 39

%0. Ꟁ䖤䖎⫹♧喏埠 http://www.w3schools.com/js/js_htmldom.asp 40

㷸㥪%0.⡹〳⟃ %0. 佖隶⾲剤涸)5.-ㄤ$44 ⸈Ⰵ䧴ⵅꤑ)5.-ㄤ$44 剓ꅾ銴涸㽠僽ㄤ⢪欽罏✽⹛ 41

㖈闍%0.⛓⵹⡹♧㹁銴钢陏 )5.- )ZQFS5FYU.BSLVQ-BOHVBHF 42

)5.-ⰅꟌ 43

)5.- )5.-僽♧珏垦爚铃鎊欽⢵䲾鶤笪갤涸Ⰹ㺂ⱄ鷴麕懳錒㐼ツ植 ⢿㥶 邍呔垦겗 ⴪邍 Ⰹ俒鸮穡䕧⫹
44

)5.- ➊랃僽垦硹5BH 垦硹Ꟁ鸏垺 UBH 䎙⛖䨾剤)5.-涸垦硹鿪僽䧭㼩涸 QTPNFUIJOHQ Ꟛ㨥垦硹穡㽵垦硹銴㢵⸈♳♧⦐չպ 45

)5.- 㛇劥卺圓 <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body>
<h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> 46

<h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> Ը %0$5:1&㹁纏鸏⦐俒⟝涸겳㘗僽)5.- 47

<h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> Ը IUNM䲾鶤鸏⦐俒⟝僽)5.- 48

<h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> Ը IFBE欽倴鋊眕ㄤ侮넓笪갤湱ꡠ涸须鎝 49

<h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> Ը CPEZ㽠僽剚ツ植㖈笪갤♳涸Ⰹ㺂 50

)5.- <h#> 標題 </h#> <h1> Heading 1 </h1> <h2> Heading
2 </h2> <h3> Heading 3 </h3> <h4> Heading 4 </h4> <h5> Heading 5 </h5> <h6> Heading 6 </h6> 㣐㼭 ꅾ銴䚍 51

)5.- <p> 段落⽂文字 </p> paragraph 懳錒㐼㖈隡《)5.-玑䒭焺儘剚荈⹛䙐殜㢵긅涸瑠涯ㄤ遤侸䨾⟃䳖遤㽠欽 <br> break 52

<a href="url"> 連結⽂文字 </a> 䭸ぢ鸮穡涸⡙縨 )5.- 53 鸮穡

<img src="url" alt=""> )5.- 䭸ぢ㕮晚涸⡙縨㕮晚搂岁곏爚  涸➿剐俒㶶㼱侸㖈)5.-♶䧭㼩涸垦硹 54 䕧⫹

)5.- <button> 按鈕 </button> 55

)5.- <!-- 註解 --!> comment line 56

)5.- 〥㢫鼩剤䖎㢵 ul, li, table, b, i …… ⿡㉏(PPHMF㣐牟 sӟA
 http://www.w3schools.com/html 57

$MBTTWT*% )5.- 58

欽⢵ⴕ겳 䘰鸠㤛欽$44 雊玑䒭焺隶㥪溏 )5.- 59

)5.- <element class="value"> ꤑ✫暶㹁垦硹⟃㢫涸⟤䠑垦硹 겳ⴽそ珖〳⟃荈歋ㄐそ $MBTT 60

)5.- <element id="value"> *% 欽岁ㄤ$MBTT♧垺 ⡎Ⱘ剤㈔♧䚍锞鼚⯝㖈)5.-⚥ꅾ醳⢪欽 61

%0. 62 雊䧮⦛㔐ⵌ ✲⟝ &WFOU

%0.&WFOU &WFOU✲⟝㽠僽欽⢵鍸涮 +BWB4DSJQU涸GVODUJPOⴅ䒭 " )5.-遤Ⰹ㿂䚍鼚⯝⢪欽 # ⢪欽BEE&WFOU-JTUFOFS 63

%0.&WFOU " )5.-遤Ⰹ㿂䚍 64

%0.&WFOU 䌢鋅涸&WFOU 事件名稱描述 onchange 內容被改變時，EX: select onclick 內容被點擊時 onmouseover
滑⿏鼠滑到某物件上 onmouseout 滑⿏鼠滑離某物件上 onsubmit 表單被送出時 onerror 載⼊入圖⽚片或⽂文件錯誤時 65

%0.&WFOU # ⢪欽BEE&WFOU-JTUFOFS element.addEventListener(event, function) )5.-暟⟝ ✲⟝湌聃ⴅ䒭銴湌聃涸 ✲⟝そ珖湌聃ⵌ儘銴
㛂遤涸ⴅ䒭 FWFOU涸㖒倰銴䪾PO䭭䱈⚛⸈♳䒸贫 &9PODMJDLˋDMJDL 66

document.getElementById() or document.getElementsByClassName() %0.&WFOU 㥶⡦雊+4䫌ⵌ)5.-涸暟⟝ 67

%0.&WFOU # ⢪欽BEE&WFOU-JTUFOFS 68

%0.&WFOU # ⢪欽BEE&WFOU-JTUFOFS ㄤPOYYY♶ず涸㖒倰㖈倴〳⟃㼩ず♧暟⟝鏤㹁㢵⦐贖椚ⴅ䒭 69

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

NCC-JavaScript-Week#4

NCC-JavaScript-Week#4

More Decks by Irene Chang

Other Decks in Education

Featured

Transcript