1
00:00:00,000 --> 00:00:02,700
[Powered by Google Translate] [Tuần 9, Tiếp tục]

2
00:00:02,700 --> 00:00:05,160
[David J. Malan - Đại học Harvard

3
00:00:05,160 --> 00:00:07,020
[Đây là CS50. - CS50.TV]

4
00:00:07,940 --> 00:00:13,340
>> Đây là CS50. Đây là phần cuối của tuần 9. Cám ơn rất nhiều.

5
00:00:13,340 --> 00:00:15,310
Cuối cùng. Tuần 9. Tôi đã nhận nó.

6
00:00:15,310 --> 00:00:18,590
Hôm nay chúng ta tiếp tục cuộc trò chuyện của chúng tôi về lập trình web

7
00:00:18,590 --> 00:00:21,660
với một tầm nhìn hướng tới dự án cuối cùng, không phải vì bạn phải làm một cái gì đó dựa trên web

8
00:00:21,660 --> 00:00:25,610
cho các dự án cuối cùng nhưng vì một cho các dự án cuối cùng hoặc sau khi CS50

9
00:00:25,610 --> 00:00:29,000
điều này chắc chắn là hướng mà phần mềm hiện đại.

10
00:00:29,000 --> 00:00:31,770
Tuy nhiên nó không phải là thực sự là một điều dễ dàng.

11
00:00:31,770 --> 00:00:35,040
Trong thực tế, là một trong những điều khó khăn nhất để làm là khía cạnh của thiết kế.

12
00:00:35,040 --> 00:00:38,600
>> Ví dụ, theo thiết kế, chúng tôi có nghĩa là thực sự nhận được giao diện người dùng

13
00:00:38,600 --> 00:00:40,420
hoặc trải nghiệm người dùng.

14
00:00:40,420 --> 00:00:43,200
Tôi dám khẳng định - và chúng tôi biết từ một tập hợp các vấn đề gần đây

15
00:00:43,200 --> 00:00:45,960
khi một số các bạn phát sóng lời phàn nàn của bạn về một số phần của phần mềm

16
00:00:45,960 --> 00:00:49,000
hoặc phần cứng tức giận bạn, cho dù trong khuôn viên trường hoặc tắt -

17
00:00:49,000 --> 00:00:51,930
có rất nhiều trang web ra có, có rất nhiều phần cứng ra khỏi đó,

18
00:00:51,930 --> 00:00:53,900
là loại sucks.

19
00:00:53,900 --> 00:00:58,730
Nhưng thực tế là làm cho mọi thứ dễ dàng để sử dụng, chưa dù sao mạnh mẽ

20
00:00:58,730 --> 00:01:00,550
là một thách thức rất khó khăn.

21
00:01:00,550 --> 00:01:03,680
Vì vậy, hôm nay tôi hỏi Joseph và Tommy để tham gia cùng tôi lên đây

22
00:01:03,680 --> 00:01:06,680
để chúng tôi có thể có một cuộc trò chuyện, cả về thiết kế

23
00:01:06,680 --> 00:01:09,090
và những gì các loại của các quá trình suy nghĩ nên bắt đầu đi qua đầu của bạn

24
00:01:09,090 --> 00:01:12,040
khi bạn thiết kế các dự án cuối cùng của bạn, những nỗ lực của bạn trong tương lai.

25
00:01:12,040 --> 00:01:15,040
Và sau đó với sự giúp đỡ của Tommy, chúng tôi sẽ xem xét một số chi tiết thực hiện.

26
00:01:15,040 --> 00:01:18,440
Làm thế nào bạn có thể có một số tầm nhìn trên giấy hoặc trong tâm trí của bạn

27
00:01:18,440 --> 00:01:20,760
sau đó bạn có thể thực hiện chương trình

28
00:01:20,760 --> 00:01:24,030
bằng cách sử dụng một số các công nghệ và kỹ thuật, chúng tôi đã bắt đầu nói về,

29
00:01:24,030 --> 00:01:29,080
cụ thể là JavaScript và một cái gì đó mới hơn, là AJAX, JavaScript không đồng bộ.

30
00:01:29,080 --> 00:01:32,950
Điều đó cho phép bạn tạo ra tất cả sự năng động của một giao diện người dùng

31
00:01:32,950 --> 00:01:35,780
bằng cách lấy dữ liệu nhiều hơn và nhiều hơn nữa dần dần từ một máy chủ.

32
00:01:35,780 --> 00:01:38,560
Vì vậy, chúng ta sẽ thấy một số của những đoạn như ngày hôm nay.

33
00:01:38,560 --> 00:01:41,800
Một sang một bên, nếu bạn quan tâm đến tập trung trong lĩnh vực khoa học máy tính

34
00:01:41,800 --> 00:01:45,010
hoặc minoring khoa học máy tính, biết rằng thứ sáu này vào buổi trưa

35
00:01:45,010 --> 00:01:48,750
trong Maxwell Dworkin 221 sẽ có một sự kiện pizza

36
00:01:48,750 --> 00:01:50,780
nơi bạn có thể tìm hiểu thêm một chút về khoa học máy tính.

37
00:01:50,780 --> 00:01:54,860
Trên đường ngày hôm nay ra khỏi cửa, bạn sẽ có thể chọn một tài liệu hướng dẫn không chính thức để CS tại Đại học Harvard.

38
00:01:54,860 --> 00:01:57,290
Chúng tôi sẽ đặt nó vào thùng rác bên ngoài ở độ cao eo

39
00:01:57,290 --> 00:01:59,750
do đó nếu bạn muốn lấy điều này và tìm hiểu thêm một chút về CS,

40
00:01:59,750 --> 00:02:02,480
sẽ ở đó cho bạn như nó đã được trong tuần 0.

41
00:02:02,480 --> 00:02:06,500
Ngoài ra nếu bạn muốn tham gia với chúng tôi để CS50 trưa thứ sáu này tại 1:15 pm,

42
00:02:06,500 --> 00:02:09,800
đầu để cs50.net/lunch.

43
00:02:09,800 --> 00:02:13,260
Nếu không có thêm ado, tôi cung cấp cho bạn giảng dạy đồng Joseph Ong.

44
00:02:13,260 --> 00:02:19,190
Hi. [Vỗ tay]

45
00:02:19,190 --> 00:02:20,770
Cảm ơn.

46
00:02:20,770 --> 00:02:24,780
Lần đầu tiên tôi học được về thiết kế trong một lớp học ở đây gọi là CS179.

47
00:02:24,780 --> 00:02:28,040
>> Các giáo sư vào thời điểm đó nói với chúng tôi câu chuyện về giáo sư khác

48
00:02:28,040 --> 00:02:31,640
những người đã đi đến một khách sạn và sử dụng vòi nước.

49
00:02:31,640 --> 00:02:35,630
Bất cứ ai có thể cho tôi biết những gì 2 nút bấm bên trái và bên phải?

50
00:02:35,630 --> 00:02:39,080
[Sinh viên] nóng và lạnh. >> Nóng và lạnh. Tốt.

51
00:02:39,080 --> 00:02:41,430
Những gì bạn thường mong đợi, phải không?

52
00:02:41,430 --> 00:02:46,960
Giáo sư sau khi sử dụng vòi nước này muốn đi tắm, và ông tiến hành để sử dụng.

53
00:02:46,960 --> 00:02:51,310
Ông nghĩ rằng ở bên trái và bên phải là dành cho nóng và lạnh, phải không?

54
00:02:51,310 --> 00:02:55,470
Nhưng bất cứ ai có thể cho tôi biết những gì thực sự làm?

55
00:02:55,470 --> 00:02:58,060
Bất kỳ tay?

56
00:02:58,060 --> 00:03:01,740
[Phản ứng sinh viên không nghe được] >> Một gợi ý là?

57
00:03:01,740 --> 00:03:05,860
[Sinh viên không nghe được đáp ứng] >> Nhiệt độ?

58
00:03:05,860 --> 00:03:10,460
Vì vậy, một trong số họ điều khiển nhiệt độ và các điều khiển khác? >> [Sinh viên] Áp lực nước.

59
00:03:10,460 --> 00:03:12,350
Áp lực nước. Tốt.

60
00:03:12,350 --> 00:03:15,100
Giáo sư này đi vào điều này và nghĩ rằng họ đang kiểm soát nóng và lạnh,

61
00:03:15,100 --> 00:03:21,470
biến một trong những quyền, mà ông cho là nóng, tất cả các con đường lên

62
00:03:21,470 --> 00:03:23,560
vì anh ta muốn đi tắm ấm áp.

63
00:03:23,560 --> 00:03:28,100
Vâng, những điều này không thực sự phù hợp, do đó, ông nhận được kinh nghiệm này không phải là rất thú vị

64
00:03:28,100 --> 00:03:31,110
được tắm nước lạnh, và tất cả chúng ta đều biết những gì mà cảm thấy như.

65
00:03:31,110 --> 00:03:33,620
Đây là một ví dụ của một lỗ hổng thiết kế.

66
00:03:33,620 --> 00:03:37,040
Những gì tôi có nghĩa là bởi đó là kỳ vọng của mình từ vòi nước

67
00:03:37,040 --> 00:03:39,420
không phù hợp với những gì đã đưa ra khỏi vòi sen,

68
00:03:39,420 --> 00:03:41,780
đó là loại không may cho anh ta.

69
00:03:41,780 --> 00:03:44,990
Vì vậy, đây là một ví dụ về một lỗ hổng thiết kế điều đó xảy ra trong cuộc sống thực.

70
00:03:44,990 --> 00:03:48,020
Nhưng chúng tôi thấy tất cả các loại của những người khác là tốt.

71
00:03:48,020 --> 00:03:50,390
Chúng tôi có thể không phải là người hâm mộ của hệ thống MBTA.

72
00:03:50,390 --> 00:03:55,560
Đây là một hệ thống tàu điện ngầm thực sự ở London, nói rằng, "Nút này không sử dụng."

73
00:03:55,560 --> 00:04:00,220
Tại sao ngay cả trên đó? Tại sao chúng ta quan tâm?

74
00:04:00,220 --> 00:04:02,810
Khi tôi còn là một đứa trẻ, là hiểu biết về công nghệ trong nhà,

75
00:04:02,810 --> 00:04:05,050
bất cứ khi nào máy tính sẽ sụp đổ, mẹ tôi sẽ đến với tôi,

76
00:04:05,050 --> 00:04:07,060
màn hình này hiển thị cho tôi và hỏi tôi điều gì đã xảy ra.

77
00:04:07,060 --> 00:04:09,210
>> Thậm chí tôi không biết điều này có nghĩa là gì.

78
00:04:11,890 --> 00:04:14,700
[Cười] gì?

79
00:04:16,950 --> 00:04:18,019
[Cười]

80
00:04:18,720 --> 00:04:23,050
Đôi khi chúng tôi cảm thấy như các nhà phát triển phần mềm chỉ là trolling chúng tôi.

81
00:04:23,050 --> 00:04:28,460
Khi người sử dụng chúng ta như thế, "gì đang xảy ra Có người cho chúng tôi biết."

82
00:04:28,460 --> 00:04:32,140
Điều này tất cả đi xuống đến một vấn đề của thiết kế.

83
00:04:32,140 --> 00:04:34,650
Thiết kế, như chúng ta có thể thấy, không phải là hoàn toàn về thẩm mỹ,

84
00:04:34,650 --> 00:04:37,230
nó không phải về những điều trông như thế nào.

85
00:04:37,230 --> 00:04:41,720
Chúng tôi thấy rằng điều này rất ít cửa sổ pop-up trên đây thực sự trông khá đẹp.

86
00:04:41,720 --> 00:04:45,290
Nó có một bóng thả trong nền, nó có bán kính biên giới xảy ra.

87
00:04:45,290 --> 00:04:47,550
Đó là loại khá.

88
00:04:47,550 --> 00:04:51,480
Nó không thực sự cũng được thiết kế bởi vì nó không phải là rất thân thiện với người sử dụng.

89
00:04:51,480 --> 00:04:54,920
Mà ít pop-up mà đi lên không thực sự cho tôi bất kỳ thông tin nào

90
00:04:54,920 --> 00:04:58,450
về những gì đang xảy ra, nó không cho tôi biết bất cứ điều gì như người sử dụng

91
00:04:58,450 --> 00:05:01,400
về việc làm thế nào để phục hồi từ lỗi đó.

92
00:05:01,400 --> 00:05:05,190
Chúng tôi muốn để suy nghĩ về những điều mà thiết kế không phải.

93
00:05:05,190 --> 00:05:06,670
Đầu tiên, nó không phải là thẩm mỹ.

94
00:05:06,670 --> 00:05:10,800
Nó cũng không phải nhồi ứng dụng của bạn với tấn các chức năng không cần thiết.

95
00:05:10,800 --> 00:05:14,890
Nếu bạn là một nhà hàng Thái Lan, bạn có thể không muốn là một nha sĩ tại cùng một thời điểm.

96
00:05:14,890 --> 00:05:17,720
Và với câu hỏi Facebook, không phải là nhiều người sử dụng nó

97
00:05:17,720 --> 00:05:21,130
và nó đã không thực sự là cốt lõi của những gì họ đã được xây dựng.

98
00:05:21,130 --> 00:05:24,200
Và do đó, nó là tốt đẹp để suy nghĩ về không quá nhiều số lượng trong những điều

99
00:05:24,200 --> 00:05:26,390
rằng bạn đang đưa vào ứng dụng của bạn nhưng chất lượng

100
00:05:26,390 --> 00:05:28,910
và làm thế nào bạn đang làm cho rằng kinh nghiệm người dùng tốt hơn

101
00:05:28,910 --> 00:05:32,540
bằng cách thực sự cải thiện trên những gì bạn đã có.

102
00:05:32,540 --> 00:05:37,040
>> Tóm lại, thiết kế cho chúng ta biết những gì chúng ta nên xây dựng.

103
00:05:37,040 --> 00:05:41,950
Ví dụ, nếu chúng ta đang xây dựng một cái gì đó cho phép chúng ta tìm kiếm những thứ lên,

104
00:05:41,950 --> 00:05:45,970
như Google, ví dụ, chúng ta nên làm những việc theo cách thức

105
00:05:45,970 --> 00:05:48,950
yêu cầu người dùng để có được nhiều nhấp chuột để có được những gì họ muốn,

106
00:05:48,950 --> 00:05:52,580
hoặc chúng ta nên làm điều đó trong một cách, ví dụ, với Google Instant hoặc tự động hoàn chỉnh

107
00:05:52,580 --> 00:05:54,970
cho phép chúng ta có được kết quả của chúng tôi nhanh hơn?

108
00:05:54,970 --> 00:05:58,740
Kỹ thuật liên quan đến, như Tommy sẽ cho bạn thấy, thực sự xây dựng nó.

109
00:05:58,740 --> 00:06:01,890
Có rất nhiều loại thiết kế.

110
00:06:01,890 --> 00:06:06,070
Ví dụ, nếu bạn đang xây dựng một cái gì đó để triển khai một cái gì đó

111
00:06:06,070 --> 00:06:09,770
trong một quốc gia thế giới thứ ba, nơi không có nhiều điện hoặc công nghệ mà nhiều,

112
00:06:09,770 --> 00:06:11,440
bạn phải thiết kế những gì bạn đang xây dựng

113
00:06:11,440 --> 00:06:14,210
một cách dễ dàng cho phép truy cập đến những người ở đó.

114
00:06:14,210 --> 00:06:18,290
Nhưng những gì các loại quyết định thiết kế khác có thể có

115
00:06:18,290 --> 00:06:21,850
hoặc có thể được tham gia vào một cái gì đó như thế này?

116
00:06:23,690 --> 00:06:25,660
Yeah. Tôi thấy một bàn tay.

117
00:06:25,660 --> 00:06:37,200
[Không nghe được sinh viên phản ứng] >> phải. Chính xác. Tiếp cận là một điều.

118
00:06:37,200 --> 00:06:40,870
Rất nhiều người không nghĩ về, "Điều gì về người dùng của tôi?"

119
00:06:40,870 --> 00:06:43,160
giống như những thái cực của quang phổ hoặc.

120
00:06:43,160 --> 00:06:47,770
Tôi có người sử dụng có thể có khuyết tật mà tôi không nghĩ về

121
00:06:47,770 --> 00:06:50,590
và tôi chỉ suy nghĩ về thiết kế cho người dùng thông thường.

122
00:06:50,590 --> 00:06:52,630
Internet có thể truy cập bởi tất cả mọi người ngày nay,

123
00:06:52,630 --> 00:06:54,870
và tôi nên được thiết kế cho những người là tốt.

124
00:06:54,870 --> 00:06:58,620
Bạn có thể làm cho các loại quyết định thiết kế khác?

125
00:06:58,620 --> 00:07:00,690
Vâng. >> [Sinh viên] Chi phí.

126
00:07:00,690 --> 00:07:02,680
Chi phí. Rất tốt.

127
00:07:02,680 --> 00:07:08,060
Một điều chúng ta có thể căn cứ quyết định thiết kế của chúng tôi là chi phí.

128
00:07:08,060 --> 00:07:13,130
Nếu chúng tôi là một doanh nghiệp, bạn muốn xây dựng một cái gì đó mà không mất nhiều chi phí để sản xuất

129
00:07:13,130 --> 00:07:17,720
nhưng có thể bán với chi phí đặc biệt cao hoặc có thể nhận được một số lợi nhuận.

130
00:07:17,720 --> 00:07:21,540
>> Đây là tất cả các loại khác nhau của thiết kế, nhưng khi chúng tôi đang xây dựng một cái gì đó trên Internet

131
00:07:21,540 --> 00:07:25,120
hoặc khi chúng ta đang xây dựng một cái gì đó mà có lẽ không chi phí mà nhiều để xây dựng,

132
00:07:25,120 --> 00:07:28,630
như các ứng dụng Internet - bạn không phải ném vốn nhiều vào nó

133
00:07:28,630 --> 00:07:30,900
để làm một cái gì đó thực sự hoạt động -

134
00:07:30,900 --> 00:07:33,490
những gì chúng ta đang lo ngại hơn về kinh nghiệm người dùng.

135
00:07:33,490 --> 00:07:36,390
Chúng tôi gọi đây là thiết kế người dùng làm trung tâm.

136
00:07:36,390 --> 00:07:41,550
Về cơ bản những gì người sử dụng thiết kế làm trung tâm liên quan đến đặt mình trong những đôi giày của người sử dụng của bạn.

137
00:07:41,550 --> 00:07:44,870
Nếu dấu hiệu có người cho những gì tôi đang xây dựng,

138
00:07:44,870 --> 00:07:48,250
họ đã rõ ràng đến các ứng dụng cụ thể của tôi với một mục tiêu trong tâm trí,

139
00:07:48,250 --> 00:07:50,280
với một nhiệm vụ mà họ muốn để hoàn thành.

140
00:07:50,280 --> 00:07:53,650
Và công việc của bạn không phải là chỉ để giúp họ hoàn thành nhiệm vụ đó

141
00:07:53,650 --> 00:07:57,930
nhưng để giúp họ hoàn thành nhiệm vụ đó một cách có hiệu quả, trực quan,

142
00:07:57,930 --> 00:08:01,900
và, như một số người nói trên có thể truy cập.

143
00:08:01,900 --> 00:08:03,750
Hiệu quả có nghĩa là gì?

144
00:08:03,750 --> 00:08:08,050
Hiệu quả có nghĩa là người dùng của tôi một cách nhanh chóng như thế nào hoàn thành nhiệm vụ được giao diện của tôi.

145
00:08:08,050 --> 00:08:11,650
Liệu nó có nhiều nhấp chuột cho họ để có được từ một nơi khác?

146
00:08:11,650 --> 00:08:14,630
Là nó tẻ nhạt? Họ phải thực hiện rất nhiều công việc lặp đi lặp lại?

147
00:08:14,630 --> 00:08:17,140
Chúng tôi muốn làm cho quá trình hiệu quả nhất có thể

148
00:08:17,140 --> 00:08:20,070
vì vậy họ không phải để làm những loại vật.

149
00:08:20,070 --> 00:08:24,230
Trực giác nhạy bén, đó là, ví dụ, nếu người dùng nhìn lên giao diện của tôi,

150
00:08:24,230 --> 00:08:27,240
là nó dễ dàng cho họ để có được từ nơi này đến nơi khác?

151
00:08:27,240 --> 00:08:30,390
Dễ dàng cho họ để tìm ra những gì họ phải bấm vào trong giao diện của tôi

152
00:08:30,390 --> 00:08:33,770
để cho họ để đạt được mục tiêu hoặc nhiệm vụ mà họ muốn đạt được?

153
00:08:33,770 --> 00:08:37,520
>> Và cuối cùng, là một trong những người nói trên có, khả năng tiếp cận là rất quan trọng.

154
00:08:37,520 --> 00:08:39,640
[Nam loa] Nó đi kèm miễn phí cho những thứ như tầm nhìn,

155
00:08:39,640 --> 00:08:42,740
như làm thế nào để thực sự thiết kế một cái gì đó cho một người nào đó bị mù?

156
00:08:42,740 --> 00:08:46,460
Oh. Đối với những người không thể nhìn thấy ở tất cả, chúng tôi có một cái gì đó được gọi là trình đọc màn hình.

157
00:08:46,460 --> 00:08:49,070
Những gì bạn cần làm là bạn nên xây dựng trang web của bạn trong một cách

158
00:08:49,070 --> 00:08:52,020
rằng, ví dụ, đặc biệt là công nghệ mà chúng ta gọi

159
00:08:52,020 --> 00:08:53,590
Có rất nhiều thứ.

160
00:08:53,590 --> 00:08:55,660
Tôi nghĩ có trình đọc màn hình được gọi là JAWS.

161
00:08:55,660 --> 00:08:58,410
Rất nhiều những điều này dựa vào những gì chúng tôi gọi là quy tắc trong khu vực

162
00:08:58,410 --> 00:09:02,010
để đọc cho người sử dụng những gì hiện diện trên trang.

163
00:09:02,010 --> 00:09:05,480
Đối với những người không thể nhìn thấy, bạn cần phải chắc chắn rằng các màn hình độc giả

164
00:09:05,480 --> 00:09:09,130
thực sự có thể nhận nội dung trên trang và thực sự có thể cho người dùng của bạn,

165
00:09:09,130 --> 00:09:13,630
nếu bạn không thể nhìn thấy, ít nhất bạn vẫn có thể hiểu được nội dung trên trang.

166
00:09:13,630 --> 00:09:16,190
Yeah. Okay.

167
00:09:16,190 --> 00:09:23,410
Đủ nói về thiết kế tốt. Chúng ta hãy nói về thiết kế xấu.

168
00:09:23,410 --> 00:09:25,220
Đây là những điều mà bạn không nên làm.

169
00:09:25,220 --> 00:09:27,890
Bất cứ ai có thể cho tôi biết về kinh nghiệm của họ với Craigslist

170
00:09:27,890 --> 00:09:32,190
và những gì họ nghĩ là không tuyệt vời như vậy về thiết kế này?

171
00:09:33,690 --> 00:09:36,430
Vâng. >> [Sinh viên] Tôi nghĩ rằng có quá nhiều từ trong một khu vực.

172
00:09:36,430 --> 00:09:39,350
Quá nhiều từ, phải không? Hoàn toàn áp đảo.

173
00:09:39,350 --> 00:09:42,400
Bạn đến trang này và bạn sẽ được chào đón với một bó toàn bộ những thứ ở đây

174
00:09:42,400 --> 00:09:43,860
thậm chí có thể không quan trọng với bạn.

175
00:09:43,860 --> 00:09:47,010
Ví dụ, bạn sống trong một nhà nước mà không bắt đầu bằng chữ cái này.

176
00:09:47,010 --> 00:09:48,690
Hãy nói rằng bạn sống ở Texas hay một cái gì đó.

177
00:09:48,690 --> 00:09:53,790
>> Bạn phải di chuyển tất cả các con đường xuống trang để có được vị trí bạn đang ở.

178
00:09:53,790 --> 00:10:00,320
Tôi đến từ Boston, vì vậy hãy cho tôi nhìn ở Massachusetts. Massachusetts ở đâu?

179
00:10:00,320 --> 00:10:03,270
Ồ, nó ngay tại đây. Ồ, đó là Boston. Okay.

180
00:10:03,270 --> 00:10:09,070
Hãy nhìn tại Boston. [Cười]

181
00:10:09,070 --> 00:10:12,250
Khá áp đảo, phải không?

182
00:10:12,250 --> 00:10:16,400
Awkward những điều trên đó. [Cười]

183
00:10:17,320 --> 00:10:19,470
Hãy nói rằng tôi đang tìm một nơi nào đó để sống.

184
00:10:19,470 --> 00:10:24,130
Có bao nhiêu người đã thực sự được sử dụng Craigslist? Tấn bạn.

185
00:10:24,130 --> 00:10:30,960
Có nhiều cách khá xấu để nhìn vào điều này, nhưng chúng ta hãy xem xét điều này.

186
00:10:35,130 --> 00:10:38,970
Sự khác biệt giữa img và pic là gì? Bất cứ ai có thể cho tôi biết?

187
00:10:41,350 --> 00:10:42,830
Có thực sự là không có sự khác biệt.

188
00:10:42,830 --> 00:10:47,710
Họ có nghĩa là chính xác những điều tương tự, nhưng họ có nhãn khác nhau cho họ vì một lý do nào đó.

189
00:10:48,980 --> 00:10:53,560
Nếu tôi bấm vào Có hình ảnh, không có gì xảy ra trên trang.

190
00:10:53,560 --> 00:10:57,490
Tôi thực sự có nhấp vào Tìm kiếm một lần nữa cho một cái gì đó xảy ra.

191
00:10:57,490 --> 00:11:02,430
Điều gì có thể là một quyết định thiết kế tốt hơn có thể được thực hiện ở đó?

192
00:11:03,820 --> 00:11:08,030
Nếu tôi nhấp vào bộ lọc đó, tôi có lẽ muốn lọc bằng hành động cụ thể

193
00:11:08,030 --> 00:11:09,970
hoặc loại nào đó.

194
00:11:09,970 --> 00:11:14,450
Vì vậy, thay vì phải nhấn Tìm kiếm một lần nữa, tôi có thể chỉ cần tự động làm các bộ lọc

195
00:11:14,450 --> 00:11:17,060
sắp xếp của Google theo phong cách mà họ làm điều đó ngay lập tức.

196
00:11:17,060 --> 00:11:20,440
Malan Nhưng không hình như chúng ta đã nhìn thấy vậy, đến nay có được thể chất trình

197
00:11:20,440 --> 00:11:23,170
bằng cách nhấn Enter ít nhất hoặc nhấp chuột vào một nút?

198
00:11:23,170 --> 00:11:26,830
Như bạn đã thấy cho đến nay, bạn thực sự phải bấm Submit để làm những điều.

199
00:11:26,830 --> 00:11:30,090
>> Tuy nhiên, như Tommy sẽ chỉ cho bạn trong một lần thứ hai, thực sự có cách để bạn

200
00:11:30,090 --> 00:11:33,010
như vậy mà khi bạn click vào điều mà nó có thể tự động gửi

201
00:11:33,010 --> 00:11:38,840
những gì chúng ta gọi là một yêu cầu AJAX và lấy lại dữ liệu và lọc kết quả của bạn ngay lập tức.

202
00:11:38,840 --> 00:11:41,340
Có rất nhiều những điều sai trái với giao diện này.

203
00:11:41,340 --> 00:11:43,530
[Malan] Bạn có thể tìm kiếm cho Cambridge?

204
00:11:43,530 --> 00:11:47,030
Có cái gì đó hơi bất thường ở đây mà bạn quan tâm về Cambridge

205
00:11:47,030 --> 00:11:54,790
và bạn đang nhận được Westford, Spring Hill, West Newton và các loại tương tự.

206
00:11:54,790 --> 00:11:57,930
Có lẽ là không lý tưởng. >> Có lẽ là không lý tưởng.

207
00:11:57,930 --> 00:12:03,900
Làm thế nào tôi có thể có thể làm cho kinh nghiệm của người sử dụng tốt hơn trên trang này cụ thể?

208
00:12:03,900 --> 00:12:07,340
Vâng. >> [Sinh viên] Hướng dẫn.

209
00:12:07,340 --> 00:12:09,500
Okay. Hướng dẫn trong những gì sắp xếp ý nghĩa?

210
00:12:09,500 --> 00:12:14,630
[Sinh viên] Ví dụ, một điều cho người sử dụng lần đầu tiên người thậm chí không biết những gì Craigslist

211
00:12:14,630 --> 00:12:17,320
hoặc bạn không biết những gì bạn đang phải làm.

212
00:12:17,320 --> 00:12:20,150
Đúng. Vì vậy, giải thích những gì Craigslist là trên trang này là quan trọng.

213
00:12:20,150 --> 00:12:23,490
Chúng tôi thực sự có thể cho biết người sử dụng trang này là thực sự cho.

214
00:12:23,490 --> 00:12:27,090
Nếu tôi chỉ đến thăm này, tôi thấy một bó toàn bộ các địa điểm. Tôi thậm chí không biết những gì họ có ý nghĩa.

215
00:12:27,090 --> 00:12:29,730
Nhưng quan trọng hơn, chỉ cần nhìn vào giao diện này,

216
00:12:29,730 --> 00:12:35,530
nhớ tôi đã phải di chuyển xuống một tấn điều để tìm thấy một cộng đồng cụ thể

217
00:12:35,530 --> 00:12:37,560
rằng tôi thực sự quan tâm về điều này.

218
00:12:37,560 --> 00:12:39,820
Một cách nhanh hơn tôi có thể làm điều đó là gì? Vâng.

219
00:12:39,820 --> 00:12:43,290
[Sinh viên] Chia chúng thành phía đông, khu vực phía tây. >> Okay.

220
00:12:43,290 --> 00:12:47,460
Tôi có thể phân chia chúng thành các loại có thể giúp tôi nhanh hơn xác định

221
00:12:47,460 --> 00:12:49,820
làm thế nào để có được vị trí đó cụ thể.

222
00:12:49,820 --> 00:12:54,510
[Sinh viên] Đặt một danh sách thả xuống. >> Right. Okay.

223
00:12:54,510 --> 00:12:58,240
Tôi có thể sử dụng một trình đơn thả xuống bởi vì chúng ta có một tập cố định các vật

224
00:12:58,240 --> 00:13:00,100
và chúng tôi có thể hiển thị chúng trong một trình đơn thả xuống.

225
00:13:00,100 --> 00:13:02,240
Bằng cách đó nó không mất quá nhiều không gian trên màn hình.

226
00:13:02,240 --> 00:13:05,630
Nhưng thậm chí còn tốt hơn so với những gì chúng ta có thể làm gì?

227
00:13:05,630 --> 00:13:09,220
Vâng. >> [Không nghe được sinh viên phản ứng] >> Bạn có thể nói rằng một lần nữa? >> [Sinh viên] hộp tìm kiếm.

228
00:13:09,220 --> 00:13:11,260
Yeah, một hộp tìm kiếm. Đó là tuyệt vời.

229
00:13:11,260 --> 00:13:16,430
Những gì chúng tôi thực sự có thể làm là nếu chúng ta nhìn lại hộp slide tìm kiếm,.

230
00:13:16,430 --> 00:13:21,520
Autocomplete. Rất dễ dàng để tìm kiếm thông qua các kết quả mà bạn biết là trong tập hợp.

231
00:13:21,520 --> 00:13:25,980
Nếu tôi bắt đầu nhập BO, chỉ cần cho tôi tất cả các kết quả có trong BO của chúng.

232
00:13:25,980 --> 00:13:29,030
Bằng cách đó tôi có thể dễ dàng tìm thấy một trong những đặc biệt là tôi muốn đi đến

233
00:13:29,030 --> 00:13:32,390
thay vì phải di chuyển qua danh sách này thực sự lớn.

234
00:13:32,390 --> 00:13:37,450
>> Đây là tất cả các loại thực sự trái cây thấp treo-những người đang thực hiện Craigslist

235
00:13:37,450 --> 00:13:42,500
thực sự có thể làm gì để làm cho kinh nghiệm trên trang web tốt hơn rất nhiều cho người sử dụng cụ thể của họ.

236
00:13:42,500 --> 00:13:46,370
Okay. Đủ nói về các trang web xấu.

237
00:13:46,370 --> 00:13:49,410
Chúng ta hãy nói về Facebook.

238
00:13:50,880 --> 00:13:54,390
Khi Facebook ra, và đặc biệt là Facebook hình ảnh,

239
00:13:54,390 --> 00:13:57,870
đã có rất nhiều các dịch vụ khác tại thời gian có thể làm chính xác những điều tương tự.

240
00:13:57,870 --> 00:14:00,740
Họ có thể tổ chức các bức ảnh của bạn vào album.

241
00:14:00,740 --> 00:14:03,360
Những gì bạn có thể làm là bạn có thể sắp xếp chúng vào bộ cũng.

242
00:14:03,360 --> 00:14:06,070
Bạn có thể tổ chức chúng theo ngày. Bạn có thể làm tất cả những điều đặc biệt.

243
00:14:06,070 --> 00:14:11,710
Nhưng không ai biết điều gì đã khiến Facebook hình ảnh bùng nổ vào thời điểm nó được phát hành?

244
00:14:11,710 --> 00:14:15,080
Vâng. >> [Sinh viên] Tags. >> Tags. Chính xác.

245
00:14:15,080 --> 00:14:21,300
Chúng tôi có Milo ở đây, con chó của chúng tôi linh vật với bandana CS50 là.

246
00:14:21,300 --> 00:14:24,810
Bạn có thể thấy rằng chúng tôi có tính năng gắn thẻ ở giữa.

247
00:14:24,810 --> 00:14:28,240
Và những gì Facebook hình ảnh rất thú vị từ một quan điểm khả năng sử dụng

248
00:14:28,240 --> 00:14:34,130
là nó thực sự cho phép người dân thông qua này liên quan đến bạn bè của họ trong hình ảnh của họ.

249
00:14:34,130 --> 00:14:37,680
Đối với Facebook, kể từ khi trang web của họ là đặc biệt xã hội,

250
00:14:37,680 --> 00:14:40,750
nó về xây dựng loại này bầu không khí xã hội.

251
00:14:40,750 --> 00:14:42,620
Đó cải thiện trải nghiệm hình ảnh nhiều hơn

252
00:14:42,620 --> 00:14:46,390
bởi vì họ thực sự có thể bắt đầu nói, "Đây là những kết nối giữa con người,

253
00:14:46,390 --> 00:14:49,220
và đây là những hình ảnh về những người bạn thực sự quan tâm. "

254
00:14:49,220 --> 00:14:52,200
Một phần của nó cũng là loại tự ái.

255
00:14:52,200 --> 00:14:54,980
Những người như được gắn thẻ trong ảnh và những thứ như thế.

256
00:14:54,980 --> 00:14:58,510
Trong khi đó là không nhất thiết phải là một đặc điểm tốt của con người,

257
00:14:58,510 --> 00:15:01,910
đồng thời nó dựa trên quyết định thiết kế tốt

258
00:15:01,910 --> 00:15:04,860
bởi vì mọi người thực sự quan tâm về những thứ như thế này.

259
00:15:04,860 --> 00:15:07,190
Vì vậy, đó là Facebook ảnh.

260
00:15:07,190 --> 00:15:09,800
>> Nhưng chúng ta hãy nói Facebook nói chung.

261
00:15:09,800 --> 00:15:13,400
Tôi chắc chắn rằng rất nhiều người dân ở đây có ý kiến ​​về Facebook,

262
00:15:13,400 --> 00:15:16,430
cả hai thiết kế quyết định đúng đắn và quyết định thiết kế xấu.

263
00:15:16,430 --> 00:15:20,270
Vì vậy, hãy trút được hạnh phúc.

264
00:15:23,480 --> 00:15:26,450
Đi nào. Tôi biết tất cả các bạn sử dụng Facebook.

265
00:15:26,450 --> 00:15:30,970
Phải có người nào đó để có cái gì xấu để nói hoặc một cái gì đó tốt đẹp để nói về nó. Vâng.

266
00:15:30,970 --> 00:15:35,060
[Sinh viên] Trong các nguồn tin có rất nhiều điều tôi không thực sự quan tâm.

267
00:15:35,060 --> 00:15:37,740
Các nguồn tin cho thấy rất nhiều điều bạn có thể không quan tâm đến.

268
00:15:37,740 --> 00:15:41,660
Bạn có bạn bè trên Facebook người bạn đã không được đáp ứng trong 2 hoặc 3 năm

269
00:15:41,660 --> 00:15:43,860
và bạn thấy kết quả tin tức xuất hiện trong nguồn cấp dữ liệu tin tức của bạn

270
00:15:43,860 --> 00:15:45,870
và bạn không thực sự quan tâm về nó.

271
00:15:45,870 --> 00:15:48,700
Facebook đã thực sự thực hiện một nỗ lực để thực hiện điều này tốt hơn,

272
00:15:48,700 --> 00:15:53,150
và họ đã thực sự cố gắng để thúc đẩy các kết quả liên quan đến đầu của các nguồn cấp dữ liệu tin tức về muộn

273
00:15:53,150 --> 00:15:58,300
vì vậy bạn thực sự nhìn thấy những thứ bạn bè có liên quan đến bạn hoặc bạn bè thân của bạn.

274
00:15:58,300 --> 00:16:01,110
Bất cứ điều gì khác? Vâng.

275
00:16:01,110 --> 00:16:06,400
[Sinh viên phản ứng không nghe được] >> bạn có thể nói rằng một lần nữa?

276
00:16:06,400 --> 00:16:10,140
[Sinh viên] Các quảng cáo tương đối không phô trương. >> Trong ý nghĩa nào?

277
00:16:10,140 --> 00:16:16,370
[Sinh viên không nghe được đáp ứng] Họ không có ánh sáng trên màn hình, giống như biểu ngữ.

278
00:16:16,370 --> 00:16:17,760
Okay. Đó là tốt.

279
00:16:17,760 --> 00:16:25,030
Nếu bạn còn nhớ Internet từ những năm 90 - >> [Malan] Tôi đã ở đó. >> Ông đã có. [Cười]

280
00:16:25,030 --> 00:16:29,210
Bạn có thể nhớ GIF nhấp nháy nền, lấp lánh những điều,

281
00:16:29,210 --> 00:16:31,570
GeoCities loại phong cách của sự vật.

282
00:16:31,570 --> 00:16:34,080
Đó là thực sự không phải là một ví dụ về một thiết kế tốt

283
00:16:34,080 --> 00:16:36,690
bởi vì nó thực sự mất tập trung nội dung.

284
00:16:36,690 --> 00:16:39,590
Nghệ thuật Yale trang web được sử dụng để có các hình GIF động như là nền tảng của họ

285
00:16:39,590 --> 00:16:41,800
và bạn không thể đọc được bất cứ điều gì trên trang web,

286
00:16:41,800 --> 00:16:44,870
nhưng tôi đoán ai đó thực sự nói chuyện với họ và bây giờ nó là một chút khác nhau.

287
00:16:44,870 --> 00:16:48,940
Malan] Nó tốt hơn bây giờ. >> Nó tốt hơn bây giờ, như bạn có thể nhìn thấy. >> [Malan] Oh yeah.

