Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JavaScript 入門 - Web 前端程式開發實務

JavaScript 入門 - Web 前端程式開發實務

Joseph Chiang

May 02, 2013
Tweet

More Decks by Joseph Chiang

Other Decks in Programming

Transcript

  1. Copyright © 2012 FITPI. All rights reserved. ᆞ⃷⃾ᆩ 3 ၛᾛΆൔᆦჱ֥ٚൔῲῘứ↌ᅟ

    ୆֥)5.-ἲ὏ਔ᾵ἧaᄜႨਔ$44ἡჍຓἭ ୆֥↌ᅟၛॖ⃸ದἭु෮Ⴕ⤨ಸ +BWB4DSJQU൞ቋᗥҌℯቔ֥-BZFS ᇶေଢ֥ᄝᧄᄹル↌∉ྛ㬪a⃸൐Ⴈᆀ۷ݺႨ ∣х૧၂קေ+BWB4DSJQUҌି൐Ⴈ֥ཋᇅ
  2. Copyright © 2012 FITPI. All rights reserved. ᆞ⃷⃾ᆩ 4 ๏

    ۵+BWB൞ປಆ҂๝֥‥⊕∽࿽b ๏ +BWB4DSJQU❣҂ᆺթᄝ#SPXTFSᇏ ❖ $PNNBOE-JOFଁ਷ྛ ❖ 4FSWFSTJEFᗥ؊යڛఖ∽࿽ ๏ #SPXTFS䥰؟ਔ%0.֥"1*a⃸ +BWB4DSJQUିթ౼)5.-b
  3. Copyright © 2012 FITPI. All rights reserved. ྛᾇ+BWB4DSJQU 6 ᆰࢤᄝṌ⚓⤨൐ႨPO൙ࡱℾྟ

    <p on<ࣄ݅>="JS ఔࣜᛰ">...</p> ᆰࢤᄝBṌ⚓֥ISFGℾྟ൐Ⴈℾྟ <a href="javascript:JSఔࣜᛰ">...</a> ҂๷ᾑĆᾞ௥ὒ)5.-ᆺႵ᾵ἧ֥ჰ≣Ć
  4. Copyright © 2012 FITPI. All rights reserved. ళೆൔ+BWB4DSJQU 7 ᆰࢤᾞ+BWB4DSJQU⇔ᄝ)5.-⤨֥ቔم

    <script type="text/javascript"> JavaScript ఔࣜᛰ </script> UZQFॖസ੻ TDSJQUTDSJQUṌ⚓ ࡹ∗٢ᇂ໊ᇂğCPEZᆭభ ҂๷ᾑĆᾞ௥ὒ)5.-ᆺႵ᾵ἧ֥ჰ≣Ć ᆺႵೆ१↌ᅟླေč෎؇ᾱॹĎ
  5. Copyright © 2012 FITPI. All rights reserved. ຓ҆+BWB4DSJQU 8 ႄႨຓ҆+BWB4DSJQUẵσčࡹ∗ڸẵ଀㬪KTĎ

    <script type="text/javascript" src="JS 䈕Ҋ࿏ኸ"></script> TDSJQUṌ⚓஥ކTSDℾྟ var name = “Awoo”; alert(“Hello ” + name); ∻ຓ҆ẵσ’᾵ ¸҂ླTDSJQUṌ⚓ ๷ᾑĆ→ӻ)5.-ᆺႵ᾵ἧ֥ჰ≣Ć UZQFॖസ੻
  6. Copyright © 2012 FITPI. All rights reserved. 9 ‣↮Ⴈ)5.- http://f2eclass.com/lab/js/_template.html

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JavaScript</title> </head> <body> <script> // ࡏഝᬑሜ JavaScript ఔࣜᛰ </script> </body> </html> ⅖ಖ҂๷ᾑళೆൔđ֌≾∄‣↮ఏῲбᾱٚь
  7. Copyright © 2012 FITPI. All rights reserved. +BWB4DSJQU∽م 11 ໡ֻ֥၂ἠ+BWB4DSJQU

    )FMMP/BNF var name = "Awoo"; alert("Hello! " + name); ࿆ۡ ṉ⅂଀Ẁčնཬ⇔Ⴕ⦁Ď ṉ⅂ᆴ ሳԱླႨႄὂ Ẫ⅄ႄὂࢥॖ ሳԱކ⟸a⅂ᆴ֥ࡆὂ׻൞Ⴈ
  8. Copyright © 2012 FITPI. All rights reserved. +BWB4DSJQU∽م 12 var

    name = "Awoo"; alert("Hello! " + name); ‣↮ुु http://f2eclass.com/lab/js/hello.html ໡ֻ֥၂ἠ+BWB4DSJQU )FMMP/BNF
  9. Copyright © 2012 FITPI. All rights reserved. 7BSJBCMFṉ⅂ 13 var

    name = "Awoo"; ސ໊ࢥٛੋᏓಈత name = name + " Chiang"; alert(name); //"Awoo Chiang"
  10. Copyright © 2012 FITPI. All rights reserved. 7BSJBCMFṉ⅂ 14 alert(fruits);

    ະఆٛܕผ var fruits; alert(fruits); // undefined ࣥߦ౸ະએࠂతᏓᏐɼ ။㗞ੜࡨޡฒதࢭࣥߦ Uncaught ReferenceError: fruits is not defined ༗એࠂबෆ။ࡨޡ http://f2eclass.com/lab/js/undefined.html http://f2eclass.com/lab/js/undefined-2.html
  11. Copyright © 2012 FITPI. All rights reserved. 7BSJBCMFṉ⅂ 16 var

    age = 18 + ""; // "18" ܕผؒత᫚׵ ྘⦁൞٤ӈ⅌೛֥ age = age*2; // 36 ॖၛႨUZQFPGἬᾗሳἭु྘⦁
  12. Copyright © 2012 FITPI. All rights reserved. 7BSJBCMFṉ⅂ 18 var

    fruits = ["kiwifruit", "grape", "orange", "starfruit", "guava"]; alert(fruits[0]); // "kiwifruit" alert(fruits[4]); // "guava" alert(fruits[5]); // undefined ਞྻܕผ ਞྻతࡧҾኺ 0 ։࢝ܭࢉ
  13. Copyright © 2012 FITPI. All rights reserved. 7BSJBCMFṉ⅂ 19 var

    students = { knock: { gender: "male", position: "manager" }, allen: { gender: "male", position: "engineer" } }; alert(students.knock.position); // "manager" ෺݅ܕผ ໨લ໢࿏্ओཁతࢿྉަ׵ܕଶ - JSON
  14. Copyright © 2012 FITPI. All rights reserved. 7BSJBCMFṉ⅂ 20 var

    getStudentNames = function () { // do something here... }; വࣜ նওὂaॖ㍤ྛ ҂ିസ੻ ေႵٳὂĆ
  15. Copyright © 2012 FITPI. All rights reserved. 7BSJBCMFṉ⅂ 21 വࣜ

    - ჩᏐɺճၚ var getStudentPosition = function (data) { return data.knock.position; }; Ṛ⅂ğ⃸ݦൔ൐Ⴈఏῲ۷Ằྟ ߭ẖᆴč҂၂קေႵĎ var position = getStudentPosition(students); alert(position); വࣜత࢖༻ɿ
  16. Copyright © 2012 FITPI. All rights reserved. +BWB4DSJQUݦൔಌك ๏ ҂ิ܂QSJWBUFčႵูսቔمĎ

    ๏ ؟≘0WFSMPBE↥م၇Ṛ⅂⅂ਈ҂๝ ⊋ྛ๝଀֌҂๝֥ݦൔb ๏ ↥مᆰࢤูṚ⅂ᆷק≁℟ᆴb 22
  17. Copyright © 2012 FITPI. All rights reserved. $MPTVSF 23 var

    foo = 1; var doSomething = function () { alert(foo); foo = foo + 1; }; doSomething(); alert(foo); // 2 doSomething(); alert(foo); // 3 GPP❣҂ℾᧄՎݦൔa൞ຓࢸ֥ṉ⅂ ݦൔᇏႵ٤⃯თṉ⅂္٤Ṛ⅂֥ṉ⅂ ҂๝ℭ௹⊋ྛGPPᆴ὜Ⴕ෮҂๝ ⊈ૼਔğGPP൞ФЌթṉ⅂ط٤ṉ⅂ᆴ
  18. Copyright © 2012 FITPI. All rights reserved. $MPTVSF 24 var

    doOne = function () { var x = 10; return function (y) { return x + y; }; }; var doOther = doOne(); alert("doOther(10) : " + doOther(10)); alert("doOther(20) : " + doOther(20)); ۷♶≗၂ề Y❣҂ℾᧄՎݦൔa൞ຓࢸ֥ṉ⅂ Yṉ⅂ಯಖФ$MPTVSFЌ਽ᇷb
  19. Copyright © 2012 FITPI. All rights reserved. 4DPQF 25 var

    foo = 1; doSomething = function () { var foo = 2; foo = foo + 1; }; doSomething(); alert(foo); // ? ݦൔ὜ྙӮ၂ἠቔႨთ ቔႨთ
  20. Copyright © 2012 FITPI. All rights reserved. ಆთṉ⅂ 26 ໃ๩ἾWBSࠇᄝָṧ࿆֥ۡđ὜႕⇉෮Ⴕ֥+4

    ಌكWBS࿆ۡđ၂֊EP4PNFUIJOH⊋ྛa GPP὜ṉӮಆთṉ⅂b var doSomething = function () { foo = 1; }; doSomething(); <script type="text/javascript"> var foo = 1; </script> ᄝቋഈṧ࿆ۡđ๝∄൞ಆთṉ⅂ ᇿၩğ࣌ᆸ൐Ⴈಆთṉ⅂a὜٤ӈࠁ⁙Ć
  21. Copyright © 2012 FITPI. All rights reserved. େ଀ݦൔ 27 ݦൔ҂၂ק׻ླေႵ଀ሳ֥

    <script type="text/javascript"> (function () { var foo = 1; }()); </script> ๩Ἶେ଀ݦൔ㸗ളቔႨთ ࢳ㢯ಆთṉ⅂֥↜ⅳĆ foo.onclick = doSomething; foo.onclick = function () { // doSomething; }; ề⇢ℭ⊋ྛଖἠऎ଀ݦൔ ề⇢ℭ⊋ྛେ଀ݦൔ
  22. Copyright © 2012 FITPI. All rights reserved. 26 ≓ෘሰ0QFSBUPS http://www.w3schools.com/js/js_comparisons.asp

    Conditional ӡࢉࢠ variable = (condition) ? value1 : value2; ⊯㣐Ӯ৫ ⊯㣐҂Ӯ৫ ⊯㣐
  23. Copyright © 2012 FITPI. All rights reserved. 27 ੀӱ஑ỗ if

    (㐫گ1) { } else if (㐫گ2) { } else if (㐫گ3){ } else { // ଖଞॴ༗৘گ } if... else...
  24. Copyright © 2012 FITPI. All rights reserved. ‣↮ğJGFMTF 28 ๏

    ⇔၂ἠ஑ỗൔđIPVSṉ⅂ᄝğ ❖ _ℭğ↾ൕ(PPENPSOJOH ❖ _ℭğ↾ൕ(PPEBGUFSOPPO ❖ _ℭğ↾ൕ(PPEFWFOJOH ❖ _ℭğ↾ൕ(PPEOJHIU http://class.josephj.com/lab/js/js-if-else.html
  25. Copyright © 2012 FITPI. All rights reserved. 29 switch ੀӱ஑ỗ

    var weekday = 1; switch (weekday) { case 1: alert("੕ظҰ"); break; case 2: alert("੕ظೋ"); break; case 3: alert("੕ظࡾ"); break; case 4: alert("੕ظ࢛"); break; case 5: alert("੕ظޒ"); break; case 6: alert("੕ظ࿡"); break; case 7: alert("੕ظ೔"); break; default: alert("ॄኄ೔ࢠ౎ෆੋʂ"); }
  26. Copyright © 2012 FITPI. All rights reserved. 30 ♻ಁ for

    (i = ։࢝; i < ݁ଋ; i++) { } ኷ଟࢿྉ႔ཧɺॏෳੑ޻࡞౎धཁ༻౸᫮ᅲ ໰୊ɿኺ 1 Ճ౸ 10 ֘ዎኄ၏ʁ for loop
  27. Copyright © 2012 FITPI. All rights reserved. 31 ♻ಁ foreach

    (i in obj) { alert(i); // ࠑ෺݅తୈ n ݸሱੑతሱੑ໊᜝ alert(obj[i]); // ࠑ෺݅తୈ n ݸሱੑతሱੑ } ओཁ਑ሣ෺݅ྨܕతᏓᏐ၏႔ཧ ࿅शɿྻग़ॴ༗ላੜత໊ࣈ foreach http://class.josephj.com/lab/js/js-foreach.html
  28. Copyright © 2012 FITPI. All rights reserved. ‣↮ğݦൔ 22 var

    getStudentPosition = function (data) { return data.knock.position; }; var students = { knock: { gender: "male", position: "manager" }, allen: { gender: "male", position: "engineer" } }; var position = getStudentPositoin(students); alert(position);
  29. Copyright © 2012 FITPI. All rights reserved. ໾ࡱẹཟࠎЧἭ୑ 34 ๏

    ෺݅ੋᘐཱతݸᱪɼ༗ࣗݾతሱੑٴํ๏ʢਓʣ ❖ ሱੑੋࠑݸᱪతࢿྉ ྫ೗ਓతʮ੏໊ʯɺʮ਎ߴʯɺʮᱪॏʯ ❖ ํ๏ੋࠑݸᱪతಈ࡞ ྫ೗ਓʮߨ࿩ʯɺʮ૸࿏ʯ ❖ ࣄ݅ੋࠑݸᱪ။䉰౸త㐫گ ௨ৗࡏํ๏ࣥߦޙɼྫ೗ਓ૸࿏ޙ䉰౸ྃʮ᪌౗ʯࣄ݅
  30. Copyright © 2012 FITPI. All rights reserved. Ἤᧄ໾ࡱ 35 ೗Ռ೺Ұݸਓᙛ੒Ұݸ෺݅...

    ៎ᥒɿখᣠ ӳจ໊ɿKevin ੑผɿஉ ੕࠲ɿڊֈ ๑䨉 ૸࿏ Ꮊؠ ሜఔࣜ ๑䨉䙸౸ ๑䨉׬ඟ Ꮊؠ׬ඟ ఔࣜ༗ᦚ ሱੑ ํ๏ ࣄ݅ var kvzhuang = { "៎ᥒ": "খᣠ", "ӳจ໊": "Kevin", "ੑผ": "உ", "੕࠲": "ڊֈ", "৺৘ࢦᏐ": 10, "๑䨉": function () {}, "૸࿏": function () {}, "Ꮊؠ": function () {}, "ሜఔࣜ": function () {} };
  31. Copyright © 2012 FITPI. All rights reserved. 37 ሳԱ໾ࡱ ๏

    MFOHUIࠑࣈ۲័௕౓ ๏ SFQMBDF GSPN UP ೺ from վҝ to ๏ JOEFY0G TUS ኺࣈ۲தፙ౸ str తҐஔ ๏ TVCTUS Y Z ҎࡧҾ x ։࢝औ y ݸࣈ ๏ TVCTUSJOH Y Z ҎࡧҾ x ~ y औಘ෦㟨㚎༰ ๏ TQMJU ፥։੒ਞྻ http://www.w3schools.com/jsref/jsref_obj_string.asp ೚Կࣈ۲ᏓᏐ౎༗ҎԼሱੑ҃വࣜ
  32. Copyright © 2012 FITPI. All rights reserved. 38 ⊄ਙ໾ࡱ ๏

    MFOHUIࠑਞྻ߲໨Ꮠྔ ๏ QVTI JUFN ሡ item ์ೖࠑਞྻத ๏ KPJO TUS ሡࠑਞྻ༻ str ߹ซҝࣈ۲ ๏ QPQ ๏ TQMJDF ೚ԿਞྻᏓᏐ౎༗ҎԼሱੑ҃വࣜ http://www.w3schools.com/jsref/jsref_obj_array.asp
  33. Copyright © 2012 FITPI. All rights reserved. 39 ರ௹໾ࡱ ๏

    HFU)PVST زᴍ (0~23) ๏ HFU%BUF زᥒ (1~31) ๏ HFU.JOVUFT ز෼ (0~59) ๏ HFU5JNF ኺ 1970/1/1 0 ࣌ॴៃ㑖తᓼඵᏐ (timestamp) http://www.w3schools.com/jsref/jsref_obj_string.asp ೚Կ೔ظᏓᏐ౎༗ҎԼവࣜʂ
  34. Copyright © 2012 FITPI. All rights reserved. #0. 40 ᖣ᧸ث෺݅໛ܕ

    ๏ #SPXTFS0CKFDU.PEFM ๏ Ⴎ/FUTDBQF⏟´ఖ෮ᇅק ๏ ิ܂ਔ+4Ớ⏟´ఖթ౼֥"1*ࢺ૫ ๏ ނྏ໾ࡱ㬪XJOEPX ๏ ҂ෘ൞Ṍ⊵đ֌Ⴕℭὕ൞֤Ⴈ
  35. Copyright © 2012 FITPI. All rights reserved. %0. 42 จ݅෺݅໛ܕ

    ๏ %PDVNFOU0CKFDU.PEFM ๏ ิ܂ਔ+4Ớ⏟´ఖթ౼֥"1*ࢺ૫ ๏ ނྏ໾ࡱ㬪EPDVNFOU ๏ Ⴎ8$ӻ⇟→Ὂ֥Ṍ⊵ ๏ %0.ᾞᆜἠ)5.-ℶ㬪⇝؟֥ᾳềa❣ิ܂ ⇝؟"1*ٚمթ౼aྍᄹa⦄Ԣaྩڿᾳề ๏ ໡ⁿᆺ൞๩Ἶ+BWB4DSJQUῲҠቔ%0."1*
  36. Copyright © 2012 FITPI. All rights reserved. 43 %0.5SFF <!DOCTYPE

    html> <html> <head> <title>Trees, trees, everywhere</title> </head> <body> <h1>Trees, trees, everywhere</h1> <p>Welcome to a <em>really</em> boring page.</p> <div> Come again soon. <img src="come-again.gif" /> </div> </body> </html> ඪតɺจࣈɺሱੑ౎ੋ DOM తҰ෦෼
  37. Copyright © 2012 FITPI. All rights reserved. ೂޅթ౼≾ུᾳềĤ 44 <div

    id="article"> <h1>৽ళࢢ޷٣త࢏ኗ</h1> <ul class="restaurant"> <li>ՄѪଜศᙛɿ୆๺០৽ళࢢେᩕ֗8ᥒ</li> <li>Ѩًݱᖱ㐋ڇ೑ɿ୆๺០৽ళࢢதڵ࿏ࡾஈ225ᥒ</li> <li>∍ਓڇ೑ṵɿ୆๺០৽ళࢢதڵ࿏ࡾஈ176ᥒ</li> <li>ોߌɿ୆๺០৽ళࢢຽᒟ࿏25ᥒ2F</li> <li>ԦՈแࢠɿ୆๺០৽ళࢢᅳߍ࿏25ᥒ೭1</li> <li>᫤ɻ࢛઒੒౎খᖱɿ୆๺០৽ళࢢ٢҆࿏2-1ᥒ</li> <li>ࢁ౦ᰤࢠؗɿ୆๺០৽ళࢢதԝ࿏133޽19ᥒ1ᒭ</li> <li>ᒜಃવ݈߁খՐುɿ୆๺០৽ళࢢதԝޒ֗2ᥒ</li> <li>࿡࿡Րುɿ୆๺០৽ళࢢதԝ࿏89ᥒ</li> <li>ཾ໳٬ᑣɿ୆๺០৽ళࢢதԝ࿏98ᥒ೭1</li> <li>ṵሣṵɿ୆๺០৽ళࢢதԝ࿏33ᥒ</li> </ul> </div>
  38. Copyright © 2012 FITPI. All rights reserved. ೂޅ౼֤ᾳề 45 ๏

    EPDVNFOUHFU&MFNFOU#Z*E ๏ EPDVNFOUHFU&MFNFOUT#Z5BH/BNF ๏ EPDVNFOUHFU&MFNFOUT#Z$MBTT/BNF ๏ #0.෮ิ܂֥ٚمč҂ࡹ∗Ď ๏ ޓṵ၂ԱĤᗥ૫ࢺℚ+BWB4DSJQUݦൔῠℭ׻ ॖၛ⃦⅌ࢳ㢯Ć http://class.josephj.com/lab/js/js-dom-access.html http://f2eclass.com/lab/js/dom-access.html
  39. Copyright © 2012 FITPI. All rights reserved. ӈႨ֥ℾྟࠇٚم 46 ๏

    JOOFS)5.-ồ⇔ః⤨ಸ ๏ OPEF/BNF౼֤Ṍ⚓଀Ẁ ๏ OPEF7BMVF౼֤Ṍ⚓֥ᆴ ๏ TUZMF℟קՎṌ⚓֥∄ൔ ๏ 䵔ሼᾳềğQBSFOU/PEF DIJME/PEFT  OFYU4JCMJOH QSFWJPVT4JCMJOH ๏ ẕ৘ᾳềğBQQFOE$IJME SFNPWF$IJME  DMPOF/PEF http://class.josephj.com/lab/js/js-dom-method.html http://f2eclass.com/lab/js/dom-attribute.html http://f2eclass.com/lab/js/dom-method.html
  40. Copyright © 2012 FITPI. All rights reserved. ᾳề֥Ҡቔ ๏ ྍᄹ၂ἠᾳề֞↌∉

    %0. ᇏb ❖ ࡹ৫໾ࡱṚॉ ὕ㢻ℯό٢֞%0.ᇏ ✦ WBSFMEPDVNFOUDSFBUF&MFNFOU Ṍ⚓଀Ẁ  ❖ ℟קՎᾳề֥ℾྟ∻⤨ಸđ২ೂğ ✦ FMJOOFS)5.-CMBICMBICMBI ❖ ⊀Ớေ㍂≘֥ଛᾳềa൐ႨBQQFOE$IJMEJOTFSU#FGPSFℾྟ ✦ WBSMJTUEPDVNFOUHFU&MFNFOU#Z*E QIPUPT  MJTUBQQFOE$IJME FM  ๏ ⦄Ԣ၂ἠᾳề ❖ ༵౼֤ՎᾳềṚॉđᄜၛଛᾳềቓ⦄Ԣb ❖ FMQBSFOU/PEFSFNPWF$IJME FM Ⴕⴺ⚉ᕨ֥9% ๏ ♶⚧൐ႨDMPOF/PEFa၍ọ൐ႨBQQFOE$IJME 52
  41. Copyright © 2012 FITPI. All rights reserved. ‣↮ğࡹ৫ᾳề 53 WBSJUFNT<

    ॖḨըьằğ෻К⇂ྍ׋൧նỽࢧὂ έὙ⇀ә喆୤ಽğ෻К⇂ྍ׋൧ᇏ⇙ਫ਼೘؍ὂ ޑದ୤ಽ⚏ğ෻К⇂ྍ׋൧ᇏ⇙ਫ਼೘؍ὂ ⅓ݳğ෻К⇂ྍ׋൧૶⃴ਫ਼ὂ' ຦ࡅЇሰğ෻К⇂ྍ׋൧Ἵ཮ਫ਼ὂᆭ জbඹԫӮ׻ཬәğ෻К⇂ྍ׋൧ࠝνਫ਼ὂ ೶ỌᾭሰἮğ෻К⇂ྍ׋൧ᇏနਫ਼ཛྷὂ‾  ศಖࡲूཬࠅἼğ෻К⇂ྍ׋൧ᇏန໴ࢧὂ ੂੂࠅἼğ෻К⇂ྍ׋൧ᇏနਫ਼ὂ ‷⁽ग़≲ğ෻К⇂ྍ׋൧ᇏနਫ਼ὂᆭ ⚏Ớ⚏ğ෻К⇂ྍ׋൧ᇏနਫ਼ὂ > http://f2eclass.com/lab/js/dom-appendchild.html ᾞ⊄ਙ⊨㍤㬪MJਙі ‣↮భ૫⇥֥֞♻ಁa%0.֥౼֤∻Ҡቔ for (var i = 0, j = items.length; i < j; i++) { items[i]; // ߲໨ i త值 }
  42. Copyright © 2012 FITPI. All rights reserved. %0.&WFOU ๏ +BWB4DSJQU۵ః෰∽࿽ቋն֥҂๝ğ

    w൙ࡱ⃱ọx &WFOUESJWFO ๏ ằ൐Ⴈᆀቓਔ൉喁൙౦ℭđࣼಀ⊋ྛଖ ἠݦൔ ๏ %0.ิ܂ਔ؟∄߄֥&WFOU ߁ඊ൙ࡱaᾗ₲൙ࡱaіẪ൙ࡱa൭Ὠ ൙ࡱ 54
  43. Copyright © 2012 FITPI. All rights reserved. ൙ࡱਙі ๏ DMJDL߁ඊềὧ

    ๏ ECMDMJDL߁ඊ⅄ềὧ ๏ NPVTFNPWF߁ඊ၍ọ ๏ NPVTFPWFS߁ඊ၍ೆ ๏ NPVTFPVU߁ඊ၍ԛ ๏ NPVTFVQ߁ඊề⇢ٚῘ ๏ LFZEPXOοᾗ⇭ָ֞ ๏ LFZQSFTTοᾗῘ൓⇭ ๏ LFZVQοᾗẰఏῲ ๏ CMVSࢊề၍Ԣ ๏ DIBOHF⤨ಸڿṉ ๏ GPDVTࢊề ๏ SFTFUіẪᇗ℟ ๏ TFMFDU⇢౼໓ሳ ๏ TVCNJUіẪෂԛ ๏ BCPSUᇏᆸẖෂ ๏ FSSPSấ↪ứള ๏ MPBEồ౼ປṂ ๏ SFTJ[F໓ࡱڿṉնཬ ๏ TDSPMM߁ඊ㨐⁛൙ࡱ ๏ VOMPBE໓ࡱཱྀԢ ๏ CFGPSFVOMPBE 48
  44. Copyright © 2012 FITPI. All rights reserved. %0.&WFOUḳم ๏ ᆰࢤᄝṌ⚓⤨൐ႨPO൙ࡱℾྟ

    ❖ QPO൙ࡱ+4ӱൔQ ❖ ҂ࡹ∗b὜௥ὒ)5.-ᆺἌ≡᾵ἧ֥ჰ≣b ๏ ໾ࡱṚॉPO ൙ࡱ଀Ẁ ᆷקݦൔ  ❖ ಌềğ၂ἠ໾ࡱᆺିỚ၂⊕൙ࡱḳ၂Ցđᗥ૫ᆷק֥὜ڭ⇔b ๏ ໾ࡱṚॉBEE&WFOU-JTUFOFS ൙ࡱ଀Ẁ ᆷקݦൔ  ❖ ∱ềğ၂ἠ໾ࡱॖၛỚ؟ἠ൙ࡱḳ؟Ցđᗥ૫ᆷק֥∱༵⊋ྛb ❖ ಌềğ*&ΈϱЧ֥⏟´ఖ҂ᆦჱb *&൞ႨBUUBDI&WFOU 49
  45. Copyright © 2012 FITPI. All rights reserved. ‣↮ğ᾵ކ൙ࡱ 57 http://f2eclass.com/lab/js/dom-event.html

    ྍᄹa⦄Ԣaྩڿᾳề֥ọቔ׻Ⴎ൐ႨᆀҠቔ ọቔॹ֥๝⇥⃪Ḳ໡᾵ކ#PPUTUSBQ
  46. Copyright © 2012 FITPI. All rights reserved. 50 ൙ࡱẕ৘Ὠᇅ Ⴕℭေḳ֥໾ࡱॖିႵέϤἠđ

    ॖၛႨ⃊ஞ֥ۀ୑ḳቋຓṧ֥ࠧॖ ຾಩ ൺֱগ༻ ৗ༻
  47. Copyright © 2012 FITPI. All rights reserved. ῜ӱ߭Ἢ ๏ ᾛΆൔᆦჱğู↌∉ࡆഈ+BWB4DSJQUᗥđิ

    ܂ਔྛ㬪aٚь൐ႨᆀҠቔb ֌٤с⇜ ๏ +BWB4DSJQU൞ӱൔ∽࿽đॖթᄝᧄ۲⊕௜෻b ๏ ẕ৘⏟´ఖ֥ᾳề∻൙ࡱႮ%0."1*෮ิ܂ ֥a+BWB4DSJQUᆺ൞ૂࢺb ๏ %0."1*ᄝૄἠ⏟´ఖ֥ℯቔ҂๝đ⇔ఏῲ ္ઐỮđၹՎᄯࣼਔཞ:6*∻K2VFSZ≾∄ +BWB4DSJQU-JCSBSZ֥ắളb ๏ Ч῜ӱᇶေᄝࡹ৫ࠎẒ∻ᆞ⃷⃾ᆩđໃῲ֥ %0.Ҡቔ὜൐Ⴈ-JCSBSZῲ౼սb 59