[Powered by Google Translate] [Seminar] [Oqfsa JavaScript: Għaliex u Kif] [Kevin Schmid] [Harvard University] [Dan huwa CS50.] [CS50.TV] 

Hi, kulħadd. Merħba lill-Oqfsa seminar JavaScript. Jisimni Kevin, u llum jien ser tkun jitkellem dwar oqfsa JavaScript, u l-għan ta 'dan is-seminar huwa ma inti tikseb għal, per eżempju, kaptan qafas partikolari per se imma li jagħtuk introduzzjoni wiesgħa lil koppja ta 'oqfsa u juru għaliex aħna qatt tixtieq li tuża qafas. 

Qabel I tagħmel dan, I ser jipprovdu sfond ftit fil JavaScript, u allura aħna ser teħodha minn hemm. Aħna ser tibda billi timplimenta lista għall-do. Hawn lista kompitu tagħna għal-lum. Huwa tip ta 'umoristiċi. Għandna biex jimplimentaw lista għall-do fl JavaScript. Dan huwa dak li għaddej biex look like, b'tali mod li l-ewwel għan tagħna. Aħna mhux se jużaw qafas biex tagħmel dan. Aħna ser kodiċi JavaScript u jiksbu l-lista għall-do jaħdmu. Imbagħad aħna qed tmur biex itejbu d-disinn mingħajr l-użu ta 'qafas. Aħna qed tmur biex jiddiskutu affarijiet varji nistgħu nagħmlu mal biss JavaScript waħdu jagħmlu tagħna għall-do lista ta 'ftit mfassla aktar tajjeb. Imbagħad aħna qed tmur biex tarmi f'xi jQuery, u allura aħna qed tmur biex tħares lejn l-istess għall-do lista, biss implimentati oqfsa differenti, u aħna ser jiddiskutu  l-vantaġġi u liżvantaġġi tul it-triq. 

Nibdew implimentazzjoni ta 'dik għall-do lista. Ejja ngħidu aħna qed tingħata din HTML. Jien ser jagħmlu dan iżgħar ftit. Kif tistgħu taraw, I jkollhom header ftit li tgħid Todo u ftit kaxxa fejn I tista 'tidħol deskrizzjoni ta' todo u mbagħad buttuna punt ġdid, hekk ejja tipprova tidħol todo ġdid għal din il-lista. Agħti oqfsa seminar JavaScript, u jien hit punt ġdid. I nikseb dan allert JavaScript li tgħid jimplimentaw me. Imxejna ltqajna biex jimplimentawh. Ejja jiċċekkjaw il-kodiċi għal dan, kemm il-HTML u l-JavaScript. Hawn HTML tagħna. Kif tistgħu taraw hawn, hawn ftit Todos tagħna header. Dan kien li ħaġa kuraġġużi fil-quċċata, u allura għandna l-kaxxa input mal-placeholder, u allura hemm attribut ċerti din il-buttuna li jitlob dan addTodo funzjoni. Ħadd ma trid raden dak li ikklikkja fuq hija li tfisser? [Student rispons inaudible] Tajba, il-click fuq hija tip simili avveniment, bħall tikklikkja l-ġurdien huwa biss avveniment, u dak li aħna qed tagħmel huwa aħna qed irbit l-każ ta 'tikklikkja din il-buttuna biex tesegwixxi dik il-funzjoni. AddTodo hija din handler avveniment għall tikklikkja li buttuna. 

Kif tistgħu taraw, meta I ikklikkja l-buttuna punt ġdid l-avveniment ikklikkja fuq gets sparati, u din il-funzjoni gets imsejħa. Ejja nħarsu lejn il-funzjoni. Kif tistgħu taraw, hawnhekk kodiċi JavaScript tiegħi s'issa. What Għandi fil-quċċata hija struttura data globali għall tiegħi għall-do lista. Jidher qisu firxa. Huwa biss firxa vojta. U mbagħad I għandhom il-funzjoni addTodo li rajna qabel, u l-unika linja tal-kodiċi fil hemm din it-twissija. Hija allerti jimplimentaw me, u mbagħad I għandhom 2 kompiti fil-idejn. I ikollhom iżidu l todo li dik l-istruttura globali data, u mbagħad nixtieq li tiġbed l-lista għall-do. Xejn wisq fancy għadha biss, iżda JavaScript inti jistgħu ma jkunux familjari ma ', hekk jien ser jmorru bil-mod u tirrevedi l-fundamenti tal JavaScript b'dak il-mod. 

