1
00:00:00,000 --> 00:00:02,000
[Powered by Google Translate] [세미나] [자바 스크립트 프레임 워크 : 왜 그리고 어떻게]

2
00:00:02,000 --> 00:00:04,000
[케빈 슈미트] [하버드 대학]

3
00:00:04,000 --> 00:00:06,960
[이 CS50입니다.] [CS50.TV]

4
00:00:06,960 --> 00:00:10,630
>> 안녕하세요, 여러분. 자바 스크립트 프레임 워크 세미나에 오신 것을 환영합니다.

5
00:00:10,630 --> 00:00:14,910
내 이름은 케빈이며, 오늘은 자바 스크립트 프레임 워크에 대해 얘기 할거야

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
>> 내가 그렇게하기 전에, 나는 자바 스크립트에서 약간의 배경을 제공합니다

10
00:00:31,060 --> 00:00:33,750
그리고 우리는 거기에서 그것을 가지고 있습니다.

11
00:00:33,750 --> 00:00:36,270
우리가해야 할 일 목록을 구현하여 시작하는거야.

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
우리는 코드를 자바 스크립트에 가서 할 일 목록 일하러 가야하고 있습니다.

17
00:00:51,930 --> 00:00:54,370
그리고 우리는 프레임 워크를 사용하지 않고 디자인을 향상거야.

18
00:00:54,370 --> 00:00:57,190
우리는 우리가 자바 스크립트를 단독으로 할 수있는 여러 가지 논의거야

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
당신이 볼 수 있듯이, 내가 할 일을 말합니다 약간의 헤더가

28
00:01:19,300 --> 00:01:21,740
내가 할 일에 대한 설명을 입력 할 수 있으며 작은 박스

29
00:01:21,740 --> 00:01:26,990
그리고, 그래서이 목록에 새로운 할일을 입력하려고의 새 항목 단추를 보자.

30
00:01:26,990 --> 00:01:31,000
, 자바 스크립트 프레임 워크 세미나를 제공합니다

31
00:01:31,000 --> 00:01:33,090
나는 새 항목을 칠 해요.

32
00:01:33,090 --> 00:01:35,730
나는 저를 구현 말한다이 자바 스크립트 경고를 얻을.

33
00:01:35,730 --> 00:01:37,560
우리는 그것을 구현할 수있어.

34
00:01:37,560 --> 00:01:41,490
HTML과 자바 스크립트 모두의이에 대한 코드를 확인 할 수 있습니다.

35
00:01:41,490 --> 00:01:43,260
여기에 우리의 HTML이다.

36
00:01:43,260 --> 00:01:45,500
당신은 여기에서 볼 수 있듯이, 여기에 우리의 작은 도스 헤더입니다.

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
사람은 의미 is 클릭 할 것을 추측 할합니까?

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
당신이 볼 수 있듯이, 여기까지 내 자바 스크립트 코드이다.

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
그것은 저를 구현 경고, 그리고 난 손이 작업을해야합니다.

55
00:02:55,730 --> 00:02:58,790
나는 그 전역 데이터 구조에 TODO를 추가해야

56
00:02:58,790 --> 00:03:01,860
그리고, 나는 할 일 목록을 그리려면.

57
00:03:01,860 --> 00:03:06,360
아무도 아직 공상,하지만 자바 스크립트 당신은에 익숙 할 수 있습니다

58
00:03:06,360 --> 00:03:12,370
그래서 나는 천천히 이동하는 방식으로 자바 스크립트의 기초를 검토하는거야.

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
어떻게 자바 스크립트를 통해 액세스하는 텍스트 정렬합니까?

63
00:03:27,620 --> 00:03:32,500
이 자바 스크립트를 기억하고, 근본적인 기능 중 하나는 그것이 우리에게주는 것입니다

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
우리는 맨손으로 뼈 자바 스크립트와 함께하는 작업을 수행하는 방법

67
00:03:43,430 --> 00:03:51,360
우리가 실제로있는 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
그리고 지금, 나는 ID로 요소를 받고 있어요, 그래서 해당 텍스트 상자의 ID를 필요로

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
>> 우리는이 작업을 수행하는 방법과 자바 스크립트 그리고 당신이 이것에 익숙하지 않다면 걱정하지 마세요,

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
지금 내 스크립트에 추가 한 때문 중대하다

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
ID 도스는 페이지의이 분배기,

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 내부는 완전히 분명하다

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
이제 내 할일 배열의 모든 요소에 대해 그 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
우리는 실제로 길이 속성을 사용하여 자바 스크립트에서 배열의 길이를 얻을 수 있습니다.

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
나는 다시 도스 사업부, 그 내부 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
그 내 도스 배열의 i 번째 요소의

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
이것은 수행 할 작업 목록에서 목록에 개별 요소를 추가

125
00:08:01,080 --> 00:08:05,470
그리고 전체 목록을 닫고,이 내 addTodo 기능입니다.

126
00:08:05,470 --> 00:08:09,590
나는 기본적으로 텍스트 상자에서 잭을 얻어서 시작합니다.

