1
00:00:00,000 --> 00:00:02,000
[Powered by Google Translate] [Семінары] [JavaScript Праграмныя каркасы: як і навошта]

2
00:00:02,000 --> 00:00:04,000
[Кевін Schmid] [Гарвардскі універсітэт]

3
00:00:04,000 --> 00:00:06,960
[Гэта CS50.] [CS50.TV]

4
00:00:06,960 --> 00:00:10,630
>> Прывітанне, усім. Сардэчна запрашаем на семінар JavaScript рамкі.

5
00:00:10,630 --> 00:00:14,910
Мяне клічуць Кевін, і сёння я буду казаць пра рамкі JavaScript,

6
00:00:14,910 --> 00:00:20,400
і мэтай дадзенага семінара з'яўляецца не прымусіць вас, скажам, асвоіць канкрэтны каркас, як такой

7
00:00:20,400 --> 00:00:23,810
але, каб даць вам больш шырокі падыход да пару рамкі

8
00:00:23,810 --> 00:00:27,150
і паказаць, чаму мы ніколі не хачу выкарыстоўваць рамкі.

9
00:00:27,150 --> 00:00:31,060
>> Перш чым зрабіць гэта, я прывяду невялікі фон у JavaScript,

10
00:00:31,060 --> 00:00:33,750
а потым мы возьмем яго адтуль.

11
00:00:33,750 --> 00:00:36,270
Мы збіраемся пачаць з рэалізацыі To-Do List.

12
00:00:36,270 --> 00:00:39,330
Вось наш спіс задач на сённяшні дзень.

13
00:00:39,330 --> 00:00:41,990
Гэта даволі пацешна. Мы павінны рэалізаваць спіс спраў у JavaScript.

14
00:00:41,990 --> 00:00:45,110
Гэта тое, што гэта будзе выглядаць, так што гэта наша першая мэта.

15
00:00:45,110 --> 00:00:47,160
Мы не збіраемся выкарыстоўваць рамкі, каб зрабіць гэта.

16
00:00:47,160 --> 00:00:51,930
Мы збіраемся кода JavaScript і атрымаць спіс спраў на працу.

17
00:00:51,930 --> 00:00:54,370
Затым мы збіраемся палепшыць дызайн без выкарыстання рамкі.

18
00:00:54,370 --> 00:00:57,190
Мы збіраемся, каб абмеркаваць розныя рэчы, якія мы можам зрабіць толькі з JavaScript толькі

19
00:00:57,190 --> 00:01:00,650
, Каб зрабіць наш спіс спраў трохі больш добра прадуманы.

20
00:01:00,650 --> 00:01:02,490
Затым мы збіраемся кінуць у некаторых JQuery,

21
00:01:02,490 --> 00:01:05,030
і тады мы будзем глядзець на тое ж спіс спраў,

22
00:01:05,030 --> 00:01:07,170
проста рэалізаваны ў розныя структуры, і мы абмяркуем

23
00:01:07,170 --> 00:01:09,280
 плюсы і мінусы па шляху.

24
00:01:09,280 --> 00:01:12,040
>> Давайце пачнем рэалізацыю, што спіс спраў.

25
00:01:12,040 --> 00:01:14,270
Дапусцім, нам даюць гэта HTML.

26
00:01:14,270 --> 00:01:16,620
Я збіраюся зрабіць гэта крыху менш.

27
00:01:16,620 --> 00:01:19,300
Як бачыце, у мяне ёсць маленькі загаловак, у якім Todo

28
00:01:19,300 --> 00:01:21,740
і невялікую скрынку, дзе я магу патрэбна апісанне TODO

29
00:01:21,740 --> 00:01:26,990
, А затым кнопку Стварыць элемент, так што давайце паспрабуем ўвесці новы TODO ў гэты спіс.

30
00:01:26,990 --> 00:01:31,000
Правесці семінар JavaScript рамкі,

31
00:01:31,000 --> 00:01:33,090
і я ударыць новы элемент.

32
00:01:33,090 --> 00:01:35,730
Я атрымліваю гэта папярэджанне JavaScript, які кажа мне рэалізацыі.

33
00:01:35,730 --> 00:01:37,560
У нас ёсць для яго рэалізацыі.

34
00:01:37,560 --> 00:01:41,490
Давайце праверым код гэтага, як HTML і JavaScript.

35
00:01:41,490 --> 00:01:43,260
Вось наш HTML.

36
00:01:43,260 --> 00:01:45,500
Як вы можаце бачыць тут, тут наш маленькі загаловак Todos.

37
00:01:45,500 --> 00:01:47,620
Гэта было смелы, што рэч у верхняй часткі,

38
00:01:47,620 --> 00:01:50,690
а то ў нас у поле ўводу з запаўняльнікам,

39
00:01:50,690 --> 00:01:59,460
а затым ёсць пэўны атрыбут гэтай кнопцы, якая выклікае гэтую функцыю addTodo.

40
00:01:59,460 --> 00:02:05,460
Хто-небудзь хоча паваражыць, што пстрычка азначала?

41
00:02:05,460 --> 00:02:07,390
[Студэнцкія чуваць адказу]

42
00:02:07,390 --> 00:02:09,289
Добра, па пстрычцы накшталт як падзея,

43
00:02:09,289 --> 00:02:12,120
як кнопкі мышы проста падзея, і што мы робім

44
00:02:12,120 --> 00:02:16,890
як мы звязваючы выпадку націску на гэтую кнопку, каб выканаць гэтую функцыю.

45
00:02:16,890 --> 00:02:21,700
AddTodo гэта апрацоўшчык падзеі для націску гэтай кнопкі.

46
00:02:21,700 --> 00:02:25,010
>> Як вы можаце бачыць, калі я націскаю на кнопку Стварыць элемент

47
00:02:25,010 --> 00:02:29,940
на падзеі націску звальняюць, і гэтая функцыя выклікаецца.

48
00:02:29,940 --> 00:02:33,170
Давайце паглядзім на функцыю.

49
00:02:33,170 --> 00:02:36,260
Як вы можаце бачыць, вось мой код JavaScript да гэтага часу.

50
00:02:36,260 --> 00:02:41,280
Тое, што я на самым версе глабальнай структурай дадзеных для майго спісу спраў.

51
00:02:41,280 --> 00:02:44,060
Падобна на тое масіва. Гэта проста пусты масіў.

52
00:02:44,060 --> 00:02:47,100
А то ў мяне addTodo функцыя, якую мы бачылі раней,

53
00:02:47,100 --> 00:02:50,740
і адзіная радок кода ў гэтым ёсць папярэджанне.

54
00:02:50,740 --> 00:02:55,730
Ён папярэджвае ажыццяўлення мяне, а потым у мяне ёсць 2 задач.

55
00:02:55,730 --> 00:02:58,790
Я павінен дадаць, што трэба будзе зрабіць, каб, што глабальная структура дадзеных,

56
00:02:58,790 --> 00:03:01,860
а затым я хачу, каб выцягнуць To-Do List.

57
00:03:01,860 --> 00:03:06,360
Нішто таксама не ўяўляе сабе проста пакуль няма, але вы JavaScript могуць быць незнаёмыя з,

58
00:03:06,360 --> 00:03:12,370
так што я збіраюся ісці павольна і перагледзець асновы JavaScript такім чынам.

59
00:03:12,370 --> 00:03:15,490
>> Давайце дамо гэтаму стрэл.

60
00:03:15,490 --> 00:03:21,130
Дапусьцім, карыстальнік ўводзіць нешта ў гэтай скрынцы.

61
00:03:21,130 --> 00:03:23,360
Я толькі што ўвялі нешта ў гэтым тэксце.

62
00:03:23,360 --> 00:03:27,620
Як адсартаваць доступу, тэкст праз JavaScript?