Ejja tagħti dan sparatura. Ejja ngħidu l-utent jidħol xi ħaġa f'din il-kaxxa. I biss ittajpjat xi ħaġa fil hawn, test. Kif nista sort ta 'aċċess li permezz test JavaScript? Ftakar li JavaScript, waħda mill-karatteristiċi fundamentali tagħha hija li jagħtina dan l-aċċess programmatiku għall-DOM. Dan jippermetti li aċċess għall-elementi u l-proprjetajiet tagħhom ta 'dan HTML attwali. Il-mod kif nagħmlu li bil-għadam bare JavaScript huwa nistgħu attwalment jużaw funzjoni fl JavaScript imsejħa getElementByID. I tixtieq li taħżen-test thats ittajpjat hemm f'xi varjabbli, hekk jien se ngħid varjabbli ġdida msejħa new_todo, u jien se tikseb dak l-element. Din hija funzjoni,. GetElementByID. U issa jien jkollna element mill ID, so I bżonn l-ID ta 'dak kaxxa ta' test, hekk stajt tatha l new_todo_description ID. Thats kif jien ser tikseb element. C'est argument tiegħi li din il-funzjoni, li jiġi speċifikat liema ID tikseb. U hekk dan huwa element HTML, u li għandha proprjetajiet. Inti stajt tidher dawn. Huma qed attributi. L-attribut tal-element test li taħżen input l-utent huwa valur msejjaħ. I salvat il-valur ta 'dak kaxxa ta' test issa f'dan varjabbli imsejħa new_todo. Issa I jkollhom aċċess programmatiku għal din varjabbli, li huwa tip ta 'kessaħ għaliex issa dak I tista 'tagħmel huwa I jistgħu jżidu mal tiegħi għall-do lista. 

Il-mod kif aħna se tagħmel dan fi JavaScript u tinkwetax jekk int familjari ma 'dan, iżda biss jmorru permezz ta 'dan huwa todos.push minħabba li l-isem tal-istruttura tiegħi data globali up hawn, u jien ser timbotta new_todo. Dan huwa kbir għaliex issa I jkollhom miżjud lill tiegħi JavaScript rappreżentazzjoni ta 'dik għall-do lista. Imma issa kif nista 'nikseb lura lill-HTML? I jkollhom isibu mod biex issolvi ta timbotta lura. Fi kliem ieħor, I tip ta 'jkollhom ifasslu dan. Dak li aħna qed tmur biex tagħmel hu li aħna qed tmur biex jiġbed l-lista għall-do. I bżonn jaġġornaw HTML oħra fuq dik il-paġna, u kif tista 'tara, stajt ħalla dan il-kontenitur ftit hawn, dan divider tal-paġna li huwa ID Todos, u jien ser tpoġġi l-lista għall-do hemmhekk. Ewwel Jien ser ċar it out għaliex, ngħidu aħna, kien hemm biex tagħmel-lista antika hemmhekk. Jien jkollna dan l-element mill ID darb'oħra, u jien aċċess għall-HTML ġewwa ta 'dak l-element, u jien ser ċara li. Jekk aħna xellug dan il-kodiċi hu, aħna'd tara xejn vojt hemm, u issa nixtieq li jibdew tirrendi ġdid għall-do lista tiegħi. Jien bażikament ser imsaħ out my għall-do lista. 

Issa l-ġewwa HTML ġewwa ta 'dak Todos div hija kompletament ċara, u issa I bżonn biex tibda żżid lista tiegħi. L-ewwel ħaġa nixtieq li żżid lura hija l-lista tag unordered, li bażikament tindika li dan huwa l-bidu ta 'lista unordered. Issa għal kull element fil Todos firxa tiegħi nixtieq li ipprintjaha ġewwa ta 'dak HTML. Irrid li tehmeż fuq il-qiegħ ta 'din il-lista. Eżatt bħal fil-C, I jistgħu jużaw għall-loop, u jien ser tibda fil-bidu tal-lista tiegħi fil element 0, u jien se jmorru it-triq kollha għat-tul tal-lista. Aħna tista 'attwalment tikseb it-tul ta' firxa fl JavaScript użu tal-proprjetà tul. Bażikament jien ser tagħmel xi ħaġa simili ħafna ġewwa tal here li jistampa dan l-element. I tista 'terġa aċċess għall-div Todos, il-proprjetà HTML ġewwa minn dan, u jien ser żid fuq dan il-punt lista l-ġdida, u li għaddej biex tkun imdawra din tag Li, u jien ser concatenate mal-operatur +, u dak l-element ith ta Todos firxa tiegħi, u mbagħad jien ser tagħlaq dik tag. Issa għal kull element aħna ser żid dħul lista ġdida. U allura kollha għandna bżonn verament tagħmel huwa qrib off li tag. I biss ħtieġa li jagħlaq li unordered tag lista. 

