[Powered by Google Translate] [Seminar] [Javascript ramma: Hvers vegna og hvernig] [Kevin Schmid] [Harvard University] [Þetta er CS50.] [CS50.TV] 

Hæ, allir. Velkomin á Javascript ramma málstofu. Mitt nafn er Kevin, og í dag ætla ég að vera að tala um JavaScript ramma, og markmið þessarar ráðstefnu er ekki að fá þig til að segja, herra ákveðna ramma í sjálfu en til að gefa þér víðtæka kynningu á nokkra ramma og sýna hvers vegna við mundum alltaf vilja til að nota ramma. 

Áður en ég gera það, ég gefa smá bakgrunn í JavaScript, og þá munum við taka það þaðan. Við ætlum að byrja á því að innleiða til að gera lista. Hér er verkefni listi okkar í dag. Það er svolítið fyndið. Við verðum að innleiða til að gera lista í JavaScript. Þetta er það sem það er að fara að líta út, svo það er fyrsta markmið okkar. Við erum ekki að fara að nota ramma til að gera það. Við erum að fara að kóða JavaScript og fá til að gera lista til að vinna. Þá ætlum við að bæta hönnun án þess að nota ramma. Við ætlum að ræða ýmislegt sem við getum gert með bara JavaScript sér að gera okkar til að gera lista svolítið vel hönnuð. Þá erum við að fara að kasta í sumum jQuery, og þá erum við að fara að horfa á það sama til að gera lista, bara til framkvæmda í mismunandi ramma, og við munum ræða  kostir og gallar á leiðinni. 

Við skulum byrja að innleiða það til að gera lista. Segjum að við erum gefið þetta HTML. Ég ætla að gera þetta aðeins minni. Eins og þú geta sjá, ég er með smá haus sem segir todo og er lítill kassi sem ég get inn lýsingu á todo og þá ný atriði hnappinn, þannig að við skulum reyna að slá nýja TODO á þennan lista. Gefðu JavaScript ramma málstofa, og ég er að lemja nýr liður. Ég fæ þessa JavaScript aðvaranir sem segir innleiða mig. Við verðum að framkvæma það. Skulum kíkja kóðann fyrir þetta, bæði HTML og JavaScript. Hér er HTML okkar. Eins og þú geta sjá hér, hér er lítið Todos haus okkar. Það var að djörf hlutur efst, og þá höfum við inntak kassi með tákn, og þá er það ákveðin eiginleiki þennan hnapp sem kallar þetta virka addTodo. Hefur einhver vilja til að giska á hvað það á smell er merkja? [Námsmaður inaudible svar] Góð, á smell er tegund af eins og atburði, eins og að smella með músinni er bara atburður, og hvað við erum að gera er að við erum að binda ef að smella á þennan hnapp til að framkvæma að virka. AddTodo er þessi atburður dýraþjálfari fyrir að smella þessi hnappur. 

Eins og þú geta sjá, þegar ég smelli á nýjum lið hnappinn Um smella atburður fær rekinn, og þessi aðgerð verður kallað. Við skulum líta á virkni. Eins og þú geta sjá, hér er JavaScript kóða mitt svo langt. Það sem ég hef efst er alþjóðlegt gögn uppbygging fyrir til-gera listanum mínum. Það lítur út eins og fylki. Það er bara tómt array. Og þá hef ég addTodo aðgerð sem við sáum áðan, og eina línu af kóða í það er þetta viðvörun. Það tónar innleiða mig, og þá hef ég 2 verkefni á hendi. Ég verð að bæta TODO til að alþjóðlegu gögn uppbygging, og þá vil ég draga út til að gera lista. Ekkert ímynda sér of bara enn, en JavaScript þú getur verið ókunnugur, þannig að ég ætla að fara hægt og endurskoða grundvallaratriði JavaScript í þá áttina. 

