1
00:00:00,000 --> 00:00:02,700
[Powered by Google Translate] [주 9, 계속]

2
00:00:02,700 --> 00:00:05,160
[데이비드 J. Malan - 하버드 대학교 (Harvard University)]

3
00:00:05,160 --> 00:00:07,020
[이 CS50입니다. - CS50.TV]

4
00:00:07,940 --> 00:00:13,340
>> 이 CS50입니다. 이 주 9의 끝입니다. 정말 감사합니다.

5
00:00:13,340 --> 00:00:15,310
마지막으로. 주 9. 내가 할게.

6
00:00:15,310 --> 00:00:18,590
오늘 우리는 웹 프로그래밍에 대한 우리의 대화를 계속

7
00:00:18,590 --> 00:00:21,660
최종 프로젝트쪽으로 눈을 가진, 당신은 웹 기반 뭔가를 할 필요가 없습니다 때문에

8
00:00:21,660 --> 00:00:25,610
최종 프로젝트에 대한 그러나, 최종 프로젝트를위한 하나 또는 CS50 후

9
00:00:25,610 --> 00:00:29,000
이건 정말 현대적인 소프트웨어가 진행되는 방향입니다.

10
00:00:29,000 --> 00:00:31,770
그리고 아직 실제로 쉬운 일 아닙니다.

11
00:00:31,770 --> 00:00:35,040
사실, 힘든 일 중 하나는 디자인의 측면이다.

12
00:00:35,040 --> 00:00:38,600
>> 예를 들어, 디자인은 실제로 사용자 인터페이스를 점점 말

13
00:00:38,600 --> 00:00:40,420
또는 사용자 경험 맞아.

14
00:00:40,420 --> 00:00:43,200
daresay I - 우리는 최근 문제 세트에서 알

15
00:00:43,200 --> 00:00:45,960
당신의 몇 가지 소프트웨어의 일부 부분에 대해 보트 매어 두는 밧줄을 방송 할 때

16
00:00:45,960 --> 00:00:49,000
또는 하드웨어 캠퍼스 또는 해제에 대한 여부를 당신을 infuriates 그 -

17
00:00:49,000 --> 00:00:51,930
거기에 사이트의 많은 사람들이, 하드웨어의 많은, 밖에있다

18
00:00:51,930 --> 00:00:53,900
의 종류됐다.

19
00:00:53,900 --> 00:00:58,730
하지만 현실은 아직 사용하기 쉬운 물건을 만드는 것은 그럼에도 불구하고 강력한 것입니다

20
00:00:58,730 --> 00:01:00,550
매우 어려운 도전입니다.

21
00:01:00,550 --> 00:01:03,680
그래서 오늘은 내가 요셉과 토미는 여기에 저를 가입하도록 요청

22
00:01:03,680 --> 00:01:06,680
우리가 대화를 할 수 있도록 모두에 대한 설계

23
00:01:06,680 --> 00:01:09,090
과 사고 프로세스의 종류 생각으로 시작해야

24
00:01:09,090 --> 00:01:12,040
귀하의 최종 프로젝트를 디자인 할 때, 미래의 노력.

25
00:01:12,040 --> 00:01:15,040
그리고 토미의 도움으로 우리는 구현 세부 정보 중 일부 보겠습니다.

26
00:01:15,040 --> 00:01:18,440
어떻게 종이에 또는 마음에 어떤 비전을 가질 수

27
00:01:18,440 --> 00:01:20,760
그때 당신은 프로그래밍 방식으로 실행할 수있는

28
00:01:20,760 --> 00:01:24,030
기술과 기술의 일부를 사용하여 우리는 그냥 얘기를 시작했습니다

29
00:01:24,030 --> 00:01:29,080
즉 자바 스크립트와 AJAX, 비동기 자바 스크립트 즉, 심지어 새로운 무언가.

30
00:01:29,080 --> 00:01:32,950
그게 당신이 사용자 인터페이스의 모든 동적 인을 만들 수 있습니다

31
00:01:32,950 --> 00:01:35,780
서버에서 점진적으로 더 많은 데이터를 가져 오는으로.

32
00:01:35,780 --> 00:01:38,560
그래서 우리는 오늘뿐만 아니라 그 내용 미리보기의 일부를 볼 수 있습니다.

33
00:01:38,560 --> 00:01:41,800
옆으로, 당신은 컴퓨터 과학에 집중에 관심이있는 경우

34
00:01:41,800 --> 00:01:45,010
또는 컴퓨터 과학 minoring 것은 알아 정오 ​​금요일

35
00:01:45,010 --> 00:01:48,750
맥스웰 Dworkin 221에서 피자 이벤트가있을 것입니다

36
00:01:48,750 --> 00:01:50,780
어디 컴퓨터 과학에 대해 좀 더 배울 수 있습니다.

37
00:01:50,780 --> 00:01:54,860
문 나가는 길 오늘은 하버드에서 CS에 대한 비공식적 인 가이드를 수령 할 수 있습니다.

38
00:01:54,860 --> 00:01:57,290
우리는 허리 높이에서 외부 쓰레기통에 놓을 게요

39
00:01:57,290 --> 00:01:59,750
그래서이를 잡아 CS에 대해 좀 더 알아 보려면,

40
00:01:59,750 --> 00:02:02,480
이 주 0에 있었던 것처럼 그 말은 당신을 위해있을 것입니다.

41
00:02:02,480 --> 00:02:06,500
당신은 오후 1시 15분에이 금요일 CS50 점심 우리와 함께하고 싶은 또한다면,

42
00:02:06,500 --> 00:02:09,800
cs50.net/lunch로 향.

43
00:02:09,800 --> 00:02:13,260
소동, 내가 당신에게 가르치는 동료 조셉 옹을 제공합니다.

44
00:02:13,260 --> 00:02:19,190
안녕하세요. [박수]

45
00:02:19,190 --> 00:02:20,770
감사합니다.

46
00:02:20,770 --> 00:02:24,780
나는 디자인에 대해 배운 처음 CS179 불리는 반 이었어요.

47
00:02:24,780 --> 00:02:28,040
>> 당시 교수는 우리에게 또 다른 교수에 대한 이야기​​를

48
00:02:28,040 --> 00:02:31,640
누가 호텔에 갔다와의 수도꼭지를 사용했다.

49
00:02:31,640 --> 00:02:35,630
사람이 왼쪽에있는 어떤 2​​ 개의 손잡이 말과 오른쪽 수 있을까요?

50
00:02:35,630 --> 00:02:39,080
[학생] 온수 및 냉수. >> 온수 및 냉수. 좋아.

51
00:02:39,080 --> 00:02:41,430
당신이 일반적으로 예상 뭐, 그렇죠?

52
00:02:41,430 --> 00:02:46,960
수도꼭지 사용 후이 교수는 샤워를하고 싶어, 그는이 사용하는 진행.

53
00:02:46,960 --> 00:02:51,310
그는 왼손을 생각하고 오른쪽면 바로, 따뜻한 음식과 차가운위한 것입니다?

54
00:02:51,310 --> 00:02:55,470
그러나 사람이 나를이 실제로 무엇을 말해 줄 수 있니?

55
00:02:55,470 --> 00:02:58,060
어떤 손?

56
00:02:58,060 --> 00:03:01,740
[안 들리게 학생 응답] >> 하나의 제안은?

57
00:03:01,740 --> 00:03:05,860
[안 들리게 학생 응답] >> 온도?

58
00:03:05,860 --> 00:03:10,460
그래서 그 중 하나는 온도와 다른 컨트롤을 제어하는​​? >> [학생] 물 압력.

59
00:03:10,460 --> 00:03:12,350
물 압력. 좋아.

60
00:03:12,350 --> 00:03:15,100
이 교수는이에 걸어, 그들은 따뜻한 음식과 차가운 음식으로 통제 생각

61
00:03:15,100 --> 00:03:21,470
이 흥분, 모든 방법까지 생각하는 권리를, 변

62
00:03:21,470 --> 00:03:23,560
그는 따뜻한 샤워를하고 싶어 때문입니다.

63
00:03:23,560 --> 00:03:28,100
음,이 역시 일치하지 않는, 그래서 그는이 매우 재미없는 경험을 도착

64
00:03:28,100 --> 00:03:31,110
의 콜드 샤워에 빠진, 우리는 모두 어떤 기분인지 알아.

65
00:03:31,110 --> 00:03:33,620
이 디자인 결함의 예입니다.

66
00:03:33,620 --> 00:03:37,040
그 수도꼭지에서 자신의 기대입니다이 말은 무엇입니까

67
00:03:37,040 --> 00:03:39,420
샤워 나온 내용과 일치하지 못했지만,

68
00:03:39,420 --> 00:03:41,780
그를 위해 불행한 종류가있는 것입니다.

69
00:03:41,780 --> 00:03:44,990
그래서이 실제 생활에서 일어나는 디자인 결함의 예입니다.

70
00:03:44,990 --> 00:03:48,020
그러나 우리는뿐만 아니라 다른 사람들의 모든 종류를 참조하십시오.

71
00:03:48,020 --> 00:03:50,390
우리는 아마도 MBTA 시스템의 팬 아니에요.

72
00:03:50,390 --> 00:03:55,560
이 말합니다 런던에서 실제로 지하철 시스템은 "이 버튼을 사용하지 않는."

73
00:03:55,560 --> 00:04:00,220
왜 거기에 더입니까? 왜 우리가 신경 쓰는 거지?

74
00:04:00,220 --> 00:04:02,810
나는 아이, 집에있는 기술에 정통한 한 것, 때

75
00:04:02,810 --> 00:04:05,050
컴퓨터가 충돌 것이다 때마다 엄마는 나에게 와서

76
00:04:05,050 --> 00:04:07,060
저에게이 화면을 보여 주며 나 한테 물어 무슨 일이 일어 났는지.

77
00:04:07,060 --> 00:04:09,210
>> 비록이 무슨 뜻인지 모르겠어요.

78
00:04:11,890 --> 00:04:14,700
[웃음] 무엇입니까?

79
00:04:16,950 --> 00:04:18,019
[웃음]

80
00:04:18,720 --> 00:04:23,050
때때로 우리는 소프트웨어 개발자 기분은 조업 회사입니다.

81
00:04:23,050 --> 00:04:28,460
사용자는 우리처럼다시피 "무슨 일이야? 누군가가 알려주세요."

82
00:04:28,460 --> 00:04:32,140
이 모든 디자인의 문제로 내려 온다.

83
00:04:32,140 --> 00:04:34,650
디자인은 우리가 알 수있는 것처럼, 미학에 대해 순전히 없습니다

84
00:04:34,650 --> 00:04:37,230
상황이 어떻게 보이는지에 대한 문제는 없습니다.

85
00:04:37,230 --> 00:04:41,720
이 팝업 여기에 약간은 실제로 아주 좋은 모양 이곳을 참조하십시오.

86
00:04:41,720 --> 00:04:45,290
그것은 배경에 그림자가있어, 무슨 일 국경 radiuses 있습니다.

87
00:04:45,290 --> 00:04:47,550
그것은 아주 좋지.

88
00:04:47,550 --> 00:04:51,480
매우 사용자 친화적하지 않기 정말 좋은 디자인 않아.

89
00:04:51,480 --> 00:04:54,920
와서 그 팝업 저 작은 정말 나에게 정보를 제공하지 않습니다

90
00:04:54,920 --> 00:04:58,450
무슨 일이 있는지,이 사용자로 나 한테 아무 말도하지 않습니다

91
00:04:58,450 --> 00:05:01,400
그 오류로부터 복구하는 방법에 대한.

92
00:05:01,400 --> 00:05:05,190
우리는 디자인이 아닌 것 일에 대해 생각하고 싶습니다.

93
00:05:05,190 --> 00:05:06,670
첫째, 미학 없습니다.

94
00:05:06,670 --> 00:05:10,800
또한 불필요한 기능의 톤과 앱을 채워 없어.

95
00:05:10,800 --> 00:05:14,890
당신은 태국 레스토랑 경우, 당신은 아마 같은 시간에 치과 의사가되고 싶지 않습니다.

96
00:05:14,890 --> 00:05:17,720
그리고 페이스 북 질문에 많은 사람들이 그것을 사용하지 않을 것을

97
00:05:17,720 --> 00:05:21,130
그리고 그들이 구축했던의 핵심 정말 아니 었습니다.

98
00:05:21,130 --> 00:05:24,200
그리고 너무 많은 일의 양하지에 대한 생각 좋군요

99
00:05:24,200 --> 00:05:26,390
귀하의 응용 프로그램이 있지만 품질에 주력하고있는

100
00:05:26,390 --> 00:05:28,910
그리고 어떻게 더 나은 해당 사용자의 경험을하고 있어요

101
00:05:28,910 --> 00:05:32,540
에 의해 실제로 이미 일에 개선.

102
00:05:32,540 --> 00:05:37,040
>> 간단히 말해서, 디자인은 우리가 구축해야하는지 우리에게 알려줍니다.

103
00:05:37,040 --> 00:05:41,950
예를 들어, 우리는 우리가 일을 검색 할 수 있도록 무언가를 구축하는 경우,

104
00:05:41,950 --> 00:05:45,970
구글과 같은 예를 들어, 우리는 방식으로 일을해야합니다

105
00:05:45,970 --> 00:05:48,950
즉, 사용자들이 원하는대로 얻을 클릭을 많이 취할 필요

106
00:05:48,950 --> 00:05:52,580
또는 우리는 Google 순간 검색이나 자동 완성과 함께 예를 들어,있는 방식으로해야

107
00:05:52,580 --> 00:05:54,970
그 우리가 결과를 빠르게 얻을 수 있습니다?

108
00:05:54,970 --> 00:05:58,740
토미가 실제로 구축, 당신을 보여줍니다처럼 공학, 포함한다.

109
00:05:58,740 --> 00:06:01,890
디자인의 종류가 많이 있습니다.

110
00:06:01,890 --> 00:06:06,070
예를 들어, 당신이 뭔가를 구축하는 경우 무언가를 배포 할 수

111
00:06:06,070 --> 00:06:09,770
많은 전기 또는 많은 기술이 없다 제 3 세계 국가에서,

112
00:06:09,770 --> 00:06:11,440
당신이 구축 것을 설계해야

113
00:06:11,440 --> 00:06:14,210
그곳에서 쉽게 사람들에 대한 액세스를 제공하는 방법은 아니에요.

114
00:06:14,210 --> 00:06:18,290
그러나 다른 디자인 결정의 종류가 어떤 건지

115
00:06:18,290 --> 00:06:21,850
또는이 그런 일에 관여있을 수 있을까요?

116
00:06:23,690 --> 00:06:25,660
그래. 내가 손을 참조하십시오.

117
00:06:25,660 --> 00:06:37,200
[안 들리게 학생 응답] >> 오른쪽. 그렇지. 접근성은 한 가지입니다.

118
00:06:37,200 --> 00:06:40,870
많은 사람들이 "내 사용자에 대해?"에 대해 생각하지 않아요

119
00:06:40,870 --> 00:06:43,160
두 스펙트럼의 극단처럼.

120
00:06:43,160 --> 00:06:47,770
나는 생각하지 않는다는 장애인이있을 사용자가

121
00:06:47,770 --> 00:06:50,590
그래서 난 그냥 일반 사용자에 대한 설계에 대해 생각하고있어.

122
00:06:50,590 --> 00:06:52,630
인터넷은 오늘날 모든 사용자가 액세스 할 수 있습니다

123
00:06:52,630 --> 00:06:54,870
나는뿐만 아니라 저 사람들을 위해 설계해야합니다.

124
00:06:54,870 --> 00:06:58,620
당신은 다른 어떤 디자인 결정의 종류가 될 수도?

125
00:06:58,620 --> 00:07:00,690
예. >> [학생] 비용.

126
00:07:00,690 --> 00:07:02,680
비용. 아주 좋아.

127
00:07:02,680 --> 00:07:08,060
우리가 우리의 설계 결정을 기초 수도 있습니다 또 다른 한가지는 비용을 지불해야합니다.

128
00:07:08,060 --> 00:07:13,130
우리가 사업 인 경우 생산하기 위해 많은 비용을 고려하지 않습니다 무언가를 구축하려면

129
00:07:13,130 --> 00:07:17,720
하지만 특히 높은 비용으로 판매하거나 우리에게 이익을 얻을 수 있습니다.

130
00:07:17,720 --> 00:07:21,540
>> 이러한 디자인의 모든 다른 종류가 있지만 우리는 인터넷에서 뭔가를 구축 할 때

131
00:07:21,540 --> 00:07:25,120
또는 우리가 아마 지금 건설별로 비용이하지 않는 무언가를 구축 할 때,

132
00:07:25,120 --> 00:07:28,630
인터넷 응용 프로그램처럼 - 당신은에 많은 자본을 던질 필요 없어

133
00:07:28,630 --> 00:07:30,900
실제로 작동하는 무언가를하기 위해 위해 -

134
00:07:30,900 --> 00:07:33,490
우리가에 대한 자세한 걱정하는 것은 사용자 경험이다.

135
00:07:33,490 --> 00:07:36,390
우리는이 사용자 중심의 디자인을 전화하십시오.

136
00:07:36,390 --> 00:07:41,550
기본적으로 어떤 사용자 중심의 디자인을 포함하여 사용자의 입장이 자신을 가하고 있습니다.

137
00:07:41,550 --> 00:07:44,870
제가 구축하는지에 대한 다른 사람이 가입하면,

138
00:07:44,870 --> 00:07:48,250
그들은 분명히 염두에두고 목표로 내 특정 응용 프로그램에 왔어요

139
00:07:48,250 --> 00:07:50,280
작업과 그것들은 완벽하고 싶습니다.

140
00:07:50,280 --> 00:07:53,650
그리고 일이 그들에게 그 작업을 완료 할 수 있도록 지원뿐만 아니라

141
00:07:53,650 --> 00:07:57,930
하지만 그들이 쉽고 효율적 방식으로 해당 작업을 완료 할 수 있도록하기 위해,

142
00:07:57,930 --> 00:08:01,900
또, 어떤 사람은 거기 말한대로, 액세스 할 수 있습니다.

143
00:08:01,900 --> 00:08:03,750
효율성은 무엇을 의미합니까?

144
00:08:03,750 --> 00:08:08,050
효율이 얼마나 빨리 내 사용자가 내 인터페이스를 주어진 작업을 완료 않습니다 의미합니다.

145
00:08:08,050 --> 00:08:11,650
그 한 곳에서 다른로 이동을 위해 클릭이 많이 걸리나요?

146
00:08:11,650 --> 00:08:14,630
이 지루한가요? 그들은 반복적 인 작업을 많이 수행해야합니까?

147
00:08:14,630 --> 00:08:17,140
우리는 가능한 한 효율적으로이 과정을 만들고 싶어

148
00:08:17,140 --> 00:08:20,070
그래서 그들은 일 그 종류의 작업을 수행 할 필요가 없습니다.

149
00:08:20,070 --> 00:08:24,230
사용자가 내 인터페이스를 조회하는 경우 intuitiveness에 관해서는, 그 예를 들어,이고,

150
00:08:24,230 --> 00:08:27,240
그게 사람들 장소에서 장소에 도착하기 쉬운?

151
00:08:27,240 --> 00:08:30,390
사람들이 내 인터페이스를 클릭해야하는지 알아내는 것이 쉬운

152
00:08:30,390 --> 00:08:33,770
이루가 달성하고자하는 목표 또는 작업을 달성 하는가?

153
00:08:33,770 --> 00:08:37,520
>> 한 사람이 거기 말한대로 그리고 마지막으로, 접근성이 매우 중요합니다.

154
00:08:37,520 --> 00:08:39,640
[남성 스피커] 그것은 비전 등을위한 접근성에있어서,

155
00:08:39,640 --> 00:08:42,740
난 사실 눈이 사람에게 뭔가를 설계 어떻게 하시겠습니까?

156
00:08:42,740 --> 00:08:46,460
오. 전혀 볼 수없는 사람들을 위해, 우리는 스크린 리더라는 게있어.