288
00:16:48,940 --> 00:16:56,020
Chỉ là tuyệt vời, chỉ cần - Yeah. Okay.

289
00:16:56,020 --> 00:17:00,560
>> Một phần của nó cũng làm cho trang web của bạn có thể rất nhỏ gọn và rất dễ hiểu

290
00:17:00,560 --> 00:17:05,690
mọi thứ trên dòng chảy trang trong một cách đó là rất hợp lý và không nhận được trong cách của nhau.

291
00:17:05,690 --> 00:17:11,849
Những loại những thứ khác tốt về Facebook hay xấu về Facebook?

292
00:17:11,849 --> 00:17:15,730
Chúng ta chỉ có một cuộc trò chuyện thiết kế ở đây.

293
00:17:19,470 --> 00:17:21,339
Oh. Ở đâu? Yeah.

294
00:17:21,339 --> 00:17:25,640
[Sinh viên] Hệ thống Timeline mới cho phép bạn tìm kiếm các profile của người này về quá khứ của họ.

295
00:17:25,640 --> 00:17:28,119
Ooh, Timeline.

296
00:17:28,119 --> 00:17:30,280
Timeline là một điều tuyệt vời bởi vì nó cho phép bạn theo dõi bạn bè của bạn

297
00:17:30,280 --> 00:17:33,300
trở lại khi họ còn học trung học.

298
00:17:35,160 --> 00:17:38,060
Timeline là tốt vì nó cho phép bạn lọc thông qua các nội dung nhanh hơn rất nhiều,

299
00:17:38,060 --> 00:17:41,500
nó cho phép bạn tìm thấy những điều mà có thể có nếu không đưa bạn một thời gian rất dài để tìm

300
00:17:41,500 --> 00:17:45,840
chỉ cần di chuyển lên và xuống, lên, lên, lên, lên, lên, giống như đi ngược lại thời gian.

301
00:17:45,840 --> 00:17:48,910
Nhưng sau đó cũng có loại một nhược điểm về kinh nghiệm người dùng.

302
00:17:48,910 --> 00:17:51,190
Điều đó có thể được?

303
00:17:51,190 --> 00:17:56,780
Big từ bắt đầu với P-R. >> [Sinh viên] Riêng Tư này. >> Bảo mật, phải không?

304
00:17:56,780 --> 00:17:59,970
Bảo mật là một người sử dụng vấn đề kinh nghiệm rất lớn.

305
00:17:59,970 --> 00:18:07,190
Đây là một trong những điều tôi ghét nhất về Facebook. [Cười]

306
00:18:07,190 --> 00:18:09,000
Malan] Như tôi bây giờ.

307
00:18:09,000 --> 00:18:11,380
David đã không nhận ra điều này thực sự xảy ra cho đến ngày hôm qua.

308
00:18:11,380 --> 00:18:14,560
Vì vậy, bây giờ ông biết rằng mỗi khi tôi trò chuyện anh tôi biết anh ta đã bỏ qua tôi.