Við skulum gefa þessu skot. Segjum að notandi slær eitthvað í þessum reit. Ég gafst bara eitthvað hér, texta. Hvernig tegund ég aðgang að texta með JavaScript? Mundu að JavaScript, einn af grundvallar eiginleikum hennar er að hún gefur okkur þetta forritanlegur aðgang að DOM. Það gerir okkur kleift að nálgast þætti og eiginleika þeirra af raunverulegum HTML. Leiðin sem við gerum það með Bare Bones JavaScript er að við getum raunverulega nota virka í JavaScript kallast getElementByID. Ég vil geyma texta sem er slegið þar í einhverju breytu, þannig að ég ætla að segja nýja breytu sem heitir new_todo, og ég ætla að fá þessi þáttur. Þetta er fall,. GetElementByID. Og nú er ég að fá stak eftir auðkenni, þannig að ég þarf að kenni þess textareitinn, svo ég hef gefið það ID new_todo_description. Það er hvernig ég ætla að fá stak. Það er rök mín til þessa aðgerð, að tilgreina hvaða ID til að fá. Og svo er það liður í HTML, og það hefur eiginleika. Þú hefur séð þetta. Þeir eru eiginleika. The eiginleiki af textanum þáttur sem geymir inntak notandans er kallað gildi. Ég spara verðmæti þess textareitinn nú í þessari breytu sem heitir new_todo. Nú hef ég forritanlegur aðgang að þessari breytu, sem er góður af kaldur því nú hvað ég get gert er ég get bætt því við að-gera listanum mínum. 

Leiðin sem við myndum gera þetta í JavaScript-og ekki hafa áhyggjur ef þú ert ókunnur með þetta, en bara að fara í gegnum það er todos.push því það er nafn á heimsvísu gögn uppbygging mína upp hér, og ég ætla að ýta new_todo. Þetta er frábært því nú hef ég bætt það til JavaScript minn framsetning sem til-gera listanum. En nú hvernig fæ ég það aftur til HTML? Ég verð að finna leið til að raða á ýta því til baka. Með öðrum orðum, hef ég eins konar að teikna þetta. Það sem við erum að fara að gera er að við erum að fara að draga til-gera listanum. Ég þarf að uppfæra önnur HTML á síðunni, og eins og þú geta sjá, ég hef skilið þetta litla ílát hér, þetta Divider á síðunni sem ID er Todos, og ég ætla að setja til að gera lista þar. Fyrst ætla ég að hreinsa það út af því, segja, að það var gamall til að gera lista þar. Ég fæ þessi þáttur með ID aftur, og ég er að fá aðgang að innri HTML þeirrar frumefni, og ég ætla að hreinsa það. Ef við fórum þennan kóða sem er, viljum við sjá auða ekkert þar, og nú vil ég að byrja flutningur New to-do listanum mínum. Ég ætla í rauninni að fara að þurrka út til að gera lista mínum. 

Nú er innri HTML inni þess Todos div alveg ljóst, og nú þarf ég að byrja að bæta listann minn. The fyrstur hlutur sem ég vil bæta aftur er óraðaða lista tag, sem táknar í rauninni að þetta er upphaf óraðaðan lista. Nú fyrir hvert frumefni í Todos array ég vil prenta það út inni að HTML. Ég vil auka það til the botn af þessum lista. Rétt eins og í C, get ég notað fyrir lykkju, og ég ætla að byrja á byrjun á listanum mínum á frumefni 0, og ég ætla að fara alla leið til lengd listanum. Við getum raunverulega fá lengd fylki í JavaScript með lengd eign. Í grundvallaratriðum er ég að fara að gera eitthvað mjög svipað inni hér að prenta út þessi þáttur. Ég get aftur aðgang að Todos DIV, innri HTML eign þess, og ég ætla að bæta við á þennan nýja lista atriði, og það er að fara að vera umkringdur þetta lí tag, og ég ætla að concatenate með + rekstraraðila, og það er ith þáttur Todos fylking minn, og þá ætla ég að loka tag. Nú fyrir hvert frumefni munum bæta við nýjum lista færslu. Og þá er allt sem við þurfum virkilega að gera loka á þessi merki. Ég þarf bara að loka á að óraðaða lista tag. 