157
00:08:46,460 --> 00:08:49,070
당신이해야하면 방법으로 웹 사이트를 구축 하시

158
00:08:49,070 --> 00:08:52,020
즉, 예를 들어, 우리가 부르는 특정 기술 -

159
00:08:52,020 --> 00:08:53,590
지금은 여러가지가 있습니다.

160
00:08:53,590 --> 00:08:55,660
나는 턱라는 스크린 리더가 있다고 생각합니다.

161
00:08:55,660 --> 00:08:58,410
이 많은 것들이 우리가 지역 규칙을 부르는 의지

162
00:08:58,410 --> 00:09:02,010
페이지에 존재하는 어떤 사용자에게 읽기 보려면 여기를 클릭하십시오.

163
00:09:02,010 --> 00:09:05,480
볼 수없는 사람들을 위해, 당신은 확실하게해야하고 그 다음 스크린 리더

164
00:09:05,480 --> 00:09:09,130
실제로 페이지에있는 콘텐츠를 선택할 수 있으며, 실제로 사용자에게 표시 할 수 있습니다,

165
00:09:09,130 --> 00:09:13,630
당신이 볼 수없는 경우, 적어도 당신은 여전히​​ 페이지의 내용을 이해할 수있다.

166
00:09:13,630 --> 00:09:16,190
그래. 좋아요.

167
00:09:16,190 --> 00:09:23,410
충분히 좋은 디자인에 대해 얘기. 나쁜 디자인에 대해 이야기 해 봅시다.

168
00:09:23,410 --> 00:09:25,220
이은하지 말아야 할 일입니다.

169
00:09:25,220 --> 00:09:27,890
사람이 Craigslist와의 경험에 대해 말해 수

170
00:09:27,890 --> 00:09:32,190
무엇을 생각하는 것은이 디자인 그렇게 대단하지 않아요?

171
00:09:33,690 --> 00:09:36,430
예. >> [학생] 내가 너무 많은 단어가 한 지역에있는 것 같아.

172
00:09:36,430 --> 00:09:39,350
단어가 너무 많습니다, 그렇죠? 완전히 압도적.

173
00:09:39,350 --> 00:09:42,400
이 페이지에 와서 당신은 여기까지 가지 공세로 인사하고

174
00:09:42,400 --> 00:09:43,860
그 당신에게 문제가되지 않을 수 있습니다.

175
00:09:43,860 --> 00:09:47,010
예를 들어,이 편지로 시작하지 않는 한 주에 살고 있습니다.

176
00:09:47,010 --> 00:09:48,690
자, 당신은 텍사스거나에 살고 말한다.

177
00:09:48,690 --> 00:09:53,790
>> 당신은에있는 위치로 갈 수있는 페이지를 아래로 모든 방법을 스크롤해야합니다.

178
00:09:53,790 --> 00:10:00,320
내가 보스톤 출신인데, 그럼 내가 매사추세츠에서 찾아 보자. 매사추세츠는 어디 있지?

179
00:10:00,320 --> 00:10:03,270
오, 바로 여기. 오, 보스턴이야. 좋아요.

180
00:10:03,270 --> 00:10:09,070
의 보스턴 살펴 보도록하겠습니다. [웃음]

181
00:10:09,070 --> 00:10:12,250
예쁜 압도적, 맞죠?

182
00:10:12,250 --> 00:10:16,400
저기 어색한 일. [웃음]

183
00:10:17,320 --> 00:10:19,470
자, 내가 사는 곳을 찾고 말한다.

184
00:10:19,470 --> 00:10:24,130
얼마나 많은 사람들이 실제로 Craigslist 사용하셨습니까? 당신의 톤.

185
00:10:24,130 --> 00:10:30,960
이것 좀 봐,하지만이 바라 보는 심하게 가지 방법이 있습니다.

186
00:10:35,130 --> 00:10:38,970
IMG와 그림 사이의 차이점은 무엇입니까? 아무도 말해 줄 수 있어요?

187
00:10:41,350 --> 00:10:42,830
실제로 차이가 없습니다.

188
00:10:42,830 --> 00:10:47,710
그들은 정확히 같은 일을 의미하지만 어떤 이유로 그들을 위해 서로 다른 라벨을 갖추고 있습니다.

189
00:10:48,980 --> 00:10:53,560
나는 적이 클릭하면 이미지, 아무 페이지에 나타나지 않습니다.

190
00:10:53,560 --> 00:10:57,490
사실 난 무슨 일이 일어날 다시 검색을 클릭해야합니다.

191
00:10:57,490 --> 00:11:02,430
무슨 일이 수행 할 수있는 더 나은 디자인 결정 될 수?

192
00:11:03,820 --> 00:11:08,030
그 필터를 클릭했다면, 아마 특정 동작에 의해 필터링 할

193
00:11:08,030 --> 00:11:09,970
또는 특정 범주.

194
00:11:09,970 --> 00:11:14,450
대신 다시 검색을 누릅니다 것만도, 그냥 자동으로 필터링을 할 수

195
00:11:14,450 --> 00:11:17,060
그들은 즉시 그렇게 Google 스타일의 일종.

196
00:11:17,060 --> 00:11:20,440
[Malan]하지만 우리가 그들에게 지금까지 물리적으로 제출해야하는 본으로 형성하지 않습니다

197
00:11:20,440 --> 00:11:23,170
눌러 적어도 나 버튼을 클릭 입력?

198
00:11:23,170 --> 00:11:26,830
지금까지 그들을 본 적이 한, 당신은 실제로 그 일을 할 제출을 클릭해야합니다.

199
00:11:26,830 --> 00:11:30,090
>> 그러나 토미 두 번째에 표시되므로, 실제로 당신을위한 방법이 있습니다

200
00:11:30,090 --> 00:11:33,010
당신이 그를 클릭하면 자동으로 보낼 수 있도록

201
00:11:33,010 --> 00:11:38,840
우리는 AJAX 요청을 전화 다시 데이터를 얻을 수 있으며 즉시 결과를 필터링 할 일.

202
00:11:38,840 --> 00:11:41,340
이 인터페이스에 문제가되는 부분의 톤이 있습니다.

203
00:11:41,340 --> 00:11:43,530
[Malan]는 당신이 캠브리지를 검색 할 수 있나요?

204
00:11:43,530 --> 00:11:47,030
당신이 캠브리지에 관심있는 약간 변형 된 것이 여기있다

205
00:11:47,030 --> 00:11:54,790
그런데도 당신은 Westford, 봄 힐, 웨스트 뉴턴과 같은을 받고있어.

206
00:11:54,790 --> 00:11:57,930
아마 그럴 이상적입니다. >> 아마 이상적인 없습니다.

207
00:11:57,930 --> 00:12:03,900
어떻게이 특정 페이지에 사용자의 경험을 개선 할 수 있을까요?

208
00:12:03,900 --> 00:12:07,340
예. >> [학생] 도움말을 참조하십시오.

209
00:12:07,340 --> 00:12:09,500
좋아요. 감각의 어떤 종류의 방법?

210
00:12:09,500 --> 00:12:14,630
예를 들어 [학생]도 Craigslist는 건지 모르겠어요 처음 사용자를위한 것

211
00:12:14,630 --> 00:12:17,320
또는 네가 무엇을해야 모르겠어요.

212
00:12:17,320 --> 00:12:20,150
맞아. 그래서 Craigslist이 페이지에인지 설명하는 것이 중요합니다.

213
00:12:20,150 --> 00:12:23,490
우리는 실제로이 페이지는 사실은 무엇인지 사용자가 알 수 있습니다.

214
00:12:23,490 --> 00:12:27,090
내가이를 방문한다면 난 지역의 전체 무리를 참조하십시오. 난 그들이 무슨 뜻인지 모르겠어요.

215
00:12:27,090 --> 00:12:29,730
하지만 더 중요한 것은, 그냥,이 인터페이스를보고

216
00:12:29,730 --> 00:12:35,530
나는 특정 커뮤니티를 찾아 가지 톤을 아래로 스크롤 있었던 걸로 기억

217
00:12:35,530 --> 00:12:37,560
사실 제가이 일에 대해된다는 것을.

218
00:12:37,560 --> 00:12:39,820
그 작업을 수행 할 수있는 빠른 방법은 무엇입니까? 예.

219
00:12:39,820 --> 00:12:43,290
[학생]를 동, 서 지역으로까지 나눈다. 좋아요 >>.

220
00:12:43,290 --> 00:12:47,460
저 한테 빠른 결정하는 데 도움이 수있는 더 많은 카테고리로 나누기 수

221
00:12:47,460 --> 00:12:49,820
특정 위치에 도착하는 방법.

222
00:12:49,820 --> 00:12:54,510
[학생] 드롭 다운 목록을 놔. >>이 맞아. 좋아요.

223
00:12:54,510 --> 00:12:58,240
우리가 사물의 고정 된 세트를 가지고 있기 때문에 나는 드롭 다운 메뉴를 사용할 수

224
00:12:58,240 --> 00:13:00,100
우리는 드롭 다운 메뉴에 표시 수 있습니다.

225
00:13:00,100 --> 00:13:02,240
이 방법은 화면에 너무 많은 공간을 차지하지 않습니다.

226
00:13:02,240 --> 00:13:05,630
하지만 그보다 더 나은, 우리는 무엇을 할 수 있습니까?

227
00:13:05,630 --> 00:13:09,220
예. 다시 한번 >> [안 들리게 학생 응답] >> 말을 할 수 있습니까? >> [학생] 검색 창.

228
00:13:09,220 --> 00:13:11,260
네, 검색 상자. 잘 됐네요.

229
00:13:11,260 --> 00:13:16,430
우리가 슬라이드, 검색 상자를 다시 확인하면 우리가 실제로 할 수있는 것이 있습니다.

230
00:13:16,430 --> 00:13:21,520
자동 완성. 당신이 알고있는 결과를 검색하는 것은 매우 쉬운 방법은 집합입니다.

231
00:13:21,520 --> 00:13:25,980
나는 BO를 입력하기 시작하면, 그냥 나에게 그 중 BO 내부에있는 모든 결과를 보여줍니다.

232
00:13:25,980 --> 00:13:29,030
이렇게 나는 아주 쉽게 제가 가고 싶은 특정 하나를 찾을 수 있습니다

233
00:13:29,030 --> 00:13:32,390
대신이 정말 큰 목록을 스크롤해야하는.

234
00:13:32,390 --> 00:13:37,450
>> 이 정말 낮은 교수형 과일 모든 종류의 아르 그 Craigslist 구현되어있는 사람

235
00:13:37,450 --> 00:13:42,500
실제로 특정 사용자에 대한 훨씬 더 웹 사이트의 경험을 수 있도록 할 수 있습니다.

236
00:13:42,500 --> 00:13:46,370
좋아요. 나쁘지는 웹 사이트에 대해 얘기.

237
00:13:46,370 --> 00:13:49,410
의 페이스 북에 대해 얘기하자.

238
00:13:50,880 --> 00:13:54,390
페이스 북은 나와, 특히 페이스 북 사진 때,

239
00:13:54,390 --> 00:13:57,870
정확히 같은 일을 할 수있는 시간에 다른 서비스가 많이 있었다.

240
00:13:57,870 --> 00:14:00,740
그들은 앨범으로 사진을 정리 수 있습니다.

241
00:14:00,740 --> 00:14:03,360
당신이 할 수있는 것은 당신이뿐만 아니라 세트로 구성 할 수 있습니다.

242
00:14:03,360 --> 00:14:06,070
당신은 날짜별로 정리 수 있습니다. 당신은이 특별한 일을 할 수있어.

243
00:14:06,070 --> 00:14:11,710
그러나 사람이 페이스 북 사진이 릴리스 된 시간에 폭발 한는지 알아?

244
00:14:11,710 --> 00:14:15,080
예. >> [학생] 태그. >> 태그. 그렇지.

245
00:14:15,080 --> 00:14:21,300
우리는 CS50의 홀 치기 염색의 대형 손수건으로 우리 개 마스코트입니다 여기에 마일로 수 있습니다.

246
00:14:21,300 --> 00:14:24,810
당신은 우리가 중간에서이 태그 추가 기능을 가지고 볼 수 있습니다.

247
00:14:24,810 --> 00:14:28,240
그리고는 사용성 관점에서 페이스 북의 사진은 무척 재미있는 한

248
00:14:28,240 --> 00:14:34,130
실제로이를 통해 사람들이 자신의 사진에 친구를 포함 할 수 있다는 것입니다.

249
00:14:34,130 --> 00:14:37,680
페이스 북의 경우, 자신의 웹 사이트가 특히 사회이기 때문에하면,

250
00:14:37,680 --> 00:14:40,750
는 사회 분위기가 이러한 종류의 구축에 대해입니다.

251
00:14:40,750 --> 00:14:42,620
그 많은 사진의 경험을 향상

252
00:14:42,620 --> 00:14:46,390
실제로 말을 시작 할 수 있기 때문에, "이 사람들 사이의 연결 아르

253
00:14:46,390 --> 00:14:49,220
이러한 실제로에 관심을 가진 사람들에 대한 사진입니다. "

254
00:14:49,220 --> 00:14:52,200
그것의 일부는 정렬 만족감을 얻는 것입니다.

255
00:14:52,200 --> 00:14:54,980
사람들은 그런 식으로 사진과 물건에 태그를 추가 할 수 있습니다 싶어.

256
00:14:54,980 --> 00:14:58,510
그 좋은 인간 특성을 필요는 없지만,

257
00:14:58,510 --> 00:15:01,910
동시에 그것은 좋은 디자인 결정을 기반으로

258
00:15:01,910 --> 00:15:04,860
사람들이 실제로 이런 상황에 대해 걱정 때문이다.

259
00:15:04,860 --> 00:15:07,190
그래서 그런 페이스 북 사진입니다.

260
00:15:07,190 --> 00:15:09,800
>> 그러나의 더 일반적으로 페이스 북을 얘기 해봐요.

261
00:15:09,800 --> 00:15:13,400
내가 여기 많은 사람들이 페이스 북에 대한 의견을 가지고 있는게 확실해

262
00:15:13,400 --> 00:15:16,430
좋은 디자인 결정과 나쁜 디자인을 결정 모두.

263
00:15:16,430 --> 00:15:20,270
그러니 환기 또는 행복하길 바라지.

264
00:15:23,480 --> 00:15:26,450
이리와. 난 당신이 모두가 페이스 북을 사용하는 알아요.

265
00:15:26,450 --> 00:15:30,970
누군가가 말을 뭔가 나쁜 일이나 그 일에 대해 뭐라고 좋은 일을 할 수 있습니다. 예.

266
00:15:30,970 --> 00:15:35,060
뉴스 피드에서 [학생] 내가 정말 상관 없어 많은가 있습니다.

267
00:15:35,060 --> 00:15:37,740
뉴스 피드는 신경 않을 수도 많은 것을 보여 않습니다.

268
00:15:37,740 --> 00:15:41,660
당신이 2 ~ 3 년 동안 충족되지 않은 페이스 북에 친구가있을

269
00:15:41,660 --> 00:15:43,860
당신은 자신의 뉴스 검색 결과가 뉴스 피드에 등장 참조

270
00:15:43,860 --> 00:15:45,870
당신은 정말 상관 없어.

271
00:15:45,870 --> 00:15:48,700
페이스 북 사실, 더 낳은 서비스를 위해 노력을 만들었습니다

272
00:15:48,700 --> 00:15:53,150
그리고 그들은 실제로 늦은로 뉴스 피드의 상단에 관련성이 높은 결과를 보내버 리려고 한

273
00:15:53,150 --> 00:15:58,300
그래서 당신은 실제로 당신이나 당신의 가까운 친구와 관련성이 높은 친구들이 일을 참조하십시오.

274
00:15:58,300 --> 00:16:01,110
또 다른 건? 예.

275
00:16:01,110 --> 00:16:06,400
다시 한번 [안 들리게 학생 응답] >> 말을 할 수 있습니까?

276
00:16:06,400 --> 00:16:10,140
[학생] 광고가 상대적으로 눈에 거슬리지 있습니다. 무슨 의미에서 >>?

277
00:16:10,140 --> 00:16:16,370
[안 들리게 학생 응답] 그들은 배너처럼 화면에 빛을 필요가 없습니다.

278
00:16:16,370 --> 00:16:17,760
좋아요. 좋아.

279
00:16:17,760 --> 00:16:25,030
당신이 90 년대에서 인터넷을 기억하는 경우 - >> [Malan] 나는이있었습니다. >> 그는 거기에 있었어. [웃음]

280
00:16:25,030 --> 00:16:29,210
당신은 반짝이는 깜박이는 GIF를 배경, 물건을 기억하고 계시 겠지만,

281
00:16:29,210 --> 00:16:31,570
사물의 지오 시티 스타일 정렬.

282
00:16:31,570 --> 00:16:34,080
그건 정말 좋은 디자인의 예 아닙니다

283
00:16:34,080 --> 00:16:36,690
정말 콘텐츠에서 혼란이 없기 때문입니다.

284
00:16:36,690 --> 00:16:39,590
자신의 배경으로 애니메이션 GIF를 사용 예일 아트 웹 사이트

285
00:16:39,590 --> 00:16:41,800
그리고 당신은 페이지에 아무것도 읽을 수 없습니다

286
00:16:41,800 --> 00:16:44,870
하지만 사람은 실제로 그들에게 이야기하고 지금은 조금 다른 것 같은데요.

287
00:16:44,870 --> 00:16:48,940
[Malan] 지금은 훨씬 낫 네요. 당신이 볼 수 있듯이 그것은 지금 훨씬 낫 네요 >>. >> [Malan] 오, 그래.

288
00:16:48,940 --> 00:16:56,020
아주 좋아, 그냥 - 네. 좋아요.

289
00:16:56,020 --> 00:17:00,560
>> 그것의 일부는 또한 페이지가 가능 매우 미니멀리즘과 매우 이해하고 있습니다

290
00:17:00,560 --> 00:17:05,690
매우 논리적 인 방법으로 페이지의 흐름에 일 때문에 서로의 방식으로하지 않습니다.

291
00:17:05,690 --> 00:17:11,849
다른 것들 어떤 종류는 페이스 북에 대한 좋은 나 페이스 북에 대한 나쁜입니까?

292
00:17:11,849 --> 00:17:15,730
그냥 여기에 디자인 대화를 보자.

293
00:17:19,470 --> 00:17:21,339
오. 어디서? 그래.

294
00:17:21,339 --> 00:17:25,640
[학생]의 새로운 타임 라인 시스템은 자신의 과거에 대해 그 사람의 프로필을 검색 할 수 있습니다.

295
00:17:25,640 --> 00:17:28,119
, 타임 라인을 우.

296
00:17:28,119 --> 00:17:30,280
당신 스토킹 친구 할 수 있기 때문에 타임 라인은 훌륭한 일이야

297
00:17:30,280 --> 00:17:33,300
다시는 고등학교 다닐 때.

298
00:17:35,160 --> 00:17:38,060
당신이 훨씬 빨리 내용을 필터링 할 수 있기 때문에 타임 라인이 좋은

299
00:17:38,060 --> 00:17:41,500
당신이 그렇지 않으면 찾을 수 당신에게 정말 오랜만 것이다 물건을 찾을 수 있습니다

300
00:17:41,500 --> 00:17:45,840
단지 시간을 거슬러 가고, 위로, 위로, 위로, 위로, 위로, 위로 스크롤 아래로.

301
00:17:45,840 --> 00:17:48,910
하지만 단점의 종류는 사용자 경험의 관점에서 그에게도 있습니다.

302
00:17:48,910 --> 00:17:51,190
무슨 일을할까요?

303
00:17:51,190 --> 00:17:56,780
P-R로 시작하는 큰 단어입니다. >> [학생] 개인 정보 보호. >> 개인 정보 보호, 그렇죠?

304
00:17:56,780 --> 00:17:59,970
개인 정보 보호 정책은 큰 사용자 경험의 문제입니다.