309
00:18:14,560 --> 00:18:16,880
[Malan Phần khó xử tôi đã thực sự bỏ qua anh ta,

310
00:18:16,880 --> 00:18:21,040
và tôi đã không biết rằng anh ấy biết tôi đã bỏ qua anh ta. [Cười]

311
00:18:21,040 --> 00:18:24,030
Bảo mật là một vấn đề lớn.

312
00:18:24,030 --> 00:18:28,670
Ai ở đây có thể cho tôi biết những gì có thể xấu về sự riêng tư của Facebook

313
00:18:28,670 --> 00:18:32,270
bên cạnh thực tế là họ làm những việc như thế này?

314
00:18:32,270 --> 00:18:37,240
Đó là những gì đặc biệt khó khăn để làm với Facebook riêng tư?

315
00:18:37,240 --> 00:18:40,340
Đó là loại là một câu hỏi hàng đầu.

316
00:18:41,680 --> 00:18:43,930
Vâng. >> [Sinh viên] Hide bức ảnh của bạn từ những người nhất định.

317
00:18:43,930 --> 00:18:46,170
Đúng. Chính xác, để ẩn các bức ảnh của bạn từ những người nhất định.

318
00:18:46,170 --> 00:18:51,290
Họ có nút này, nhỏ bé ở phía trên bên phải cho phép bạn chuyển đổi các quyền riêng tư của một bức ảnh.

319
00:18:51,290 --> 00:18:56,360
Tùy chọn bảo mật của họ rất khác nhau giữa các loại khác nhau của các menu.

320
00:18:56,360 --> 00:18:59,510
>> Họ đã nhận được tốt hơn rất nhiều về nó gần đây, nhưng nó được sử dụng phải là trường hợp

321
00:18:59,510 --> 00:19:04,870
rằng bất cứ khi nào bạn muốn ngăn không cho bạn bè của bạn từ các bức ảnh nhìn thấy,

322
00:19:04,870 --> 00:19:08,280
bạn sẽ phải đi qua một quá trình 5 bước rất phức tạp vì giống như,

323
00:19:08,280 --> 00:19:11,150
hãy để tôi nhấp vào liên kết này, bây giờ hãy để tôi nhấp vào một lần nữa, hãy để tôi nhấp vào một lần nữa,

324
00:19:11,150 --> 00:19:13,420
hãy để tôi chỉ định mà mọi người không thể nhìn thấy hình ảnh của tôi.

325
00:19:13,420 --> 00:19:17,250
Đó không phải là đặc biệt tốt trên một phần của Facebook

326
00:19:17,250 --> 00:19:20,530
bởi vì rất nhiều về kinh nghiệm của người sử dụng thực sự đem lại cho họ sự tự do

327
00:19:20,530 --> 00:19:22,460
để kiểm soát những gì mọi người có thể nhìn thấy.

328
00:19:22,460 --> 00:19:25,550
Chúng tôi gọi đây là kiểm soát người sử dụng và tự do.

329
00:19:25,550 --> 00:19:31,090
Nếu bạn không cho phép người dùng của bạn làm điều đó một cách hiệu quả và trực quan,

330
00:19:31,090 --> 00:19:34,570
sau đó trải nghiệm người dùng của bạn là không thực sự là tuyệt vời ở tất cả.

331
00:19:34,570 --> 00:19:38,200
 Bạn muốn nói bất cứ điều gì về Facebook?

332
00:19:38,700 --> 00:19:41,420
Làm thế nào để tắt chức năng này?

333
00:19:41,420 --> 00:19:46,290
Ong Bạn không thể tắt chức năng này, và đó là một lỗ hổng khả năng sử dụng rất lớn trên một phần của Facebook.

334
00:19:46,290 --> 00:19:49,410
Tính năng này - Tôi thực sự nhìn vào nó -

335
00:19:49,410 --> 00:19:53,940
nó hoặc là bạn không thể làm điều đó hoặc nó được chôn cất một nơi nào đó rất, rất sâu

336
00:19:53,940 --> 00:19:58,050
trong khung trông Facebook bởi vì tôi không thể tìm ra cách để vô hiệu hóa chức năng này ở tất cả.

337
00:19:58,050 --> 00:20:00,400
[Malan] Nhưng đôi khi những quyết định này là không rõ ràng

338
00:20:00,400 --> 00:20:03,890
bởi vì bạn đã cho chúng tôi rất nhiều thông tin phản hồi hữu ích trên CS50 các ứng dụng khác nhau

339
00:20:03,890 --> 00:20:05,710
và các trang web mà khóa học sử dụng.

340
00:20:05,710 --> 00:20:10,260
Chúng tôi đã không được thực hiện tất cả những yêu cầu này và những đề nghị, gợi ý.

341
00:20:10,260 --> 00:20:14,550
>> Một phần trong số đó là để nhận được yêu cầu rất nhiều rằng đó là một hàm của thời gian,

342
00:20:14,550 --> 00:20:17,070
nhưng đôi khi chúng ta chỉ cần thực hiện một quyết định có ý thức như thế,

343
00:20:17,070 --> 00:20:19,830
"Cảm ơn bạn đã gợi ý, nhưng chúng tôi không đồng ý."

344
00:20:19,830 --> 00:20:24,350
Vì vậy, làm thế nào để bạn thực sự quyết định những gì bạn nên làm gì nếu người dùng của bạn nghĩ rằng bạn nên làm điều gì đó

345
00:20:24,350 --> 00:20:28,110
ngay cả khi bạn không nhất thiết phải?

346
00:20:28,110 --> 00:20:32,360
Đó là một sự cân bằng tốt giữa thực sự lắng nghe những gì người dùng của bạn nói

347
00:20:32,360 --> 00:20:35,840
và thực sự có một số loại của dòng mà bạn nói,

348
00:20:35,840 --> 00:20:37,750
"Chúng tôi sẽ không làm những gì những người dùng nói rằng."

349
00:20:37,750 --> 00:20:42,520
Và đặc biệt, tôi nghĩ rằng đã có một trích dẫn nội dung bài viết này bởi Henry Ford rằng khoản tiền này lên khá tốt.

350
00:20:42,520 --> 00:20:47,130
"Nếu tôi yêu cầu mọi người những gì họ muốn, họ sẽ nói rằng họ muốn con ngựa nhanh hơn."

351
00:20:47,130 --> 00:20:51,840
Bất cứ ai có thể sắp xếp trêu chọc ngoài những gì câu rằng thực sự có nghĩa là?

352
00:20:51,840 --> 00:20:56,060
Nó không phải chỉ là người sử dụng biết những gì họ muốn,

353
00:20:56,060 --> 00:20:59,180
nhưng đó là thêm rằng -

354
00:20:59,180 --> 00:21:02,720
[Sinh viên] Họ không biết những gì có thể.

355
00:21:02,720 --> 00:21:06,140
Một phần họ không biết những gì có thể.

356
00:21:07,880 --> 00:21:11,440
Trêu chọc rằng, ngoài hơn một chút. Những gì bạn có nghĩa là bằng cách đó?

357
00:21:11,440 --> 00:21:21,340
[Không nghe được sinh viên phản ứng]

358
00:21:21,340 --> 00:21:25,770
Đó là tốt. Tôi nghĩ rằng chúng tôi đang cố gắng để nói ở đây là mọi người biết những gì họ muốn.

359
00:21:25,770 --> 00:21:28,050
Họ muốn con ngựa nhanh hơn.

360
00:21:28,050 --> 00:21:29,840
Những gì họ thực sự muốn là khả năng di chuyển nhanh hơn,

361
00:21:29,840 --> 00:21:32,310
nhưng họ không thực sự biết các phương tiện để đạt được điều đó.

362
00:21:32,310 --> 00:21:36,330
Khi bạn đến người dùng của bạn và người dùng của bạn nói với bạn điều gì đó

363
00:21:36,330 --> 00:21:39,700
và họ cho bạn biết, "Chúng tôi muốn các tính năng và các tính năng và các tính năng này,"

364
00:21:39,700 --> 00:21:42,650
bạn không nhất thiết phải suy nghĩ về, "Hãy để tôi đi trước

365
00:21:42,650 --> 00:21:44,720
"Và thực hiện những gì họ nói rõ ràng,"

366
00:21:44,720 --> 00:21:48,610
nhưng những gì bạn muốn suy nghĩ về là, "Tôi sắp xếp các ý tưởng có thể nhận được từ đó?"

367
00:21:48,610 --> 00:21:50,450
Những gì họ thực sự muốn?

368
00:21:50,450 --> 00:21:55,560
>> Và từ đó những gì bạn có thể làm là thiết kế một cái gì đó đáp ứng những yêu cầu đó

369
00:21:55,560 --> 00:22:00,340
nhưng không nhất thiết phải theo cách mà người sử dụng mong đợi nó được thỏa mãn.

370
00:22:00,340 --> 00:22:03,830
Vì vậy, đối với một cái gì đó như các dự án cuối cùng, về rất thực tế,

371
00:22:03,830 --> 00:22:07,900
một heuristic hữu ích là những gì khi nói đến làm một cái gì đó tốt hơn,

372
00:22:07,900 --> 00:22:10,630
đặc biệt là nếu thiết kế có kiêu ngạo về anh

373
00:22:10,630 --> 00:22:14,360
nhờ đó mà bạn loại biết những gì tốt nhất, bạn có thể có đầu vào từ người dùng của bạn,

374
00:22:14,360 --> 00:22:16,580
nhưng làm thế nào để bạn thực sự đi về nhận được rằng phản hồi?

375
00:22:16,580 --> 00:22:21,610
Trong các dự án cuối cùng, rất cụ thể, những gì sản xuất kết quả tối ưu ở đây?

376
00:22:21,610 --> 00:22:25,030
Sản xuất kết quả tối ưu - và tôi sẽ đi qua trong một giây -

377
00:22:25,030 --> 00:22:29,190
là quá trình phát triển và sau đó kiểm tra và sau đó lặp lại.

378
00:22:29,190 --> 00:22:32,020
Những gì tôi có nghĩa là bằng cách kiểm tra thường là khi bạn thiết kế một cái gì đó

379
00:22:32,020 --> 00:22:36,970
bạn nghĩ rằng nó khá tốt, giống như, "Tôi là một nhà thiết kế tuyệt vời như vậy. Mọi người đều sẽ thích điều này."

380
00:22:36,970 --> 00:22:41,600
Và sau đó bạn đặt nó ra khỏi đó và mọi người không thực sự thích nó vì một lý do nào đó.

381
00:22:41,600 --> 00:22:46,820
Những gì bạn phải làm là bạn phải mất các bộ phận của những thứ mà mọi người làm như

382
00:22:46,820 --> 00:22:49,180
và cải tạo những điều mà mọi người không thích.

383
00:22:49,180 --> 00:22:53,080
Nghe có vẻ giống như một quá trình rất rõ ràng, nhưng quá trình này liên tục lặp lại

384
00:22:53,080 --> 00:22:55,980
trên đầu trang của những gì bạn đã xây dựng là một quá trình giúp bạn

385
00:22:55,980 --> 00:22:59,730
không chỉ hoàn thiện kỹ năng thiết kế của riêng bạn mà còn giúp bạn tinh chỉnh các thiết kế

386
00:22:59,730 --> 00:23:03,790
để mọi người thực sự đánh giá cao sản phẩm của bạn thậm chí nhiều hơn họ đã làm trước.

387
00:23:03,790 --> 00:23:07,390
>> Tôi sẽ đi qua nhiều ví dụ cụ thể về những gì bạn thực sự có thể làm.

388
00:23:07,390 --> 00:23:11,390
Là loại một ví dụ cuối cùng của một sản phẩm, chúng ta hãy nhìn vào KAYAK.

389
00:23:11,390 --> 00:23:14,970
KAYAK khi nó đến là rất, rất phổ biến.

390
00:23:14,970 --> 00:23:18,760
Bất cứ ai có thể đoán tại sao?

391
00:23:18,760 --> 00:23:20,950
Các loại điều bạn thích về việc này nếu bạn đã sử dụng nó là gì

392
00:23:20,950 --> 00:23:23,990
hoặc các loại những thứ bạn không thích là gì?

393
00:23:23,990 --> 00:23:31,590
Vâng. >> [Không nghe được sinh viên phản ứng] >> Okay.

394
00:23:31,590 --> 00:23:34,730
Đó là một phần của nó cho phép người sử dụng có một truy vấn đó là mở rộng hơn

395
00:23:34,730 --> 00:23:38,150
hơn là một trong rất hạn chế như, "Bạn phải chọn ngày bắt đầu của bạn

396
00:23:38,150 --> 00:23:39,810
"Và bạn phải chọn ngày cuối cùng của bạn."

397
00:23:39,810 --> 00:23:44,910
Trong thực tế, nó cho phép bạn linh hoạt về nó và nó sẽ cho bạn tất cả các chuyến bay trong phạm vi đó.

398
00:23:44,910 --> 00:23:46,730
Bất cứ điều gì khác?

399
00:23:46,730 --> 00:23:50,530
[Sinh viên] Chúng bao gồm các lệ phí trong giá.

400
00:23:50,530 --> 00:23:53,330
Họ bao gồm các lệ phí trong giá.

401
00:23:53,330 --> 00:23:56,720
Các loại thuế và những thứ thực sự đi thẳng vào mức giá mà phía trên bên trái

402
00:23:56,720 --> 00:24:00,710
vì vậy bạn không bị lừa vào suy nghĩ rằng bạn đang thực sự trả tiền cho một chuyến bay 240

403
00:24:00,710 --> 00:24:03,280
khi nó thực sự $ 330.

404
00:24:03,280 --> 00:24:06,200
Bất cứ điều gì khác? Vâng.

405
00:24:06,200 --> 00:24:10,140
[Không nghe được sinh viên phản ứng]

406
00:24:10,140 --> 00:24:14,610
Tôi không chắc chắn nếu họ thực sự cho phép bạn làm điều đó.

407
00:24:14,610 --> 00:24:18,310
Tôi có thể sai.

408
00:24:18,310 --> 00:24:23,360
Đó có thể là một điều thú vị nếu bạn muốn đặt trọng lượng nhiều hơn về các bộ lọc đặc biệt

409
00:24:23,360 --> 00:24:27,000
để họ đẩy các kết quả liên quan đến bộ lọc đó lên trên.

410
00:24:27,000 --> 00:24:31,920
Nhưng bất cứ ai có thể cho tôi biết những gì quá đặc biệt về phía bên trái này?

411
00:24:31,920 --> 00:24:39,540
Làm thế nào mà thông thường bạn có thể tìm kiếm một chuyến bay trên một dịch vụ Internet trước khi điều này?

412
00:24:41,600 --> 00:24:44,650
>> Vâng. >> [Không nghe được sinh viên phản ứng] >> Bạn có thể nói rằng -

413
00:24:44,650 --> 00:24:47,530
[Sinh viên] Mỗi hãng hàng không. >> Yeah. Mỗi hãng hàng không có trang web riêng của mình.

414
00:24:47,530 --> 00:24:50,110
Này củng cố điều này. Và?

415
00:24:50,110 --> 00:24:52,190
[Sinh viên] Bạn biết chính xác những gì bạn đang để lại.

416
00:24:52,190 --> 00:24:54,460
Bạn biết chính xác những gì bạn đang để lại,

417
00:24:54,460 --> 00:24:59,380
nhưng liên quan đến các bộ lọc đặc biệt.

418
00:25:00,710 --> 00:25:03,540
Hãy để tôi kéo lên KAYAK.

419
00:25:11,490 --> 00:25:14,020
Ôi Chúa ơi, pop-up. Bad kinh nghiệm người dùng.

420
00:25:14,020 --> 00:25:17,230
Điều gì sẽ xảy ra khi tôi di chuyển thanh trượt này?

421
00:25:17,230 --> 00:25:21,010
[Sinh viên] Tự động cập nhật. >> [Ong] Tự động cập nhật.

422
00:25:21,010 --> 00:25:23,440
Đó là một cái gì đó là rất quan trọng.

423
00:25:23,440 --> 00:25:25,380
Trước đó, bất cứ khi nào bạn muốn tìm một chuyến bay,

424
00:25:25,380 --> 00:25:28,410
bạn đã phải đặt ở vị trí đầu vào, đầu ra vị trí của bạn, nhấn Search,

425
00:25:28,410 --> 00:25:31,190
nó sẽ xử lý và hiển thị kết quả của bạn.

426
00:25:31,190 --> 00:25:34,120
Nếu bạn muốn thay đổi truy vấn của bạn, bạn sẽ phải bấm lại hai lần,

427
00:25:34,120 --> 00:25:39,770
nhập vào trong một truy vấn mới từ đầu, và sau đó làm điều đó hơn và hơn nữa.

428
00:25:39,770 --> 00:25:43,910
Những điều tốt đẹp về một cái gì đó như thế này là nó sử dụng một điều rất [khó hiểu] ở giữa.

429
00:25:43,910 --> 00:25:46,230
Bất cứ khi nào bạn làm một cái gì đó như thế này, nó bắn một yêu cầu

430
00:25:46,230 --> 00:25:48,420
và nó sẽ trả về cho bạn tất cả các kết quả ngay lập tức.

431
00:25:48,420 --> 00:25:51,680
Này sắp xếp các thông tin phản hồi ngay lập tức là một cái gì đó mà làm KAYAK wildly phổ biến

432
00:25:51,680 --> 00:25:55,910
vì nó thực sự dễ dàng cho tôi chỉ cần thay đổi truy vấn của tôi

433
00:25:55,910 --> 00:25:58,890
và để tìm ra những thứ mà xung quanh một phạm vi cụ thể

434
00:25:58,890 --> 00:26:01,950
mà không cần phải quay trở lại và ra, trở lại và ra, trở lại và ra.

435
00:26:01,950 --> 00:26:05,200
Vì vậy, đây là tất cả mọi thứ bạn muốn suy nghĩ về khi bạn đang thiết kế trang web của bạn.

436
00:26:05,200 --> 00:26:08,930
Làm thế nào tôi có thể làm cho nó rất hiệu quả cho người dùng của tôi phải đi qua bất cứ điều gì họ đang làm việc trên

437
00:26:08,930 --> 00:26:13,010
và để có được mục tiêu cuối cùng của họ càng nhanh càng tốt?

438
00:26:13,010 --> 00:26:16,430
[Malan] Và điểm của Joseph trước đó về người sử dụng không nhất thiết phải biết những gì họ muốn,

439
00:26:16,430 --> 00:26:18,640
dựa trên những gì bạn biết về HTML

440
00:26:18,640 --> 00:26:22,780
và bạn có hộp kiểm tra, các nút radio, các menu lựa chọn, các lĩnh vực đầu vào và như thế,

441
00:26:22,780 --> 00:26:26,140
làm thế nào bạn sẽ thực hiện khái niệm về chọn một thời gian bắt đầu cho một chuyến bay?

442
00:26:26,140 --> 00:26:30,030
>> Bạn sẽ sử dụng các cơ chế giao diện người dùng khác nhau?

443
00:26:30,030 --> 00:26:34,100
Nếu bạn chỉ biết số tiền của HTML đã được dạy trước

444
00:26:34,100 --> 00:26:39,070
và bạn biết các yếu tố đầu vào là các nút radio, hộp kiểm tra, thả xuống, và hộp đầu vào,

445
00:26:39,070 --> 00:26:43,320
sự lựa chọn tự nhiên của bạn sẽ những gì đã được để chọn ngày tháng?

446
00:26:43,320 --> 00:26:48,670
[Sinh viên] đầu vào. >> Đầu vào. Hoặc thậm chí có thể giảm xuống với tất cả các ngày, phải không?

447
00:26:48,670 --> 00:26:53,170
Vì vậy, với cơ chế giao diện người dùng phức tạp hơn như thế này ở phía bên trái mà bạn có thể thực hiện,

448
00:26:53,170 --> 00:26:55,500
bạn có thể làm cho quá trình này trực quan hơn nhiều với một thanh trượt

449
00:26:55,500 --> 00:27:01,020
bởi vì thời gian là liên tục, và người ta thường không nghĩ về nó về những phần rời rạc.

450
00:27:01,020 --> 00:27:04,950
Được rồi. Điều cuối cùng.

451
00:27:04,950 --> 00:27:07,370
Ten khả năng sử dụng công nghệ tự động.

452
00:27:07,370 --> 00:27:10,820
Tất cả những điều chúng tôi nói về có thể thuộc một trong các loại này.

453
00:27:10,820 --> 00:27:14,420
Nếu bạn đi đến liên kết này, các trang web sẽ được đăng trực tuyến,

454
00:27:14,420 --> 00:27:18,900
bạn sẽ thực sự có thể, khi bạn thiết kế trang web của bạn, hãy giữ những chẩn đoán trong tâm trí

455
00:27:18,900 --> 00:27:21,330
và các quy tắc của ngón tay cái.

456
00:27:21,330 --> 00:27:26,610
Đối với các dự án của bạn, những gì tôi đề nghị bạn làm để thiết kế các ứng dụng của bạn tốt hơn

457
00:27:26,610 --> 00:27:28,850
là để làm prototyping giấy đầu tiên.

458
00:27:28,850 --> 00:27:32,150
Khi bạn đang suy nghĩ về ứng dụng của bạn, rất nhanh chóng phác họa những gì bạn muốn nó trông giống như

459
00:27:32,150 --> 00:27:36,230
và chắc chắn rằng tất cả các hộp được sắp xếp theo một cách rất trực quan cho người dùng sử dụng

460
00:27:36,230 --> 00:27:39,820
và thậm chí hiển thị các nguyên mẫu giấy cho bạn bè của bạn và bắt đầu nhóm tập trung.

461
00:27:39,820 --> 00:27:44,230
Chỉ cần có được 2 hoặc 3 người với nhau và yêu cầu họ chỉ cần gõ vào các nguyên mẫu giấy này,

462
00:27:44,230 --> 00:27:47,650
và hiển thị màn hình mới để xem nếu họ thực sự hiểu những gì đang xảy ra.

463
00:27:47,650 --> 00:27:50,680
>> Những gì bạn muốn làm là cung cấp cho họ một nhiệm vụ, thúc đẩy nhiệm vụ đó,

464
00:27:50,680 --> 00:27:53,270
và chỉ cần cung cấp cho họ các ứng dụng và cho phép họ sử dụng nó.

465
00:27:53,270 --> 00:27:56,530
Không cung cấp cho họ hướng dẫn xa hơn.

466
00:27:56,530 --> 00:28:00,920
Bạn muốn thực sự cho họ tương tác với các ứng dụng của bạn trong một cách mà cho phép bạn xem

467
00:28:00,920 --> 00:28:03,870
làm thế nào họ sẽ sử dụng nó nếu bạn không được đứng bên cạnh chúng.

468
00:28:03,870 --> 00:28:05,250
Và đó là rất quan trọng.

469
00:28:05,250 --> 00:28:08,780
Điều đó sẽ cung cấp cho bạn rất nhiều những hiểu biết như là những người nhận được xung quanh những điều đặc biệt

470
00:28:08,780 --> 00:28:10,560
trong một cách mà tôi không có ý định họ?

471
00:28:10,560 --> 00:28:14,680
Được họ sử dụng cơ chế giao diện người dùng cụ thể trên màn hình

472
00:28:14,680 --> 00:28:17,490
trong một cách mà là loại hacky?

473
00:28:17,490 --> 00:28:22,020
Tôi không có ý định cho họ để làm nó theo cách đó.

474
00:28:22,020 --> 00:28:23,940
Và một khi bạn đang thực hiện với điều đó, bạn làm những gì muốn làm?

475
00:28:23,940 --> 00:28:26,010
Đá của bạn thiết kế, phải không?

476
00:28:26,010 --> 00:28:29,600
Những gì bạn muốn làm là bạn muốn để phát triển và sau đó làm cho quá trình trên một lần nữa.

477
00:28:29,600 --> 00:28:32,110
Vì vậy, hiển thị nó cho bạn bè một khi bạn đã phát triển nó, thử nghiệm nó,

478
00:28:32,110 --> 00:28:36,630
phát triển, thử nghiệm, phát triển, thử nghiệm, lặp, và chuyển tiếp.

479
00:28:36,630 --> 00:28:39,720
Thiết kế là một quá trình lặp đi lặp lại trong ý nghĩa này.

480
00:28:39,720 --> 00:28:43,280
Bạn thực sự có để xây dựng một cái gì đó và sau đó nhận ra những điều về nó

481
00:28:43,280 --> 00:28:46,520
mà bạn đã không nhận ra trước và quay trở lại và cải thiện từ đó.

482
00:28:46,520 --> 00:28:50,890
Bây giờ, khi cho phần phát triển, đó là những gì Tommy sẽ chỉ cho bạn sau giờ nghỉ

483
00:28:50,890 --> 00:28:53,220
và làm thế nào bạn có thể có thể thực hiện một cái gì đó giống như tự động hoàn chỉnh

484
00:28:53,220 --> 00:28:56,610
một cách khá đơn giản.

485
00:28:57,440 --> 00:28:59,550
[Malan] Như Tommy thiết lập ở đây, một câu hỏi sau đó.

486
00:28:59,550 --> 00:29:03,780
Rất nhiều của các trang web đầu tiên - và khi Joseph cho biết trang web theo phong cách những năm 1990,

487
00:29:03,780 --> 00:29:07,640
nó đã được triển khai thực hiện mà nếu bạn muốn chọn một thời gian bắt đầu và thời gian kết thúc,

488
00:29:07,640 --> 00:29:10,380
thẳng thắn, trở lại trong ngày và thậm chí trên một số trang web ngày hôm nay,

489
00:29:10,380 --> 00:29:13,220
cách bạn làm điều này là bạn chọn một giờ từ thả xuống,

490
00:29:13,220 --> 00:29:15,910
bạn chọn phút từ thả xuống, có thể bạn chọn AM, PM,

491
00:29:15,910 --> 00:29:17,440
và sau đó bạn làm điều đó thêm 3 lần nữa.

492
00:29:17,440 --> 00:29:19,920
Và như vậy với 6 lần nhấp chuột và có thể di chuyển một số

493
00:29:19,920 --> 00:29:24,000
người dùng của bạn thực sự có thể cung cấp một số loại ngày và / hoặc phạm vi thời gian trong ý nghĩa này.

494
00:29:24,000 --> 00:29:27,920
>> Vì vậy, chắc chắn không tối ưu nhưng cho đến nay chúng ta đã thấy không có khả năng biểu cảm

495
00:29:27,920 --> 00:29:30,330
trong bất kỳ ngôn ngữ, chúng tôi đã làm một cái gì đó hấp dẫn hơn

496
00:29:30,330 --> 00:29:32,620
như thế này thanh trượt thời gian bắt đầu và thời gian kết thúc.

497
00:29:32,620 --> 00:29:36,290
Nhưng nếu bạn nghĩ trở lại tuần 0 khi chúng tôi nói chuyện về Scratch,

498
00:29:36,290 --> 00:29:39,080
có quá không có vật dụng mà chỉ làm những điều nào đó.

499
00:29:39,080 --> 00:29:42,700
Bạn thực sự chỉ có những nguyên tắc cơ bản như các vòng lặp và điều kiện và các loại tương tự.

500
00:29:42,700 --> 00:29:46,910
Vì vậy, loại suy nghĩ rất trừu tượng bây giờ, độc lập của các HTML,

501
00:29:46,910 --> 00:29:51,260
những gì đang thực sự xảy ra với một cái gì đó như thế này thời gian bắt đầu và thanh trượt thời gian kết thúc?

502
00:29:51,260 --> 00:29:54,960
Khi tôi di chuyển con chuột của tôi và tôi bấm vào rằng biểu tượng cà rốt nhỏ ở bên trái

503
00:29:54,960 --> 00:29:59,220
và bắt đầu kéo, lập trình, nó là những gì bạn muốn để có thể thực hiện

504
00:29:59,220 --> 00:30:01,000
để làm cho điều đó xảy ra?

505
00:30:01,000 --> 00:30:04,920
Những câu hỏi, những gì Boolean biểu thức nào bạn muốn để có thể hỏi?

506
00:30:04,920 --> 00:30:06,930
Những gì thực sự đang xảy ra? Sammy?

507
00:30:06,930 --> 00:30:10,080
[Sinh viên] là vị trí của con trỏ? >> Good. Là vị trí của con trỏ?

508
00:30:10,080 --> 00:30:11,970
Đây là một cái gì đó chúng tôi cần phải thể hiện trở lại trong Scratch,

509
00:30:11,970 --> 00:30:14,690
cho dù nó được dựa trên vị trí hoặc thậm chí màu hoặc các loại tương tự.

510
00:30:14,690 --> 00:30:18,410
Bạn có thể nhớ lại bao giờ nên một thời gian ngắn vào hôm thứ Hai đã có tất cả những điều này được gọi là sự kiện

511
00:30:18,410 --> 00:30:22,370
trong thế giới của Web, và do đó, có những thứ như onclick và OnKeyPress

512
00:30:22,370 --> 00:30:25,960
và onkeyup và onmouseover và onmouseout.

513
00:30:25,960 --> 00:30:29,130
Vì vậy, nhận ra rằng ngay cả những điều này chúng tôi đã được cấp trên Web

514
00:30:29,130 --> 00:30:32,190
với các trang web như Facebook và Gmail, ngay cả khi bạn không có ý tưởng

515
00:30:32,190 --> 00:30:34,890
làm thế nào bạn có thể sẽ thực hiện điều đó bởi vì không có gì ngay cả như trong bài giảng

516
00:30:34,890 --> 00:30:38,570
hoặc vấn đề Đặt 7, nhận ra rằng với những nguyên tắc cơ bản cùng chính xác,

517
00:30:38,570 --> 00:30:41,090
với HTTP và các thông số và GET và POST,

518
00:30:41,090 --> 00:30:44,010
với các yếu tố đầu vào HTML cơ bản mà chúng tôi đã nhìn vậy, đến nay

519
00:30:44,010 --> 00:30:47,690
và trong một khoảnh khắc với các cơ chế chương trình của Tommy về để giới thiệu

520
00:30:47,690 --> 00:30:51,300
bạn có thể bắt đầu để thể hiện mình giống như bạn đã làm trong tuần 0

521
00:30:51,300 --> 00:30:53,800
bởi rất trực giác cách kéo và thả.

522
00:30:53,800 --> 00:30:58,950
>> Vì vậy, với mà nói, Tommy MacWilliam và một số mảnh ghép mới cho chúng tôi cho Web.

523
00:30:58,950 --> 00:31:03,450
Được rồi. Tên tôi là Tommy và tôi sẽ nói chuyện về JavaScript.

524
00:31:03,450 --> 00:31:07,150
Chỉ cần một sự từ bỏ: Tôi có ý kiến ​​rằng JavaScript là ngôn ngữ lập trình tốt nhất

525
00:31:07,150 --> 00:31:09,010
trong toàn bộ trên toàn thế giới.

526
00:31:09,010 --> 00:31:11,940
Có rất nhiều người đồng ý với tôi, nhưng nó chỉ là tuyệt vời.

527
00:31:11,940 --> 00:31:16,330
Một khi bạn quay trở lại C, nếu bạn có để viết C cho một lớp học hoặc một số ngôn ngữ khác,

528
00:31:16,330 --> 00:31:19,780
nó chỉ thực sự bực bội trong tất cả các chi tiết ở mức độ thấp, bạn có muốn bị sa lầy.

529
00:31:19,780 --> 00:31:23,050
Vì vậy, nếu bạn đã bao giờ cảm thấy buồn về cách gây phiền nhiễu C là viết,

530
00:31:23,050 --> 00:31:25,130
chỉ cần đi lại, viết một số JavaScript. Đó là Niết bàn.

531
00:31:25,130 --> 00:31:27,980
Bạn sẽ cảm thấy tốt hơn về ngày tồi tệ của bạn.

532
00:31:27,980 --> 00:31:31,900
Rất nhiều sự kỳ diệu của JavaScript xuất phát từ khả năng của mình để thao tác mọi thứ

533
00:31:31,900 --> 00:31:33,730
đang có sẵn trên trang.

534
00:31:33,730 --> 00:31:38,520
Khi chúng tôi viết kịch bản PHP của chúng tôi, họ đã được thực hiện trên máy chủ,

535
00:31:38,520 --> 00:31:42,270
và cuối cùng là PHP script có thể ra một số HTML.

536
00:31:42,270 --> 00:31:45,860
HTML được gửi cho khách hàng, và sau đó đã được nó.

537
00:31:45,860 --> 00:31:50,180
Nếu PHP muốn thêm một nút vào một trang, ví dụ, nó có thể không thực sự làm điều đó.

538
00:31:50,180 --> 00:31:54,350
Nó sẽ phải làm cho toàn bộ tập tin HTML mới và gửi cho trình duyệt.

539
00:31:54,350 --> 00:31:57,840
Với JavaScript chúng tôi biết rằng chúng tôi có thể cập nhật mọi thứ trong khi họ đã có trên trang,

540
00:31:57,840 --> 00:32:00,840
và vì điều này, chúng ta có thể cung cấp nhiều phản hồi ngay lập tức,

541
00:32:00,840 --> 00:32:06,150
mà thực sự sẽ cải thiện trải nghiệm người dùng trên trang web của chúng tôi.

542
00:32:06,150 --> 00:32:09,330
Chỉ cần một bản tóm tắt nhanh chóng của các selectors JavaScript.

543
00:32:09,330 --> 00:32:11,590
Chúng ta biết rằng khi chúng tôi tải về một trang HTML,

544
00:32:11,590 --> 00:32:13,890
đó là sẽ được đại diện trong DOM.

545
00:32:13,890 --> 00:32:19,340
>> DOM nhớ là cây lớn này, nơi yếu tố có liên quan trong hệ thống phân cấp lớn.

546
00:32:19,340 --> 00:32:21,810
Khi chúng tôi làm việc với cơ sở dữ liệu trong pset 7,

547
00:32:21,810 --> 00:32:26,280
một trong những điều đầu tiên chúng ta cần phải biết làm thế nào để làm là truy vấn cơ sở dữ liệu.

548
00:32:26,280 --> 00:32:29,060
Chúng tôi có bảng này người sử dụng lớn, và đôi khi chúng ta chỉ muốn nói,

549
00:32:29,060 --> 00:32:33,260
"Tôi chỉ muốn một số của những người sử dụng phù hợp với một số điều kiện."

550
00:32:33,260 --> 00:32:36,020
Tương tự như vậy, khi chúng ta có DOM, chúng tôi cần một số cách để truy vấn nó.

551
00:32:36,020 --> 00:32:39,490
Chúng tôi cần một số cách nói, "Tôi muốn tất cả các nút giống như thế này

552
00:32:39,490 --> 00:32:41,860
Hoặc tất cả các hình ảnh trên trang. "

553
00:32:41,860 --> 00:32:44,330
Và những selectors cho phép chúng tôi làm điều đó.

554
00:32:44,330 --> 00:32:45,690
Vì vậy, chỉ cần một bản tóm tắt nhanh chóng.

555
00:32:45,690 --> 00:32:50,770
Này đầu tiên ở đây, điều này # gửi, những gì là sẽ chọn? Có ai nhớ?

556
00:32:50,770 --> 00:32:54,880
[Không nghe được sinh viên phản ứng] >> Yeah, chính xác.

557
00:32:54,880 --> 00:32:59,510
Điều này sẽ chọn một phần tử trên trang có một ID của trình.

558
00:32:59,510 --> 00:33:03,470
Và đó tag băm này chọn là sẽ làm việc với ID.

559
00:33:03,470 --> 00:33:07,630
Làm thế nào về điều thứ hai, điều này làm trung tâm, những gì mà sẽ chọn?

560
00:33:11,360 --> 00:33:15,180
Yeah. >> [Sinh viên] Class. >> Chính xác. Này hiện nay được lựa chọn bởi lớp.

561
00:33:15,180 --> 00:33:18,840
Sự khác biệt giữa ID và lớp học ở đây thường là ID phải là duy nhất

562
00:33:18,840 --> 00:33:20,820
trong không gian bất cứ điều gì bạn đang tìm kiếm.

563
00:33:20,820 --> 00:33:23,080
Vì vậy, nếu bạn đang tìm kiếm trên toàn bộ một trang web,

564
00:33:23,080 --> 00:33:27,740
bạn thực sự chỉ cần phải có 1 phần tử với ID nhất định, vì vậy trong trường hợp này của trình.

565
00:33:27,740 --> 00:33:31,330
Với các lớp học, mặt khác, chúng ta có thể có nhiều hơn 1 phần tử trên cùng một trang

566
00:33:31,330 --> 00:33:33,130
với cùng một lớp.

567
00:33:33,130 --> 00:33:36,580
Điều này có thể hữu ích để nói rằng tôi muốn chọn tất cả mọi thứ đó là trung tâm trên trang

568
00:33:36,580 --> 00:33:38,450
thay vì chỉ 1 điều.

569
00:33:38,450 --> 00:33:40,310
>> Và cuối cùng, này cuối cùng ở đây là một chút phức tạp hơn,

570
00:33:40,310 --> 00:33:43,890
nhưng điều này là những gì sẽ chọn từ DOM?

571
00:33:46,650 --> 00:33:48,810
[Sinh viên phản ứng không nghe được] >> đó là gì?

572
00:33:48,810 --> 00:33:53,250
[Sinh viên] Bất cứ điều gì đó là một thẻ. >> Chúng tôi có 2 phần ở đây.

573
00:33:53,250 --> 00:33:58,070
Phần thứ hai sẽ nói tôi muốn chọn các thẻ với một thẻ đầu vào,

574
00:33:58,070 --> 00:34:00,730
do đó, bất kỳ yếu tố đó là một thẻ đầu vào.

575
00:34:00,730 --> 00:34:03,080
Nhưng tôi không muốn chỉ cần chọn tất cả các yếu tố đầu vào

576
00:34:03,080 --> 00:34:05,170
bởi vì một cái gì đó giống như một nút submit có thể là một đầu vào

577
00:34:05,170 --> 00:34:08,409
và một cái gì đó giống như một hộp văn bản có thể là một đầu vào.

578
00:34:08,409 --> 00:34:11,909
Vì vậy, với các dấu ngoặc vuông tôi nói tôi chỉ muốn để lựa chọn những yếu tố

579
00:34:11,909 --> 00:34:14,110
là kiểu của văn bản.

580
00:34:14,110 --> 00:34:17,400
Một nơi nào đó trong thẻ HTML của tôi Tôi có một loại thuộc tính,

581
00:34:17,400 --> 00:34:19,750
và giá trị của thuộc tính đó có được văn bản.

582
00:34:19,750 --> 00:34:21,340
Vì vậy, làm thế nào về điều này một phần đầu tiên ở đây?

583
00:34:21,340 --> 00:34:25,489
Từ đầu tiên của chọn này là hình thức sau đó tôi có một không gian và sau đó điều này một phần đầu vào.

584
00:34:25,489 --> 00:34:29,620
Điều đó không làm gì, đưa hình thức ở phía trước của nó?

585
00:34:33,409 --> 00:34:35,860
Điều này về cơ bản giới hạn truy vấn của chúng tôi.

586
00:34:35,860 --> 00:34:38,510
Nó có thể là trường hợp đó, chúng tôi có một số yếu tố đầu vào trên trang

587
00:34:38,510 --> 00:34:41,080
mà không phải là con cháu của một hình thức.

588
00:34:41,080 --> 00:34:46,150
Điều gì sẽ làm là điều này sẽ nói tôi chỉ muốn đầu vào thẻ mà có một nơi nào đó ở trên chúng

589
00:34:46,150 --> 00:34:49,030
một số yếu tố cha mẹ của một hình thức.

590
00:34:49,030 --> 00:34:52,100
Và do đó, trong cách này chúng ta có thể thực hiện các truy vấn có thứ bậc

591
00:34:52,100 --> 00:34:55,000
nên chúng tôi không chỉ cần chọn tất cả mọi thứ phù hợp với một chọn nhất định.

592
00:34:55,000 --> 00:35:00,760
Chúng tôi có thể loại giới hạn phạm vi truy vấn đến một cái gì đó khác.

593
00:35:00,760 --> 00:35:04,000
Vì vậy, bây giờ mà chúng ta biết làm thế nào để lựa chọn các yếu tố trên trang,

594
00:35:04,000 --> 00:35:06,780
chúng ta hãy nói một chút về AJAX.

595
00:35:06,780 --> 00:35:12,270
AJAX là một từ viết tắt vẫn rất hợp thời trang mà là viết tắt của Asynchronous JavaScript và XML.

596
00:35:12,270 --> 00:35:15,640
Nó chỉ như vậy sẽ xảy ra rằng XML chỉ là một số cách để đại diện cho dữ liệu.

597
00:35:15,640 --> 00:35:20,920
>> Đó là loại phổ biến bị mất trong thời gian gần đây, do đó, X trong AJAX không sử dụng tất cả các thời gian.

598
00:35:20,920 --> 00:35:26,220
Về cơ bản, những gì AJAX cho phép chúng ta làm là làm cho các yêu cầu HTTP

599
00:35:26,220 --> 00:35:28,620
từ bối cảnh của JavaScript.

600
00:35:28,620 --> 00:35:32,310
Khi chúng tôi đang ở trong trình duyệt web của chúng tôi và chúng tôi đang di chuyển quanh trang và chúng tôi bấm vào một liên kết,

601
00:35:32,310 --> 00:35:37,790
những gì trình duyệt của chúng tôi là sẽ làm là thực hiện một yêu cầu HTTP tới bất cứ điều gì liên kết chúng ta click.

602
00:35:37,790 --> 00:35:41,670
Nhưng đó không phải luôn luôn lý tưởng bởi vì nếu đó là trường hợp, sau đó như David đã nói,

603
00:35:41,670 --> 00:35:45,220
chúng ta phải luôn luôn làm cho người dùng bấm vào một nút Submit hoặc nhấp vào liên kết

604
00:35:45,220 --> 00:35:50,380
để làm bất cứ điều gì xảy ra sẽ liên quan đến một yêu cầu HTTP.

605
00:35:50,380 --> 00:35:54,160
Vì vậy, với AJAX, chúng ta có thể thực hiện những yêu cầu trên danh nghĩa của JavaScript.

606
00:35:54,160 --> 00:35:57,020
Điều đó có nghĩa là bất cứ khi nào người dùng tương tác với các trang hoặc bất cứ điều gì xảy ra,

607
00:35:57,020 --> 00:36:01,780
chúng tôi thực sự có thể làm cho một yêu cầu chương trình cho một số tập tin PHP khác trên trang web của chúng tôi

608
00:36:01,780 --> 00:36:06,280
hoặc bất cứ điều gì khác và lấy dữ liệu tập tin đó mà spits ra.

609
00:36:06,280 --> 00:36:09,860
Chúng ta hãy xem xét một ví dụ về AJAX.

610
00:36:09,860 --> 00:36:16,140
Đây là CS50 trang Tài chính của chúng tôi mà hy vọng một số người trong chúng ta đã quen thuộc.

611
00:36:16,140 --> 00:36:21,790
Nếu chúng ta nhìn vào HTML của trang này, chúng ta thấy ở đây mà tôi đã thêm một vài điều,

612
00:36:21,790 --> 00:36:23,820
một trong số đó tôi đã đưa ra hình thức một ID.

613
00:36:23,820 --> 00:36:26,480
Tôi đã nói id = "hình thức trích dẫn nội dung bài viết này".

614
00:36:26,480 --> 00:36:31,910
Tôi đã làm điều này chỉ vì nó sẽ làm cho dễ dàng hơn một chút để lựa chọn từ DOM

615
00:36:31,910 --> 00:36:35,090
kể từ khi tôi chỉ có thể làm một truy vấn rất đơn giản.

616
00:36:35,090 --> 00:36:38,960
Những gì tôi muốn làm ở đây là tôi muốn sửa chữa một số vấn đề với CS50 Tài chính.

617
00:36:38,960 --> 00:36:41,550
Vì vậy, nếu chúng ta đi finance.cs50.net,

618
00:36:41,550 --> 00:36:45,700
mỗi khi tôi muốn để có được một báo giá, tôi phải nhấp vào nút này Trích dẫn Get,

619
00:36:45,700 --> 00:36:48,960
và đó Trích nút sau đó đưa tôi đến một trang khác.

620
00:36:48,960 --> 00:36:52,400
Và nếu tôi muốn trích dẫn nội dung bài viết khác, tôi phải nhấn nút Back và sau đó tôi gõ vào,

621
00:36:52,400 --> 00:36:54,480
Tôi nhận được một báo giá, và tôi nhấn nút Back.

622
00:36:54,480 --> 00:36:56,840
Điều này thực sự không phải là kinh nghiệm người dùng tốt nhất.

623
00:36:56,840 --> 00:37:01,570
Ai thực sự sẽ sử dụng trang web nếu nó có làm chậm, để có được giá cổ phiếu?

624
00:37:01,570 --> 00:37:05,630
Vì vậy, những gì chúng tôi muốn làm với AJAX là loại bỏ bước đi đến một trang riêng biệt

625
00:37:05,630 --> 00:37:08,410
để xem kết quả.

626
00:37:08,410 --> 00:37:11,240
>> Những gì chúng tôi đang thực sự chỉ yêu cầu là giá thực sự nhỏ,

627
00:37:11,240 --> 00:37:14,240
và đó là chỉ là một lượng nhỏ dữ liệu.

628
00:37:14,240 --> 00:37:17,400
Vì vậy, không cần cho tôi đi cả một trang HTML,

629
00:37:17,400 --> 00:37:20,670
tải về toàn bộ một lô mới của HTML, có thể tải về hình ảnh một số chi tiết,

630
00:37:20,670 --> 00:37:24,410
một số file CSS khác cho tôi để trả lời câu hỏi rất đơn giản

631
00:37:24,410 --> 00:37:27,810
bao nhiêu chi phí này chứng khoán.

632
00:37:27,810 --> 00:37:31,000
Với Ajax, chúng ta có thể làm điều này dễ dàng hơn nhiều.

633
00:37:31,000 --> 00:37:36,400
Chúng ta thấy ở đây mà tôi đang liên kết trong một tập tin JavaScript được gọi là quote.js.

634
00:37:36,400 --> 00:37:40,140
Hãy để thực sự mở tập tin đó. Không có.

635
00:37:42,610 --> 00:37:45,860
Tất cả các tập tin của tôi JavaScript sẽ được đặt trong HTML

636
00:37:45,860 --> 00:37:47,630
để trình duyệt web có thể truy cập nó.

637
00:37:47,630 --> 00:37:50,330
Sau đó, chúng tôi có một thư mục riêng biệt ở đây cho JavaScript,

638
00:37:50,330 --> 00:37:54,340
và bây giờ ở đây là quote.js.

639
00:37:54,340 --> 00:38:00,930
Ở phía trên của tập tin này nói ở đây mà tôi muốn chờ đợi cho toàn bộ trang được nạp

640
00:38:00,930 --> 00:38:04,830
trước khi tôi cố gắng làm bất cứ điều gì. Tại sao là cần thiết?

641
00:38:04,830 --> 00:38:08,650
Nó chỉ ra rằng điều tiếp theo tôi sẽ làm ở đây là bắt đầu tìm kiếm một phần tử

642
00:38:08,650 --> 00:38:10,810
phù hợp với một số chọn.

643
00:38:10,810 --> 00:38:15,600
Nếu JavaScript này là bao giờ được thực hiện trước khi yếu tố này được tải trên trang,

644
00:38:15,600 --> 00:38:17,820
sau đó tất cả những gì tôi cố gắng làm là sẽ không làm việc

645
00:38:17,820 --> 00:38:20,580
bởi vì tôi sẽ cố gắng chọn cái gì đó là không có được nêu.

646
00:38:20,580 --> 00:38:23,780
Vì vậy, dòng này lên hàng đầu nói rằng tôi muốn bạn phải chờ đợi cho đến khi tất cả mọi thứ được tải

647
00:38:23,780 --> 00:38:28,030
vì vậy chúng tôi đảm bảo rằng bất kỳ yếu tố tôi đang tìm kiếm thực sự trên trang.

648
00:38:29,730 --> 00:38:34,310
Ký hiệu đô la này ở đây có nghĩa là tôi đang sử dụng các thư viện được gọi là jQuery.

649
00:38:34,310 --> 00:38:38,570
Thư viện jQuery cho phép chúng ta sử dụng các chọn mà chúng ta chỉ cần nhìn vào.

650
00:38:38,570 --> 00:38:44,010
Bằng cách nói $ sau đó đi qua trong như một tham số hình thức trích dẫn nội dung bài viết,

651
00:38:44,010 --> 00:38:47,910
Tôi bây giờ lựa chọn hình thức đó mà chúng tôi chỉ đã xem xét.

652
00:38:47,910 --> 00:38:52,290
Bây giờ tôi có một đại diện của hình thành trong bộ nhớ bằng cách nào đó.

653
00:38:52,290 --> 00:38:56,760
>> Mở đối tượng này bây giờ, đại diện của biểu mẫu,

654
00:38:56,760 --> 00:38:58,890
Tôi bây giờ bằng cách sử dụng một chức năng gọi là.

655
00:38:58,890 --> 00:39:02,710
Chức năng này là nó sẽ đính kèm một xử lý sự kiện.

656
00:39:02,710 --> 00:39:06,310
Sự kiện mà chúng tôi đang đi để lắng nghe cho là sự kiện submit.

657
00:39:06,310 --> 00:39:08,890
Vì vậy, khi người dùng nhấp nút Submit hoặc ép Enter,

658
00:39:08,890 --> 00:39:11,730
sự kiện này sẽ để cháy.

659
00:39:11,730 --> 00:39:16,390
Bằng cách hooking vào điều này, bây giờ tôi có thể ghi đè lên hành vi mặc định của biểu mẫu.

660
00:39:16,390 --> 00:39:19,770
Nếu không có JavaScript này, hình thức trình PHP tập tin bất cứ điều gì

661
00:39:19,770 --> 00:39:22,110
chúng tôi sử dụng trong thuộc tính hành động.

662
00:39:22,110 --> 00:39:25,440
Nhưng thay vào đó, tôi là bây giờ nói rằng, chờ đợi, chờ đợi, chờ đợi, tôi không muốn bạn thực sự làm điều đó.

663
00:39:25,440 --> 00:39:31,140
Tôi muốn điều này xảy ra trước khi bạn đi và cố gắng trình một số tập tin PHP.

664
00:39:31,140 --> 00:39:32,870
Bây giờ tôi muốn làm những gì?

665
00:39:32,870 --> 00:39:39,270
Tại thời điểm này, tôi muốn sử dụng AJAX bằng cách nào đó để nạp vào giá của cổ phiếu.

666
00:39:39,270 --> 00:39:44,170
Điều đầu tiên tôi cần phải biết là cổ phiếu những gì người dùng đang tìm kiếm.

667
00:39:44,170 --> 00:39:46,760
Để làm điều đó tôi sẽ sử dụng một chọn.

668
00:39:46,760 --> 00:39:49,020
Đây là chọn thứ ba chúng tôi nhìn trước.

669
00:39:49,020 --> 00:39:54,460
Điều này nói rằng tôi muốn bắt đầu yếu tố hình thức này với một ID hình thức của báo.

670
00:39:54,460 --> 00:39:58,440
Sau đó, một nơi nào đó bên trong của hình thức đó có phải là một yếu tố đầu vào

671
00:39:58,440 --> 00:40:01,270
có một cái tên biểu tượng.

672
00:40:01,270 --> 00:40:05,460
Nếu chúng ta nhìn lại HTML của chúng tôi, chúng tôi thấy rằng chúng tôi đã có một đầu vào [name = biểu tượng].

673
00:40:05,460 --> 00:40:12,380
Điều đó có nghĩa rằng điều này là để chọn hộp văn bản mà người dùng gõ vào.

674
00:40:12,380 --> 00:40:13,870
Đó là tốt đẹp. Chúng tôi đã có một hộp văn bản.

675
00:40:13,870 --> 00:40:17,360
Bây giờ chúng ta chỉ cần biết những gì bên trong của nó.

676
00:40:17,360 --> 00:40:20,290
Để làm điều đó chúng ta có thể gọi phương thức này ở đây, val.

677
00:40:20,290 --> 00:40:23,240
và điều này nói tôi biết hộp văn bản mà bạn có.

678
00:40:23,240 --> 00:40:28,160
Tôi muốn bạn cho tôi biết những gì nó là người dùng gõ vào hộp văn bản đó.

679
00:40:28,160 --> 00:40:34,440
Bây giờ chúng ta có một chuỗi biểu tượng đó bằng bất cứ điều gì người dùng gõ vào.

680
00:40:34,440 --> 00:40:39,820
Đó là tốt đẹp. Chúng ta có thể sử dụng chuỗi để thực hiện yêu cầu của chúng tôi.

681
00:40:39,820 --> 00:40:42,450
Đây là một chức năng mới đây, điều này,

682
00:40:42,450 --> 00:40:44,900
ngoại trừ chúng ta không còn sẽ được lựa chọn các yếu tố,

683
00:40:44,900 --> 00:40:48,910
chúng ta sẽ được gọi một chức năng khác nhau đó là cung cấp cho chúng tôi bởi jQuery.

684
00:40:48,910 --> 00:40:54,810
Chức năng này AJAX là những gì thực sự sẽ làm cho yêu cầu HTTP này.

685
00:40:54,810 --> 00:40:57,000
Vì vậy, chúng ta phải nói cho nó một vài điều.

686
00:40:57,000 --> 00:41:01,410
Điều đầu tiên chúng ta phải nói cho chức năng này là nơi tôi muốn yêu cầu để đi.

687
00:41:01,410 --> 00:41:08,910
Một nơi nào đó trong dự án của tôi, tôi có tập tin bên trong thư mục HTML được gọi là quote.php.

688
00:41:08,910 --> 00:41:15,150
Tôi có thể truy cập tập tin này, chúng ta đã thấy, chỉ như thế này, nếu tôi đi đến localhost / quote.php.

689
00:41:15,150 --> 00:41:20,450
>> Tôi muốn JavaScript của tôi để thực hiện một yêu cầu đến trang đó.

690
00:41:20,450 --> 00:41:22,920
Loại yêu cầu bây giờ?

691
00:41:22,920 --> 00:41:27,210
Chúng tôi đã thấy trước đó, hình thức đã có method = "post" thuộc tính,

692
00:41:27,210 --> 00:41:29,270
và điều đó có nghĩa là nó sẽ làm cho một yêu cầu POST,

693
00:41:29,270 --> 00:41:32,630
do đó, nó sẽ không đặt bất cứ điều gì trong URL, chứ không phải là một yêu cầu GET,

694
00:41:32,630 --> 00:41:36,860
mà chỉ cần sẽ bị sa thải nếu chúng ta chỉ cần truy cập trang web với các trình duyệt web, ví dụ.

695
00:41:36,860 --> 00:41:41,260
Bây giờ chúng tôi đã nói rằng tôi muốn thực hiện một yêu cầu HTTP POST

696
00:41:41,260 --> 00:41:44,840
đến một trang nằm ở quote.php.

697
00:41:44,840 --> 00:41:51,490
Khi chúng tôi gửi biểu mẫu, nhớ là chúng tôi có thể truy cập vào các yếu tố đầu vào bên trong hình thành

698
00:41:51,490 --> 00:41:54,430
với biến $ _POST.

699
00:41:54,430 --> 00:41:58,710
Cho đến nay, trong câu chuyện, chúng tôi đã không thực sự được gửi theo bất kỳ dữ liệu nào.

700
00:41:58,710 --> 00:42:00,640
Chúng tôi đã nói rằng chúng tôi đang làm cho một yêu cầu AJAX

701
00:42:00,640 --> 00:42:03,200
và đây là kiểu yêu cầu chúng tôi đang làm.

702
00:42:03,200 --> 00:42:07,090
Bây giờ chúng ta cần phải thực sự gửi một số dữ liệu vào trang.

703
00:42:07,090 --> 00:42:10,930
Để làm điều đó chúng ta có thể sử dụng tài sản này được gọi là dữ liệu.

704
00:42:10,930 --> 00:42:14,950
Giá trị của tài sản này thực sự là một mảng kết hợp.

705
00:42:14,950 --> 00:42:19,390
Lý do cho việc này là nó cho phép chúng tôi gửi cho hơn 1 chỉ mảnh dữ liệu.

706
00:42:19,390 --> 00:42:24,750
Đó là lý do tại sao chúng tôi có những dấu ngoặc nhọn ở đây lồng vào bên trong các dấu ngoặc nhọn khác.

707
00:42:24,750 --> 00:42:29,680
Các phím trong các mảng kết hợp này sẽ được điều tương tự

708
00:42:29,680 --> 00:42:32,630
như tên các thuộc tính đó trong các yếu tố hình thức của chúng tôi.

709
00:42:32,630 --> 00:42:35,740
Điều đó có nghĩa là nếu tôi gửi cùng một phím biểu tượng,

710
00:42:35,740 --> 00:42:41,870
điều đó có nghĩa là trang PHP của tôi có thể truy cập dữ liệu này với $ _POST [biểu tượng]

711
00:42:41,870 --> 00:42:44,640
giống như chúng ta đã làm trước khi chúng tôi gửi một hình thức.

712
00:42:44,640 --> 00:42:47,090
Và bây giờ dữ liệu thực tế, chúng tôi muốn gửi

713
00:42:47,090 --> 00:42:50,790
là có được bên trong giá trị của mảng kết hợp này.

714
00:42:50,790 --> 00:42:54,070
>> Chúng tôi lưu trữ văn bản trong một biểu tượng được gọi là biến,

715
00:42:54,070 --> 00:42:57,380
và vì vậy chúng tôi đang gửi cùng một phím biểu tượng

716
00:42:57,380 --> 00:43:01,380
và một giá trị của bất cứ điều gì người dùng gõ vào.

717
00:43:01,380 --> 00:43:06,270
Bây giờ chúng tôi đã thực hiện yêu cầu này HTTP, file PHP của chúng tôi đã thực hiện,

718
00:43:06,270 --> 00:43:11,480
và nó sẽ gửi một số dữ liệu trở lại cho khách hàng chỉ cần thực hiện yêu cầu này.

719
00:43:11,480 --> 00:43:15,220
Bây giờ chúng ta cần phải trả lời bất cứ điều gì các máy chủ nói với chúng tôi.

720
00:43:15,220 --> 00:43:20,180
Để làm điều đó chúng tôi có tài sản cuối cùng ở đây thành công được gọi là.

721
00:43:20,180 --> 00:43:24,240
Giá trị của khóa này thành công thực sự sẽ là một chức năng,

722
00:43:24,240 --> 00:43:26,910
và đây là một trong những điều thực sự mát mẻ, bạn có thể làm với JavaScript.

723
00:43:26,910 --> 00:43:31,720
Không chỉ bạn có thể có ints hoặc mảng như bên trong có một giá trị của một mảng kết hợp,

724
00:43:31,720 --> 00:43:34,170
chúng ta cũng có thể có một chức năng.

725
00:43:34,170 --> 00:43:36,380
Vì vậy, bằng cách nói rằng thành công, đây là chìa khóa của tôi.

726
00:43:36,380 --> 00:43:38,830
Một dấu nói ở đây có giá trị,

727
00:43:38,830 --> 00:43:41,810
và bây giờ giá trị của điều này thực sự là một chức năng.

728
00:43:41,810 --> 00:43:44,460
Vì vậy, chúng ta không cần phải cung cấp chức năng này một tên cho mỗi gia nhập.

729
00:43:44,460 --> 00:43:48,820
Chúng tôi chỉ có thể nói điều này là có được một số chức năng. Nó sẽ để có 1 đối số.

730
00:43:48,820 --> 00:43:51,190
Đối số cho chức năng này là có được

731
00:43:51,190 --> 00:43:54,460
bất cứ máy chủ gửi cho chúng tôi trở lại từ yêu cầu.

732
00:43:54,460 --> 00:43:57,750
Cũng giống như khi trình duyệt của chúng tôi làm cho một yêu cầu, máy chủ sẽ gửi một cái gì đó trở lại

733
00:43:57,750 --> 00:43:59,060
và trình duyệt hiển thị nó,

734
00:43:59,060 --> 00:44:03,030
trong bối cảnh của AJAX, chúng ta chỉ cần thực hiện một yêu cầu, máy chủ gửi một cái gì đó trở lại,

735
00:44:03,030 --> 00:44:07,110
và bây giờ chúng tôi đã là đại diện như một chuỗi.

736
00:44:07,110 --> 00:44:11,280
Với chuỗi mà tôi chỉ muốn hiển thị trên trang.

737
00:44:11,280 --> 00:44:14,040
Để làm điều đó tôi sẽ có một chọn cuối cùng.

738
00:44:14,040 --> 00:44:17,570
Tôi muốn chọn các phần tử với giá ID.

739
00:44:17,570 --> 00:44:20,710
Đây chỉ là một div trống mà tôi đã tạo trên trang,

740
00:44:20,710 --> 00:44:26,640
và tôi muốn thiết lập các nội dung của div đó là bất cứ điều gì các máy chủ gửi cho chúng tôi trở lại.

741
00:44:26,640 --> 00:44:30,280
Tôi đã thực sự thay đổi quote.php một chút.

742
00:44:30,280 --> 00:44:33,460
>> Thay vì gọi vẽ lại và vẽ một số trang,

743
00:44:33,460 --> 00:44:38,100
quote.php bây giờ chỉ đơn giản là để in ra các giá trị của cổ phiếu như là một chuỗi.

744
00:44:38,100 --> 00:44:41,880
Vì vậy, nếu bạn thực sự truy cập vào trang, bạn sẽ chỉ thấy rằng chuỗi nhỏ

745
00:44:41,880 --> 00:44:45,030
bất cứ giá cổ phiếu.

746
00:44:45,030 --> 00:44:50,170
Một điều cuối cùng chúng ta cần phải làm ở đây là chỉ cần đảm bảo chức năng này trả về false.

747
00:44:50,170 --> 00:44:53,560
Điều này nói rằng nếu tôi là bên trong của một xử lý sự kiện

748
00:44:53,560 --> 00:44:57,300
và xử lý sự kiện trả về false thay vì trở về đúng,

749
00:44:57,300 --> 00:45:01,510
điều đó có nghĩa rằng tôi không muốn sự kiện ban đầu để bắn.

750
00:45:01,510 --> 00:45:05,270
Trong trường hợp này, nếu chúng tôi không có bất kỳ mã JavaScript nào và chúng tôi gửi một hình thức,

751
00:45:05,270 --> 00:45:08,280
trình duyệt web của chúng tôi sẽ nói, "Tôi sẽ gửi dữ liệu đó cùng,"

752
00:45:08,280 --> 00:45:10,130
và chúng tôi sẽ gửi cho bạn đến một trang khác.

753
00:45:10,130 --> 00:45:14,360
Bởi vì chúng ta đang sử dụng AJAX bây giờ, không có nhu cầu gửi người dùng đến một trang khác.

754
00:45:14,360 --> 00:45:17,920
Chúng tôi chỉ cần đi để hiển thị các kết quả tự động trên cùng một trang.

755
00:45:17,920 --> 00:45:21,460
Chúng tôi thực sự không muốn họ đi bất cứ nơi nào, và tôi muốn ở lại trên cùng một trang.

756
00:45:21,460 --> 00:45:27,060
Vì vậy, bằng cách trở về sai, chúng tôi đảm bảo rằng hình thức không làm điều đó cho chúng ta.

757
00:45:27,060 --> 00:45:31,170
Chúng ta hãy nhìn vào những gì thực sự trông như.

758
00:45:31,170 --> 00:45:34,180
Trang báo của chúng tôi trông giống nhau.

759
00:45:34,180 --> 00:45:37,240
Hãy để tôi kéo lên thanh tra xuống đây để chúng ta có thể xem những gì đang xảy ra.

760
00:45:37,240 --> 00:45:40,270
Làm cho nó một chút ít rất lớn.

761
00:45:40,270 --> 00:45:44,590
Hãy nhớ nếu chúng ta mở tab Network, đây là nơi chúng ta có thể thấy tất cả các yêu cầu HTTP

762
00:45:44,590 --> 00:45:47,570
đang xảy ra trên trang.

763
00:45:47,570 --> 00:45:52,890
>> Đối với một biểu tượng cho tôi gõ AAPL và nhấn Get Quote.

764
00:45:52,890 --> 00:45:56,720
Bây giờ chúng ta đã thấy được rằng phần của Apple chi phí một số số lượng đô la

765
00:45:56,720 --> 00:46:00,410
chỉ xuất hiện trên trang web, nhưng URL không thay đổi ở tất cả.

766
00:46:00,410 --> 00:46:04,570
Trong thực tế, đây là yêu cầu HTTP mà chúng ta chỉ cần thực hiện.

767
00:46:04,570 --> 00:46:09,980
Chúng tôi đã thực hiện một yêu cầu POST đến quote.php. Điều đó làm cho ý nghĩa.

768
00:46:09,980 --> 00:46:12,800
Đây là những gì các máy chủ gửi cho chúng tôi trở lại.

769
00:46:12,800 --> 00:46:16,320
Nó không còn là tài liệu HTML khổng lồ với hình ảnh và những thứ như thế,

770
00:46:16,320 --> 00:46:20,920
nó chỉ là một dòng văn bản, và sau đó chúng tôi chỉ hiển thị dòng văn bản.

771
00:46:20,920 --> 00:46:26,290
Nếu chúng ta trở lại để các tiêu đề và xem những gì chúng tôi thực sự được gửi bên trong yêu cầu HTTP này,

772
00:46:26,290 --> 00:46:33,950
chúng ta có thể thấy ở đây là chúng ta gửi cùng một phím biểu tượng và giá trị của AAPL,

773
00:46:33,950 --> 00:46:36,430
đó là những gì người dùng gõ vào.

774
00:46:36,430 --> 00:46:39,230
Điều này là tốt đẹp, nhưng nó vẫn còn một chút khó chịu.

775
00:46:39,230 --> 00:46:42,490
Tôi vẫn phải nhấp vào nút này để có được giá cổ phiếu.

776
00:46:42,490 --> 00:46:45,880
Chúng tôi là những người bận rộn và chúng tôi không có thời gian để các nút bấm.

777
00:46:45,880 --> 00:46:49,910
Google nhận ra điều này một chút trong khi trước đây khi họ thực hiện Google Instant.

778
00:46:49,910 --> 00:46:53,590
Google Instant là khi bạn đang gõ nó chỉ bắt đầu hiển thị kết quả cho bạn

779
00:46:53,590 --> 00:46:56,520
vì vậy bạn không phải lo lắng về thậm chí cách nhấn Tìm kiếm.

780
00:46:56,520 --> 00:46:58,730
Trên thực tế, một câu chuyện thú vị liên quan đến điều đó.

781
00:46:58,730 --> 00:47:01,100
Một khi Google Instant ra, mọi người giống như, "Whoa, điều này là siêu tuyệt vời".

782
00:47:01,100 --> 00:47:02,540
"Đây là mát mẻ như vậy."

783
00:47:02,540 --> 00:47:05,950
Và một sinh viên tại Đại học Stanford 19 vào thời điểm đó

784
00:47:05,950 --> 00:47:09,000
thực hiện trang web này được gọi là YouTube tức thì.

785
00:47:09,000 --> 00:47:13,170
Tất cả tức thì YouTube không hiệu quả tìm kiếm YouTube ngay lập tức.

786
00:47:13,170 --> 00:47:17,020
Vì vậy, thay vì phải đi để YouTube.com và nhấn Tìm kiếm,

787
00:47:17,020 --> 00:47:21,650
khi tôi bắt đầu gõ vào một cái gì đó tức thì YouTube như CS50,

788
00:47:21,650 --> 00:47:25,320
chúng ta có thể thấy ở đây là nó cố gắng trên một kết nối Internet chậm

789
00:47:25,320 --> 00:47:28,500
cư những kết quả này sinh sống.

790
00:47:28,500 --> 00:47:35,590
Để làm điều đó chúng tôi thực sự có thể làm cho một sửa đổi tập tin quote.js của chúng tôi rất đơn giản để.

791
00:47:35,590 --> 00:47:40,900
Ngay bây giờ chúng tôi đang gắn sự kiện này khi biểu mẫu được gửi.

792
00:47:40,900 --> 00:47:43,760
Chúng tôi không thực sự muốn làm cho người sử dụng gửi rằng hình thức nữa,

793
00:47:43,760 --> 00:47:48,570
vì vậy chúng ta hãy thay vì cháy sự kiện này mỗi khi người dùng nhấn một phím.

794
00:47:48,570 --> 00:47:53,200
Để làm được điều đó trước tiên hãy thay đổi các sự kiện từ trình KeyUp.

795
00:47:53,200 --> 00:47:55,740
Điều đó có nghĩa là thay vì chờ đợi đối với hình thức nộp,

796
00:47:55,740 --> 00:47:58,490
mỗi phím được nhấn, một cái gì đó sẽ xảy ra.

797
00:47:58,490 --> 00:48:02,030
Nó không còn làm cho tinh thần để đính kèm sự kiện KeyUp cả các hình thức.

798
00:48:02,030 --> 00:48:05,080
Chúng tôi thực sự chỉ quan tâm về điều đó hộp tìm kiếm.

799
00:48:05,080 --> 00:48:09,320
>> Để chọn mà bây giờ, chúng ta có thể thay đổi điều này để có, chứ không phải quote hình thức,

800
00:48:09,320 --> 00:48:14,220
hình thức trích dẫn nội dung bài viết này và chúng tôi sẽ có một đầu vào (gõ = text) hoặc chúng ta có thể nói (tên = biểu tượng) -

801
00:48:14,220 --> 00:48:16,420
bất cứ điều gì chúng ta muốn.

802
00:48:16,420 --> 00:48:18,650
Bây giờ có một điều cuối cùng chúng ta phải làm.

803
00:48:18,650 --> 00:48:21,190
Ghi xuống đây khi chúng ta nói return false

804
00:48:21,190 --> 00:48:24,370
chúng tôi nói rằng chúng tôi không muốn sự kiện mặc định để bắn.

805
00:48:24,370 --> 00:48:26,390
Nhưng nó chỉ như vậy sẽ xảy ra rằng nếu chúng ta vô hiệu hóa mà bây giờ,

806
00:48:26,390 --> 00:48:29,660
bất cứ điều gì chúng tôi nhập vào sẽ không hiển thị trong trình duyệt nữa

807
00:48:29,660 --> 00:48:33,000
vì đó sẽ là hành vi mặc định cách gõ vào một hộp văn bản.

808
00:48:33,000 --> 00:48:38,660
Chúng tôi không còn muốn ghi đè lên đó, vì vậy chúng ta hãy phá hủy return false.

809
00:48:38,660 --> 00:48:44,800
Nếu chúng ta lưu và tải lại trang, bây giờ khi tôi bắt đầu gõ AAPL

810
00:48:44,800 --> 00:48:50,160
bạn sẽ thấy rằng giá cổ phiếu ở dưới cùng ở đây được hoàn thành tự động.

811
00:48:50,160 --> 00:48:53,150
Vì vậy, đây là CS50 Tài chính tức thì.

812
00:48:53,150 --> 00:48:55,860
Thực sự là một câu chuyện thú vị về YouTube Instant

813
00:48:55,860 --> 00:48:59,420
đó là sinh viên chỉ cần loại đã viết nó như một dự án 1-đêm,

814
00:48:59,420 --> 00:49:03,800
và ngày hôm sau ông được cung cấp một công việc Giám đốc điều hành YouTube.

815
00:49:03,800 --> 00:49:10,610
Vì vậy, đơn giản như vậy, bạn CS50 sinh viên, các dự án cuối cùng của bạn có thể giúp bạn có được một công việc tại YouTube.

816
00:49:10,610 --> 00:49:14,720
Một cái gì đó như thế là một ý tưởng thực sự mát mẻ cho một dự án cuối cùng, phải không?

817
00:49:14,720 --> 00:49:18,170
Chúng tôi đã có một số chức năng hiện có mà chúng tôi muốn để tích hợp với.

818
00:49:18,170 --> 00:49:20,330
Chúng tôi cải thiện trải nghiệm người dùng một chút,

819
00:49:20,330 --> 00:49:24,340
và đột nhiên tìm kiếm một cái gì đó trên YouTube Instant có thể là một dễ dàng hơn rất nhiều

820
00:49:24,340 --> 00:49:27,290
hơn so với tìm kiếm nó trên YouTube thường xuyên.

821
00:49:27,290 --> 00:49:30,790
Vì vậy, đó là AJAX trong một nutshell.

822
00:49:30,790 --> 00:49:34,860
>> Trong các ví dụ mà Joseph đã được hiển thị, chúng tôi thấy rất nhiều autocompletes,

823
00:49:34,860 --> 00:49:39,250
và những autocompletes thực sự, thực sự tiện dụng bởi vì chúng ta không phải nhớ

824
00:49:39,250 --> 00:49:41,770
Ví dụ, nếu bạn không nhớ giá cổ phiếu của Apple

825
00:49:41,770 --> 00:49:45,110
và chúng tôi chỉ biết đó là aa một cái gì đó, chứ không phải chỉ nói với tôi,

826
00:49:45,110 --> 00:49:48,740
"Một phần của điều này chi phí nhiều tiền như vậy",

827
00:49:48,740 --> 00:49:52,540
Tôi muốn biết những gì cổ phiếu bắt đầu với aa.

828
00:49:52,540 --> 00:49:58,340
Chúng ta có thể làm điều đó thực sự độc đáo với các thư viện Bootstrap đã được bao gồm

829
00:49:58,340 --> 00:50:01,380
trong CS50 Tài chính.

830
00:50:01,380 --> 00:50:09,390
Nếu bạn đến đây để thẻ JavaScript và di chuyển xuống Typeahead,

831
00:50:09,390 --> 00:50:13,730
điều này chỉ là một plugin tốt đẹp mà ai đó đã viết cho chúng tôi,

832
00:50:13,730 --> 00:50:16,980
và chúng tôi có thể dễ dàng sử dụng chức năng của nó như thế này.

833
00:50:16,980 --> 00:50:21,410
Tôi gõ vào A và đây là danh sách của một số tiểu bang bắt đầu với A.

834
00:50:21,410 --> 00:50:25,360
Hãy nói rằng tôi nghĩ rằng đây là thực sự mát mẻ và đó là thời gian cho tôi để bao gồm này trên trang của mình.

835
00:50:25,360 --> 00:50:28,300
Nó chỉ ra rằng điều này là thực sự, thực sự đơn giản.

836
00:50:28,300 --> 00:50:32,810
Hãy để nhảy qua đây để quote3.js.

837
00:50:34,890 --> 00:50:37,380
Tập tin của tôi trông khác nhau một chút.

838
00:50:37,380 --> 00:50:39,700
Xuống đây tất cả các công cụ AJAX của tôi là như nhau.

839
00:50:39,700 --> 00:50:43,170
Tôi muốn tải các dữ liệu chứng khoán mà không cần phải đi đến một trang khác.

840
00:50:43,170 --> 00:50:46,220
Nhưng bây giờ tôi muốn sử dụng plugin này.

841
00:50:46,220 --> 00:50:51,020
Các tài liệu Bootstrap có ví dụ tuyệt vời của chính xác làm thế nào tôi có thể làm điều đó.

842
00:50:51,020 --> 00:50:54,350
Tôi muốn nói, "Đây là đầu vào mà tôi muốn tự động hoàn chỉnh trên,"

843
00:50:54,350 --> 00:50:56,640
và tôi sẽ gọi chức năng này được gọi là typeahead,

844
00:50:56,640 --> 00:50:59,730
và đó sẽ xử lý tất cả các công cụ Typeahead cho chúng tôi.

845
00:50:59,730 --> 00:51:02,090
Nó sẽ khởi tạo danh sách, nó sẽ làm tất cả lọc của chúng tôi.

846
00:51:02,090 --> 00:51:06,680
Điều duy nhất nó cần phải biết những dữ liệu chúng tôi đang autocompleting trên.

847
00:51:06,680 --> 00:51:10,480
Vì vậy, tôi phát hiện ra chìa khóa này chỉ bằng cách đọc các tài liệu và tìm kiếm các ví dụ.

848
00:51:10,480 --> 00:51:14,150
Nếu tôi cung cấp cho nó một phím nguồn, giá trị của khóa này

849
00:51:14,150 --> 00:51:17,770
chỉ là một số mảng của những điều tôi muốn tự động hoàn chỉnh.

850
00:51:17,770 --> 00:51:20,180
Biến này đến từ tập tin khác.

851
00:51:20,180 --> 00:51:23,400
Tôi mở symbols.js.

852
00:51:23,400 --> 00:51:27,980
>> Symbols.js Đây chỉ là mảng này thực sự, thực sự lớn chứa các chuỗi

853
00:51:27,980 --> 00:51:32,080
của tất cả các biểu tượng chứng khoán NASDAQ.

854
00:51:32,080 --> 00:51:42,190
Nếu tôi muốn nhảy trở lại HTML, để jharvard, vhosts, globalhost, html, các mẫu,

855
00:51:42,190 --> 00:51:45,820
quote_form.

856
00:51:45,820 --> 00:51:50,910
Kể từ đó bây giờ được gọi là quote3.js, hãy để tôi thay đổi các tập tin Javascript tôi là bao gồm ở đây.

857
00:51:50,910 --> 00:51:55,110
Bây giờ tôi có quote3.js, vì vậy tôi sẽ để tải tập tin JavaScript riêng biệt,

858
00:51:55,110 --> 00:51:57,910
mà đã là autocomplete Bootstrap.

859
00:51:57,910 --> 00:52:04,430
Bây giờ khi tôi nhảy trở lại trình duyệt, tải lại trang, và tôi bắt đầu nhập aa,

860
00:52:04,430 --> 00:52:06,880
có autocomplete của tôi. Và nó thực sự đơn giản như vậy.

861
00:52:06,880 --> 00:52:11,400
Tôi đã có 1 dòng mã mà chỉ nói, "Đây là những điều tôi muốn tự động hoàn chỉnh,"

862
00:52:11,400 --> 00:52:16,590
và đột nhiên tôi có chức năng này thực sự, thực sự tốt đẹp với rất nhiều không phải toàn bộ nỗ lực ở tất cả.

863
00:52:16,590 --> 00:52:19,810
Khi bạn đang phát triển các trang web và đặc biệt là cuối mặt trước của vật,

864
00:52:19,810 --> 00:52:21,840
bạn sẽ thấy đây là một trường hợp rất nhiều.

865
00:52:21,840 --> 00:52:25,700
Có rất nhiều, rất nhiều, rất nhiều thư viện miễn phí thực sự mát mẻ ra có

866
00:52:25,700 --> 00:52:30,190
mà làm cho nó siêu dễ dàng để làm những việc như thế này.

867
00:52:30,190 --> 00:52:37,230
Bất cứ ai có thể suy nghĩ của bất kỳ hạn chế của đơn giản autocompleting này danh sách lớn các biểu tượng?

868
00:52:37,230 --> 00:52:41,580
Điều gì có thể là một cái gì đó không phải là tốt nhất với phương pháp tiếp cận này?

869
00:52:42,790 --> 00:52:45,960
Yeah. >> [Sinh viên] Thời gian, nếu bạn có rất nhiều không nghe được]

