Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Copyright © 2012 FITPI. All rights reserved. ằῒ֤ӱൔ෾؟aླᇗ♶൐Ⴈđ్ٳଆ⊾὜൞ޓϿ֥ቔم Ớᧄ൐Ⴈᆀῲ䪌a҂Ⴈ㬪ਔ၂ἠཬۿିϜ၂ؐỌ༆ঘ࣍ῲ ෮Ⴕ:6*ଆ⊾ẵσࢥс⇜ၛ≾∄֥ٚൔЇڭğ YUI.add("໛૊໊᜝", function (Y) { }, requires:["ॴध໛૊ 1", "ॴध໛૊ 2"]); // ্ํతჩᏐ Y ୅දྃ YUI త Instance function Editor() { // ഝੋ෺݅తݐߏࣜ } // ሡݐߏࣜఏঢ౸ Global Y.Editor = Editor; editor editor.js Why callback? ٢֞∉૫ഈℭ҂὜৫ࠧ⊋ྛa ֩֞ေႨℭᄜ⊋ྛࠧॖbݺẕ ൞ቓӱൔ⁫֥ۯ a҂ᄜླေ ẕ৘ૄἠଆ⊾ᾇ֥༵ᗥⅆ྽b 11 :6*ଆ⊾ࡏἧ

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Copyright © 2012 FITPI. All rights reserved. // AMD Module define(function () { function Editor { /* Constructor */ } return Editor; }); require(["editor"], function (Editor) { new Editor(); }); // YUI Module YUI.add("editor", function () { function Editor { /* Constructor */ } Y.Editor = Editor; }); YUI.use("editor", function (Y) { new Y.Editor(); }); 13 ః෰⇢≢3FRVJSF+4 ଢభԢਔ:6*đഉໃႵః෰ݦൔῠ⤨ࡹଆ⊾߄ ֌3FRVJSF+4ॖၛቓ֞wạਬῘ൓x ۀ୑έެ၂∄đ֌:6*ၘῂႵỽڶ֥ଆ⊾ 3FRVJSF+4≣ᆺ൞ἠࡏἧđ୆ေሱ࠭Ϝଆ⊾ࡆΆಀ

Slide 14

Slide 14 text

Copyright © 2012 FITPI. All rights reserved. 14 ྍ൭ն؟ᆺေἌ≡wႨxଆ⊾ࠧॖ ླնࡅ৘ࢳwଆ⊾൞:6*֥ቋཬẪ໊x ေႨ಩ޅۿିđ୆с⇜ᆩ֡ଆ⊾֥଀Ẁğ ၂ἠଆ⊾๙ӈࣼ൞၂ἠẵσ ෮ၛଆ⊾߄֥ಌề൞ẵσ὜ṉ؟Ć Мᗥ္ླေႵὨᇅࢳ㢯3FRVFTU⅂ਈ֥↜ⅳ ଆ⊾଀Ẁ∻≘ೆ http://yuilibrary.com/yui/docs/yui/modules.html :6*֥෮Ⴕଆ⊾ਙі

Slide 15

Slide 15 text

Copyright © 2012 FITPI. All rights reserved. 15 ‣↮ğ:6*ଆ⊾ http://f2eclass.com/lab/yui/module.html ๏ ၘῂթᄝ၂ἠDMBTTଆ⊾đ⤨Ⴕ:$MBTTࢺℚࠎЧ⊷⇫ࠣ HFU4UVEFOUT֥ݦൔb ๏ ⃪০Ⴈ:6*BEEྍᄹ၂ἠGJUQJଆ⊾đ䥰૫ླק∕⇥ള଀Ẁਙі :$MBTTTUVEFOUT ❣ᆷקཌྷ၇ଆ⊾b ๏ ቋᗥ:6* VTFᆷקGJUQJ❣ޫࢡ:$MBTTHFU4UVEFOUTݦൔb ྍᄹ၂ἠ:6*ଆ⊾ YUI.add("ଆ⊾଀Ẁ", function () { ଆ⊾⤨ಸ },"ሱקϱὂ", {requires:["ཌྷ၇ଆ⊾"]});

Slide 16

Slide 16 text

Ⴕིੱֹ≘ೆ෮ླေ֥֥$44∻+BWB4DSJQUẵσ http://www.ﬂickr.com/photos/bdesham/2432400623 16 ≘ೆఖ-PBEFS

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Copyright © 2012 FITPI. All rights reserved. escape yui (Seed) widget datatable-core base-build datatable-head datatable-body model-list node-event-delegate base-base attribute event-focus base-plugin-host node-base node-style classnamemanager view yui-base event-delegate pluginhost event-synthetic attribute-core attribute-events attribute-extras array-extras array-invoke arraylist json-parse model YUI().use('datatable') 23 ίෘཌྷ၇ଆ⊾֥Ἶӱ

Slide 24

Slide 24 text

