1 00:00:00,000 --> 00:00:02,000 [Powered by Google Translate] [Seminārs] [Javascript torņi: Kāpēc un kā] 2 00:00:02,000 --> 00:00:04,000 [Kevin Schmid] [Harvard University] 3 00:00:04,000 --> 00:00:06,960 [Tas ir CS50.] [CS50.TV] 4 00:00:06,960 --> 00:00:10,630 >> Hi, visiem. Laipni lūgti JavaScript sistēmas seminārā. 5 00:00:10,630 --> 00:00:14,910 Mans vārds ir Kevin, un šodien es esmu gatavojas runāt par JavaScript sistēmas, 6 00:00:14,910 --> 00:00:20,400 un šī semināra mērķis nav iegūt jums, teiksim, apgūt kādu konkrētu sistēmu per se 7 00:00:20,400 --> 00:00:23,810 bet, lai dotu jums plašu ievadu pāris ietvaros 8 00:00:23,810 --> 00:00:27,150 un pierādīt, kāpēc mēs varētu kādreiz vēlaties, lai izmantotu sistēmu. 9 00:00:27,150 --> 00:00:31,060 >> Pirms es to izdarītu, es jums sniegt nelielu fona JavaScript, 10 00:00:31,060 --> 00:00:33,750 un tad mēs ņemt to no turienes. 11 00:00:33,750 --> 00:00:36,270 Mēs esam gatavojas sākt, ieviešot to-do sarakstu. 12 00:00:36,270 --> 00:00:39,330 Lūk, mūsu uzdevumu sarakstu, lai šodien. 13 00:00:39,330 --> 00:00:41,990 Tas ir sava veida smieklīgi. Mums ir jāīsteno to-do sarakstu JavaScript. 14 00:00:41,990 --> 00:00:45,110 Tas ir tas, ko tā gatavojas izskatās, tāpēc tas ir mūsu pirmais mērķis. 15 00:00:45,110 --> 00:00:47,160 Mēs neesam gatavojas izmantot sistēmu, lai to izdarītu. 16 00:00:47,160 --> 00:00:51,930 Mēs ejam, lai kodu JavaScript un saņemt to-do sarakstu, lai strādātu. 17 00:00:51,930 --> 00:00:54,370 Tad mēs ejam, lai uzlabotu dizainu, neizmantojot sistēmu. 18 00:00:54,370 --> 00:00:57,190 Mēs ejam, lai apspriestu dažādas lietas, ko mēs varam darīt tikai ar JavaScript vien 19 00:00:57,190 --> 00:01:00,650 lai padarītu mūsu to-do sarakstu nedaudz vairāk labi izstrādāta. 20 00:01:00,650 --> 00:01:02,490 Tad mēs ejam, lai iemest kādu jQuery, 21 00:01:02,490 --> 00:01:05,030 un tad mēs ejam apskatīt pats to-do sarakstu, 22 00:01:05,030 --> 00:01:07,170 tikai jāīsteno dažādās sistēmās, un mēs apspriestu 23 00:01:07,170 --> 00:01:09,280  plusi un mīnusi gar ceļu. 24 00:01:09,280 --> 00:01:12,040 >> Sāksim īstenot, kas to-do sarakstu. 25 00:01:12,040 --> 00:01:14,270 Teiksim, mēs, ņemot vērā šo HTML. 26 00:01:14,270 --> 00:01:16,620 Es esmu gatavojas darīt to nedaudz mazāks. 27 00:01:16,620 --> 00:01:19,300 Kā jūs varat redzēt, man ir maz galveni, kas saka Todo 28 00:01:19,300 --> 00:01:21,740 un mazā kastīte, kur es varu ievadīt aprakstu par uzdevumu sarakstā 29 00:01:21,740 --> 00:01:26,990 un tad jauns punkts poga, tāpēc pieņemsim mēģināt ievadīt jaunu todo šim sarakstam. 30 00:01:26,990 --> 00:01:31,000 Dodiet JavaScript sistēmas semināru, 31 00:01:31,000 --> 00:01:33,090 un es esmu, lai sasniegtu jaunu objektu. 32 00:01:33,090 --> 00:01:35,730 Man šo JavaScript brīdinājumu, ka saka īstenot mani. 33 00:01:35,730 --> 00:01:37,560 Mēs esam ieguvuši, lai to īstenotu. 34 00:01:37,560 --> 00:01:41,490 Pieņemsim pārbaudīt kodu par šo, gan HTML un JavaScript. 35 00:01:41,490 --> 00:01:43,260 Lūk, mūsu HTML. 36 00:01:43,260 --> 00:01:45,500 Kā jūs varat redzēt šeit, šeit ir mūsu mazā Todos galvenes. 37 00:01:45,500 --> 00:01:47,620 Tas bija tas, ka treknrakstā lieta augšpusē, 38 00:01:47,620 --> 00:01:50,690 un tad mums ir ievades lodziņu ar vietturī 39 00:01:50,690 --> 00:01:59,460 un tad tur ir dažas atribūts šo pogu, kas aicina šo funkciju addTodo. 40 00:01:59,460 --> 00:02:05,460 Vai kāds vēlas, lai uzminēt, kas tas par klikšķi tiek nozīmētu? 41 00:02:05,460 --> 00:02:07,390 [Studentu dzirdams atbilde] 42 00:02:07,390 --> 00:02:09,289 Labi, par klikšķi ir veida, piemēram, notikumu, 43 00:02:09,289 --> 00:02:12,120 piemēram, uzklikšķinot uz peles ir tikai notikums, un ko mēs darām 44 00:02:12,120 --> 00:02:16,890 ir, mēs esam sasaistīšana notikumu noklikšķinot uz šīs pogas, lai izpildītu šo funkciju. 45 00:02:16,890 --> 00:02:21,700 AddTodo tas ir notikumu apdarinātājs noklikšķinot uz šīs pogas. 46 00:02:21,700 --> 00:02:25,010 >> Kā jūs varat redzēt, kad es noklikšķiniet uz jaunās posteni pogu 47 00:02:25,010 --> 00:02:29,940 par klikšķi notikums izpaužas karsētie, un šī funkcija izpaužas sauc. 48 00:02:29,940 --> 00:02:33,170 Apskatīsim funkciju. 49 00:02:33,170 --> 00:02:36,260 Kā jūs varat redzēt, šeit ir mana JavaScript kods līdz šim. 50 00:02:36,260 --> 00:02:41,280 Kas man ir augšā, ir globāla datu struktūra par manu to-do sarakstu. 51 00:02:41,280 --> 00:02:44,060 Izskatās masīva. Tā ir tikai tukša masīvs. 52 00:02:44,060 --> 00:02:47,100 Un tad man ir addTodo funkcija, ko mēs redzējām agrāk, 53 00:02:47,100 --> 00:02:50,740 un vienīgajā rindā kodu ir šis brīdinājums. 54 00:02:50,740 --> 00:02:55,730 Tā brīdina īstenot mani, un tad man ir 2 uzdevumi pie rokas. 55 00:02:55,730 --> 00:02:58,790 Man ir pievienot todo globālajai datu struktūra, 56 00:02:58,790 --> 00:03:01,860 un tad es gribu izņemt to-do sarakstu. 57 00:03:01,860 --> 00:03:06,360 Nekas pārāk fancy tikai vēl, bet aktivizētam jums var būt svešs ar, 58 00:03:06,360 --> 00:03:12,370 tāpēc es esmu gatavojas iet lēni un pārskatīt pamatus JavaScript šādā veidā. 59 00:03:12,370 --> 00:03:15,490 >> Let 's dod tas shot. 60 00:03:15,490 --> 00:03:21,130 Pieņemsim, ka lietotājs ievada kaut ko šajā ailē. 61 00:03:21,130 --> 00:03:23,360 Es tikko ierakstījāt kaut ko šeit, teksta. 62 00:03:23,360 --> 00:03:27,620 Kā es varu šķirot piekļuves ka teksta caur JavaScript? 63 00:03:27,620 --> 00:03:32,500 Atcerieties, ka JavaScript, viens no tās galvenajiem iezīmes ir, ka tas dod mums 64 00:03:32,500 --> 00:03:34,670 Šī programmēšanas piekļuvi DOM. 65 00:03:34,670 --> 00:03:40,670 Tas ļauj mums piekļūt elementi un to īpašības šī faktiskā HTML. 66 00:03:40,670 --> 00:03:43,430 Veids, kā mēs darīt, ka ar kailām kauli JavaScript 67 00:03:43,430 --> 00:03:51,360 ir, mēs faktiski var izmantot javascript funkciju sauc getElementByID. 68 00:03:51,360 --> 00:03:55,140 Es gribu, lai saglabātu tekstu, kas ir drukāti tur kādu mainīgo, 69 00:03:55,140 --> 00:03:58,350 tāpēc es esmu gatavojas teikt jaunu mainīgo sauc new_todo, 70 00:03:58,350 --> 00:04:01,980 un es esmu gatavojas saņemt šo elementu. 71 00:04:01,980 --> 00:04:06,330 Tas ir funkcija,. GetElementByID. 72 00:04:06,330 --> 00:04:11,580 Un tagad es saņemu elementu pēc ID, tāpēc man ir nepieciešams ID šī teksta lodziņā, 73 00:04:11,580 --> 00:04:15,860 tāpēc es esmu devis tai ID new_todo_description. 74 00:04:15,860 --> 00:04:18,399 Tas ir, kā es esmu gatavojas saņemt elements. 75 00:04:18,399 --> 00:04:23,880 Tas ir mans arguments, lai šo funkciju, lai norādītu kuru ID, lai saņemtu. 76 00:04:23,880 --> 00:04:28,110 Un tā, ka ir elements HTML, un tas ir īpašības. 77 00:04:28,110 --> 00:04:30,650 Jūs esat redzējuši tos. Viņi atribūti. 78 00:04:30,650 --> 00:04:37,090 No teksta elementu, kas saglabā lietotāja ievadi atribūta sauc vērtību. 79 00:04:37,090 --> 00:04:40,860 Es saglabāti vērtība, tekstlodziņā tagad šajā mainīgā sauc new_todo. 80 00:04:40,860 --> 00:04:45,040 Tagad man ir programmatisku piekļuvi šo rādītāju, kas ir veida atdzist 81 00:04:45,040 --> 00:04:49,200 jo tagad to, ko es varu darīt, ir es varu pievienot to uz manu to-do sarakstu. 82 00:04:49,200 --> 00:04:52,870 >> Veids, kā mēs varētu izdarīt JavaScript un neuztraucieties, ja jums nav pazīstami ar to, 83 00:04:52,870 --> 00:04:57,010 bet tikai iet caur to ir todos.push 84 00:04:57,010 --> 00:05:00,130 jo tas ir nosaukums mana pasaules datu struktūra šeit, 85 00:05:00,130 --> 00:05:04,450 un es esmu gatavojas virzīt new_todo. 86 00:05:04,450 --> 00:05:09,120 Tas ir liels, jo tagad man ir pievienoti to manu JavaScript 87 00:05:09,120 --> 00:05:11,280 pārstāvība, kas to-do sarakstu. 88 00:05:11,280 --> 00:05:15,170 Bet tagad, kā es varu saņemt to atpakaļ uz HTML? 89 00:05:15,170 --> 00:05:18,560 Man ir jāatrod veids, lai kārtotu ar push to atpakaļ. 90 00:05:18,560 --> 00:05:21,830 Citiem vārdiem sakot, es veida ir izdarīt to. 91 00:05:21,830 --> 00:05:26,060 Ko mēs gatavojamies darīt, ir, mēs ejam, lai pievērstu to-do sarakstu. 92 00:05:26,060 --> 00:05:29,270 Man vajag, lai atjauninātu citu HTML šajā lapā, 93 00:05:29,270 --> 00:05:32,040 un, kā jūs varat redzēt, es esmu atstājis šo mazo konteineru šeit, 94 00:05:32,040 --> 00:05:36,840 šis dalītājs no lapas, kuras ID ir todos, 95 00:05:36,840 --> 00:05:40,870 un es esmu gatavojas nodot to-do sarakstu tur. 96 00:05:40,870 --> 00:05:47,240 Vispirms es esmu gatavojas, lai nodzēstu to ārā, jo, teiksim, tur bija vecs to-do sarakstu tur. 97 00:05:47,240 --> 00:05:49,560 Es saņemu šo elementu pēc ID atkal, 98 00:05:49,560 --> 00:05:54,530 un es esmu piekļūstot iekšējo HTML šī elementa, 99 00:05:54,530 --> 00:05:58,010 un es esmu gatavojas skaidrs, ka. 100 00:05:58,010 --> 00:06:05,510 Ja mēs atstājām šo kodu, kā ir, mēs gribētu redzēt tukšu neko tur, 101 00:06:05,510 --> 00:06:10,410 un tagad es gribu sākt padarot savu jauno to-do sarakstu. 102 00:06:10,410 --> 00:06:12,870 Es esmu būtībā gatavojas noslaucīt manu to-do sarakstu. 103 00:06:12,870 --> 00:06:18,180 >> Tagad iekšējais HTML iekšpusē šī TODOS div ir pilnīgi skaidrs, 104 00:06:18,180 --> 00:06:20,060 un tagad man ir nepieciešams, lai sāktu pievienot manu sarakstu. 105 00:06:20,060 --> 00:06:23,890 Pirmā lieta, ko es vēlos, lai pievienotu atpakaļ ir Nekārtots saraksts tag, 106 00:06:23,890 --> 00:06:33,890 kas būtībā nozīmē, ka tas ir sākums no Nekārtots saraksts. 107 00:06:33,890 --> 00:06:39,770 Tagad par katru elementu manā TODOS masīvā Es vēlos izdrukāt iekšpusē šo HTML. 108 00:06:39,770 --> 00:06:43,710 Es vēlos pievienot to uz uz apakšā šo sarakstu. 109 00:06:43,710 --> 00:06:49,040 Tāpat kā C, es varu izmantot, lai cilpas, un es esmu gatavojas sākt sākumā manu sarakstu 110 00:06:49,040 --> 00:06:54,140 ar 0 elements, un es esmu, kas iet visu ceļu uz garumu saraksta. 111 00:06:54,140 --> 00:07:01,100 Mēs faktiski var iegūt garumu pretendentu JavaScript masīvu, izmantojot garuma īpašumu. 112 00:07:01,100 --> 00:07:03,420 Būtībā es esmu gatavojas darīt, kaut kas ļoti līdzīgs iekšā šeit 113 00:07:03,420 --> 00:07:05,600 izdrukāt šo elementu. 114 00:07:05,600 --> 00:07:12,970 Es atkal varat piekļūt TODOS DIV, iekšējais HTML īpašumu no tā, 115 00:07:12,970 --> 00:07:17,560 un es esmu gatavojas, lai pievienotu par šo jauno saraksta elementa, un kas notiek, lai būtu ieskauj 116 00:07:17,560 --> 00:07:25,390 tas li tagu, un es esmu gatavojas saķēdēt ar + operatoru, 117 00:07:25,390 --> 00:07:28,040 un tas ir i-tais elements mana TODOS masīvs, 118 00:07:28,040 --> 00:07:32,380 un tad es esmu gatavojas, lai aizvērtu šo tagu. 119 00:07:32,380 --> 00:07:36,240 Tagad par katru elementu mēs pievienotu jaunu saraksta ierakstu. 120 00:07:36,240 --> 00:07:48,700 Un tad viss, kas mums tiešām ir nepieciešams darīt, ir aizvērt šo frāzi. 121 00:07:48,700 --> 00:07:52,820 Man vienkārši vajag aizvērt, ka Nekārtots sarakstu tag. 122 00:07:52,820 --> 00:07:55,490 >> Vai jums justies par to, kā kas darbojas? 123 00:07:55,490 --> 00:07:57,700 Tas paver visu sarakstu. 124 00:07:57,700 --> 00:08:01,080 Tas piebilst atsevišķus elementus no TODOS saraksta uz sarakstu, 125 00:08:01,080 --> 00:08:05,470 un tad aizver visu sarakstu, un šis ir mans addTodo funkcija. 126 00:08:05,470 --> 00:08:09,590 Es būtībā sākt ar kļūst todo no teksta lodziņā. 127 00:08:09,590 --> 00:08:18,950 Jāpiebilst, ka, lai TODOS masīvs, un tad es atkal padarīt to-do sarakstu. 128 00:08:18,950 --> 00:08:21,520 Tagad es varu pievienot objektus, lai manā sarakstā. 129 00:08:21,520 --> 00:08:24,620 Tas ir sava veida aizraujoši, jo tikai dažas rindiņas kodu 130 00:08:24,620 --> 00:08:28,240 mēs esam būtībā veikuši to-do sarakstu, kur mēs varam pievienot objektus. 131 00:08:28,240 --> 00:08:30,050 Lieliski. 132 00:08:30,050 --> 00:08:34,480 Tas ir sava veida pamata ievadu JavaScript. 133 00:08:34,480 --> 00:08:36,179 Neuztraucieties pārāk daudz par sintakse tagad, 134 00:08:36,179 --> 00:08:38,130 bet domāju, ka par to konceptuāli. 135 00:08:38,130 --> 00:08:40,539 Mums bija dažas HTML. 136 00:08:40,539 --> 00:08:45,310 Mums bija tekstlodziņu uz lapu, kas būtībā ļāva lietotājiem, lai ievadītu to-do objektu, kas jāpievieno. 137 00:08:45,310 --> 00:08:49,210 Un tad mēs, ko izmanto JavaScript, lai atnest šo todo no šī teksta lodziņā. 138 00:08:49,210 --> 00:08:52,830 Mēs uzglabā ka iekšpusē JavaScript masīvs, kas ir pamatā, piemēram, 139 00:08:52,830 --> 00:08:56,010 mūsu programmatiskā pārstāvība, kas to-do sarakstu, 140 00:08:56,010 --> 00:08:59,060 un tad mēs izdrukāt to ārā. 141 00:08:59,060 --> 00:09:02,690 Tas ir todos.js. 142 00:09:02,690 --> 00:09:07,620 >> Tas ir veida atdzist, bet kā mēs varam izmantot šo tālāk? 143 00:09:07,620 --> 00:09:11,350 Nu, kā jūs varat redzēt, tas nav, piemēram, pilnīgs to-do sarakstu. 144 00:09:11,350 --> 00:09:15,100 Piemēram, es nevar iezīmēt jebkuru no šiem, kā nepilnīgs vienību, 145 00:09:15,100 --> 00:09:19,920 piemēram, ja es gribēju, lai reprioritize priekšmetus vai izdzēstu objektus. 146 00:09:19,920 --> 00:09:23,150 Tas ir labi, bet mēs varam veikt šo tālāk. 147 00:09:23,150 --> 00:09:29,280 Es neesmu gatavojas runāt pārāk daudz par pievienojot papildu funkcijas, 148 00:09:29,280 --> 00:09:32,800 bet mēs varētu pieņemt, ka tālāk. 149 00:09:32,800 --> 00:09:35,970 Parunāsim par pievienojot vēl vienu iespēju, lai to-do sarakstu, 150 00:09:35,970 --> 00:09:40,370 kas būs to var pārbaudīt indivīdam-do posteni 151 00:09:40,370 --> 00:09:44,780 un ir tā pārsvītro, tāpēc būtībā sakot, es esmu izdarījis. 152 00:09:44,780 --> 00:09:50,240 Apskatīsim kādu kodu, kas varētu paveikt to. 153 00:09:50,240 --> 00:09:52,740 Paziņojums, ko es esmu darījusi augšā ir Esmu pievienotās 154 00:09:52,740 --> 00:09:57,620 jaunu globālu masīvu sauc par pilnīgu. 155 00:09:57,620 --> 00:10:02,890 Es būtībā, izmantojot šo uzglabāt, vai attiecīgās preces uz to-do sarakstu 156 00:10:02,890 --> 00:10:06,560 nav pilnīga vai nav. 157 00:10:06,560 --> 00:10:08,470 Tas ir viens veids, kā to izdarīt. 158 00:10:08,470 --> 00:10:13,750 Ja es paskatos uz šīs direktīvas īstenošanu, displejs, 159 00:10:13,750 --> 00:10:21,120 būtībā, ja es ievadiet todo, un es nospiediet šo pārslēgšanas pogu 160 00:10:21,120 --> 00:10:25,040 tas šķērso veic, lai katrs šajā sarakstā priekšmets ir vai nu pilnīgs 161 00:10:25,040 --> 00:10:31,050 vai nepilnīgu valsts, un es esmu, izmantojot citu masīvu, lai pārstāvētu to. 162 00:10:31,050 --> 00:10:33,730 >> Būtībā par katru uzdevumu sarakstā šajā TODOS masīvs 163 00:10:33,730 --> 00:10:37,110 tur ir postenis pilnīgu masīvā, kas būtībā norāda 164 00:10:37,110 --> 00:10:39,060 vai tas ir pabeigts vai ne. 165 00:10:39,060 --> 00:10:41,640 Man bija veikt diezgan minimālas izmaiņas šajā kodeksā, 166 00:10:41,640 --> 00:10:44,470 tāpēc šeit ir mūsu addTodo funkcija. 167 00:10:44,470 --> 00:10:48,530 Ievērojiet, ka šeit es esmu spiežot to uz masīvs, 168 00:10:48,530 --> 00:10:51,300 un tad es esmu spiežot 0, lai šo pilnīgi masīvs, 169 00:10:51,300 --> 00:10:57,090 būtībā notiek paralēli ar jauno todo push teikt 170 00:10:57,090 --> 00:11:00,430 Es esmu pievienojot šo posteni, un tas ir saistīts ar šo vērtību, 171 00:11:00,430 --> 00:11:02,810 kas nozīmē, ka tā ir nepilnīga. 172 00:11:02,810 --> 00:11:04,970 Un tad es esmu redrawing to-do sarakstu. 173 00:11:04,970 --> 00:11:09,220 Tagad, ievērosiet, es esmu pievienojis šo drawTodoList funkciju. 174 00:11:09,220 --> 00:11:11,760 Tas aizņem daudz kodu mums bija agrāk, 175 00:11:11,760 --> 00:11:15,320 būtībā attīra lodziņu un pēc tam pievērš jaunu uzdevumu sarakstu. 176 00:11:15,320 --> 00:11:19,620 Bet paziņo, ka iekšpusē tā, lai cilpa klājas nedaudz vairāk tagad. 177 00:11:19,620 --> 00:11:25,000 Mēs galvenokārt pārbaudot, vai postenis atbilst kārtējam ToDo šeit 178 00:11:25,000 --> 00:11:30,220 ir pabeigta, un mēs esam uzvedas savādāk šiem 2 gadījumos. 179 00:11:30,220 --> 00:11:32,790 Ja tas ir pabeigts, mēs pievienojam šo del tagu, 180 00:11:32,790 --> 00:11:35,360 kas būtībā ir veids, kā jūs varat iegūt, ka streiku caur efektu 181 00:11:35,360 --> 00:11:38,190 svītrojot to-do sarakstu, ja tas ir pabeigts, 182 00:11:38,190 --> 00:11:42,200 un, ja tā nav, mēs esam ne arī to. 183 00:11:42,200 --> 00:11:45,030 Un tāpēc šāda veida rūpējas par to, 184 00:11:45,030 --> 00:11:49,140 >> un tas ir viens no veidiem, lai to paveiktu. 185 00:11:49,140 --> 00:11:53,420 Un tad ievērosiet, kad lietotājs noklikšķina uz vienu no šiem 186 00:11:53,420 --> 00:11:56,780 mēs pārslēgt pabeigšanas statusu tā. 187 00:11:56,780 --> 00:12:02,170 Kad lietotājs noklikšķina, mēs mainīt, vai tas ir pabeigts vai nē, 188 00:12:02,170 --> 00:12:04,540 un tad mēs ievilktu to. 189 00:12:04,540 --> 00:12:06,190 Šāda veida darbu. 190 00:12:06,190 --> 00:12:09,860 Mums ir šīs funkcijas, kas veic savus uzdevumus, 191 00:12:09,860 --> 00:12:11,730 un tas ir labi. 192 00:12:11,730 --> 00:12:14,110 Vai ir kaut kas, mēs varētu darīt labāk par to, lai gan? 193 00:12:14,110 --> 00:12:18,700 Ievērojiet, mums ir šie 2 pasaules masīvus. 194 00:12:18,700 --> 00:12:23,550 Ja tas bija C, un mums bija 2 masīvi šāda veida pārstāvētas 195 00:12:23,550 --> 00:12:25,800 dati, kas bija sava veida saistīti kaut kādā veidā 196 00:12:25,800 --> 00:12:30,140 Ko gan mēs izmantot C, lai apvienotu šos 2 laukus 197 00:12:30,140 --> 00:12:35,420 kaut ko, kas iekļauj gan informācijas daļas? 198 00:12:35,420 --> 00:12:37,600 Ikviens vēlas, lai ierosinājumu? 199 00:12:37,600 --> 00:12:39,450 [Studentu dzirdams atbilde] 200 00:12:39,450 --> 00:12:42,340 >> Tieši tā, lai mēs varētu izmantot kādu struktūrai, 201 00:12:42,340 --> 00:12:44,960 un, ja jūs domājat, ka atpakaļ uz, teiksim, 3 PSET, 202 00:12:44,960 --> 00:12:47,350 atceros, mums bija vārdnīcu, un tad mums bija, vai vārds 203 00:12:47,350 --> 00:12:50,230 bija vārdnīcā, un visa šī informācija tika salikti kopā 204 00:12:50,230 --> 00:12:52,420 iekšpusē dažu datu struktūras. 205 00:12:52,420 --> 00:12:56,390 Viena lieta, ko es varu darīt ar šo kodu, lai izvairītos no šīm 2 dažādi bloki 206 00:12:56,390 --> 00:13:01,760 līdzīgām informācijas daļas, ir es varu tos apvienot JavaScript objektu. 207 00:13:01,760 --> 00:13:07,150 Pieņemsim to apskatīt to. 208 00:13:07,150 --> 00:13:11,740 Paziņojums Man ir tikai viens bloks augšpusē tagad 209 00:13:11,740 --> 00:13:17,650 un ko es esmu darījis, ir, un tas ir tikai JavaScript sintakse veida 210 00:13:17,650 --> 00:13:21,350 radot burtiski versiju objektu, 211 00:13:21,350 --> 00:13:24,670 un paziņojums ir 2 īpašības, tāpēc mums ir todo, 212 00:13:24,670 --> 00:13:29,660 un tas ir tur kopā ar to, vai tā ir pilnīga vai nepilnīga. 213 00:13:29,660 --> 00:13:31,000 Tas ir ļoti līdzīgs kods. 214 00:13:31,000 --> 00:13:35,310 Mēs esam izmantojot JavaScript objekti. 215 00:13:35,310 --> 00:13:38,600 Šī veida uzlabo lietas. 216 00:13:38,600 --> 00:13:43,850 Tāpat kā tagad, visi šie saistītu informāciju lauki tiek turēti kopā. 217 00:13:43,850 --> 00:13:46,410 Kad mēs ejam to izdrukāt, mēs varam piekļūt laukus. 218 00:13:46,410 --> 00:13:49,060 >> Ievērojiet, kā klājas todos [i]. Pabeigta 219 00:13:49,060 --> 00:13:52,880 tā vietā, lai pārbaudītu pilnu klāstu atsevišķi, 220 00:13:52,880 --> 00:13:56,560 un paziņojums, kad mēs vēlamies, lai iegūtu to-do virkni mēs iegūtu to-do īpašumu 221 00:13:56,560 --> 00:13:58,750 Šī uzdevumu sarakstā, tāpēc šāda veida jēga, jo 222 00:13:58,750 --> 00:14:01,660 katram postenim ir šādas raksturīgās īpašības par to. 223 00:14:01,660 --> 00:14:05,650 Tā ir todo, un tas ir, vai tas ir pabeigts vai ne. 224 00:14:05,650 --> 00:14:11,540 Ne pārāk daudz izmaiņas tur funkcionāli, tikko pievienotās dažas vairāk, lai kodu. 225 00:14:11,540 --> 00:14:13,430 Tas ir uzlabojums par dažiem frontēs, vai ne? 226 00:14:13,430 --> 00:14:16,030 Es domāju, mēs ņemt ārā dizainu mazliet. 227 00:14:16,030 --> 00:14:20,350 Tagad mums ir objektus, lai būtībā rezumēju šos datus. 228 00:14:20,350 --> 00:14:27,130 Vai ir kaut kas vairāk, mēs varētu darīt no šejienes ziņā JavaScript? 229 00:14:27,130 --> 00:14:31,810 Tāpat kā paziņojums, ka šis kods tieši šeit 230 00:14:31,810 --> 00:14:34,760 lai iegūtu iekšējo HTML par div 231 00:14:34,760 --> 00:14:40,520 ir maz, es domāju, ilgi. 232 00:14:40,520 --> 00:14:45,100 Tur ir document.getElementById ("todos"). InnerHTML. 233 00:14:45,100 --> 00:14:48,400 Viena lieta, ko mēs varētu darīt, lai šis kods izskatās mazliet draudzīgāku 234 00:14:48,400 --> 00:14:51,450 tāpēc es nebūtu saglabāt ritinot pa kreisi un pa labi, uz priekšu un atpakaļ, 235 00:14:51,450 --> 00:14:58,480 ir es varētu izmantot bibliotēku, piemēram, jQuery. 236 00:14:58,480 --> 00:15:02,710 >> Let 's pārbaudīt seminārs 2, 237 00:15:02,710 --> 00:15:05,880 un tas ir tas pats kods, bet tas ir darīts ar jQuery. 238 00:15:05,880 --> 00:15:08,790 Jums var būt pārāk pazīstams ar jQuery, 239 00:15:08,790 --> 00:15:11,510 bet tikai zinu, ka jQuery ir sava veida bibliotēka JavaScript 240 00:15:11,510 --> 00:15:15,910 kas padara to vieglāk darīt lietas, piemēram, piekļuve atsevišķiem elementiem DOM. 241 00:15:15,910 --> 00:15:21,280 Šeit, nevis pasakot document.getElementById ("todos"). InnerHTML 242 00:15:21,280 --> 00:15:25,210 Es varētu izmantot daudz tīrāku ceļu jQuery, 243 00:15:25,210 --> 00:15:28,490 kas ir tikai, lai izmantotu selektori. 244 00:15:28,490 --> 00:15:31,300 Kā jūs varat redzēt, šis kods bija iegūt mazliet tīrāku, 245 00:15:31,300 --> 00:15:35,770 ļoti līdzīgs funkcionāli, bet tas ir ideja. 246 00:15:35,770 --> 00:15:37,980 Mēs esam redzējuši dažas lietas tik tālu, 247 00:15:37,980 --> 00:15:42,010 tāpēc mēs sākām tikai ar izejvielu JavaScript īstenošanu. 248 00:15:42,010 --> 00:15:45,370 Mēs pievienot jaunas funkcijas un parādīja, kā mēs varam uzlabot to ar 249 00:15:45,370 --> 00:15:49,090 tikai to, kas mums ir JavaScript. 250 00:15:49,090 --> 00:15:53,300 >> Vai kāds redzētu grūtības ar šo dizainu? 251 00:15:53,300 --> 00:16:01,090 Proti, es domāju, un ne vienmēr ir grūtības, bet teiksim 252 00:16:01,090 --> 00:16:04,830 mēs nedarām to-do sarakstu projekts, un rīt mēs nolēmām 253 00:16:04,830 --> 00:16:10,320 mēs vēlējāmies, lai pārtikas preču sarakstu vai iepirkšanās saraksta projektu. 254 00:16:10,320 --> 00:16:14,150 No šīm funkcijām daudz ir ļoti līdzīgas. 255 00:16:14,150 --> 00:16:19,080 No lietām, ko mēs vēlamies izkļūt no JavaScript daudz ir ļoti bieži, 256 00:16:19,080 --> 00:16:23,820 un tas uzsver nepieciešamību sava veida veidā 257 00:16:23,820 --> 00:16:25,670 padarot to vieglāk izdarīt. 258 00:16:25,670 --> 00:16:30,400 Man bija, lai izveidotu visu šo HTML piekļuvi, visu šo DOM piekļuvi, 259 00:16:30,400 --> 00:16:35,530 piemēram, es esmu gatavojas pārstāvēt to-do sarakstu ar šo modeli. 260 00:16:35,530 --> 00:16:39,130 Un paziņojums, es esmu atbildīgs par JavaScript attīstītājs 261 00:16:39,130 --> 00:16:42,890 saglabāt HTML un JavaScript, ka man ir sinhronizēti. 262 00:16:42,890 --> 00:16:48,040 Nekas automātiski jāparedz, ka JavaScript pārstāvība 263 00:16:48,040 --> 00:16:51,590 vai to-do sarakstu, iegūt uzstājām, lai HTML. 264 00:16:51,590 --> 00:16:54,000 Nekas izpildīts, ka, izņemot mani. 265 00:16:54,000 --> 00:16:56,880 Man bija rakstīt izdarīt to-do sarakstu funkcijas. 266 00:16:56,880 --> 00:17:01,650 Un tas nevar būt, es domāju, tas ir saprātīgi to darīt, 267 00:17:01,650 --> 00:17:03,670 bet tas var būt garlaicīgs reizēm. 268 00:17:03,670 --> 00:17:08,190 Ja jums ir lielāka projekta, kas varētu būt grūti. 269 00:17:08,190 --> 00:17:10,720 >> Sistēmai, kas ir viens no regulējuma mērķiem 270 00:17:10,720 --> 00:17:14,060 mērķis ir vienkāršot šo procesu un veida faktoru, kas 271 00:17:14,060 --> 00:17:16,950 šos kopīgos-Es domāju, jūs varētu teikt, dizaina modeļus 272 00:17:16,950 --> 00:17:20,700 ka cilvēki parasti ir sava veida veids, lai pārstāvētu datu, 273 00:17:20,700 --> 00:17:25,599 vai tas ir draugu sarakstā, vai tas ir kartes informācija 274 00:17:25,599 --> 00:17:27,280 vai kaut vai to-do sarakstu. 275 00:17:27,280 --> 00:17:30,660 Daži cilvēki ir parasti veids, kā pārstāvēt informāciju, 276 00:17:30,660 --> 00:17:33,650 un tie parasti ir nepieciešams, lai saglabātu šo informāciju veida sinhronizācijā 277 00:17:33,650 --> 00:17:36,520 starp to, ko lietotājs redz sava veida skatu, 278 00:17:36,520 --> 00:17:39,850 runājot ziņā līdzīgi modeļa skata kontrolieris, ka jūs redzēju lekciju, 279 00:17:39,850 --> 00:17:45,400 un pēc tam paraugs, kas šajā gadījumā ir šī JavaScript masīvs. 280 00:17:45,400 --> 00:17:49,020 Sistēmai dod mums veids, kā risināt šo problēmu. 281 00:17:49,020 --> 00:17:53,080 Tagad pieņemsim apskatīt īstenot to-do sarakstu 282 00:17:53,080 --> 00:18:02,360 tādā vidē sauc angularjs. 283 00:18:02,360 --> 00:18:04,650 Tas ir tā. Pamanāt, ka tas iekļaujas slaidā. 284 00:18:04,650 --> 00:18:07,330 Man nav, lai ritinātu pa kreisi un pa labi. 285 00:18:07,330 --> 00:18:10,460 Tas, iespējams, nav liels iemesls, lai ieteiktu, izmantojot sistēmu, 286 00:18:10,460 --> 00:18:20,120 bet paziņojums es jebkad piekļūt atsevišķiem HTML elementus šeit? 287 00:18:20,120 --> 00:18:22,400 Es esmu kādreiz nonākšana DOM? 288 00:18:22,400 --> 00:18:26,120 Vai jūs redzat document.getElementById vai kaut kas tamlīdzīgs? 289 00:18:26,120 --> 00:18:29,870 Nē, tas ir pagājis. 290 00:18:29,870 --> 00:18:35,590 >> Stūra palīdz mums saglabāt DOM un mūsu JavaScript pārstāvību kaut 291 00:18:35,590 --> 00:18:40,430 veida sinhronizēti, tādēļ, ja tas nav js failu, 292 00:18:40,430 --> 00:18:46,790 ja tur nav programmatiski panākt, lai visiem, ka HTML saturu veids 293 00:18:46,790 --> 00:18:51,800 No JavaScript kā mēs paturot to sinhronizēt? 294 00:18:51,800 --> 00:18:58,160 Ja tas neatrodas. Js failu, tas ir got būt HTML, vai ne? 295 00:18:58,160 --> 00:19:01,910 Šī ir jaunā versija HTML failu, 296 00:19:01,910 --> 00:19:04,660 un paziņojums, mēs esam pievienojuši daudz šeit. 297 00:19:04,660 --> 00:19:11,110 Paziņojums tur ir šie jaunie atribūti, kas saka ng klikšķi un ng atkārtot. 298 00:19:11,110 --> 00:19:15,650 Stūra pieeja, lai atrisinātu šo problēmu, grūtības, dizaina 299 00:19:15,650 --> 00:19:19,130 ir būtībā padarīt HTML daudz spēcīgāk. 300 00:19:19,130 --> 00:19:24,420 Stūra ir veids, kas ļauj jums veikt HTML nedaudz izteiksmīgāku. 301 00:19:24,420 --> 00:19:30,520 Piemēram, es varu teikt, ka es esmu gatavojas, lai tie vai saistīt šo teksta lodziņu 302 00:19:30,520 --> 00:19:35,080 mainīgā kas manā Stūra JavaScript kodu. 303 00:19:35,080 --> 00:19:37,030 Šis ng modelis dara tikai to. 304 00:19:37,030 --> 00:19:41,550 , Kas būtībā saka, ka vienība iekšpusē šo tekstlodziņā, 305 00:19:41,550 --> 00:19:45,000 tieši saistīt, ka ar mainīgo new_todo_description 306 00:19:45,000 --> 00:19:47,870 ietvaros JavaScript kodu. 307 00:19:47,870 --> 00:19:51,600 Tas ir ļoti spēcīgs, jo man nav skaidri doties uz 308 00:19:51,600 --> 00:19:53,310 DOM, lai iegūtu šo informāciju. 309 00:19:53,310 --> 00:19:56,250 Man nav ko teikt document.getElementById. 310 00:19:56,250 --> 00:19:58,750 Man nav jāizmanto jQueries piemēram DOM piekļuvi. 311 00:19:58,750 --> 00:20:03,280 Es varētu saistīt to ar mainīgo, un tad, kad es mainīt mainīgā 312 00:20:03,280 --> 00:20:07,400 ietvaros JavaScript tas tur sinhronizācijā ar HTML, 313 00:20:07,400 --> 00:20:11,640 tā, ka vienkāršo procesu, kam iet uz priekšu un atpakaļ starp diviem. 314 00:20:11,640 --> 00:20:18,260 Vai tas ir jēga? 315 00:20:18,260 --> 00:20:22,060 >> Un paziņojums nav HTML piekļuves kodu. 316 00:20:22,060 --> 00:20:27,760 Mēs esam tikko veikts HTML jaudīgāki, 317 00:20:27,760 --> 00:20:32,070 un tagad, piemēram, mēs varam darīt lietas, piemēram, tas, 318 00:20:32,070 --> 00:20:38,610 piemēram, kad jūs noklikšķiniet uz to, zvanīt šo funkciju ietvaros todos.js, 319 00:20:38,610 --> 00:20:43,410 un mēs varētu darīt, ka pirms, bet ir arī citas lietas, piemēram, šo ng-modeli, 320 00:20:43,410 --> 00:20:47,020 un paziņojums šo NG-atkārtot. 321 00:20:47,020 --> 00:20:51,520 Ko jūs domājat, ka tas dara? 322 00:20:51,520 --> 00:20:54,390 Lūk, mūsu Nekārtots sarakstu, no pirms tam. 323 00:20:54,390 --> 00:20:56,470 Mums ir LU tagus, 324 00:20:56,470 --> 00:21:03,710 bet es kādreiz padarot šo sarakstu iekšpusē JavaScript kodu? 325 00:21:03,710 --> 00:21:09,280 Es neesmu nekad skaidri padarot šo sarakstu. 326 00:21:09,280 --> 00:21:11,580 Kā tas darbojas? 327 00:21:11,580 --> 00:21:16,410 Nu, kā Stūra accomplishes tas ir, to sauc atkārtotājs. 328 00:21:16,410 --> 00:21:22,760 Būtībā tas saka, ka es vēlos, lai izdrukāt šo HTML 329 00:21:22,760 --> 00:21:26,240 par katru todo iekšpusē manu TODOS masīva. 330 00:21:26,240 --> 00:21:31,850 Iekšpusē todos.jr ir todos masīvs tieši šeit, 331 00:21:31,850 --> 00:21:37,910 un tas pateiks Stūra iet caur šo masīvu, un par katru elementu jūs redzat 332 00:21:37,910 --> 00:21:41,390 Es gribu, lai jūs izdrukāt šo HTML. 333 00:21:41,390 --> 00:21:44,620 Tas ir sava veida laba, jo es varu tikai darīt 334 00:21:44,620 --> 00:21:47,760 bez uzrakstīt uz cilpas, 335 00:21:47,760 --> 00:21:52,250 kas par to-do sarakstu, kas bija tikai 30 koda rindiņas 336 00:21:52,250 --> 00:21:54,700 nedrīkst būt daudz izdevīgāk lieta, 337 00:21:54,700 --> 00:22:01,240 bet, ja jums ir liels projekts, tas var kļūt ļoti ērti. 338 00:22:01,240 --> 00:22:06,100 >> Tas ir viens risinājums, lai šo problēmu, padarot HTML jaudīgākas, 339 00:22:06,100 --> 00:22:10,820 un kas ļauj mums saglabāt JavaScript un HTML sinhronizēti. 340 00:22:10,820 --> 00:22:13,220 Ir arī citi iespējamie veidi, kā atrisināt šo problēmu, 341 00:22:13,220 --> 00:22:15,320 un ne katrs sistēmu tas. 342 00:22:15,320 --> 00:22:17,720 Ne katrs sistēma darbojas šajā virzienā. 343 00:22:17,720 --> 00:22:19,490 Dažas sistēmas ir dažādas pieejas, 344 00:22:19,490 --> 00:22:23,310 un jūs varat atrast, ka jums patīk kodēšanas vienā sistēmā pār otru. 345 00:22:23,310 --> 00:22:26,160 Apskatīsim vēl vienu. 346 00:22:26,160 --> 00:22:30,060 Tas ir to-do sarakstu kodēti izveidots ietvaros sauc par mugurkaulu. 347 00:22:30,060 --> 00:22:33,250 Es esmu gatavojas iet caur šo ātri. 348 00:22:33,250 --> 00:22:38,300 Es sāktu ar HTML, pirms mēs ejam tur. 349 00:22:38,300 --> 00:22:40,290 Vienu sekundi. 350 00:22:40,290 --> 00:22:43,950 Sākot ar HTML, kā jūs ievērosiet, mūsu HTML ir ļoti līdzīgs 351 00:22:43,950 --> 00:22:50,000 , kāda tā bija agrāk, tāpēc ne pārāk daudz jauna par šo priekšā. 352 00:22:50,000 --> 00:22:55,410 Bet mūsu js fails ir nedaudz atšķirīgs. 353 00:22:55,410 --> 00:23:00,360 Mugurkauls veida ir šī ideja, vai ir balstīts uz ideju 354 00:23:00,360 --> 00:23:04,750 tas, ko mēs darām ar daudz, teiksim, mūsu JavaScript projekti 355 00:23:04,750 --> 00:23:09,110 ir jādomā par modeļiem un kolekcijām šiem modeļiem. 356 00:23:09,110 --> 00:23:12,510 Tas varētu būt, piemēram, foto un kolekcijas fotogrāfijas, 357 00:23:12,510 --> 00:23:16,230 vai ideja drauga un kolekcijas draugiem. 358 00:23:16,230 --> 00:23:20,700 Un, nereti, kad mēs esam Programmēšana JavaScript programmas 359 00:23:20,700 --> 00:23:25,340 mēs sava veida atspoguļo ideju par kolekciju draugu 360 00:23:25,340 --> 00:23:29,500 kaut JavaScript, un mugurkauls dod mums šo slāni 361 00:23:29,500 --> 00:23:33,040 uz augšu JavaScript pastāvošiem masīviem un objektiem 362 00:23:33,040 --> 00:23:38,300 darīt jaudīgākas lietas, ar to vieglāk. 363 00:23:38,300 --> 00:23:41,870 >> Šeit es esmu noteikti to-do modeli, 364 00:23:41,870 --> 00:23:44,630 un jums nav jāuztraucas pārāk daudz par sintaksi, 365 00:23:44,630 --> 00:23:48,730 , bet paziņo, ka tas, kas ir viens no šīs īpašības? 366 00:23:48,730 --> 00:23:53,190 Tā ir noklusējuma lauku. 367 00:23:53,190 --> 00:23:56,640 Mugurkauls man ļauj noteikt jau pie nūja 368 00:23:56,640 --> 00:24:00,190 jebkura jauna to-do, ka es varu izveidot nāksies šos noklusējumus. 369 00:24:00,190 --> 00:24:04,100 Tagad es varu pielāgot, taču to var norādīt noklusējuma 370 00:24:04,100 --> 00:24:07,220 ir jauka, un tas ir sava veida ērti, jo tas nav kaut kas ir, piemēram, 371 00:24:07,220 --> 00:24:10,430 raksturīga JavaScript, un tagad man nav skaidri 372 00:24:10,430 --> 00:24:12,430 saka, ka todos ir nepilnīgi. 373 00:24:12,430 --> 00:24:19,190 Es varu teikt, tiesības pie nūja, ka todos gribam būt atzīmēts kā nepilnīgu. 374 00:24:19,190 --> 00:24:21,300 Paziņojums, tad kas tas ir? 375 00:24:21,300 --> 00:24:25,520 Tagad man ir to-do sarakstu, un tas ir kolekcija. 376 00:24:25,520 --> 00:24:30,960 Paziņojums lauku saistīts ar to, saka modelis Todo. 377 00:24:30,960 --> 00:24:33,390 Tas ir mans veids, kā stāsta mugurkaulu, kas 378 00:24:33,390 --> 00:24:37,350 Es esmu gatavojas domāt par kolekciju šo atsevišķo todos. 379 00:24:37,350 --> 00:24:42,140 Tas ir būtībā modeļa struktūras, manā programmā. 380 00:24:42,140 --> 00:24:44,980 Šeit man ir šī ideja kolekcijas, 381 00:24:44,980 --> 00:24:48,960 un būtībā tos priekšmetus, kuri šajā kolekcijā ir viss būs šie todos, 382 00:24:48,960 --> 00:24:51,910 un kas ir ļoti dabisks šajā nozīmē 383 00:24:51,910 --> 00:24:59,890 jo man ir todos, un man ir tos kolekcijā. 384 00:24:59,890 --> 00:25:02,940 >> Apskatīsim nedaudz vairāk par to. 385 00:25:02,940 --> 00:25:05,900 Šeit ir mugurkauls skats. 386 00:25:05,900 --> 00:25:08,890 Otra lieta, ka mugurkauls saka, ir tas, ka 387 00:25:08,890 --> 00:25:14,660 daudz modeļiem, kas jūs domājat par vai pat kolekcijas 388 00:25:14,660 --> 00:25:19,150 būs nepieciešams, lai būtu kaut kādā veidā tiek parādīts. 389 00:25:19,150 --> 00:25:21,900 Mums ir nepieciešams, lai padarītu ka to-do sarakstu, 390 00:25:21,900 --> 00:25:25,460 un tas nebūtu jauki, ja mēs varētu nodrošināt katram modelim 391 00:25:25,460 --> 00:25:28,390 vai saistīt ar katru modeli, šo viedokli 392 00:25:28,390 --> 00:25:34,020 , kas ļauj mums, lai es domāju, savienotu abus kopā? 393 00:25:34,020 --> 00:25:38,320 Tā kā pirms mums bija jāizmanto, lai cilpa, kas darbotos caur 394 00:25:38,320 --> 00:25:41,130 katrs mūsu sarakstā todo, un pēc tam to izdrukāt šeit 395 00:25:41,130 --> 00:25:44,650 mēs varam būtībā savienot to ar šo modeli. 396 00:25:44,650 --> 00:25:47,550 Tas ir, lai-do view. 397 00:25:47,550 --> 00:25:50,550 Tas ir saistīts ar ToDo mēs konstatējām agrāk. 398 00:25:50,550 --> 00:25:54,940 Tagad katrs todo tiek Displeja vai renderable 399 00:25:54,940 --> 00:25:56,960 Ar šo uzdevumu skatu. 400 00:25:56,960 --> 00:25:59,440 Paziņojums dažas no jomām. 401 00:25:59,440 --> 00:26:05,880 Ko jūs domājat, ka tas tagName ir, tagName: li? 402 00:26:05,880 --> 00:26:09,790 Atcerēties no pirms, kad mēs vēlējāmies, lai padarītu par todo 403 00:26:09,790 --> 00:26:16,700 mums būtu skaidri pārī mūsu todos ar šo li tagu. 404 00:26:16,700 --> 00:26:21,080 Tagad mēs esam sakot, ka, ja tas todo gatavojas dzīvot 405 00:26:21,080 --> 00:26:25,250 būs iekšā no li tag. 406 00:26:25,250 --> 00:26:31,440 Un tagad mēs esam arī asociējot notikumiem ar mūsu todos. 407 00:26:31,440 --> 00:26:34,320 >> Katram todo ir šo vienu notikumu. 408 00:26:34,320 --> 00:26:38,480 Ja noklikšķināt diezgan daudz pārslēgšanas poga, ka tas, ko es saku, ka, 409 00:26:38,480 --> 00:26:43,080 tad būtībā atzīmējiet todo kā pretstatu, kas tas bija pirms 410 00:26:43,080 --> 00:26:45,890 un tad atkal padarīt pieteikumu. 411 00:26:45,890 --> 00:26:47,810 Tas ir veida līdzīga kodu pirms. 412 00:26:47,810 --> 00:26:50,730 Atceros, kad mēs atzīmējām kā nu pretī, vai- 413 00:26:50,730 --> 00:26:52,410 un tad mēs atkal padarīti to. 414 00:26:52,410 --> 00:26:57,750 , Bet paziņojums, tagad šo notikumu izmanto, lai būtu kaut kas bija HTML. 415 00:26:57,750 --> 00:26:59,640 Tā sēdēja tur. 416 00:26:59,640 --> 00:27:01,410 Poga bija par klikšķi. 417 00:27:01,410 --> 00:27:05,310 Kad jūs noklikšķiniet uz pogas, tas veida dara stuff 418 00:27:05,310 --> 00:27:07,210 izveide, todo būt nepilnīga. 419 00:27:07,210 --> 00:27:11,180 Šeit mēs esam saistīti, ka notikums noklikšķinot uz šo pārslēgšanas pogas 420 00:27:11,180 --> 00:27:15,830 un atpakaļgaitā, vai tas ir ieslēgts vai izslēgts šim viedoklim. 421 00:27:15,830 --> 00:27:20,480 >> Tas ir jauks veids, kā izveidot šo notikumu tā, ka tas ir ļoti cieši saistīta 422 00:27:20,480 --> 00:27:26,980 ar šo viedokli, un tāpēc paziņojums šo vienu vairāk. 423 00:27:26,980 --> 00:27:31,050 Man ir šī apmetuma metodi, un mums nav iet caur detaļām. 424 00:27:31,050 --> 00:27:33,650 Tas ir sava veida līdzīgs tam, ko mums bija pirms tam, 425 00:27:33,650 --> 00:27:36,070 , bet paziņojums, es neesmu looping, izmantojot neko. 426 00:27:36,070 --> 00:27:40,700 Es neesmu drukāšanu, ka ul tagu, kas ir sava veida sakot, es esmu gatavojas, lai izdrukātu visus elementus. 427 00:27:40,700 --> 00:27:46,610 Es esmu sniedzot funkcionalitāti, lai padarītu šo vienu uzdevumu objektu. 428 00:27:46,610 --> 00:27:49,400 Tas ir ļoti spēcīgs koncepciju, jo būtībā 429 00:27:49,400 --> 00:27:53,600 mūsu to-do saraksts sastāv no visiem šiem Todos, un, ja mēs varam būtībā norādīt 430 00:27:53,600 --> 00:27:56,890 veids, kā padarīt vienu no šiem todos 431 00:27:56,890 --> 00:28:04,230 tad mēs varam būt mūsu spēcīgs mugurkauls per se izslēdz jebkādu no todos 432 00:28:04,230 --> 00:28:07,760 zvanot apmetuma metodi atsevišķiem todos. 433 00:28:07,760 --> 00:28:14,180 Tas ir jēdziens, kas ir noderīgs šeit. 434 00:28:14,180 --> 00:28:18,160 Tagad labs jautājums uzdot ir, kā ir šis pieteikums tiek likts kopā? 435 00:28:18,160 --> 00:28:21,200 Tāpēc, ka mums ir iespēja, lai padarītu vienu todo, 436 00:28:21,200 --> 00:28:23,860 bet kā mēs iegūtu priekšstatu par vairāku todos? 437 00:28:23,860 --> 00:28:25,100 >> Pieņemsim to apskatīt to. 438 00:28:25,100 --> 00:28:27,100 Šī ir pēdējā daļa. 439 00:28:27,100 --> 00:28:29,740 Paziņojums mums ir to-do sarakstu skats šeit, 440 00:28:29,740 --> 00:28:34,440 un pamanāt, ka tas ir arī viedoklis. 441 00:28:34,440 --> 00:28:36,970 Un, lai iet vairāk nekā pāris lietas, 442 00:28:36,970 --> 00:28:45,280 šī inicializēt metode tiks izsaukta, kad mēs pirmo reizi izveidot šo to-do sarakstu. 443 00:28:45,280 --> 00:28:52,630 Kā jūs varat redzēt, tas ir tāpat kā radīt to-do sarakstu un saista to ar šo skatu. 444 00:28:52,630 --> 00:28:57,860 Un tad es pievieno funkcijas šeit, lai būtībā, kad jūs pievienojiet objektu- 445 00:28:57,860 --> 00:29:01,440 Tas ir līdzīgs addItem metodi, mēs redzējām pirms- 446 00:29:01,440 --> 00:29:07,430 Es esmu gatavojas izveidot jaunu todo objektu, un paziņojums, es esmu faktiski aicinot 447 00:29:07,430 --> 00:29:13,080 šī jaunā Todo metode, tāpēc tas tiek nodrošināts ar mugurkaulu, 448 00:29:13,080 --> 00:29:16,010 un es varu nodot manā īpašības šeit. 449 00:29:16,010 --> 00:29:23,710 Un tagad katrs todo, ka es izveidoju izmantojot šo saņemsiet, ka funkcijas, kuras mēs redzējām pirms tam. 450 00:29:23,710 --> 00:29:28,140 Paziņojums Es esmu klīringa no tekstlodziņa pirms-maza sīkumiem- 451 00:29:28,140 --> 00:29:32,900 un tad es esmu pievienojot šo kolekciju. 452 00:29:32,900 --> 00:29:37,630 >> Tas gandrīz šķiet dīvaini, jo pirms mēs tikko bija to darīt todos.push, 453 00:29:37,630 --> 00:29:43,310 un tad mēs tika veikti, un tas var izrādīties daudz sarežģītāka par šo konkrēto projektu, 454 00:29:43,310 --> 00:29:46,980 un jūs varat atrast, ka mugurkaulu vai pat Stūra vai jebkuru citu struktūru 455 00:29:46,980 --> 00:29:50,790 neapmierina jūsu konkrēto projektu, bet es domāju, ka tas ir svarīgi domāt par 456 00:29:50,790 --> 00:29:54,100 ko tas nozīmē plašākā mērogā lielākiem projektiem, 457 00:29:54,100 --> 00:29:56,610 jo, ja mums bija lielāks projekts, kur mūs pārstāv 458 00:29:56,610 --> 00:30:00,860 daži patiešām sarežģītu vākšanu, kaut kas dziļāks nekā tikai to-do sarakstu, 459 00:30:00,860 --> 00:30:04,490 teiksim kādu draugu sarakstu vai kaut kas tamlīdzīgs, tas varētu nonākt parocīgs 460 00:30:04,490 --> 00:30:09,620 tāpēc, ka mēs varētu organizēt savu kodu patiesi ērtā veidā, 461 00:30:09,620 --> 00:30:12,550 tādā veidā, kas padara to vieglāk, lai kāds cits 462 00:30:12,550 --> 00:30:16,820 kurš gribēja uzņemt projektu, lai izveidotu pēc. 463 00:30:16,820 --> 00:30:21,450 Jūs varat redzēt, ka tas sniedz daudz struktūru. 464 00:30:21,450 --> 00:30:26,580 Un tad es esmu aicinot padarīt šo addItem. 465 00:30:26,580 --> 00:30:31,050 Padarīt, kā jūs varat redzēt, un jums nav saprast šo pilnu sintaksi, 466 00:30:31,050 --> 00:30:37,790 bet būtībā par katru modeli, tas notiek, lai izsauktu individuālo apmetuma metodi. 467 00:30:37,790 --> 00:30:41,500 Tas ir sava veida, ja tas nāk no. 468 00:30:41,500 --> 00:30:44,140 Pieņemsim tikai norādīt, kā padarīt atsevišķas todos, 469 00:30:44,140 --> 00:30:47,310 un tad pieņemsim līme tos kopā kopumā. 470 00:30:47,310 --> 00:30:49,810 Bet tas ir veids, kā abstrakcijas, 471 00:30:49,810 --> 00:30:55,470 tāpēc, ka es varētu mainīt veidu, kā es izlemt, lai padarītu atsevišķas todos, 472 00:30:55,470 --> 00:30:57,940 , un es nebūtu jāmaina kāds no šo kodu. 473 00:30:57,940 --> 00:31:00,700 Tas ir veida atdzist. 474 00:31:00,700 --> 00:31:08,540 >> Vai kāds ir kādi jautājumi par JavaScript sistēmas? 475 00:31:08,540 --> 00:31:14,310 [Studentu dzirdams jautājums] 476 00:31:14,310 --> 00:31:16,050 Ak, protams, tas ir liels jautājums. 477 00:31:16,050 --> 00:31:19,080 Jautājums bija, kā bija man ietver pamatprincipus? 478 00:31:19,080 --> 00:31:22,970 Lielākā daļa JavaScript ietvari ir būtībā tikai js failus 479 00:31:22,970 --> 00:31:25,740 ka jūs varat iekļaut augšpusē jūsu kodu. 480 00:31:25,740 --> 00:31:29,830 Paziņojums par galvas daļu no mana HTML man ir visas šīs skriptu tagus, 481 00:31:29,830 --> 00:31:34,250 un galīgais skripts tag ir kods, kas mēs esam rakstiski. 482 00:31:34,250 --> 00:31:38,820 Un tad 3 pamatnosacījumi kodi ir tieši tā arī skriptu tagus. 483 00:31:38,820 --> 00:31:42,110 Es esmu arī viņus no tā, ko sauc CDN, 484 00:31:42,110 --> 00:31:46,200 kas ļauj man, lai saņemtu to no kāds cits šajā brīdī 485 00:31:46,200 --> 00:31:57,930 bet katram sistēma ir tas, jūs varat diezgan daudz atrast saturu 486 00:31:57,930 --> 00:32:03,540 par īpašu JavaScript bibliotēkas pieejama par dažiem CDN vai kaut kas tamlīdzīgs, 487 00:32:03,540 --> 00:32:05,570 un tad jūs varat iekļaut šo skriptu tagus. 488 00:32:05,570 --> 00:32:07,600 Vai tas ir jēga? 489 00:32:07,600 --> 00:32:09,500 Atdzist. 490 00:32:09,500 --> 00:32:11,730 >> Tie ir 2 dažādas pieejas. 491 00:32:11,730 --> 00:32:14,640 Tie ir ne tikai pieejas šīs problēmas risināšanai. 492 00:32:14,640 --> 00:32:17,080 Ir daudz dažādas lietas, ka 493 00:32:17,080 --> 00:32:19,490 kāds varētu darīt, un ir daudzas sistēmas, kas tur. 494 00:32:19,490 --> 00:32:23,300 Stūraina un mugurkauls nav pateikt visu stāstu. 495 00:32:23,300 --> 00:32:26,370 Good luck ar savu gala projektiem, un liels paldies. 496 00:32:31,960 --> 00:32:35,000 [CS50.TV]