870
00:52:45,960 --> 00:52:50,420
Yeah. Ngay bây giờ, chúng tôi đang tải tập tin này JavaScript rất lớn và có rất nhiều các biểu tượng.

871
00:52:50,420 --> 00:52:54,360
Và vì vậy nếu chúng ta có một tấn công cụ, loại có thể làm tăng độ trễ của không chỉ tìm kiếm

872
00:52:54,360 --> 00:52:56,600
nhưng cũng tải về các tập tin thực tế.

873
00:52:56,600 --> 00:52:58,670
Lớn. Bất cứ điều gì khác?

874
00:53:01,950 --> 00:53:05,280
Ngay bây giờ không có ý nghĩa thực tế liên quan.

875
00:53:05,280 --> 00:53:08,190
Nếu tôi nhập vào một A, các công ty hiển thị ở đây

876
00:53:08,190 --> 00:53:11,220
có thể không được các công ty phổ biến nhất mà bắt đầu với A.

877
00:53:11,220 --> 00:53:17,130
>> Trước khi tôi nhận được cho Apple, nó có thể mất các ký tự một số chi tiết để tìm thấy những gì tôi đang tìm kiếm.

878
00:53:17,130 --> 00:53:20,420
Autocomplete này không có ý nghĩa này liên quan.