Copyright © 2012 FITPI. All rights reserved. ルն֥⇭⅜Ὠ భ၂∉ᆺਙԛਔἠଆ⊾đ֌ℯόഈ὜Ⴕἠ ἠଆ⊾ࣼսіਔἠẵσa୆ॖି὜ῒ֤ޓῢ≵ ֌ଆ⊾߄ࣼ൞ေϜ҂ཌྷۄ֥ӱൔԎ a᾽ॖିࣚᾏ :6*֥$PNCP)BOEMFSॖϜ⅂ਈ֥↜ⅳṼָࢳ㢯 http://yui.yahooapis.com/combo? <໛૊1త䈕Ҋ࿏ኸ>& <໛૊2త䈕Ҋ࿏ኸ>& ... YUI().use('datatable') 24 $PNCP)BOEMFS

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Copyright © 2012 FITPI. All rights reserved. John Resig The creator of jQuery YUI().use() + pulling code off of Yahoo's CDN is damn sexy and should be promoted *VERY* heavily. http://www.quora.com/How-could-YUI3-improve-its-image-compared-to- jQuery-MooTools-etc :6*ሱọ≘ೆݦൔῠ֥ٚൔℯᄝ ෾4FYZਔa∣ἐФն৯๷ἱ 27 ’K2VFSZቔᆀ׻䪌

Slide 28

Slide 28 text

Copyright © 2012 FITPI. All rights reserved. ‣↮ğ-PBEFS 28 http://f2eclass.com/lab/yui/loader.html YUI().use("datatable", function (Y) { Y.log(Y.DataTable); alert("ቮៃࡌೖ datatable ໛૊"); }); ≾ἠ‣↮ᆺေο'a⇢౼/FUXPSL ↌ਫ਼ Ἥु:6*֥SFRVFTUࠧॖ

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Copyright © 2012 FITPI. All rights reserved. 30 ๏ 2VJDL4UBSU ྍ൭ഈਫ਼ ๏ 6TFS(VJEFT ٳ⁽⦁ ਙԛ:6*ܲٚ෮Ⴕ⤨ಸ ๏ (FUUJOH4UBSUFE ⊀Ớ၂ἠଆ⊾֥ࢺℚ ๏ "1*%PDVNFOUBUJPO ਙԛ၂ἠଆ⊾֥෮Ⴕℾྟaٚمa൙ࡱ ๏ .PEVMF նᇁਔࢳଆ⊾֥ٳم IUUQZVJMJCSBSZDPNZVJEPDTZVJNPEVMFTIUNM :6*ܲ↌ࢺℚ

Slide 31

Slide 31 text

Slide 32

Slide 32 text

Slide 33

Slide 33 text

Slide 34

Slide 34 text

৽ళࢢ޷٣త࢏ኗ

ՄѪଜศᙛɿ୆๺០৽ళࢢେᩕ֗8ᥒ
Ѩًݱᖱ㐋ڇ೑ɿ୆๺០৽ళࢢதڵ࿏ࡾஈ225ᥒ
∍ਓڇ೑ṵɿ୆๺០৽ళࢢதڵ࿏ࡾஈ176ᥒ
ોߌɿ୆๺០৽ళࢢຽᒟ࿏25ᥒ2F
ԦՈแࢠɿ୆๺០৽ళࢢᅳߍ࿏25ᥒ೭1
᫤ɻ࢛઒੒౎খᖱɿ୆๺០৽ళࢢ٢҆࿏2-1ᥒ
ࢁ౦ᰤࢠؗɿ୆๺០৽ళࢢதԝ࿏133޽19ᥒ1ᒭ
ᒜಃવ݈߁খՐುɿ୆๺០৽ళࢢதԝޒ֗2ᥒ
࿡࿡Րುɿ୆๺០৽ళࢢதԝ࿏89ᥒ
ཾ໳٬ᑣɿ୆๺០৽ళࢢதԝ࿏98ᥒ೭1
ṵሣṵɿ୆๺០৽ళࢢதԝ࿏33ᥒ

๏ ౼֤၂ἠSFTUBVSBOUᾳề var node = Y.one(".restaurant"); ๏ ౼֤෮ႵMJ var nodes = Y.all("li"); ๏ ౼ֻ֤ἠMJ var nodes = Y.one("li:nth-child(5)"); Ⴈ$44⇢౼ఖ౼֤ᾳề ౼֤֥ᾳềॖၛᄜಀ౼ᾳề ๏ ౼֤၂ἠBSUJDMFᾳề var node = Y.one("#article"); ๏ ౼֤BSUJDMF༯૫֥෮ႵMJᾳề var itemNodes = node.all("li"); ࿅श - http://f2eclass.com/lab/yui/node.html Y.all(); Y.one();

Slide 35

Slide 35 text

Copyright © 2012 FITPI. All rights reserved. OPEFթ౼ᾳề ๏ HFU TFU ౼֤℟קℾྟ ๏ BEE$MBTT SFQMBDF$MBTT SFNPWF$MBTT UPHHMF$MBTT ๏ HFU)5.- TFU)5.-౼֤۷ྍ⤨ಸ ๏ HFU4UZMF TFU4UZMF ౼֤℟ק∄ൔ ๏ BODFTUPS ౼֤ଛᾳề ๏ BQQFOE SFNPWF ྍᄹሰᾳề⦄Ԣᾳề ๏ ۷؟ࢺℚğIUUQZVJMJCSBSZDPNZVJEPDTOPEF 35 ࿅श - http://f2eclass.com/lab/yui/node2.html