Do you tikseb jħossu għal kif din taħdem? Dan jiftaħ l-lista sħiħa. Dan iżid elementi individwali mil-lista Todos mal-lista, u mbagħad li jagħlaq il-lista kollha, u dan huwa funzjoni addTodo tiegħi. I bażikament tibda billi jkollna l-todo mill-kaxxa test. Inżid ngħid li l-firxa Todos, u mbagħad I terġa 'tirrendi l-lista għall-do. Now I tista 'żżid oġġetti li lista tiegħi. Dan huwa tip ta 'eċċitanti għaliex fi ftit ftit linji tal-kodiċi konna bażikament għamel lista għall-do fejn nistgħu żid oġġetti. Great. Dak it-tip ta 'introduzzjoni bażika għall-JavaScript. Tinkwetax wisq dwar l-sintassi għal issa, iżda jaħsbu dwar dan kunċettwalment. Kellna xi HTML. Kellna kaxxa ta 'test fuq il-paġna li l-utenti bażikament jitħallew input oġġett għall-do iżżid. U allura aħna użati JavaScript li jġibu li todo minn dik kaxxa ta 'test. Aħna maħżuna li ġewwa firxa JavaScript, li hi bażikament simili rappreżentazzjoni programmatika tagħna ta 'dak għall-do lista, u allura aħna stampat it out. Dan huwa todos.js. 

Dan huwa tip ta 'kessaħ, imma kif nistgħu jieħdu din ulterjuri? Ukoll, kif tistgħu taraw, dan mhux bħal komplet għall-do lista. Per eżempju, I ma jista 'trade mark xi wieħed minn dawn l-oġġetti bħala kompluta, simili jekk jien ridt li reprioritize-oġġetti jew tħassar oġġetti. Dan huwa okay, iżda nistgħu nieħdu din ulterjuri. Jien mhux ser jitkellmu wisq dwar jżid karatteristiċi żejda, iżda nistgħu jieħdu dik aktar. Ejja nitkellmu dwar żżid waħda aktar karatteristika għal dan għall-do lista, li se tkun tkun tista 'tiċċekkja individwu għall-do partita u li hija tiġi maqtugħa, hekk bażikament tgħid I ghamilt dan. Ejja nħarsu lejn xi kodiċi li jista 'tlesti dan. Avviż dak I ghamilt fil-quċċata hija stajt miżjud firxa globali ġdida msejħa komplet. Jien bażikament jużaw dan biex jaħżnu jekk l-oġġetti fuq il-lista għall-do huma kompluti jew le. Dan huwa mod wieħed biex tagħmel dan. Jekk I tħares lejn l-implimentazzjoni ta 'dan, il-wiri, bażikament jekk I tidħol todo u I-istampa din il-buttuna toggle jaqsam out, hekk kull punt fuq din il-lista għandha jew kompleta jew stat mhux kompluta, u jien jużaw firxa ieħor biex jirrappreżenta dak. 

Bażikament għal kull todo f'dak Todos firxa hemm xi oġġett fil-firxa kompleta li bażikament jindika jekk dan huwiex komplut jew le. I kellna li jagħmlu bidliet pretty minimi li dan il-kodiċi, Allura hawnhekk funzjoni addTodo tagħna. Avviż li hawn jien timbuttah fuq il-firxa, u mbagħad jien imbuttar 0 għal dak array kompluta, bażikament b'mod parallel ma 'dik push todo ġdid li jgħidu Jien żżid din il-partita, u huwa flimkien ma 'dan il-valur, li jfisser li huwa inkomplet. U allura jien redrawing-lista għall-do. Issa, avviż stajt miżjud dan funzjoni drawTodoList. Din tieħu ħafna tal-kodiċi kellna qabel, bażikament ikklerja barra il-kaxxa u mbagħad jiġbed l-ġdid għall-do lista. Iżda tinnota li ġewwa ta 'dan għal loop aħna qed tagħmel ftit aktar issa. Aħna bażikament verifika jekk l-oġġett li jikkorrispondi għall-todo ith hawn hija kompleta, u aħna qed iġib ruħu b'mod differenti f'dawn iċ-ċirkostanzi 2. Jekk huwa komplet, aħna qed żżid din tag del, li hi bażikament l-mod tista 'tikseb li strajk permezz effett jaqsmu l-lista għall-do jekk huwa komplet, u jekk mhuwiex, aħna mhux qed ikun inkluż. U hekk dan it-tip ta jieħu ħsieb ta 'dan, 

