1 00:00:00,000 --> 00:00:02,000 [Powered by Google Translate] [Seminar] [JavaScript Altyapıları: niyə və necə] 2 00:00:02,000 --> 00:00:04,000 [Kevin Schmid] [Harvard Universiteti] 3 00:00:04,000 --> 00:00:06,960 [Bu CS50 edir.] [CS50.TV] 4 00:00:06,960 --> 00:00:10,630 >> Hi, everybody. JavaScript Altyapıları seminar xoş gəlmisiniz. 5 00:00:10,630 --> 00:00:14,910 , My name Kevin və mən bu gün JavaScript çərçivəsində söhbət arkasýndayým 6 00:00:14,910 --> 00:00:20,400 və bu seminarın məqsədi, siz almaq demək, özlüyündə müəyyən bir çərçivə master deyil 7 00:00:20,400 --> 00:00:23,810 lakin çərçivəsində bir neçə üçün bir geniş tətbiqi vermək 8 00:00:23,810 --> 00:00:27,150 və biz heç bir çərçivə istifadə etmək istəyirəm ki, niyə göstərir. 9 00:00:27,150 --> 00:00:31,060 >> Bunu əvvəl, mən JavaScript bir az fon təmin edəcəyik 10 00:00:31,060 --> 00:00:33,750 , sonra oradan almaq lazımdır. 11 00:00:33,750 --> 00:00:36,270 Biz siyahısı həyata başlamaq olacaq. 12 00:00:36,270 --> 00:00:39,330 Burada bu gün bizim vəzifəmiz siyahısı var. 13 00:00:39,330 --> 00:00:41,990 Bu funny növü var. Biz JavaScript bir siyahısı həyata lazımdır. 14 00:00:41,990 --> 00:00:45,110 Bu ki, bizim ilk qolu, bu kimi baxmaq nə edir. 15 00:00:45,110 --> 00:00:47,160 Bunu etmək üçün bir çərçivə istifadə etmək niyyətində deyilik. 16 00:00:47,160 --> 00:00:51,930 Biz kodu JavaScript gedən və Ediləcək işlər siyahısına çalışması üçün edirik. 17 00:00:51,930 --> 00:00:54,370 Sonra bir çərçivə istifadə etmədən dizayn yaxşılaşdırılması olacaq. 18 00:00:54,370 --> 00:00:57,190 Biz yalnız JavaScript tək nə edə bilər müxtəlif şeyi müzakirə olacaq 19 00:00:57,190 --> 00:01:00,650 bizim etmək üçün işlər bir az daha yaxşı dizayn siyahısı. 20 00:01:00,650 --> 00:01:02,490 Sonra, bəzi jQuery atmaq olacaq 21 00:01:02,490 --> 00:01:05,030 və sonra biz siyahısı eyni baxmaq olacaq 22 00:01:05,030 --> 00:01:07,170 yalnız müxtəlif çərçivəsində həyata keçirilən və biz müzakirə edəcəyik 23 00:01:07,170 --> 00:01:09,280  yol boyunca lehte ve eksiklikleri. 24 00:01:09,280 --> 00:01:12,040 >> Nin siyahısı ki, həyata başlamaq edək. 25 00:01:12,040 --> 00:01:14,270 Gəlin biz bu HTML sunulur deyirlər. 26 00:01:14,270 --> 00:01:16,620 Mən bu bir az daha kiçik etmək gedirəm. 27 00:01:16,620 --> 00:01:19,300 Gördüyünüz kimi, mən Todo deyir ki, bir az mövzu var 28 00:01:19,300 --> 00:01:21,740 Mən todo təsviri daxil edə bilər və bir az qutusu 29 00:01:21,740 --> 00:01:26,990 və sonra, belə ki, bu siyahıya yeni todo daxil cəhd yeni bir maddə düyməsini bildirin. 30 00:01:26,990 --> 00:01:31,000 Bir JavaScript çərçivəsində seminar ver 31 00:01:31,000 --> 00:01:33,090 və mən yeni bir maddə hit edirəm. 32 00:01:33,090 --> 00:01:35,730 Mən həyata deyir ki, bu JavaScript uyarı almaq. 33 00:01:35,730 --> 00:01:37,560 Biz bunu həyata keçirmək üçün var. 34 00:01:37,560 --> 00:01:41,490 HTML və JavaScript həm də bu üçün kod kontrol edək. 35 00:01:41,490 --> 00:01:43,260 Burada bizim HTML var. 36 00:01:43,260 --> 00:01:45,500 Burada göründüyü kimi, burada kiçik Bütün başlığı var. 37 00:01:45,500 --> 00:01:47,620 Ki, üst edən Cəsur şey idi 38 00:01:47,620 --> 00:01:50,690 və sonra biz tutucu ilə giriş qutusuna var 39 00:01:50,690 --> 00:01:59,460 və sonra bu funksiya addTodo edir ki, bu düyməni müəyyən bir atributu var. 40 00:01:59,460 --> 00:02:05,460 Heç kimə signifying yerləşir basın nə tapmaq istəyir? 41 00:02:05,460 --> 00:02:07,390 [Tələbə işitilemez cavab] 42 00:02:07,390 --> 00:02:09,289 Yaxşı, ki, basın, bir hadisə kimi sort edir 43 00:02:09,289 --> 00:02:12,120 siçan tıklayarak yalnız bir hadisə və nə biz bunu edirik olduğu kimi 44 00:02:12,120 --> 00:02:16,890 ki, funksiyası yerinə bu 'düyməsinə tıklayarak halda tying edirik edir. 45 00:02:16,890 --> 00:02:21,700 AddTodo ki, 'düyməsinə tıklayarak bu olay işleyicisi edir. 46 00:02:21,700 --> 00:02:25,010 >> Gördüyünüz kimi, mən yeni bir maddə düyməsini basın zaman 47 00:02:25,010 --> 00:02:29,940 haqqında klik hadisə atəş olur, və bu funksiya adlı olur. 48 00:02:29,940 --> 00:02:33,170 Funksiyası baxaq. 49 00:02:33,170 --> 00:02:36,260 Gördüyünüz kimi, burada indiyə qədər mənim JavaScript kodu var. 50 00:02:36,260 --> 00:02:41,280 Mən üst mənim siyahısı üçün qlobal data strukturu. 51 00:02:41,280 --> 00:02:44,060 Bu bir sıra kimi görünür. Bu, sadəcə boş sıra var. 52 00:02:44,060 --> 00:02:47,100 Və sonra, biz əvvəllər gördüm ki, addTodo funksiyası var 53 00:02:47,100 --> 00:02:50,740 və orada kod yalnız xətti bu siqnalı edir. 54 00:02:50,740 --> 00:02:55,730 Bu, mənim həyata siqnallar, sonra mən tərəfdən 2 vəzifələr var. 55 00:02:55,730 --> 00:02:58,790 Mən ki, qlobal data structure üçün todo əlavə etmək 56 00:02:58,790 --> 00:03:01,860 sonra da bir-do siyahısı çəkmək istəyirəm. 57 00:03:01,860 --> 00:03:06,360 Heç də yalnız hələ Bəzəkli, lakin JavaScript siz tanış ola bilər 58 00:03:06,360 --> 00:03:12,370 mən yavaş getmək və yol JavaScript əsasları nəzərdən keçirmək üçün gedirəm. 59 00:03:12,370 --> 00:03:15,490 >> Bu bir shot verim. 60 00:03:15,490 --> 00:03:21,130 Gəlin istifadəçi bu qutusuna bir şey olur deyirlər. 61 00:03:21,130 --> 00:03:23,360 Mən yalnız burada, mətn bir şey yazılmış. 62 00:03:23,360 --> 00:03:27,620 Necə JavaScript vasitəsilə giriş, mətn sıralarım? 63 00:03:27,620 --> 00:03:32,500 Ki JavaScript saxla, onun fundamental xüsusiyyətlərindən biri, bu, bizə verir ki, 64 00:03:32,500 --> 00:03:34,670 DOM bu programmatic çıxış. 65 00:03:34,670 --> 00:03:40,670 Bu, bizim bu faktiki HTML elementləri və onların xassələri daxil olmaq üçün imkan verir. 66 00:03:40,670 --> 00:03:43,430 Biz çılpaq bones JavaScript bunu yolu 67 00:03:43,430 --> 00:03:51,360 Biz, həqiqətən, getElementByID adlı JavaScript funksiyası istifadə edə bilərsiniz edir. 68 00:03:51,360 --> 00:03:55,140 Mən bəzi dəyişən orada tipli olan mətn saxlamaq istəyirəm 69 00:03:55,140 --> 00:03:58,350 Mən new_todo adlı yeni dəyişən demək gidiyorum 70 00:03:58,350 --> 00:04:01,980 və mən element almaq üçün gedirəm. 71 00:04:01,980 --> 00:04:06,330 Bu, bir funksiyası var. GetElementByID. 72 00:04:06,330 --> 00:04:11,580 İndi, mən ID tərəfindən element alıram, mən ki, mətn qutusu ID ehtiyac 73 00:04:11,580 --> 00:04:15,860 mən şəxsiyyət new_todo_description təqdim etdik. 74 00:04:15,860 --> 00:04:18,399 Mən bir element almaq üçün gedirəm bilərsiniz. 75 00:04:18,399 --> 00:04:23,880 Bu almaq üçün hansı ID müəyyən etmək, bu funksiyanı mənim dəlil var. 76 00:04:23,880 --> 00:04:28,110 Və belə ki, HTML bir element var və bu xassələri vardır. 77 00:04:28,110 --> 00:04:30,650 Bu gördüm. Onlar atributları istəyirik. 78 00:04:30,650 --> 00:04:37,090 Istifadəçi girişi saxlayan mətn element xüsusiyyətini dəyəri adlanır. 79 00:04:37,090 --> 00:04:40,860 I new_todo adlı dəyişən indi mətn qutusuna dəyəri qurtardı. 80 00:04:40,860 --> 00:04:45,040 İndi bu dəyişən üçün programmatic imkanına malik olan cür sərin edir 81 00:04:45,040 --> 00:04:49,200 İndi mən nə edə bilərsiniz, çünki mən siyahısı əlavə bilər. 82 00:04:49,200 --> 00:04:52,870 >> Biz bu edəcəyini yolu JavaScript və bu tanış değilseniz narahat olmayın, 83 00:04:52,870 --> 00:04:57,010 ancaq onun vasitəsilə davam todos.push edir 84 00:04:57,010 --> 00:05:00,130 up burada qlobal data structure adı var ki, 85 00:05:00,130 --> 00:05:04,450 və I new_todo təkan gedirəm. 86 00:05:04,450 --> 00:05:09,120 Indi mən JavaScript onu əlavə, çünki bu böyük 87 00:05:09,120 --> 00:05:11,280 ki, işlər siyahısı nümayəndəliyi. 88 00:05:11,280 --> 00:05:15,170 Amma indi mən necə HTML geri alıram? 89 00:05:15,170 --> 00:05:18,560 Mən bunu geri itələmək və düzmək üçün bir yol tapmaq lazımdır. 90 00:05:18,560 --> 00:05:21,830 Başqa sözlə, mən növ bu çəkmək lazımdır. 91 00:05:21,830 --> 00:05:26,060 Biz nə olacaq biz Ediləcək işlər siyahısına çəkmək olacaq edir. 92 00:05:26,060 --> 00:05:29,270 Mən bu sayfada digər HTML güncellemeniz lazımdır 93 00:05:29,270 --> 00:05:32,040 Gördüyünüz kimi, mən burada, bu kiçik konteyner tərk etdik 94 00:05:32,040 --> 00:05:36,840 kimin ID todos edir Bu səhifə divider, 95 00:05:36,840 --> 00:05:40,870 və mən orada Ediləcək işlər siyahısına qoymaq üçün gedirəm. 96 00:05:40,870 --> 00:05:47,240 Əvvəl siyahısı köhnə orada idi, demək, çünki onu təmizləmək üçün gedirəm. 97 00:05:47,240 --> 00:05:49,560 Mən yenə ID ki element alıram 98 00:05:49,560 --> 00:05:54,530 və mən ki, element daxili HTML daxil olmaq alıram 99 00:05:54,530 --> 00:05:58,010 mən ki, təmizləmək üçün gedirəm. 100 00:05:58,010 --> 00:06:05,510 Olduğu kimi, biz bu kodu tərk, biz, bir boş bir şey görmək istədiyiniz 101 00:06:05,510 --> 00:06:10,410 və indi mənim yeni siyahısı göstərilməsi başlamaq istəyirəm. 102 00:06:10,410 --> 00:06:12,870 Mən əsasən mənim siyahısı silmək üçün gedirəm. 103 00:06:12,870 --> 00:06:18,180 >> İndi todos div daxili HTML daxilində, tamamilə aydındır 104 00:06:18,180 --> 00:06:20,060 və indi mən siyahısına əlavə başlamaq lazımdır. 105 00:06:20,060 --> 00:06:23,890 Mən əlavə etmək istədiyiniz ilk şey, unordered siyahısı tag edir 106 00:06:23,890 --> 00:06:33,890 olan əsasən bu unordered siyahı start olduğunu bildirir. 107 00:06:33,890 --> 00:06:39,770 İndi mənim todos array hər element üçün edirəm ki, HTML daxili çap etmək istəyirəm. 108 00:06:39,770 --> 00:06:43,710 Mən bu siyahı altına onu əlavə etmək istəyirəm. 109 00:06:43,710 --> 00:06:49,040 Just C kimi, mən loop üçün istifadə edə bilərsiniz, və mən siyahısının başında gidiyorum 110 00:06:49,040 --> 00:06:54,140 element, 0, mən siyahısı uzunluğu bütün yol getmək üçün gedirəm. 111 00:06:54,140 --> 00:07:01,100 Biz əslində uzunluğu əmlakdan istifadə JavaScript bir sıra uzunluğu əldə edə bilərsiniz. 112 00:07:01,100 --> 00:07:03,420 Əsasən Burada daxilində çox oxşar bir şey etmək gidiyorum 113 00:07:03,420 --> 00:07:05,600 ki element çap. 114 00:07:05,600 --> 00:07:12,970 Mən todos div ki, daxili HTML əmlak, gedə bilərsiniz 115 00:07:12,970 --> 00:07:17,560 və mən bu yeni siyahısı maddə əlavə etmək üçün gedirəm, və əhatə olacaq 116 00:07:17,560 --> 00:07:25,390 Bu li tag, və mən + operatoru ilə concatenate gidiyorum 117 00:07:25,390 --> 00:07:28,040 ki, mənim todos serialın Ith element var 118 00:07:28,040 --> 00:07:32,380 və sonra edirəm ki, tag yaxın gedirəm. 119 00:07:32,380 --> 00:07:36,240 İndi hər bir element üçün biz yeni siyahısını giriş əlavə edəcəyik. 120 00:07:36,240 --> 00:07:48,700 Və sonra biz həqiqətən etmək lazımdır ki, bütün etiket off yaxındır. 121 00:07:48,700 --> 00:07:52,820 Mən yalnız siyahısı tag unordered off bağlamaq lazımdır. 122 00:07:52,820 --> 00:07:55,490 >> Ki, işləri necə bir hiss almaq edirsiniz? 123 00:07:55,490 --> 00:07:57,700 Bu, bütün siyahısı açılır. 124 00:07:57,700 --> 00:08:01,080 Bu, todos siyahıdan siyahısına fərdi elementlər əlavə edir 125 00:08:01,080 --> 00:08:05,470 və sonra bütün siyahısı bağlayır və bu, mənim addTodo funksiyanın. 126 00:08:05,470 --> 00:08:09,590 Mən əsasən mətn qutusuna gələn todo əldə başlayır. 127 00:08:09,590 --> 00:08:18,950 Mən todos sıra ki, əlavə, sonra mən Ediləcək işlər siyahısına yenidən göstərir. 128 00:08:18,950 --> 00:08:21,520 İndi mənim siyahısına maddələr əlavə edə bilərsiniz. 129 00:08:21,520 --> 00:08:24,620 Bu cür maraqlı, çünki kodu yalnız bir neçə xətləri ilə 130 00:08:24,620 --> 00:08:28,240 biz əsasən biz maddələr əlavə edə bilərsiniz bir siyahısı etdik. 131 00:08:28,240 --> 00:08:30,050 Böyük. 132 00:08:30,050 --> 00:08:34,480 Bu JavaScript bir əsas tətbiqi növü var. 133 00:08:34,480 --> 00:08:36,179 , Indi üçün sintaksis haqqında çox narahat olmayın 134 00:08:36,179 --> 00:08:38,130 lakin bu konseptual haqqında düşünürəm. 135 00:08:38,130 --> 00:08:40,539 Biz bəzi HTML idi. 136 00:08:40,539 --> 00:08:45,310 Biz daxil işlər bəndinə əsasən icazə users əlavə etmək sayfada mətn qutusu idi. 137 00:08:45,310 --> 00:08:49,210 Və sonra ki, mətn qutusuna ki todo almaq JavaScript istifadə. 138 00:08:49,210 --> 00:08:52,830 Biz JavaScript array daxilində, bu kimi əsasən olduğunu saxlanılır 139 00:08:52,830 --> 00:08:56,010 ki, bizim proqram nümayəndəliyi siyahısı, 140 00:08:56,010 --> 00:08:59,060 və sonra biz onu çap. 141 00:08:59,060 --> 00:09:02,690 Bu todos.js edir. 142 00:09:02,690 --> 00:09:07,620 >> Bu sərin növü deyil, amma necə biz bu da edə bilər? 143 00:09:07,620 --> 00:09:11,350 Gördüyünüz kimi Bəli, bu siyahısı tam kimi deyil. 144 00:09:11,350 --> 00:09:15,100 Məsələn, mən, natamam kimi bu maddələrin hər hansı qeyd edə bilməz 145 00:09:15,100 --> 00:09:19,920 Mən maddələr reprioritize və ya silə istəyirdi istəyirəm. 146 00:09:19,920 --> 00:09:23,150 Bu tamam, ancaq bu daha bilər. 147 00:09:23,150 --> 00:09:29,280 Mən əlavə funksiyalar əlavə haqqında çox çox danışmaq fikrində deyiləm 148 00:09:29,280 --> 00:09:32,800 lakin biz daha da bilər. 149 00:09:32,800 --> 00:09:35,970 Siyahısı üçün bu daha bir xüsusiyyət əlavə söhbət edək, 150 00:09:35,970 --> 00:09:40,370 fərdi işlər maddə kontrol edə olacaq olan 151 00:09:40,370 --> 00:09:44,780 və belə əsasən mən bu etdiyiniz deyərək, pozdurulmaq var. 152 00:09:44,780 --> 00:09:50,240 Ki, yerinə yetirmək bilər ki, bəzi kodu baxaq. 153 00:09:50,240 --> 00:09:52,740 Nə üst etdik mən ekledik fark 154 00:09:52,740 --> 00:09:57,620 yeni qlobal array tam çağırıb. 155 00:09:57,620 --> 00:10:02,890 Mən əsasən saxlamaq üçün bu istifadə alıram olub to-do siyahısı maddələr 156 00:10:02,890 --> 00:10:06,560 tam və ya deyil. 157 00:10:06,560 --> 00:10:08,470 Bu etmək üçün bir yoldur. 158 00:10:08,470 --> 00:10:13,750 Mən bu həyata, görüntü, baxsaq 159 00:10:13,750 --> 00:10:21,120 Mən todo daxil edin və əgər əsasən mən bu keçid düyməsini basın 160 00:10:21,120 --> 00:10:25,040 həyata keçir, bu siyahıda hər bir maddə və ya tam var 161 00:10:25,040 --> 00:10:31,050 və ya natamam dövlət, və mən təmsil etmək üçün bir sıra istifadə edirəm. 162 00:10:31,050 --> 00:10:33,730 >> Əsasən ki todos array hər todo üçün 163 00:10:33,730 --> 00:10:37,110 bir maddə əsasən göstərir ki, tam sıra var 164 00:10:37,110 --> 00:10:39,060 ki, tam və ya olub-olmadığını. 165 00:10:39,060 --> 00:10:41,640 Mən bu kodu olduqca minimal dəyişiklik etmək bulana 166 00:10:41,640 --> 00:10:44,470 Belə ki, burada bizim addTodo funksiyası var. 167 00:10:44,470 --> 00:10:48,530 Burada serialın üzərinə basaraq alıram Qeyd edək ki, 168 00:10:48,530 --> 00:10:51,300 və sonra mən tam array üçün 0 pushing alıram 169 00:10:51,300 --> 00:10:57,090 əsasən demək ki, yeni todo təkan ilə paralel 170 00:10:57,090 --> 00:11:00,430 Mən bu maddə əlavə alıram və bu dəyər ilə coupled oldu 171 00:11:00,430 --> 00:11:02,810 bu natamam var deməkdir. 172 00:11:02,810 --> 00:11:04,970 Və sonra mən to-do siyahısı yenidən çəkilməsi alıram. 173 00:11:04,970 --> 00:11:09,220 İndi bu drawTodoList funksiyası əlavə etdik bilərsiniz. 174 00:11:09,220 --> 00:11:11,760 Bu, əvvəl idi kodu alır 175 00:11:11,760 --> 00:11:15,320 əsasən qutusu həyata təmizləyir və sonra yeni işlər siyahısı çəkir. 176 00:11:15,320 --> 00:11:19,620 Amma bu daxilində loop üçün daha çox indi bir az edirik ki, qeyd. 177 00:11:19,620 --> 00:11:25,000 Biz əsasən Ith todo üçün maddə müvafiq olub burada kontrol edirik 178 00:11:25,000 --> 00:11:30,220 tam və biz bu 2 şəraitdə fərqli davranır edirik. 179 00:11:30,220 --> 00:11:32,790 Tam varsa, biz bu del tag ekliyorsanız 180 00:11:32,790 --> 00:11:35,360 olan əsasən təsiri vasitəsilə tətil əldə edə bilərsiniz yolu 181 00:11:35,360 --> 00:11:38,190 tam varsa İşlər siyahısını kəsişməsi, 182 00:11:38,190 --> 00:11:42,200 bu deyil, əgər, biz o cümlədən deyilik. 183 00:11:42,200 --> 00:11:45,030 Və belə belə ki, qayğı 184 00:11:45,030 --> 00:11:49,140 >> və bunu həyata keçirmək üçün bir yoldur. 185 00:11:49,140 --> 00:11:53,420 Istifadəçi bu bir tıkladığında Və sonra qeyd 186 00:11:53,420 --> 00:11:56,780 biz bunu başa vəziyyəti dəyişə. 187 00:11:56,780 --> 00:12:02,170 Istifadəçi klik, biz bunu başa və ya olub-olmamasına geri olacaq zaman, 188 00:12:02,170 --> 00:12:04,540 və sonra biz onu yenidən lazımdır. 189 00:12:04,540 --> 00:12:06,190 Işlərin bu cür. 190 00:12:06,190 --> 00:12:09,860 Biz öz vəzifələri həyata keçirmək ki, bu funksiyaları 191 00:12:09,860 --> 00:12:11,730 və bu tamam. 192 00:12:11,730 --> 00:12:14,110 Biz baxmayaraq, bu barədə daha yaxşı nə ola bir şey var mı? 193 00:12:14,110 --> 00:12:18,700 Biz bu 2 qlobal seriallarda var bildirək. 194 00:12:18,700 --> 00:12:23,550 Bu C idi və biz növ təmsil ki, 2 seriallarda olsaydı 195 00:12:23,550 --> 00:12:25,800 növ bir şəkildə bağlı olmuşdur ki, məlumat 196 00:12:25,800 --> 00:12:30,140 biz bu 2 sahələri birləşdirmək C nə istifadə edir 197 00:12:30,140 --> 00:12:35,420 informasiya iki ədəd kapsüller ki, bir şey? 198 00:12:35,420 --> 00:12:37,600 Kimsə Yoxmu təklif etmək istəyirsiniz? 199 00:12:37,600 --> 00:12:39,450 [Tələbə işitilemez cavab] 200 00:12:39,450 --> 00:12:42,340 >> Məhz, belə ki, biz struct bir növ istifadə edə bilər 201 00:12:42,340 --> 00:12:44,960 və pset 3, demək, geri hesab edirəm ki, əgər 202 00:12:44,960 --> 00:12:47,350 biz lüğət idi, sonra biz idi xatırlayıram olub sözü 203 00:12:47,350 --> 00:12:50,230 Lüğətə idi, və bütün məlumatlar bir araya verilmişdir 204 00:12:50,230 --> 00:12:52,420 bəzi struktur daxilində. 205 00:12:52,420 --> 00:12:56,390 Mən bu kodu ilə edə bilərsiniz Bir şey bu 2 fərqli serialların qarşısını almaq üçün 206 00:12:56,390 --> 00:13:01,760 informasiyaların oxşar ədəd bir JavaScript object onları birləşdirmək bilər. 207 00:13:01,760 --> 00:13:07,150 Ki, nəzər salaq. 208 00:13:07,150 --> 00:13:11,740 Mən yalnız indi üst bir sıra var Xəbər 209 00:13:11,740 --> 00:13:17,650 və nə mən etdiyiniz edir və bu yalnız növ üçün JavaScript sintaksis deyil 210 00:13:17,650 --> 00:13:21,350 obyektin bir hərfi versiyasını yaratmaq, 211 00:13:21,350 --> 00:13:24,670 və biz todo var, 2 xassələri var fark 212 00:13:24,670 --> 00:13:29,660 və onu tam və ya natamam olub ilə birlikdə saxlanılır. 213 00:13:29,660 --> 00:13:31,000 Bu, çox oxşar kodudur. 214 00:13:31,000 --> 00:13:35,310 Biz JavaScript obyektlərin istifadə edirik. 215 00:13:35,310 --> 00:13:38,600 Yaxşılaşdırır şeyi Bu cür. 216 00:13:38,600 --> 00:13:43,850 Indi kimi, əlaqəli məlumatların bütün bu sahələrdə birlikdə saxlanılır. 217 00:13:43,850 --> 00:13:46,410 Biz bunu çap getmək zaman, biz sahələrində əldə edə bilərsiniz. 218 00:13:46,410 --> 00:13:49,060 >> Biz todos [i] edirik necə hiss. Tam 219 00:13:49,060 --> 00:13:52,880 əvəzinə ayrı-ayrılıqda tam array yoxlanılması, 220 00:13:52,880 --> 00:13:56,560 və biz İşlər əmlak əldə etdiyiniz İşlər string almaq istədiyiniz zaman bildiriş 221 00:13:56,560 --> 00:13:58,750 ki todo ki, bu cür əhəmiyyət kəsb edir, çünki 222 00:13:58,750 --> 00:14:01,660 hər bir maddə bu barədə bu məxsusi xassələri vardır. 223 00:14:01,660 --> 00:14:05,650 Bu todo var və bu, tam və ya yox olub var. 224 00:14:05,650 --> 00:14:11,540 Çox çox dəyişikliklər funksional, yalnız kod bəzi əlavə. 225 00:14:11,540 --> 00:14:13,430 Bu hüquq, bəzi istiqamətlər üzrə inkişaf edir? 226 00:14:13,430 --> 00:14:16,030 Mən bir az dizayn həyata biz factored deməkdir. 227 00:14:16,030 --> 00:14:20,350 İndi biz əsasən Bu data içine obyektlərin var. 228 00:14:20,350 --> 00:14:27,130 Biz JavaScript baxımından burada nə ola bilər çox bir şey var mı? 229 00:14:27,130 --> 00:14:31,810 Kimi bildiriş ki, burada bu kodu 230 00:14:31,810 --> 00:14:34,760 bir div daxili HTML alınması üçün 231 00:14:34,760 --> 00:14:40,520 bir az, mən tapmaq, uzun. 232 00:14:40,520 --> 00:14:45,100 Document.getElementByID ("göstər") var. InnerHTML. 233 00:14:45,100 --> 00:14:48,400 Biz bu kodu bir az friendlier baxmaq üçün nə edə bilər bir şey 234 00:14:48,400 --> 00:14:51,450 Mən geri və irəli, scrolling sol və sağ saxlamaq olmazdı 235 00:14:51,450 --> 00:14:58,480 Mən jQuery kimi bir kitabxana istifadə bilər. 236 00:14:58,480 --> 00:15:02,710 >> Nin, Seminar 2-kontrol edək 237 00:15:02,710 --> 00:15:05,880 və bu eyni kodu, lakin jQuery ilə həyata. 238 00:15:05,880 --> 00:15:08,790 Siz jQuery ilə də tanış ola bilər 239 00:15:08,790 --> 00:15:11,510 ancaq jQuery JavaScript üçün kitabxana növ bilirik ki, 240 00:15:11,510 --> 00:15:15,910 ki, asan DOM çıxış fərdi elementləri kimi şeylər edir. 241 00:15:15,910 --> 00:15:21,280 Burada yerinə document.getElementByID deyərək ("göstər"). InnerHTML 242 00:15:21,280 --> 00:15:25,210 Mən jQuery-ci ildə çox təmiz şəkildə istifadə edə bilərsiniz 243 00:15:25,210 --> 00:15:28,490 olan yalnız selectors istifadə etməkdir. 244 00:15:28,490 --> 00:15:31,300 Gördüyünüz kimi, bu kodu, bir az təmiz almaq idi 245 00:15:31,300 --> 00:15:35,770 çox funksional, oxşar, lakin fikirdir. 246 00:15:35,770 --> 00:15:37,980 Biz bu günə qədər şeyi bir neçə gördüm 247 00:15:37,980 --> 00:15:42,010 belə ki, biz yalnız xam JavaScript həyata keçirilməsi ilə başlamışdır. 248 00:15:42,010 --> 00:15:45,370 Biz yeni funksiyalar əlavə və biz onun təkmilləşdirilməsi necə göstərdi 249 00:15:45,370 --> 00:15:49,090 yalnız biz JavaScript var. 250 00:15:49,090 --> 00:15:53,300 >> Heç kimə bu dizayn ilə heç bir çətinlik görür? 251 00:15:53,300 --> 00:16:01,090 Məhz, mən yalan danışarlar və ya çətinliklər Mütləq deyil demək edək 252 00:16:01,090 --> 00:16:04,830 biz to-do siyahısı bunu deyil, və sabah biz qərar 253 00:16:04,830 --> 00:16:10,320 biz bir baqqal siyahısı və ya bir alış-veriş siyahısı etmək istədi. 254 00:16:10,320 --> 00:16:14,150 Bu funksiyalar bir çox çox oxşardır. 255 00:16:14,150 --> 00:16:19,080 Biz JavaScript çıxmaq istəyirəm şeyi bir çox, çox ümumi 256 00:16:19,080 --> 00:16:23,820 və bu yolu bir növ ehtiyac vurğulayır 257 00:16:23,820 --> 00:16:25,670 etmək üçün bu asan edir. 258 00:16:25,670 --> 00:16:30,400 Mən, bu HTML çıxışı bütün qurmaq üçün bütün bu DOM çıxışı var 259 00:16:30,400 --> 00:16:35,530 Mən bu model ilə to-do siyahısı təmsil gedirəm kimi. 260 00:16:35,530 --> 00:16:39,130 Mən JavaScript geliştiricisi olaraq məsul deyiləm qeyd 261 00:16:39,130 --> 00:16:42,890 Mən sync var ki, HTML və JavaScript saxlanılması üçün. 262 00:16:42,890 --> 00:16:48,040 Avtomatik olaraq heç bir şey ki, JavaScript nümayəndəliyi 263 00:16:48,040 --> 00:16:51,590 və ya to-do siyahısı HTML həyata sövq almaq. 264 00:16:51,590 --> 00:16:54,000 Heç bir şey mənə başqa etdilər. 265 00:16:54,000 --> 00:16:56,880 I siyahısı funksiyası etmək bərabərə yazmaq idi. 266 00:16:56,880 --> 00:17:01,650 Və demək I-ola, o, bunu ağlabatan deyil bilər ki, 267 00:17:01,650 --> 00:17:03,670 amma bəzən yorucu ola bilər. 268 00:17:03,670 --> 00:17:08,190 Daha böyük bir layihə varsa, çətin ola bilər. 269 00:17:08,190 --> 00:17:10,720 >> Çərçivələr, çərçivəsində məqsədləri biri 270 00:17:10,720 --> 00:17:14,060 amil ki, proses və sort həyata asanlaşdırmaq üçün 271 00:17:14,060 --> 00:17:16,950 bu ümumi-Sizi bilər deyə-dizayn nümunələri tapmaq 272 00:17:16,950 --> 00:17:20,700 ki, insanlar ümumiyyətlə, data təmsil yolu bir növ 273 00:17:20,700 --> 00:17:25,599 ki Xəritə məlumat olsun, dostlar siyahısı olub 274 00:17:25,599 --> 00:17:27,280 və ya bir şey və ya to-do siyahısı. 275 00:17:27,280 --> 00:17:30,660 Bəzi insanlar, ümumiyyətlə, informasiya təmsil bir yol var 276 00:17:30,660 --> 00:17:33,650 və ümumiyyətlə senkronize ki, informasiya növ saxlamaq lazımdır 277 00:17:33,650 --> 00:17:36,520 istifadəçi baxımından bir növ görür nə arasında, 278 00:17:36,520 --> 00:17:39,850 Siz mühazirə gördüm ki, model görünüşü nəzarətçi kimi baxımından danışan 279 00:17:39,850 --> 00:17:45,400 və bu halda bu JavaScript array olan model. 280 00:17:45,400 --> 00:17:49,020 Çərçivəsində bizə problem həll etmək üçün bir yol verir. 281 00:17:49,020 --> 00:17:53,080 İndi siyahısı bu həyata nəzər bildirin 282 00:17:53,080 --> 00:18:02,360 angularjs adlı çərçivəsində. 283 00:18:02,360 --> 00:18:04,650 Bu deyil. Bir Slayd üzərində uyğun bilərsiniz. 284 00:18:04,650 --> 00:18:07,330 Mən sol və sağ hərəkət etmək yoxdur. 285 00:18:07,330 --> 00:18:10,460 Ki, yəqin ki, bir çərçivə istifadə edərək gəlir böyük bir səbəbi deyil 286 00:18:10,460 --> 00:18:20,120 lakin bildiriş Mən heç burada fərdi HTML elementləri daxil olmaq alıram? 287 00:18:20,120 --> 00:18:22,400 Mən heç DOM daxil gedirəm? 288 00:18:22,400 --> 00:18:26,120 Bu kimi hər hansı bir document.getElementByID və ya bir şey görürsünüzmü? 289 00:18:26,120 --> 00:18:29,870 Xeyr, o getdi. 290 00:18:29,870 --> 00:18:35,590 >> Bucaq bizə DOM və bir şey bizim JavaScript nümayəndəliyi davam edir 291 00:18:35,590 --> 00:18:40,430 senkronize növü, o, JS faylı deyil əgər 292 00:18:40,430 --> 00:18:46,790 program bütün HTML content almaq yolu yoxdur, əgər 293 00:18:46,790 --> 00:18:51,800 JavaScript nə biz sync bu saxlanılır? 294 00:18:51,800 --> 00:18:58,160 Bu. Js faylı deyilsə, sağ, HTML olmaq var? 295 00:18:58,160 --> 00:19:01,910 Bu, HTML fayl yeni versiyası 296 00:19:01,910 --> 00:19:04,660 və biz burada bir çox ekledik bilərsiniz. 297 00:19:04,660 --> 00:19:11,110 Ng basın və ng-təkrar deyirlər ki, bu yeni atributları var bildirək. 298 00:19:11,110 --> 00:19:15,650 Dizayn çətinliklər bu problemin həllinə Bucaq yanaşması 299 00:19:15,650 --> 00:19:19,130 əsasən HTML çox daha güclü etməkdir. 300 00:19:19,130 --> 00:19:24,420 Bucaq HTML qədər daha ifadəli etmək üçün imkan bir yoldur. 301 00:19:24,420 --> 00:19:30,520 Məsələn, mən bu mətn qutusuna bağlamaq və ya lər ​​gedirəm deyə bilərəm ki, 302 00:19:30,520 --> 00:19:35,080 mənim Bucaq JavaScript kodu çərçivəsində dəyişən üçün. 303 00:19:35,080 --> 00:19:37,030 Bu ng-model yalnız ki, yoxdur. 304 00:19:37,030 --> 00:19:41,550 Əsasən deyir ki, obyekt bu mətn qutusuna daxilində ki, 305 00:19:41,550 --> 00:19:45,000 yalnız dəyişən new_todo_description ilə şərik 306 00:19:45,000 --> 00:19:47,870 JavaScript kodu daxilində. 307 00:19:47,870 --> 00:19:51,600 Mən açıq-aydın getmək yoxdur, çünki çox güclü 308 00:19:51,600 --> 00:19:53,310 DOM ki, məlumat almaq üçün. 309 00:19:53,310 --> 00:19:56,250 Mən document.getElementByID demək yoxdur. 310 00:19:56,250 --> 00:19:58,750 Mən DOM çıxış kimi jQueries istifadə etmək yoxdur. 311 00:19:58,750 --> 00:20:03,280 Hesab edirəm ki, dəyişən dəyişdirmək zaman Mən sonra dəyişən ilə birləşmək olar 312 00:20:03,280 --> 00:20:07,400 JavaScript ərzində, HTML ile senkronize saxlanılır 313 00:20:07,400 --> 00:20:11,640 belə ki, iki arasında geri və irəli getmək üçün olan prosesi asanlaşdırır. 314 00:20:11,640 --> 00:20:18,260 Bu mənada edirmi? 315 00:20:18,260 --> 00:20:22,060 >> Və heç HTML çıxış kodu var bilərsiniz. 316 00:20:22,060 --> 00:20:27,760 Biz yalnız, HTML daha güclü etdik 317 00:20:27,760 --> 00:20:32,070 və indi, məsələn, biz bu kimi şeylər edə bilər 318 00:20:32,070 --> 00:20:38,610 Bu basın zaman, todos.js çərçivəsində bu funksiyanın zəng kimi, 319 00:20:38,610 --> 00:20:43,410 və bu ng-model kimi, biz əvvəl bunu edə bilər, lakin digər şeylər var 320 00:20:43,410 --> 00:20:47,020 və bu ng-repeat bilərsiniz. 321 00:20:47,020 --> 00:20:51,520 Bu, nə düşünürsünüz? 322 00:20:51,520 --> 00:20:54,390 Burada əvvəl bizim unordered siyahısı var. 323 00:20:54,390 --> 00:20:56,470 Biz ul yazıları 324 00:20:56,470 --> 00:21:03,710 amma mən heç JavaScript kodu içərisində O siyahıda göstərilməsi edirəm? 325 00:21:03,710 --> 00:21:09,280 Mən heç açıq şəkildə siyahı göstərilməsi deyiləm. 326 00:21:09,280 --> 00:21:11,580 Bu nasıl çalışır? 327 00:21:11,580 --> 00:21:16,410 Yaxşı, yol Bucaq bu bir repeater adlanır deyil həyata keçirir. 328 00:21:16,410 --> 00:21:22,760 Əsasən Mən bu HTML çap etmək istəyirəm ki, deyir 329 00:21:22,760 --> 00:21:26,240 mənim todos array hər todo daxilində üçün. 330 00:21:26,240 --> 00:21:31,850 Todos.jr daxilində todos array, sağ burada 331 00:21:31,850 --> 00:21:37,910 və bu ki, array vasitəsilə Bucaq go izah edəcəyəm və hər bir element üçün Gördüyünüz 332 00:21:37,910 --> 00:21:41,390 Mən sizə bu HTML çap etmək istəyirik. 333 00:21:41,390 --> 00:21:44,620 Mən bunu yalnız bilər, çünki bu zəhmli növü 334 00:21:44,620 --> 00:21:47,760 loop üçün yazmaq olmadan, 335 00:21:47,760 --> 00:21:52,250 olan kodu yalnız 30 xətləri idi ki, bir siyahısı üçün 336 00:21:52,250 --> 00:21:54,700 ən faydalı şey ola bilər, 337 00:21:54,700 --> 00:22:01,240 böyük bir layihə var, lakin əgər, bu çox rahat əldə edə bilər. 338 00:22:01,240 --> 00:22:06,100 >> Bu HTML daha güclü edilməsi, bu problemin bir həll deyil, 339 00:22:06,100 --> 00:22:10,820 və bizə senkronize JavaScript və HTML saxlamağa imkan verir. 340 00:22:10,820 --> 00:22:13,220 Bu problemi həll etmək üçün digər mümkün yolları var 341 00:22:13,220 --> 00:22:15,320 hər çərçivəsində bu deyil. 342 00:22:15,320 --> 00:22:17,720 Hər çərçivəsində bu xətt işləyir. 343 00:22:17,720 --> 00:22:19,490 Bəzi çərçivələr, müxtəlif yanaşmalar var 344 00:22:19,490 --> 00:22:23,310 və siz digər üzərində bir çərçivəsində kodlaşdırma zövq ki, tapa bilərsiniz. 345 00:22:23,310 --> 00:22:26,160 Daha bir baxaq. 346 00:22:26,160 --> 00:22:30,060 Bu Backbone adlı çərçivəsində kodlu İşlər siyahısı. 347 00:22:30,060 --> 00:22:33,250 Mən tez bu yolu getmək üçün gedirəm. 348 00:22:33,250 --> 00:22:38,300 Biz orada getmək əvvəl Mən HTML ilə başlamaq lazımdır. 349 00:22:38,300 --> 00:22:40,290 Bir ikinci. 350 00:22:40,290 --> 00:22:43,950 Fark kimi, HTML başlayaraq, bizim HTML çox oxşardır 351 00:22:43,950 --> 00:22:50,000 ki, qarşısında əvvəl belə çox yeni idi nə. 352 00:22:50,000 --> 00:22:55,410 Amma bizim js fayl bir az fərqlidir. 353 00:22:55,410 --> 00:23:00,360 Və Backbone cür bu fikri var, və ya fikir əsaslanır 354 00:23:00,360 --> 00:23:04,750 biz nə çox, demək ki, bizim JavaScript layihələr 355 00:23:04,750 --> 00:23:09,110 modellər və bu modellərin kolleksiyaları haqqında düşünür. 356 00:23:09,110 --> 00:23:12,510 Bu, misal üçün, şəkil bir şəkil və kolleksiyaları ola bilər 357 00:23:12,510 --> 00:23:16,230 və ya dostlar bir dost və kolleksiyaları fikir. 358 00:23:16,230 --> 00:23:20,700 Və oftentimes JavaScript applications proqramlaşdırma etdiyiniz zaman 359 00:23:20,700 --> 00:23:25,340 dostlar bir toplama fikri təmsil biz düzmək lazımdır 360 00:23:25,340 --> 00:23:29,500 elə JavaScript və Backbone bizə bu qat verir 361 00:23:29,500 --> 00:23:33,040 JavaScript mövcud Diziler və obyektlərin üst 362 00:23:33,040 --> 00:23:38,300 daha asan ki, daha güclü şeylər. 363 00:23:38,300 --> 00:23:41,870 >> Burada, bir to-do model müəyyən etdik 364 00:23:41,870 --> 00:23:44,630 və siz sintaksis haqqında çox çox narahat yoxdur 365 00:23:44,630 --> 00:23:48,730 lakin nə bu xüsusiyyətləri biri fark? 366 00:23:48,730 --> 00:23:53,190 Bu default yatağı var. 367 00:23:53,190 --> 00:23:56,640 Backbone mənə yarasa off artıq müəyyən etmək üçün imkan verir 368 00:23:56,640 --> 00:24:00,190 Mən yaratmaq ki, işlər hər hansı yeni bu u mənim üçün gedir. 369 00:24:00,190 --> 00:24:04,100 İndi bu özelleştirmek, lakin u mənim müəyyən etmək üçün olan edə bilərsiniz 370 00:24:04,100 --> 00:24:07,220 gözəl və bu kimi bir şey deyil, çünki rahat növü var 371 00:24:07,220 --> 00:24:10,430 JavaScript xas olan, indi aydın yoxdur 372 00:24:10,430 --> 00:24:12,430 ki, todos natamam olduğunu bildirirlər. 373 00:24:12,430 --> 00:24:19,190 Mən todos natamam kimi qeyd edir ki, hüququ yarasa off deyə bilərəm. 374 00:24:19,190 --> 00:24:21,300 Sonra Azadlıqlar bu nədir? 375 00:24:21,300 --> 00:24:25,520 İndi bir siyahısı var, və bir toplama edir. 376 00:24:25,520 --> 00:24:30,960 Model todo deyir ki, ilə bağlı sahədə bilərsiniz. 377 00:24:30,960 --> 00:24:33,390 Bu Backbone izah mənim yoludur 378 00:24:33,390 --> 00:24:37,350 Mən bu fərdi todos toplusu haqqında düşünür ola gedirəm. 379 00:24:37,350 --> 00:24:42,140 Bu əsasən mənim proqramı üçün model strukturu. 380 00:24:42,140 --> 00:24:44,980 Burada bir toplama bu fikir var 381 00:24:44,980 --> 00:24:48,960 və əsasən toplanması olan bütün öğeleri, bu todos olacaq 382 00:24:48,960 --> 00:24:51,910 və bu mənada çox təbii 383 00:24:51,910 --> 00:24:59,890 Mən çünki todos var və mən bir toplama onları var. 384 00:24:59,890 --> 00:25:02,940 >> Bu bir az daha baxaq. 385 00:25:02,940 --> 00:25:05,900 Burada Backbone rəyidir. 386 00:25:05,900 --> 00:25:08,890 Backbone deyir ki, digər odur ki, 387 00:25:08,890 --> 00:25:14,660 siz və ya hətta kolleksiyaları düşüncə etdiyiniz modellərin bir çox 388 00:25:14,660 --> 00:25:19,150 nümayiş etdirilir bəzi yol lazımdır edir. 389 00:25:19,150 --> 00:25:21,900 Biz siyahısı ki, göstərmək lazımdır 390 00:25:21,900 --> 00:25:25,460 Biz hər bir model üçün təmin edə bilər, əgər bu gözəl ola bilməz 391 00:25:25,460 --> 00:25:28,390 və ya hər modeli ilə bu fikri şərik 392 00:25:28,390 --> 00:25:34,020 bizə imkan verir ki, iki birlikdə əlaqə tahmin? 393 00:25:34,020 --> 00:25:38,320 Əvvəl Halbuki biz axır ki, loop üçün istifadə etmək məcburiyyətində 394 00:25:38,320 --> 00:25:41,130 hər bizim siyahısına todo və sonra burada çap 395 00:25:41,130 --> 00:25:44,650 biz əsasən bu model ilə qoşula bilərlər. 396 00:25:44,650 --> 00:25:47,550 Bu işlər rəyidir. 397 00:25:47,550 --> 00:25:50,550 Bu əvvəllər aşkar todo ilə bağlıdır. 398 00:25:50,550 --> 00:25:54,940 İndi hər todo görüntülenebilir və ya renderable edir 399 00:25:54,940 --> 00:25:56,960 bu nöqteyi-do. 400 00:25:56,960 --> 00:25:59,440 Bəzi yataqlarda bilərsiniz. 401 00:25:59,440 --> 00:26:05,880 Əgər bu tagName edir tagName nə düşünürsünüz: Li? 402 00:26:05,880 --> 00:26:09,790 Bir todo göstərmək üçün biz istəyərkən əvvəl saxla 403 00:26:09,790 --> 00:26:16,700 biz aydın şəkildə bu li etiketi ilə todos qoşmaq lazımdır. 404 00:26:16,700 --> 00:26:21,080 İndi biz bu todo yaşamağa davam yerləşir söyləyərək edirik 405 00:26:21,080 --> 00:26:25,250 bir li tag daxilində olacaq. 406 00:26:25,250 --> 00:26:31,440 İndi biz də todos tədbirlər şərik edirik. 407 00:26:31,440 --> 00:26:34,320 >> Hər todo bu bir hadisə var. 408 00:26:34,320 --> 00:26:38,480 Siz olduqca çox keçid düyməsini basın varsa, ki, mən orada dedi alıram nə var 409 00:26:38,480 --> 00:26:43,080 sonra əsasən əvvəl nə qarşı kimi todo qeyd 410 00:26:43,080 --> 00:26:45,890 və sonra tətbiq yenidən göstərir. 411 00:26:45,890 --> 00:26:47,810 Bu önce kodu oxşar növ edir. 412 00:26:47,810 --> 00:26:50,730 Biz də qarşı və ya kimi qeyd zaman saxla 413 00:26:50,730 --> 00:26:52,410 sonra biz yenidən göstərmişdir. 414 00:26:52,410 --> 00:26:57,750 Amma indi HTML idi ki, bir şey üçün istifadə bu hadisə bildiriş. 415 00:26:57,750 --> 00:26:59,640 Orada oturmuşdu. 416 00:26:59,640 --> 00:27:01,410 Düyməsini bir klik idi. 417 00:27:01,410 --> 00:27:05,310 'Düyməsinə basın, o cür üçün stuff edir 418 00:27:05,310 --> 00:27:07,210 todo natamam olması qurmaq. 419 00:27:07,210 --> 00:27:11,180 Burada ki, keçid düyməsini tıklayarak ki, hadisə bağlı etdik 420 00:27:11,180 --> 00:27:15,830 və bu görünüşü ilə və ya söndürmək olub geri. 421 00:27:15,830 --> 00:27:20,480 >> Çox sıx bağlı olan bu bu hadisə yaradılması bir gözəl yoludur 422 00:27:20,480 --> 00:27:26,980 Bu baxımdan və daha çox bu bilərsiniz. 423 00:27:26,980 --> 00:27:31,050 Mən bu render metodu var və biz detalları ilə getmək yoxdur. 424 00:27:31,050 --> 00:27:33,650 Bu, biz əvvəl nə oxşar növ var 425 00:27:33,650 --> 00:27:36,070 amma bir şey vasitəsilə loop deyiləm bilərsiniz. 426 00:27:36,070 --> 00:27:40,700 Mən bütün öğeleri çap gedirəm deyərək növ var ki, ul etiket çap deyiləm. 427 00:27:40,700 --> 00:27:46,610 Mən bu bir-do maddə göstərilməsi üçün işlevsellik təmin alıram. 428 00:27:46,610 --> 00:27:49,400 Bu, əsasən bir çox güclü anlayışdır 429 00:27:49,400 --> 00:27:53,600 Bizim siyahısı bütün bu todos ibarətdir və biz əsasən müəyyən edə bilər, əgər 430 00:27:53,600 --> 00:27:56,890 o todos biri göstərməyə yolu 431 00:27:56,890 --> 00:28:04,230 sonra biz özlüyündə bizim güclü backbone ola bilər todos bütün göstərmək 432 00:28:04,230 --> 00:28:07,760 fərdi todos üzrə render üsulu axtararaq. 433 00:28:07,760 --> 00:28:14,180 Burada faydalı bir anlayışdır. 434 00:28:14,180 --> 00:28:18,160 İndi soruşmaq yaxşı sual bu proqram necə bir araya olunur var? 435 00:28:18,160 --> 00:28:21,200 Biz bir todo göstərmək imkanı var, çünki 436 00:28:21,200 --> 00:28:23,860 lakin biz çox göstər ideyası alıram? 437 00:28:23,860 --> 00:28:25,100 >> Ki, nəzər salaq. 438 00:28:25,100 --> 00:28:27,100 Bu son hissəsidir. 439 00:28:27,100 --> 00:28:29,740 Biz burada siyahısı görünüşü var bildiriş 440 00:28:29,740 --> 00:28:34,440 və bu da bir görünüşü var bilərsiniz. 441 00:28:34,440 --> 00:28:36,970 Və hər şeyi bir neçə üzərində getmək, 442 00:28:36,970 --> 00:28:45,280 biz ilk bu-do siyahısı yaratmaq zaman bu initialize üsulu adlanacaq. 443 00:28:45,280 --> 00:28:52,630 Gördüyünüz kimi, bu Ediləcək işlər siyahısına yaradılması və bu fikri ilə şərik kimi. 444 00:28:52,630 --> 00:28:57,860 Əgər əlavə və sonra mən əsasən burada funksiyaları əlavə maddə- 445 00:28:57,860 --> 00:29:01,440 bu addItem metodu oxşar biz əvvəl gördüm 446 00:29:01,440 --> 00:29:07,430 Mən yeni todo obyekt yaratmaq, və mən, həqiqətən, zəng alıram qeyd gidiyorum 447 00:29:07,430 --> 00:29:13,080 Bu yeni todo üsul, bu Backbone tərəfindən təmin edilir, 448 00:29:13,080 --> 00:29:16,010 və mən burada mənim xassələri keçə bilər. 449 00:29:16,010 --> 00:29:23,710 Və indi bu istifadə yaradır ki, hər bir todo biz əvvəl gördüm ki, funksionallıq olacaq. 450 00:29:23,710 --> 00:29:28,140 Mən mətn qutusuna həyata klirinq alıram əvvəl kiçik bir az ətraflı-Xəbər 451 00:29:28,140 --> 00:29:32,900 və sonra bu toplanması əlavə alıram. 452 00:29:32,900 --> 00:29:37,630 >> Bu demək olar ki, qəribə görünür biz yalnız todos.push bunu əvvəl, çünki 453 00:29:37,630 --> 00:29:43,310 və sonra biz görülmüş, və bu layihə üçün daha çətin görünə bilər 454 00:29:43,310 --> 00:29:46,980 və bu Backbone və ya hətta Bucaq ya hər hansı digər çərçivəsində ola bilər 455 00:29:46,980 --> 00:29:50,790 xüsusi layihə uyğun, lakin mən bu barədə düşünmək üçün vacib hesab etmir 456 00:29:50,790 --> 00:29:54,100 nə bu daha böyük layihələr üçün böyük miqyasda deməkdir ki, 457 00:29:54,100 --> 00:29:56,610 Çünki biz təmsil olunduğu böyük layihə olsa 458 00:29:56,610 --> 00:30:00,860 bəzi həqiqətən kompleks toplanması, yalnız bir siyahısı daha dərin bir şey, 459 00:30:00,860 --> 00:30:04,490 Bir dost siyahısını və ya bu kimi bir şey demək istəyirəm, bu yararlı ola bilər 460 00:30:04,490 --> 00:30:09,620 Çünki biz, həqiqətən rahat şəkildə kodu təşkil edə bilər 461 00:30:09,620 --> 00:30:12,550 başqası üçün daha asan edəcək bir şəkildə 462 00:30:12,550 --> 00:30:16,820 kim ilə qurmaq bir layihə ala istədi. 463 00:30:16,820 --> 00:30:21,450 Bu quruluş bir çox təmin olduğunu görə bilərsiniz. 464 00:30:21,450 --> 00:30:26,580 Və sonra mən bu addItem haqqında göstərməyə zəng alıram. 465 00:30:26,580 --> 00:30:31,050 Gördüyünüz kimi, göstərir və bu tam syntax tutmaq yoxdur, 466 00:30:31,050 --> 00:30:37,790 lakin əsasən hər bir model üçün fərdi render metodu zəng olacaq. 467 00:30:37,790 --> 00:30:41,500 Bu gəlir harada növ var. 468 00:30:41,500 --> 00:30:44,140 Yalnız fərdi todos göstərməyə necə müəyyən edək, 469 00:30:44,140 --> 00:30:47,310 və sonra bütövlükdə bitişdirmək onlara bildirin. 470 00:30:47,310 --> 00:30:49,810 Amma bu abstraksiya bir yol təqdim edir 471 00:30:49,810 --> 00:30:55,470 Mən fərdi todos göstərməyə qərar yol dəyişə bilər, çünki, 472 00:30:55,470 --> 00:30:57,940 və bu kodu hər hansı bir dəyişiklik olmazdı. 473 00:30:57,940 --> 00:31:00,700 Belə sərin var. 474 00:31:00,700 --> 00:31:08,540 >> Heç kimə JavaScript çərçivəsində haqqında hər hansı bir sualınız varmı? 475 00:31:08,540 --> 00:31:14,310 [Tələbə işitilemez sual] 476 00:31:14,310 --> 00:31:16,050 Oh, əmin ki, böyük bir sual. 477 00:31:16,050 --> 00:31:19,080 Sualına necə çərçivəsində daxil idi? 478 00:31:19,080 --> 00:31:22,970 Ən JavaScript çərçivəsində əsasən yalnız js faylları 479 00:31:22,970 --> 00:31:25,740 Siz kodu üst əlavə edə bilərsiniz ki. 480 00:31:25,740 --> 00:31:29,830 Mən bütün bu script tags mənim HTML rəhbəri hissəsi bildiriş, 481 00:31:29,830 --> 00:31:34,250 və yekun script tag biz yazdıq ki, kodudur. 482 00:31:34,250 --> 00:31:38,820 Və sonra 3 çərçivəsində kodları yalnız da script tags var. 483 00:31:38,820 --> 00:31:42,110 Mən CDN deyirlər nə onlara, o cümlədən alıram 484 00:31:42,110 --> 00:31:46,200 mənə bu nöqtədə başqası onu almaq üçün imkan verir 485 00:31:46,200 --> 00:31:57,930 lakin hər çərçivəsində bu olduqca çox məzmun tapa bilərsiniz 486 00:31:57,930 --> 00:32:03,540 kimi bəzi CDN və ya bir şey mövcud xüsusi JavaScript kitabxana üçün, 487 00:32:03,540 --> 00:32:05,570 və sonra bu script tags əlavə edə bilərsiniz. 488 00:32:05,570 --> 00:32:07,600 Bu mənada edirmi? 489 00:32:07,600 --> 00:32:09,500 Sərin. 490 00:32:09,500 --> 00:32:11,730 >> Həmin 2 müxtəlif yanaşmalar var. 491 00:32:11,730 --> 00:32:14,640 Bu problemin həlli üçün yeganə yanaşma deyil. 492 00:32:14,640 --> 00:32:17,080 Bir çox farklı şey var ki, 493 00:32:17,080 --> 00:32:19,490 kimsə edə bilər, və bir çox çərçivəsində orada var. 494 00:32:19,490 --> 00:32:23,300 Bucaq və Backbone bütün hekayə demək deyil. 495 00:32:23,300 --> 00:32:26,370 Son layihələri ilə Uğurlar, çox təşəkkür edirəm. 496 00:32:31,960 --> 00:32:35,000 [CS50.TV]