Slide 36

Slide 36 text

Slide 37

Slide 37 text

Copyright © 2012 FITPI. All rights reserved. ‣↮ğOPEFFWFOU 37 c০Ⴈ:EFMFHBUFḳ൙ࡱ c:EFMFHBUF DMJDL ݦൔ ⇢≢ఖ cềὧ߁ඊϜMJṉӮ喆೤ cOPEFBEE$MBTT IJHIMJHIU c⅄ᇗềὧECMDMJDLϜMJἡ⦄Ԣ cOPEFSFNPWF c⦄ԢປṂẔứ၂ἠ൙ࡱ c:GJSF EFMFUFE Ҕⅸ଀Ẁ http://f2eclass.com/lab/yui/node-event.html

Slide 38

Slide 38 text

Slide 39

Slide 39 text

Copyright © 2012 FITPI. All rights reserved. 39 ๏ WBSBOJNOFX:"OJN ℟ק໾ࡱ ๏ ℾྟGSPN 0CKFDU ọ὎Ῐ൓ℭ ๏ ℾྟUP 0CKFDU ọ὎᾵ඏℭ ๏ ℾྟEVSBUJPO /VNCFS ⊺܋૰⅂ ๏ ℾྟFBTJOH 4USJOH ིݔ ๏ ݦൔBOJNSVO ๏ ൙ࡱFOE ‣↮ğ:"OJN http://f2eclass.com/lab/yui/anim.html

Slide 40

Slide 40 text

Slide 41

Slide 41 text

Slide 42

Slide 42 text

Slide 43

Slide 43 text

Copyright © 2012 FITPI. All rights reserved. ‣↮ğ:JP 43 ๏ ٢ᄝයڛఖ؊๝၂ἠଢ仛༯֥ẵσğ IUUQGFDMBTTDPNMBCZVJJPUYU ๏ ứԛ⃪౰ğ:JP VSM ๏ යڛఖ߭∣ğ:PO JPDPNQMFUF GVODUJPO JE P \^ ๏ ۷ᾏẪ֥ቔمğ/PEFMPBE VSM ࠧॖᾞ⊷ਘೖೆᾳềᇏb ๏ ۷؟⊷ਘğIUUQZVJMJCSBSZDPNZVJEPDTJP http://f2eclass.com/lab/yui/io.html

Slide 44

Slide 44 text

Slide 45

Slide 45 text

Slide 46

Slide 46 text

Slide 47

Slide 47 text

Copyright © 2012 FITPI. All rights reserved. 47 ‣↮ğ:KTPOQ ๏ ‣↮↌ᆶğ IUUQGFDMBTTDPNMBCZVJKTPOQIUNM ๏ ০Ⴈ'MJDLSิ܂֥"1*ࢺ૫ ❖ IUUQXXXGMJDLSDPNQIPUPTUBHTἬᾗሳ ❖ IUUQBQJGMJDLSDPNTFSWJDFTGFFETQIPUPT@QVCMJDHOF UBHTἬᾗሳMBOHFO VTGPSNBUKTPOKTPODBMMCBDL\DBMMCBDL^ ๏ :KTPOQ 63- ߭ẖݦൔ ๏ ᄝ߭ẖݦൔᇏϜ෮ླ)5.-⊾ԛῲ ๏ ۷؟⊷ਘğIUUQZVJMJCSBSZDPNZVJEPDTKTPOQ ౼֤ॴ↌თ⊷ਘ

Slide 48

Slide 48 text

Slide 49

Slide 49 text

Copyright © 2012 FITPI. All rights reserved. ‣↮ğ:)BOEMFCBST 49 ๏ ‣↮↌ᆶğ IUUQGFDMBTTDPNMBCZVJIBOEMFCBSTIUNM ๏ :6* VTF IBOEMFCBST ๏ ∄ϰğTDSJQUUZQFUFYUYIBOEMFCBSTUFNQMBUFTDSJQU ๏ ṇ∙ğUFNQMBUF:)BOEMFCBSTDPNQJMF )5.- ๏ ℻ԛğUFNQMBUF EBUB ๏ ۷؟ğIUUQZVJMJCSBSZDPNZVJEPDTIBOEMFCBST