Ert þú fá tilfinningu fyrir hvernig það virkar? Þetta opnar allan listann. Þetta bætir einstaka þætti frá Todos lista á listann, og þá lokar það á allan listann, og þetta er addTodo virka minn. Ég byrja í grundvallaratriðum með því að fá TODO frá textareitinn. Ég bæta því við Todos fylking, og þá er ég aftur láta til-gera listanum. Nú get ég bætt þeim við listann minn. Þetta er góður af spennandi vegna þess að í nokkrum línum af kóða við höfum í rauninni gert til að gera lista þar sem við getum bætt atriði. Great. Það er góður af a undirstöðu kynning á JavaScript. Ekki hafa áhyggjur of mikill óður í setningafræði fyrir nú, en hugsaðu um þetta eðli. Við fengum HTML. Við höfðum textabox á síðu sem í grundvallaratriðum leyfa notendum að slá inn til að gera sem þú vilt bæta. Og þá erum við að nota JavaScript til að ná að TODO frá því textareitinn. Við geymd að inni í JavaScript fylki, sem er í grundvallaratriðum eins og forritanlegur framsetning okkar að til að gera lista, og þá erum við prenta það út. Þetta er todos.js. 

Þetta er góður af kaldur, en hvernig getum við tekið þetta lengra? Jæja, eins og þú geta sjá, þetta er ekki eins heill til-gera listanum. Til dæmis get ég ekki merkja eitthvað af þessum atriðum sem ófullnægjandi, eins og ef ég vildi reprioritize atriði eða eyða hlutum. Þetta er allt í lagi, en við getum tekið þetta lengra. Ég ætla ekki að tala of mikið um að bæta auka lögun, en við gætum tekið að frekari. Við skulum tala um að bæta við einum möguleika til þessa að gera lista, sem er að fara að vera fær um að stöðva einstakling til að gera hlut og hafa verið yfir það út, svo í rauninni að segja að ég hef gert þetta. Við skulum líta á nokkur númer sem gæti náð því. Taka eftir hvað ég hef gert efst er ég hef bætt nýtt alþjóðlegt array kallað lokið. Ég er í grundvallaratriðum að nota þetta til að geyma hvort atriði um að gera lista eru heill eða ekki. Þetta er ein leið til að gera þetta. Ef ég lít á framkvæmd þessa, sýna, í rauninni ef ég inn TODO og ég stutt þessa hnapp það fer út, svo hefur hvert atriði á þessum lista annað hvort heill eða ófullnægjandi ástand, og ég nota annað array til að tákna það. 

Grundvallaratriðum fyrir hvert Todo í þeirri Todos array það er atriði í the heill array sem í grundvallaratriðum sýnir hvort sem er lokið eða ekki. Ég hef þurft að gera frekar lítil breytingar á þessum kóða, svo hér addTodo virka okkar. Takið eftir að hér er ég að ýta henni inn á fjölda, og þá er ég að ýta á 0 til að ljúka fylking, grundvallaratriðum samhliða þeirri nýju ToDo ýta að segja Ég er að bæta þetta atriði, og það er par með þetta gildi, sem þýðir að það er ófullnægjandi. Og þá er ég redrawing til-gera listanum. Nú, eftir ég hef bætt þennan drawTodoList virka. Þetta tekur mikið af kóða sem við höfðum áður, grundvallaratriðum hreinsar út í reitinn og þá teiknar nýja til-gera listanum. En eftir því að inni í þessu fyrir lykkju við erum að gera svolítið meira núna. Við erum í grundvallaratriðum að athuga hvort hluturinn svarar til ith todo hér er lokið, og við erum að haga öðruvísi í þessum 2 tilvikum. Ef það er heill, við erum að bæta þessari del tag, sem er sú leið sem þú getur fengið að slá gegnum áhrif ferð út til að gera lista ef það er heill, og ef það er ekki, erum við ekki að setja það. Og svo tekur svona vel með það, 