305
00:17:59,970 --> 00:18:07,190
이게 지금의 페이스 북에 대한 가장 미워 것들 중 하나입니다. [웃음]

306
00:18:07,190 --> 00:18:09,000
[Malan]으로 지금 내가 할.

307
00:18:09,000 --> 00:18:11,380
데이비드는이 실제로 어제까지 무슨 일이 있었는지 몰랐네요.

308
00:18:11,380 --> 00:18:14,560
그래서 지금은 내가 그를 채팅 때마다 내가 그가 나를 무시 된 알아 냈다는 걸 알아요.

309
00:18:14,560 --> 00:18:16,880
[Malan]는 사실은 그에게 어색한 부분을 무시했습니다되었습니다

310
00:18:16,880 --> 00:18:21,040
그리고 그 사람이 그 사람을 무시하는 걸 알고 있었어 몰랐어요. [웃음]

311
00:18:21,040 --> 00:18:24,030
개인 정보 보호 정책은 큰 문제입니다.

312
00:18:24,030 --> 00:18:28,670
여기 사람이 페이스 북 개인 정보 보호에 대한 나쁜 무엇인지 말해 줄 수

313
00:18:28,670 --> 00:18:32,270
이 사람들이 이런 일을했다는 사실 외에?

314
00:18:32,270 --> 00:18:37,240
그것은 페이스 북 개인 정보 보호와 관련하여해야 할 특히 하드 무엇입니까?

315
00:18:37,240 --> 00:18:40,340
의 종류는 선도적 인 질문입니다.

316
00:18:41,680 --> 00:18:43,930
예. >> [학생] 특정 사람들로부터 사진을 숨 깁니다.

317
00:18:43,930 --> 00:18:46,170
맞아. 맞아요, 특정 사람들로부터 사진을 숨길 수 있습니다.

318
00:18:46,170 --> 00:18:51,290
그들은 당신이 사진의 개인 정보 보호를 전환 할 수있는 오른쪽이 좀 작은 단추가 있습니다.

319
00:18:51,290 --> 00:18:56,360
그들의 개인 정보 보호 옵션이 매우 메뉴의 다른 종류의 사이에 다양합니다.

320
00:18:56,360 --> 00:18:59,510
>> 그들은 최근에 훨씬 더 늘어 놓던하지만이 사건으로 사용

321
00:18:59,510 --> 00:19:04,870
당신이 보는 사진에서 친구를 방지하고 싶어 할 때마다 즉,

322
00:19:04,870 --> 00:19:08,280
당신은 정말되는 매우 복잡한 5 단계 과정을 통과해야

323
00:19:08,280 --> 00:19:11,150
내가이 링크를 클릭 해, 지금 다시 클릭 해, 다시 클릭 해

324
00:19:11,150 --> 00:19:13,420
저 사람들이 내 사진을 볼 수없는 지정할 수 있습니다.

325
00:19:13,420 --> 00:19:17,250
그래서 페이스 북의 부분에 특히 좋지 않습니다

326
00:19:17,250 --> 00:19:20,530
사용자의 경험에 대해 많은 사실은 그들에게 자유를주는되기 때문에

327
00:19:20,530 --> 00:19:22,460
사람들이 볼 수있는 제어 할 수 있습니다.

328
00:19:22,460 --> 00:19:25,550
이 사용자 컨트롤과 자유를 호출합니다.

329
00:19:25,550 --> 00:19:31,090
당신은 두지 않을 경우 사용자가 해당 효율적이고 직관적 인 방법으로,

330
00:19:31,090 --> 00:19:34,570
다음 사용자 경험은 전혀 그렇게 대단하지 않아요.

331
00:19:34,570 --> 00:19:38,200
 너희가 페이스 북에 대해 아무 말 하시겠습니까?

332
00:19:38,700 --> 00:19:41,420
어떻게이 기능을 사용하려면 어떻게해야합니까?

333
00:19:41,420 --> 00:19:46,290
[옹]이 기능을 사용 중지 할 수 없으며, 그 페이스 북의 부분에 큰 사용성 결함입니다.

334
00:19:46,290 --> 00:19:49,410
이 기능은 - 내가 실제로 어제로 보았다 -

335
00:19:49,410 --> 00:19:53,940
당신이 할 수 없다고 하던지 또는 어딘가에 아주, 아주 깊은 묻혀

336
00:19:53,940 --> 00:19:58,050
페이스 북의 리 세스 전혀이 기능을 해제하는 방법을 알아낼 수 없습니다 때문입니다.

337
00:19:58,050 --> 00:20:00,400
[Malan]하지만 때로는 이러한 결정은 분명하지 않습니다

338
00:20:00,400 --> 00:20:03,890
너희들은 다양한 CS50 응용 프로그램에 우리에게 유용한 많은 피드백을 제공했기 때문에

339
00:20:03,890 --> 00:20:05,710
그리고이 과정에서 사용하는 웹 사이트.

340
00:20:05,710 --> 00:20:10,260
우리는 이러한 요청과 제안을 모두 구현하지 않았습니다.

341
00:20:10,260 --> 00:20:14,550
>> 의 일부는, 그 시간의 함수라고 많은 요청을 받고입니다

342
00:20:14,550 --> 00:20:17,070
때때로 우리는 같은 의식 결정을,

343
00:20:17,070 --> 00:20:19,830
"제안을 보내 주셔서 감사합니다,하지만 우리는 반대."

344
00:20:19,830 --> 00:20:24,350
사용자가 뭔가를해야한다고 생각한다면 그럼 당신은 실제로 당신이 어떤 결정합니까

345
00:20:24,350 --> 00:20:28,110
당신은 반드시 그렇지? 경우에도

346
00:20:28,110 --> 00:20:32,360
실제로 사용자가 무슨 말을 듣고 사이 좋은 균형입니다

347
00:20:32,360 --> 00:20:35,840
당신이 말하는 곳 실제로, 광고의 일종을 갖는

348
00:20:35,840 --> 00:20:37,750
"우리는이 사용자가 말을하지 않을 것"이라고 말했다.

349
00:20:37,750 --> 00:20:42,520
그리고 특히, 저도 그렇게 생각이 일을 표현 헨리 포드에 의해 견적이 있다고 생각합니다.

350
00:20:42,520 --> 00:20:47,130
"나는 사람들이 원하는 사람을 물어 봤다면, 그들은 더 빨리 말을한다고 하더군요 것이다."

351
00:20:47,130 --> 00:20:51,840
사람은 따옴표 정말 무슨 뜻인지 떨어져 애타게으로 정렬 할 수 있습니다?

352
00:20:51,840 --> 00:20:56,060
그것은 사용자가 원하는 것을 알아야한다는 아닙니다

353
00:20:56,060 --> 00:20:59,180
하지만 더 있다는거야 -

354
00:20:59,180 --> 00:21:02,720
[학생] 그들은 가능​​한 건지 모르겠어요.

355
00:21:02,720 --> 00:21:06,140
일부 사람들은 가능​​하다 건지 모르겠어요.

356
00:21:07,880 --> 00:21:11,440
그 떨어져 조금 더 애타게. 그게 무슨 뜻 이죠?

357
00:21:11,440 --> 00:21:21,340
[안 들리게 학생 응답]

358
00:21:21,340 --> 00:21:25,770
좋아. 내가 우리가 여기서 말하고자하는 생각은 사람들이 원하는 것을 알고 있습니다.

359
00:21:25,770 --> 00:21:28,050
그들은 빠른 말을 싶습니다.

360
00:21:28,050 --> 00:21:29,840
그들이 진짜 원하는 건, 빠르게 이동 할 수있는 능력입니다

361
00:21:29,840 --> 00:21:32,310
하지만 정말 그렇게 달성 할 수있는가 매체를 잘하지 않습니다.

362
00:21:32,310 --> 00:21:36,330
당신은 사용자에게 와서 사용자가 당신에게 뭔가를 말해 때

363
00:21:36,330 --> 00:21:39,700
그들은 "우리는 이러한 기능과 이러한 기능과 이러한 기능을 원하는 '말씀

364
00:21:39,700 --> 00:21:42,650
당신이 필요에 대해 생각하고 싶지도 않아, "나보다 앞서 가자

365
00:21:42,650 --> 00:21:44,720
"와, 그들이 명시 적으로 뭐라고 구현"

366
00:21:44,720 --> 00:21:48,610
하지만 당신은 생각 할 것은 "아이디어의 종류를 그에서 얻을 수 있습니까?"입니다

367
00:21:48,610 --> 00:21:50,450
실제로 원하는 게 뭐야?

368
00:21:50,450 --> 00:21:55,560
>> 그리고 거기에서 당신이 할 수있는 일이 이러한 요청을 충족 무언가를 디자인입니다

369
00:21:55,560 --> 00:22:00,340
하지만 반드시 사용자가 만족 될 것으로 예상하는 방식 인치

370
00:22:00,340 --> 00:22:03,830
매우 실제 측면에서 최종 프로젝트 같은를위한,

371
00:22:03,830 --> 00:22:07,900
가 더 좋은 걸을 할 때 유용한 경험적은 무슨

372
00:22:07,900 --> 00:22:10,630
디자이너가 사람에 대해 교만이 특히

373
00:22:10,630 --> 00:22:14,360
당신이 정렬의 가장 좋은 게 무엇인지 알게된다, 당신은 사용자의 입력이 걸릴 수 있습니다

374
00:22:14,360 --> 00:22:16,580
하지만 실제로 피드백을 받고 어떻게해야할까요?

375
00:22:16,580 --> 00:22:21,610
최종 프로젝트에서 매우 구체적으로, 어떻게 여기에 최적의 결과를 만들어?

376
00:22:21,610 --> 00:22:25,030
어떻게 최적의 결과를 생산 - 나는 두 번째이 넘는 이동합니다 -

377
00:22:25,030 --> 00:22:29,190
개발하고 테스트하고 반복의 과정입니다.

378
00:22:29,190 --> 00:22:32,020
당신이 뭔가를 디자인 할 때 내가 테스트가 의미하는 것이 있습니다

379
00:22:32,020 --> 00:22:36,970
그게 같은, 매우 좋은 생각 "나는 정말 대단한 디자이너입니다. 모든이를 사랑 것입니다."

380
00:22:36,970 --> 00:22:41,600
그리고 당신은 보여서 사람들이 어떤 이유를 정말 싫어.

381
00:22:41,600 --> 00:22:46,820
당신이해야 할 것은 사람들이 좋아하는 일의 부분을해야합니다

382
00:22:46,820 --> 00:22:49,180
사람들이 안 좋아하는 물건을 개편.

383
00:22:49,180 --> 00:22:53,080
그것은 매우 분명한 과정처럼 들리 겠지만,이 과정은 계속 반복

384
00:22:53,080 --> 00:22:55,980
이미 건설 한 내용의 상단에 도움을주는 과정입니다

385
00:22:55,980 --> 00:22:59,730
자신의 디자인 기술을 연마뿐만 아니라이 디자인을 구체화하는 데 도움이뿐만 아니라

386
00:22:59,730 --> 00:23:03,790
사람들은 실제로 더 많은 사람들이 이전보다 제품을 주셔서 감사합니다 수 있도록.

387
00:23:03,790 --> 00:23:07,390
>> 당신이 실제로 무슨 짓을 더 구체적인 예제를 갈거야.

388
00:23:07,390 --> 00:23:11,390
제품의 마지막 예제의 일종으로, 카약을 살펴 보자.

389
00:23:11,390 --> 00:23:14,970
가 나온 카약 매우 인기가했습니다.

390
00:23:14,970 --> 00:23:18,760
사람들이 추측 할 수 있습니까?

391
00:23:18,760 --> 00:23:20,950
당신이 그것을 사용하는 경우이 좋아하는 일의 종류는 무엇입니까

392
00:23:20,950 --> 00:23:23,990
무엇을 당신이 마음에 들지 않는 일의 종류입니까?

393
00:23:23,990 --> 00:23:31,590
예. >> [안 들리게 학생 응답] >> 좋아요.

394
00:23:31,590 --> 00:23:34,730
그것도 사용자가 더 광대 한이 쿼리를 관리하게됩니다

395
00:23:34,730 --> 00:23:38,150
같은 매우 제한적인 것보다, "당신의 시작 날짜를 선택해야합니다

396
00:23:38,150 --> 00:23:39,810
"그리고 당신은 종료일을 선택해야합니다."

397
00:23:39,810 --> 00:23:44,910
사실, 당신이 그것에 대해 유연하게 할 수 있으며 여러분에게 그 범위에서 항공편을 모두 제공합니다.

398
00:23:44,910 --> 00:23:46,730
또 다른 건?

399
00:23:46,730 --> 00:23:50,530
[학생] 그들은 가격에 요금이 포함되어 있습니다.

400
00:23:50,530 --> 00:23:53,330
그들은 가격의 비용을 포함 할.

401
00:23:53,330 --> 00:23:56,720
세금과 일들이 실제로 왼쪽 상단에서 해당 가격으로 직진

402
00:23:56,720 --> 00:24:00,710
따라서 귀하가 실제로 2백40달러 비행 비용을 지불한다는 생각에 속하지

403
00:24:00,710 --> 00:24:03,280
정말 3백30달러 때.

404
00:24:03,280 --> 00:24:06,200
또 다른 건? 예.

405
00:24:06,200 --> 00:24:10,140
[안 들리게 학생 응답]

406
00:24:10,140 --> 00:24:14,610
실제로 당신이 그렇게하도록 내버려 있는지 확실하지 않습니다.

407
00:24:14,610 --> 00:24:18,310
내가 잘못 될 수 있습니다.

408
00:24:18,310 --> 00:24:23,360
당신은 특정 필터에 더 많은 무게를 넣어하려면 꽤 흥미로운 일이 될 수 있습니다

409
00:24:23,360 --> 00:24:27,000
그래서 사람들이 위로 저 필터에 관한 결과를 밀어 것을.

410
00:24:27,000 --> 00:24:31,920
그러나 사람이 왼쪽의 어디가 그렇게 특별하지 말 할 수 있습니까?

411
00:24:31,920 --> 00:24:39,540
어떻게 전통적으로이 전에 인터넷 서비스에 항공편을 찾아 거죠?

412
00:24:41,600 --> 00:24:44,650
>> 예. 당신은 그렇게 >> [안 들리게 학생 응답] >> 말을 할 수 -

413
00:24:44,650 --> 00:24:47,530
[학생] 각 항공사. >> 그래. 각 항공사는 자신의 웹 사이트가 있습니다.

414
00:24:47,530 --> 00:24:50,110
이 일을 통합합니다. 그리고?

415
00:24:50,110 --> 00:24:52,190
[학생] 당신은 당신이 떠나는 정확히 시간을 알아요.

416
00:24:52,190 --> 00:24:54,460
당신은 떠나 정확히 시간을 알고

417
00:24:54,460 --> 00:24:59,380
하지만 특히 필터에 관한.

418
00:25:00,710 --> 00:25:03,540
나 카약을 펼쳐 보자.

419
00:25:11,490 --> 00:25:14,020
이런, 팝업. 나쁜 사용자 경험.

420
00:25:14,020 --> 00:25:17,230
내가이 슬라이더를 이동하면 어떻게됩니까?

421
00:25:17,230 --> 00:25:21,010
[학생] 자동 업데이트. >> [옹] 자동 업데이트.

422
00:25:21,010 --> 00:25:23,440
매우 중요 그게 뭐입니다.

423
00:25:23,440 --> 00:25:25,380
이 전에, 당신은 비행기를보고 싶어 할 때마다,

424
00:25:25,380 --> 00:25:28,410
귀하의 입력 위치, 출력 위치, 프레스 검색에 넣어했다

425
00:25:28,410 --> 00:25:31,190
그게 무엇인지를 처리​​하고 결과를 표시합니다.

426
00:25:31,190 --> 00:25:34,120
검색어를 변경하고자하는 경우, 당신은 두 번 다시 키를 눌러해야

427
00:25:34,120 --> 00:25:39,770
처음부터 새로운 쿼리에 입력 한 다음 다시 이쪽으로 수행합니다.

428
00:25:39,770 --> 00:25:43,910
이런 일에 대해 좋은 점은 중간에 매우 불륜의 현장을! 일을 사용합니다.

429
00:25:43,910 --> 00:25:46,230
이 같은 작업을 수행 할 때마다, 그것은 요청을 쏘

430
00:25:46,230 --> 00:25:48,420
그리고 당신에게 즉시 모든 결과를 반환합니다.

431
00:25:48,420 --> 00:25:51,680
즉각적인 피드백 이런 일들이 카약이 격렬하게 인기 것이지

432
00:25:51,680 --> 00:25:55,910
난 그냥 내 검색어를 변경하는 것이 정말 쉽기 때문입니다

433
00:25:55,910 --> 00:25:58,890
그리고 특정 범위 주위에있는 사물을 이해할 수

434
00:25:58,890 --> 00:26:01,950
저런 저런 돌아 가야 할 필요없이.

435
00:26:01,950 --> 00:26:05,200
그래서이 당신​​이 웹 사이트를 디자인 할 때 생각하고 싶지도, 모든 일입니다.

436
00:26:05,200 --> 00:26:08,930
내 사용자가 최선을 다하고 무엇이든을 통과하는 방법은 매우 효율적으로 할 수 있습니다

437
00:26:08,930 --> 00:26:13,010
그리고 가능한 빨리 자신의 최종 목표에 도착 하는가?

438
00:26:13,010 --> 00:26:16,430
[Malan] 그​​리고 이전에 반드시 원하는 게 뭔지 모르면서 사용자에 대한 요셉의 관점으로,

439
00:26:16,430 --> 00:26:18,640
당신들이 지금 HTML에 대해 알고있는 내용에 기초하여

440
00:26:18,640 --> 00:26:22,780
당신은 체크 박스, 라디오 버튼, 선택 메뉴, 입력 필드와 같은을 가지고

441
00:26:22,780 --> 00:26:26,140
어떻게 비행에 대한 시작 시간을 선택할의 개념을 구현하는 것?

442
00:26:26,140 --> 00:26:30,030
>> 당신은 그 다양한 UI 메커니즘 중을 사용?

443
00:26:30,030 --> 00:26:34,100
당신은 전에 배웠습니다 HTML의 양을 알고있는 경우

444
00:26:34,100 --> 00:26:39,070
그리고 당신은 입력이 라디오 버튼, 체크 박스, 드롭 다운, 그리고 입력 상자 알고

445
00:26:39,070 --> 00:26:43,320
당신의 자연 선택은 날짜를 선택 무슨 일 있었 을까?

446
00:26:43,320 --> 00:26:48,670
[학생] 입력. >> 입력. 아니면 심지어 드롭 다운 날짜가 모두 포함, 그렇죠?

447
00:26:48,670 --> 00:26:53,170
따라서 구현할 수있는 왼쪽과 같은 더 복잡한 UI 메커니즘과,

448
00:26:53,170 --> 00:26:55,500
당신은 슬라이더로이 과정이 훨씬 더 직관적 할 수 있습니다

449
00:26:55,500 --> 00:27:01,020
시간이 계속하기 때문에, 사람들은 일반적으로 분리 된 덩어리의 관점에서 생각하지 않습니다.

450
00:27:01,020 --> 00:27:04,950
괜찮아요. 마지막으로.

451
00:27:04,950 --> 00:27:07,370
열 사용 편의성 추론.

452
00:27:07,370 --> 00:27:10,820
우리가 얘기 모든 것들이 아마도 이러한 범주 중 하나에 해당.

453
00:27:10,820 --> 00:27:14,420
당신은 사이트가 온라인으로 게시됩니다이 링크로 이동하는 경우

454
00:27:14,420 --> 00:27:18,900
귀하의 사이트를 디자인으로 사실 수있을 겁니다, 마음에서 이러한 추론을 유지

455
00:27:18,900 --> 00:27:21,330
엄지와 규칙.

456
00:27:21,330 --> 00:27:26,610
당신의 프로젝트의 경우, 당신의 앱이 더 나은 설계하기 위해 당신이하는 일을 제안