879
00:53:20,420 --> 00:53:24,400
Nó chỉ sẽ nói, "Bất cứ điều gì phù hợp với tôi sẽ để hiển thị."

880
00:53:24,400 --> 00:53:30,510
Thay vào đó, tôi muốn bằng cách nào đó tích hợp một số liên quan vào tìm kiếm của tôi.

881
00:53:30,510 --> 00:53:36,440
Nếu tôi đi qua đây để Yahoo! Finance, finance.yahoo.com,

882
00:53:36,440 --> 00:53:42,100
Nếu tôi cố gắng nhập một biểu tượng trên trang Yahoo! Finance

883
00:53:42,100 --> 00:53:52,310
và tôi bắt đầu nhập goog, tôi có danh sách tốt đẹp của sự vật.

884
00:53:52,310 --> 00:53:57,100
Rõ ràng, nó trông giống như Yahoo! Finance được làm một cái gì đó thông minh hơn ở đây.

885
00:53:57,100 --> 00:53:59,790
Họ có một số phù hợp và họ cũng có thông tin bổ sung

886
00:53:59,790 --> 00:54:01,430
như tên của cổ phiếu.

887
00:54:01,430 --> 00:54:05,850
Đó là một cái gì đó mà tôi có thể không thực sự có được chỉ với danh sách cổ phiếu của các biểu tượng.