og það er ein leið til að ná þessu. Og svo eftir því þegar notandi smellir einn af þessum við víxlað lokið stöðu hennar. Þegar notandi smellir, við munum snúa hvort það hefur verið lokið eða ekki, og þá munum við uppkast það. Af þessu tagi verka. Við höfum þessar aðgerðir sem framkvæma eigin verkefnum sínum, og þetta er allt í lagi. Er það eitthvað sem við gætum gert betur um þetta, þó? Takið við höfum þessar 2 alþjóðlegum fylki. Ef þetta var C, og við höfðum 2 fylki þannig táknuð gögn sem var eins konar tengdar á einhvern hátt hvað myndum við nota í C til að sameina þessar 2 reiti í eitthvað sem encapsulates bæði stykki af upplýsingum? Einhver vilja til að gera uppástungu? [Námsmaður inaudible svar] 

Einmitt, svo við gætum notað einhvers konar strúktúr, og ef þú heldur aftur til, segjum, pset 3, muna við höfðum orðabók, og þá höfðum við hvort orðið var í orðabókinni, og allt sem upplýsingar voru sett saman inni sumra gögn uppbygging. Eitt sem ég get gert við þennan kóða til að forðast að hafa þessar 2 mismunandi fylki fyrir svipuðum stykki af upplýsingar er ég get sameinað þær í JavaScript hlut. Skulum taka a líta á það. Tilkynning Ég hef bara eina fylking efst nú og það sem ég hef gert er og þetta er bara JavaScript setningafræði fyrir um tegund skapa bókstaflega útgáfu af hlut, og taka það eru 2 eignir, þannig að við höfum TODO, og það er haldið saman með hvort það er heill eða ófullnægjandi. Þetta er mjög svipað númer. Við erum að nota JavaScript hlutum. Af þessu tagi bætir hlutum. Eins og nú, eru öll þessi svið tengjast upplýsingum haldið saman. Þegar við förum að prenta það út, getum við aðgang reitina. 

Taka eftir því hvernig við erum að gera Todos [i]. Heill í stað þess að stöðva alla array sig, og taka eftir þegar við viljum fá til að gera band sem við erum að fá á til-gera eign þess ToDo, svo gerir svona skynsamlegt vegna hvert atriði hefur þessi innri eiginleika um það. Það hefur TODO, og það hefur hvort sem það er lokið eða ekki. Ekki of margar breytingar þar virkni, bara bætti smá meira til kóðann. Þetta er framför á sumum sviðum, ekki satt? Ég meina, við reiknað út hönnun svolítið. Nú höfum við hluti til að grundvallaratriðum þjappa þessum gögnum. Er eitthvað meira sem við gætum gert héðan í skilmálar af JavaScript? Eins og tilkynnt að þetta númer hérna til að fá innri HTML á div er lítið, ég held, lengi. Það er document.getElementById ("Todos"). InnerHTML. Eitt sem við gætum gert til að gera þetta númer líta svolítið vinalegri svo ég þyrfti ekki að halda rolla vinstri og hægri, fram og til baka, er ég gæti notað bókasafn eins jQuery. 

Skulum kíkja Málstofa 2, og þetta er það sama kóða, en það er gert með jQuery. Þú getur ekki vera of kunnuglegt við jQuery, en bara veit að jQuery er tegund af bókasafni fyrir JavaScript sem gerir það auðveldara að gera hlutina eins og aðgang einstakra þátta í DOM. Hér í stað þess að segja document.getElementById ("Todos"). InnerHTML Ég get notað mikið hreinni leið í jQuery, sem er bara að nota selectors. Eins og þú geta sjá, þetta númer var að fá smá hreinna, mjög virka svipað, en það er hugmynd. Við höfum séð nokkra hluti svo langt, svo byrjuðum við bara hrár JavaScript framkvæmd. Við bætt nýjum eiginleikum og sýndi hvernig við getum bætt það með bara það sem við höfum í JavaScript. 