127
00:08:09,590 --> 00:08:18,950
나는 도스 배열에있는 추가, 그리고, 나는 할 일 목록을 다시 렌더링합니다.

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
즉, 자바 스크립트에 대한 기본적인 소개의 일종이다.

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
그리고 우리는 텍스트 상자에서 해당 잭을 가져 오기 위해 자바 스크립트를 사용.

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
나는 기본적으로 저장하려면이 옵션을 사용하고 있는지 여부를 할 일 목록의 항목

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
내가 할일을 입력하면 기본적으로 나는이 토글 버튼을 누르면

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에 대한

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
기본적으로 말을하는 새로운 잭 푸시와 병렬로

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
그리고 내가 할 일 목록을 다시 그릴거야.

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
그러나 내부 for 루프에서 우리가 더 많은 지금은 조금하고있는 것을 알 수 있습니다.

177
00:11:19,620 --> 00:11:25,000
우리는 기본적으로 i 번째 잭의 항목에 해당하는지 여기에서 확인하고

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
우리는이 두 세계 배열을 확인할 수 있습니다.

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에서 무엇을 사용하는 것이

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
정보와 비슷한 조각을 위해 나는 자바 스크립트 객체로 결합 할 수 있습니다.

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
그리고 내가 무슨 짓을 한 것은 - 이것은 단지 종류의에 대한 자바 스크립트 구문

210
00:13:17,650 --> 00:13:21,350
객체의 리터럴 버전을 만들고,