457
00:27:26,610 --> 00:27:28,850
먼저 종이 프로토 타이핑을 할 수 있습니다.

458
00:27:28,850 --> 00:27:32,150
귀하의 응용 프로그램에 대한 생각하면, 매우 빨리 당신이처럼 보이도록 원하는 스케치

459
00:27:32,150 --> 00:27:36,230
및 확인 모든 상자는 사용자가 사용하기에 매우 직관적 인 방법으로 배열되어

460
00:27:36,230 --> 00:27:39,820
심지어 친구에게이 종이 프로토 타입을 보여 포커스 그룹을 시작합니다.

461
00:27:39,820 --> 00:27:44,230
그냥 함께 2 ~ 3 명을하고 단지이 종이 프로토 타입을 터치하도록 요청

462
00:27:44,230 --> 00:27:47,650
그리고 실제로 무슨 일이 일어나고 있는지 이해하는지 그들에게 새로운 화면을 표시합니다.

463
00:27:47,650 --> 00:27:50,680
>> 당신이하길 원하는 것은, 해당 작업 동기를 부여, 그들에게 작업을 알려주는

464
00:27:50,680 --> 00:27:53,270
불과 그들에게 응용 프로그램을 제공하고 그것을 사용할 수 있도록.

465
00:27:53,270 --> 00:27:56,530
그들에게 그 이상의 설명을 제공하지 마십시오.

466
00:27:56,530 --> 00:28:00,920
당신은 실제로 당신이 볼 수있는 방식으로 응용 프로그램과 상호 작용하게하려면

467
00:28:00,920 --> 00:28:03,870
당신이 그들 옆에 서 있지 않았 더라면 어떻게 그것을 사용할 수 있습니다.

468
00:28:03,870 --> 00:28:05,250
그래서 매우 중요합니다.

469
00:28:05,250 --> 00:28:08,780
특히 것들이 주변에 점점 사람들이에 관해서 그에게 통찰력을 많이 줄 것이다

470
00:28:08,780 --> 00:28:10,560
제가 의도하지 않은 방법으로?

471
00:28:10,560 --> 00:28:14,680
그들은 화면에 특정 UI 메커니즘을 사용하고 계십니까

472
00:28:14,680 --> 00:28:17,490
방식으로 그 hacky 일 일까?

473
00:28:17,490 --> 00:28:22,020
그들이 그것을 그런 식으로 할 생각은 의도하지 않았다.

474
00:28:22,020 --> 00:28:23,940
일단 당신이 그와 함께 완료, 당신은 무엇을 하시겠습니까?

475
00:28:23,940 --> 00:28:26,010
귀하의 설계 바위, 그렇죠?

476
00:28:26,010 --> 00:28:29,600
당신이 원하는하면 다시 할 해당 프로세스를 개발하고 싶은 것입니다.

477
00:28:29,600 --> 00:28:32,110
그래서 당신이 그것을 개발 한 후 친구들에게 보여, 그것을 테스트

478
00:28:32,110 --> 00:28:36,630
개발, 테스트, 개발, 테스트, 반복에 및 앞으로.

479
00:28:36,630 --> 00:28:39,720
디자인은 매우 의미에 프로세스를 반복합니다.

480
00:28:39,720 --> 00:28:43,280
당신은 실제로 그것에 대해 가지 일을 알게 한 후 무언가를 구축하고 있습니다

481
00:28:43,280 --> 00:28:46,520
전에 실현하고 돌아가서 그에서 개선하는 것이 었죠.

482
00:28:46,520 --> 00:28:50,890
이젠, 개발 부분에 대한, 그 토미는 휴식 후를 보여 무슨 일이야

483
00:28:50,890 --> 00:28:53,220
그리고 어떻게 자동 완성 같은 것을 구현 할 수있을 것

484
00:28:53,220 --> 00:28:56,610
상당히 간단합니다 방법 인치

485
00:28:57,440 --> 00:28:59,550
[Malan]으로 토미는 질문 후, 여기에 설정합니다.

486
00:28:59,550 --> 00:29:03,780
초기 웹 사이트의 많은 - 때와 요셉은 1990 년대 스타일의 웹 사이트를 말했다

487
00:29:03,780 --> 00:29:07,640
그게 당신이 시작 시간을 선택하고자 할 경우 구현과 끝 시간이었습니다

488
00:29:07,640 --> 00:29:10,380
말해서, 오늘 다시 하루에, 심지어 일부 웹 사이트에서,

489
00:29:10,380 --> 00:29:13,220
이 작업을 수행하는 방법은, 당신이 드롭 다운에서 시간을 선택합니다

490
00:29:13,220 --> 00:29:15,910
당신은, PM, 드롭 다운, 어쩌면 당신은 AM 선택에서 분을 선택

491
00:29:15,910 --> 00:29:17,440
그리고 그 3 번을.

492
00:29:17,440 --> 00:29:19,920
그리고 6 클릭 수와 어쩌면 일부 스크롤과

493
00:29:19,920 --> 00:29:24,000
사용자가 실제로 의미에 날짜 및 / 또는 시간 범위의 일부 종류를 제공 할 수 있습니다.

494
00:29:24,000 --> 00:29:27,920
>> 그럼 확실히 차선 아직 지금까지 우리는 표현 능력을 본적이 없어

495
00:29:27,920 --> 00:29:30,330
언어 중 하나에 우리는 무언가 섹시을 할 살펴 봤는데

496
00:29:30,330 --> 00:29:32,620
시작 시간과 종료 시간이 슬라이더처럼.

497
00:29:32,620 --> 00:29:36,290
하지만 우리가 스크래치에 대해 얘기 할 때 주 다시 0으로 생각한다면

498
00:29:36,290 --> 00:29:39,080
너무 확실히 일을 저지른 위젯이 없었습니다.

499
00:29:39,080 --> 00:29:42,700
당신은 정말 그냥 루프 약관 및 같은 같은 이러한 기본했다.

500
00:29:42,700 --> 00:29:46,910
그러므로 HTML의 세부 사항과는 독립적 지금 매우 추상적 사고 종류

501
00:29:46,910 --> 00:29:51,260
정말 시작 시간과 종료 시간 슬라이더 같은 무슨 일 이니?

502
00:29:51,260 --> 00:29:54,960
내 마우스를 이동하고는 왼쪽에 저 작은 당근 기호를 클릭하면

503
00:29:54,960 --> 00:29:59,220
하고 드래그 시작 프로그램, 당신이 구현할 수 싶습니다

504
00:29:59,220 --> 00:30:01,000
그렇게 해주?

505
00:30:01,000 --> 00:30:04,920
어떤 질문, 물어 할 수 있도록 어떤 부울 식을 하시겠습니까?

506
00:30:04,920 --> 00:30:06,930
정말 무슨 일이야? 새미?

507
00:30:06,930 --> 00:30:10,080
[학생] 커서의 위치는 어디 있나? >> 좋아. 커서의 위치는 어디 있지?

508
00:30:10,080 --> 00:30:11,970
이것은 우리가 스크래치 다시 표현하기 위해 필요한 어떤 것이

509
00:30:11,970 --> 00:30:14,690
그것은 위치 또는 색상이나 같은에 따라 여부.

510
00:30:14,690 --> 00:30:18,410
당신이 월요일에 이렇게 간단히 어느 헤비급 이러한 모든 이벤트라고있었습니다

511
00:30:18,410 --> 00:30:22,370
웹의 세계에서, 그래서 onclick과 onkeypress 같은 일이있어

512
00:30:22,370 --> 00:30:25,960
와 onkeyup 및 onmouseover와 onmouseout.

513
00:30:25,960 --> 00:30:29,130
따라서 우리가 복용 한 경우에도 이런 일이 웹에 부여 실현

514
00:30:29,130 --> 00:30:32,190
당신이 모르는 경우에도 페이스 북과 Gmail과 같은 사이트와

515
00:30:32,190 --> 00:30:34,890
강의에 심지어 같은 아무 것도 없기 때문에 당신이 어떻게 그걸를 구현하는 방식을

516
00:30:34,890 --> 00:30:38,570
나 문제는,이 동일한 기본으로 그걸 깨달았을 7로 설정

517
00:30:38,570 --> 00:30:41,090
HTTP 및 매개 변수와 GET과 POST,

518
00:30:41,090 --> 00:30:44,010
우리가 지금까지 바라 보았다 한 기본 HTML 입력과

519
00:30:44,010 --> 00:30:47,690
그리고 프로그래밍 메커니즘과 순간에 연합군이에 대해 소개하기위한 것으로

520
00:30:47,690 --> 00:30:51,300
당신은 주 0에 그랬던 것처럼 자신을 표현하는 시작할 수 있습니다

521
00:30:51,300 --> 00:30:53,800
로 매우 직관적으로 끌어서 놓기.

522
00:30:53,800 --> 00:30:58,950
>> 그럼, 토미 MacWilliam과 웹에 대한 우리 새로운 퍼즐 조각을했다 그게.

523
00:30:58,950 --> 00:31:03,450
괜찮아요. 내 이름은 토미이고 자바 스크립트에 대해 이야기 할 수있을거야.

524
00:31:03,450 --> 00:31:07,150
단 면책 조항 : 나는 자바 스크립트를 최고의 프로그래밍 언어입니다 견해이다

525
00:31:07,150 --> 00:31:09,010
전체 전체 세계 요.

526
00:31:09,010 --> 00:31:11,940
거기에 동의 많은 사람들이 있지만, 정말 놀랍 네요.

527
00:31:11,940 --> 00:31:16,330
당신이 다른 클래스 또는 다른 언어로 C를 작성해야하는 경우 일단, C로 이동

528
00:31:16,330 --> 00:31:19,780
그것은 인치 속도가 느려하기가 당신이 가진 모든 낮은 수준의 세부 정말 절망적이야

529
00:31:19,780 --> 00:31:23,050
지금까지 C가 작성하는 것이 얼마나 짜증나는 게 슬픈 기분이면은,

530
00:31:23,050 --> 00:31:25,130
그냥 돌아가 자바 스크립트를 써주세요. 그것은 해탈의 경지입니다.

531
00:31:25,130 --> 00:31:27,980
당신은 나쁜 일에 대해 훨씬 기분이 나아질거야.

532
00:31:27,980 --> 00:31:31,900
자바 스크립트의 마법이 많은 물건을 조작하는 능력에서 유래

533
00:31:31,900 --> 00:31:33,730
그 페이지에 이미 있습니다.

534
00:31:33,730 --> 00:31:38,520
우리는 PHP 스크립트를 작성하면,이 서버에서 실행 된

535
00:31:38,520 --> 00:31:42,270
결국 PHP 스크립트는 아마 HTML을 출력하는.

536
00:31:42,270 --> 00:31:45,860
그 HTML은 클라이언트에 전송하고 그게이었다.

537
00:31:45,860 --> 00:31:50,180
PHP가 페이지에 단추를 추가하고자 할 경우, 예를 들어, 정말 그렇게 할 수 없어.

538
00:31:50,180 --> 00:31:54,350
그것은 완전히 새로운 HTML 파일을 렌더링하고 브라우저에있는을 보내해야합니다.

539
00:31:54,350 --> 00:31:57,840
자바 스크립트를 통해 우리가가 페이지에 이미있는 동안 우리가 물건을 업데이트 할 수 있다는 사실을 알고,

540
00:31:57,840 --> 00:32:00,840
이 때문에 우리는 더 즉각적인 피드백을 제공 할 수 있습니다

541
00:32:00,840 --> 00:32:06,150
이는 우리의 웹 사이트에서 사용자 경험을 향상시킬 수 있습니다.

542
00:32:06,150 --> 00:32:09,330
자바 스크립트 선택자 잠깐 뉴스 레터를 살펴보세요.

543
00:32:09,330 --> 00:32:11,590
우리가 HTML 페이지를 다운로드 할 때 우리는 알고,

544
00:32:11,590 --> 00:32:13,890
그 DOM에 표시 할거야.

545
00:32:13,890 --> 00:32:19,340
>> DOM은 기억이 요소가이 대형 계층 구조에 관련되어 그냥이 큰 나무입니다.

546
00:32:19,340 --> 00:32:21,810
우리가 pset 7에서 데이터베이스 일 경우,

547
00:32:21,810 --> 00:32:26,280
우리가 할 방법을 알고하는 데 필요한 첫 번째 것들 중 하나는 데이터베이스를 쿼리했습니다.

548
00:32:26,280 --> 00:32:29,060
, 우리는이 큰 사용자 테이블을 가지고 있고, 때때로 우리가하고 싶은 말은

549
00:32:29,060 --> 00:32:33,260
"나는 일부 조건을 일치하는 사용자들 중 일부를 원한다."

550
00:32:33,260 --> 00:32:36,020
마찬가지로, 우리가 DOM이있을 때 우리는 그것을 쿼리의 일부 방법이 필요합니다.

551
00:32:36,020 --> 00:32:39,490
우리는 말하는 방법이 필요하다 "나도 이렇게 생긴 버튼을 모두 갖고 싶어

552
00:32:39,490 --> 00:32:41,860
"나 페이지에있는 모든 이미지."

553
00:32:41,860 --> 00:32:44,330
그리고이 선택자은 우리가 그런 짓을 할 수 있습니다.

554
00:32:44,330 --> 00:32:45,690
그러므로 빠른 뉴스 레터를 살펴보세요.

555
00:32:45,690 --> 00:32:50,770
여기에 첫 번째 사람은,이 # 제출을 선택하려고하는 무엇입니까? 사람 기억 하는가?

556
00:32:50,770 --> 00:32:54,880
[안 들리게 학생 응답] >> 네, 맞아요.

557
00:32:54,880 --> 00:32:59,510
이 제출의 ID가 페이지에 요소를 선택할 것입니다.

558
00:32:59,510 --> 00:33:03,470
그리고 그렇게 해시 태그는 선택이 ID를 사용할 것입니다 말합니다.

559
00:33:03,470 --> 00:33:07,630
어떻게 두 번째에 대해,이. 중심, 그게 무슨 선택합니다?

560
00:33:11,360 --> 00:33:15,180
그래. >> [학생] 클래스입니다. 정확히 >>. 이 기능은 이제 클래스에 의해 선택하는 것이다.

561
00:33:15,180 --> 00:33:18,840
ID 여기 클래스 사이의 차이점은 ID가 고유해야합니다 일반적으로

562
00:33:18,840 --> 00:33:20,820
어떤 공간 내에는 끝났 검색 중입니다.

563
00:33:20,820 --> 00:33:23,080
당신은 전체 웹 페이지를 통해 검색 한면,

564
00:33:23,080 --> 00:33:27,740
당신은 정말에만 제출의 경우에 따라서 특정 ID 1 개 요소가 있어야합니다.

565
00:33:27,740 --> 00:33:31,330
클래스와, 다른 한편으로, 우리는 동일한 페이지에 개 이상의 요소를 가질 수 있습니다

566
00:33:31,330 --> 00:33:33,130
같은 클래스가 있습니다.

567
00:33:33,130 --> 00:33:36,580
이것이 내가 페이지에 중심 전부를 선택하려면 말씀에 유용 할 수 있습니다

568
00:33:36,580 --> 00:33:38,450
보다는 단 1 건.

569
00:33:38,450 --> 00:33:40,310
>> 그리고 마지막으로, 여기에 마지막으로 하나는 조금 더 복잡합니다

570
00:33:40,310 --> 00:33:43,890
하지만이 DOM에서 선택 무슨 일이야?

571
00:33:46,650 --> 00:33:48,810
[안 들리게 학생 응답] >> 그게 뭐야?

572
00:33:48,810 --> 00:33:53,250
[학생] 태그의 아무거나. 우리는 여기이 부분이 >>.

573
00:33:53,250 --> 00:33:58,070
두 번째 부분은, 내가 입력 태그 태그를 선택하려면 말 것입니다

574
00:33:58,070 --> 00:34:00,730
입력 태그입니다 어떤 요소 때문에.

575
00:34:00,730 --> 00:34:03,080
하지만 난 그냥 입력을 모두 선택하지 않으

576
00:34:03,080 --> 00:34:05,170
제출 버튼 같은 뭔가가 입력 될 수 있기 때문에

577
00:34:05,170 --> 00:34:08,409
및 텍스트 상자 같은 뭔가가 입력 될 수 있습니다.

578
00:34:08,409 --> 00:34:11,909
그래서 말은이 대괄호로 난 단지 요소를 선택하려면

579
00:34:11,909 --> 00:34:14,110
형 텍스트 말합니다.

580
00:34:14,110 --> 00:34:17,400
어딘가 내 HTML 태그에 I 형이라는 속성을 가지고

581
00:34:17,400 --> 00:34:19,750
그 속성의 값은 텍스트 여야합니다.

582
00:34:19,750 --> 00:34:21,340
그럼 여기 첫 부분에 대해?

583
00:34:21,340 --> 00:34:25,489
이 선택기의 첫 번째 단어는 그때 그때 공간이 입력 부분이 형태입니다.

584
00:34:25,489 --> 00:34:29,620
그게 앞에 양식을 넣어, 무엇입니까?

585
00:34:33,409 --> 00:34:35,860
이것은 기본적으로 우리의 쿼리를 제한하는 것이다.

586
00:34:35,860 --> 00:34:38,510
우리가 페이지에 몇 가지 입력을 가지고있는 경우 일 수도

587
00:34:38,510 --> 00:34:41,080
양식의 후손하지 않았다는 것을.

588
00:34:41,080 --> 00:34:46,150
이게 할 것 건 만 원이 말 것입니다 어딘가에 위에있는 입력 태그

589
00:34:46,150 --> 00:34:49,030
양식의 일부 부모 요소.

590
00:34:49,030 --> 00:34:52,100
그리고 이런 방식으로 우리는이 더 많은 계층 쿼리를 만들 수 있습니다

591
00:34:52,100 --> 00:34:55,000
그래서 우리는 주어진 선택 일치 모든 선택 할 필요가 없습니다.

592
00:34:55,000 --> 00:35:00,760
우리는 다른 뭔가 해당 검색어의 제한 범위를 종류의 수 있습니다.

593
00:35:00,760 --> 00:35:04,000
그래서 지금 우리가 페이지에서 요소를 선택하는 방법을 알고,

594
00:35:04,000 --> 00:35:06,780
가 AJAX에 대해 조금 얘기 좀하자.

595
00:35:06,780 --> 00:35:12,270
AJAX는 비동기 자바 스크립트와 XML의 약자 여전히 유행 약자입니다.

596
00:35:12,270 --> 00:35:15,640
그건 아주 XML 데이터를 표시하는 단순한 방법입니다 발생합니다.

597
00:35:15,640 --> 00:35:20,920
>> 최근에 분실 인기의 종류, 그래서 AJAX의 X는 모든 시간을 사용하지 않습니다.

598
00:35:20,920 --> 00:35:26,220
기본적으로 AJAX 우리가 수행 할 수 있습니다 어떤 HTTP 요청을 할 수 있습니다

599
00:35:26,220 --> 00:35:28,620
자바 스크립트의 컨텍스트에서.

600
00:35:28,620 --> 00:35:32,310
우리는 웹 브라우저에서, 우리는 페이지의 주위에 이동하고 있으며 우리가 링크를 클릭하면

601
00:35:32,310 --> 00:35:37,790
그럼 우리의 브라우저가 어떻게 할 것은 우리가 어떤 링크를 클릭 HTTP 요청을합니다.

602
00:35:37,790 --> 00:35:41,670
그 경우 경우, 데이빗, 말한 것처럼 있기 때문에 그러나 항상 이상적인 건

603
00:35:41,670 --> 00:35:45,220
우리는 항상 사용자가 제출 버튼을 클릭하거나 링크를 클릭해야

604
00:35:45,220 --> 00:35:50,380
만약 HTTP 요청을 포함 할거야 그 일을 알아 보려면 여기를 클릭하십시오.

605
00:35:50,380 --> 00:35:54,160
따라서 AJAX와 함께 우리는 자바 스크립트를 대신하여 이러한 요청을 할 수 있습니다.