Hefur einhver séð í einhverjum vandræðum með þessa hönnun? Nefnilega, held-eða ég ekki endilega erfiðleika en við skulum segja við vorum ekki að gera til að gera lista verkefni, og á morgun ákváðum við vildum að gera matvöruverslun lista eða lista versla verkefni. A einhver fjöldi af þessir eiginleikar eru mjög svipuð. A einhver fjöldi af því sem við viljum fá út af JavaScript eru mjög algeng, og þetta undirstrikar þörfina fyrir einhvers konar hátt af gerir þetta auðveldara að gera. Ég þurfti að byggja upp alla þessa HTML aðgang, allt þetta DOM aðgang, eins og ég ætla að tákna að gera lista með þessu líkani. Og eftir ég er ábyrgur og á Javascript verktaki til að halda HTML og JavaScript sem ég hef í sync. Ekkert sjálfkrafa gert að JavaScript framsetning eða til-gera listanum fá ýtt út til HTML. Ekkert framfylgt að nema fyrir mig. Ég þurfti að skrifa jafntefli til að gera lista virka. Og það má ekki vera-ég meina, það er sanngjarnt að gera það, en það kann að vera leiðinlegur stundum. Ef þú hafa a stór verkefni, sem gæti verið erfitt. 

Ramma, einn af þeim tilgangi að ramma er að einfalda það ferli og tegund af þáttur út Þessi sameiginlega-Ég held að þú gætir sagt-hönnun mynstur að fólk hefur almennt einhvers konar leið fulltrúi gögn, hvort það er vinalistinn, hvort sem er kortaupplýsingum eða eitthvað eða að-gera listanum. Sumir hafa yfirleitt leið fulltrúi upplýsingar, og þeir þurfa yfirleitt að halda að upplýsingar svoleiðis í sync milli þess sem notandinn sér í einhvers konar skoðun, tala í skilmálar af eins skoða líkan stjórnandi sem þú sást í fyrirlestri, og þá fyrirmynd, sem í þessu tilfelli er þetta JavaScript array. Ramma gefa okkur leið til að leysa þessi vandamál. Nú skulum taka a líta á framkvæmd þessa til að gera lista í ramma sem heitir angularjs. Þetta er það. Taka það passar á hana. Ég þarf ekki að fletta til vinstri og hægri. Það er sennilega ekki góð ástæða til að mæla með því að nota ramma, en tilkynning er ég aðgang alltaf einstök HTML þætti hér? Er ég að fara alltaf í DOM? Sérðu hvaða document.getElementById eða eitthvað svoleiðis? Nei, það er farið. 

Hyrndur hjálpar okkur að halda DOM og JavaScript framsetning okkar eitthvað konar í sync, þannig að ef það er ekki í JS skrá, ef það er engin leið til að kerfisbundið komast að allur þessi HTML efni frá JavaScript hvernig eigum við að halda þetta í sync? Ef það er ekki í. JS skrá, það fékk að vera í HTML, ekki satt? Þetta er ný útgáfa af HTML skrá, og taka við höfum bætt mikið hér. Eftir því að það er þessi nýja eiginleika sem segja ng-smell og ng-endurtaka. Stækkun er aðferð til að leysa þetta vandamál af erfiðleikum í hönnun er að í grundvallaratriðum að gera HTML miklu öflugri. Stækkun er leið til að leyfa þér að gera HTML nokkuð svipmikill. Til dæmis get ég sagt að ég ætla að binda eða binda þennan textareitinn til a breyta innan Stækkun JavaScript kóða mína. Þetta ng-líkan er bara þessi. Sem í grundvallaratriðum segir að hluturinn inni þessa textareitinn, bara tengja það við breytilegum new_todo_description innan JavaScript kóða. Það er mjög öflug vegna þess að ég þarf ekki að beinlínis að fara til DOM til að fá þær upplýsingar. Ég þarf ekki að segja document.getElementById. Ég þarf ekki að nota jQueries eins DOM aðgang. Ég get tengt það með breytu, og svo þegar ég breytt því breyta innan JavaScript það er haldið í sync með HTML, svo einfaldar að ferlið að þurfa að fara fram og til baka á milli. Er að skynsamleg? 