u li mod wieħed biex dan jintlaħaq. U allura avviż meta l-utent klikks wieħed minn dawn aħna toggle l-istatus tlestija ta 'dan. Meta l-utent klikks, aħna ser ireġġgħu lura jekk huwa kienx kompletat jew le, u allura aħna ser tiġbed dan. Dan it-tip ta 'xogħlijiet. Għandna dawn il-funzjonijiet li jwettqu l-kompiti tagħhom stess, u dan huwa okay. Hemm xi ħaġa li stajna nagħmlu aħjar dwar dan, għalkemm? Avviż għandna dawn 2 arrays globali. Jekk dan kien C, u kellna 2 arrays li tip ta 'rappreżentat data li kienet tip ta 'relatati b'xi mod dak li nużaw fil C jikkombinaw dawn l-oqsma 2 fis xi ħaġa li tiġbor kemm biċċiet ta 'informazzjoni? Kulmin tixtieq li tagħmel suġġeriment? [Student rispons inaudible] 

Eżattament, hekk aħna jistgħu jużaw xi tip ta 'Struct, u jekk taħseb lura għal, per eżempju, pset 3, ftakar kellna dizzjunarju, u mbagħad kellna jekk il-kelma kienet fid-dizzjunarju, u dak kollu li l-informazzjoni kienet jitqiegħdu flimkien ġewwa ta 'xi struttura data. Ħaġa waħda I tista 'tagħmel ma' dan il-kodiċi sabiex jiġi evitat li dawn 2 arrays differenti għal biċċiet simili ta 'l-informazzjoni hija I jistgħu jinġabru flimkien ġo oġġett JavaScript. Ejja tagħti ħarsa lejn dak. Avviż I biss jkollhom firxa waħda fil-quċċata issa u dak I ghamilt hija u dan huwa biss il sintassi JavaScript għal tip ta ' ħolqien ta 'verżjoni litterali ta' oġġett, u avviż hemm 2 proprjetajiet, hekk aħna l-todo, u huwa miżmum flimkien ma 'jekk huwa komplut jew mhux komplut. Dan huwa kodiċi simili ħafna. Aħna qed tuża l-JavaScript oġġetti. Dan it-tip ta 'affarijiet titjieb. Bħal issa, dawn l-oqsma kollha ta 'informazzjoni relatata huma miżmuma flimkien. Meta immorru ipprintjaha, nistgħu aċċess l-oqsma. 

Avviż kif aħna qed tagħmel Todos [i]. Kompluta minflok verifika tal-firxa sħiħa separatament, u avviż meta aħna rridu nġibu l-sekwenza għall-do aħna jkollna l-proprjetà għall-do ta 'dak todo, sabiex dan it-tip ta' jagħmel sens għaliex kull oġġett għandu dawn il-proprjetajiet intrinsiċi dwar dan. Hija għandha todo, u għandu jekk huwa sħiħa jew le. Mhux wisq bidliet hemm funzjonalment, biss miżjud ftit aktar għall-kodiċi. Dan huwa titjib fuq xi fronti, id-dritt? I mean, aħna fatturati id-disinn daqsxejn. Issa għandna oġġetti li bażikament jiġbru fihom din id-data. Hemm xi ħaġa aktar stajna nagħmlu minn hawn f'termini ta 'JavaScript? Bħal avviż li dan il-kodiċi dritt hawn biex jinkiseb il-HTML ġewwa ta 'div huwa xi ftit, I raden, twil. Hemm document.getElementById ("Todos"). InnerHTML. Ħaġa waħda nistgħu nagħmlu biex jagħmlu dan il-kodiċi tfittex ftit aktar familjari so I ma jkollhom iżommu scrolling xellug u lemin, quddiem u lura, huwa I tista 'tuża librerija bħal jQuery. 

Ejja check out Seminar 2, u dan huwa l-istess kodiċi, iżda dan isir ma jQuery. Inti jista 'ma jkunx wisq familjari ma jQuery, iżda biss jafu li jQuery huwa tip ta 'librerija għall JavaScript li jagħmilha aktar faċli li tagħmel affarijiet simili elementi individwali ta 'aċċess ta' l-DOM. Hawnhekk minflok qal document.getElementById ("Todos"). InnerHTML I jistgħu jużaw il-mod ferm aktar nodfa fil jQuery, li huwa biss għall-użu seletturi. Kif tistgħu taraw, dan il-kodiċi ma jiksbu aktar nadifa ftit, simili ħafna funzjonalment, iżda li l-idea. Rajna ftit affarijiet s'issa, hekk bdejna bil implimentazzjoni JavaScript biss prima. Aħna miżjud karatteristiċi ġodda u wera kif nistgħu ntejbu ma biss dak li għandna fl JavaScript. 