63
00:03:27,620 --> 00:03:32,500
Памятаеце, што JavaScript, адна з яго асноўных рыс з'яўляецца тое, што яна дае нам

64
00:03:32,500 --> 00:03:34,670
гэта праграмны доступ да DOM.

65
00:03:34,670 --> 00:03:40,670
Гэта дазваляе нам атрымаць доступ да элементаў і іх уласцівасцях гэтай актуальнай HTML.

66
00:03:40,670 --> 00:03:43,430
Як мы робім, што з голымі косткамі JavaScript

67
00:03:43,430 --> 00:03:51,360
гэта мы сапраўды можам выкарыстоўваць функцыю JavaScript называецца GetElementById.

68
00:03:51,360 --> 00:03:55,140
Я хачу захаваць тэкст, які набраў там у некаторую зменную,

69
00:03:55,140 --> 00:03:58,350
так што я збіраюся сказаць, новую зменную па імя new_todo,

70
00:03:58,350 --> 00:04:01,980
і я збіраюся атрымаць гэты элемент.

71
00:04:01,980 --> 00:04:06,330
Гэта функцыя,. GetElementById.

72
00:04:06,330 --> 00:04:11,580
І цяпер я атрымліваю элемента па ідэнтыфікатары, так што мне трэба ідэнтыфікатар, што тэкставае поле,

73
00:04:11,580 --> 00:04:15,860
таму я даў яму ID new_todo_description.

74
00:04:15,860 --> 00:04:18,399
Вось як я іду, каб атрымаць элемент.

75
00:04:18,399 --> 00:04:23,880
Гэта мой аргумент гэтай функцыі, каб паказаць, якія ID атрымаць.

76
00:04:23,880 --> 00:04:28,110
І такім чынам, гэта элемент HTML, і ён мае ўласцівасці.

77
00:04:28,110 --> 00:04:30,650
Вы бачылі гэта. Яны атрыбуты.

78
00:04:30,650 --> 00:04:37,090
Атрыбут элемента тэксту, які захоўвае уведзеныя карыстачом, называецца значэннем.

79
00:04:37,090 --> 00:04:40,860
Я захаваў значэнне гэтага тэкставага поля цяпер у гэтай зменнай new_todo.

80
00:04:40,860 --> 00:04:45,040
Цяпер у мяне ёсць праграмны доступ да гэтай зменнай, якая крута

81
00:04:45,040 --> 00:04:49,200
таму што цяпер, што я магу зрабіць, гэта я магу дадаць яго ў свой спіс спраў.

82
00:04:49,200 --> 00:04:52,870
>> Тое, як мы зрабілі б гэта ў JavaScript-і не хвалюйцеся, калі вы не знаёмыя з гэтым,

83
00:04:52,870 --> 00:04:57,010
але проста перажывае гэта todos.push

84
00:04:57,010 --> 00:05:00,130
, Таму што гэта імя майго глабальную структуру дадзеных тут,

85
00:05:00,130 --> 00:05:04,450
і я збіраюся націснуць new_todo.

86
00:05:04,450 --> 00:05:09,120
Гэта вельмі зручна, таму што цяпер я дадаў яго да маёй JavaScript

87
00:05:09,120 --> 00:05:11,280
ўяўленне гэтага спісу спраў.

88
00:05:11,280 --> 00:05:15,170
Але цяпер як я магу атрымаць яго назад у HTML?

89
00:05:15,170 --> 00:05:18,560
Я павінен знайсці спосаб сартавання з устаўце яго назад.

90
00:05:18,560 --> 00:05:21,830
Іншымі словамі, я, здаецца, мусяць звярнуць на гэта.

91
00:05:21,830 --> 00:05:26,060
Тое, што мы збіраемся зрабіць, гэта мы збіраемся зрабіць спіс спраў.

92
00:05:26,060 --> 00:05:29,270
Мне трэба абнавіць іншыя HTML на гэтай старонцы,

93
00:05:29,270 --> 00:05:32,040
і як вы можаце бачыць, я пакінуў гэтую маленькую кантэйнер тут,

94
00:05:32,040 --> 00:05:36,840
гэта дзельнік старонкі з ідэнтыфікатарам Todos,

95
00:05:36,840 --> 00:05:40,870
і я збіраюся паставіць спіс спраў там.

96
00:05:40,870 --> 00:05:47,240
Спачатку я іду, каб ачысціць яго, таму што, скажам, быў стары спіс спраў там.

97
00:05:47,240 --> 00:05:49,560
Я атрымліваю гэты элемент па ID зноў,

98
00:05:49,560 --> 00:05:54,530
і я доступ да унутраным HTML гэтага элемента,

99
00:05:54,530 --> 00:05:58,010
і я збіраюся зразумець, што.

100
00:05:58,010 --> 00:06:05,510
Калі мы пакінулі гэты код як ёсць, мы не ўбачылі б нічога, пустое,

101
00:06:05,510 --> 00:06:10,410
і цяпер я хачу пачаць прадастаўленне мой новы спіс спраў.

102
00:06:10,410 --> 00:06:12,870
Я ў асноўным збіраюцца знішчыць мой спіс спраў.

103
00:06:12,870 --> 00:06:18,180
>> Цяпер ўнутраны HTML ўнутры гэтага DIV Todos зусім ясна,

104
00:06:18,180 --> 00:06:20,060
і цяпер мне трэба, каб пачаць дадаваць маім спісе.

105
00:06:20,060 --> 00:06:23,890
Першае, што я хачу дадаць спіна неўпарадкаваных спіс тэгаў,

106
00:06:23,890 --> 00:06:33,890
які ў асноўным азначае, што гэта пачатак неўпарадкаваных спіс.

107
00:06:33,890 --> 00:06:39,770
Зараз для кожнага элемента ў маім масіве Todos Я хачу надрукаваць яго ўнутры гэтага HTML.

108
00:06:39,770 --> 00:06:43,710
Я хачу дадаць яго да ніжняй часткі гэтага спісу.

109
00:06:43,710 --> 00:06:49,040
Гэтак жа, як у C, я магу выкарыстоўваць для завесы, і я збіраюся пачаць у пачатку майго спісу

110
00:06:49,040 --> 00:06:54,140
на элемент 0, і я збіраюся прайсці ўвесь шлях да даўжыні спісу.

111
00:06:54,140 --> 00:07:01,100
Мы можам рэальна атрымаць даўжыню масіва ў JavaScript па даўжыні уласнасці.

112
00:07:01,100 --> 00:07:03,420
У асноўным, я збіраюся зрабіць нешта вельмі падобнае ўнутры тут

113
00:07:03,420 --> 00:07:05,600
раздрукаваць гэты элемент.

114
00:07:05,600 --> 00:07:12,970
Я магу зноў атрымае доступ да Todos DIV, унутраны HTML ўласцівасць, што,

115
00:07:12,970 --> 00:07:17,560
і я збіраюся дадаць на гэтым новы элемент спісу, і што збіраецца быць у асяроддзі

116
00:07:17,560 --> 00:07:25,390
гэты тэг Лі, і я збіраюся аб'яднаць пры дапамозе аператара +,

117
00:07:25,390 --> 00:07:28,040
і гэта-й элемент масіва маёй Todos,

118
00:07:28,040 --> 00:07:32,380
і тады я іду, каб закрыць гэты тэг.

119
00:07:32,380 --> 00:07:36,240
Зараз для кожнага элемента мы дадамо новую запіс спісу.

120
00:07:36,240 --> 00:07:48,700
І тады ўсё, што мы сапраўды павінны зрабіць, гэта зачыніць гэты тэг.

121
00:07:48,700 --> 00:07:52,820
Мне проста трэба, каб закрыць, што неўпарадкаваных спіс тэгаў.