211
00:13:21,350 --> 00:13:24,670
그리고, 우리가 할 일이 있고, 2 곳이 있습니다 통지

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
>> 우리가 수행 할 작업 [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
우리가 자바 스크립트의 측면에서 여기에서 할 수있는 더 있나요?

229
00:14:27,130 --> 00:14:31,810
같은 통지가 바로 여기에이 코드를

230
00:14:31,810 --> 00:14:34,760
DIV의 내부 HTML을 얻기위한

231
00:14:34,760 --> 00:14:40,520
작은 것 같아요, 길이입니다.

232
00:14:40,520 --> 00:14:45,100
하는 document.getElementById (이하​​ "수행 할 작업")가있다. 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를 자바 스크립트에 대한 라이브러리의 종류는 것을 알고

240
00:15:11,510 --> 00:15:15,910
그게 쉽게 DOM의 액세스 개별 요소와 같은 작업을 수행 할 수 있습니다.

241
00:15:15,910 --> 00:15:21,280
여기에 대신하는 document.getElementById를 말하는 ( "수행 할 작업"). 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
그래서 우리는 단지 원시 자바 스크립트 구현하기 시작했다.

248
00:15:42,010 --> 00:15:45,370
우리는 새로운 기능을 추가하고 우리가 그것을 개선 할 수있는 방법을 보여 주었다

249
00:15:45,370 --> 00:15:49,090
단지 우리가 자바 스크립트로되어 있습니다.

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
우리가 자바 스크립트 나가야 할 많은 것들이 매우 일반적입니다

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
나는이 모델 할 일 목록을 나타내는거야 좋아합니다.

260
00:16:35,530 --> 00:16:39,130
그리고 제가 자바 스크립트 개발자로 책임 해요 통지

261
00:16:39,130 --> 00:16:42,890
내가 동기화 가지고있는 HTML과 자바 스크립트를 유지합니다.

262
00:16:42,890 --> 00:16:48,040
자동으로 만든 아무것도하는 자바 스크립트의 표현

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
그리고이 경우이 자바 스크립트 배열 모델.

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 뭔가 우리의 자바 스크립트 표현을 유지하는 데 도움이

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
자바 스크립트에서 어떻게 우리가 동기화이 유지됩니다?

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-클릭하고 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
내 각도 자바 스크립트 코드 내에서 변수.

303
00:19:35,080 --> 00:19:37,030
이 NG 모델은 그냥 않습니다.

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
자바 스크립트 코드 내에서.

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
나는 DOM 액세스와 같은 jQueries를 사용하지 않아도됩니다.

311
00:19:58,750 --> 00:20:03,280
나는 그 변수를 변경하면 그 변수와 연결하고, 수

312
00:20:03,280 --> 00:20:07,400
자바 스크립트 내에는 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
그리고,이 NG 모델과 같이, 우리는 그 전에 할 수 있지만, 다른 것들이 있습니다

320
00:20:43,410 --> 00:20:47,020
이 NG-반복을 확인할 수 있습니다.

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
우리는 UL 태그가

324
00:20:56,470 --> 00:21:03,710
그러나 나는 이제까지 자바 스크립트 코드 내에서 그 목록을 렌더링하는 건가요?

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
내 도스 배열의 모든 할일 안쪽.

330
00:21:26,240 --> 00:21:31,850
todos.jr의 내부 도스 배열이 바로 여기에있다

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
그것은 저희가 동기화 자바 스크립트와 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
우리가 무엇을 많이, 말하는, 우리의 자바 스크립트 프로젝트

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
그리고 종종 우리는 자바 스크립트 응용 프로그램을 프로그래밍 할 때

359
00:23:20,700 --> 00:23:25,340
친구의 컬렉션을 갖는 아이디어를 표현의 우리는 정렬 할 수 있습니다

360
00:23:25,340 --> 00:23:29,500
어떻게 든 자바 스크립트, 그리고 백본은 우리에게이 계층을 제공합니다

361
00:23:29,500 --> 00:23:33,040
자바 스크립트의 기존 배열과 객체의 상단에

362
00:23:33,040 --> 00:23:38,300
더 쉽게 그와 더 강력한 일을 할 수 있습니다.

363
00:23:38,300 --> 00:23:41,870
>> 여기에 내가 할 일 모델을 정의한

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
자바 스크립트에 내재 된, 지금은 명시 적으로 필요가 없습니다

372
00:24:10,430 --> 00:24:12,430
수행 할 작업이 불완전 말한다.

373
00:24:12,430 --> 00:24:19,190
내가 할일이 불완전으로 표시하려고하는 바로 박쥐 말할 수 있습니다.

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
모델 잭 말한다 관련된 필드를 확인할 수 있습니다.

377
00:24:30,960 --> 00:24:33,390
이것은 백본을 말하는 나의 방법

378
00:24:33,390 --> 00:24:37,350
나는이 각각 수행 할 작업의 컬렉션에 대해 생각하는거야.

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
기본적으로이 컬렉션에 포함 된 항목은 모두 이러한 일하러가 될 수 있습니다

382
00:24:48,960 --> 00:24:51,910
그이 점에서 매우 자연

383
00:24:51,910 --> 00:24:59,890
내가 있기 때문에 도스가, 그리고 컬렉션에이를 수 있습니다.

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
이것은 우리가 이전에 발견 된 잭과 연결되어 있습니다.

398
00:25:50,550 --> 00:25:54,940
이제 모든 잭은 표시 가능한 또는 렌더링 가능합니다

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
잭을 렌더링하는 데 우리가 원하는 때 이전의 기억

403
00:26:09,790 --> 00:26:16,700
우리는 명시 적으로 리 태그와 함께 우리의 할일을 페어링해야합니다.

404
00:26:16,700 --> 00:26:21,080
이제 우리는이 잭 살고 어디로 가는지 말을하는지

405
00:26:21,080 --> 00:26:25,250
리튬 태그 안에 될 것입니다.

406
00:26:25,250 --> 00:26:31,440
그리고 지금 우리는 또한 우리의 할일과 이벤트를 연결하고 있습니다.

407
00:26:31,440 --> 00:26:34,320
>> 모든 잭이 하나의 이벤트가 있습니다.

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
잭이 불완전 할 것을 설정합니다.

419
00:27:07,210 --> 00:27:11,180
여기에서 우리는 토글 버튼을 클릭의 이벤트를 연결 한

420
00:27:11,180 --> 00:27:15,830
그리고 그것은이보기에 on 또는 off의 여부 반전.

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
나는 모든 요소를​​ 인쇄 할거야 말의 일종이 UL 태그를 인쇄하지 않을거야.

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
우리의 할 일 목록은 모든 수행 할 작업 구성, 우리는 기본적으로 지정할 수있는 경우

430
00:27:53,600 --> 00:27:56,890
이러한 수행 할 작업 중 하나를 렌더링하는 방법

431
00:27:56,890 --> 00:28:04,230
그때 우리는 본질적으로 우리의 강력한 백본을 가질 수는 수행 할 작업을 모두 렌더링

432
00:28:04,230 --> 00:28:07,760
개인 도스에서 렌더링 메서드를 호출하여.

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
우리는 하나의 잭을 렌더링 할 수있는 능력을 가지고 있기 때문에

436
00:28:21,200 --> 00:28:23,860
하지만 어떻게 우리가 여러 수행 할 작업의 아이디어를 얻을 수 있습니까?

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
우리가 처음이해야 할 일 목록을 만들 때이 초기화 메서드가 호출됩니다.

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
나는 새로운 잭 객체를 생성하고, 실제로 전화 해요 알거야

447
00:29:07,430 --> 00:29:13,080
이 새로운 잭 방법, 그래서 이것은 백본에 의해 제공됩니다,

448
00:29:13,080 --> 00:29:16,010
나는 여기 내 속성에 전달할 수 있습니다.

449
00:29:16,010 --> 00:29:23,710
그리고 지금 나는이를 사용하여 만든 모든 잭은 우리가 전에 보았던 그 기능을 얻을 것이다.

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
다만 개별 수행 할 작업을 렌더링하는 방법을 지정할 수의 것은,

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
나는 각 수행 할 작업을 렌더링하기로 결정하는 방식을 바꿀 수 있기 때문에,

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
>> 누구는 자바 스크립트 프레임 워크에 대한 질문이 있습니까?

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
대부분의 자바 스크립트 프레임 워크는 기본적으로 그냥 JS 파일입니다

479
00:31:22,970 --> 00:31:25,740
당신은 당신의 코드의 상단에 포함 할 수 있습니다.

480
00:31:25,740 --> 00:31:29,830
나는 모든 스크립트 태그가 내 HTML의 head 부분에 주목

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
그 같은 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]