Ħadd ma tara l-ebda diffikultajiet ma dan id-disinn? Jiġifieri, I raden-jew mhux neċessarjament diffikultajiet imma ejja ngħidu aħna ma kinux jagħmlu proġett lista għall-do, u għada aħna iddeċieda ridna li tagħmel lista tal-grocer jew proġett lista tax-xiri. A lott ta 'dawn il-karatteristiċi huma simili ħafna. A lott ta 'l-affarijiet li rridu li toħroġ JavaScript huma komuni ħafna, u dan jenfasizza l-ħtieġa għal xi tip ta 'mod ta' jagħmlu dan aktar faċli li tagħmel. I kellhom jibnu kollha ta 'dan HTML aċċess, dan kollu aċċess DOM, bħal jien ser jirrappreżentaw il-lista għall-do ma 'dan il-mudell. U tinnota jien responsabbli bħala l-iżviluppatur JavaScript għaż-żamma tal-HTML u JavaScript li għandi fil sync. Xejn awtomatikament li r-rappreżentanza JavaScript jew il-lista għall-do nikseb imbuttat biex HTML. Xejn infurzati li ħlief għalija. I kellu jikteb l-tlug għall-do lista funzjoni. U li jista 'ma jkunx-I mean, huwa raġonevoli li tagħmel dan, iżda jista 'jkun tedious kultant. Jekk għandek proġett akbar, li jista 'jkun diffiċli. 

Oqfsa, wieħed mill-għanijiet ta 'oqfsa huwa li jissimplifika dak il-proċess u tip ta 'fattur out dawn komuni-I raden inti tista 'mudelli jgħidu-disinn li n-nies ġeneralment ikollhom xi tip ta 'mod ta jirrappreżentaw data, jekk thats lista ħbieb, jekk thats informazzjoni mappa jew xi ħaġa jew lista għall-do. Xi nies ikollhom ġeneralment mod ta jirrappreżentaw informazzjoni, u ġeneralment għandhom bżonn li jżommu dik it-tip ta 'informazzjoni fil sync bejn dak l-utent jara f'xi tip ta 'ħsieb, jitkellem f'termini ta 'bħall-fehma mudell kontrollur li inti raw fil-lecture, u mbagħad il-mudell, li f'dan il-każ huwa dan array JavaScript. Oqfsa tagħtina mod biex issolvi din il-problema. Issa ejja tagħti ħarsa lejn l-implimentazzjoni ta 'dan għall-do lista f'qafas imsejjaħ angularjs. Dan huwa minnu. Avviż taqbel fuq slide. I ma jkollhom tiskrollja lejn ix-xellug u lemin. Li probabbilment mhijiex raġuni kbir biex jirrakkomandaw użu ta 'qafas, imma avviż jien qatt aċċess elementi HTML individwali hawn? Am I qatt jmorru fil-DOM? Inti tara xi document.getElementById jew xi ħaġa bħal dik? Le, li marret. 

Angolari jgħinna iżommu l-DOM u JavaScript rappreżentazzjoni tagħna ta 'xi ħaġa tip ta 'fil-sinkronizzazzjoni, hekk jekk mhuwiex fil-fajl JS, jekk ikun hemm l-ebda mod ta 'jkollna programmatically kollha li l-kontenut HTML mill-JavaScript kif aħna jżommu din sync? Jekk mhuwiex fil-. Fajl JS, huwa ltqajna biex tkun fil HTML, id-dritt? Din hija l-verżjoni l-ġdida tal-fajl HTML, u avviż konna miżjud ħafna hawn. Avviż hemm dawn l-attributi ġodda li jgħidu ng click u ng jirrepetu. Approċċ angolari biex isolvi din il-problema tad-diffikultajiet fid-disinn huwa li bażikament jagħmlu HTML ferm aktar b'saħħitha. Angolari huwa mod li tippermetti li inti tagħmel HTML kemmxejn aktar espressiva. Per eżempju, nista 'ngħid li jien ser jorbtu jew torbot din il-kaxxa test għal varjabbli fi ħdan angolari kodiċi JavaScript tiegħi. Dan ng-mudell ma dan. Li bażikament tgħid li l-ġewwa ta 'din il-kaxxa test partita, biss jassoċjaw li bl-new_todo_description varjabbli fi ħdan il-kodiċi JavaScript. Dak qawwija ħafna minħabba I ma jkollhom imorru espliċitament l-DOM biex tikseb dik l-informazzjoni. I ma jkollhom jgħidu document.getElementById. I ma jkollhom jużaw jQueries bħal aċċess DOM. I tista 'jassoċja ma' varjabbli, u mbagħad meta nibdel dak il-varjabbli fi JavaScript huwa miżmum fil sync ma 'l-HTML, b'tali mod li tissimplifika l-proċess ta 'wara li jmorru quddiem u lura bejn it-tnejn. Does li jagħmel sens? 