122
00:07:52,820 --> 00:07:55,490
>> Вы адчуеце, як гэта працуе?

123
00:07:55,490 --> 00:07:57,700
Гэта адкрывае ўвесь спіс.

124
00:07:57,700 --> 00:08:01,080
Гэта дадае асобныя элементы з спісу Todos ў спіс,

125
00:08:01,080 --> 00:08:05,470
а затым, што закрывае ўвесь спіс, і гэта мой addTodo функцыі.

126
00:08:05,470 --> 00:08:09,590
Я ў асноўным Пачніце атрымліваць TODO з тэкставага поля.

127
00:08:09,590 --> 00:08:18,950
Дадам, што ў масіў Todos, а потым я зноў зрабіць спіс спраў.

128
00:08:18,950 --> 00:08:21,520
Цяпер я магу дадаць элементы ў маім спісе.

129
00:08:21,520 --> 00:08:24,620
Гэта свайго роду захапляльным, таму што ўсяго некалькі радкоў кода

130
00:08:24,620 --> 00:08:28,240
мы ў асноўным зроблены спіс спраў, дзе мы можам дадаць элементы.

131
00:08:28,240 --> 00:08:30,050
Вялікі.

132
00:08:30,050 --> 00:08:34,480
Гэта накшталт таго, увядзенне ў JavaScript.

133
00:08:34,480 --> 00:08:36,179
Не турбуйцеся занадта шмат пра сінтаксісе на дадзены момант,

134
00:08:36,179 --> 00:08:38,130
але думаць пра гэта канцэптуальна.

135
00:08:38,130 --> 00:08:40,539
У нас былі некаторыя HTML.

136
00:08:40,539 --> 00:08:45,310
У нас было тэкставае поле на старонцы, якая ў асноўным дазваляе карыстальнікам ўводзіць элемент спісу, каб дадаць.

137
00:08:45,310 --> 00:08:49,210
А потым мы выкарыстоўвалі JavaScript атрымаць гэтую TODO ад тэкставага поля.

138
00:08:49,210 --> 00:08:52,830
Мы захавалі, што ўсярэдзіне масіва JavaScript, якія ў асноўным, як

139
00:08:52,830 --> 00:08:56,010
нашы праграмнае ўяўленне, што спіс спраў,

140
00:08:56,010 --> 00:08:59,060
і тады мы распячатаў яго.

141
00:08:59,060 --> 00:09:02,690
Гэта todos.js.

142
00:09:02,690 --> 00:09:07,620
>> Гэта крута, але як мы можам прыняць гэта далей?

143
00:09:07,620 --> 00:09:11,350
Ну, як вы можаце бачыць, гэта не як поўны спіс спраў.

144
00:09:11,350 --> 00:09:15,100
Я, напрыклад, не можа адзначыць любы з гэтых элементаў як няпоўныя,

145
00:09:15,100 --> 00:09:19,920
як калі б я хацеў змяніць прыярытэты пунктаў або выключаць пункты.

146
00:09:19,920 --> 00:09:23,150
Гэта добра, але мы можам узяць гэтае пытанне.

147
00:09:23,150 --> 00:09:29,280
Я не буду казаць занадта шмат пра даданні дадатковых функцый,

148
00:09:29,280 --> 00:09:32,800
але мы маглі б лічыць, што далей.

149
00:09:32,800 --> 00:09:35,970
Давайце пагаворым аб даданні яшчэ адна асаблівасць гэтай спіс спраў,

150
00:09:35,970 --> 00:09:40,370
які будзе магчымасці праверыць індывідуальны элемент спісу

151
00:09:40,370 --> 00:09:44,780
і гэта закрэсліць, таму ў асноўным кажуць, што я зрабіў гэта.

152
00:09:44,780 --> 00:09:50,240
Давайце паглядзім на некаторыя код, які можа дамагчыся гэтага.

153
00:09:50,240 --> 00:09:52,740
Звярніце ўвагу, што я зрабіў на самым версе я дадаў

154
00:09:52,740 --> 00:09:57,620
новы глабальны масіў называецца поўным.

155
00:09:57,620 --> 00:10:02,890
Я ў асноўным выкарыстоўваюць гэта, каб захоўваць Ці дэталі на To-Do List

156
00:10:02,890 --> 00:10:06,560
поўныя ці не.

157
00:10:06,560 --> 00:10:08,470
Гэта адзін са спосабаў зрабіць гэта.

158
00:10:08,470 --> 00:10:13,750
Калі я гляджу на ажыццяўленне гэтага, дысплей,

159
00:10:13,750 --> 00:10:21,120
У асноўным, калі я ўваходжу ў TODO і я націскаю гэтую кнопку-перамыкач

160
00:10:21,120 --> 00:10:25,040
гэта перакрэслівае, таму кожны пункт у гэтым спісе альбо поўны

161
00:10:25,040 --> 00:10:31,050
або незавершаным стане, і я выкарыстоўваю іншы масіў для прадстаўлення гэтага.

162
00:10:31,050 --> 00:10:33,730
>> У асноўным, для кожнага TODO у гэтым масіве Todos

163
00:10:33,730 --> 00:10:37,110
ёсць пункт у поўны масіў, які ў асноўным азначае,

164
00:10:37,110 --> 00:10:39,060
няхай гэта будзе поўнае ці не.

165
00:10:39,060 --> 00:10:41,640
У мяне было даволі, каб зрабіць мінімальныя змены ў гэты код,

166
00:10:41,640 --> 00:10:44,470
так вось нашы addTodo функцыі.

167
00:10:44,470 --> 00:10:48,530
Звярніце ўвагу, што тут я вылучаю на масіве,

168
00:10:48,530 --> 00:10:51,300
а затым я вылучаю, што ад 0 да поўнага масіва,

169
00:10:51,300 --> 00:10:57,090
у асноўным паралельна з гэтым новы штуршок TODO сказаць

170
00:10:57,090 --> 00:11:00,430
Я дадаю гэты пункт, і гэта ў спалучэнні з гэтага значэння,

171
00:11:00,430 --> 00:11:02,810
што азначае, што ён апынуўся няпоўным.

172
00:11:02,810 --> 00:11:04,970
А потым я перамалёўкі To-Do List.

173
00:11:04,970 --> 00:11:09,220
Зараз звернеце ўвагу, я дадаў гэтую drawTodoList функцыі.

174
00:11:09,220 --> 00:11:11,760
Гэта займае шмат кода, што было раней,

175
00:11:11,760 --> 00:11:15,320
у асноўным чысціць вокны, а затым малюе новае спіс спраў.

176
00:11:15,320 --> 00:11:19,620
Але звярніце ўвагу, што ўнутры гэтага цыклу мы робім трохі больш цяпер.

177
00:11:19,620 --> 00:11:25,000
Мы ў асноўным праверкі, ці з'яўляецца элемент, які адпавядае й TODO тут

178
00:11:25,000 --> 00:11:30,220
завершана, і мы сябе па-рознаму ў гэтых 2 абставінаў.

179
00:11:30,220 --> 00:11:32,790
Калі гэта поўнае, мы дадаем гэты тэг справе,

180
00:11:32,790 --> 00:11:35,360
які з'яўляецца ў асноўным так, як вы можаце атрымаць, што праніжа эфект

181
00:11:35,360 --> 00:11:38,190
вычеркивания спіс спраў, калі гэта поўнае,

182
00:11:38,190 --> 00:11:42,200
і калі гэта не так, мы не уключаючы яго.

183
00:11:42,200 --> 00:11:45,030
І так, каб збольшага клапоціцца пра гэта,

184
00:11:45,030 --> 00:11:49,140
>> і гэта адзін са спосабаў для дасягнення гэтай мэты.