606
00:35:54,160 --> 00:35:57,020
사용자가 페이지 나 어떤 일이와 상호 작용 할 때마다이 의미는,

607
00:35:57,020 --> 00:36:01,780
우리는 실제로 우리의 웹 사이트에 다른 PHP 파일에 프로그래밍 요청을 할 수 있습니다

608
00:36:01,780 --> 00:36:06,280
또는 다른 어떤 그 파일이 밖으로 침을 뱉하는 데이터를 검색합니다.

609
00:36:06,280 --> 00:36:09,860
가 AJAX의 예를 살펴 보자.

610
00:36:09,860 --> 00:36:16,140
이 잘하면 우리 중 누군가는 익숙되는 우리 CS50 금융 페이지입니다.

611
00:36:16,140 --> 00:36:21,790
우리는이 페이지의 HTML을 보면, 우리는, 나는 몇 가지를 추가 한 것으로 볼 수

612
00:36:21,790 --> 00:36:23,820
내가이 형태 ID를 부여하는 중 하나입니다.

613
00:36:23,820 --> 00:36:26,480
나는 이드 = "폼 견적"고 말했다했습니다.

614
00:36:26,480 --> 00:36:31,910
는 DOM에서 선택이 조금 더 쉽게 만들 수있을 거라고해서 내가 이런 짓을 한

615
00:36:31,910 --> 00:36:35,090
난 그냥 아주 간단한 쿼리를 만들 수 있습니다 때문입니다.

616
00:36:35,090 --> 00:36:38,960
내가 여기서하고 싶은 것은 제가 CS50 금융와 함께 문제를 해결하려는 것입니다.

617
00:36:38,960 --> 00:36:41,550
우리가 finance.cs50.net로 이동하면,

618
00:36:41,550 --> 00:36:45,700
제가 견적을 할 때마다, 나는이 얻기 견적 버튼을 클릭해야합니다

619
00:36:45,700 --> 00:36:48,960
그리고 그 견적 버튼을 한 다음 다른 전체 페이지로 저를 소요 해.

620
00:36:48,960 --> 00:36:52,400
그리고 다른 견적을 원하면, 내가 '뒤로'버튼을 누르해야하고 제가의 입력

621
00:36:52,400 --> 00:36:54,480
나는 견적을 받아, 나는 '뒤로'버튼을 누르십시오.

622
00:36:54,480 --> 00:36:56,840
이건 정말 최고의 사용자 경험을하지 않습니다.

623
00:36:56,840 --> 00:37:01,570
이 주식 가격을 해당 속도가 느린면 누가 정말이 사이트를 사용 했 겠어요?

624
00:37:01,570 --> 00:37:05,630
그래서 우리가 AJAX와 함께하고 싶은 것은 별도의 페이지로 이동의 단계를 제거 is

625
00:37:05,630 --> 00:37:08,410
결과를 볼 수 있습니다 순서를 유지해야합니다.

626
00:37:08,410 --> 00:37:11,240
>> 우리가 정말로 유일한 요구하는 것은 그 정말 작은 가격입니다

627
00:37:11,240 --> 00:37:14,240
그는 데이터의 정말 작은 금액입니다.

628
00:37:14,240 --> 00:37:17,400
그럼 또 다른 전체 HTML 페이지를 이동 나를 위해 필요가 없습니다

629
00:37:17,400 --> 00:37:20,670
HTML의 새로운 배치를 다운로드, 아마, 좀 더 이미지를 다운로드

630
00:37:20,670 --> 00:37:24,410
다른 CSS 파일을 그냥 날은 매우 간단한 질문에 대답을 위해

631
00:37:24,410 --> 00:37:27,810
의 얼마나 많은이 재고 비용 않습니다.

632
00:37:27,810 --> 00:37:31,000
AJAX를 통해 우리는이 많은 쉽게 할 수 있습니다.

633
00:37:31,000 --> 00:37:36,400
우리는 내가 quote.js라는 자바 스크립트 파일에 연결하는 건 여기를 참조하십시오.

634
00:37:36,400 --> 00:37:40,140
의는 실제로 그 파일을 열어 보자. 거기가 아니야.

635
00:37:42,610 --> 00:37:45,860
내 자바 스크립트 파일의 모든 HTML에 위치 거예요

636
00:37:45,860 --> 00:37:47,630
되도록는 웹 브라우저에 액세스 할 수 있습니다.

637
00:37:47,630 --> 00:37:50,330
그런 다음 우리는 자바 스크립트를 보시려면 여기를 별도의 디렉토리를 가지고

638
00:37:50,330 --> 00:37:54,340
지금 여기 quote.js입니다.

639
00:37:54,340 --> 00:38:00,930
이 파일의 상단에 내가로드 할 전체 페이지 기다리는하려는 여기 써

640
00:38:00,930 --> 00:38:04,830
난 아무 짓도하기 전에. 그게 왜 필요?

641
00:38:04,830 --> 00:38:08,650
내가 여기서 뭘 할거야 다음 것은 시작 요소를 찾는 것을 밝혀

642
00:38:08,650 --> 00:38:10,810
그 어떤 선택 일치합니다.

643
00:38:10,810 --> 00:38:15,600
이 요소가 페이지에로드하기 전에이 자바 스크립트를 어느 실행하는 경우는,

644
00:38:15,600 --> 00:38:17,820
그럼 어떻게하려고 모든 성공할 수 없어

645
00:38:17,820 --> 00:38:20,580
아직 없다 무언가를 선택하려고거야 때문입니다.

646
00:38:20,580 --> 00:38:23,780
그래서 꼭대기이 줄은 생각은 모든로드 될 때까지 기다려야 한대

647
00:38:23,780 --> 00:38:28,030
그래서 우리는 내가 찾는 모든 요소가 페이지에 실제로 있다는 보장하고 있습니다.

648
00:38:29,730 --> 00:38:34,310
여기에 달러 기호는 내가 jQuery를라는 라이브러리를 사용을 의미합니다.

649
00:38:34,310 --> 00:38:38,570
이 jQuery를 라이브러리는 우리가 단지 바라 보았다 이러한 선택기를 사용할 수 있습니다.

650
00:38:38,570 --> 00:38:44,010
인자로 # 폼 견적을에 합격 한 후 $ 말을하면,

651
00:38:44,010 --> 00:38:47,910
지금 우리가 살펴을 가지고 있다는 그 양식을 선택거야.

652
00:38:47,910 --> 00:38:52,290
지금은 어떻게 든 메모리에서 해당 양식의 표현이 있습니다.

653
00:38:52,290 --> 00:38:56,760
>> 지금은이 개체에서 양식의 표현,

654
00:38:56,760 --> 00:38:58,890
지금에라는 기능을 사용하고 있습니다.

655
00:38:58,890 --> 00:39:02,710
어떤이 함수가 수행하면이 이벤트 핸들러를 첨부거야입니다.

656
00:39:02,710 --> 00:39:06,310
우리가 들으 려하고있는 이벤트는 제출 이벤트입니다.

657
00:39:06,310 --> 00:39:08,890
따라서 버튼 또는 프레스 제출 사용자 클릭, 입력 할 때

658
00:39:08,890 --> 00:39:11,730
이 이벤트는 발사 예정이다.

659
00:39:11,730 --> 00:39:16,390
이 연결하겠다으로, 지금은 양식의 기본 동작을 무시할 수 있습니다.

660
00:39:16,390 --> 00:39:19,770
이 자바 스크립트없이, 양식에 제출 것 어떤 PHP 파일을

661
00:39:19,770 --> 00:39:22,110
우리는 액션 속성에 사용됩니다.

662
00:39:22,110 --> 00:39:25,440
대신, 난 지금 잠깐, 잠깐, 잠깐, 당신이 실제로 그렇게하고 싶지 않아 말하는거야.

663
00:39:25,440 --> 00:39:31,140
난 당신이 가서 PHP 파일을 제출하기 전에 이런 일이하고 싶습니다.

664
00:39:31,140 --> 00:39:32,870
지금은 뭘하고 싶어요?

665
00:39:32,870 --> 00:39:39,270
이 시점에서 나는 주식의 가격이 무엇인지에로드 든 AJAX를 사용하고 싶습니다.

666
00:39:39,270 --> 00:39:44,170
내가 알아야 할 첫 번째 것은 사용자가 원하는 내용을 가공합니다.

667
00:39:44,170 --> 00:39:46,760
나는 다른 선택기를 사용하는거야 그런 짓을합니다.

668
00:39:46,760 --> 00:39:49,020
이것은 우리가 전에 바라 보았다 세 번째 선택이다.

669
00:39:49,020 --> 00:39:54,460
이건 제가 폼 견적의 ID로이 양식 요소를 시작하려는 말합니다.

670
00:39:54,460 --> 00:39:58,440
그런 곳에서 그 양식의 내부에 입력 요소가있을

671
00:39:58,440 --> 00:40:01,270
그 심볼의 이름이 있습니다.

672
00:40:01,270 --> 00:40:05,460
우리는 HTML를 다시 확인하면, 우리가 입력했던 본 [이름 = 기호].

673
00:40:05,460 --> 00:40:12,380
그게이 사용자가에 입력되는 해당 텍스트 상자를 선택 것입니다 것을 의미합니다.

674
00:40:12,380 --> 00:40:13,870
그거 좋네요. 우리는 텍스트 상자가 있습니다.

675
00:40:13,870 --> 00:40:17,360
이제 우리는 그 안에 알이 필요 해요.

676
00:40:17,360 --> 00:40:20,290
우리는 여기에서이 메서드를 호출 할 수 있다는. 발하려면

677
00:40:20,290 --> 00:40:23,240
그리고 이건 나 자기가 가지고있는 것을 텍스트 상자 알고 말합니다.

678
00:40:23,240 --> 00:40:28,160
난 당신이 그 텍스트 상자에 입력 한 사용자는 걸 말해 싶습니다.

679
00:40:28,160 --> 00:40:34,440
이제 우리는 사용자가 들어 입력 한대로 같다 기호라는 문자열이

680
00:40:34,440 --> 00:40:39,820
그거 좋네요. 우리는 우리의 요청을하기 위해 이제 문자열을 사용할 수 있습니다.

681
00:40:39,820 --> 00:40:42,450
이 녀석은 새로운 기능이며,이 $,

682
00:40:42,450 --> 00:40:44,900
를 제외하고 우리는 더 이상 요소를 선택해야 할 건

683
00:40:44,900 --> 00:40:48,910
우리는 jQuery를 우리에게 제공 한 다른 함수를 호출 할거야.

684
00:40:48,910 --> 00:40:54,810
이 AJAX 기능은 실제로이 HTTP 요청을 할 수있어.

685
00:40:54,810 --> 00:40:57,000
그래서 우리는 그에게 몇 가지 말씀이 있습니다.

686
00:40:57,000 --> 00:41:01,410
제가 요청이 가고 싶은 곳 우리가이 기능을 말할 수있는 우선입니다.

687
00:41:01,410 --> 00:41:08,910
어딘가에 내 프로젝트에서 나는 quote.php라는 HTML 디렉토리의 내부의 파일이 있습니다.

688
00:41:08,910 --> 00:41:15,150
나는 로컬 호스트 / quote.php로 이동되면이 파일을 액세스 할 수 있습니다, 우리, 그냥 같이 보았다.

689
00:41:15,150 --> 00:41:20,450
>> 그 페이지에 대한 요청을 할 수 내 자바 스크립트를 싶습니다.

690
00:41:20,450 --> 00:41:22,920
어떤 종류의 요청 지금은?

691
00:41:22,920 --> 00:41:27,210
양식이 방법 = "게시물"속성이 그 전에 우리는 본

692
00:41:27,210 --> 00:41:29,270
그리고 그 방법은 우리가, POST 요청을 할 수 있다는 뜻

693
00:41:29,270 --> 00:41:32,630
그래서, 대신 GET 요청보다 URL에 아무것도 넣어 않을거야

694
00:41:32,630 --> 00:41:36,860
우리가 예를 들어, 웹 브라우저를 통해 페이지에 액세스하는 경우 어떤이 방금 발사 될 것입니다.

695
00:41:36,860 --> 00:41:41,260
이제 내가 HTTP POST 요청을 만들고 싶어한다고 했잖아

696
00:41:41,260 --> 00:41:44,840
quote.php에있는 페이지에.

697
00:41:44,840 --> 00:41:51,490
우리가 양식을 제출하면, 우리는 그 양식의 내부 입력 요소를 액세스 할 수 기억

698
00:41:51,490 --> 00:41:54,430
그 $ _POST 변수가 있습니다.

699
00:41:54,430 --> 00:41:58,710
지금까지 이야기에서 우리는 실제로 아직 데이터가 함께 전송되지 않았습니다.

700
00:41:58,710 --> 00:42:00,640
우리는 우리가 AJAX 요청을하고 있다고 한

701
00:42:00,640 --> 00:42:03,200
그리고 여기서 우리가하는거야 요청의 유형입니다.

702
00:42:03,200 --> 00:42:07,090
이제 우리는 실제로 페이지에 일부 데이터를 전송해야합니다.

703
00:42:07,090 --> 00:42:10,930
우리가 데이터라는이 속성을 사용할 수있는 수행합니다.

704
00:42:10,930 --> 00:42:14,950
이 속성의 값은 실제로 연관 배열입니다.

705
00:42:14,950 --> 00:42:19,390
이것에 대한 이유는 우리가 데이터를 단 1 조각 그 이상을 보낼 수 있습니다 것입니다.

706
00:42:19,390 --> 00:42:24,750
우리가이 중괄호는 여기에 다른 중괄호 안에 중첩이 이유입니다.

707
00:42:24,750 --> 00:42:29,680
이러한 연관 배열의 키는 같은 일이 될거야

708
00:42:29,680 --> 00:42:32,630
그 이름은 우리의 폼 요소의 속성으로.

709
00:42:32,630 --> 00:42:35,740
그게 내가 기호의 핵심 함께 보내는 경우, 의미

710
00:42:35,740 --> 00:42:41,870
내 PHP 페이지가 $ _POST [기호]와이 데이터에 액세스 할 수 있습니다 의미

711
00:42:41,870 --> 00:42:44,640
우리가 양식을 제출했을 때 전에 그랬던 것처럼.

712
00:42:44,640 --> 00:42:47,090
이제 실제 데이터는 우리가 보낼

713
00:42:47,090 --> 00:42:50,790
이 연관 배열의 값을 내부가 될 것입니다.

714
00:42:50,790 --> 00:42:54,070
>> 우리는 변수라는 상징이 텍스트를 저장

715
00:42:54,070 --> 00:42:57,380
그래서 우리는 이제 기호의 키를 함께 보낼

716
00:42:57,380 --> 00:43:01,380
하고 사용자가 들어 입력 한대로의 값

717
00:43:01,380 --> 00:43:06,270
이제 우리는 우리의 PHP 파일이 실행 된이 HTTP 요청을했습니다

718
00:43:06,270 --> 00:43:11,480
그리고 사실은이 요청을 만든 클라이언트로 이제 다시 일부 데이터를 보낼거야.

719
00:43:11,480 --> 00:43:15,220
이제 우리는 서버가 우리에게 말을하던간에에 응답해야합니다.

720
00:43:15,220 --> 00:43:20,180
우리가 성공 불리는이 마지막 속성이 그러합니다.

721
00:43:20,180 --> 00:43:24,240
이러한 성공 키의 값은 실제로 함수가 될거야

722
00:43:24,240 --> 00:43:26,910
그리고 여러분이 자바 스크립트로 할 수있는 정말 멋진 일 중 하나입니다.

723
00:43:26,910 --> 00:43:31,720
뿐만 아니라 당신은 연관 배열의 값 내부로 ints 또는 배열을 할 수 있습니다

724
00:43:31,720 --> 00:43:34,170
우리는 또한 기능을 할 수 있습니다.

725
00:43:34,170 --> 00:43:36,380
그럼 성공을 말하면서, 이쪽은 내 핵심입니다.

726
00:43:36,380 --> 00:43:38,830
결장은 값을 나오고 있다고

727
00:43:38,830 --> 00:43:41,810
지금이 값이 실제로 기능입니다.

728
00:43:41,810 --> 00:43:44,460
그래서 우리는이 함수에게 본질적으로 이름을 필요가 없습니다.

729
00:43:44,460 --> 00:43:48,820
우리는이 몇 가지 기능이 될 것입니다 말할 수 있습니다. 그것은 1 인자를 받아 들일거야.

730
00:43:48,820 --> 00:43:51,190
이 함수의 인수는 될거야

731
00:43:51,190 --> 00:43:54,460
어떤 서버는 요청에서 우리를 다시 보냈습니다.

732
00:43:54,460 --> 00:43:57,750
우리 브라우저가 요청을 보낼 때처럼, 서버는 다시 무언가를 보냅니다

733
00:43:57,750 --> 00:43:59,060
그리고 브라우저는, 그것을 표시

734
00:43:59,060 --> 00:44:03,030
우리가 요청을 한 AJAX의 맥락에서, 서버는 다시 뭔가를 보내

735
00:44:03,030 --> 00:44:07,110
지금 우리는 그 문자열로 표현했습니다.

736
00:44:07,110 --> 00:44:11,280
그 문자열로 그냥 페이지에 그를 표시하고 싶습니다.

737
00:44:11,280 --> 00:44:14,040
나는 마지막 선택을하지 않을 수 없네요 그런 짓을합니다.

738
00:44:14,040 --> 00:44:17,570
나는 ID의 가격 요소를 선택하고 싶습니다.

739
00:44:17,570 --> 00:44:20,710
이것은 그냥 페이지에 만든 빈 사업부입니다

740
00:44:20,710 --> 00:44:26,640
그리고 서버가 우리에게 돌려 보낸 어떤 경우가있을 수 있습니다 사업부의 내용을 설정하고 싶습니다.

741
00:44:26,640 --> 00:44:30,280
사실 난 quote.php에게 조금 수정했습니다.

742
00:44:30,280 --> 00:44:33,460
>> 오히려 렌더링 전화 및 일부 페이지를 렌더링보다

743
00:44:33,460 --> 00:44:38,100
quote.php는 이제 단순히 문자열로 주식의 값을 인쇄 할 것이다.

744
00:44:38,100 --> 00:44:41,880
당신은 실제로 페이지를 방문하면 그래서, 그 작은 문자열을 볼 것이다

745
00:44:41,880 --> 00:44:45,030
주식 가격이 무엇이든지.

746
00:44:45,030 --> 00:44:50,170
우리가 여기서 마지막으로해야 할 일이 바로이 함수가 false를 반환해야합니다 수 있습니다.

747
00:44:50,170 --> 00:44:53,560
이건라는 것은 제가이 이벤트 핸들러 내부면

748
00:44:53,560 --> 00:44:57,300
그 이벤트 핸들러는, 대신에 진정한 반환 false를 반환합니다

749
00:44:57,300 --> 00:45:01,510
그게 내가 발사 할 수있는 원래 이벤트를 원하지 않는 것을 의미합니다.

750
00:45:01,510 --> 00:45:05,270
이 경우, 우리는 자바 스크립트를 가지고하지 않은 경우 우리는 양식을 제출

751
00:45:05,270 --> 00:45:08,280
웹 브라우저가 "나는, 함께 데이터를 보낼거야"라고 것입니다

752
00:45:08,280 --> 00:45:10,130
그리고 그들은 다른 페이지로 보내거야.

753
00:45:10,130 --> 00:45:14,360
지금 우리가 AJAX를 사용하기 때문에, 다른 페이지로 사용자를 보낼 필요가 없습니다.

754
00:45:14,360 --> 00:45:17,920
우리는이 같은 페이지에 동적으로 결과를 표시 할거야.

755
00:45:17,920 --> 00:45:21,460
우리는 정말로 어디서든 가고 싶지 않아, 나는 동일한 페이지에 있고 싶어.

756
00:45:21,460 --> 00:45:27,060
따라서 거짓 반환하여, 우리는 양식이 그 방법을하지 않습니다 있는지 확인하십시오.

757
00:45:27,060 --> 00:45:31,170
의이 실제로 어떻게 생겼는지를 살펴 보자.