888
00:54:05,850 --> 00:54:09,520
Tôi muốn điều này và do đó, tôi sẽ mang nó.

889
00:54:09,520 --> 00:54:11,790
Để làm điều đó chúng ta hãy làm một vài điều.

890
00:54:11,790 --> 00:54:15,580
Trước tiên hãy mở thanh tra trên trang này

891
00:54:15,580 --> 00:54:18,100
bởi vì chúng tôi thấy rằng trang này không tải lại ở tất cả,

892
00:54:18,100 --> 00:54:21,960
do đó, nó có thể sử dụng AJAX bằng cách nào đó để tải dữ liệu của nó.

893
00:54:21,960 --> 00:54:23,920
Chúng tôi có thể tìm ra những dữ liệu mà nó tải.

894
00:54:23,920 --> 00:54:28,390
Nếu tôi bấm vào tab Network này, các đang có được tất cả các yêu cầu bắt đầu được bắn.

895
00:54:28,390 --> 00:54:34,020
Bây giờ nếu tôi gõ goo, chúng ta có thể thấy rằng tôi chỉ có một yêu cầu HTTP mới.

896
00:54:34,020 --> 00:54:37,490
Đây có lẽ là nơi mà dữ liệu đến từ.

897
00:54:37,490 --> 00:54:41,990
Chắc chắn đủ, nếu tôi nhìn vào URL này, đó là một chút kỳ lạ được đặt tên,

898
00:54:41,990 --> 00:54:46,930
chúng ta có thể thấy rằng đây là chính xác nơi mà Yahoo đang gửi dữ liệu của nó.

899
00:54:46,930 --> 00:54:53,400
>> Tôi đã tạo ra một tập tin riêng biệt gọi là suggest.php đó là rất tinh thần tương tự chức năng tra cứu.

900
00:54:53,400 --> 00:54:57,730
Đó là cơ bản sẽ tạo ra một truy vấn đến URL của Yahoo, lấy lại một số dữ liệu,

901
00:54:57,730 --> 00:54:59,750
và gửi nó trở lại với tôi.

902
00:54:59,750 --> 00:55:02,570
Bây giờ, thay vì sử dụng danh sách này, rất lớn của các biểu tượng,

903
00:55:02,570 --> 00:55:05,280
Tôi có thể sử dụng những thứ liên quan tốt đẹp của Yahoo,

904
00:55:05,280 --> 00:55:08,150
và tôi không phải tải về tập tin JavaScript lớn.

905
00:55:08,150 --> 00:55:12,040
Tôi chỉ để kéo xuống ký hiệu chứng khoán thực sự có liên quan.

906
00:55:12,040 --> 00:55:13,960
Hãy nhảy vào đó.

907
00:55:13,960 --> 00:55:17,360
Vì vậy, html, js. Chúng tôi bây giờ vào quote4.

908
00:55:17,360 --> 00:55:22,120
Bây giờ chúng ta không còn sử dụng rằng danh sách lớn của các tập tin JavaScript.

909
00:55:22,120 --> 00:55:24,430
Nhưng có một loại nhỏ của vấn đề thiết kế ở đây.

910
00:55:24,430 --> 00:55:28,200
Chúng tôi đã nói rằng A trong AJAX là không đồng bộ.

911
00:55:28,200 --> 00:55:31,000
Điều đó có nghĩa là khi tôi thực hiện một yêu cầu AJAX,

912
00:55:31,000 --> 00:55:36,490
như vậy ngay ở đây trên dòng 8, đây là nơi AJAX yêu cầu của tôi là thực sự bị sa thải.

913
00:55:36,490 --> 00:55:40,370
Hãy nói rằng bây giờ tôi có một số mã xuống đây đó là sẽ làm một số công cụ

914
00:55:40,370 --> 00:55:43,930
như cảnh báo người dùng hoặc một cái gì đó thay đổi trên trang.