U avviż hemm l-ebda kodiċi ta 'aċċess HTML. Imxejna biss magħmula HTML aktar qawwija, u issa, per eżempju, nistgħu nagħmlu affarijiet bħal dan, bħal meta tikklikkja fuq dan, sejħa din il-funzjoni fl-ambitu ta todos.js, u stajna nagħmlu dan qabel, iżda hemm affarijiet oħra, bħal dan ng-mudell, u avviż dan ng jirrepetu. What do you think dan ma? Hawn lista tagħna unordered minn qabel. Għandna l-tags UL, imma jien qatt tirrendi din il-lista ġewwa tal-kodiċi JavaScript? Jien qatt ma espliċitament tirrendi dik il-lista. Kif taħdem din? Ukoll, il-mod angolari accomplishes dan huwa dan jissejjaħ ripetitur. Bażikament dan jgħid li nixtieq li jistampaw dan HTML għal kull ġewwa todo ta Todos firxa tiegħi. Ġewwa tal todos.jr hemm firxa Todos dritt hawn, u dan se jgħidlek go angolari permezz ta 'dak array, u għal kull element tara Nixtieq li jistampaw dan HTML. Dan huwa tip ta 'biża minħabba I tista' biss tagħmel dan mingħajr ma jkollhom jiktbu għal loop, li għal lista għall-do li kien biss 30 linji ta 'kodiċi jista 'ma jkunx l-aktar ħaġa ta' benefiċċju, imma jekk għandek proġett kbir, dan jista 'jiksbu konvenjenti ħafna. 

Din hija soluzzjoni waħda għal din il-problema, jagħmlu HTML aktar qawwija, u li jippermetti li jżommu JavaScript u HTML fil sync. Hemm modi oħra possibbli biex tissolva din il-problema, u mhux kull qafas ma dan. Mhux kull qafas xogħlijiet dawn il-linji. Xi oqfsa għandhom approċċi differenti, u inti tista 'ssib li inti tgawdi kodifikazzjoni qafas wieħed fuq l-ieħor. Ejja nħarsu lejn wieħed aktar. Din hija l-lista għall-do kodifikata up f'qafas imsejjaħ Sinsla. Jien se jmorru permezz ta 'dan malajr. I ser tibda bil-HTML qabel immorru hemmhekk. Tieni waħda. Tibda bl-HTML, kif tinnota, HTML tagħna huwa simili ħafna li dak li kien qabel, u għalhekk mhux wisq ġdida dwar dak il-front. Iżda fajl JS tagħna huwa xi ftit differenti. Sinsla tip ta ikollu din l-idea, jew jibni fuq l-idea li ħafna ta 'dak li nagħmlu ma', Jiġifieri, proġetti JavaScript tagħna huwa jaħsbu dwar mudelli u kollezzjonijiet ta 'dawn il-mudelli. Dan jista 'jkun, per eżempju, ritratt u kollezzjonijiet ta' ritratti, jew l-idea ta 'ħabib u kollezzjonijiet ta' ħbieb. U oftentimes meta aħna qed programmazzjoni applikazzjonijiet JavaScript aħna ser issolvi ta 'jirrappreżentaw il-idea ta' ġbir ta 'ħbieb b'xi fl JavaScript, u ​​Sinsla jagħtina dan is-saff fuq quċċata ta 'arrays eżistenti JavaScript u l-oġġetti biex tagħmel affarijiet aktar qawwija ma 'dik aktar faċilment. 