758
00:45:31,170 --> 00:45:34,180
우리 견적 페이지는 같은 보입니다.

759
00:45:34,180 --> 00:45:37,240
우리가 무슨 일이 일어나고 있는지 볼 수 있도록 나를 여기까지 검열을 펼쳐 보자.

760
00:45:37,240 --> 00:45:40,270
조금 덜 거대한합니다.

761
00:45:40,270 --> 00:45:44,590
우리가 HTTP 요청을 모두 볼 수있는 우리가 네트워크 탭을 열면 기억이 있습니다

762
00:45:44,590 --> 00:45:47,570
그 페이지에 일어나고 있습니다.

763
00:45:47,570 --> 00:45:52,890
>> 기호 날은 AAPL에 입력하고 견적을 클릭 보자.

764
00:45:52,890 --> 00:45:56,720
이제 우리는 애플의 점유율은 달러의 일부 숫자를 비용을 보았다

765
00:45:56,720 --> 00:46:00,410
단지는 페이지에 게재하지만, URL은 전혀 변경되지 않았습니다.

766
00:46:00,410 --> 00:46:04,570
사실 여기서 우리가 만든 HTTP 요청입니다.

767
00:46:04,570 --> 00:46:09,980
우리는 quote.php에 POST 요청을했다. 그 말이 있습니다.

768
00:46:09,980 --> 00:46:12,800
이 서버가 우리에게 돌려 보낸 것을이다.

769
00:46:12,800 --> 00:46:16,320
그것은 더 이상 이미지와 그런 식으로이 거대한 HTML 문서없는

770
00:46:16,320 --> 00:46:20,920
그냥 텍스트 행이고, 다음에 우리가 텍스트의 행을 표시됩니다.

771
00:46:20,920 --> 00:46:26,290
우리가 헤더로 돌아가서 우리가 실제로 HTTP 요청의 내부 전송 확인할 경우는,

772
00:46:26,290 --> 00:46:33,950
우리는 우리가 기호와 AAPL의 값의 키를 따라 보낸 여기에 볼 수 있습니다

773
00:46:33,950 --> 00:46:36,430
이는 사용자가 들어 입력 한 내용입니다

774
00:46:36,430 --> 00:46:39,230
이 좋은이지만, 여전히 성가신입니다.

775
00:46:39,230 --> 00:46:42,490
난 아직도 주식 시세를 얻으려면이 버튼을 클릭해야합니다.

776
00:46:42,490 --> 00:46:45,880
우리는 바쁜 사람들이고 우리는 단추를 클릭 할 시간이 없습니다.

777
00:46:45,880 --> 00:46:49,910
사람들이 Google 순간 검색을 구현​​하는 경우 Google은 오래 전에이 조금 깨달았습니다.

778
00:46:49,910 --> 00:46:53,590
당신이 입력 할 때 어떤 Google 순간 않는 것은 단지 당신을위한 결과를 표시 시작

779
00:46:53,590 --> 00:46:56,520
그래서 당신은 더 검색을 클릭 대해 걱정할 필요가 없습니다.

780
00:46:56,520 --> 00:46:58,730
사실, 재미있는 이야기가 그와 관련된.

781
00:46:58,730 --> 00:47:01,100
Google 순간 검색이 나온 후에 사람들이 같았 "우와,이 슈퍼 놀랍습니다."

782
00:47:01,100 --> 00:47:02,540
"이 너무 멋져요."

783
00:47:02,540 --> 00:47:05,950
그리고 스탠포드 대학에서 학생 다운 시간에 19 살 사람

784
00:47:05,950 --> 00:47:09,000
YouTube에서 즉시 호출이 사이트를했다.

785
00:47:09,000 --> 00:47:13,170
모든 YouTube 즉시 효과적으로 즉시 유튜브를 검색 않습니다.

786
00:47:13,170 --> 00:47:17,020
그래서 오히려 검색 YouTube.com를 누르로 이동하지보다

787
00:47:17,020 --> 00:47:21,650
나는 CS50처럼 유튜브 인스턴트 식으로 입력을 시작하면,

788
00:47:21,650 --> 00:47:25,320
우리는 속도가 느린 인터넷 연결하려고, 여기 볼 수

789
00:47:25,320 --> 00:47:28,500
이러한 결과가 사는 웁니다.

790
00:47:28,500 --> 00:47:35,590
우리가 실제로 우리 quote.js 파일에 대한 매우 간단한 수정을 할 수 있습니다 그러합니다.

791
00:47:35,590 --> 00:47:40,900
폼이 제출 될 때 지금 우리는이 이벤트를 연결하고 있습니다.

792
00:47:40,900 --> 00:47:43,760
우리는 정말 사용자가 더 이상 양식을 제출하기 싫어

793
00:47:43,760 --> 00:47:48,570
그러니 대신이 이벤트에게 사용자가 프레스 키를 때마다 발사 보자.

794
00:47:48,570 --> 00:47:53,200
하자 먼저 keyup에 제출에서 이벤트를 변경해야합니다.

795
00:47:53,200 --> 00:47:55,740
오히려 양식 제출을 위해 대기보다 그 의미 그

796
00:47:55,740 --> 00:47:58,490
모든 시간은 키를 누르면, 뭔가 일이 일어날 것입니다.

797
00:47:58,490 --> 00:48:02,030
더 이상 전체 양식이 keyup 이벤트를 첨부하는 것이하지 않습니다.

798
00:48:02,030 --> 00:48:05,080
우리가 정말 해당 검색 상자에 대해 고민하는 것이지.

799
00:48:05,080 --> 00:48:09,320
>> 이젠, 우리는 오히려 폼 견적보다이 될 변경할 수 있습니다를 선택하려면,

800
00:48:09,320 --> 00:48:14,220
폼 견적 우리는 입력해야합니다 (= 텍스트를 입력합니다) 또는 우리가 (= 기호를 이름) 말할 수 -

801
00:48:14,220 --> 00:48:16,420
우리가 원하는 건 뭐든지.

802
00:48:16,420 --> 00:48:18,650
이제 우리가해야 할 마지막 일이 있어요.

803
00:48:18,650 --> 00:48:21,190
우리가 반환이 false했을 때 여기에 기억

804
00:48:21,190 --> 00:48:24,370
우리는 우리가 기본 이벤트가 해고 싶지 않아요.

805
00:48:24,370 --> 00:48:26,390
우리가 지금 사용하지 않도록 설정 한 경우하지만, 너무, 그런 일이

806
00:48:26,390 --> 00:48:29,660
우리가 입력 무엇이든 더 이상 브라우저에서 표시 할 수 없습니다

807
00:48:29,660 --> 00:48:33,000
그 텍스트 상자에 입력의 기본 동작 될 때문입니다.

808
00:48:33,000 --> 00:48:38,660
우리는 더 이상 있으니,이 반환 거짓 파괴하도록 내버려 두지는 것을 무시하고 싶지 않습니다.

809
00:48:38,660 --> 00:48:44,800
나는 AAPL을 입력하기 시작하면 우리는 그 내용을 저장하고 현재 페이지를 새로 고침하면

810
00:48:44,800 --> 00:48:50,160
여기 하단에있는 주식 가격이 자동으로 완료되는 것을 볼 수 있습니다.

811
00:48:50,160 --> 00:48:53,150
그래서 여기 CS50 금융 순간입니다.

812
00:48:53,150 --> 00:48:55,860
유튜브 순간에 대해 실제로 재미있는 이야기

813
00:48:55,860 --> 00:48:59,420
그 학생은 그냥 가지, 1 박 프로젝트로 작성합니다

814
00:48:59,420 --> 00:49:03,800
그리고 다음 날은 그가 유튜브 CEO가 일자리를 제공했다.

815
00:49:03,800 --> 00:49:10,610
그게 그렇게 간단하면 CS50 학생들은 최종 프로젝트는 님이 YouTube에서 일 수 있습니다.

816
00:49:10,610 --> 00:49:14,720
그런 식으로, 그렇지 최종 프로젝트를위한 정말 멋진 생각이다?

817
00:49:14,720 --> 00:49:18,170
우리는 우리가 통합하고 싶어하는 일부 기존 기능을했다.

818
00:49:18,170 --> 00:49:20,330
우리는 사용자 경험을 좀 개선

819
00:49:20,330 --> 00:49:24,340
갑자기 유튜브 순간에 뭔가를 검색하면 더 쉽게 할 수 있습니다

820
00:49:24,340 --> 00:49:27,290
일반 YouTube에서 검색보다.

821
00:49:27,290 --> 00:49:30,790
그래서 그게 요약하면 AJAX입니다.

822
00:49:30,790 --> 00:49:34,860
>> 요셉이 보여주는 것을 예에서, 우리는 autocompletes을 많이 본

823
00:49:34,860 --> 00:49:39,250
우리가 기억 할 필요가 없기 때문에 이들 autocompletes 정말, 정말 편리 -

824
00:49:39,250 --> 00:49:41,770
예를 들어, 경우 애플의 주식 가격을 기억하지 않습니다

825
00:49:41,770 --> 00:49:45,110
우리는 그냥, 오히려 나에게 무슨 말을보다 AA 뭔가 알고

826
00:49:45,110 --> 00:49:48,740
"이 물건의 점유율이 많은 돈을 비용"

827
00:49:48,740 --> 00:49:52,540
나는 가지 재고 AA로 시작 알고 싶습니다.

828
00:49:52,540 --> 00:49:58,340
우리는 이미 포함되어 부트 스트랩 라이브러리 정말 멋지게 것을 할 수

829
00:49:58,340 --> 00:50:01,380
CS50 금융의 내부.

830
00:50:01,380 --> 00:50:09,390
당신이 자바 스크립트 태그에 여기 와서 Typeahead 아래로 스크롤하면

831
00:50:09,390 --> 00:50:13,730
이건 그냥 누군가가 이미 우리에게 쓴 좋은 플러그인입니다

832
00:50:13,730 --> 00:50:16,980
우리는 쉽게 같은 그 기능을 사용할 수 있습니다.

833
00:50:16,980 --> 00:50:21,410
나는 입력 여기 A.로 시작하는 일부 주의 목록입니다

834
00:50:21,410 --> 00:50:25,360
자, 내가이 정말 멋지다 생각을 말씀 있으며 내 페이지에서이 포함 할 때입니다.

835
00:50:25,360 --> 00:50:28,300
그것은이 정말, 정말 간단 밝혀졌다.

836
00:50:28,300 --> 00:50:32,810
가 quote3.js 여기를 뛰어 넘다 보자.

837
00:50:34,890 --> 00:50:37,380
내 파일은 조금 다릅니다 보입니다.

838
00:50:37,380 --> 00:50:39,700
아래에서 내 AJAX의 물건은 모두 동일합니다.

839
00:50:39,700 --> 00:50:43,170
난 다른 페이지로 이동하지 않고 주식 데이터를로드하고 싶습니다.

840
00:50:43,170 --> 00:50:46,220
하지만 지금은이 플러그인을 사용하고 싶습니다.

841
00:50:46,220 --> 00:50:51,020
부트 스트랩 문서는 내가 그렇게 할 수있는 방법을 정확히의 훌륭한 예를 갖추고 있습니다.

842
00:50:51,020 --> 00:50:54,350
내가하고 싶은 말은, "다음은, I가 자동 완성에 원하는 입력이야"

843
00:50:54,350 --> 00:50:56,640
그리고 난 typeahead이라는 함수를 호출거야

844
00:50:56,640 --> 00:50:59,730
그리고 우리의 Typeahead 물건을 처리 할거야.

845
00:50:59,730 --> 00:51:02,090
이 목록을 초기화합니다, 우리의 필터링을 모두 할 것입니다.

846
00:51:02,090 --> 00:51:06,680
그 알 필요가있는 유일한 방법은 우리가 autocompleting하는 어떤 데이터입니다.

847
00:51:06,680 --> 00:51:10,480
그래서 그냥 문서를 읽고 예제를보고이 키를 알아 냈어.

848
00:51:10,480 --> 00:51:14,150
내가 한 소스 키,이 키의 값을 제공하는 경우

849
00:51:14,150 --> 00:51:17,770
내가이 자동 완성 싶은 것들 중 일부 배열입니다.

850
00:51:17,770 --> 00:51:20,180
이 변수는 다른 파일에서 왔습니다.

851
00:51:20,180 --> 00:51:23,400
나는 symbols.js를 엽니 다.

852
00:51:23,400 --> 00:51:27,980
>> 이 symbols.js 문자열을 포함하는 그냥이 정말로, 정말로 큰 배열입니다

853
00:51:27,980 --> 00:51:32,080
NASDAQ에서 이러한 주식 기호의 모든.

854
00:51:32,080 --> 00:51:42,190
나는 HTML, 그래서 jharvard, vhosts, globalhost, HTML, 템플릿,로 다시 이동하려면

855
00:51:42,190 --> 00:51:45,820
quote_form.

856
00:51:45,820 --> 00:51:50,910
지금 quote3.js라고 그 이후로 내가 여기 포함 중 자바 스크립트 파일을 변경할.

857
00:51:50,910 --> 00:51:55,110
자, quote3.js 있습니다, 그래서 그 별도의 자바 스크립트 파일에서로드 할거야

858
00:51:55,110 --> 00:51:57,910
그 스트랩 자동 완성이 한.

859
00:51:57,910 --> 00:52:04,430
지금은 브라우저에 다시 뛰어 내릴 때, 페이지를 다시로드, 내가 AA를 입력 시작

860
00:52:04,430 --> 00:52:06,880
내 자동 완성이 있어요. 그리고 정말 간단했다.

861
00:52:06,880 --> 00:52:11,400
나는 "여기가 자동 완성하려는 일이"말 코드 1 행을했다

862
00:52:11,400 --> 00:52:16,590
갑자기 나는 전혀 노력하지 않는 많은로이 정말로, 정말로 좋은 기능을 갖추고 있습니다.

863
00:52:16,590 --> 00:52:19,810
당신은 웹 사이트와 일 특히 프런트 엔드 쪽을 개발하고 있습니다 바와 같이,

864
00:52:19,810 --> 00:52:21,840
이 사건은 정말 찾아 낼 거예요.

865
00:52:21,840 --> 00:52:25,700
거기서 정말 멋진 무료로 도서관의 많은 많은 많은이 있습니다

866
00:52:25,700 --> 00:52:30,190
그게 이런 일을 쉽게 슈퍼합니다.

867
00:52:30,190 --> 00:52:37,230
사람은 단순히 기호의 큰 목록에 autocompleting의 단점을 생각 할 수 있습니까?

868
00:52:37,230 --> 00:52:41,580
어떻게이 방법으로 가장 안 것일 수도?

869
00:52:42,790 --> 00:52:45,960
그래. >> [학생] 시간, 당신은 [안 들리게] 많은 경우

870
00:52:45,960 --> 00:52:50,420
그래. 지금 우리는이 거대한 자바 스크립트 파일을 다운로드하는 및 기호의 사람들이있어.

871
00:52:50,420 --> 00:52:54,360
우리가 물건 톤이있는 경우 그리고,이 수 종류는 검색하지의 대기 시간을 증가

872
00:52:54,360 --> 00:52:56,600
뿐만 아니라, 실제 파일을 다운로드.

873
00:52:56,600 --> 00:52:58,670
좋아요. 또 다른 건?

874
00:53:01,950 --> 00:53:05,280
지금의 관련성도 진정한 의미가 없습니다.

875
00:53:05,280 --> 00:53:08,190
여기에 표시 A, 기업에 입력하면

876
00:53:08,190 --> 00:53:11,220
A.로 시작 가장 인기있는 기업되지 않을 수 있습니다

877
00:53:11,220 --> 00:53:17,130
>> 제가 애플에 도착하기 전에, 내가 원하는 내용을 어떻게 찾을 수 좀 더 문자를 걸릴 수 있습니다.

878
00:53:17,130 --> 00:53:20,420
이 자동 완성 '관련성'의 의미를 가지고 있지 않습니다.

879
00:53:20,420 --> 00:53:24,400
그냥 말거야 "나는 표시 할거야 일치든지."

880
00:53:24,400 --> 00:53:30,510
대신 그, 어떻게 든 내 검색에 몇 가지 관련성을 통합하고 싶습니다.

881
00:53:30,510 --> 00:53:36,440
, finance.yahoo.com, 나는 야후 금융으로 가면 가면

882
00:53:36,440 --> 00:53:42,100
나는 야후 금융의 페이지에 기호를 입력하려고하면

883
00:53:42,100 --> 00:53:52,310
내가 GOOG를 입력하기 시작, 난 모든 걸의 좋은 목록을 수 있습니다.

884
00:53:52,310 --> 00:53:57,100
야후 금융이 더 똑똑 여기서 뭔가를하고있다처럼 분명 것 같습니다.

885
00:53:57,100 --> 00:53:59,790
그들은 어떤 관련이 있으며 또한 추가 정보가

886
00:53:59,790 --> 00:54:01,430
주식의 이름처럼.

887
00:54:01,430 --> 00:54:05,850
정말 기호의 내 재고 목록을 구할 수있는 것이 기록이다.

888
00:54:05,850 --> 00:54:09,520
이를 원하고 그래서 그것을 데려 갈거야.

889
00:54:09,520 --> 00:54:11,790
하자 몇 일을 그렇게 할 수 있습니다.

890
00:54:11,790 --> 00:54:15,580
자, 먼저이 페이지에 검열을 열어

891
00:54:15,580 --> 00:54:18,100
우리는이 페이지가 전혀로드되지 않은 것을보고, 때문에

892
00:54:18,100 --> 00:54:21,960
그래서 아마도 데이터를로드 할 수 어떻게 든 AJAX를 사용하고 있어요.

893
00:54:21,960 --> 00:54:23,920
우리는 로딩 무슨 자료를 찾을 수 있습니다.

894
00:54:23,920 --> 00:54:28,390
내가이 네트워크 탭을 클릭하면, 이들은 해고 시작 요청을 모두가 될 것이다.

895
00:54:28,390 --> 00:54:34,020
제가 사정에 입력하면 이제, 우리는 그냥 새로운 HTTP 요청을 받았 볼 수 있습니다.

896
00:54:34,020 --> 00:54:37,490
데이터가 나오는 곳이있을 수 있습니다.

897
00:54:37,490 --> 00:54:41,990
충분히 물론, 나는 이상하게라는 비트이 URL에서 보면,

898
00:54:41,990 --> 00:54:46,930
우리는 야후로부터 데이터를 보내는 곳이 정확히 것을 볼 수 있습니다.

899
00:54:46,930 --> 00:54:53,400
>> 나는 정신에 조회 기능을 매우 유사 suggest.php라는 별도의 파일을 만들었습니다.

900
00:54:53,400 --> 00:54:57,730
원래는 야후의 URL에 검색어를 만들 수있을 거라고, 일부 데이터를 다시

901
00:54:57,730 --> 00:54:59,750
그리고 나에게 다시 보낼 수 있습니다.

902
00:54:59,750 --> 00:55:02,570
지금, 오히려 기호의 큰 거대한 목록을 사용하는 것보다,

903
00:55:02,570 --> 00:55:05,280
나는 야후의 좋은 관련성 가지를 사용할 수 있습니다

904
00:55:05,280 --> 00:55:08,150
그리고 난 그 거대한 자바 스크립트 파일을 다운로드 할 필요가 없습니다.

905
00:55:08,150 --> 00:55:12,040
I는 실제로 관련 주식 기호를 당길거야.

906
00:55:12,040 --> 00:55:13,960
그에 뛰어 봅시다.

907
00:55:13,960 --> 00:55:17,360
따라서 HTML, JS. 우리는 quote4에 지금하고 있습니다.

908
00:55:17,360 --> 00:55:22,120
이제 우리는 더 이상 자바 스크립트 파일의 큰 목록을 사용하지하고 있습니다.

909
00:55:22,120 --> 00:55:24,430
그러나 디자인 문제의 작은 종류가 있어요.

910
00:55:24,430 --> 00:55:28,200
우리는 AJAX에서이 비동기했다했습니다.

