[Powered by Google Translate] [Seminè] [JavaScript Frameworks:? Poukisa ak Kouman]
[Kevin Schmid] [Inivèsite Harvard]
[Sa a se CS50.] [CS50.TV]
>> Hi, tout moun. Byenveni nan seminè a Frameworks JavaScript.
Non mwen se Kevin, ak jodi a mwen pral yo dwe pale sou JavaScript cadres,
ak objektif la nan sa a seminè se pa pou fè w, di, metrize yon fondasyon patikilye se pou chak
men yo ba ou yon entwodiksyon gwo nan yon koup la cadres
epi montre poukisa nou ta tout tan tout tan vle itilize yon fondasyon.
>> Anvan sa, mwen fè sa, mwen pral bay yon background ti kras nan JavaScript,
ak Lè sa a nou pral pran li nan men la.
Nou pral kòmanse pa mete ann aplikasyon yon lis a-fè.
Isit la nan lis travay nou yo pou jodi a.
Li nan kalite amizan. Nou gen aplike yon lis a-fè nan JavaScript.
Sa a se sa li pral gade tankou, se konsa sa a, se objektif premye nou yo.
Nou pa pwal sèvi ak yon fondasyon fè sa.
Nou pral Kòd JavaScript epi pou yo jwenn lis la a-fè nan travay.
Lè sa a, nou pral amelyore desen an san yo pa itilize yon fondasyon.
Nou pral diskite sou bagay sa yo divès kalite nou ka fè ak jis JavaScript pou kont li
fè nou yo-fè lis yon ti kras plis byen fèt.
Lè sa a, nou pral jete nan kèk jQuery,
ak Lè sa a nou pral gade nan menm bagay la tou a-fè lis,
jis aplike nan estrikti diferan, epi nou pral diskite sou
avantaj yo ak dezavantaj sou wout la.
>> Ann kòmanse mete ann aplikasyon ki a-fè lis la.
Se pou nou di nou ap bay sa a HTML.
Mwen pral fè sa-a yon ti kras pi piti.
Kòm ou ka wè, mwen gen yon header ti kras ki di todo
ak yon bwat ti kras kote mwen ka antre nan yon deskripsyon yon todo
ak Lè sa a yon bouton atik nouvo, se konsa kite a eseye antre nan yon todo ki nouvo nan lis sa a.
Bay yon JavaScript cadres seminè-a,
ak mwen se frape nouvo atik.
Mwen jwenn sa a alèt JavaScript ki di aplike m '.
Nou te gen aplike li.
Se pou yo tcheke deyò Kòd la pou sa a, tou de nan HTML ak JavaScript la.
Isit la nan HTML nou an.
Kòm ou ka wè isit la, isit la nan ti kras nou an TODOS header.
Sa ki te ke bagay fonse nan tèt la,
ak Lè sa a nou gen ti bwat la opinyon ak kontneur a,
ak Lè sa a gen yon atribi sèten nan bouton sa-a ki mande sa a addTodo fonksyon.
okenn moun vle devine kisa ki sou klike sou ki siyifye?
[Elèv fèbl repons]
Bon, klike sou la sou se sòt de tankou yon evènman,
tankou klike sourit la se jis yon evènman, ak sa n ap fè
se nou ap mare evènman an nan klike bouton sa-a egzekite ki fonksyon.
AddTodo sa a moun kap okipe-evènman pou klike ke bouton.
>> Kòm ou ka wè, lè mwen klike sou bouton an atik nouvo
vin evènman an klike sou yo te tire, ak vin fonksyon sa a yo rele.
Se pou yo gade nan fonksyon.
Kòm ou ka wè, isit la nan Kòd JavaScript mwen twò lwen.
Kisa mwen gen nan tèt la se yon estrikti done mondyal la pou a-fè lis mwen an.
Li sanble ke yon etalaj. Se jis nan yon etalaj vid.
Lè sa a, mwen gen fonksyon an addTodo ke nou te wè pi bonè,
ak liy lan sèlman nan kòd nan gen sa a alèt yo.
Li avèti aplike m ', ak Lè sa a mwen gen 2 travay nan men yo.
Mwen gen ajoute todo la ak sa yo ki estrikti mondyal done,
ak Lè sa a mwen vle trase soti lis la a-fè.
Pa gen anyen twò imajine jis ankò, men JavaScript ou ka familyè avèk,
se konsa mwen pral ale dousman ak revize fondamantal sou JavaScript nan ki fason.
>> Se pou yo bay sa a yon piki.
Se pou nou di itilizatè a antre nan yon bagay nan bwat sa a.
Mwen jis tape yon bagay nan isit la, tèks.
Kouman pou mwen sòt de aksè tèks sa a nan JavaScript?
Sonje ke JavaScript, youn nan karakteristik fondamantal li yo se ke li ba nou
sa a aksè pwogram Dom la.
Li pèmèt nou gen aksè a eleman ak pwopriyete yo nan sa a HTML vrè.
Fason nou fè sa ak fè zo JavaScript
se nou ka aktyèlman sèvi ak yon fonksyon nan JavaScript rele getElementByID.
Mwen vle nan magazen tèks la ki nan tape gen nan kèk varyab,
se konsa mwen pral di yon varyab ki rele New new_todo,
ak mwen pral jwenn ki eleman.
Sa a se yon fonksyon,. GetElementByID.
Epi, koulye a mwen jwenn yon eleman pa ID, se konsa mwen bezwen ID sa a nan bwat tèks,
Se konsa, mwen te bay li new_todo_description an ID.
Sa a ki jan mwen pral jwenn yon eleman.
Sa a agiman mwen an fonksyon sa a, ou presize ki ID jwenn.
Se konsa, sa a, se yon eleman nan HTML, epi li gen pwopriyete.
Ou te wè sa yo. Yo ap atribi.
Se atribi nan eleman nan tèks ki magazen D 'itilizatè a yo rele valè.
Mwen sove valè a nan ki bwat tèks kounye a nan sa a varyab rele new_todo.
Koulye a, mwen gen pwogram aksè a sa a varyab, ki se kalite fre
paske kounye a sa m 'ka fè se mwen ka ajoute li nan a-fè lis mwen an.
>> Fason a nou ta fè sa nan JavaScript-yo ak pa enkyete si w ap abitye ak sa a,
men jis ale atravè tout li se todos.push
paske se non an nan estrikti mondyal mwen done moute isit la,
ak Mwen pral pouse new_todo.
Sa a se gwo paske koulye a, mwen te ajoute li nan JavaScript mwen
reprezantasyon nan ki a-fè lis la.
Men koulye a, Kouman pou mwen jwenn li tounen nan HTML a?
Mwen gen jwenn yon fason sòt nan pouse l 'tounen.
Nan lòt mo, mwen kalite gen trase sa a.
Ki sa nou pwal fè se nou pral trase lis la a-fè.
Mwen bezwen mete ajou lòt HTML sou paj sa a,
ak jan ou ka wè, mwen te kite sa a veso ti kras isit la,
sa a separasyon nan paj la ki gen ID a se TODOS,
ak Mwen pral mete lis la a-fè a.
Premye mwen pral klè li soti paske, di, te gen yon fin vye granmoun a-fè lis la.
Mwen jwenn ke eleman pa ID ankò,
ak mwen aksè HTML anndan an nan ki eleman,
ak Mwen pral klè ke.
Si nou kite sa a Kòd kòm se, nou ta wè yon pa gen anyen vid la,
e kounye a, mwen vle kòmanse rann moun nouvo mwen an-fè lis.
Mwen fondamantalman ale nan siye soti lis a-fè m 'yo.
>> Koulye a, anndan anndan HTML nan ki div TODOS se konplètman klè,
e kounye a, mwen bezwen kòmanse ajoute lis mwen an.
Premye bagay mwen vle ajoute tounen se tag nan lis unordered,
ki fondamantalman vle di ke sa a se kòmansman an nan yon lis unordered.
Koulye a, pou chak eleman nan etalaj TODOS mwen mwen vle enprime li andedan nan ki HTML.
Mwen vle kole l 'sou anba a nan lis sa a.
Jis tankou nan C, mwen ka sèvi ak yon pou bouk, ak mwen pral kòmanse nan kòmansman an nan lis mwen an
nan eleman 0, epi mwen pral ale tout wout la longè a nan lis la.
Nou ka aktyèlman jwenn longè a nan yon etalaj nan JavaScript lè l sèvi avèk pwopriyete a longè.
Fondamantalman Mwen pral fè yon bagay trè menm jan andedan nan isit la
ekri ak lèt ​​detache soti ke eleman.
Mwen ka ankò gen aksè nan div a TODOS, anndan pwopriyete a HTML nan sa,
ak mwen pral ajoute sou sa a atik lis nouvo, e ke sa k ap pase yo dwe antoure pa
sa a tag Li, ak mwen pral anchene ak operatè a +,
e ke sa a eleman nan on nan etalaj TODOS m 'yo,
ak Lè sa a mwen pral fèmen ki tag.
Koulye a, pou chak eleman nou pral ajoute yon antre lis nouvo.
Lè sa a, tout sa nou vrèman bezwen fè se fèmen-la ki tag.
Mwen jis bezwen fèmen-la ki unordered tag lis la.
>> ou jwenn yon santi yo pou ki jan ki travay?
Sa a ouvè lis la tout antye.
Sa vin ajoute eleman moun ki soti nan lis la TODOS nan lis la,
ak Lè sa a ki fèmen lis la tout antye, e sa se fonksyon addTodo mwen.
Mwen fondamantalman kòmanse pa jwenn todo a soti nan ti bwat la tèks.
Mwen ajoute ke yo etalaj la TODOS, ak Lè sa a, mwen re-rann lis la a-fè.
Koulye a, mwen ka ajoute atik nan lis mwen.
Sa a se kalite eksitan paske nan jis yon liy kèk nan kòd
nou te fondamantalman fè yon lis a-fè kote nou ka ajoute atik yo.
Great.
Sa a kalite yon entwodiksyon debaz nan JavaScript.
pa enkyete twòp sou sentaks la pou kounye a,
men panse osijè de sa a concept.
Nou te gen kèk HTML.
Nou te gen yon bwat tèks sou paj la ki fondamantalman pèmèt itilizatè yo opinyon yon atik a-fè ajoute.
Lè sa a, nou itilize JavaScript a al pran ki todo soti nan ki bwat tèks.
Nou estoke ki andedan yon etalaj JavaScript, ki se fondamantalman tankou
reprezantasyon pwogram nou an ke yo-fè lis,
ak Lè sa a nou enprime li soti.
Sa a se todos.js.
>> Sa a se kalite fre, men ki jan nou ka pran sa a pi lwen?
Bon, kòm ou ka wè, sa a se pa tankou yon nèt sou tout pwen a-fè lis la.
Pou egzanp, mwen pa ka make nenpòt nan bagay sa yo kòm konplè,
renmen si mwen te vle reprioritize atik yo oswa efase atik yo.
Sa a se oke, men nou ka pran sa a pi lwen.
Mwen pa pral pale twòp sou ajoute karakteristik siplemantè,
men nou te ka pran ki pi lwen.
Se pou nou pale sou yo ajoute yon plis karakteristik sa a a-fè lis,
ki se yo pral ke yo te kapab tcheke yon moun a-fè atik
epi yo gen li dwe janbe lòt soti, se konsa fondamantalman li di mwen te fè sa a.
Se pou yo gade nan kèk kòd ki te kapab akonpli sa.
Avi sa m 'te fè nan tèt la se mwen te ajoute
yon nouvo etalaj mondyal rele konplè.
Mwen fondamantalman lè l sèvi avèk sa a nan magazen si atik yo sou lis la a-fè
yo konplè oswa ou pa.
Sa a se youn fason yo fè sa.
Si m 'gade nan aplikasyon an nan sa a, montre a,
fondamantalman si mwen antre nan yon todo ak mwen peze bouton sa a activer
li kwaze soti, sa chak atik sou lis sa a gen swa yon nèt sou tout pwen
oswa enkonplè eta, epi mwen lè l sèvi avèk yon lòt etalaj ki reprezante sa.
>> Fondamantalman pou chak todo nan ki etalaj TODOS
gen nan yon atik nan etalaj la nèt sou tout pwen ki fondamantalman endike
si se sa ki konplè oswa ou pa.
Mwen te gen fè chanjman trè minim sa a Kòd,
Se konsa, isit la nan fonksyon addTodo nou an.
Remake isit la mwen pouse li sou etalaj la,
ak Lè sa a mwen pouse yon 0 a ki etalaj konplè,
fondamantalman nan paralèl avèk ki pouse nouvo todo yo di
Mwen ajoute sa a atik, ak li a makonnen ak sa a valè,
ki vle di ke li nan enkonplè.
Lè sa a, mwen redrawing lis la a-fè.
Koulye a, remake mwen te ajoute fonksyon sa a drawTodoList.
Sa a pran yon anpil nan kòd la nou te gen anvan,
fondamantalman efase soti ti kare a epi Lè sa a, trase nouvo nan-fè lis.
Men, remake ke andedan nan sa a pou bouk n ap fè yon ti kras plis kounye a.
Nou ap fondamantalman tcheke si atik la ki koresponn a todo a on isit la
se konplè, epi nou ap konpòte yon fason diferan nan 2 sikonstans sa yo.
Si li la konplè, n ap ajoute sa a tag del,
ki se fondamantalman wout la ou ka jwenn ki grèv nan efè
travèse soti lis la a-fè si li nan konplè,
epi si li pa la, nou pa ap gen ladan li.
Se konsa, ki kalite pran swen de sa,
>> e ke sa a yon fason akonpli sa a.
Lè sa a, remake lè itilizatè a klik youn nan sa yo
nou aktive estati fini nan li.
Lè klik yo itilizatè, nou pral ranvèse si wi ou non li nan yo te ranpli oswa ou pa,
ak Lè sa a nou pral rdesine li.
Sa a jan de travay.
Nou gen fonksyon sa yo ki pote soti nan travay pwòp yo,
ak sa a se oke.
Eske gen yon bagay nou te ka fè pi byen sou sa a, menm si?
Avi nou gen sa yo 2 ranje mondyal la.
Si sa a te C, epi nou te gen 2 ranje ki kalite reprezante
done ki te sòt de ki gen rapò nan kèk fason
sa ki ta nou itilize nan C rive nan konbine sa yo jaden 2
nan yon bagay ki encapsule tou de moso nan enfòmasyon?
Okenn moun vle fè yon sijesyon?
[Elèv fèbl repons]
>> Egzakteman, se konsa nou ta ka itilize kèk kalite struct,
ak si ou panse tounen nan, di, pset 3,
sonje nou te gen diksyonè, ak Lè sa a nou te gen si wi ou non pawòl Bondye a
te nan diksyonè a, epi yo te tout sa ki enfòmasyon mete tèt yo ansanm
andedan nan kèk estrikti done.
Yon sèl bagay mwen kapab fè avèk sa a Kòd pou fè pou evite gen sa yo 2 ranje diferan
pou moso menm jan an nan enfòmasyon se mwen ka konbine yo nan yon objè ki JavaScript.
Ann pran yon gade nan sa.
Avi mwen sèlman gen yon sèl etalaj nan tèt la kounye a
ak sa mwen te fè se-yo ak sa a se jis sentaks la JavaScript pou sòt de
kreye yon vèsyon literal yon objè,
ak remake gen 2 pwopriyete, konsa nou gen todo a,
ak li a te kenbe ansanm ak si li nan konplè oswa enkonplè.
Sa a se Kòd trè sanblab.
Nou ap lè l sèvi avèk objè yo JavaScript.
Sa a jan de bagay sa yo amelyore.
Tankou, koulye a, tout bagay sa yo jaden nan enfòmasyon ki gen rapò ak yo kenbe yo ansanm.
Lè nou ale nan enprime li, nou ka gen aksè nan jaden yo.
>> Avi sou jan n ap fè TODOS [mwen]. Konplè
olye pou yo tcheke etalaj la nèt sou tout pwen apa,
ak avi lè nou vle jwenn fisèl la a-fè nou ap vin pwopriyete a a-fè
nan ki todo, se konsa sa a kalite fè sans paske
chak atik gen sa yo pwopriyete intrinsèques sou li.
Li te gen yon todo, epi li gen si li la nèt sou tout pwen oswa ou pa.
Pa twò anpil chanjman gen fonksyonèl, jis te ajoute kèk plis kòd la.
Sa a se yon amelyorasyon sou kèk fwon, dwa?
Mwen vle di, nou faktè soti desen an yon ti jan.
Koulye a, nou gen objè ki ale avèk fondamantalman ankapsulasyon done sa yo.
Eske gen yon bagay plis nou te kapab fè soti isit la an tèm de JavaScript?
Tankou avi ke sa a Kòd dwa isit la
pou jwenn HTML anndan an nan yon div
se yon ti kras, mwen devine, depi lontan.
Genyen document.getElementByID ("TODOS"). InnerHTML.
Youn nan bagay nou te kapab fè fè sa-a Kòd gade yon ti kras favorable
Se konsa, mwen pa ta gen kenbe defile kite la ak dwa, retounen ak lide,
se mwen te kapab sèvi ak yon bibliyotèk tankou jQuery.
>> Se pou yo tcheke deyò Seminè 2,
ak sa a se kòd la menm, men li la fè ak jQuery.
Ou gen dwa pa twò abitye ak jQuery,
men jis konnen ke jQuery se sòt de yon bibliyotèk pou JavaScript
ki fè li pi fasil fè bagay sa yo tankou eleman endividyèl aksè nan Dom la.
Isit la olye pou yo di document.getElementByID ("TODOS"). InnerHTML
Mwen kapab itilize wout la cleaner anpil nan jQuery,
ki se jis yo sèvi ak seleksyon.
Kòm ou ka wè, sa a Kòd t 'jwenn yon ajan netwayaj ti kras,
sanble anpil fonksyonèl, men sa a lide la.
Nou te wè yon koup de bagay sa yo twò lwen,
se konsa nou te kòmanse avèk aplikasyon jis anvan tout koreksyon JavaScript.
Nou te ajoute karakteristik nouvo ak te montre kijan nou ka amelyore l 'ak
jis sa nou genyen nan JavaScript.
>> okenn moun wè nenpòt difikilte ak sa a konsepsyon?
Savwa, mwen devine-oswa pa nesesèman difikilte men kite a di
nou pa t ap fè yon pwojè lis a-fè, ak demen nou deside
nou te vle fè yon lis makèt oswa yon pwojè lis komèsyal yo.
Yon anpil nan karakteristik sa yo yo trè menm jan an.
Yon anpil nan bagay sa yo nou vle jwenn soti nan JavaScript yo trè komen,
ak sa a demontre yon bezwen pou kèk kalite fason pou
fè sa a pi fasil fè.
Mwen te gen bati tout bagay sa yo aksè HTML, tout sa a aksè Dom,
tankou mwen pral reprezante lis la a-fè ak modèl sa a.
Ak Avi mwen se responsab kòm pwomotè a JavaScript
pou kenbe HTML a ak JavaScript ke mwen gen nan senk.
Pa gen anyen otomatikman te fè ki JavaScript reprezantasyon
oswa jwenn lis la a-fè pouse soti nan HTML.
Pa gen anyen fè respekte restriksyon ki eksepte pou m '.
Mwen te gen yo ekri trase a a-fè fonksyon lis la.
Epi ki gen dwa pa-Mwen vle di, li nan rezonab fè sa,
men li ka fatigan pafwa.
Si ou gen yon pwojè ki pi gwo, ki ta ka difisil.
>> Frameworks, youn nan rezon ki nan estrikti
se senplifye pwosesis sa a ak sòt de faktè soti
sa yo komen-Mwen devine ou te kapab di-konsepsyon modèl
ke gen moun ki jeneralman gen kèk kalite fason pou reprezante done,
si wi ou non sa a, se yon lis zanmi, si wi ou non sa a, se enfòmasyon kat jeyografik
oswa yon bagay oswa yon lis a-fè.
Gen kèk moun ki gen jeneralman yon fason pou reprezante enfòmasyon,
epi yo jeneralman bezwen kenbe ki sòt enfòmasyon nan nan senk
ant sa itilizatè a wè nan kèk kalite de vi,
pale an tèm de tankou kontwolè a wè modèl ke ou te wè nan konferans,
ak Lè sa a modèl la, ki nan ka sa a se sa a etalaj JavaScript.
Frameworks ban nou yon fason yo rezoud pwoblèm sa.
Koulye a, kite a pran yon gade nan aplikasyon an nan sa a-fè lis
nan yon fondasyon ki rele angularjs.
Sa a se li. Avi li chita sou yon glise.
Mwen pa gen a woulo liv sou bò goch la ak dwa.
Sa pwobableman se pa yon rezon ki fè gwo rekòmande lè l sèvi avèk yon fondasyon,
men avi 'yo, mwen tout tan tout tan aksè nan moun eleman HTML isit la?
Èske mwen janm ale nan Dom a?
ou wè nenpòt ki document.getElementByID oswa yon bagay tankou sa?
Non, sa se ale.
>> Angilè ede nou kenbe Dom la ak reprezantasyon JavaScript nou an nan yon bagay
kalite nan senk, se konsa si li pa nan dosye a js,
si gen nan pa gen fason pou pwogramasyon ap resevwa nan tout kontni ki HTML
soti nan JavaScript a ki jan yo se nou kenbe sa a nan senk?
Si li pa nan. Dosye a js, li te resevwa yo dwe nan HTML, dwa?
Sa a se vèsyon an nouvo nan dosye a HTML,
ak remake nou te ajoute yon anpil isit la.
Avi gen nan sa yo atribi nouvo ki di ng-klike sou ak ng repete.
Apwòch angilè a nan rezoud pwoblèm sa a nan difikilte nan konsepsyon
se fondamantalman fè HTML anpil plis pouvwa anpil.
Angilè se yon fason pou pèmèt ou fè HTML yon ti jan pi plis espresif.
Pou egzanp, mwen kapab di ke mwen pral mare oswa mare sa a bwat tèks
nan yon varyab ki nan Kòd angilè mwen JavaScript.
Sa a ng-modèl fè sèlman sa.
Sa fondamantalman di ke atik la andedan nan bwat sa tèks,
jis asosye ke ak new_todo_description a varyab
nan kòd la JavaScript.
Sa a gen anpil pouvwa, paske mwen pa gen klèman ale nan
Dom a jwenn enfòmasyon sa a.
Mwen pa oblije di document.getElementByID.
Mwen pa gen yo sèvi ak jQueries tankou aksè Dom.
Mwen ka asosye li ak yon varyab, ak Lè sa a, lè mwen chanje varyab sa a
nan JavaScript li nan kenbe nan senkronizasyon ak HTML a,
se konsa ke senplifye pwosesis la nan gen yo ale retounen ak lide ant de la.
ki fè sans?
>> Ak Avi gen nan pa gen kòd aksè HTML.
Nou te jis te fè HTML plis pouvwa anpil,
e kounye a,, pou egzanp, nou ka fè bagay sa yo tankou sa a,
renmen lè ou klike sou sa a, rele fonksyon sa a nan sijè ki abòde lan nan todos.js,
e nou ka fè sa anvan, men gen lòt bagay, tankou sa a ng modèl,
ak Avi sa a ng-repete.
Ki sa ou panse sa a fè?
Isit la nan lis unordered nou yo soti nan anvan an.
Nou gen etikèt yo UL,
men mwen tout tan tout tan rann ke lis andedan nan kòd la JavaScript?
Mwen pa janm klèman rann ke lis.
Kijan travay sa a?
Oke, angilè nan fason akonpli sa a se sa rele yon repetition.
Fondamantalman sa a di ke mwen vle ekri ak lèt ​​detache sa a HTML
pou chak andedan todo nan etalaj TODOS mwen.
Anndan nan todos.jr gen yon etalaj TODOS dwa isit la,
ak sa a ap di angilè ale nan ki etalaj, epi pou chak eleman ou wè
Mwen vle pou ou ekri ak lèt ​​detache sa a HTML.
Sa a se kalite pè, paske mwen jis ka fè sa
san yo pa gen ekri yon pou bouk,
ki pou yon lis a-fè ki te sèlman 30 liy nan Kòd
gen dwa pa bagay ki pi benefisye yo,
men si ou gen yon pwojè gwo, sa a te kapab jwenn trè pratik.
>> Sa a se youn solisyon a pwoblèm sa a yo, ki fè HTML plis pouvwa anpil,
ak ki pèmèt nou kenbe JavaScript ak HTML nan senk.
Gen lòt fason posib yo rezoud pwoblèm sa a,
epi se pa tout kad sa sa.
Se pa tout kad travay ansanm liy sa yo.
Gen kèk estrikti gen apwòch diferan,
epi ou ka jwenn ke ou renmen kodaj nan yon sèl fondasyon sou lòt la.
Se pou yo gade nan yon sèl plis.
Sa a se lis la a-fè kode moute nan yon fondasyon ki rele kolòn vètebral.
Mwen pral yo ale nan sa a byen vit.
Mwen pral kòmanse ak HTML a anvan nou ale la.
Yon dezyèm fwa.
Kòmanse avèk HTML a, kòm ou remake, HTML nou an, se sanble anpil
nan sa li te ye anvan, se konsa pa twòp nouvo sou ki devan.
Men, dosye js nou an, se yon ti kras diferan.
Kalite zo rèl do nan gen ide sa a, oswa baze sou lide nan
ki yon anpil nan sa nou fè ak, di, pwojè JavaScript nou
se reflechi sou modèl ak koleksyon nan modèl sa yo.
Sa a te kapab, pou egzanp, yon foto ak koleksyon nan foto,
oswa lide a nan yon zanmi ak koleksyon nan zanmi yo.
Men, souvan lè nou ap pwogramasyon aplikasyon JavaScript
nou pral sòt de reprezante lide a ki gen yon koleksyon zanmi
yon jan kanmenm nan JavaScript, ak yesclips ban nou sa a kouch
sou tèt ki deja egziste ranje JavaScript a ak objè
fè bagay sa yo plis pouvwa anpil ak sa yo ki pi fasil.
>> Isit la mwen te defini yon modèl a-fè sa,
ak ou pa bezwen enkyete twòp sou sentaks la,
men remake ke sa ki nan youn nan pwopriyete yo nan sa a?
Li te gen yon jaden default.
Zo rèl do pèmèt m 'nan presize deja koupe baton an
nenpòt ki nouvo nan-fè pou m kreye ki pral gen sa yo défaut.
Koulye a, mwen ka Customize sa a, men ke yo te kapab presize défaut yo
se bèl, epi li kalite bon paske sa a se pa yon bagay ki tankou
nannan nan JavaScript, epi kounye a Mwen pa gen klèman
di ke TODOS yo se enkonplè.
Mwen kapab di dwa koupe baton an ki TODOS yo pral make kòm konplè.
Avi Lè sa a, ki sa ki sa a?
Koulye a, mwen gen yon lis a-fè sa, e ke sa a yon koleksyon.
Avi jaden an asosye ak ki di modèl todo.
Sa a se fason mwen an di yesclips ki
Mwen pral dwe panse osijè yon koleksyon nan sa yo TODOS endividyèl elèv yo.
Sa a se fondamantalman estrikti nan modèl pou pwogram m 'yo.
Men mwen gen ide sa a nan yon koleksyon,
ak fondamantalman atik yo genyen nan yo nan ki koleksyon, yo tout pral fè sa yo TODOS,
e ke se yon bagay ki natirèl nan sans sa a
paske mwen fè gen TODOS, mwen gen yo nan yon koleksyon.
>> Se pou yo gade nan yon ti kras pi plis nan sa a.
Isit la se yon View kolòn vètebral.
Bagay la lòt ke yesclips di se ke
yon anpil nan modèl yo ke w ap panse sou oswa menm koleksyon
yo ale nan bezwen gen kèk fason pou yo te parèt.
Nou bezwen rann ke a-fè lis,
epi li pa ta li dwe nice si nou te ka bay pou chak modèl
oswa asosye avèk chak modèl sa a wè
ki pèmèt nou Mwen devine konekte de la ansanm?
Lè nou konsidere ke anvan nou te sèvi ak yon pou bouk ki ta kouri nan
chak todo nan lis nou an ak Lè sa a enprime li isit la
nou ka fondamantalman konekte li ak sa a modèl.
Sa a se yon View-fè.
Sa a se ki asosye ak todo la nou jwenn pi bonè.
Koulye a, se chak todo afichabl oswa renderable
sa a a-fè vi.
Avi kèk nan jaden yo.
Ki sa ou panse sa a tagName se, tagName: Li?
Sonje soti nan anvan lè nou te vle pran yon todo
nou ta gen klèman pè TODOS nou yo ak sa a tag Li.
Koulye a, nou ap di ke kote sa a todo ki pral viv
a pwal andedan nan yon tag Li.
Epi, koulye a nou ap tou asosye evènman ak TODOS nou an.
>> Chak todo gen evenman sa a yon sèl.
Si ou klike sou bèl anpil bouton an activer, ki nan sa m ap di a,
Lè sa a, fondamantalman make todo an kòm opoze a nan sa li te ye anvan
ak Lè sa a re-rann aplikasyon an.
Sa a se kalite ki sanble ak kòd la anvan.
Sonje lè nou te make li kòm swa opoze a oswa-
ak Lè sa a nou re-rann li.
Men, remake kounye a evenman sa a itilize yo dwe yon bagay ki te nan HTML a.
Li te chita la.
Bouton a te gen yon klike sou.
Lè ou klike sou bouton an, li kalite fè bagay la
mete kanpe ki todo yo dwe enkonplè.
Isit la nou te asosye ke evènman nan klike ke bouton activer
ak ranvèse si li la sou oswa koupe ak sa a vi.
>> Sa a se yon fason bèl nan mete kanpe evènman sa a se konsa ke li trè byen sere mare
sa a vi, e konsa remake yon sèl sa a plis ankò.
Mwen gen metòd sa a rann yo, epi nou pa gen yo ale nan detay yo.
Li nan kalite ki sanble ak sa nou te genyen anvan an,
men remake mwen pa loupin nan anyen.
Mwen pa enprime ke tag UL ki nan sòt de li di mwen pral enprime tout nan eleman yo.
Mwen bay fonctionnalités a pou rann sa a youn nan-fè atik.
Sa a se yon konsèp trè pwisan paske fondamantalman
lis a-fè nou konsiste de tout TODOS sa yo, epi si nou ka fondamantalman presize
wout la nan bay youn nan sa yo TODOS
Lè sa a, nou kapab gen zo rèl do pwisan nou an se pou chak rann tout TODOS yo
lè w rele metòd la rann sou TODOS endividyèl yo.
Sa a se yon konsèp ki se itil isit la.
Koulye a, yon bon kesyon mande ki jan pou se ke yo te aplikasyon sa a mete tèt yo ansanm?
Paske nou gen kapasite nan bay youn todo,
men ki jan nou jwenn lide a nan TODOS miltip?
>> Ann pran yon gade nan sa.
Sa a se pati an dènye.
Avi nou gen yon View lis a-fè isit la,
ak remake li la tou yon vi.
Men, ale sou yon koup nan bagay sa yo,
ap metòd sa a inisyalize dwe rele lè nou premye kreye lis sa a a-fè.
Kòm ou ka wè, li la tankou kreye lis la a-fè ak asosye li ak sa a vi.
Lè sa a, mwen te ajoute fonksyon yo isit la se konsa fondamantalman lè ou ajoute yon atik-
sa a se menm jan ak metòd la addItem nou te wè anvan-
Mwen pral kreye yon nouvo todo objè, ak avi mwen aktyèlman rele
sa a nouvo todo metòd, se konsa sa a se bay pa yesclips,
ak mwen ka pase nan pwopriyete m 'isit la.
Epi, koulye a chak todo ke mwen kreye lè l sèvi avèk sa a pral jwenn ki fonctionnalités ke nou te wè anvan.
Avi mwen netwaye soti ti bwat la tèks anvan yon ti ti kras detay-
ak Lè sa a mwen ajoute koleksyon sa a.
>> Sa a prèske sanble etranj paske anvan nou jis te fè ki todos.push,
ak Lè sa a nou te fè, ak sa a ka sanble pi konplike pou pwojè sa a an patikilye,
epi ou ka jwenn ke yesclips oswa menm angilè oswa nenpòt kad lòt
pa kostim pwojè patikilye ou, men mwen panse li enpòtan yo reflechi sou
ki sa sa a vle di sou yon echèl pi gwo pou pi gwo pwojè,
paske si nou te gen yon pwojè ki pi gwo kote nou te reprezante
kèk koleksyon reyèlman konplèks, yon bagay pi fon pase jis lis yon a-fè sa,
kite a di yon lis zanmi oswa yon bagay tankou sa, sa a te kapab vini an sou la men
paske nou te ka òganize Kòd nou an nan yon fason vrèman pratik,
nan yon fason ki ta fè li pi fasil pou yon lòt moun
ki te vle ranmase yon pwojè yo bati sou li.
Ou ka wè ke sa a bay yon anpil nan estrikti.
Lè sa a, m ap rele rann sa a sou addItem.
Rann, jan ou ka wè, epi ou pa bezwen sezi sa a sentaks plen,
men fondamantalman pou chak modèl li pral yo rele metòd la rann endividyèl elèv yo.
Sa a sòt de kote sa a soti nan.
Se pou yo jis presize ki jan yo rann TODOS endividyèl yo,
ak Lè sa a kite a kole yo ansanm kòm yon antye.
Men, sa a bay yon fason pou distraksyon,
paske mwen te kapab chanje fason mwen deside rann TODOS endividyèl yo,
epi mwen pa ta gen nenpòt ki chanjman nan Kòd sa a.
Sa a kalite fre.
>> okenn moun gen nenpòt kesyon sou JavaScript cadres?
[Elèv fèbl kesyon]
Oh, asire w ke, ki nan yon kesyon gwo.
Kesyon an te kouman mwen te gen ladan yo cadres yo?
Pifò cadres JavaScript yo fondamantalman jis dosye js
ke ou ka gen ladan yo nan tèt yo nan Kòd ou.
Avi nan pòsyon tèt nan HTML m 'mwen gen tout sa yo Tags script,
ak tag a script final se kòd la ke nou te ekri.
Lè sa a, kòd yo kad 3 yo se jis tou Tags script.
Mwen ki gen ladan yo soti nan sa ki rele yon CDN,
ki pèmèt m 'nan jwenn li nan yon lòt moun nan pwen sa a
men chak kad gen sa a-ou ka bèl anpil jwenn kontni an
pou yon patikilye bibliyotèk JavaScript ki disponib sou kèk CDN oswa yon bagay tankou sa,
ak Lè sa a ou ka gen ladan yo sa yo Tags script.
ki fè sans?
Fre.
>> Sa yo se 2 apwòch diferan.
Moun sa yo ki yo pa apwòch yo sèlman nan rezoud pwoblèm sa a.
Gen anpil bagay diferan ki
yon moun ta ka fè, e gen cadres anpil yo deyò.
Angilè ak yesclips pa rakonte istwa a tout antye.
Bon chans ak pwojè final ou a, epi di ou mèsi anpil.
[CS50.TV]