915
00:55:43,930 --> 00:55:49,830
Những gì sẽ không xảy ra là trình duyệt sẽ không phải chờ đợi cho yêu cầu này để tiếp tục

916
00:55:49,830 --> 00:55:53,480
trước khi đi xuống và đánh dòng này.

917
00:55:53,480 --> 00:55:55,900
Đó là một phần không đồng bộ.

918
00:55:55,900 --> 00:55:58,400
Nó sẽ làm cho yêu cầu này và nói, "Bất cứ khi nào bạn hoàn thành,

919
00:55:58,400 --> 00:56:03,080
"Trở lại và gọi đó là chức năng mà tôi đã nói với bạn để gọi bên trong của sự thành công."

920
00:56:03,080 --> 00:56:07,300
Điều đó có nghĩa là chúng ta không thể chỉ cần tải về tất cả các cổ phiếu trước.

921
00:56:07,300 --> 00:56:10,300
Chúng tôi cần phải thực hiện các yêu cầu và chờ đợi một cái gì đó để quay trở lại.

922
00:56:10,300 --> 00:56:13,330
Điều đó có nghĩa là trước đây, chúng tôi chỉ đơn giản là có thể nói Bootstrap,

923
00:56:13,330 --> 00:56:15,580
"Đây là danh sách những thứ tôi muốn bạn để tự động hoàn chỉnh."

924
00:56:15,580 --> 00:56:18,950
Chúng tôi không còn có thể làm điều đó nữa vì chúng ta không biết

925
00:56:18,950 --> 00:56:21,780
những gì chúng ta muốn thực sự tự động hoàn chỉnh trên.

926
00:56:21,780 --> 00:56:25,190
May mắn thay, Bootstrap nghĩ về điều này bởi vì những kẻ thông minh trên đó,

927
00:56:25,190 --> 00:56:30,160
và họ thực sự đã cho chúng tôi một cách khác để tải plugin này Typeahead.

928
00:56:30,160 --> 00:56:35,630
Trước đây, giá trị của khách sạn nguồn này mảng lớn thứ để tự động hoàn chỉnh trên.

929
00:56:35,630 --> 00:56:39,580
>> Nguồn tài sản thực sự là một chức năng,

930
00:56:39,580 --> 00:56:44,580
và mục đích của chức năng này là để tìm ra những điều autocomplete trên.

931
00:56:44,580 --> 00:56:48,730
Cách nó sẽ hiểu rằng con số là nó sẽ yêu cầu Yahoo! Finance

932
00:56:48,730 --> 00:56:51,750
những điều tốt nhất để tự động hoàn chỉnh.

933
00:56:51,750 --> 00:56:54,500
Để làm điều đó tôi sẽ làm cho một yêu cầu AJAX rất giống nhau.

934
00:56:54,500 --> 00:56:59,010
Tôi sẽ yêu cầu trang này tại suggest.php.

935
00:56:59,010 --> 00:57:01,360
Tôi muốn gửi cùng các biểu tượng vẫn còn.

936
00:57:01,360 --> 00:57:05,570
Và bây giờ thành công của tôi, các tài liệu hướng dẫn Bootstrap nói với tôi

937
00:57:05,570 --> 00:57:09,130
rằng để cư danh sách những thứ đó,

938
00:57:09,130 --> 00:57:14,370
tất cả những gì tôi cần làm là vượt qua trong mảng này ngay bây giờ để chức năng gọi lại.

939
00:57:14,370 --> 00:57:15,660
Nhưng chờ một phút.

940
00:57:15,660 --> 00:57:20,240
Nếu điều này được coi là một mảng và AJAX được gửi lại văn bản,

941
00:57:20,240 --> 00:57:22,720
làm thế nào là có thể?

942
00:57:22,720 --> 00:57:27,910
Này giới thiệu một phương pháp mới để trao đổi dữ liệu gọi là JSON.

943
00:57:27,910 --> 00:57:33,000
Trong trường hợp này chúng tôi không chỉ gửi lại một chuỗi đơn giản của văn bản.

944
00:57:33,000 --> 00:57:37,670
Bây giờ chúng tôi đang làm việc với danh sách này phức tạp hơn các biểu tượng cổ phiếu.

945
00:57:37,670 --> 00:57:41,730
Những biểu tượng chứng khoán cũng có thể bao gồm những thứ như tên của công ty hoặc giá hiện hành.

946
00:57:41,730 --> 00:57:47,550
Chỉ cần sử dụng một chuỗi dài không được định dạng trong bất kỳ cách nào dự đoán được

947
00:57:47,550 --> 00:57:51,970
sẽ không phải là cách tốt nhất để có được dữ liệu từ máy chủ của Yahoo để tôi

948
00:57:51,970 --> 00:57:54,540
trong một cách mà tôi có thể dễ dàng hiểu được.

949
00:57:54,540 --> 00:58:01,280
JSON là một công nghệ có lợi thế như thế nào chúng tôi tạo ra các mảng kết hợp trong JavaScript.

950
00:58:01,280 --> 00:58:04,510
Điều này có vẻ rất giống một mảng kết hợp JavaScript,

951
00:58:04,510 --> 00:58:06,600
và trong thực tế, đó là bởi vì nó là.

952
00:58:06,600 --> 00:58:09,710
JSON là viết tắt của JavaScript Object Notation.

953
00:58:09,710 --> 00:58:15,020
Điều này về cơ bản là một thoả thuận định dạng để chuyển dữ liệu qua lại.

954
00:58:15,020 --> 00:58:18,280
Ở đây đối tượng này JSON hoặc mảng JSON liên kết này

955
00:58:18,280 --> 00:58:21,010
còn gửi cho tôi một số dữ liệu về một khóa học.

956
00:58:21,010 --> 00:58:25,110
>> Các phím của mảng này là những thứ như khóa học có một giá trị của CS50,

957
00:58:25,110 --> 00:58:29,140
và xuống ở đây chúng ta có thể thấy rằng tôi có thể có một giá trị là một mảng.

958
00:58:29,140 --> 00:58:32,730
Tôi không phải làm những việc như phân tích ra các chuỗi và tìm kiếm dấu phẩy

959
00:58:32,730 --> 00:58:35,330
và làm những điều điên rồ như thế.

960
00:58:35,330 --> 00:58:38,820
Bởi vì điều này được khai báo trong định dạng JSON,

961
00:58:38,820 --> 00:58:43,510
JavaScript và jQuery đã có chức năng để chuyển đổi một chuỗi

962
00:58:43,510 --> 00:58:48,140
trông như thế này JSON vào một mảng thực tế kết hợp JavaScript

963
00:58:48,140 --> 00:58:50,440
chúng tôi có thể làm việc với.

964
00:58:50,440 --> 00:58:56,660
Làm như vậy là đơn giản như nói rằng không còn là tập tin này, suggest.php,

965
00:58:56,660 --> 00:58:59,040
gửi cho tôi trở lại chỉ đơn giản là một chuỗi các văn bản,

966
00:58:59,040 --> 00:59:01,950
nhưng tôi biết nó sẽ được gửi cho tôi trở lại JSON.

967
00:59:01,950 --> 00:59:06,760
Điều đó có nghĩa rằng đó JSON có thể được chuyển đổi thành một mảng kết hợp JavaScript.

968
00:59:06,760 --> 00:59:10,830
Và như vậy jQuery, tôi muốn bạn làm điều đó cho tôi.

969
00:59:10,830 --> 00:59:13,990
Điều đó có nghĩa là tham số này phản ứng ở đây,

970
00:59:13,990 --> 00:59:16,070
điều này không còn chỉ là một chuỗi.

971
00:59:16,070 --> 00:59:19,860
Bởi vì chúng tôi đã nói với jQuery ở đây có một số JSON,

972
00:59:19,860 --> 00:59:22,950
jQuery là có được đủ thông minh để nói, "Bạn muốn JSON?"

973
00:59:22,950 --> 00:59:26,890
"Tôi sẽ chuyển đổi đó vào một mảng kết hợp cho bạn."

974
00:59:26,890 --> 00:59:32,100
Chúng ta thực sự có một cái nhìn tại tab Network, một khi chúng ta có quote4.js.

975
00:59:32,100 --> 00:59:35,400
Chúng tôi sẽ thay đổi điều này và tải lại trang.

976
00:59:37,150 --> 00:59:41,250
Bây giờ tôi sẽ gõ vào một một lần nữa.

977
00:59:41,250 --> 00:59:45,600
Tôi đã thực hiện một yêu cầu để suggest.php, nhưng bây giờ phản ứng này,

978
00:59:45,600 --> 00:59:48,670
chứ không phải chỉ là chuỗi, JSON.

979
00:59:48,670 --> 00:59:52,580
Vì vậy, tôi có một cú đúp mở xoăn nói: "Ở đây có một mảng kết hợp."

980
00:59:52,580 --> 00:59:56,830
>> Chìa khóa đầu tiên và duy nhất của mảng kết hợp này được gọi là biểu tượng,

981
00:59:56,830 --> 01:00:00,240
và sau đó đây là một mảng của tất cả các biểu tượng có liên quan

982
01:00:00,240 --> 01:00:04,820
bây giờ từ Yahoo! Finance, chứ không phải từ danh sách khổng lồ.

983
01:00:06,110 --> 01:00:10,630
Đó là cách tôi chỉ đơn giản là có thể cư plugin này autocomplete

984
01:00:10,630 --> 01:00:14,280
với một số dữ liệu đó không phải đến từ một tập tin địa phương đã được xác định trước

985
01:00:14,280 --> 01:00:17,490
nhưng từ cái gì khác.

986
01:00:17,490 --> 01:00:21,160
Nó chỉ ra rằng chúng ta thực sự có thể tận dụng lợi thế của một công nghệ được gọi là JSONP,

987
01:00:21,160 --> 01:00:27,420
hoặc JSON với lớp đệm, đó sẽ loại bỏ này trung gian suggest.php.

988
01:00:27,420 --> 01:00:34,010
Nhưng thay vì làm điều đó, chúng ta hãy thay vào đó hãy xem làm thế nào tôi có thể cải thiện hơn nữa.

989
01:00:34,010 --> 01:00:36,040
Tôi thực sự thích Bootstrap của Typeahead. Nó thực sự tốt đẹp.

990
01:00:36,040 --> 01:00:39,570
Nhưng chúng tôi đang nhận được tốt JavaScript và chúng tôi muốn loại làm điều này bản thân mình,

991
01:00:39,570 --> 01:00:43,870
có thể có một cái nhìn vào những gì plugin này có thể được làm.

992
01:00:43,870 --> 01:00:46,500
Hãy để không còn được sử dụng điều Typeahead,

993
01:00:46,500 --> 01:00:50,550
và chúng ta hãy cố gắng để làm cho danh sách các cổ phiếu cho mình.

994
01:00:50,550 --> 01:00:53,790
Trong quote6.php chúng tôi đang đi để bắt đầu theo cùng một cách.

995
01:00:53,790 --> 01:00:58,050
Mỗi lần loại người nào đó một cái gì đó, chúng tôi muốn thực hiện một yêu cầu AJAX.

996
01:00:58,050 --> 01:01:01,590
Điều này là tương tự như Tài chính ban đầu tức thì của chúng tôi CS50.

997
01:01:01,590 --> 01:01:05,020
Thay vì một yêu cầu quote.php,

998
01:01:05,020 --> 01:01:08,530
Bây giờ chúng tôi đang thực hiện một yêu cầu đến tập tin tương tự như trước, suggest.php này,

999
01:01:08,530 --> 01:01:12,460
mà chỉ là kéo dữ liệu từ Yahoo! Finance.

1000
01:01:12,460 --> 01:01:19,480
>> Một lần nữa, chúng ta vẫn mong đợi JSON, nhưng bây giờ kể từ khi Typeahead không làm điều này cho chúng ta,

1001
01:01:19,480 --> 01:01:24,850
chúng tôi cũng cần phải gửi cùng giá trị mà là bên trong của hộp văn bản hiện hành.

1002
01:01:24,850 --> 01:01:28,120
Bây giờ chúng ta biết những gì để yêu cầu Yahoo! Finance,

1003
01:01:28,120 --> 01:01:34,160
và vì vậy bây giờ ở đây là chức năng mà chúng tôi muốn thực hiện một lần yêu cầu hoàn tất.

1004
01:01:34,160 --> 01:01:36,520
Chúng tôi không có plugin để làm cho danh sách cho chúng ta,

1005
01:01:36,520 --> 01:01:40,630
vì vậy đây là nơi mà chúng tôi đang thực sự đi để xây dựng một danh sách gợi ý.

1006
01:01:40,630 --> 01:01:44,850
Để làm điều đó, giống như trong PHP, chúng ta nối các chuỗi lớn của HTML

1007
01:01:44,850 --> 01:01:48,170
sau đó, chúng tôi in họ, chúng tôi có thể làm điều tương tự chính xác trong JavaScript.

1008
01:01:48,170 --> 01:01:51,850
Trước tiên, chúng ta sẽ bắt đầu chuỗi này được gọi là gợi ý,

1009
01:01:51,850 --> 01:01:54,590
và chuỗi này là chỉ cần đi để chứa một số HTML.

1010
01:01:54,590 --> 01:01:58,320
Chúng tôi muốn nó phải là một danh sách những thứ, do đó, chúng ta sẽ bắt đầu với danh sách thẻ này,

1011
01:01:58,320 --> 01:02:03,340
và bây giờ chúng ta sẽ lặp qua tất cả các biểu tượng đã được trả lại cho chúng tôi.

1012
01:02:03,340 --> 01:02:06,500
Hãy nhớ rằng, bởi vì chúng tôi đã nói datatype: 'json', điều này không phải là một chuỗi.

1013
01:02:06,500 --> 01:02:09,500
Điều này đã một mảng cho chúng tôi. Đó là thực sự mát mẻ.

1014
01:02:09,500 --> 01:02:13,790
Chúng tôi chỉ đơn giản là có thể nói, "tôi muốn các bạn nối thêm một phần tử danh sách."

1015
01:02:13,790 --> 01:02:16,000
Chúng tôi sẽ đặt nó bên trong một phần tử a bên cạnh đó,

1016
01:02:16,000 --> 01:02:19,030
chúng tôi sẽ cung cấp cho nó một lớp học của đề xuất vì vậy chúng tôi biết nó là gì,

1017
01:02:19,030 --> 01:02:23,880
và giờ đây là biểu tượng mà chúng tôi đã trở lại từ Yahoo! Tài chính.

1018
01:02:23,880 --> 01:02:27,230
>> Một khi chúng ta đã tạo ra một phần tử cho mỗi biểu tượng chúng tôi đã nhận được trở lại,

1019
01:02:27,230 --> 01:02:30,100
chúng tôi chỉ muốn đóng ra khỏi danh sách.

1020
01:02:30,100 --> 01:02:33,040
Vì vậy, bây giờ đề nghị đại diện cho đoạn này ít HTML

1021
01:02:33,040 --> 01:02:37,860
khi được đặt trên một trang là có được danh sách những điều chúng tôi đang tìm kiếm.

1022
01:02:37,860 --> 01:02:41,070
Bây giờ chúng ta hãy thực sự đặt trên trang.

1023
01:02:41,070 --> 01:02:46,390
Để làm được điều mà tôi đã thực sự tạo ra một div trống rỗng và tôi đã cho nó một ID của đề xuất.

1024
01:02:46,390 --> 01:02:52,520
Cũng giống như chúng ta thiết lập các nội dung của div đó sẽ hiển thị giá của các dữ liệu chứng khoán,

1025
01:02:52,520 --> 01:02:58,600
bây giờ chúng ta chỉ muốn thiết lập các nội dung của div này bất cứ chuỗi này là

1026
01:02:58,600 --> 01:03:00,290
trong đó có chứa các biểu tượng này.

1027
01:03:00,290 --> 01:03:07,650
Bằng cách sử dụng phương pháp này HTML, biến này đề nghị, chuỗi này, là một chuỗi của HTML.

1028
01:03:07,650 --> 01:03:13,490
Tôi muốn bạn để đi mà HTML và đặt nó bên trong của div gọi là gợi ý.

1029
01:03:13,490 --> 01:03:15,680
Chúng tôi đã chỉ nối một cái gì đó vào DOM.

1030
01:03:15,680 --> 01:03:20,360
Chúng tôi đã thêm một số yếu tố mới vào DOM mà chúng tôi có thể hiển thị trên trang.

1031
01:03:20,360 --> 01:03:22,540
Hãy xem này trông giống như.

1032
01:03:22,540 --> 01:03:29,110
Nếu chúng ta nạp năm quote6 và bây giờ chúng tôi quay trở lại,

1033
01:03:29,110 --> 01:03:34,480
bây giờ khi tôi bắt đầu gõ AAPL, chúng ta không có mà Bootstrap autocomplete,

1034
01:03:34,480 --> 01:03:38,470
nhưng bây giờ chúng ta có danh sách này mà chúng tôi đã thực hiện bản thân mình.

1035
01:03:38,470 --> 01:03:43,230
Đây là một uglier ít hơn so với các Typeahead Bootstrap, ví dụ,

1036
01:03:43,230 --> 01:03:45,580
nhưng nó cho phép chúng ta làm một điều khác.

1037
01:03:45,580 --> 01:03:48,660
Khi chúng tôi đã xem xét rằng các plugin Bootstrap,

1038
01:03:48,660 --> 01:03:52,590
chúng ta đã thấy rằng khi chúng ta autocompleted, một trong những giá trị tự động hoàn chỉnh là AAPL.

1039
01:03:52,590 --> 01:03:54,820
Điều đó có thể không được như vậy.

1040
01:03:54,820 --> 01:03:59,100
Là người sử dụng, tôi có thể không ngay lập tức nhận ra tất cả các ký hiệu chứng khoán.

1041
01:03:59,100 --> 01:04:02,370
Những gì tôi có thể có khả năng để nhận ra là những tên thực tế của công ty.

1042
01:04:02,370 --> 01:04:05,310
Vì vậy, sẽ không thực sự hữu ích nếu thay vì nói AAPL

1043
01:04:05,310 --> 01:04:07,970
này cho biết một cái gì đó như Apple Inc.

1044
01:04:07,970 --> 01:04:12,240
Bởi vì chúng ta đã cuộn này chính chúng ta, chúng ta thực sự có thể dễ dàng làm điều đó.

1045
01:04:12,240 --> 01:04:17,630
Hãy mở tập tin trích dẫn nội dung bài viết mới nhất của chúng tôi ở đây, vì vậy quote7.

1046
01:04:17,630 --> 01:04:23,200
>> Cùng một điều. Tôi đã chỉ cần tạo ra một file PHP đó sẽ trở lại với chúng ta nhiều hơn là chỉ những biểu tượng.

1047
01:04:23,200 --> 01:04:25,550
Nó cũng sẽ cung cấp cho chúng tôi tên của công ty.

1048
01:04:25,550 --> 01:04:28,150
Và vì vậy chúng tôi đang làm điều tương tự. Chúng tôi đang làm cho một yêu cầu AJAX.

1049
01:04:28,150 --> 01:04:32,370
Một khi các yêu cầu đã hoàn thành, chúng tôi sẽ thực hiện chức năng này ở đây,

1050
01:04:32,370 --> 01:04:36,520
và chức năng này sẽ xây dựng một chuỗi lớn của các yếu tố.

1051
01:04:36,520 --> 01:04:39,520
Nhưng sự khác biệt ở đây là giá trị của các danh sách này là không còn chỉ là biểu tượng,

1052
01:04:39,520 --> 01:04:45,370
nó bây giờ tên.

1053
01:04:45,370 --> 01:04:47,070
Vì vậy, chúng tôi có một vấn đề nhỏ.

1054
01:04:47,070 --> 01:04:51,590
Khi chúng ta sử dụng tra cứu của chúng tôi, chúng ta cần vượt qua nó bằng cách nào đó các biểu tượng.

1055
01:04:51,590 --> 01:04:54,950
Chúng ta không thể vượt qua cái gì tra cứu như Tập đoàn Microsoft.

1056
01:04:54,950 --> 01:04:57,900
Chúng ta cần phải vượt qua nó MSFT.

1057
01:04:57,900 --> 01:05:01,640
Khi chúng tôi đang viết HTML, chúng tôi có rất nhiều tốt đẹp được xây dựng trong các thuộc tính.

1058
01:05:01,640 --> 01:05:05,440
A có thể liên quan đến với một href hoặc một lớp học.

1059
01:05:05,440 --> 01:05:08,230
Nhưng những gì chúng tôi thực sự cần bây giờ là cho mỗi của các liên kết

1060
01:05:08,230 --> 01:05:11,120
để có một biểu tượng cổ phiếu liên kết với nó.

1061
01:05:11,120 --> 01:05:14,240
Không có được xây dựng trong thuộc tính HTML cho cổ phiếu biểu tượng,

1062
01:05:14,240 --> 01:05:21,010
nhưng may mắn, HTML5 cho phép chúng ta tạo các thuộc tính của chúng tôi để được bất cứ điều gì chúng ta muốn.

1063
01:05:21,010 --> 01:05:24,620
Bằng cách nói biểu tượng dữ liệu, tôi đã giới thiệu một thuộc tính mới

1064
01:05:24,620 --> 01:05:29,350
có tên tôi chỉ cần thực hiện, và điều này không quan trọng vì tôi mở đầu với dữ liệu này.