Og eftir því að það er engin HTML aðgangur merkjamál. Við höfum bara gert HTML öflugri, og nú, til dæmis, við getum gert hlutina eins og þetta, eins og þegar þú smellir á þetta, kalla þessa aðgerð undir todos.js, og við gátum gert það áður, en það eru aðrir hlutir, eins og þetta ng-líkani, og taka þetta ng-endurtaka. Hvað finnst þér þetta er? Hér er óraðaða lista okkar frá áður. Við höfum ul tags, en ég flutningur alltaf þessi listi inni JavaScript kóða? Ég er ekki alltaf sérstaklega flutningur þessi listi. Hvernig virkar þetta? Jæja, hvernig Stækkun leikinn þetta er þetta er kallað hríðskotabyssa. Grundvallaratriðum segir þetta sem ég vil prenta þessa HTML fyrir hvert ToDo innan Todos fylking minn. Inni todos.jr er Todos array hérna, og þetta mun segja Stækkun fara í gegnum þessi fylking, og fyrir hvert frumefni sem þú sérð Ég vil að þú prenta þennan HTML kóða. Þetta er góður af ógnvekjandi vegna þess að ég get bara gert þetta án þess að þurfa að skrifa á fyrir lykkja, sem fyrir til-gera listanum sem var aðeins 30 línur af kóða mega ekki vera the raunverulegur hlutur, en ef þú hafa a stór verkefni, það gæti fengið mjög þægilegt. 

Þetta er ein lausn á þessu vandamáli, sem gerir HTML öflugri, og að leyfa okkur að halda JavaScript og HTML í sync. Það eru aðrar mögulegar leiðir til að leysa þetta vandamál, og ekki á hverjum ramma er þetta. Ekki á hverjum ramma virkar eftir þessum línum. Sumir ramma hafa mismunandi aðferðir, og þú getur fundið það sem þú njótir kóðun í einum ramma yfir öðrum. Við skulum líta á eitt. Þetta er til að gera lista dulmáli upp í ramma sem heitir burðarás. Ég ætla að fara í gegnum þetta fljótt. Ég ætla að byrja á HTML áður en við förum þangað. Eitt annað. Byrjar með HTML, og þú tekur eftir, HTML okkar er mjög svipuð hvað það var áður, svo ekki of mikið að frétta framan. En JS skrá okkar er svolítið öðruvísi. Burðarás konar hefur þessa hugmynd, eða byggir á þeirri hugmynd að mikið af því sem við gerum við, segja, JavaScript verkefni okkar er að hugsa um líkan og söfn þessara líkana. Þetta gæti verið, til dæmis, mynd og söfn af myndum, eða hugmyndin um vin og söfn af vinum. Og oftsinnis þegar við erum forritun JavaScript forrit við munum raða á tákna hugmynd af having a safn af vinum einhvern veginn í JavaScript, og burðarás gefur okkur þetta lag ofan á núverandi fylki Javascript og hlutir að gera öflugri hluti með að fleiri auðveldlega. 