Hawnhekk stajt definit mudell għall-do, u inti ma għandekx għalfejn tinkwieta wisq dwar il-sintassi, iżda tinnota li dak wieħed mill-proprjetajiet ta 'dan? Hija għandha kamp default. Sinsla tippermetti lili biex tispeċifika diġà off BAT kwalunkwe ġdid għall-do I li joħolqu se jkollhom dawn nuqqasijiet. Issa nista 'customize dan, iżda jkunu jistgħu jispeċifikaw l-nuqqasijiet huwa sbieħ, u huwa tip ta 'konvenjenti għaliex din m'hijiex xi ħaġa li huwa simili inerenti fl JavaScript, u ​​issa I ma jkollhom espliċitament jgħidu li l-Todos huma inkompleti. Nista 'ngħid dritt off BAT li Todos ser ikunu mmarkati bħala mhux kompluta. Avviż allura dak li huwa dan? Issa I jkollhom lista għall-do, u li l-ġbir. Avviż tal-qasam assoċjati ma li tgħid mudell todo. Dan huwa tiegħi mod ta 'javżak Sinsla li Jien ser tkun ħsieb dwar ġabra ta 'dawn Todos individwali. Dan huwa bażikament l-istruttura tal-mudell għall-programm tiegħi. Hawn irrid niċċara din l-idea ta 'ġbir, u bażikament l-oġġetti li jinsabu f'dak ġbir huma kollha ser ikunu dawn Todos, u li huwa ħafna naturali f'dan is-sens minħabba I do jkollhom Todos, u jien lilhom fil-ġbir. 

Ejja nħarsu lejn ftit aktar ta 'dan. Hawnhekk hija fehma Sinsla. Il-ħaġa oħra li Sinsla tgħid huwa li ħafna mill-mudelli li int taħseb dwar jew saħansitra kollezzjonijiet ser jeħtieġ li jkollhom xi mod qed jintwerew. Għandna bżonn li tirrendi dak għall-do lista, u ma kienx ikun sbieħ jekk nistgħu jipprovdu għal kull mudell jew jassoċjaw ma 'kull mudell din il-fehma li jippermetti li I raden jgħaqqdu l-tnejn flimkien? Billi qabel kellna li jużaw għal loop li jmur permezz kull todo fil-lista tagħna u mbagħad ipprintjaha hawn nistgħu bażikament jgħaqqdu ma 'dan il-mudell. Dan huwa ħsieb għall-do. Dan huwa assoċjat mal-todo sibna qabel. Issa kull todo huwa displayable jew renderable minn dan għall-do fehma. Avviż xi wħud mill-oqsma. What do you think dan huwa tagName, tagName: li? Ftakar minn qabel meta ridna li tirrendi todo rridu naraw li par espliċitament Todos tagħna ma 'dan tag li. Issa aħna qed tgħid li fejn dan todo qed tmur tgħix se tkun ġewwa ta 'tag li. U issa aħna qed wkoll jassoċjaw avvenimenti Todos tagħna. 

Kull todo għandha dan l-avveniment wieħed. Jekk tikklikkja pjuttost l-buttuna toggle, dan huwa dak li jien qal hemm, allura bażikament timmarka l-todo bħala l-oppost ta 'dak li kien qabel u mbagħad jerġa 'jagħmlu l-applikazzjoni. Dan huwa tip ta 'simili għall-kodiċi qabel. Ftakar meta aħna mmarkati bħala jew l-oppost or- u allura aħna mill-ġdid mogħtija lilha. Imma issa dan l-avveniment avviż użat biex tkun xi ħaġa li kienet fil-HTML. Kien hemm seduta. Il-buttuna kellu ikklikkja fuq. Meta inti ikklikkja l-buttuna, hija tip ta 'ma l-għalf li stabbilit li todo ma tkunx kompluta. Hawnhekk konna assoċjati dak l-avveniment ta 'tikklikkja li buttuna toggle u l-irriversjar jekk huwa fuq jew off ma 'din il-fehma. 

Dan huwa mod sabiħ ta 'twaqqif ta dan l-avveniment b'tali mod li huwa ħafna sewwa marbut din l-opinjoni, u għalhekk avviż dan wieħed aktar. Għandi dan il-metodu jirrendi, u aħna ma jkollhom jgħaddu d-dettalji. Huwa tip ta 'simili għal dak li kellna qabel, imma avviż jien ma looping permezz xejn. Jien ma istampar li tag ul thats tip ta 'tgħid jien ser jistampaw l-elementi kollha. Jien jipprovdi l-funzjonalità għal tirrendi dan wieħed għall-do oġġett. Dan huwa kunċett qawwija ħafna għaliex bażikament tagħna għall-do lista tikkonsisti dawn Todos, u jekk nistgħu bażikament tispeċifika il-mod li tirrendi wieħed minn dawk Todos allura jista 'jkollna sinsla qawwija tagħna per se jagħtu kull tas-Todos billi ċċempel-metodu jirrendi fuq il-Todos individwali. Dan huwa kunċett li huwa utli hawn. Issa mistoqsija tajba li jistaqsu huwa kif dan huwa applikazzjoni li jitqegħdu flimkien? Għaliex għandna l-ħila li tirrendi todo waħda, imma kif nistgħu jiksbu l-idea ta 'Todos multipli? 