185
00:11:49,140 --> 00:11:53,420
І звярніце ўвагу на тое, калі карыстальнік націскае адну з гэтых

186
00:11:53,420 --> 00:11:56,780
мы перамыкаемся стан завяршэння яго.

187
00:11:56,780 --> 00:12:02,170
Калі карыстач націскае кнопку, мы будзем зваротная Ці гэта былі завершаны ці не,

188
00:12:02,170 --> 00:12:04,540
і тады мы будзем перамалёўваць яго.

189
00:12:04,540 --> 00:12:06,190
Гэты выгляд прац.

190
00:12:06,190 --> 00:12:09,860
У нас ёсць гэтыя функцыі, якія выконваюць свае ўласныя задачы,

191
00:12:09,860 --> 00:12:11,730
і гэта добра.

192
00:12:11,730 --> 00:12:14,110
Ці ёсць што-небудзь, што мы маглі зрабіць лепш пра гэта, праўда?

193
00:12:14,110 --> 00:12:18,700
Звярніце ўвагу, у нас ёсць гэтыя 2 глабальных масіваў.

194
00:12:18,700 --> 00:12:23,550
Калі б гэта быў C, і ў нас было 2 масіваў такой прадстаўлены

195
00:12:23,550 --> 00:12:25,800
дадзеных, які быў свайго роду звязаны ў некаторым родзе

196
00:12:25,800 --> 00:12:30,140
што б мы выкарыстоўваць у C, каб аб'яднаць гэтыя 2 поля

197
00:12:30,140 --> 00:12:35,420
у тое, што Інкапсулюйце і частак інфармацыі?

198
00:12:35,420 --> 00:12:37,600
Хто-небудзь хоча ўнесці прапанову?

199
00:12:37,600 --> 00:12:39,450
[Студэнцкія чуваць адказу]

200
00:12:39,450 --> 00:12:42,340
>> Менавіта так, каб мы маглі выкарыстоўваць нейкія структуры,

201
00:12:42,340 --> 00:12:44,960
і калі вы ўспомніце, скажам, PSET 3,

202
00:12:44,960 --> 00:12:47,350
памятаю, мы былі слоўніка, а затым у нас ці было слова

203
00:12:47,350 --> 00:12:50,230
было ў слоўніку, і ўсё, што інфармацыя была сабраная

204
00:12:50,230 --> 00:12:52,420
ўнутры некаторых структураў дадзеных.

205
00:12:52,420 --> 00:12:56,390
Адна рэч, якую я магу зрабіць з гэтым кодам, каб пазбегнуць гэтых 2 розных масівах

206
00:12:56,390 --> 00:13:01,760
для аналагічных частак інфармацыі я магу аб'яднаць іх у аб'ект JavaScript.

207
00:13:01,760 --> 00:13:07,150
Давайце зірнем на гэта.

208
00:13:07,150 --> 00:13:11,740
Звярніце ўвагу, у мяне толькі адзін масіў у верхняй зараз

209
00:13:11,740 --> 00:13:17,650
і тое, што я зрабіў,-і гэта толькі сінтаксіс JavaScript для роду

210
00:13:17,650 --> 00:13:21,350
стварэнне літаральным версію аб'екта,

211
00:13:21,350 --> 00:13:24,670
і заўважыце, што ёсць 2 ўласцівасці, таму мы павінны TODO,

212
00:13:24,670 --> 00:13:29,660
і ён захоўваецца разам з ці гэта поўным або няпоўным.

213
00:13:29,660 --> 00:13:31,000
Гэта вельмі падобна кода.

214
00:13:31,000 --> 00:13:35,310
Мы выкарыстоўваем JavaScript аб'ектаў.

215
00:13:35,310 --> 00:13:38,600
Гэты выгляд паляпшае рэчаў.

216
00:13:38,600 --> 00:13:43,850
Як і зараз, усе гэтыя поля адпаведнай інфармацыяй ўтрымліваюцца разам.

217
00:13:43,850 --> 00:13:46,410
Калі мы ідзем у раздрукуйце яго, мы можам атрымаць доступ да палёў.

218
00:13:46,410 --> 00:13:49,060
>> Звярніце ўвагу, як мы робім Todos [I]. Поўнай

219
00:13:49,060 --> 00:13:52,880
замест праверкі поўным наборам паасобку,

220
00:13:52,880 --> 00:13:56,560
і заўважыць, калі мы хочам атрымаць спіс спраў радок мы атрымліваем спіс спраў уласнасці

221
00:13:56,560 --> 00:13:58,750
гэтага спісу задач, таму гэты выгляд мае сэнс, паколькі

222
00:13:58,750 --> 00:14:01,660
Кожная рэч мае гэтыя ўнутраныя ўласцівасці пра гэта.

223
00:14:01,660 --> 00:14:05,650
Ён мае спісу задач, і яна мае гэта поўнае ці не.

224
00:14:05,650 --> 00:14:11,540
Ці не занадта шмат змен там функцыянальна, проста дадалі яшчэ некалькі, каб кода.

225
00:14:11,540 --> 00:14:13,430
Гэта паляпшэнне на некаторых франтах, ці не так?

226
00:14:13,430 --> 00:14:16,030
Я маю на ўвазе, мы факторизовали дызайн няшмат.

227
00:14:16,030 --> 00:14:20,350
Цяпер у нас ёсць аб'екты, каб у асноўным гэта інкапсуляцыі дадзеных.

228
00:14:20,350 --> 00:14:27,130
Ёсць што-небудзь больш мы маглі б зрабіць адсюль з пункту гледжання JavaScript?

229
00:14:27,130 --> 00:14:31,810
Падабаецца Звярніце ўвагу, што гэты код прама тут

230
00:14:31,810 --> 00:14:34,760
для атрымання ўнутранага HTML з DIV

231
00:14:34,760 --> 00:14:40,520
Трохі, я думаю, доўга.