911
00:55:28,200 --> 00:55:31,000
그 말의 뜻은, 내가 AJAX 요청을 할 때이다

912
00:55:31,000 --> 00:55:36,490
내 AJAX 요청이 실제로 시작되는 그래서 여기에 8 호선, 이렇게이다.

913
00:55:36,490 --> 00:55:40,370
자, 이제 내가 마약 좀 할거야 그 여기 몇 가지 코드가 있다고 가정 해 봅시다

914
00:55:40,370 --> 00:55:43,930
페이지의 사용자 또는 변경 무언가를 알려 좋아요.

915
00:55:43,930 --> 00:55:49,830
is 일은 없을거야 어떤 브라​​우저는 계속이 요청을 기다리지 않을 것이다

916
00:55:49,830 --> 00:55:53,480
전에 내려 오는이 줄을 난다.

917
00:55:53,480 --> 00:55:55,900
그게 비동기 부분입니다.

918
00:55:55,900 --> 00:55:58,400
그것은이 요청을하면 끝이 할 때마다 "말할거야

919
00:55:58,400 --> 00:56:03,080
"다시 내가 성공의 내부 전화 당신에게 말하는 것을 그 함수를 호출합니다."

920
00:56:03,080 --> 00:56:07,300
우리가 사전에 모든 주식을 그냥 다운로드 할 수 있다는 것을 뜻한다.

921
00:56:07,300 --> 00:56:10,300
우리는 요청을하고 돌아 오는 것을 기다리해야합니다.

922
00:56:10,300 --> 00:56:13,330
전에 그 의미, 우리는 단순히 부트 스트랩을 말할 수

923
00:56:13,330 --> 00:56:15,580
"다음은 I가 자동 완성으로 할 일의 목록입니다."

924
00:56:15,580 --> 00:56:18,950
우리가 알고있는하지 않기 때문에 우리는 더 이상 더 이상 할 수 없습니다

925
00:56:18,950 --> 00:56:21,780
우리가 실제로 자동 완성 싶은.

926
00:56:21,780 --> 00:56:25,190
그 저쪽 스마트 사람들이기 때문에 다행히 스트랩이 생각

927
00:56:25,190 --> 00:56:30,160
그리고 그들은 실제로 우리에게 Typeahead 플러그인을로드하는 또 다른 방법을 주었다.

928
00:56:30,160 --> 00:56:35,630
전에,이 소스 속성의 값은에 자동 완성 할 일이 바로이 큰 배열했다.

929
00:56:35,630 --> 00:56:39,580
>> 이제 소스 속성이 실제로 기능입니다

930
00:56:39,580 --> 00:56:44,580
이 기능의 목적은의 자동 완성의 일이 무엇인지 파악하는 것입니다.

931
00:56:44,580 --> 00:56:48,730
그렇게 알아 내는데거야 방법은 야후 금융 물어 줄 거예요

932
00:56:48,730 --> 00:56:51,750
자동 완성에 최선 사항은 무엇입니까.

933
00:56:51,750 --> 00:56:54,500
난 매우 유사한 AJAX 요청을 만들거야 그런 짓을합니다.

934
00:56:54,500 --> 00:56:59,010
나는 suggest.php에서이 페이지를 요청거야.

935
00:56:59,010 --> 00:57:01,360
난 아직도 기호 함께 보낼.

936
00:57:01,360 --> 00:57:05,570
그리고 지금의 성공은, 부트 스트랩 문서가 말해 줬어요

937
00:57:05,570 --> 00:57:09,130
순서에 물건의 목록을 입력 할 수

938
00:57:09,130 --> 00:57:14,370
제가해야 할 모든 콜백 함수에 지금이 배열에 전달됩니다.

939
00:57:14,370 --> 00:57:15,660
그러나 잠깐만 요.

940
00:57:15,660 --> 00:57:20,240
이것은 배열이되어야하고 AJAX가 다시 텍스트 나 보내는 경우

941
00:57:20,240 --> 00:57:22,720
어떻게 그런 일이 가능합니까?

942
00:57:22,720 --> 00:57:27,910
이 JSON이라는 데이터를 교환하는 새로운 방법을 소개합니다.

943
00:57:27,910 --> 00:57:33,000
이 경우 우리는 텍스트의 간단한 문자열을 다시 갈수 없어요.

944
00:57:33,000 --> 00:57:37,670
이제 우리는 주식 기호의 더 복잡한 목록을 다루고 있습니다.

945
00:57:37,670 --> 00:57:41,730
이러한 주식 기호는 또한 회사의 이름이나 현재의 가격 등을 포함 할 수 있습니다.

946
00:57:41,730 --> 00:57:47,550
그냥 어떤 예측 방식으로 포맷되지 않은 큰 긴 문자열을 사용하여

947
00:57:47,550 --> 00:57:51,970
나에게 야후의 서버에서이 데이터를 얻을 수있는 가장 좋은 방법이 될 일이 아니

948
00:57:51,970 --> 00:57:54,540
나는 쉽게 이해할 수있는 방법은 아니에요.

949
00:57:54,540 --> 00:58:01,280
JSON은 우리가 자바 스크립트에서 연관 배열을 만드는 방법을 활용하는 기술입니다.

950
00:58:01,280 --> 00:58:04,510
이것은 자바 스크립트 연관 배열처럼 생겼다

951
00:58:04,510 --> 00:58:06,600
가 있기 때문에 그리고 사실입니다.

952
00:58:06,600 --> 00:58:09,710
JSON 자바 스크립트 객체 표기법을 의미합니다.

953
00:58:09,710 --> 00:58:15,020
이것은 기본적으로 앞뒤로 데이터를 전송하기위한 형식에 동의합니다.

954
00:58:15,020 --> 00:58:18,280
이 JSON 개체 또는 JSON 연관 배열 여기에

955
00:58:18,280 --> 00:58:21,010
나에게 코스에 대한 데이터를 전송하고 있습니다.

956
00:58:21,010 --> 00:58:25,110
>> 이 배열의 key는 cs50의 값이 코스 같은 일입니다

957
00:58:25,110 --> 00:58:29,140
아래로 여기에 우리는 내가 배열 값을 가질 수 있습니다 것을 볼 수 있습니다.

958
00:58:29,140 --> 00:58:32,730
나는 문자열 필터링과 같은 작업을 할 수 있으며, 쉼표에 보이지 않는

959
00:58:32,730 --> 00:58:35,330
그리고 그런 미친 짓을.

960
00:58:35,330 --> 00:58:38,820
이이 JSON 형식으로 선언되어 있기 때문에,

961
00:58:38,820 --> 00:58:43,510
자바 스크립트와 jQuery를 이미 문자열을 변환 할 기능이

962
00:58:43,510 --> 00:58:48,140
실제 자바 스크립트를 연관 배열에이 JSON 닮은

963
00:58:48,140 --> 00:58:50,440
우리는 함께 일 할 수 있는지 확인하십시오.

964
00:58:50,440 --> 00:58:56,660
그 일을하면 더 이상이 파일 suggest.php 없다는 것을 말씀처럼 간단합니다

965
00:58:56,660 --> 00:58:59,040
돌아 단순히 텍스트 문자열에 파견

966
00:58:59,040 --> 00:59:01,950
하지만 난 그게 다시 JSON 저를 보내 거라는 걸 알아요.

967
00:59:01,950 --> 00:59:06,760
그거 JSON은 자바 스크립트 연관 배열로 변환 할 수 있다는 것을 의미합니다.

968
00:59:06,760 --> 00:59:10,830
그리고 jQuery를, 당신이 날 위해 이렇게하고 싶습니다.

969
00:59:10,830 --> 00:59:13,990
그런 의미 여기이 응답 매개 변수,

970
00:59:13,990 --> 00:59:16,070
이 더 이상 단지 문자열이다.

971
00:59:16,070 --> 00:59:19,860
우리가 jQuery를 얘기했기 때문 여기 좀 JSON을 제공

972
00:59:19,860 --> 00:59:22,950
jQuery를 말할 수있을만큼 영리 될 것입니다, "당신은 JSON을 원 하나?"

973
00:59:22,950 --> 00:59:26,890
"나는 당신을 연관 배열로 그 변환 할거야."

974
00:59:26,890 --> 00:59:32,100
우리가 quote4.js이되면의가 실제로 네트워크 탭을 살펴 보자.

975
00:59:32,100 --> 00:59:35,400
우리는이을 변경하고 페이지를 다시로드합니다.

976
00:59:37,150 --> 00:59:41,250
지금은 다시 - 입력 겠어.

977
00:59:41,250 --> 00:59:45,600
나는 suggest.php에 몇 가지 요청을했다, 지금이 응답 한

978
00:59:45,600 --> 00:59:48,670
오히려 단지 문자열보다, 그것은 JSON입니다.

979
00:59:48,670 --> 00:59:52,580
그래서 열린 곱슬 브레이스, 전해지는 이야기가있다 "여기에 연관 배열이 오면을."

980
00:59:52,580 --> 00:59:56,830
>> 이 연관 배열의 첫 번째이자 유일한 키는, 기호라고합니다

981
00:59:56,830 --> 01:00:00,240
그리고 여기에 관련 기호의 모든 배열입니다

982
01:00:00,240 --> 01:00:04,820
그 거대한 목록에서 야후 금융에서 지금은오고 있습니다.

983
01:00:06,110 --> 01:00:10,630
그래서 내가 쉽게 자동 완성 플러그인을 채울 수 있습니다 방법

984
01:00:10,630 --> 01:00:14,280
이미 정해진거야 로컬 파일에서 오지 않을거야 몇 가지 데이터를

985
01:00:14,280 --> 01:00:17,490
하지만 다른에서.

986
01:00:17,490 --> 01:00:21,160
그것은, 우리가 실제로 JSONP라는 기술을 활용할 수 있다는 판명

987
01:00:21,160 --> 01:00:27,420
또는 보호구 JSON, 그이 suggest.php 중계를 제거합니다.

988
01:00:27,420 --> 01:00:34,010
대신 여기서 그렇게,의 대신 내가이 더욱 개선 할 수있는 방법을 살펴 보자.

989
01:00:34,010 --> 01:00:36,040
나는 스트랩의 Typeahead을 정말 좋아해요. 정말 좋은 데요.

990
01:00:36,040 --> 01:00:39,570
그러나, 우리는 자바 스크립트를 잘지고있어 우리는 가지이 스스로하고 싶어

991
01:00:39,570 --> 01:00:43,870
어쩌면이 플러그인 일을 할 수 일을 좀 봐.

992
01:00:43,870 --> 01:00:46,500
그 Typeahead 일을 사용할 수 없어 더 이상하자,

993
01:00:46,500 --> 01:00:50,550
과의 제안 주식 목록 우리 자신을 봅시다.

994
01:00:50,550 --> 01:00:53,790
여기 quote6.php에서 우리는 같은 방법으로 시작하려고하고 있습니다.

995
01:00:53,790 --> 01:00:58,050
때마다 누군가 유형 무언가를, 우리는 AJAX 요청을 만들고 싶어.

996
01:00:58,050 --> 01:01:01,590
이것은 우리의 원래 CS50 금융 인스턴트와 비슷합니다.

997
01:01:01,590 --> 01:01:05,020
오히려 quote.php에 대한 요청을보다

998
01:01:05,020 --> 01:01:08,530
지금 우리가 이전처럼 동일한 파일에 요청을하는거야,이 suggest.php,

999
01:01:08,530 --> 01:01:12,460
이는 단지 야후 금융에서 데이터를 끌어 것입니다.

1000
01:01:12,460 --> 01:01:19,480
>> 다시, 우리는 여전히 JSON을 기대하고 있지만 Typeahead 우리를 위해이 일을하지 않습니다 지금부터

1001
01:01:19,480 --> 01:01:24,850
우리는 또한 현재 텍스트 상자의 내부에있는 값을 함께 전송해야합니다.

1002
01:01:24,850 --> 01:01:28,120
이제 우리는 야후 금융을 요구할 알고

1003
01:01:28,120 --> 01:01:34,160
그래서 지금 여기에 우리가 요청이 완료되면 실행하고자하는 기능입니다.

1004
01:01:34,160 --> 01:01:36,520
우리는 우리의 목록을 만들기 위해 플러그인을 필요가 없습니다

1005
01:01:36,520 --> 01:01:40,630
우리가 실제로 제안 목록을 작성하는 것 어디서 왔어.

1006
01:01:40,630 --> 01:01:44,850
그 작업을 수행하려면 많은 PHP처럼 우리는 HTML의 이러한 큰 문자열을 합칠

1007
01:01:44,850 --> 01:01:48,170
그리고 우리가 그들을 인쇄, 우리는 자바 스크립트에서 동일한 정확한 일을 할 수 있습니다.

1008
01:01:48,170 --> 01:01:51,850
먼저 우리는, 제안이라는 문자열을 시작 할거야

1009
01:01:51,850 --> 01:01:54,590
이 문자열은 그냥 HTML을 포함 할 것이다.

1010
01:01:54,590 --> 01:01:58,320
우리는 일의 목록을되고 싶어, 그래서 우리는이 목록 태그로 시작 할거야

1011
01:01:58,320 --> 01:02:03,340
지금 우리는 우리에게 반환 된 기호의 전부를 반복거야.

1012
01:02:03,340 --> 01:02:06,500
우리가 데이터 유형 말한 있기 때문에 기억 : 'J​​SON'을,이 문자열이 아닙니다.

1013
01:02:06,500 --> 01:02:09,500
이 이미 우리를 위해 배열입니다. 정말 잘 됐어.

1014
01:02:09,500 --> 01:02:13,790
우리는 단순히 "나는 당신이 목록 요소를 추가하고 싶습니다."라고 할 수 있습니다

1015
01:02:13,790 --> 01:02:16,000
우리는 그런 측면에서 요소 안에 넣는 것

1016
01:02:16,000 --> 01:02:19,030
우리는 그게 뭔지 알 수 있도록 우리는 그것을 제안하는 클래스를 제공합니다

1017
01:02:19,030 --> 01:02:23,880
지금 여기서 우리가 야후 금융에서 돌아 왔을하는 기호입니다.

1018
01:02:23,880 --> 01:02:27,230
>> 일단 우리가 다시 들어온 기호 각각에 대해 요소를 만들었습니다

1019
01:02:27,230 --> 01:02:30,100
우리는 목록을 닫습니다 싶습니다.

1020
01:02:30,100 --> 01:02:33,040
이제 제안이 작은 HTML 조각을 나타냅니다

1021
01:02:33,040 --> 01:02:37,860
해당 페이지에 넣을 때 우리가 찾고있는 물건의 목록 될 것입니다.

1022
01:02:37,860 --> 01:02:41,070
지금의이 실제로 페이지에 해당 넣어 보자.

1023
01:02:41,070 --> 01:02:46,390
난 사실 다른 빈 div를 만든 내가 그것을 제안의 ID를 제공 한 할 수 있습니다.

1024
01:02:46,390 --> 01:02:52,520
우리는 주식 데이터의 가격을 표시 사업부의 내용을 설정 많은 것

1025
01:02:52,520 --> 01:02:58,600
우리는 이제 그냥이 문자열이 뭐든간에이 사업부의 내용을 설정하려면

1026
01:02:58,600 --> 01:03:00,290
이러한 기호를하는가 포함되어 있습니다.

1027
01:03:00,290 --> 01:03:07,650
이 HTML 방법을 사용하면,이 제안 변수,이 문자열은, HTML의 문자열입니다.

1028
01:03:07,650 --> 01:03:13,490
나는 당신이 HTML을 및 제안이라고 사업부의 안에 넣는 것이 좋습니다.

1029
01:03:13,490 --> 01:03:15,680
우리는 지금 DOM에 뭔가를 추가했습니다.

1030
01:03:15,680 --> 01:03:20,360
우리는 지금 우리가 페이지에 표시 할 수있는 DOM에 몇 가지 새로운 요소를 추가했습니다.

1031
01:03:20,360 --> 01:03:22,540
이 모양을 보자.

1032
01:03:22,540 --> 01:03:29,110
우리는 quote6에로드 지금 우리는 돌아 오시면

1033
01:03:29,110 --> 01:03:34,480
지금은 AAPL를 입력 시작할 때, 우리는 더 이상 부트 스트랩 자동 완성을가 없습니다

1034
01:03:34,480 --> 01:03:38,470
하지만 지금 우리는 우리 자신을 만든이 목록을 수 있습니다.

1035
01:03:38,470 --> 01:03:43,230
이 예를 들어, 부트 스트랩 Typeahead보다 조금 더요입니다

1036
01:03:43,230 --> 01:03:45,580
하지만 우리가 다른 일을 할 수 없습니다.

1037
01:03:45,580 --> 01:03:48,660
우리가 부트 스트랩 플러그인을 찾고 있던 때,

1038
01:03:48,660 --> 01:03:52,590
우리는 autocompleted 때, 자동 완성 값 중 하나가 AAPL 보았다.

1039
01:03:52,590 --> 01:03:54,820
정말 도움이되지 않을 수 있습니다.

1040
01:03:54,820 --> 01:03:59,100
사용자로, 즉시 주식 기호를 모두 인식 할 수 있습니다.

1041
01:03:59,100 --> 01:04:02,370
회사의 실제 이름은 제가 아마 인식 할 가능성이있어 있습니다.

1042
01:04:02,370 --> 01:04:05,310
그럼 정말 도움이 될 경우가 아닌 AAPL 말을하지 않을

1043
01:04:05,310 --> 01:04:07,970
이 애플과 같은 말을

1044
01:04:07,970 --> 01:04:12,240
우리가이에게 자신을 압연했기 때문에, 우리는 정말 쉽게 그렇게 할 수 있습니다.

1045
01:04:12,240 --> 01:04:17,630
- 여기서 우리의 마지막 견적 파일을 열어 보자, quote7 때문에.

1046
01:04:17,630 --> 01:04:23,200
>> 그런 것 같아요. 나는 단지 기호보다 더 우리에게 돌아갑니다 다른 PHP 파일을 만들었습니다.

1047
01:04:23,200 --> 01:04:25,550
또한 우리 회사의 이름을 돌려 줄 것입니다.

1048
01:04:25,550 --> 01:04:28,150
그래서 우리는 같은 일을하는거야. 우리는 AJAX 요청을하고 있어요.

1049
01:04:28,150 --> 01:04:32,370
요청이 완료되면, 우리는 여기이 기능을 실행하는 것

1050
01:04:32,370 --> 01:04:36,520
이 기능은 요소의 큰 문자열을 구축하려고합니다.

1051
01:04:36,520 --> 01:04:39,520
하지만 이곳의 차이는이 목록의 값이 더 이상 단지의 상징 없다는 것입니다

1052
01:04:39,520 --> 01:04:45,370
지금의 이름입니다.

1053
01:04:45,370 --> 01:04:47,070
그래서 우리는 작은 문제가 있습니다.

1054
01:04:47,070 --> 01:04:51,590
우리는 조회를 사용하는 경우, 우리는 어떻게 든 그것을 기호를 전달해야합니다.

1055
01:04:51,590 --> 01:04:54,950
우리는 마이크로 소프트와 같은 조회 무언가를 전달할 수 없습니다.

1056
01:04:54,950 --> 01:04:57,900
우리는 MSFT를 전달해야합니다.

1057
01:04:57,900 --> 01:05:01,640
우리가 HTML을 작성할 때, 우리는 좋은 내장 된 속성의 많은이 있습니다.

1058
01:05:01,640 --> 01:05:05,440
는 그 HREF 또는 클래스와 관련된했을 수 있습니다.

1059
01:05:05,440 --> 01:05:08,230
하지만 우리가 정말 지금 필요한 것은 이러한 링크의 각입니다

1060
01:05:08,230 --> 01:05:11,120
그와 관련된 주식 기호가 있습니다.

1061
01:05:11,120 --> 01:05:14,240
더 내장 된 HTML 속성 주식 기호에 대한,이 없습니다