Ejja tagħti ħarsa lejn dak. Din hija l-aħħar parti. Avviż għandna lista ħsieb għall-do hawn, u tinnota huwa wkoll għan. U li jmorru fuq ftit affarijiet, dan il-metodu initialize se jissejħu meta aħna ewwel joħolqu din il-lista għall-do. Kif tistgħu taraw, huwa simili ħolqien tal-lista għall-do u jassoċjah ma 'din il-fehma. U mbagħad I miżjuda l-funzjonijiet hawn hekk bażikament meta inti żid oġġett- dan huwa simili għall-metodu addItem rajna qabel- Jien ser toħloq oġġett ġdid todo, u tinnota jien attwalment sejħa dan il-metodu ġdid todo, għalhekk dan huwa pprovdut mill Sinsla, u I jistgħu jgħaddu fil-proprjetajiet tiegħi hawn. U issa kull todo li I joħolqu jużaw dan se tikseb dak funzjonalità li rajna qabel. Avviż jien ikklerjar l-kaxxa tat-test qabel ma 'ftit żgħira dettall u mbagħad jien żżid dan il-ġbir. 

Dan kważi jidher stramb għaliex qabel aħna biss kellha tagħmel dan todos.push, u mbagħad konna isir, u dan jista 'jidher aktar ikkumplikati għall dan il-proġett partikolari, u inti tista 'ssib li Sinsla jew saħansitra angolari jew kwalunkwe qafas ieħor ma suit proġett partikolari tiegħek, iżda naħseb li huwa importanti li wieħed jaħseb dwar dak li dan ifisser fuq skala akbar għal proġetti akbar, għaliex jekk kellna proġett akbar fejn konna jirrappreżentaw xi ġbir verament komplessi, xi ħaġa aktar profonda minn sempliċiment lista għall-do, ejja ngħidu lista ħbieb jew xi ħaġa bħal dik, dan jista 'jidħol fil handy għaliex aħna tista 'torganizza kodiċi tagħna b'mod verament konvenjenti, b'mod li jagħmilha aktar faċli għal xi ħadd ieħor li riedu li jtellgħu proġett li tibni fuq. Tista 'tara li dan jipprovdi ħafna ta' struttura. U allura jien ssejjaħ tirrendi fuq dan addItem. Tirrendi, kif tistgħu taraw, u inti ma għandekx biex taqbadha dan sintassi sħiħa, imma bażikament għal kull mudell li għaddej li jsejħu l-metodu jirrendi individwali. Li tip ta 'fejn dan jiġi minn. Ejja biss jispeċifika dwar kif jista tirrendi l Todos individwali, u mbagħad ejja kolla flimkien bħala unità waħda. Iżda dan jipprovdi mod ta 'estrazzjoni, minħabba I tista 'tibdel il-mod I tiddeċiedi li tirrendi l-Todos individwali, u jien ma jkollhom li tbiddel kwalunkwe ta 'dan il-kodiċi. Dak it-tip ta 'kessaħ. 

Ħadd ma jkollu xi mistoqsijiet dwar oqfsa JavaScript? [Kwistjoni inaudible Student] Oh, żgur, li l-kwistjoni kbira. Il-mistoqsija kienet kif għamlet I tinkludi l-oqfsa? Oqfsa JavaScript Ħafna huma bażikament biss fajls JS li inti tista 'tinkludi fil-quċċata tal-kodiċi tiegħek. Avviż fil-porzjon kap ta HTML tiegħi I jkollhom dawn tags iskript, u l-tag iskrittura finali huwa l-kodiċi li konna bil-miktub. U allura l-kodiċijiet qafas 3 huma biss wkoll tags iskrittura. Jien jinkluduhom minn dak li sejjaħ CDN, li tippermetti lili biex tiksbu mingħand xi ħadd ieħor f'dan il-punt iżda kull qafas għandu din tista 'pretty ħafna ssib il-kontenut għal JavaScript librerija partikolari disponibbli fuq xi CDN jew xi ħaġa bħal dik, u allura inti tista 'tinkludi dawn tags iskrittura. Does li jagħmel sens? Kessaħ. 

Dawk huma 2 approċċi differenti. Dawn mhumiex l-uniċi avviċinamenti biex isolvu din il-problema. Hemm affarijiet differenti ħafna li xi ħadd jista 'jagħmel, u hemm oqfsa ħafna hemmhekk. Angolari u Sinsla ma jgħidux l-istorja kollha. Xorti tajba ma 'proġetti finali tiegħek, u nirringrazzjak ħafna. [CS50.TV]