Hér ég hef skilgreint til að gera líkan, og þú þarft ekki að hafa áhyggjur of mikill óður í setningafræði, en eftir því að það er einn af þeim eiginleikum þetta? Það hefur sjálfgefið sviði. Burðarás leyfa mér að tilgreina þegar the kylfa allar nýjar að-gera að ég búið til er að fara að hafa þessar vanskil. Nú get ég sérsniðið þetta, en tilvera fær til tilgreina vanskil er ágætur, og það er góður af þægilegt því þetta er ekki eitthvað sem er eins og felst í JavaScript, og nú er ég ekki að skýrt segja að Todos eru ófullnægjandi. Ég get sagt strax the kylfa sem Todos eru að fara að vera merkt sem ófullnægjandi. Tilkynning þá hvað er þetta? Nú hef ég að gera lista, og það er safn. Tilkynning á sviði sem tengist sem segir líkan TODO. Þetta er mín leið til að segja hryggur sem Ég ætla að vera að hugsa um söfnun þessara einstaklinga Todos. Þetta er í grundvallaratriðum fyrirmynd uppbygging fyrir áætlun mína. Hér hef ég þessa hugmynd um söfnun, og í rauninni þau atriði sem felast í því safni eru allir að fara að vera þessi Todos, og það er mjög eðlilegt í þessum skilningi því ég hef Todos, og ég hef þá í safn. 

Við skulum líta á aðeins meira af þessu. Hér er burðarás útsýni. The annar hlutur sem burðarás segir er að a einhver fjöldi af the líkan sem þú ert að hugsa um eða jafnvel söfn eru að fara að þurfa að hafa einhverja leið til að sýna. Við þurfum að gera það til að gera lista, og væri það ekki gott ef við gætum veitt fyrir hverja gerð eða tengja við hverja gerð þessa skoðun sem gerir okkur kleift að ég giska tengja tvö saman? En áður en við þurftum að nota fyrir lykkju sem myndi hlaupa í gegnum hvert TODO á listanum okkar og þá prenta það út hér við getum í rauninni tengja það við þessa tegund. Þetta er til að gera sýn. Þetta er í tengslum við todo við fundum fyrr. Nú hvert TODO er displayable eða renderable með þessu til að gera mynd. Tilkynning sumir sviðum. Hvað finnst þér þetta tagName er tagName: lí? Muna frá áður þegar við vildum að inna af TODO yrðum við að skýrt para Todos okkar með þessum li tag. Nú erum við að segja að þar sem þetta TODO er að fara að lifa er að fara að vera inni af li merkinu. Og nú erum við einnig tengja atburðum með Todos okkar. 

Sérhver TODO hefur þetta einn atburð. Ef þú smellir nokkurn veginn skipta hnappur, það er það sem ég er að segja það, þá í rauninni merkja TODO sem andstæða þess sem það var áður og svo aftur láta forritið. Þetta er góður af líkur til kóðann áður. Manstu þegar við merkt það sem annaðhvort hið gagnstæða eða- og þá erum við aftur veitt það. En taka nú þennan atburð notað til að vera eitthvað sem var í HTML. Það sat þarna. Hnappinn hafði á smell. Þegar þú smellir á hnappinn, er það góður af efni til sett upp sem TODO að vera ófullnægjandi. Hér höfum við tengt þeim atburði að smella þessi hnapp og snúa hvort sem það er kveikt eða slökkt með þessari skoðun. 

Þetta er ágætur vegur að setja upp þennan atburð þannig að það er mjög vel bundin þessari skoðun, og svo taka þetta einn meira. Ég hef þetta Render aðferð, og við þurfum ekki að fara í gegnum upplýsingar. Það er góður af líkur til það sem við áttum áður, en eftir ég ætla ekki lykkja í gegnum neitt. Ég ætla ekki að prenta þær ul merki sem er tegund af að segja að ég ætla að prenta alla þá þætti. Ég ætla að veita virkni til bræðslu þennan eina til að gera hlut. Þetta er mjög öflug hugtak því í grundvallaratriðum til að gera lista okkar samanstendur af öllum þessum Todos, og ef við getum í rauninni skilgreina leið til að láta einn af þeim Todos þá getum við hafa öflugt burðarás okkar í sjálfu veita öllum Todos með því að hringja Render aðferð á einstökum Todos. Þetta er hugtak sem er gagnlegt hér. Nú er góð spurning til að spyrja hvernig er þetta forrit að setja saman? Þar sem við höfum getu til að inna af hendi eitt TODO, en hvernig fáum við þá hugmynd margra Todos? 