1062
01:05:14,240 --> 01:05:21,010
하지만 다행히, HTML5는 우리가 원하는대로 할 우리 자신의 속성을 작성할 수 있습니다.

1063
01:05:21,010 --> 01:05:24,620
데이터 기호를 말하여, 새로운 속성을 도입했습니다

1064
01:05:24,620 --> 01:05:29,350
그의 이름은 그냥 구성, 그리고이 데이터를 prefaced 있기 때문에 괜찮습니다.

1065
01:05:29,350 --> 01:05:34,270
이제 우리는 주식에서가의 상징 내부에 저장하는거야.

1066
01:05:34,270 --> 01:05:39,590
그게 의미하는 것은 우리가 회사의 이름의 값을 표시하는 경우에도 해당됩니다

1067
01:05:39,590 --> 01:05:43,380
우리 자동 완성의 내부에, 우리는 여전히 기호를 기억하고

1068
01:05:43,380 --> 01:05:47,110
그는 각 회사와 연결되어 있습니다.

1069
01:05:47,110 --> 01:05:50,350
우리가하는 방법은이 요소 자체의 내부입니다.

1070
01:05:50,350 --> 01:05:52,930
그게 우리가 한 번 더 변경해야 의미합니다.

1071
01:05:52,930 --> 01:05:57,090
우리가 지금 클릭하면, 우리는 실제로 심볼 속성을 활용해야

1072
01:05:57,090 --> 01:06:00,220
단지 그 값보다는.

1073
01:06:00,220 --> 01:06:05,010
우리 백업하는 경우, 우리는 제안에 이벤트 핸들러를 첨부합니다.

1074
01:06:05,010 --> 01:06:09,280
이러한 제안 중 하나는 현재 클릭 할 때마다 내가 뭔가를하고 싶습니다.

1075
01:06:09,280 --> 01:06:13,160
내가하고 싶은 것은 그 입력 상자의 값을 변경합니다.

1076
01:06:13,160 --> 01:06:16,100
지금은이 같은 발 기능을 설정하고 싶습니다.

1077
01:06:16,100 --> 01:06:21,060
>> 따라서 인수없이이 발 기능은 텍스트 상자에 이미 어떤로 돌아 것은

1078
01:06:21,060 --> 01:06:27,070
당신이에게 문자열을 제공한다면, 그 문자열을 가지고 텍스트 상자에 넣어거야.

1079
01:06:27,070 --> 01:06:28,980
나는 동일한 방식으로 해당 텍스트 상자를 선택거야.

1080
01:06:28,980 --> 01:06:31,230
이 이름은 폼 견적의 상징 안에 있습니다.

1081
01:06:31,230 --> 01:06:37,540
지금은 그것을 속성 데이터 심볼의 값을 보내겠습니다.

1082
01:06:37,540 --> 01:06:41,560
여기이 물건이 $ (이) 새로운 기능입니다.

1083
01:06:41,560 --> 01:06:46,850
이게을 의미하는 것은 클릭 된 요소입니다.

1084
01:06:46,850 --> 01:06:50,880
우리는 클릭 이벤트를 부착하지하고있는 것으로 볼 수 있습니다

1085
01:06:50,880 --> 01:06:54,690
개별적으로 제안의 클래스와 각 요소에 있습니다.

1086
01:06:54,690 --> 01:06:57,140
오히려, 우리는 다르게이 조금 접근하고 있습니다.

1087
01:06:57,140 --> 01:07:01,700
대신 우리는 할 때마다이 제안 사업부의 어떤 내부, 말

1088
01:07:01,700 --> 01:07:04,080
어떤 기억, 그 목록은 단지 컨테이너입니다

1089
01:07:04,080 --> 01:07:10,150
이 사업부의 안쪽에 무언가를 클릭하고 제안의 클래스를 가지고하는 경우는,

1090
01:07:10,150 --> 01:07:13,000
이 이벤트가 발사하고 싶습니다.

1091
01:07:13,000 --> 01:07:17,490
기본적으로 우리가 할 수있는 무슨 뜻인지 우리가이 같은 이벤트 핸들러를 재사용 할 수 있습니다

1092
01:07:17,490 --> 01:07:20,000
목록에있는 것들 모두.

1093
01:07:20,000 --> 01:07:22,080
그래서 우리는 첫 번째 요소에 대해 하나의 이벤트 핸들러를 할 필요가 없습니다

1094
01:07:22,080 --> 01:07:24,550
두 번째 요소 및 다른 이벤트 핸들러.

1095
01:07:24,550 --> 01:07:29,880
우리는 대신 "나도 같은 이벤트 핸들러 내 목록의 모든에 적용하고 싶습니다."라고 할 수 있습니다

1096
01:07:29,880 --> 01:07:34,420
그러나 우리는 어떻게 든 클릭 한 요소 알아야합니다.

1097
01:07:34,420 --> 01:07:38,450
이것은 "이"키워드는 그냥 나타냅니다.

1098
01:07:38,450 --> 01:07:42,360
이것은 단지 사용자가 클릭 된 개체입니다.

1099
01:07:42,360 --> 01:07:47,680
난 그냥 3 링크를 클릭하면,이, 그 세번째 링크의 요소를 나타냅니다

1100
01:07:47,680 --> 01:07:51,670
이는 I는 속성, 데이터 기호를 얻을 수 있다는 것을 의미합니다

1101
01:07:51,670 --> 01:07:57,760
우리가 알고있는 난 그냥 클릭 회사와 연결된 기호를 포함 할 수 있습니다.

1102
01:07:57,760 --> 01:08:04,550
우리는 우리의 금융 페이지로 돌아 이동, 경우

1103
01:08:04,550 --> 01:08:08,580
우리는 지금 한 번 제가 MSFT 같은 입력을 시작 것을 알 수 있습니다

1104
01:08:08,580 --> 01:08:11,220
우리는 단지 주식 기호를받지 못했습니다 더 이상

1105
01:08:11,220 --> 01:08:13,720
우리는 이제 실제 기업을지고있어.

1106
01:08:13,720 --> 01:08:20,410
하지만 이러한 회사 중 하나를 클릭하면,

1107
01:08:20,410 --> 01:08:25,180
우리는 회사의 이름으로 우리가 실제로 텍스트 상자를하지 채우지 있는지 볼 수 있습니다

1108
01:08:25,180 --> 01:08:29,850
하지만 그 데이터 속성의 내부 저장된 상관없이.

1109
01:08:29,850 --> 01:08:32,880
그리고 사실은 바로를 클릭하여 이러한 요소 중 하나를 검사하는 경우

1110
01:08:32,880 --> 01:08:36,200
및 요소를 검사 클릭, 우리는 실제로이 어떻게 생겼는지 볼 수 있습니다.

1111
01:08:36,200 --> 01:08:40,290
>> 이게 우리가 루프를 위해 내부 만든 것이지 기억

1112
01:08:40,290 --> 01:08:42,649
우리가 HTML의 문자열을 구축 때.

1113
01:08:42,649 --> 01:08:47,870
우리는이 데이터 기호가 훌륭 MSFT의 값이 여기에 볼 수 있습니다.

1114
01:08:47,870 --> 01:08:49,189
그게 우리가 기대했던거야.

1115
01:08:49,189 --> 01:08:53,170
그 상징이며 우리가 우리가 사용하는 데 필요한는 값을 가지고하는 방법

1116
01:08:53,170 --> 01:08:56,140
이 텍스트 상자의 내부.

1117
01:08:56,140 --> 01:08:58,850
그 지루 종류이기 때문에 그 정도면 견적 양식입니다.

1118
01:08:58,850 --> 01:09:02,990
그냥 포트폴리오 페이지에 일부 빠른 개선을 보자.

1119
01:09:02,990 --> 01:09:08,109
당신이 한동안 CS50 금융을 사용하고 있다면 당신은 주식을 많이 사고 파는 시작

1120
01:09:08,109 --> 01:09:11,300
결국이 표는 꽤 큰 얻을 것입니다

1121
01:09:11,300 --> 01:09:13,850
당신은 물론 주식 시세 표시기를 원하는거야.

1122
01:09:13,850 --> 01:09:20,350
테이블이 정말, 정말 큰되면, 그것은 그 위에 검색하려고 사용자에게 유용 할 수 있습니다.

1123
01:09:20,350 --> 01:09:23,290
제가 디즈니 같은 입력을 시작하면 검색 상자의 내부

1124
01:09:23,290 --> 01:09:26,359
내 미키 마우스 재고를 찾고, 우리는 테이블이 현재 필터링되는 것을 볼 수 있습니다

1125
01:09:26,359 --> 01:09:28,189
방금 인치 입력 한 내용에 기초하여

1126
01:09:28,189 --> 01:09:31,640
이 기능은 슈퍼 복잡 보이는데,하지만 정말, 정말 간단합니다

1127
01:09:31,640 --> 01:09:33,859
jQuery를하고 자바 스크립트로.

1128
01:09:33,859 --> 01:09:39,189
이 portfolio.php 파일 portfolio.js라는 JavaScript 파일이 포함되어 있습니다.

1129
01:09:39,189 --> 01:09:41,130
씨가를 살펴 보자.

1130
01:09:41,130 --> 01:09:44,890
따라서 HTML, JS, 포트폴리오.

1131
01:09:44,890 --> 01:09:49,210
우리가 테이블에 검색하는하고있는 곳이에요.

1132
01:09:49,210 --> 01:09:52,750
제가해야 할 첫 번째 것은 텍스트 상자에 이벤트 핸들러를 첨부 is

1133
01:09:52,750 --> 01:09:55,760
우리는 우리의 필터링 기능이 발사하려는 알고 있기 때문에

1134
01:09:55,760 --> 01:09:59,800
때마다 사용자가 누르는 무언가를 우리가 검색 버튼에 대한 시간이 없기 때문입니다.

1135
01:09:59,800 --> 01:10:03,000
우리가해야 할 첫 번째 문제는, 사용자가 무엇을 검색하는지 알아내는

1136
01:10:03,000 --> 01:10:04,780
처럼 우리는 전에 했어요.

1137
01:10:04,780 --> 01:10:11,320
이 키워드는 사용자가 상호 작용하는 현재 요소를 의미합니다.

1138
01:10:11,320 --> 01:10:14,070
>> 사용자가 검색 상자와 상호 작용하기 때문에

1139
01:10:14,070 --> 01:10:17,020
이 검색 창을 나타냅니다 $,

1140
01:10:17,020 --> 01:10:21,820
그래서 this.val는 사용자가 현재 입력되어있는 검색 상자 안에 뭐가 우리를 제공합니다.

1141
01:10:22,810 --> 01:10:27,320
그래서 우리가 뭘 원하는지 우리는 모든 행을 통해 반복 할 수 있습니다

1142
01:10:27,320 --> 01:10:29,240
우리 테이블의 내부.

1143
01:10:29,240 --> 01:10:35,630
우리 테이블의 모든 행을 선택하려면, 내 말은, 저 테이블에게 표 포트폴리오의 ID 준

1144
01:10:35,630 --> 01:10:39,060
각 행은 TR 요소로 표현됩니다

1145
01:10:39,060 --> 01:10:42,080
그래서 선택은 나에게 큰 배열로 돌아갈 것이다

1146
01:10:42,080 --> 01:10:44,370
내 테이블에있는 모든 행의.

1147
01:10:44,370 --> 01:10:47,010
지금은 그 배열을 통해 반복하고 싶습니다.

1148
01:10:47,010 --> 01:10:52,390
나는 루프에 할 수 있지만, jQuery를 실제로 우리라는 좋은 기능을 제공합니다 "를 각각."

1149
01:10:52,390 --> 01:10:55,220
어떤 각 수행하면, 각 하나의 인수를 사용합니다

1150
01:10:55,220 --> 01:10:57,090
그 인수는 기능입니다.

1151
01:10:57,090 --> 01:11:02,760
만약해야 할거야하면이 목록의 내부의 모든 요소에 해당 기능을 적용 할거야입니다.

1152
01:11:02,760 --> 01:11:05,550
이 함수는, 전자이에요 인수 걸립니다

1153
01:11:05,550 --> 01:11:10,090
이 함수가 실행되면이 전자는 첫 번째 행으로 대체 될 것입니다

1154
01:11:10,090 --> 01:11:12,070
다음 두 번째 행 다음, 세번째 줄.

1155
01:11:12,070 --> 01:11:15,150
이 방법으로이 루프에 대해를 실행과 같은 일이

1156
01:11:15,150 --> 01:11:21,360
그리고 루프에 대한의 색인 내부에 근거하여 현재의 요소를 계산.

1157
01:11:21,360 --> 01:11:24,750
각 반복에서, 테이블에 이러한 요소 각각에 대해,

1158
01:11:24,750 --> 01:11:30,560
행 내부 셀의 텍스트를 - 그 요소의 텍스트 있는지 확인하고 싶어 -

1159
01:11:30,560 --> 01:11:33,130
제가 검색하는 일치합니다.

1160
01:11:33,130 --> 01:11:36,390
명령이 큰 긴 문자열 내가 할 수있을 방법입니다.

1161
01:11:36,390 --> 01:11:40,900
우선, 다시이 지금을 말합니다 - 그게 새로운 기능 내부이기 때문에 -

1162
01:11:40,900 --> 01:11:45,020
이 이제 테이블의 현재 행입니다.

1163
01:11:45,020 --> 01:11:47,340
나는 테이블의 현재 행을 받고

1164
01:11:47,340 --> 01:11:49,950
그리고 나는 그것의 아이들의 모두를 얻을 수 싶습니다.

1165
01:11:49,950 --> 01:11:51,940
단, DOM은 계층 트리입니다

1166
01:11:51,940 --> 01:11:54,200
이는 요소가 아이들의 번호가 있다는 것을 의미합니다.

1167
01:11:54,200 --> 01:12:00,180
>> 이. 어린이 기능은 다시 나에게 모든 요소의 배열을 반환 것입니다

1168
01:12:00,180 --> 01:12:03,240
그이 경우, 테이블의 행에서의 자녀입니다.

1169
01:12:03,240 --> 01:12:07,150
이 단지 행 내부의 셀입니다.

1170
01:12:07,150 --> 01:12:09,230
난 단지 첫 번째 셀을 통해 검색하고 싶습니다.

1171
01:12:09,230 --> 01:12:13,090
이. 첫번째 기능은 내게 그 배열의 첫 번째 요소를 제공 말합니다.

1172
01:12:13,090 --> 01:12:17,070
그런 다음 텍스트 기능은 해당 셀의 안에 나를 정확히 얻을 말합니다

1173
01:12:17,070 --> 01:12:19,530
그 텍스트를 검색하려면 때문입니다.

1174
01:12:19,530 --> 01:12:21,040
마지막으로, 그렇게는 소문자로 변환하자

1175
01:12:21,040 --> 01:12:23,940
그래서 우리는 문자 대소 문자를 구분하지 쿼리를 수행 할 수 있습니다.

1176
01:12:23,940 --> 01:12:29,990
마지막으로, 우리는 테이블 안에 당신 문자열이 우리가 검색하는 문자열이 포함되어 있는지 확인하고 싶습니다.

1177
01:12:29,990 --> 01:12:32,980
자바 스크립트에서 indexOf 함수는 그냥 않습니다.

1178
01:12:32,980 --> 01:12:37,060
그것은이 문자열이 다른 문자열이 포함되어 있는지 여부를 우리에게 알려줍니다.

1179
01:12:37,060 --> 01:12:40,150
이 세포 내가 검색하는 포함 된 사실이라면,

1180
01:12:40,150 --> 01:12:42,140
그럼 내가이 표시된되었는지 확인하고 싶습니다.

1181
01:12:42,140 --> 01:12:45,330
쇼 방법은 "요소를 표시합니다."라고합니다

1182
01:12:45,330 --> 01:12:50,350
이 경우가 아닌 경우, 해당 내가 포함되지 않습니다 찾고있어 어떤 의미

1183
01:12:50,350 --> 01:12:53,550
해당 행에서, 나는 숨기려면 있으므로 사용자의 것입니다.

1184
01:12:53,550 --> 01:12:59,240
더 이상 우리는 전체 테이블을 볼 수 없습니다 그건 어디 그 좋은 필터링 효과를 달성합니다.

1185
01:12:59,240 --> 01:13:01,480
당신도이 폭탄을 만드는 방법에 관심이 있다면

1186
01:13:01,480 --> 01:13:04,180
우리는 온라인 소스를 게시합니다. 그러나 정말 간단합니다.

1187
01:13:04,180 --> 01:13:09,860
jQuery를이 애니메이션과 조작 CSS의 속성에 대한 멋진 방법이 있습니다.

1188
01:13:09,860 --> 01:13:11,020
그래서 그것 땜에 있습니다.

1189
01:13:11,020 --> 01:13:15,560
>> 그런데 무슨 뭔가요? 당신은 몇 일 안에 볼 수 있듯이, 최종 프로젝트 제안 때문입니다.

1190
01:13:15,560 --> 01:13:17,730
최종 프로젝트 제안이 당신에게 몇 가지 질문을합니다

1191
01:13:17,730 --> 01:13:19,420
하지만 그 중 세 이정표가 될 것입니다 -

1192
01:13:19,420 --> 01:13:22,840
한명은 "좋은"이정표, 더 나은 이정표, 한 가장.

1193
01:13:22,840 --> 01:13:25,870
너희들이 도움이 정말되는 아이디어는 기대를 설정

1194
01:13:25,870 --> 01:13:29,160
그래서 최소한 당신은 최종 프로젝트의 출력과 행복 할 것

1195
01:13:29,160 --> 01:13:32,060
그리고 지금까지 당신이 염려하는 "좋은"입니다.

1196
01:13:32,060 --> 01:13:34,540
하지만 당신은 뭔가 조금에 도달 할 수 있을지에 관심을 더

1197
01:13:34,540 --> 01:13:37,680
또는 가장 일, 우리는 또한뿐만 아니라 그 방향을 밀어를 정렬합니다.

1198
01:13:37,680 --> 01:13:40,660
CS50 해킹 - 어 - 쏜는 한편, 몇 주에 있습니다.

1199
01:13:40,660 --> 01:13:44,340
일반적으로, 우리는 때문에 관심 복권으로 기준으로이 작업을 수행,

1200
01:13:44,340 --> 01:13:47,680
하지만 아이가 우리가 하버드 광장에서 셔틀 버스에 우리의 몇 백 할게요 아르

1201
01:13:47,680 --> 01:13:51,540
아래 Microsoft는 aptly "왕따"라는 아름다운 시설을 갖추고 있습니다 켄달 광장 -

1202
01:13:51,540 --> 01:13:53,830
뉴 잉글랜드의 연구 및 개발 센터.

1203
01:13:53,830 --> 01:13:56,380
우리는 8 시쯤에 우리는 음식을해야 갈 수 있습니다.

1204
01:13:56,380 --> 01:13:58,160
오전 1시 주변 우리는 좀 더 음식을해야합니다.

1205
01:13:58,160 --> 01:14:02,150
약 5 아직도 깨어 있으면 우리가 캠퍼스로 돌아 IHOP 또는 가져 가보합니다입니다.

1206
01:14:02,150 --> 01:14:04,380
이 목표는 최종 프로젝트에 잠수하는 것입니다

1207
01:14:04,380 --> 01:14:06,190
같은 반 친구와 직원과 함께.

1208
01:14:06,190 --> 01:14:08,280
그런 다음 며칠 후 CS50 박람회입니다

1209
01:14:08,280 --> 01:14:10,990
너희들이 작업을 소개하기 위해 어떤이 정말 기회가 될 운명입니다

1210
01:14:10,990 --> 01:14:12,700
학기 및 성과

1211
01:14:12,700 --> 01:14:15,610
서로 어깨를 문지르며 모든 사람들이 무슨 짓을했는지의 감각을 가져 오는 동안.

1212
01:14:15,610 --> 01:14:17,850
그렇게 말과 함께, 토미와 요셉에게 많은 감사,

1213
01:14:17,850 --> 01:14:19,960
우리는 월요일에 표시됩니다.

1214
01:14:19,960 --> 01:14:24,070
 [박수]