232
00:14:40,520 --> 00:14:45,100
Там у document.getElementById ("Todos»). Innerhtml.

233
00:14:45,100 --> 00:14:48,400
Адзінае, што мы маглі зрабіць, каб зрабіць гэты код выглядаць трохі больш добразычлівым

234
00:14:48,400 --> 00:14:51,450
так што я не павінен трымаць пракруткі налева і направа, назад і наперад,

235
00:14:51,450 --> 00:14:58,480
гэта я магу выкарыстоўваць бібліятэку як JQuery.

236
00:14:58,480 --> 00:15:02,710
>> Давайце праверым Семінар 2,

237
00:15:02,710 --> 00:15:05,880
і гэта той жа самы код, але гэта зроблена з JQuery.

238
00:15:05,880 --> 00:15:08,790
Вы не можаце быць занадта добра знаёмыя з JQuery,

239
00:15:08,790 --> 00:15:11,510
але проста ведаю, што JQuery з'яўляецца свайго роду бібліятэка для JavaScript

240
00:15:11,510 --> 00:15:15,910
што робіць яго лягчэй рабіць такія рэчы доступу да асобных элементаў DOM.

241
00:15:15,910 --> 00:15:21,280
Тут замест таго каб сказаць document.getElementById ("Todos»). Innerhtml

242
00:15:21,280 --> 00:15:25,210
Я магу выкарыстоўваць значна спосабам прыбіральшчыцай у JQuery,

243
00:15:25,210 --> 00:15:28,490
які знаходзіцца за ўсё выкарыстоўваць селектары.

244
00:15:28,490 --> 00:15:31,300
Як вы можаце бачыць, гэты код сапраўды станавіўся трохі чысцей,

245
00:15:31,300 --> 00:15:35,770
вельмі падобныя функцыянальна, але гэта ідэя.

246
00:15:35,770 --> 00:15:37,980
Мы бачылі некалькі рэчаў, да гэтага часу,

247
00:15:37,980 --> 00:15:42,010
таму мы пачалі толькі з сырам рэалізацыі JavaScript.

248
00:15:42,010 --> 00:15:45,370
Мы дадалі новыя функцыі і паказаў, як мы можам палепшыць яго з

249
00:15:45,370 --> 00:15:49,090
толькі тое, што мы маем у JavaScript.

250
00:15:49,090 --> 00:15:53,300
>> Хто-небудзь бачыць цяжкасцяў з гэтым праектам?

251
00:15:53,300 --> 00:16:01,090
А менавіта, я думаю, ці не абавязкова цяжкасці, але скажам,

252
00:16:01,090 --> 00:16:04,830
Мы не рабілі спіс спраў праекта, а заўтра мы вырашылі

253
00:16:04,830 --> 00:16:10,320
мы хацелі зрабіць спіс пакупак або праекта спіс пакупак.

254
00:16:10,320 --> 00:16:14,150
Многія з гэтых функцый вельмі падобныя.

255
00:16:14,150 --> 00:16:19,080
Многія рэчы, якія мы хочам выйсці з JavaScript вельмі распаўсюджаны,

256
00:16:19,080 --> 00:16:23,820
і гэта падкрэслівае неабходнасць нейкі спосаб

257
00:16:23,820 --> 00:16:25,670
робіць гэта лягчэй зрабіць.

258
00:16:25,670 --> 00:16:30,400
Я павінен быў стварыць усё гэта HTML доступу, усё гэта доступ DOM,

259
00:16:30,400 --> 00:16:35,530
як я збіраюся прадстаўляць To-Do List з гэтай мадэллю.

260
00:16:35,530 --> 00:16:39,130
І заўважце, я адказваю як распрацоўшчык JavaScript

261
00:16:39,130 --> 00:16:42,890
для захоўвання HTML і JavaScript, што ў мяне ў сінхранізацыі.

262
00:16:42,890 --> 00:16:48,040
Нічога, што аўтаматычна становяцца JavaScript ўяўленне

263
00:16:48,040 --> 00:16:51,590
ці спіс спраў атрымаць выцесненыя HTML.

264
00:16:51,590 --> 00:16:54,000
Нішто не гвалтоўнае што акрамя мяне.

265
00:16:54,000 --> 00:16:56,880
Я павінен быў напісаць нічыя спіс спраў функцыі.

266
00:16:56,880 --> 00:17:01,650
І гэта можа быць не-Я маю на ўвазе, што гэта разумна, каб зрабіць гэта,

267
00:17:01,650 --> 00:17:03,670
але гэта можа быць стомна часам.

268
00:17:03,670 --> 00:17:08,190
Калі ў вас ёсць больш буйны праект, які можа быць абцяжараны.

269
00:17:08,190 --> 00:17:10,720
>> Каркасы адной з мэтаў рамак

270
00:17:10,720 --> 00:17:14,060
з'яўляецца спрашчэнне гэтага працэсу і як бы вынесці за дужкі

271
00:17:14,060 --> 00:17:16,950
гэтыя агульныя-Я думаю, можна сказаць-шаблонаў праектавання

272
00:17:16,950 --> 00:17:20,700
што людзі наогул ёсць нейкі спосаб прадстаўлення даных,

273
00:17:20,700 --> 00:17:25,599
няхай гэта будзе спіс сяброў, няхай гэта будзе карты інфармацыі

274
00:17:25,599 --> 00:17:27,280
або што-то ці спіс спраў.

275
00:17:27,280 --> 00:17:30,660
Некаторыя людзі маюць у цэлым спосаб прадстаўлення інфармацыі

276
00:17:30,660 --> 00:17:33,650
і яны ў цэлым павінны трымаць гэтую інфармацыю роду ў сінхранізацыі

277
00:17:33,650 --> 00:17:36,520
паміж тым, што карыстальнік бачыць у нейкі гледжання,

278
00:17:36,520 --> 00:17:39,850
Гаворачы з пункту гледжання, як мадэль кантролера меркаванне, што вы бачылі ў лекцыі,

279
00:17:39,850 --> 00:17:45,400
і затым мадэль, якая ў дадзеным выпадку гэта масіў JavaScript.

280
00:17:45,400 --> 00:17:49,020
Рамкі даць нам магчымасць вырашыць гэтую праблему.

281
00:17:49,020 --> 00:17:53,080
Зараз давайце зірнем на ажыццяўленне гэтага спісу спраў

282
00:17:53,080 --> 00:18:02,360
У рамках званыя angularjs.

283
00:18:02,360 --> 00:18:04,650
Вось і ўсё. Звярніце ўвагу, ён падыходзіць на слайдзе.

284
00:18:04,650 --> 00:18:07,330
Я не прыйдзецца пракручваць налева і направа.

285
00:18:07,330 --> 00:18:10,460
Гэта, верагодна, не адна прычына, каб рэкамендаваць выкарыстанне асяроддзя,

286
00:18:10,460 --> 00:18:20,120
Але звярніце ўвагу, я калі-небудзь доступ да асобных элементаў HTML тут?

287
00:18:20,120 --> 00:18:22,400
Ці маю я калі-небудзь у DOM?

288
00:18:22,400 --> 00:18:26,120
Ці бачыце вы document.getElementById ці нешта накшталт гэтага?

289
00:18:26,120 --> 00:18:29,870
Не, гэта сышло.

290
00:18:29,870 --> 00:18:35,590
>> Кутняе дапамагае нам трымаць DOM і JavaScript нашым уяўленні нешта

291
00:18:35,590 --> 00:18:40,430
выгляд у сінхранізацыі, так што калі гэта не ў файле JS,

292
00:18:40,430 --> 00:18:46,790
калі няма ніякай магчымасці праграмна каб дабрацца да ўсіх, што HTML зместу

293
00:18:46,790 --> 00:18:51,800
ад JavaScript як мы Маючы гэта ў сінхранізацыі?

294
00:18:51,800 --> 00:18:58,160
Калі гэта не ў. Выява JS, ён павінен быць у HTML, праўда?

295
00:18:58,160 --> 00:19:01,910
Гэта новая версія HTML файла,

296
00:19:01,910 --> 00:19:04,660
і, заўважце, мы дадалі шмат тут.

297
00:19:04,660 --> 00:19:11,110
Заўважыце, што гэтыя новыя атрыбуты, якія кажуць, НГ-клік і NG-паўтор.

298
00:19:11,110 --> 00:19:15,650
Кутняе падыход да вырашэння гэтай праблемы цяжкасцяў у дызайне

299
00:19:15,650 --> 00:19:19,130
з'яўляецца ў асноўным робяць HTML значна больш магутным.

300
00:19:19,130 --> 00:19:24,420
Кутняе гэта спосаб дазваляе зрабіць HTML некалькі больш выразным.

301
00:19:24,420 --> 00:19:30,520
Напрыклад, я магу сказаць, што я збіраюся звязаць або звязваць гэта тэкставае поле

302
00:19:30,520 --> 00:19:35,080
зменнай у маёй Кутняе кода JavaScript.

303
00:19:35,080 --> 00:19:37,030
Гэта НГ-мадэль робіць менавіта гэта.

304
00:19:37,030 --> 00:19:41,550
Гэта ў асноўным кажа, што элемент ўнутры гэтага тэкставага поля,

305
00:19:41,550 --> 00:19:45,000
проста звязаць яго з зменнай new_todo_description

306
00:19:45,000 --> 00:19:47,870
у кодзе JavaScript.

307
00:19:47,870 --> 00:19:51,600
Гэта вельмі магутны, таму што ў мяне няма відавочнага пайсці

308
00:19:51,600 --> 00:19:53,310
DOM, каб атрымаць гэтую інфармацыю.

309
00:19:53,310 --> 00:19:56,250
Я не павінен сказаць document.getElementById.

310
00:19:56,250 --> 00:19:58,750
Я не павінен выкарыстоўваць jQueries як доступ DOM.

311
00:19:58,750 --> 00:20:03,280
Я магу звязаць яго з зменнай, а затым, калі я змяніць гэтую зменную

312
00:20:03,280 --> 00:20:07,400
у JavaScript ён захоўваецца ў сінхранізацыі з HTML,

313
00:20:07,400 --> 00:20:11,640
так, што спрашчае працэс таго, каб ісці наперад і таму паміж імі.

314
00:20:11,640 --> 00:20:18,260
Ці мае гэта сэнс?

315
00:20:18,260 --> 00:20:22,060
>> І заўважце, няма ніякага HTML код доступу.

316
00:20:22,060 --> 00:20:27,760
Мы толькі што зрабілі HTML больш магутным,

317
00:20:27,760 --> 00:20:32,070
і цяпер, напрыклад, мы можам рабіць такія рэчы,

318
00:20:32,070 --> 00:20:38,610
падабаецца, калі вы націснеце на гэтую, выклікаць гэтую функцыю ў рамках todos.js,

319
00:20:38,610 --> 00:20:43,410
і мы маглі б зрабіць гэта і раней, але ёсць і іншыя рэчы, як гэты НГ-мадэлі,

320
00:20:43,410 --> 00:20:47,020
і заўважыць гэта НГ-паўтор.

321
00:20:47,020 --> 00:20:51,520
Як вы думаеце, гэта робіць?

322
00:20:51,520 --> 00:20:54,390
Вось наш неўпарадкаваных спіс, чым раней.

323
00:20:54,390 --> 00:20:56,470
У нас ёсць уль тэгаў,

324
00:20:56,470 --> 00:21:03,710
але я ніколі пазбаўлення гэтага спісу ўнутры кода JavaScript?

325
00:21:03,710 --> 00:21:09,280
Я ніколі не відавочна аказанне гэтым спісе.

326
00:21:09,280 --> 00:21:11,580
Як гэта працуе?

327
00:21:11,580 --> 00:21:16,410
Ну, то, як выконвае гэта Кутняе гэта называецца рэтранслятар.

328
00:21:16,410 --> 00:21:22,760
У асноўным, гэта кажа, што я хачу, каб раздрукаваць гэтую HTML

329
00:21:22,760 --> 00:21:26,240
для кожнага ўнутры TODO майго масіва Todos.

330
00:21:26,240 --> 00:21:31,850
Усярэдзіне todos.jr ёсць Todos масіве прама тут,

331
00:21:31,850 --> 00:21:37,910
і гэта скажа Кутняе прайсці праз гэта масіў, і для кожнага элемента вы бачыце

332
00:21:37,910 --> 00:21:41,390
Я хачу, каб раздрукаваць гэтую HTML.

333
00:21:41,390 --> 00:21:44,620
Гэта свайго роду дзіўным, таму што я проста магу зрабіць гэта

334
00:21:44,620 --> 00:21:47,760
без таго, каб напісаць цыкл,

335
00:21:47,760 --> 00:21:52,250
які для спісу спраў, што складала толькі 30 радкоў кода

336
00:21:52,250 --> 00:21:54,700
Не можа быць найбольш выгадны,

337
00:21:54,700 --> 00:22:01,240
але калі ў вас ёсць вялікі праект, гэта магло стаць вельмі зручна.

338
00:22:01,240 --> 00:22:06,100
>> Гэта адно рашэнне гэтай праблемы, у выніку чаго HTML больш магутнымі,

339
00:22:06,100 --> 00:22:10,820
і што дазваляе нам трымаць JavaScript і HTML ў сінхранізацыі.

340
00:22:10,820 --> 00:22:13,220
Існуюць і іншыя магчымыя спосабы вырашэння гэтай праблемы

341
00:22:13,220 --> 00:22:15,320
і не кожны робіць гэта рамкі.

342
00:22:15,320 --> 00:22:17,720
Не кожны рамках работы ў гэтым кірунку.

343
00:22:17,720 --> 00:22:19,490
Некаторыя мадэлі маюць розныя падыходы,

344
00:22:19,490 --> 00:22:23,310
і вы можаце выявіць, што вам падабаецца кадавання ў адной рамкі над іншым.

345
00:22:23,310 --> 00:22:26,160
Давайце паглядзім на яшчэ адзін.

346
00:22:26,160 --> 00:22:30,060
Гэта спіс спраў закадаваныя ў рамках званыя пазваночніка.

347
00:22:30,060 --> 00:22:33,250
Я збіраюся прайсці праз гэта хутка.

348
00:22:33,250 --> 00:22:38,300
Я пачну з HTML, перш чым ісці туды.

349
00:22:38,300 --> 00:22:40,290
Адна секунда.

350
00:22:40,290 --> 00:22:43,950
Пачынаючы з HTML, як вы заўважылі, наш HTML вельмі падобны

351
00:22:43,950 --> 00:22:50,000
да таго, што было раней, так не занадта шмат новага на гэтым фронце.

352
00:22:50,000 --> 00:22:55,410
Але наш JS файл трохі адрозніваецца.

353
00:22:55,410 --> 00:23:00,360
Магістральная выгляд мае гэтая ідэя, ці будуецца на ідэі

354
00:23:00,360 --> 00:23:04,750
, Што шмат чаго, што мы робім, скажам, з нашымі праектамі JavaScript

355
00:23:04,750 --> 00:23:09,110
гэта думаць пра мадэлі калекцыі гэтых мадэляў.

356
00:23:09,110 --> 00:23:12,510
Гэта можа быць, напрыклад, фатаграфію і калекцыі фатаграфій,

357
00:23:12,510 --> 00:23:16,230
або ідэю сябра і калекцый сяброў.

358
00:23:16,230 --> 00:23:20,700
І часта, калі мы праграмуем JavaScript прыкладанняў

359
00:23:20,700 --> 00:23:25,340
мы накшталт ўяўляюць ідэя мець калекцыю сяброў

360
00:23:25,340 --> 00:23:29,500
неяк у JavaScript, і Магістральная дае нам гэты пласт

361
00:23:29,500 --> 00:23:33,040
-над існай масіваў JavaScript і аб'ектаў

362
00:23:33,040 --> 00:23:38,300
рабіць больш магутныя рэчы, што больш лёгка.

363
00:23:38,300 --> 00:23:41,870
>> Тут я вызначыў To-Do мадэлі,

364
00:23:41,870 --> 00:23:44,630
і вы не павінны занадта турбавацца аб сінтаксісе,

365
00:23:44,630 --> 00:23:48,730
не заўважыць, што тое, што адным з уласцівасцяў гэтага?

366
00:23:48,730 --> 00:23:53,190
Яна мае поля па змаўчанні.

367
00:23:53,190 --> 00:23:56,640
Магістральная дазваляе мне задаць ужо з месца ў кар'ер

368
00:23:56,640 --> 00:24:00,190
любая Новая справа, што я ствараю будзе мець гэтыя значэнні па змаўчанні.

369
00:24:00,190 --> 00:24:04,100
Цяпер я магу наладзіць гэта, але, будучы ў стане вызначыць значэнні па змаўчанні

370
00:24:04,100 --> 00:24:07,220
гэта добра, і гэта свайго роду зручны, таму што гэта не тое, што як

371
00:24:07,220 --> 00:24:10,430
уласцівых JavaScript, і зараз у мяне няма яўнага

372
00:24:10,430 --> 00:24:12,430
сказаць, што Todos з'яўляюцца няпоўнымі.

373
00:24:12,430 --> 00:24:19,190
Я магу сказаць, з месца ў кар'ер, што Todos будуць пазначаныя як няпоўная.

374
00:24:19,190 --> 00:24:21,300
Звярніце ўвагу на тое, што гэта?

375
00:24:21,300 --> 00:24:25,520
Цяпер у мяне ёсць спіс спраў, і гэта калекцыі.

376
00:24:25,520 --> 00:24:30,960
Звярніце ўвагу на поле, звязанае з мадэллю, якая кажа TODO.

377
00:24:30,960 --> 00:24:33,390
Гэта мой спосаб сказаць, што Магістральная

378
00:24:33,390 --> 00:24:37,350
Я буду думаць аб калекцыі гэтых асобных Todos.

379
00:24:37,350 --> 00:24:42,140
У асноўным гэта мадэлі структуры для маёй праграмы.

380
00:24:42,140 --> 00:24:44,980
Тут у мяне ёсць гэтая ідэя калекцыі,

381
00:24:44,980 --> 00:24:48,960
і ў асноўным элементы, якія змяшчаюцца ў гэтым зборніку ўсё будзе гэтых Todos,

382
00:24:48,960 --> 00:24:51,910
і што вельмі натуральна ў гэтым сэнсе

383
00:24:51,910 --> 00:24:59,890
таму што ў мяне ёсць Todos, і я іх у калекцыі.

384
00:24:59,890 --> 00:25:02,940
>> Давайце паглядзім на трохі больш гэтага.

385
00:25:02,940 --> 00:25:05,900
Вось пазваночніка гледжання.

386
00:25:05,900 --> 00:25:08,890
Іншая рэч, якая кажа Магістральная з'яўляецца тое, што

387
00:25:08,890 --> 00:25:14,660
шмат мадэляў, якія вы думаеце пра ці нават калекцыі

388
00:25:14,660 --> 00:25:19,150
збіраюцца трэба мець нейкі спосаб адлюстроўваюцца.

389
00:25:19,150 --> 00:25:21,900
Нам трэба, каб зрабіць, што спіс спраў,

390
00:25:21,900 --> 00:25:25,460
і не было б нядрэнна, калі б мы змаглі забяспечыць для кожнай мадэлі

391
00:25:25,460 --> 00:25:28,390
ці звязаць з кожнай мадэлі гэтага пункту гледжання

392
00:25:28,390 --> 00:25:34,020
, Што дазваляе нам я думаю злучыў два разам?

393
00:25:34,020 --> 00:25:38,320
Калі раней мы павінны былі выкарыстаць для цыклу, які будзе праходзіць праз

394
00:25:38,320 --> 00:25:41,130
кожны TODO ў нашым спісе, а затым раздрукаваць яго тут

395
00:25:41,130 --> 00:25:44,650
мы можам у асноўным звязваюць яго з гэтай мадэллю.

396
00:25:44,650 --> 00:25:47,550
Гэта агляду спраў.

397
00:25:47,550 --> 00:25:50,550
Гэта звязана з TODO мы выявілі раней.

398
00:25:50,550 --> 00:25:54,940
Цяпер кожны TODO з'яўляецца адлюстроўваць або які адлюстроўваецца

399
00:25:54,940 --> 00:25:56,960
гэтага агляду спраў.

400
00:25:56,960 --> 00:25:59,440
Звярніце ўвагу, некаторыя поля.

401
00:25:59,440 --> 00:26:05,880
Як вы думаеце, гэта тэг, имяТега: Лі?

402
00:26:05,880 --> 00:26:09,790
Памятаеце з папярэдняга, калі мы хацелі аказаць TODO

403
00:26:09,790 --> 00:26:16,700
мы павінны былі б відавочна пару нашых Todos з гэтым тэгам Лі.

404
00:26:16,700 --> 00:26:21,080
Зараз мы кажам, што гэта TODO дзе будзе жыць

405
00:26:21,080 --> 00:26:25,250
будзе ўсярэдзіне тэга Лі.

406
00:26:25,250 --> 00:26:31,440
І зараз мы таксама звязваючы падзеі з нашымі Todos.

407
00:26:31,440 --> 00:26:34,320
>> Кожны мае TODO гэтай падзеі.

408
00:26:34,320 --> 00:26:38,480
Калі вы націснеце ў значнай ступені кнопкі-пераключальніка, гэта тое, што я кажу, там,

409
00:26:38,480 --> 00:26:43,080
то ў асноўным адзначаюць TODO як супрацьлеглае таму, што было раней

410
00:26:43,080 --> 00:26:45,890
, А затым зноў робіць прымяненне.

411
00:26:45,890 --> 00:26:47,810
Гэта выгляд падобны на код раней.

412
00:26:47,810 --> 00:26:50,730
Памятаеце, калі мы адзначалі яго альбо супрацьлеглага або-

413
00:26:50,730 --> 00:26:52,410
і тады мы паўторна вынес гэта рашэнне.

414
00:26:52,410 --> 00:26:57,750
Але звярніце ўвагу, цяпер гэта падзея мела звычай быць тое, што было ў HTML.

415
00:26:57,750 --> 00:26:59,640
Ён сядзеў там.

416
00:26:59,640 --> 00:27:01,410
Кнопка была на пстрычкай мышы.

417
00:27:01,410 --> 00:27:05,310
Пры націску на кнопку, ён робіць выгляд матэрыялу, каб

418
00:27:05,310 --> 00:27:07,210
створаны, што TODO быць няпоўным.

419
00:27:07,210 --> 00:27:11,180
Тут мы звязаны, што падзеі націску кнопкі-пераключальніка, што

420
00:27:11,180 --> 00:27:15,830
і звярнуць назад Ці гэта ці выключыць з гэтай пунктам гледжання.

421
00:27:15,830 --> 00:27:20,480
>> Гэта добры спосаб стварэння гэтай падзеі, так што гэта вельмі цесна звязаны

422
00:27:20,480 --> 00:27:26,980
гэтай кропцы гледжання, і так заўважыць гэта яшчэ адзін.

423
00:27:26,980 --> 00:27:31,050
У мяне ёсць гэта метад візуалізацыі, і мы не павінны прайсці праз дэталі.

424
00:27:31,050 --> 00:27:33,650
Гэта збольшага падобна на тое, што было раней,

425
00:27:33,650 --> 00:27:36,070
не заўважыць, я не цыкл праз што заўгодна.

426
00:27:36,070 --> 00:27:40,700
Я не друкуе, што уль тэг, які нібыта кажуць, што я збіраюся надрукаваць усе элементы.

427
00:27:40,700 --> 00:27:46,610
Я забяспечваю функцыянальнасць для аказання гэтага элемента спісу.

428
00:27:46,610 --> 00:27:49,400
Гэта вельмі магутная канцэпцыя, таму што ў асноўным

429
00:27:49,400 --> 00:27:53,600
наш спіс спраў складаецца з усіх гэтых Todos, і калі мы можам паказаць у асноўным

430
00:27:53,600 --> 00:27:56,890
спосаб зрабіць адным з тых Тодос

431
00:27:56,890 --> 00:28:04,230
то мы можам мець наш магутным магістральных такі зрабіць усё Todos

432
00:28:04,230 --> 00:28:07,760
шляхам выкліку метаду візуалізацыі ад індывідуальных Todos.

433
00:28:07,760 --> 00:28:14,180
Гэта канцэпцыя, якая можа апынуцца вельмі дарэчы.

434
00:28:14,180 --> 00:28:18,160
Цяпер добры пытанне, каб спытаць, як гэта дадатак збіраюцца разам?

435
00:28:18,160 --> 00:28:21,200
Таму што ў нас ёсць магчымасць аказваць адзін TODO,

436
00:28:21,200 --> 00:28:23,860
але як мы можам атрымаць уяўленне аб некалькіх Todos?

437
00:28:23,860 --> 00:28:25,100
>> Давайце зірнем на гэта.

438
00:28:25,100 --> 00:28:27,100
Гэта апошняя частка.

439
00:28:27,100 --> 00:28:29,740
Звярніце ўвагу, у нас ёсць спіс спраў гледжання тут,

440
00:28:29,740 --> 00:28:34,440
і заўважылі, што гэта таксама меркаванне.

441
00:28:34,440 --> 00:28:36,970
І перайсці на некалькі рэчаў,

442
00:28:36,970 --> 00:28:45,280
гэтага метаду ініцыялізацыі будзе выкліканы, калі мы спачатку ствараем гэтую To-Do List.

443
00:28:45,280 --> 00:28:52,630
Як вы можаце бачыць, гэта як стварэнне спісу спраў і звязаўшы яго з гэтага пункту гледжання.

444
00:28:52,630 --> 00:28:57,860
А потым я дадаў функцыі тут, так у асноўным, калі пры даданні тавару-

445
00:28:57,860 --> 00:29:01,440
гэта падобна на метад айсНЬет мы бачылі раней-

446
00:29:01,440 --> 00:29:07,430
Я збіраюся стварыць новы аб'ект TODO, і звярніце ўвагу на самай справе я выкліку

447
00:29:07,430 --> 00:29:13,080
гэты новы метад TODO, так што гэта забяспечваецца пазваночніка,

448
00:29:13,080 --> 00:29:16,010
і я магу перадаць у маіх уласцівасцях тут.

449
00:29:16,010 --> 00:29:23,710
І цяпер кожны TODO, што я ствараю з дапамогай гэтага атрымаеце, што функцыянальныя магчымасці, якія мы бачылі раней.

450
00:29:23,710 --> 00:29:28,140
Звярніце ўвагу, я ачыстка тэкставага поля да-невялікая дробязь-

451
00:29:28,140 --> 00:29:32,900
а затым я дадаю гэтую калекцыю.

452
00:29:32,900 --> 00:29:37,630
>> Гэта амаль здаецца дзіўным, таму што перш, чым мы проста павінен быў зрабіць, што todos.push,

453
00:29:37,630 --> 00:29:43,310
а затым мы былі зробленыя, і гэта можа здацца больш складаным для гэтага канкрэтнага праекта,

454
00:29:43,310 --> 00:29:46,980
і вы можаце выявіць, што Магістральная або нават вуглавога або любыя іншыя рамкі

455
00:29:46,980 --> 00:29:50,790
не задавальняе вашага канкрэтнага праекта, але я думаю, што гэта важна думаць аб

456
00:29:50,790 --> 00:29:54,100
што гэта азначае ў больш шырокім маштабе для больш буйных праектаў,

457
00:29:54,100 --> 00:29:56,610
таму што калі б мы мелі больш буйны праект, дзе мы прадстаўлялі

458
00:29:56,610 --> 00:30:00,860
некаторыя сапраўды складаны збор, нешта больш глыбокае, чым проста спіс спраў,

459
00:30:00,860 --> 00:30:04,490
скажам, спіс сяброў, ці нешта накшталт гэтага, гэта можа спатрэбіцца

460
00:30:04,490 --> 00:30:09,620
таму што мы маглі арганізаваць наш код у сапраўды зручны спосаб,

461
00:30:09,620 --> 00:30:12,550
такім чынам, што будзе лягчэй для каго-небудзь яшчэ

462
00:30:12,550 --> 00:30:16,820
, Які хацеў забраць праект абапірацца.

463
00:30:16,820 --> 00:30:21,450
Вы можаце бачыць, што гэта дае шмат структуру.

464
00:30:21,450 --> 00:30:26,580
І тады я тэлефаную аказваюць на гэтую айсНЬет.

465
00:30:26,580 --> 00:30:31,050
Візуалізацыя, як вы можаце бачыць, і вам не прыйдзецца зразумець гэта поўны сінтаксіс,

466
00:30:31,050 --> 00:30:37,790
але ў асноўным для кожнай мадэлі ён збіраецца выклікаць асобныя метад візуалізацыі.

467
00:30:37,790 --> 00:30:41,500
Гэта свайго роду, дзе гэта адбываецца ад.

468
00:30:41,500 --> 00:30:44,140
Давайце проста паказаць, як адлюстроўваць асобныя Todos,

469
00:30:44,140 --> 00:30:47,310
а затым давайце склеіць іх разам у цэлым.

470
00:30:47,310 --> 00:30:49,810
Але гэта дае магчымасць абстракцыі,

471
00:30:49,810 --> 00:30:55,470
таму што я мог змяніць тое, як я вырашу зрабіць індывідуальны Todos,

472
00:30:55,470 --> 00:30:57,940
і я б не стаў нічога мяняць у гэтага Кодэкса.

473
00:30:57,940 --> 00:31:00,700
Гэта крута.

474
00:31:00,700 --> 00:31:08,540
>> Хто-небудзь ёсць якія-небудзь пытанні аб рамках JavaScript?

475
00:31:08,540 --> 00:31:14,310
[Неразборліва Студэнт пытанне]

476
00:31:14,310 --> 00:31:16,050
О, вядома, гэта вялікае пытанне.

477
00:31:16,050 --> 00:31:19,080
Пытанне было, як жа я ўключаць структур?

478
00:31:19,080 --> 00:31:22,970
Большасць фреймворков JavaScript ў асноўным толькі JS файлы

479
00:31:22,970 --> 00:31:25,740
, Якія можна ўключыць у верхняй частцы кода.

480
00:31:25,740 --> 00:31:29,830
Заўважце, што ў галаўны частцы маёй HTML У мяне ёсць усе гэтыя тэгі сцэнара,

481
00:31:29,830 --> 00:31:34,250
і канчатковы тэг скрыпт код, які мы напісалі.

482
00:31:34,250 --> 00:31:38,820
А потым 3 коды рамкі з'яўляюцца як раз і тэгі сцэнара.

483
00:31:38,820 --> 00:31:42,110
Я ў тым ліку іх ад таго, што называецца CDN,

484
00:31:42,110 --> 00:31:46,200
які дазваляе мне атрымаць яго ад каго-то іншага ў гэтай кропцы

485
00:31:46,200 --> 00:31:57,930
але кожны мае рамках гэтага-вы можаце вельмі шмат што знайсці змест

486
00:31:57,930 --> 00:32:03,540
для канкрэтнай бібліятэкі JavaScript даступная на некаторых CDN ці нешта накшталт гэтага,

487
00:32:03,540 --> 00:32:05,570
а затым вы можаце ўключыць гэтыя тэгі сцэнара.

488
00:32:05,570 --> 00:32:07,600
Ці мае гэта сэнс?

489
00:32:07,600 --> 00:32:09,500
Крута.

490
00:32:09,500 --> 00:32:11,730
>> Тыя 2 розных падыходаў.

491
00:32:11,730 --> 00:32:14,640
Гэта не толькі падыходы да вырашэння гэтай праблемы.

492
00:32:14,640 --> 00:32:17,080
Ёсць шмат розных рэчаў, якія

493
00:32:17,080 --> 00:32:19,490
хто-то можа зрабіць, і ёсць шмат межаў там.

494
00:32:19,490 --> 00:32:23,300
Кутняе і хрыбетнік ніяк не расказаць усю гісторыю.

495
00:32:23,300 --> 00:32:26,370
Удачы вам у вашых канчатковых праектаў, і вялікі дзякуй.

496
00:32:31,960 --> 00:32:35,000
[CS50.TV]