Skulum taka a líta á það. Þetta er síðasta hluti. Takið við höfum til-gera listi skjáinn hér, og eftir það er líka útsýni. Og til að fara yfir nokkra hluti, þetta frumstilla aðferð verður kallað þegar við búum fyrst þetta til að gera lista. Eins og þú geta sjá, það er eins og að búa til til að gera lista og tengja hana við þessa skoðun. Og svo ég bætt aðgerðir hér svo í rauninni þegar þú bæta hlut- þetta er svipað og addItem aðferð við sáum áður- Ég ætla að búa til nýja TODO hlut, og eftir ég ætla í raun að hringja þetta nýja TODO aðferð, þannig að þetta er veitt af burðarás, og ég get fara í eignir mínar hér. Og nú hvert TODO sem ég bý til að nota þetta mun fá þessi virkni sem við sáum áður. Tilkynning Ég er að hreinsa út í textareitinn áður-lítið smáatriði- og þá er ég að bæta þetta safn. 

Þetta nánast virðist skrýtið því áður en við þurftum bara að gera það todos.push, og þá vorum við búin, og þetta kann að virðast flóknari með þessu verkefni, og þú getur fundið það burðarás eða jafnvel Stækkun eða aðra umgjörð er ekki sú tiltekna verkefni, en ég held að það er mikilvægt að hugsa um hvað þýðir þetta á stærri skala fyrir stærri verkefni, því ef við hefðum stærra verkefni þar sem við vorum hönd sumir virkilega flókið safn, eitthvað dýpra en bara til að gera lista, skulum segja vinum lista eða eitthvað svoleiðis, þetta gæti komið sér vel vegna þess að við gætum skipuleggja kóðann okkar á mjög þægilegan hátt, á þann hátt sem myndi gera það auðveldara fyrir einhvern annan sem vildu taka upp verkefni að byggja á. Þú getur séð að þetta gefur mikla uppbyggingu. Og þá er ég að kalla bakið á þessari addItem. Láta, eins og þú sérð, og þú þarft ekki að grípa þetta fullur setningafræði, en í grundvallaratriðum fyrir hverja gerð það er að fara að hringja í einstaka Render aðferð. Það er tegund af hvar þetta kemur frá. Við skulum bara tilgreina hvernig á að gera einstaka Todos, og þá skulum límið þá saman sem heild. En þetta veitir möguleika á abstrakt, vegna þess að ég gæti breytt því hvernig ég ákveð að láta einstaka Todos, og ég þyrfti ekki að breyta einhverju af þessu númeri. Það er góður af kaldur. 

Hefur einhver hefur einhverjar spurningar um JavaScript ramma? [Námsmaður inaudible spurning] Jæja, það er frábær spurning. Spurningin var hvernig var ég að innihalda ramma? Flest Javascript ramma eru í rauninni bara JS skrár að þú getur að minnsta the toppur af kóðanum þínum. Tilkynning í höfuðið hluta HTML ég hef öll þessi handrit tags, og endanleg handrit tag er númer sem við höfum skrifað. Og þá 3 ramma númerin eru bara líka handrit tags. Ég er þar þá frá því sem er kallað CDN, sem gerir mig að fá það frá einhverjum öðrum á þessum tímapunkti en sérhver rammi hefur þetta, þú getur nokkurn veginn að finna efni fyrir tiltekinn JavaScript bókasafn í boði á sumum CDN eða eitthvað svoleiðis, og þá er hægt að fela þetta handrit tags. Er að skynsamleg? Cool. 

Þeir eru 2 mismunandi aðferðir. Þeir eru ekki aðeins leiðir til að leysa þetta vandamál. Það eru til margar mismunandi hlutir sem einhver gæti gert, og það eru margir ramma þarna úti. Hyrndur og burðarás segja ekki alla söguna. Gangi þér vel með lokaverkefnið þitt og þakka þér kærlega. [CS50.TV]