1065
01:05:29,350 --> 01:05:34,270
Chúng tôi sẽ lưu trữ bên trong biểu tượng có từ cổ phiếu.

1066
01:05:34,270 --> 01:05:39,590
Điều này có nghĩa là, mặc dù chúng tôi đang hiển thị giá trị của tên công ty

1067
01:05:39,590 --> 01:05:43,380
bên trong của autocomplete của chúng tôi, chúng tôi vẫn còn nhớ các biểu tượng

1068
01:05:43,380 --> 01:05:47,110
được liên kết với mỗi công ty.

1069
01:05:47,110 --> 01:05:50,350
Cách chúng ta đang làm mà là bên trong của bản thân yếu tố này.

1070
01:05:50,350 --> 01:05:52,930
Vì vậy, điều đó có nghĩa là chúng ta cần phải thực hiện một sự thay đổi nữa.

1071
01:05:52,930 --> 01:05:57,090
Khi nhấn vào nó bây giờ, chúng ta cần để thực sự tận dụng lợi thế của thuộc tính biểu tượng

1072
01:05:57,090 --> 01:06:00,220
chứ không phải là giá trị của nó.

1073
01:06:00,220 --> 01:06:05,010
Nếu chúng ta trở lại, chúng tôi đính kèm một xử lý sự kiện để gợi ý.

1074
01:06:05,010 --> 01:06:09,280
Bất cứ khi nào một trong những gợi ý được nhấp bây giờ, tôi muốn làm một cái gì đó.

1075
01:06:09,280 --> 01:06:13,160
Những gì tôi muốn làm là thay đổi giá trị của hộp đầu vào đó.

1076
01:06:13,160 --> 01:06:16,100
Bây giờ tôi muốn thiết lập cùng một chức năng này val.

1077
01:06:16,100 --> 01:06:21,060
>> Vì vậy, mà không có bất kỳ đối số chức năng này val trả về cho bạn những gì đã có trong hộp văn bản,

1078
01:06:21,060 --> 01:06:27,070
nhưng nếu bạn cho nó một chuỗi, nó sẽ mất rằng chuỗi và đặt nó vào hộp văn bản.

1079
01:06:27,070 --> 01:06:28,980
Tôi đang lựa chọn hộp văn bản của nó trong cùng một cách.

1080
01:06:28,980 --> 01:06:31,230
Tên của nó là biểu tượng bên trong hình thức của báo.

1081
01:06:31,230 --> 01:06:37,540
Bây giờ tôi đang gửi đi giá trị của dữ liệu thuộc tính biểu tượng.

1082
01:06:37,540 --> 01:06:41,560
Điều này ở đây là mới, điều này $ (this).

1083
01:06:41,560 --> 01:06:46,850
Điều này đề cập đến các yếu tố đó được nhấp.

1084
01:06:46,850 --> 01:06:50,880
Chúng ta có thể thấy rằng chúng tôi không gắn một sự kiện click

1085
01:06:50,880 --> 01:06:54,690
cho mỗi yếu tố với một lớp học của đề nghị cá nhân.

1086
01:06:54,690 --> 01:06:57,140
Thay vào đó, chúng tôi đang tiếp cận này một chút khác nhau.

1087
01:06:57,140 --> 01:07:01,700
Thay vào đó, chúng tôi đang nói bất cứ khi nào bất cứ điều gì bên trong thẻ div này gợi ý,

1088
01:07:01,700 --> 01:07:04,080
nhớ chỉ là các container cho danh sách đó,

1089
01:07:04,080 --> 01:07:10,150
nếu một cái gì đó bên trong thẻ div này là nhấp vào và nó có một lớp học của các đề nghị,

1090
01:07:10,150 --> 01:07:13,000
Tôi muốn sự kiện này để bắn.

1091
01:07:13,000 --> 01:07:17,490
Về cơ bản những gì điều này có nghĩa là chúng ta có thể làm là chúng ta có thể tái sử dụng cùng một xử lý sự kiện

1092
01:07:17,490 --> 01:07:20,000
cho tất cả những điều trong danh sách.

1093
01:07:20,000 --> 01:07:22,080
Vì vậy, chúng tôi không cần phải có một xử lý sự kiện cho các yếu tố đầu tiên

1094
01:07:22,080 --> 01:07:24,550
và xử lý sự kiện khác nhau cho các phần tử thứ hai.

1095
01:07:24,550 --> 01:07:29,880
Chúng tôi thay vì có thể nói, "Tôi muốn cùng một xử lý sự kiện để áp dụng cho tất cả mọi thứ trong danh sách của tôi."

1096
01:07:29,880 --> 01:07:34,420
Nhưng bằng cách nào đó chúng ta cần phải biết được yếu tố được nhấp.

1097
01:07:34,420 --> 01:07:38,450
Điều này "" từ khóa đại diện cho điều đó.

1098
01:07:38,450 --> 01:07:42,360
Đây là đối tượng đã được chỉ cần nhấp vào bởi người sử dụng.

1099
01:07:42,360 --> 01:07:47,680
Nếu tôi chỉ cần nhấp vào liên kết thứ 3, đại diện cho các yếu tố của liên kết thứ 3,

1100
01:07:47,680 --> 01:07:51,670
có nghĩa là tôi có thể nhận được thuộc tính của nó, dữ liệu-biểu tượng,

1101
01:07:51,670 --> 01:07:57,760
mà chúng ta biết có chứa các biểu tượng liên kết với công ty tôi chỉ cần nhấp vào.

1102
01:07:57,760 --> 01:08:04,550
Nếu chúng tôi nhảy trở lại trang tài chính của chúng tôi,

1103
01:08:04,550 --> 01:08:08,580
chúng ta có thể thấy rằng một khi tôi bắt đầu gõ một cái gì đó như msft,

1104
01:08:08,580 --> 01:08:11,220
chúng tôi không chỉ nhận được các biểu tượng chứng khoán,

1105
01:08:11,220 --> 01:08:13,720
chúng tôi đang nhận được các công ty thực tế.

1106
01:08:13,720 --> 01:08:20,410
Nhưng khi tôi bấm vào một trong các công ty này,

1107
01:08:20,410 --> 01:08:25,180
chúng ta có thể thấy rằng chúng tôi đang thực sự populating hộp văn bản không phải với tên của công ty

1108
01:08:25,180 --> 01:08:29,850
nhưng với bất cứ điều gì đã được lưu trữ bên trong những thuộc tính dữ liệu.

1109
01:08:29,850 --> 01:08:32,880
Và vì vậy nếu tôi thực sự kiểm tra một trong những yếu tố này bằng cách click chuột vào nó

1110
01:08:32,880 --> 01:08:36,200
và nhấp vào kiểm tra nguyên tố, chúng tôi thực sự có thể nhìn thấy những gì trông giống như.

1111
01:08:36,200 --> 01:08:40,290
>> Nhớ rằng đây là một cái gì đó mà chúng tôi tạo ra bên trong đó vòng lặp for

1112
01:08:40,290 --> 01:08:42,649
khi chúng tôi đang xây dựng rằng chuỗi HTML.

1113
01:08:42,649 --> 01:08:47,870
Chúng ta có thể thấy ở đây là biểu tượng này dữ liệu có giá trị của MSFT, đó là rất tốt.

1114
01:08:47,870 --> 01:08:49,189
Đó là những gì chúng tôi mong đợi.

1115
01:08:49,189 --> 01:08:53,170
Đó là biểu tượng và đó là cách chúng tôi có giá trị mà chúng tôi cần thiết để sử dụng

1116
01:08:53,170 --> 01:08:56,140
bên trong của hộp văn bản này.

1117
01:08:56,140 --> 01:08:58,850
Đó là đủ đối với hình thức trích dẫn nội dung bài viết này bởi vì đó là loại nhàm chán.

1118
01:08:58,850 --> 01:09:02,990
Chúng ta chỉ cần thực hiện một số cải tiến nhanh đến trang danh mục đầu tư của chúng tôi.

1119
01:09:02,990 --> 01:09:08,109
Nếu bạn đã sử dụng CS50 Tài chính trong một thời gian và bạn bắt đầu mua và bán rất nhiều cổ phiếu,

1120
01:09:08,109 --> 01:09:11,300
cuối cùng bảng này là sẽ nhận được khá lớn,

1121
01:09:11,300 --> 01:09:13,850
và bạn sẽ muốn có một mã cổ phiếu chứng khoán, tất nhiên.

1122
01:09:13,850 --> 01:09:20,350
Một khi bảng là thực sự, thực sự lớn, nó có thể hữu ích cho người sử dụng để cố gắng tìm kiếm trên.

1123
01:09:20,350 --> 01:09:23,290
Bên trong của hộp tìm kiếm nếu tôi bắt đầu gõ một cái gì đó như Disney

1124
01:09:23,290 --> 01:09:26,359
và tìm kiếm cổ phiếu Chuột Mickey của tôi, chúng ta có thể thấy rằng các bảng đang lọc

1125
01:09:26,359 --> 01:09:28,189
dựa trên những gì tôi chỉ cần gõ nhập.

1126
01:09:28,189 --> 01:09:31,640
Chức năng này có vẻ siêu phức tạp, nhưng nó thực sự, thực sự dễ dàng

1127
01:09:31,640 --> 01:09:33,859
với jQuery và JavaScript.

1128
01:09:33,859 --> 01:09:39,189
Portfolio.php tập tin này bao gồm một tập tin JavaScript được gọi là portfolio.js.

1129
01:09:39,189 --> 01:09:41,130
Chúng ta hãy nhìn vào lúc đó.

1130
01:09:41,130 --> 01:09:44,890
Vì vậy, html, js, danh mục đầu tư.

1131
01:09:44,890 --> 01:09:49,210
Đây là nơi chúng tôi đang làm điều đó trên bàn.

1132
01:09:49,210 --> 01:09:52,750
Điều đầu tiên tôi cần làm là đính kèm một xử lý sự kiện cho rằng hộp văn bản

1133
01:09:52,750 --> 01:09:55,760
bởi vì chúng tôi biết rằng chúng tôi muốn chức năng của chúng tôi lọc để bắn

1134
01:09:55,760 --> 01:09:59,800
mỗi khi người dùng nhấn một cái gì đó bởi vì chúng tôi không có thời gian cho các nút Tìm kiếm.

1135
01:09:59,800 --> 01:10:03,000
Điều đầu tiên chúng ta cần làm là tìm ra những gì người dùng đang tìm kiếm,

1136
01:10:03,000 --> 01:10:04,780
giống như chúng ta đã làm trước đây.

1137
01:10:04,780 --> 01:10:11,320
Từ khóa này đề cập đến các yếu tố hiện người dùng đang tương tác với.

1138
01:10:11,320 --> 01:10:14,070
>> Bởi vì người sử dụng tương tác với hộp tìm kiếm,

1139
01:10:14,070 --> 01:10:17,020
$ Này đại diện cho hộp tìm kiếm,

1140
01:10:17,020 --> 01:10:21,820
để this.val cho chúng ta những gì bên trong của hộp tìm kiếm người sử dụng hiện đang gõ.

1141
01:10:22,810 --> 01:10:27,320
Vì vậy, bây giờ những gì chúng tôi muốn làm là chúng tôi muốn để lặp qua tất cả các hàng

1142
01:10:27,320 --> 01:10:29,240
bên trong của bàn của chúng tôi.

1143
01:10:29,240 --> 01:10:35,630
Để chọn tất cả các hàng trong bảng của chúng tôi, tôi đã cho rằng bảng một ID của bảng danh mục đầu tư,

1144
01:10:35,630 --> 01:10:39,060
và mỗi hàng được đại diện bởi một yếu tố TR,

1145
01:10:39,060 --> 01:10:42,080
chọn này là sẽ quay trở lại cho tôi một mảng lớn

1146
01:10:42,080 --> 01:10:44,370
của tất cả các hàng trong bảng của tôi.

1147
01:10:44,370 --> 01:10:47,010
Bây giờ tôi muốn để lặp qua mảng đó.

1148
01:10:47,010 --> 01:10:52,390
Tôi có thể cho bạn một vòng lặp for, nhưng jQuery thực sự cung cấp cho chúng tôi chức năng tốt đẹp được gọi là "mỗi".

1149
01:10:52,390 --> 01:10:55,220
Từng làm là mỗi mất một đối số,

1150
01:10:55,220 --> 01:10:57,090
và tranh luận đó là một chức năng.

1151
01:10:57,090 --> 01:11:02,760
Những gì nó sẽ làm là nó sẽ áp dụng chức năng để tất cả các phần tử bên trong của danh sách này.

1152
01:11:02,760 --> 01:11:05,550
Chức năng này nhận một đối số đó là e,

1153
01:11:05,550 --> 01:11:10,090
và khi chức năng này được thực thi, điện tử này sẽ được thay thế bằng hàng đầu tiên,

1154
01:11:10,090 --> 01:11:12,070
sau đó là hàng thứ hai, và sau đó hàng thứ ba.

1155
01:11:12,070 --> 01:11:15,150
Bằng cách này, đây là điều tương tự như chạy một vòng lặp for

1156
01:11:15,150 --> 01:11:21,360
và sau đó tìm các yếu tố hiện tại dựa vào bên trong chỉ số của bạn cho vòng lặp.

1157
01:11:21,360 --> 01:11:24,750
Tại mỗi lần lặp lại, mỗi người trong số những yếu tố này trong bảng,

1158
01:11:24,750 --> 01:11:30,560
Tôi muốn kiểm tra nếu các văn bản của nguyên tố này - các văn bản của các tế bào bên trong của hàng -

1159
01:11:30,560 --> 01:11:33,130
phù hợp với những gì tôi đang tìm kiếm.

1160
01:11:33,130 --> 01:11:36,390
Chuỗi này dài lớn các lệnh là làm thế nào tôi có thể làm điều đó.

1161
01:11:36,390 --> 01:11:40,900
Đầu tiên, một lần nữa, điều này ngay bây giờ đề cập đến - bởi vì nó là bên trong của một chức năng mới -

1162
01:11:40,900 --> 01:11:45,020
điều này bây giờ là hàng hiện tại trong bảng.

1163
01:11:45,020 --> 01:11:47,340
Tôi muốn lấy hàng hiện tại trong bảng,

1164
01:11:47,340 --> 01:11:49,950
và tôi muốn để có được tất cả các con của nó.

1165
01:11:49,950 --> 01:11:51,940
Hãy nhớ rằng, DOM là một cây phân cấp,

1166
01:11:51,940 --> 01:11:54,200
điều đó có nghĩa rằng các phần tử có một số trẻ em.

1167
01:11:54,200 --> 01:12:00,180
>> Chức năng này, trẻ em sẽ trở về tôi trở lại một mảng của tất cả các yếu tố

1168
01:12:00,180 --> 01:12:03,240
là con cái, trong trường hợp này, một hàng trong bảng.

1169
01:12:03,240 --> 01:12:07,150
Điều này chỉ đơn giản là các tế bào bên trong của hàng.

1170
01:12:07,150 --> 01:12:09,230
Tôi chỉ muốn tìm kiếm trên các tế bào đầu tiên.

1171
01:12:09,230 --> 01:12:13,090
Đầu tiên chức năng này cung cấp cho tôi những yếu tố đầu tiên trong mảng đó.

1172
01:12:13,090 --> 01:12:17,070
Sau đó, chức năng văn bản nói rằng tôi biết chính xác những gì bên trong của tế bào đó

1173
01:12:17,070 --> 01:12:19,530
kể từ khi tôi muốn tìm kiếm trên văn bản đó.

1174
01:12:19,530 --> 01:12:21,040
Cuối cùng, chúng ta hãy chuyển đổi nó thành chữ thường,

1175
01:12:21,040 --> 01:12:23,940
vì vậy chúng tôi có thể làm các truy vấn trường hợp văn bản không nhạy cảm.

1176
01:12:23,940 --> 01:12:29,990
Cuối cùng, chúng tôi muốn để xem nếu đó là chuỗi bên trong của một bảng chứa các chuỗi chúng tôi đang tìm kiếm.

1177
01:12:29,990 --> 01:12:32,980
Chức năng indexOf trong JavaScript hiện điều đó.

1178
01:12:32,980 --> 01:12:37,060
Nó cho chúng ta hay không chuỗi này chứa một chuỗi.

1179
01:12:37,060 --> 01:12:40,150
Nếu đó là sự thật rằng tế bào có chứa những gì tôi đang tìm kiếm,

1180
01:12:40,150 --> 01:12:42,140
sau đó tôi muốn để đảm bảo rằng nó được hiển thị.

1181
01:12:42,140 --> 01:12:45,330
Phương pháp hiển thị sẽ nói, "Hiển thị các phần tử."

1182
01:12:45,330 --> 01:12:50,350
Nếu đây không phải là trường hợp, thì đó có nghĩa là bất cứ điều gì tôi đang tìm kiếm không được chứa

1183
01:12:50,350 --> 01:12:53,550
trong hàng đó, và vì vậy tôi muốn ẩn từ người sử dụng.

1184
01:12:53,550 --> 01:12:59,240
Mà đạt được rằng hiệu ứng lọc tốt đẹp, nơi chúng ta không còn nhìn thấy toàn bộ bảng.

1185
01:12:59,240 --> 01:13:01,480
Nếu bạn quan tâm đến làm thế nào để làm cho mã cũng,

1186
01:13:01,480 --> 01:13:04,180
chúng tôi sẽ đăng các nguồn trực tuyến. Nhưng nó thực sự đơn giản.

1187
01:13:04,180 --> 01:13:09,860
JQuery có phương pháp tuyệt vời cho những hình ảnh động và thao tác các thuộc tính CSS.

1188
01:13:09,860 --> 01:13:11,020
Vì vậy, đó là nó cho tôi.

1189
01:13:11,020 --> 01:13:15,560
>> Những gì sau đó ở phía trước? Như bạn sẽ thấy trong một vài ngày, đề xuất các dự án cuối cùng là do.

1190
01:13:15,560 --> 01:13:17,730
Các dự án cuối cùng đề nghị sẽ hỏi bạn một số câu hỏi,

1191
01:13:17,730 --> 01:13:19,420
nhưng trong số đó sẽ có ba sự kiện quan trọng -

1192
01:13:19,420 --> 01:13:22,840
1 một "tốt" cột mốc quan trọng, một mốc quan trọng tốt hơn, và một tốt nhất.

1193
01:13:22,840 --> 01:13:25,870
Ý tưởng đang được thực sự để giúp bạn thiết lập mong đợi của bạn

1194
01:13:25,870 --> 01:13:29,160
để tối thiểu bạn sẽ được hạnh phúc với đầu ra của dự án cuối cùng của bạn

1195
01:13:29,160 --> 01:13:32,060
và nó sẽ được "tốt" xa như vậy bạn đang quan tâm.

1196
01:13:32,060 --> 01:13:34,540
Nhưng sau đó trong sự quan tâm của bạn để đạt được chỉ là một chút đến một cái gì đó tốt hơn

1197
01:13:34,540 --> 01:13:37,680
hoặc một cái gì đó tốt nhất, chúng tôi cũng sẽ sắp xếp đẩy bạn hướng tới đó là tốt.

1198
01:13:37,680 --> 01:13:40,660
CS50 Hack-a-thon, trong khi đó, trong một vài tuần.

1199
01:13:40,660 --> 01:13:44,340
Thông thường, chúng tôi làm điều này trên một cơ sở cơ sở xổ số vì lợi ích,

1200
01:13:44,340 --> 01:13:47,680
nhưng tỷ lệ cược là chúng tôi sẽ phải mất một vài trăm người trong chúng ta trong xe buýt đưa đón từ Harvard Square

1201
01:13:47,680 --> 01:13:51,540
Kendall Quảng trường nơi mà Microsoft có một cơ sở xinh đẹp aptly gọi là "NERD" -

1202
01:13:51,540 --> 01:13:53,830
Trung tâm Nghiên cứu và Phát triển New England.

1203
01:13:53,830 --> 01:13:56,380
Chúng tôi sẽ đến đó khoảng 8 pm Chúng tôi sẽ có một số thực phẩm.

1204
01:13:56,380 --> 01:13:58,160
Khoảng 1 giờ sáng, chúng tôi sẽ có thêm một số thực phẩm.

1205
01:13:58,160 --> 01:14:02,150
Khoảng 5 nếu bạn vẫn còn tỉnh táo, chúng ta sẽ đi qua IHOP hoặc đưa bạn trở lại khuôn viên trường.

1206
01:14:02,150 --> 01:14:04,380
Mục tiêu là để nhảy vào các dự án cuối cùng

1207
01:14:04,380 --> 01:14:06,190
cùng với các bạn cùng lớp và nhân viên.

1208
01:14:06,190 --> 01:14:08,280
Sau đó, một vài ngày sau đó là Hội chợ CS50,

1209
01:14:08,280 --> 01:14:10,990
mà thực sự có nghĩa là một cơ hội cho các bạn để giới thiệu công việc của bạn

1210
01:14:10,990 --> 01:14:12,700
và thành tựu trong học kỳ

1211
01:14:12,700 --> 01:14:15,610
trong khi kề vai sát cánh với nhau và nhận được một cảm giác về những gì mọi người đã làm.

1212
01:14:15,610 --> 01:14:17,850
Với mà nói, cảm ơn nhiều đến Tommy và Joseph,

1213
01:14:17,850 --> 01:14:19,960
và chúng ta sẽ thấy bạn vào thứ hai.

1214
01:14:19,960 --> 01:14:24,070
 [Vỗ tay]