1
00:00:00,000 --> 00:00:02,690
[Powered by Google Translate] [Hội thảo: jQuery]

2
00:00:02,690 --> 00:00:04,790
[Vipul Shekhawat, Đại học Harvard]

3
00:00:04,790 --> 00:00:08,000
[Đây là CS50.] [CS50.TV]

4
00:00:08,000 --> 00:00:10,640
Nếu bạn đang theo cùng ở nhà, bạn thực sự có thể truy cập vào các slide của mình trực tuyến

5
00:00:10,640 --> 00:00:13,310
bằng cách vào liên kết này.

6
00:00:13,310 --> 00:00:18,650
Đó là TjjRWj, trên bit.ly.

7
00:00:18,650 --> 00:00:20,700
Bạn cũng có thể chỉ cần vào địa chỉ URL trực tiếp,

8
00:00:20,700 --> 00:00:27,300
đó là cloud.cs50.net / ~ vshekhawat, đó là tên của tôi,

9
00:00:27,300 --> 00:00:32,409
và jquery.

10
00:00:32,409 --> 00:00:34,920
Tôi rất khuyến khích bạn theo cùng, nếu bạn đang xem ở nhà,

11
00:00:34,920 --> 00:00:40,650
và nếu bạn đang ở đây, cũng được, bởi vì đây là một bài thuyết trình khá tương tác.

12
00:00:40,650 --> 00:00:43,160
>> Vì vậy, hôm nay tôi sẽ nói về jQuery, và câu hỏi đầu tiên là,

13
00:00:43,160 --> 00:00:45,300
jQuery là gì?

14
00:00:45,300 --> 00:00:47,090
Năm nay, tôi biết các bạn đã không được JavaScript

15
00:00:47,090 --> 00:00:51,080
càng chi tiết như chúng tôi có trong năm qua.

16
00:00:51,080 --> 00:00:53,150
JavaScript là, trước hết, chỉ là một ngôn ngữ phía máy khách

17
00:00:53,150 --> 00:00:58,390
mà bạn sử dụng để chạy các kịch bản và mã số trên máy tính của người dùng.

18
00:00:58,390 --> 00:01:00,660
Vì vậy, bạn có một máy chủ cung cấp các trang web với mọi người,

19
00:01:00,660 --> 00:01:02,600
nhưng bạn có thể muốn làm công cụ trên máy tính của họ,

20
00:01:02,600 --> 00:01:08,060
yêu cầu máy tính của họ để gửi yêu cầu đến máy chủ của bạn mỗi 30 giây hoặc một cái gì đó như thế.

21
00:01:08,060 --> 00:01:10,420
Bạn có thể làm điều đó sử dụng JavaScript.

22
00:01:10,420 --> 00:01:13,190
JQuery chỉ cung cấp chức năng hơn trên JavaScript

23
00:01:13,190 --> 00:01:15,680
mà không công cụ bổ sung cho bạn.

24
00:01:15,680 --> 00:01:17,710
Nếu bạn nhìn vào các nội dung trên,

25
00:01:17,710 --> 00:01:21,410
mô tả một số các công cụ mà bạn có thể làm.

26
00:01:21,410 --> 00:01:23,500
Vì vậy, tổng thể, nó được tạo ra trong tháng 1 năm 2006.

27
00:01:23,500 --> 00:01:26,560
Nó lần đầu tiên được hình thành trong các tháng 8 năm 2005.

28
00:01:26,560 --> 00:01:31,370
Nó được khoảng một vài năm, và nó thực sự là một phần của xu hướng Web 2.0 mới

29
00:01:31,370 --> 00:01:34,330
đó là làm Internet để sáng bóng.

30
00:01:34,330 --> 00:01:37,630
Đó là thư viện JavaScript được sử dụng rộng rãi nhất.

31
00:01:37,630 --> 00:01:41,450
Hơn 19,6 triệu trang web đang sử dụng nó, và việc sử dụng vẫn còn tăng

32
00:01:41,450 --> 00:01:45,640
theo builtwith.com, trong đó, rõ ràng, trong năm qua,

33
00:01:45,640 --> 00:01:49,710
vừa được liên tục tăng khá tuyến tính.

34
00:01:49,710 --> 00:01:52,870
Trong số 10 triệu trang web, bạn vẫn có -

35
00:01:52,870 --> 00:01:55,180
khoảng 40% trong số họ hiện đang sử dụng nó.

36
00:01:55,180 --> 00:01:58,540
Facebook sử dụng nó, rất nhiều các trang web khác hiện đang sử dụng nó.

37
00:01:58,540 --> 00:02:01,540
Bạn có thể nhìn vào những thống kê trên của riêng bạn, nếu bạn muốn.

38
00:02:01,540 --> 00:02:05,820
Và bạn có thể nói cho nó VN bởi vì nó có một nền tảng và 13 thành viên hội đồng quản trị,

39
00:02:05,820 --> 00:02:11,910
cùng với một đội ngũ 20 người làm việc trên nó một cách thường xuyên.

40
00:02:11,910 --> 00:02:16,110
Vì vậy, nó được sử dụng rất rộng rãi, nó có một URL org., Đó là ưa thích,

41
00:02:16,110 --> 00:02:21,660
nó có spin-off cho các công cụ khác, vì vậy đó là một vấn đề lớn.

42
00:02:21,660 --> 00:02:24,510
>> Tại sao bạn nên sử dụng nó? JQuery là rất nhẹ.

43
00:02:24,510 --> 00:02:27,270
Có nghĩa là nó không phải là một tập tin rất lớn. Bạn có thể tải về

44
00:02:27,270 --> 00:02:31,540
các tập tin minified, đó là không có tất cả các không gian màu trắng và các ý kiến, và nó chỉ có 32 MB.

45
00:02:31,540 --> 00:02:33,600
Vì vậy, thật dễ dàng để chỉ quăng lên trang web của bạn

46
00:02:33,600 --> 00:02:35,910
và chỉ bắt đầu sử dụng nó.

47
00:02:35,910 --> 00:02:39,630
Nó cũng được viết rất hiệu quả, vì vậy nó không mất rất nhiều -

48
00:02:39,630 --> 00:02:42,550
nó không làm chậm trang web của bạn nhiều khi bạn sử dụng nó.

49
00:02:42,550 --> 00:02:45,770
Nó cho phép bạn thực hiện những điều mà trước đây không khả thi.

50
00:02:45,770 --> 00:02:47,790
Có một số khía cạnh của chức năng,

51
00:02:47,790 --> 00:02:51,780
như tạo ra hình ảnh động, bình thường có thể rất, rất khó khăn để làm.

52
00:02:51,780 --> 00:02:54,300
Nhưng trong jQuery, chúng thật sự rất đơn giản.

53
00:02:54,300 --> 00:02:57,040
Và có một số những điều gây phiền nhiễu để làm,

54
00:02:57,040 --> 00:02:59,610
có thể trong JavaScript, như gửi một yêu cầu POST,

55
00:02:59,610 --> 00:03:02,190
nhưng để gửi yêu cầu đến một máy chủ, bạn phải viết

56
00:03:02,190 --> 00:03:04,320
năm hoặc sáu hoặc bảy dòng mã.

57
00:03:04,320 --> 00:03:07,200
Bây giờ bạn chỉ có thể làm điều đó trong một dòng mã, trong một cuộc gọi chức năng duy nhất.

58
00:03:07,200 --> 00:03:11,790
Điều đó thực sự đơn giản hoá rất nhiều những thứ mà bạn đang làm.

59
00:03:11,790 --> 00:03:15,950
Và tất cả các trẻ em mát mẻ đang sử dụng nó. Bằng cách đó, tôi có nghĩa là tôi.

60
00:03:15,950 --> 00:03:19,270
Trong dự án cuối cùng của tôi năm ngoái, đó là news.whrb.org,

61
00:03:19,270 --> 00:03:22,530
đó là dành cho các đài phát thanh, tôi tạo ra blog này

62
00:03:22,530 --> 00:03:29,750
nơi tổ chức tất cả các chương trình mà chúng tôi đã thực hiện và các tập tin MP3 cho họ.

63
00:03:29,750 --> 00:03:32,070
Bạn có thể duyệt qua các chương trình trước đây,

64
00:03:32,070 --> 00:03:34,130
và nó là tất cả được thực hiện sử dụng jQuery. Bạn có thể nói

65
00:03:34,130 --> 00:03:37,340
vì tất cả những hình ảnh động, về cơ bản.

66
00:03:37,340 --> 00:03:42,360
Vì vậy, nếu bạn có - nếu bạn đang tạo ra một bài mới,

67
00:03:42,360 --> 00:03:45,980
bạn nhìn thấy những slideDowns ít, đó là tất cả được thực hiện sử dụng jQuery.

68
00:03:45,980 --> 00:03:49,140
Và fade này - vì vậy mà loại công cụ đều được làm sử dụng jQuery,

69
00:03:49,140 --> 00:03:52,720
và bạn không cần phải liên tục tải lại trang web để điều hướng trang web.

70
00:03:52,720 --> 00:03:57,220
Một điều thú vị đó là thực hiện sử dụng jQuery là trình bày này.

71
00:03:57,220 --> 00:03:59,700
Tôi đang sử dụng điều này mã nguồn mở được gọi là scrolldeck,

72
00:03:59,700 --> 00:04:03,250
mà ai đó đã viết trên đầu trang của jQuery.

73
00:04:03,250 --> 00:04:04,870
Nếu bạn thực sự nhìn vào mã nguồn, bạn có thể thấy rằng

74
00:04:04,870 --> 00:04:07,830
họ đang sử dụng ký hiệu đô la này, dấu hiệu đô la

75
00:04:07,830 --> 00:04:12,110
được sử dụng trong jQuery để biểu thị rằng một chức năng là một chức năng jQuery.

76
00:04:12,110 --> 00:04:15,020
Vì vậy, họ đang định nghĩa một wrapper trên đầu trang của jQuery

77
00:04:15,020 --> 00:04:18,570
cho phép bạn thực hiện một bài thuyết trình như thế này,

78
00:04:18,570 --> 00:04:21,200
và bạn có thể thấy rằng ở đây họ bao gồm cả các tập tin jQuery ban đầu,

79
00:04:21,200 --> 00:04:24,120
đó là những gì bạn sẽ phải bao gồm nếu muốn sử dụng jQuery

80
00:04:24,120 --> 00:04:30,450
trong các trang web của riêng bạn.

81
00:04:30,450 --> 00:04:32,790
>> Chạm vào đó, làm thế nào để bạn cài đặt nó?

82
00:04:32,790 --> 00:04:36,150
Bạn chỉ có thể đi đến jQuery.com và tải về các tập tin,

83
00:04:36,150 --> 00:04:38,320
thêm nó vào một thư mục web và bao gồm nó.

84
00:04:38,320 --> 00:04:42,200
Vì vậy, chỉ trên đầu trang, trong các thẻ đầu của tập tin HTML của bạn

85
00:04:42,200 --> 00:04:45,400
của tập tin HTML chính của bạn, chỉ cần có mà dòng mã

86
00:04:45,400 --> 00:04:49,490
với phiên bản chính xác mà phiên bản của jQuery bạn đang sử dụng.

87
00:04:49,490 --> 00:04:51,340
Bạn có thể tải nó bằng cách vào jQuery.com,

88
00:04:51,340 --> 00:04:55,130
nhấp vào "tải về jQuery," và bạn đã có nó. Đó là nó.

89
00:04:55,130 --> 00:04:58,880
Và thực sự, chúng ta có thể có một cái nhìn vào những gì nó như thế nào.

90
00:04:58,880 --> 00:05:01,080
Nếu bạn bấm vào tải về tại đây, jQuery là này.

91
00:05:01,080 --> 00:05:05,260
Nó chỉ là một tập tin JavaScript lớn mà làm tất cả những thứ ma thuật cho bạn.

92
00:05:05,260 --> 00:05:09,270
Đây là phiên bản minified, đó là không thể đọc được ở tất cả.

93
00:05:09,270 --> 00:05:13,180
Bạn cũng có thể xem xét các phiên bản phát triển, đó là có thể đọc được

94
00:05:13,180 --> 00:05:15,370
nhưng vẫn còn rất, rất dài.

95
00:05:15,370 --> 00:05:17,980
Đó là rất nhiều thứ trong đó.

96
00:05:17,980 --> 00:05:20,240
Bạn cũng có thể liên kết đến phiên bản lưu trữ của Google của nó.

97
00:05:20,240 --> 00:05:23,820
Vì vậy, mà sẽ cho phép bạn chỉ dựa vào Google để cung cấp nó.

98
00:05:23,820 --> 00:05:29,310
Họ cung cấp tất cả các phiên bản của nó, có sẵn ở tất cả các lần.

99
00:05:29,310 --> 00:05:31,530
Vì vậy, bạn có thể có thể dựa vào Google để lưu trữ nó cho bạn.

100
00:05:31,530 --> 00:05:33,270
Hoặc bạn có thể liên kết đến phiên bản mới nhất của jQuery.

101
00:05:33,270 --> 00:05:36,400
Họ có một URL đó là luôn luôn cập nhật phiên bản mới nhất.

102
00:05:36,400 --> 00:05:40,850
Đó là jQuery mới nhất, và có một vấn đề với điều đó,

103
00:05:40,850 --> 00:05:44,350
đó là nếu jQuery cập nhật và một số chức năng trước

104
00:05:44,350 --> 00:05:47,250
họ đã trở thành retrograded hoặc phản đối,

105
00:05:47,250 --> 00:05:49,620
nó có thể không - nó có thể bắt đầu không được hỗ trợ nữa.

106
00:05:49,620 --> 00:05:52,940
Vì vậy, nếu bạn viết một trang web sử dụng phiên bản 1.8.2,

107
00:05:52,940 --> 00:05:55,000
bởi các phiên bản thời gian 2,7 đi ra

108
00:05:55,000 --> 00:05:57,000
một số chức năng bạn đã viết không làm việc nữa.

109
00:05:57,000 --> 00:05:59,930
Vì vậy, nó tốt hơn để chỉ cần tải về các tập tin kB 32,

110
00:05:59,930 --> 00:06:04,100
đặt nó trên trang web của bạn, và nó sẽ làm việc mãi mãi.

111
00:06:04,100 --> 00:06:07,450
>> Tôi sẽ đi trước và bắt đầu nói về các chức năng thực tế của jQuery.

112
00:06:07,450 --> 00:06:13,090
Điều đầu tiên là bộ chọn. Đây là những gì jQuery ban đầu được hình thành để cung cấp.

113
00:06:13,090 --> 00:06:15,500
Và bạn có thể bấm vào tài liệu để xem xét

114
00:06:15,500 --> 00:06:18,690
các tài liệu hướng dẫn chi tiết cho các bộ chọn tôi sẽ được bao gồm.

115
00:06:18,690 --> 00:06:24,120
Ý tưởng đằng sau bộ chọn là bạn có thể chọn các phần tử HTML trên một trang.

116
00:06:24,120 --> 00:06:28,790
Các yếu tố trên một trang có ID và các lớp học và các khía cạnh xác định khác cho họ.

117
00:06:28,790 --> 00:06:30,500
Ngoài ra còn có - họ trong đơn đặt hàng khác nhau.

118
00:06:30,500 --> 00:06:32,570
Một số thời gian họ đang lồng vào bên nhau.

119
00:06:32,570 --> 00:06:38,120
JQuery cho phép bạn xây dựng các truy vấn đơn giản mà lấy các yếu tố từ trang.

120
00:06:38,120 --> 00:06:41,890
Sau đó, bạn có thể thao tác các yếu tố sử dụng chức năng jQuery,

121
00:06:41,890 --> 00:06:43,990
đó là phần thao tác chúng tôi sẽ nhận được để sau này.

122
00:06:43,990 --> 00:06:46,040
Bạn có thể thay đổi HTML, thay đổi CSS,

123
00:06:46,040 --> 00:06:50,500
bạn cũng có thể sinh động và thêm chức năng kích hoạt các sự kiện nhất định.

124
00:06:50,500 --> 00:06:52,710
Vì vậy, ví dụ, nếu một cái gì đó nhấp vào, bạn muốn một cái gì đó xảy ra,

125
00:06:52,710 --> 00:06:55,210
bạn có thể làm điều đó bằng cách sử dụng jQuery là tốt.

126
00:06:55,210 --> 00:06:57,380
Và có một số lượng lớn các cách để lựa chọn các yếu tố.

127
00:06:57,380 --> 00:07:00,310
Hầu hết chúng tôi đã không bao giờ được sử dụng, nhưng có những cái cơ bản,

128
00:07:00,310 --> 00:07:02,340
đó là khá quan trọng.

129
00:07:02,340 --> 00:07:05,750
Các yếu tố chọn, ví dụ, nếu bạn chỉ cần chọn bất cứ điều gì

130
00:07:05,750 --> 00:07:10,640
đó là một div - tôi thực sự có mã mở cho trình bày slide này.

131
00:07:10,640 --> 00:07:13,450
Vì vậy, ví dụ, đây là các slide đầu tiên.

132
00:07:13,450 --> 00:07:17,430
Ở đây chúng tôi có một div. Nếu chúng ta thực sự chọn tất cả các divs trên trang web,

133
00:07:17,430 --> 00:07:22,300
nó sẽ chỉ cho chúng ta một mảng của tất cả các divs tồn tại trong tập tin này.

134
00:07:22,300 --> 00:07:27,040
Bộ chọn ID cho phép bạn chọn bất cứ điều gì với một ID nhất định.

135
00:07:27,040 --> 00:07:32,230
Vì vậy, nếu điều này, ví dụ, điều này có ID "những gì"

136
00:07:32,230 --> 00:07:37,160
và nếu chúng ta đã làm điều này với # những gì thay vì một số ID,

137
00:07:37,160 --> 00:07:42,920
nó sẽ chỉ trả lại một mảng có một yếu tố duy nhất và đó là yếu tố của trang.

138
00:07:42,920 --> 00:07:45,490
Chúng tôi cũng có thể kết hợp bộ chọn cách này bằng cách

139
00:07:45,490 --> 00:07:48,260
chỉ chọn những thứ với ID mà divs.

140
00:07:48,260 --> 00:07:51,810
Vì vậy, yeah. Chỉ chọn divs có ID.

141
00:07:51,810 --> 00:07:55,260
Cho lớp bạn chỉ cần sử dụng một dấu chấm, đó là điều tương tự như CSS.

142
00:07:55,260 --> 00:07:57,500
Con cháu cũng làm việc, vì thế nếu bạn có một số lớp

143
00:07:57,500 --> 00:08:00,170
và nó đã lồng vào các yếu tố bên trong nó - như vậy, ví dụ,

144
00:08:00,170 --> 00:08:03,260
có một số lớp học và nó có một thẻ neo liên kết đến một trang khác,

145
00:08:03,260 --> 00:08:08,510
bạn có thể sử dụng cú pháp này để lấy liên kết.

146
00:08:08,510 --> 00:08:12,420
Bạn cũng có thể chọn nhiều thứ cùng một lúc, chỉ cần tách chúng bằng dấu phẩy,

147
00:08:12,420 --> 00:08:17,360
sử dụng bất kỳ chọn bạn muốn, và bạn sẽ chọn tất cả chúng cùng một lúc, trong một mảng duy nhất.

148
00:08:17,360 --> 00:08:19,650
Và sau đó có cũng là không chọn, vì vậy bạn có thể chọn tất cả các divs

149
00:08:19,650 --> 00:08:24,210
mà không có một số lớp học cụ thể.

150
00:08:24,210 --> 00:08:28,790
Và đó chỉ là một cách hữu ích để có được giới thiệu cách thức lựa chọn các công trình này.

151
00:08:28,790 --> 00:08:32,270
Tôi sẽ chỉ cho một số ví dụ cụ thể trong một giây.

152
00:08:32,270 --> 00:08:35,480
>> Bộ chọn cao cấp là - đây chỉ là một vài ví dụ.

153
00:08:35,480 --> 00:08:38,840
Có hàng chục trong số này, nhưng nếu bạn muốn chọn tất cả các thẻ hình ảnh

154
00:08:38,840 --> 00:08:42,799
trong một số yếu tố, sau đó bạn chỉ cần làm: hình ảnh.

155
00:08:42,799 --> 00:08:45,340
Nếu bạn muốn chọn các yếu tố thậm chí, ví dụ, nếu có 20 người trong số họ,

156
00:08:45,340 --> 00:08:48,290
bạn muốn chọn 0, 2, 4, 6 và như vậy,

157
00:08:48,290 --> 00:08:51,630
bạn làm: thậm chí, hoặc bạn cũng có thể làm: lẻ.

158
00:08:51,630 --> 00:08:55,470
Đây là những bộ chọn giả, có nghĩa là họ thực sự tính toán

159
00:08:55,470 --> 00:09:00,960
mọi phần tử khác hơn là chỉ cần đi và chọn tất cả trong số họ.

160
00:09:00,960 --> 00:09:05,510
Bạn cũng có thể - mỗi phần tử cũng có thể có các thuộc tính cụ thể.

161
00:09:05,510 --> 00:09:10,580
Vì vậy, ví dụ, class = trung tâm cũng là một thuộc tính.

162
00:09:10,580 --> 00:09:16,500
Đối với thẻ neo này, href, siêu văn bản tham khảo, là một thuộc tính cũng có.

163
00:09:16,500 --> 00:09:21,150
Vì vậy, bạn có thể chọn một cái gì đó có liên kết đến một trang cụ thể hoặc chỉ - nó thực sự nói chung.

164
00:09:21,150 --> 00:09:25,410
Bạn có thể chọn bất cứ điều gì với bất kỳ thuộc tính mà bạn muốn.

165
00:09:25,410 --> 00:09:27,470
Và sau đó, cũng có thể, thuộc tính chứa.

166
00:09:27,470 --> 00:09:30,420
Nếu bạn, ví dụ, muốn chọn tất cả các yếu tố đầu vào

167
00:09:30,420 --> 00:09:32,700
có chữ "vượt qua" như tên gọi của chúng,

168
00:09:32,700 --> 00:09:37,560
nếu một trang có một khối văn bản đầu vào

169
00:09:37,560 --> 00:09:41,050
đó được gọi là "mật khẩu", đó sẽ là một cách để bạn có thể chọn đó.

170
00:09:41,050 --> 00:09:43,020
Và có nhiều hơn nữa. Bạn có thể đi trước và xem xét các tài liệu

171
00:09:43,020 --> 00:09:46,950
và xem các ví dụ cụ thể về cách hoạt động.

172
00:09:46,950 --> 00:09:48,840
>> Điều tiếp theo là thao tác DOM.

173
00:09:48,840 --> 00:09:52,500
Sau khi chúng tôi lựa chọn các yếu tố, chúng tôi sẽ muốn thực sự làm mọi thứ với họ.

174
00:09:52,500 --> 00:09:55,500
Vì vậy, đến nay chúng tôi đã không nhìn thấy gì cả, nhưng nếu bạn nhìn vào các tài liệu,

175
00:09:55,500 --> 00:09:57,950
có thực sự rất nhiều mà chúng ta có thể làm.

176
00:09:57,950 --> 00:10:02,900
Tại thời điểm này, chúng ta sẽ chọn các yếu tố về trình bày này

177
00:10:02,900 --> 00:10:04,890
và vận dụng chúng sử dụng jQuery.

178
00:10:04,890 --> 00:10:08,290
Bởi vì điều này được thực hiện bằng cách sử dụng jQuery, chúng ta có thể truy cập vào thư viện jQuery,

179
00:10:08,290 --> 00:10:13,580
và chúng ta có thể sử dụng các chức năng trong mã này.

180
00:10:13,580 --> 00:10:16,200
Một điều hữu ích mà bạn có thể không biết về là giao diện điều khiển.

181
00:10:16,200 --> 00:10:19,340
Và Google Chrome là những gì tôi đang sử dụng. Bạn có thể bấm alt lệnh J

182
00:10:19,340 --> 00:10:21,720
hoặc alt kiểm soát J để mở giao diện điều khiển.

183
00:10:21,720 --> 00:10:26,130
Trong Firefox tôi nghĩ rằng đó là lệnh thay đổi K hoặc kiểm soát sự thay đổi K.

184
00:10:26,130 --> 00:10:28,880
Trong Safari, bạn phải đi thay đổi một số cài đặt.

185
00:10:28,880 --> 00:10:35,460
Có một liên kết nếu bạn muốn làm điều đó, nhưng tôi khuyên bạn nên nhận Chrome hoặc Firefox.

186
00:10:35,460 --> 00:10:37,750
Vì vậy, chúng ta hãy mở giao diện điều khiển, nó xuống đây.

187
00:10:37,750 --> 00:10:41,170
Nó cho phép bạn về cơ bản chỉ cần làm bất cứ điều gì bạn muốn.

188
00:10:41,170 --> 00:10:45,100
Vì vậy, bạn có thể chỉ cần gõ vào tạo ra một biến gọi là x,

189
00:10:45,100 --> 00:10:49,200
x = 5, chúng ta hãy xem x + 2 là những gì.

190
00:10:49,200 --> 00:10:57,670
Bạn thậm chí có thể làm một cái gì đó như CS + chúng ta hãy xem, x + 45, sẽ được CS50.

191
00:10:57,670 --> 00:11:00,530
Bạn chỉ có thể làm một số công cụ JavaScript điển hình.

192
00:11:00,530 --> 00:11:02,730
Nhưng bạn cũng có thể làm jQuery trong đây.

193
00:11:02,730 --> 00:11:06,200
>> Vì vậy, chúng ta hãy nhìn vào khía cạnh đầu tiên ở đây.

194
00:11:06,200 --> 00:11:09,500
Chúng ta sẽ tạo ra một biến gọi là HTML, mà là một chuỗi.

195
00:11:09,500 --> 00:11:15,890
Nó có một thẻ đoạn trong nó, đó được gọi là một số văn bản mới.

196
00:11:15,890 --> 00:11:19,420
Vì vậy, chúng ta có HTML này, đó là một số văn bản mới, trong khoản thẻ.

197
00:11:19,420 --> 00:11:21,800
Bây giờ chúng ta thực sự muốn thêm nó vào trang.

198
00:11:21,800 --> 00:11:28,310
Tôi đặt nó lên để HTML cho đoạn này, danh hiệu này đây, là nối thêm ID.

199
00:11:28,310 --> 00:11:32,320
Nếu chúng ta chọn nối thêm ID và sau đó gắn thêm vào nó

200
00:11:32,320 --> 00:11:34,560
biến HTML tôi chỉ cần tạo ra,

201
00:11:34,560 --> 00:11:40,370
nó sẽ thêm HTML là lúc kết thúc, ngay sau khi thẻ đoạn này.

202
00:11:40,370 --> 00:11:43,730
Vì vậy, nếu chúng ta làm điều đó - chúng tôi đã chọn đoạn này,

203
00:11:43,730 --> 00:11:47,590
và chúng tôi đã được gọi là chức năng phụ thêm với biến HTML Tôi chỉ cần thêm,

204
00:11:47,590 --> 00:11:50,960
nó sẽ thêm rằng văn bản mới phải có trên trang.

205
00:11:50,960 --> 00:11:54,970
Chúng tôi cũng có thể thêm vào trước, có nghĩa là nó sẽ đi trước, vào lúc bắt đầu của phần tử đó.

206
00:11:54,970 --> 00:11:58,290
Vì vậy, có một số văn bản mới vào đầu và sau đó.

207
00:11:58,290 --> 00:12:01,660
Tôi có thể đi trước và làm mới để thoát khỏi công cụ này tôi đã chỉ cần thực hiện.

208
00:12:01,660 --> 00:12:05,280
Nhưng đó là một ví dụ về cách bạn có thể sử dụng các Thêm tiền tố và nối thêm các phương pháp

209
00:12:05,280 --> 00:12:08,910
để thao tác các công cụ trên trang, thêm một số HTML.

210
00:12:08,910 --> 00:12:11,080
>> Bạn cũng có thể thay đổi các lớp học.

211
00:12:11,080 --> 00:12:14,970
Trở lại trong tập tin phong cách này, tôi đã tạo ra cho lớp chiến thắng

212
00:12:14,970 --> 00:12:19,990
có văn bản màu đỏ, một số màu nền, và một cái bóng văn bản.

213
00:12:19,990 --> 00:12:23,810
Có vẻ ghê gớm, nhưng tôi có thể thực sự -

214
00:12:23,810 --> 00:12:26,410
đoạn này tương ứng với đẳng cấp ID.

215
00:12:26,410 --> 00:12:29,860
Vì vậy, tôi có thể thêm các lớp học để giành chiến thắng.

216
00:12:29,860 --> 00:12:31,870
Tôi có thể thực hiện điều này trong giao diện điều khiển,

217
00:12:31,870 --> 00:12:35,480
và điều đó sẽ thêm lớp đó, và bây giờ nó trông ghê tởm, như mong đợi.

218
00:12:35,480 --> 00:12:39,680
CSS sẽ tự động được áp dụng cho các lớp học mà bạn -

219
00:12:39,680 --> 00:12:42,680
nếu có CSS ​​cho một lớp học, nó sẽ tự động được áp dụng

220
00:12:42,680 --> 00:12:44,680
nếu bạn thay đổi các lớp của một phần tử.

221
00:12:44,680 --> 00:12:49,230
Sau đó chúng tôi chỉ có thể loại bỏ nó bằng cách sử lớp loại bỏ.

222
00:12:49,230 --> 00:12:53,690
Vì vậy, nếu bạn có một số lớp học được xác định trước như màu đỏ hoặc nhấn mạnh,

223
00:12:53,690 --> 00:12:55,990
và sau đó bạn muốn áp dụng những yếu tố,

224
00:12:55,990 --> 00:12:58,230
bạn không cần phải làm tất cả những CSS phong cách mỗi lần.

225
00:12:58,230 --> 00:13:01,510
Bạn chỉ có thể thêm các lớp học để một phần tử, và sau đó nó sẽ tự động trở thành -

226
00:13:01,510 --> 00:13:05,580
nó sẽ tự động tìm thích hợp cho lớp đó.

227
00:13:05,580 --> 00:13:07,900
Chúng tôi cũng có thể loại bỏ những thứ, vì thế tôi sẽ chọn tất cả các divs

228
00:13:07,900 --> 00:13:10,830
trên trang web và loại bỏ chúng.

229
00:13:10,830 --> 00:13:13,990
Những gì đang có sẽ trông như thế nào?

230
00:13:13,990 --> 00:13:16,170
Nó sẽ trông giống như không có gì, vì vậy có thực sự là không có gì trái.

231
00:13:16,170 --> 00:13:18,170
Trình bày của tôi đã biến mất.

232
00:13:18,170 --> 00:13:21,290
Tôi có thể làm mới và mang nó trở lại, may mắn thay,

233
00:13:21,290 --> 00:13:24,420
vì nó chỉ chạy một lần,

234
00:13:24,420 --> 00:13:29,460
nhưng đó là một ví dụ về loại bỏ, nếu bạn muốn phá hủy hoàn toàn một yếu tố ra ngoài trang.

235
00:13:29,460 --> 00:13:33,180
>> Bạn cũng có thể ghi đè lên, và tôi sẽ chọn tất cả các khoản thẻ trên trang

236
00:13:33,180 --> 00:13:36,850
và đi vào bên trong chúng và thay thế văn bản bất cứ điều gì họ có trong chúng

237
00:13:36,850 --> 00:13:39,690
chỉ với từ "thử nghiệm".

238
00:13:39,690 --> 00:13:46,520
Nếu bạn làm điều này, bạn sẽ thay thế tất cả các đoạn văn trên trang với thử nghiệm này.

239
00:13:46,520 --> 00:13:49,150
Vâng. Tất cả chúng được thay thế bằng thử nghiệm.

240
00:13:49,150 --> 00:13:53,270
Vì vậy, đó là một ví dụ của việc truy cập các văn bản và ghi đè lên nó.

241
00:13:53,270 --> 00:13:57,490
Bạn cũng có thể lấy thông tin, và điều này là thực sự mát mẻ cho các hộp đầu vào.

242
00:13:57,490 --> 00:14:00,470
Nếu bạn có một hộp đầu vào mà mọi người đang gõ nội dung vào,

243
00:14:00,470 --> 00:14:03,880
mọi người đang gõ nội dung vào nó,

244
00:14:03,880 --> 00:14:09,030
ở đây chúng tôi chọn đầu vào, bất kỳ thẻ đầu vào với một loại văn bản.

245
00:14:09,030 --> 00:14:13,800
Trong trường hợp này, chỉ có một hộp đầu vào trong toàn bộ trình bày,

246
00:14:13,800 --> 00:14:17,260
vì vậy chúng ta chỉ cần chọn đầu tiên, và sau đó chúng ta gọi hàm val trên nó.

247
00:14:17,260 --> 00:14:19,570
Trả về giá trị, và cho một hộp đầu vào,

248
00:14:19,570 --> 00:14:24,330
giá trị chỉ là bất cứ điều gì xảy ra bên trong nó.

249
00:14:24,330 --> 00:14:31,880
Vì vậy, nếu chúng ta làm điều này, nó chỉ trả về các công cụ chuỗi.

250
00:14:31,880 --> 00:14:36,860
Và nếu chúng ta gọi nó một lần nữa sau khi viết các công cụ hơn, nó biến thành công cụ hơn.

251
00:14:36,860 --> 00:14:40,760
Đó là một cách tuyệt vời để truy cập vào các yếu tố của một hộp đầu vào, và sau đó kiểm tra,

252
00:14:40,760 --> 00:14:45,060
đây là một địa chỉ email hợp lệ, đây là một ngày hợp lệ, ví dụ.

253
00:14:45,060 --> 00:14:49,600
Bạn chỉ có thể lấy thứ ngay lập tức như mọi người đang gõ nó,

254
00:14:49,600 --> 00:14:54,830
và sau đó kiểm tra xem đó là hợp lệ, gửi lại cho máy chủ, làm bất cứ điều gì bạn muốn với nó.

255
00:14:54,830 --> 00:14:57,720
Và đó là cách bạn truy cập những gì bên trong những hộp.

256
00:14:57,720 --> 00:15:00,090
>> Bạn cũng có thể chỉnh sửa CSS trực tiếp, vì vậy thay vì thêm

257
00:15:00,090 --> 00:15:02,510
một lớp học mà có một số đặc tính được xác định trước,

258
00:15:02,510 --> 00:15:08,120
bạn chỉ có thể thêm bất cứ điều gì CSS bạn muốn bất cứ điều gì.

259
00:15:08,120 --> 00:15:10,350
Vì vậy, hãy chọn cơ thể, đó là toàn bộ trình bày,

260
00:15:10,350 --> 00:15:14,370
và màu sắc là tài sản xác định những gì màu sắc của văn bản.

261
00:15:14,370 --> 00:15:19,420
Nếu chúng ta thay đổi nó thành màu đỏ, tất cả các văn bản trong trang web sẽ chuyển sang màu đỏ.

262
00:15:19,420 --> 00:15:26,310
Chúng ta có thể làm điều gì đó như nền màu xanh,

263
00:15:26,310 --> 00:15:30,680
có chúng tôi đi, nó đẹp.

264
00:15:30,680 --> 00:15:33,840
Bạn có thể làm bất cứ điều gì bạn muốn với điều này.

265
00:15:33,840 --> 00:15:39,250
Sử dụng thuộc tính CSS, bạn thực sự có thể thay đổi bất cứ điều gì như thế nào nhìn vào bất kỳ lúc nào.

266
00:15:39,250 --> 00:15:41,630
Điều tiếp theo là hiệu ứng.

267
00:15:41,630 --> 00:15:45,710
Hiệu ứng về cơ bản những điều tương tự như thay đổi CSS,

268
00:15:45,710 --> 00:15:48,870
nhưng họ thực sự cung cấp một số hình ảnh thêm cho nó.

269
00:15:48,870 --> 00:15:53,380
Vì vậy, thay vì chỉ hiển thị hoặc ẩn một cái gì đó hoặc thay đổi màu sắc,

270
00:15:53,380 --> 00:15:56,130
bạn thực sự có thể làm cho nó hoạt hình.

271
00:15:56,130 --> 00:16:00,760
Đây là tài liệu hướng dẫn, nếu bạn muốn có một cái nhìn tại tài liệu phong phú cho nó.

272
00:16:00,760 --> 00:16:04,760
Nhưng tôi sẽ bao gồm những cái chính.

273
00:16:04,760 --> 00:16:12,030
Có chương trình và tài sản ẩn.

274
00:16:12,030 --> 00:16:14,510
Hiện / ẩn ID thực sự tương ứng với toàn bộ hộp này,

275
00:16:14,510 --> 00:16:18,190
vì vậy nếu tôi giấu nó, nó sẽ biến mất.

276
00:16:18,190 --> 00:16:24,210
Và tôi có thể thấy nó một lần nữa nếu tôi muốn làm cho nó trở lại.

277
00:16:24,210 --> 00:16:26,340
Và nó trở lại. Nó đã không thực sự biến mất,

278
00:16:26,340 --> 00:16:30,670
Tôi không thực sự loại bỏ nó khỏi trang, tôi chỉ thiết lập thuộc tính của tầm nhìn CSS để ẩn

279
00:16:30,670 --> 00:16:34,030
vì vậy bạn không thể nhìn thấy nó nữa.

280
00:16:34,030 --> 00:16:39,250
Ngoài ra còn có trượt lên trượt xuống, cho phép bạn có hiệu ứng này.

281
00:16:39,250 --> 00:16:47,050
Nó trượt lên để biến mất, và sau khi nó biến mất

282
00:16:47,050 --> 00:16:53,210
bạn có thể trượt nó xuống để làm cho nó trở lại. Và bây giờ nó trở lại.

283
00:16:53,210 --> 00:16:57,650
Ngoài ra còn có hiệu ứng mờ dần này, - ID mờ dần tương ứng với ô này.

284
00:16:57,650 --> 00:17:01,200
Nếu tôi phai nó ra, sau đó nó từ từ sẽ biến mất.

285
00:17:01,200 --> 00:17:04,490
Tôi cũng có thể dần giảm âm trong, và nó sẽ trở lại.

286
00:17:04,490 --> 00:17:08,930
Bạn cũng có thể làm mờ dần đến, đó là cụ thể cho các chức năng mờ dần.

287
00:17:08,930 --> 00:17:12,589
Bạn có thể có nó phai cho bất kỳ độ mờ đục cụ thể mà bạn muốn.

288
00:17:12,589 --> 00:17:16,869
Vì vậy, nếu bạn phai nó từ từ để, 5, nó sẽ trở thành một nửa có thể nhìn thấy.

289
00:17:16,869 --> 00:17:22,630
Tôi có thể làm cho nó đi đến 0,1, và trở về 1 để làm cho nó hoàn toàn có thể nhìn thấy một lần nữa.

290
00:17:22,630 --> 00:17:24,760
Đó chỉ là một hình ảnh động mà bạn có thể làm.

291
00:17:24,760 --> 00:17:26,750
>> Ngoài ra còn có tác dụng chuyển đổi.

292
00:17:26,750 --> 00:17:33,410
Vì vậy, tôi sẽ chọn ID chuyển đổi, tương ứng với ô này,

293
00:17:33,410 --> 00:17:38,970
và trên div mà bạn có thể gọi chuyển đổi, nếu nó có thể nhìn thấy nó sẽ trở thành vô hình,

294
00:17:38,970 --> 00:17:42,320
nếu nó không nhìn thấy nó sẽ trở thành có thể nhìn thấy một lần nữa.

295
00:17:42,320 --> 00:17:44,440
Vì vậy, tôi chỉ gọi là chức năng chuyển đổi này hai lần, một trong những đầu tiên là

296
00:17:44,440 --> 00:17:48,380
cùng một điều như ẩn, cuộc gọi thứ hai là điều tương tự như một chương trình.

297
00:17:48,380 --> 00:17:53,510
Và bạn cũng có thể làm điều này với một chuyển đổi phai,

298
00:17:53,510 --> 00:17:55,730
mà làm điều tương tự, ngoại trừ nó thực sự mất dần.

299
00:17:55,730 --> 00:17:59,410
Và điều tương tự với các slide chuyển đổi.

300
00:17:59,410 --> 00:18:01,460
Có những tác động xích là tốt, có nghĩa là

301
00:18:01,460 --> 00:18:05,520
nếu bạn chọn một phần tử và chỉ cần gọi một loạt các phương pháp hình ảnh động trên nó,

302
00:18:05,520 --> 00:18:07,400
nếu bạn muốn nó mờ dần, sau đó trượt xuống,

303
00:18:07,400 --> 00:18:11,040
và sau đó ẩn và sau đó mờ dần trong, nó sẽ làm cho họ liên tiếp.

304
00:18:11,040 --> 00:18:24,920
Vì vậy, biến mất, trở lại - đối với một số lý do, ẩn đã không xảy ra.

305
00:18:24,920 --> 00:18:30,030
Hãy thử nó ra. Vâng, vì vậy nó dần dần biến mất và sau đó nó giảm đi.

306
00:18:30,030 --> 00:18:32,230
Và có rất nhiều hơn. Bạn có thể sử dụng chức năng animate

307
00:18:32,230 --> 00:18:35,370
để tạo ra hình ảnh của riêng bạn, mà là khá phức tạp,

308
00:18:35,370 --> 00:18:38,790
nhưng nó cung cấp cho bạn khả năng mở rộng vô hạn.

309
00:18:38,790 --> 00:18:40,630
Bạn có thể thực hiện bất kỳ loại hoạt hình mà bạn muốn.

310
00:18:40,630 --> 00:18:44,230
Bạn cũng có thể sử dụng hàng đợi xếp hàng nhiều hình ảnh động tại một thời điểm.

311
00:18:44,230 --> 00:18:47,340
Vì vậy, nếu bạn muốn một cái gì đó bay qua trang web,

312
00:18:47,340 --> 00:18:49,860
trượt từ phía trên bên phải bên trái phía dưới, bạn có thể làm điều đó,

313
00:18:49,860 --> 00:18:55,240
và chỉ có một loạt các hành động đi một sau khi khác.

314
00:18:55,240 --> 00:18:57,490
>> Điều tiếp theo chúng ta sẽ nói đến là các sự kiện.

315
00:18:57,490 --> 00:19:02,090
Sự kiện cho phép bạn - cho đến nay, chúng tôi đã chỉ được đánh vật vào giao diện điều khiển

316
00:19:02,090 --> 00:19:04,870
và đó là một cách để làm cho điều này xảy ra,

317
00:19:04,870 --> 00:19:08,020
nhưng trên một trang thực tế, bạn sẽ không thể

318
00:19:08,020 --> 00:19:10,020
làm cho các loại người sử dụng điều đó vào giao diện điều khiển.

319
00:19:10,020 --> 00:19:12,050
Bạn muốn những điều xảy ra tự động.

320
00:19:12,050 --> 00:19:18,060
Do đó, bạn cần phải sử dụng các sự kiện kích hoạt trên một số xảy ra sự kiện nào đó.

321
00:19:18,060 --> 00:19:21,340
Bạn có thể kiểm tra tài liệu cho đầy đủ các chi tiết.

322
00:19:21,340 --> 00:19:24,030
Vì vậy, chúng ta hãy xem. Chúng tôi muốn ẩn hoặc hiển thị các hộp,

323
00:19:24,030 --> 00:19:29,340
nhưng ngay bây giờ nút này không làm bất cứ điều gì bởi vì tôi đã không thực hiện nó được nêu ra.

324
00:19:29,340 --> 00:19:35,420
Tôi sẽ đi đến trang HTML thực tế.

325
00:19:35,420 --> 00:19:38,560
Dưới đây là các slide. Có một div cho slide.

326
00:19:38,560 --> 00:19:41,230
Nó có các lớp học của slide.

327
00:19:41,230 --> 00:19:46,890
Có văn bản. Bây giờ, có hộp này và nút hộp.

328
00:19:46,890 --> 00:19:52,900
Làm thế nào chúng ta sẽ thực sự làm cho biến mất?

329
00:19:52,900 --> 00:19:58,250
Trước hết, chúng ta hãy viết một chức năng mà làm cho các ID hộp biến mất.

330
00:19:58,250 --> 00:20:01,820
Đây là cú pháp cho Chức năng, chúng ta hãy gọi nó là hideTheBox.

331
00:20:01,820 --> 00:20:06,130
Nó không có bất kỳ đối số, bởi vì không có đối số được thực hiện.

332
00:20:06,130 --> 00:20:08,950
Chúng ta có thể chọn ID hộp.

333
00:20:08,950 --> 00:20:15,020
Vì vậy, bằng cách sử dụng jQuery chọn, chúng ta có thể chọn hộp ID,

334
00:20:15,020 --> 00:20:17,700
và sau đó chỉ cần làm cho nó biến mất.

335
00:20:17,700 --> 00:20:20,690
Chúng ta hãy làm cho nó phai ra.

336
00:20:20,690 --> 00:20:27,390
Nếu chúng tôi chạy chức năng này trong giao diện điều khiển thực tế,

337
00:20:27,390 --> 00:20:33,380
chúng ta có thể xác định chức năng này, chúng ta có thể gọi hideTheBox, và nó hoạt động.

338
00:20:33,380 --> 00:20:36,650
Nhưng chúng tôi muốn nó xảy ra khi nút được nhấn thực sự.

339
00:20:36,650 --> 00:20:40,950
Để làm điều đó, chúng ta phải sử dụng một sự kiện.

340
00:20:40,950 --> 00:20:45,500
Để ràng buộc một sự kiện với một số nút cụ thể hoặc một số hành động xảy ra,

341
00:20:45,500 --> 00:20:50,040
chúng ta phải chọn phần tử rằng sự kiện này sẽ kích hoạt -

342
00:20:50,040 --> 00:20:52,650
hoặc sẽ kích hoạt sự kiện này, xin lỗi.

343
00:20:52,650 --> 00:20:57,220
>> Vì vậy, trước hết, chúng ta hãy chọn nút hộp ID

344
00:20:57,220 --> 00:20:59,610
bởi vì đó là nút, và bây giờ, cho nút đó,

345
00:20:59,610 --> 00:21:02,750
chúng tôi muốn tạo ra một hình ảnh động khi được nhấp vào.

346
00:21:02,750 --> 00:21:05,040
Do đó, có chức năng nhấp chuột này.

347
00:21:05,040 --> 00:21:08,470
Nó cho phép bạn liên kết một chức năng cho nó.

348
00:21:08,470 --> 00:21:12,320
Chức năng này có một chức năng như một tham số

349
00:21:12,320 --> 00:21:14,310
chúng ta có thể vượt qua trong các chức năng hideTheBox,

350
00:21:14,310 --> 00:21:20,950
và bất cứ khi nào nút này được nhấn, chức năng này sẽ tự động thực hiện.

351
00:21:20,950 --> 00:21:24,850
Vì vậy, điều này sẽ làm việc nếu chúng ta tiết kiệm này, tôi sẽ làm mới,

352
00:21:24,850 --> 00:21:33,460
và - thứ hai, tôi xin lỗi.

353
00:21:33,460 --> 00:21:44,770
Hãy để tôi sửa lỗi này thực sự nhanh chóng.

354
00:21:44,770 --> 00:21:50,680
Được rồi. Có chúng tôi đi. Vì vậy, bây giờ hộp là biến mất khi chúng ta nhấn nút.

355
00:21:50,680 --> 00:21:55,470
Chúng tôi cũng có thể thay đổi điều này để chỉ fadeToggle,

356
00:21:55,470 --> 00:22:00,020
thay đổi nó chỉ để ẩn hoặc hiển thị hộp,

357
00:22:00,020 --> 00:22:03,850
và điều này cũng sẽ làm việc quá, nếu chúng ta làm mới.

358
00:22:03,850 --> 00:22:08,550
Chúng ta có thể giấu nó, chúng ta cũng có thể thấy nó, và điều đó sẽ tiếp tục làm việc.

359
00:22:08,550 --> 00:22:12,210
Một điều chúng ta có thể làm là, chúng tôi không thực sự có để xác định chức năng hideTheBox này

360
00:22:12,210 --> 00:22:15,050
trước khi chúng ta gọi hàm nhấp chuột.

361
00:22:15,050 --> 00:22:17,640
Vì vậy, thay vì xác định chức năng và gọi hideTheBox,

362
00:22:17,640 --> 00:22:20,310
chúng tôi sẽ chỉ gọi nó là nếu điều này được nhấp.

363
00:22:20,310 --> 00:22:22,310
Vì vậy, chúng ta có thể định nghĩa nó nặc danh trong đây,

364
00:22:22,310 --> 00:22:25,070
đó là một tính năng JavaScript có.

365
00:22:25,070 --> 00:22:29,720
Bạn có thể xác định một chức năng, thông thường, chúng ta có thể nói chức năng hideTheBox

366
00:22:29,720 --> 00:22:34,490
với lập luận, nhưng thay vào đó, chúng tôi chỉ có thể nói hoạt động không có đối số,

367
00:22:34,490 --> 00:22:36,870
bắt đầu ngoặc móc để xác định chức năng,

368
00:22:36,870 --> 00:22:40,780
đóng mà xoăn cú đúp, và sau đó chỉ cần xác định các chức năng trong đây,

369
00:22:40,780 --> 00:22:45,130
trong ngoặc đơn đầu tiên và dấu ngoặc đơn cuối cùng

370
00:22:45,130 --> 00:22:47,860
tương ứng với các đối số của chức năng nhấp chuột.

371
00:22:47,860 --> 00:22:53,320
Vì vậy, chúng tôi đang đi qua trong chức năng này, chúng ta có thể sao chép dòng mã này ngay tại đây,

372
00:22:53,320 --> 00:22:55,450
và điều đó sẽ làm một điều chính xác.

373
00:22:55,450 --> 00:22:57,290
Và bây giờ chúng tôi không có chức năng này fadeTheBox ngẫu nhiên

374
00:22:57,290 --> 00:22:59,960
đó là ngồi xung quanh không có lý do rõ ràng.

375
00:22:59,960 --> 00:23:02,070
Chức năng được ẩn danh được định nghĩa, nó không có một cái tên.

376
00:23:02,070 --> 00:23:08,060
Nó sẽ chỉ thực hiện khi chúng ta nhấn vào nút hộp.

377
00:23:08,060 --> 00:23:12,180
Vì vậy, làm mới một lần nữa, một lần nữa, và bạn có thể thấy rằng nó vẫn hoạt động.

378
00:23:12,180 --> 00:23:16,700
Và đó là cách bạn tạo ra các sự kiện.

379
00:23:16,700 --> 00:23:19,190
>> Có rất nhiều các sự kiện khác nhau mà chúng ta có thể sử dụng.

380
00:23:19,190 --> 00:23:23,540
Tôi sẽ quay lại dùng giao diện điều khiển để chỉ cho bạn cách làm việc.

381
00:23:23,540 --> 00:23:28,210
Các ID cho mỗi tương ứng với mỗi hộp.

382
00:23:28,210 --> 00:23:33,020
Vì vậy, hộp này là nhấp chuột ID, đây là ID chính, và điều này là ID chuột.

383
00:23:33,020 --> 00:23:36,120
Một điều nữa là có chức năng hành động này, thay vì gõ nó ra mọi thời gian,

384
00:23:36,120 --> 00:23:41,610
Tôi thực sự đã đi trước và chức năng xác định hành động này ở đây.

385
00:23:41,610 --> 00:23:46,860
Nó làm điều tương tự như chức năng hideTheBox.

386
00:23:46,860 --> 00:23:51,340
Nó được hộp này và hoặc mất dần ra hoặc mất dần nó vào

387
00:23:51,340 --> 00:23:54,110
Và đó là lý do tại sao chúng tôi có thể sử dụng nó ở đây.

388
00:23:54,110 --> 00:24:00,350
Vì vậy, nếu chúng ta click vào nhấp chuột ID này, chúng tôi muốn làm cho hộp biến mất hoặc xuất hiện trở lại.

389
00:24:00,350 --> 00:24:03,610
Đó là điều tương tự như nút mà chúng ta có trong slide cuối cùng.

390
00:24:03,610 --> 00:24:07,450
Bây giờ sau khi chúng tôi gọi đó, chúng ta có thể bấm vào đây và hộp sẽ biến mất,

391
00:24:07,450 --> 00:24:10,160
sau đó nhấn vào nó một lần nữa và hộp sẽ xuất hiện trở lại.

392
00:24:10,160 --> 00:24:12,480
Đó là khá đơn giản. Nhấp đúp chuột vào làm điều tương tự,

393
00:24:12,480 --> 00:24:15,660
ngoại trừ nó đòi hỏi một nhấp đúp chuột.

394
00:24:15,660 --> 00:24:19,030
Vì vậy, nếu bạn click vào nó một lần và nhấp chuột vào nó một lần nữa không có gì sẽ xảy ra,

395
00:24:19,030 --> 00:24:21,140
nhưng nếu bạn kích đúp vào một cách nhanh chóng, nó sẽ biến mất.

396
00:24:21,140 --> 00:24:23,310
Nếu bạn nhấp đúp chuột lần nữa, nó sẽ trở lại.

397
00:24:23,310 --> 00:24:25,250
Vì vậy, đó là khá đơn giản.

398
00:24:25,250 --> 00:24:31,170
Đầu vào bàn phím là loại kỳ lạ, tôi không nghĩ rằng nó thực sự hoạt động trong ví dụ này

399
00:24:31,170 --> 00:24:37,670
bởi vì chìa khóa xuống, phím lên và nhấn phím và hành động quan trọng khác

400
00:24:37,670 --> 00:24:47,190
kích hoạt không có vấn đề gì bạn yếu tố ràng buộc nó vào.

401
00:24:47,190 --> 00:24:51,410
Ví dụ, ngay cả khi tôi bị ràng buộc phím xuống để cơ thể hoặc một cái gì đó khác hoàn toàn,

402
00:24:51,410 --> 00:24:55,950
sau đó nó vẫn sẽ kích hoạt không có vấn đề - đó là không cụ thể.

403
00:24:55,950 --> 00:25:00,190
Tôi không có được cách nhấp vào đây và nhấn một phím để làm bất cứ điều gì biến mất.

404
00:25:00,190 --> 00:25:04,470
Nó sẽ được kích hoạt bất kể những gì yếu tố tôi đang nhập

405
00:25:04,470 --> 00:25:06,880
Vì vậy, những điều này không thực sự làm việc trong ví dụ này

406
00:25:06,880 --> 00:25:13,180
bởi vì nó không nhận ra tôi như vào đầu vào bàn phím div đầu vào.

407
00:25:13,180 --> 00:25:15,740
>> Nhưng nếu bạn nhìn vào các hành động chuột,

408
00:25:15,740 --> 00:25:19,620
người đầu tiên được di chuột, và nó có thể làm một số này sử dụng CSS.

409
00:25:19,620 --> 00:25:24,280
Nếu bạn sử dụng CSS, bạn có thể tạo ra nó để nếu bạn di chuột qua một cái gì đó,

410
00:25:24,280 --> 00:25:28,940
sau đó thay đổi phong cách của mình.

411
00:25:28,940 --> 00:25:32,170
Nhưng sử dụng jQuery bạn có thể thay đổi phong cách của những thứ khác.

412
00:25:32,170 --> 00:25:37,120
Vì vậy, ví dụ, chúng ta sẽ gọi hành động nếu chúng ta di chuột qua div này.

413
00:25:37,120 --> 00:25:39,660
Điều đó có nghĩa nếu chúng ta di chuột qua nó, sau đó hộp sẽ biến mất.

414
00:25:39,660 --> 00:25:42,430
Nếu chúng ta di chuyển ra khỏi nó, hộp sẽ xuất hiện trở lại.

415
00:25:42,430 --> 00:25:45,090
Nếu chúng ta gọi này và di chuột qua nó, hộp không biến mất,

416
00:25:45,090 --> 00:25:47,050
và ngay khi chúng tôi di chuyển đi, nó trở lại.

417
00:25:47,050 --> 00:25:49,750
Nếu chúng ta gọi là chức năng di chuột này trên ID chuột,

418
00:25:49,750 --> 00:25:54,380
tương ứng với ô này, sau đó nếu chúng ta di chuột qua các hộp,

419
00:25:54,380 --> 00:26:00,440
sau đó hộp thực sự sẽ biến mất - nó là sôi nổi ngay bây giờ, nhưng -

420
00:26:00,440 --> 00:26:06,310
nếu chúng ta di chuyển ra khỏi nó, nó sẽ xuất hiện trở lại. Ngay bây giờ nó trở về trước đối với một số lý do.

421
00:26:06,310 --> 00:26:12,720
Chuột nhập và chức năng di chuyển chuột là hơi tương tự, nhưng hơi khác nhau.

422
00:26:12,720 --> 00:26:16,470
Chuột vào chỉ kích hoạt khi con chuột vào hộp, như mong đợi.

423
00:26:16,470 --> 00:26:19,210
Vì vậy, nếu bạn di chuyển vào đó, nó sẽ biến mất.

424
00:26:19,210 --> 00:26:23,210
Nhưng nó sẽ không xuất hiện trở lại khi bạn di chuyển đi, bạn sẽ phải di chuyển trở lại vào nó để nó quay trở lại.

425
00:26:23,210 --> 00:26:25,590
Ngoài ra còn có chức năng di chuyển chuột, mà sẽ kích hoạt

426
00:26:25,590 --> 00:26:29,300
bất cứ khi nào con chuột thậm chí còn hiện diện trong hộp.

427
00:26:29,300 --> 00:26:32,430
Vì vậy, nó sẽ chỉ tiếp tục đi, mờ dần trong và ngoài.

428
00:26:32,430 --> 00:26:35,660
Và nó thực sự đăng nhập - nó có vẻ như nó chỉ mờ dần trong và ngoài,

429
00:26:35,660 --> 00:26:39,140
nhưng nó thực sự đăng nhập hành động nhiều hơn này,

430
00:26:39,140 --> 00:26:43,550
vì vậy khi bạn di chuyển ra nó sẽ chỉ tiếp tục đi bởi vì nó đăng nhập như một ngàn người trong số họ.

431
00:26:43,550 --> 00:26:46,620
Có lẽ không phải là một ngàn. Có lẽ năm.

432
00:26:46,620 --> 00:26:50,200
Nó ghi nhiều hơn thế.

433
00:26:50,200 --> 00:26:53,280
Vấn đề là, tất cả các hành động chuột, có rất nhiều người trong số họ.

434
00:26:53,280 --> 00:26:55,480
Bạn có thể đọc lên trên những người khác, nhưng họ là tất cả hơi khác nhau,

435
00:26:55,480 --> 00:26:57,700
và bạn có thể chọn bất cứ một bạn cần

436
00:26:57,700 --> 00:27:02,130
cho bất cứ mục đích cụ thể bạn đang cố gắng để làm.

437
00:27:02,130 --> 00:27:05,060
>> Điều tiếp theo tôi sẽ nói về là AJAX.

438
00:27:05,060 --> 00:27:09,340
AJAX, tôi biết chúng tôi đã không bao gồm JavaScript trong như chiều sâu nhiều năm nay,

439
00:27:09,340 --> 00:27:11,770
vì vậy tôi chỉ sẽ nói về AJAX nói chung trong một phút.

440
00:27:11,770 --> 00:27:15,210
AJAX là viết tắt của Asynchronous JavaScript và XML.

441
00:27:15,210 --> 00:27:19,030
Đó là cơ bản, ví dụ, khi bạn đang ở trên Facebook và nó đẩy bạn một thông báo,

442
00:27:19,030 --> 00:27:23,060
đó là bởi vì AJAX đang chạy trên trình duyệt web của bạn.

443
00:27:23,060 --> 00:27:25,800
Mỗi vài giây trình duyệt web của bạn thực sự

444
00:27:25,800 --> 00:27:29,420
đi đến các máy chủ của Facebook, yêu cầu họ, làm bạn có bất cứ điều gì mới cho tôi,

445
00:27:29,420 --> 00:27:31,980
và sau đó nói lại cho bạn.

446
00:27:31,980 --> 00:27:36,320
Điều này cho phép bạn gửi yêu cầu tới một máy chủ

447
00:27:36,320 --> 00:27:38,660
mà không cần phải tải trang.

448
00:27:38,660 --> 00:27:42,040
Vì vậy, thông thường, nếu bạn chỉ sử dụng PHP và cơ sở dữ liệu,

449
00:27:42,040 --> 00:27:45,480
bạn phải làm mới trang trước khi bạn có thể nhận được thông tin mới từ máy chủ.

450
00:27:45,480 --> 00:27:48,770
Nhưng sử dụng AJAX, bạn có thể kéo cho rằng thông tin mới liên tục,

451
00:27:48,770 --> 00:27:52,250
hoặc kéo cho nó khi bạn bấm vào một nút hoặc bất cứ điều gì như thế.

452
00:27:52,250 --> 00:27:56,140
Vì vậy, điều này cho phép chúng tôi để gửi yêu cầu mà không cần tải lại trang,

453
00:27:56,140 --> 00:27:58,130
và chúng ta có thể sử dụng GET hoặc POST yêu cầu.

454
00:27:58,130 --> 00:28:05,370
>> GET yêu cầu, ví dụ, nếu bạn để Google.com

455
00:28:05,370 --> 00:28:10,900
và làm q = thử nghiệm. Đó là đem lại cho họ một thử nghiệm truy vấn.

456
00:28:10,900 --> 00:28:15,890
Và đó là một yêu cầu GET vì nó đi qua trong những tham số vào URL của chính nó.

457
00:28:15,890 --> 00:28:19,250
Một yêu cầu POST là, nếu như bạn gửi cho họ qua đường bưu điện.

458
00:28:19,250 --> 00:28:22,500
Nó giống như bạn đặt nó trong một bức thư và gửi nó đi với họ,

459
00:28:22,500 --> 00:28:25,140
nhưng họ không thực sự xem nội dung. Họ không thể nhìn thấy trong các URL.

460
00:28:25,140 --> 00:28:31,040
Bạn có thể không trực tiếp gõ vào, bạn phải gửi nó gần như bí mật.

461
00:28:31,040 --> 00:28:33,880
Đó là trong một bài.

462
00:28:33,880 --> 00:28:38,660
Nhưng sử dụng jQuery, bạn có thể làm GET và POST yêu cầu

463
00:28:38,660 --> 00:28:42,740
nhiều hơn nữa dễ dàng hơn bạn bình thường có thể sử dụng chỉ đơn giản JavaScript.

464
00:28:42,740 --> 00:28:50,140
Bạn có thể truy vấn API sử dụng GET yêu cầu, và bạn cũng có thể kiểm tra thông tin đăng nhập.

465
00:28:50,140 --> 00:28:54,400
Trên trang tiếp theo, tôi tạo ra này, mà hỏi: "Có gì cho bữa trưa?"

466
00:28:54,400 --> 00:28:58,230
bằng cách sử dụng thực phẩm API Harvard, vì vậy hãy kéo mà lên.

467
00:28:58,230 --> 00:29:01,840
Đây chỉ là một ví dụ về cách bạn có thể sử dụng jQuery để làm một yêu cầu GET đến một API

468
00:29:01,840 --> 00:29:04,200
và nhận được thông tin trở lại từ nó.

469
00:29:04,200 --> 00:29:07,090
Vì vậy, chúng tôi muốn xem thực đơn cho ngày hôm nay,

470
00:29:07,090 --> 00:29:10,560
và chúng tôi muốn xem những gì cho bữa ăn trưa.

471
00:29:10,560 --> 00:29:16,500
Đây là URL để tạo ra một yêu cầu GET trong jQuery.

472
00:29:16,500 --> 00:29:18,600
bạn sử dụng $. có chức năng.

473
00:29:18,600 --> 00:29:22,290
Đối số đầu tiên là URL, vì vậy chính xác những gì bạn đang truy vấn.

474
00:29:22,290 --> 00:29:27,200
Sau đó, các số tiếp theo là một chức năng thực thi khi yêu cầu GET hoàn tất.

475
00:29:27,200 --> 00:29:29,980
Vì vậy, bạn gửi ra một số yêu cầu đến máy chủ, chờ cho nó quay trở lại.

476
00:29:29,980 --> 00:29:33,770
Khi nó trở lại, bạn sẽ có một số hành động với các dữ liệu đó từ máy chủ.

477
00:29:33,770 --> 00:29:37,520
Chúng ta hãy đi trước và mã này là tốt.

478
00:29:37,520 --> 00:29:42,110
Tôi không mã này, hoặc, trên mục đích.

479
00:29:42,110 --> 00:29:46,660
Đây là TODO. Trước hết, chúng ta hãy sử dụng các ràng buộc sự kiện

480
00:29:46,660 --> 00:29:50,820
để khi nút này được nhấn, chúng ta gửi đi một yêu cầu GET.

481
00:29:50,820 --> 00:29:53,410
Và khi đó yêu cầu GET trở lại với một số dữ liệu,

482
00:29:53,410 --> 00:29:57,290
chúng ta sẽ viết nó vào bữa ăn này thông tin ID div.

483
00:29:57,290 --> 00:30:02,860
Trước hết, chúng ta hãy chọn nút ID thực phẩm.

484
00:30:02,860 --> 00:30:07,320
Khi nhấp vào, chúng tôi muốn nó làm điều gì đó.

485
00:30:07,320 --> 00:30:11,930
Chúng ta hãy làm cho nó một fuction vô danh, như trước đây.

486
00:30:11,930 --> 00:30:15,550
Có thể bọc những dấu ngoặc nhọn,

487
00:30:15,550 --> 00:30:18,530
và khi nút này được nhấn, chúng tôi muốn gửi một yêu cầu GET

488
00:30:18,530 --> 00:30:20,750
để kiểm tra những gì cho bữa ăn trưa.

489
00:30:20,750 --> 00:30:24,970
Để làm điều đó, chúng ta có thể chỉ cần gõ vào $. Nhận được.

490
00:30:24,970 --> 00:30:28,850
Đây là một chức năng jQuery, bằng cách sử dụng ký hiệu đô la.

491
00:30:28,850 --> 00:30:31,430
Phải mất một vài đối số. Người đầu tiên là địa chỉ URL,

492
00:30:31,430 --> 00:30:34,450
điều thứ hai là chức năng gọi lại, chức năng đó được gọi là

493
00:30:34,450 --> 00:30:37,740
khi yêu cầu thực sự trả về.

494
00:30:37,740 --> 00:30:39,890
Chúng ta hãy xây dựng URL đầu tiên.

495
00:30:39,890 --> 00:30:44,650
Chúng ta có thể lấy nó từ API mà David đã viết lên.

496
00:30:44,650 --> 00:30:51,360
Đi ở đây, chúng ta có thể thấy rằng nó food.cs50.net/api/1.3/menus,

497
00:30:51,360 --> 00:30:54,140
và sau đó bạn chỉ cần vượt qua trong tên của các thông số mà bạn muốn.

498
00:30:54,140 --> 00:30:57,760
Vì vậy, tham số 1 là giá trị 1.

499
00:30:57,760 --> 00:31:00,910
Có vẻ như ngày thường, ngày bắt đầu, mặc định là hôm nay

500
00:31:00,910 --> 00:31:03,110
nếu bạn không nhập bất cứ điều gì, và ngày kết thúc cũng mặc định

501
00:31:03,910 --> 00:31:05,930
đến ngày hôm nay nếu bạn không nhập bất cứ điều gì.

502
00:31:05,930 --> 00:31:10,790
Đó là những gì chúng ta muốn. Chúng tôi muốn chỉ nhận được các thông tin cho ngày hôm nay.

503
00:31:10,790 --> 00:31:12,950
>> Chúng tôi muốn định dạng được trong JSON.

504
00:31:12,950 --> 00:31:15,570
Đó chỉ là tùy ý, bạn có thể sử dụng bất kỳ hình thức mà bạn muốn.

505
00:31:15,570 --> 00:31:18,950
Bạn có thể sử dụng CSV, nhưng JSON là JavaScript Object Notation.

506
00:31:18,950 --> 00:31:24,150
Nó rất dễ dàng cho JavaScript để hiểu những gì nó có nghĩa là,

507
00:31:24,150 --> 00:31:27,110
và chúng ta có thể in ra một cách dễ dàng như vậy.

508
00:31:27,110 --> 00:31:30,490
Vì vậy, hãy yêu cầu nó trong JSON, và yêu cầu chúng ta hãy ăn trưa.

509
00:31:30,490 --> 00:31:37,660
Vì vậy, bữa ăn = ăn trưa. Chỉ để viết lên URL đó, chúng tôi quay trở lại đây.

510
00:31:37,660 --> 00:31:41,290
Có menu. Tham số đầu tiên là đầu ra = JSON

511
00:31:41,290 --> 00:31:44,640
bởi vì đó là những gì chúng ta muốn, và bạn tách các thông số với một "và".

512
00:31:44,640 --> 00:31:48,940
Tham số thứ hai là - tôi không nhớ.

513
00:31:48,940 --> 00:31:52,170
Bữa ăn. Và chúng tôi muốn bữa ăn = ăn trưa.

514
00:31:52,170 --> 00:31:57,390
Bạn có thể kiểm tra URL này bằng cách gõ vào trình duyệt của bạn và đi đến đó.

515
00:31:57,390 --> 00:32:03,120
Nó sẽ cung cấp cho bạn một số đầu ra. Nó chỉ là một loạt các công cụ đó để ăn trưa.

516
00:32:03,120 --> 00:32:10,410
Nó ở định dạng xấu xí này. Chúng tôi muốn in nó vào trang của chúng tôi trong một định dạng tốt hơn.

517
00:32:10,410 --> 00:32:12,580
Vì vậy, các URL là chính xác, chúng ta chỉ cần viết một hàm

518
00:32:12,580 --> 00:32:18,300
gọi lại khi yêu cầu thành công.

519
00:32:18,300 --> 00:32:20,430
Chức năng này sẽ thực sự có một cuộc tranh cãi. Nó sẽ được dữ liệu.

520
00:32:20,430 --> 00:32:25,650
Dữ liệu là những gì trở lại từ yêu cầu GET sau khi yêu cầu GET được thực hiện.

521
00:32:25,650 --> 00:32:28,860
Chúng ta có thể làm các dấu ngoặc nhọn, ở đây chúng tôi viết các chức năng ẩn danh

522
00:32:28,860 --> 00:32:33,900
, được thực hiện bằng cách sử dụng dữ liệu khi chúng tôi nhận được thông tin trở lại.

523
00:32:33,900 --> 00:32:37,840
Vì vậy, dữ liệu, khi chúng tôi gõ vào URL này,

524
00:32:37,840 --> 00:32:41,540
đây là những gì các dữ liệu sẽ như thế nào. Nó sẽ là chuỗi này rất lớn.

525
00:32:41,540 --> 00:32:48,610
Nhưng điều tốt là, JavaScript có thể phân tích nó bằng cách sử dụng chức năng JSON.parse.

526
00:32:48,610 --> 00:32:54,950
Vì vậy, hãy tạo ra một biến mới gọi là dữ liệu phân tích cú pháp.

527
00:32:54,950 --> 00:32:57,060
Và dữ liệu phân tích cú pháp là một mảng của các đối tượng.

528
00:32:57,060 --> 00:33:04,200
Mỗi đối tượng có chứa các thông tin như - tốt, chúng ta hãy có một cái nhìn.

529
00:33:04,200 --> 00:33:08,980
Nó có một ngày, một bữa ăn, loại, công thức, tất cả những thứ khác này.

530
00:33:08,980 --> 00:33:10,860
Vì vậy, chúng ta hãy chỉ in ra tên cho mỗi một.

531
00:33:10,860 --> 00:33:13,790
Hãy lặp qua mảng toàn bộ công cụ mà chúng tôi nhận lại từ nó,

532
00:33:13,790 --> 00:33:17,570
và chỉ in ra mỗi người - in ra tên của mỗi người.

533
00:33:17,570 --> 00:33:22,670
Đây là một vòng lặp.

534
00:33:22,670 --> 00:33:26,030
>> JavaScript có cú pháp hữu ích này, nơi bạn có thể tạo ra một biến và vòng lặp trên một mảng,

535
00:33:26,030 --> 00:33:30,150
và var i chỉ là lặp, vì vậy thay vì phải làm var i = 0,

536
00:33:30,150 --> 00:33:40,290
tôi đã được nhỏ hơn độ dài, i + +, bạn chỉ có thể làm var i trong dữ liệu phân tích cú pháp.

537
00:33:40,290 --> 00:33:47,060
Trong ví dụ này, dữ liệu phân tích cú pháp (i) sẽ tương ứng với các yếu tố hiện

538
00:33:47,060 --> 00:33:49,850
của mảng, đối tượng thực tế.

539
00:33:49,850 --> 00:33:51,720
Và chúng tôi muốn có được tên ra khỏi nó.

540
00:33:51,720 --> 00:33:54,170
Vì vậy, chúng ta hãy chỉ làm tên.

541
00:33:54,170 --> 00:33:57,000
Và điều cuối cùng là, chúng ta sẽ có một số jQuery một lần nữa.

542
00:33:57,000 --> 00:34:02,660
Thực sự thêm nó vào div, bữa ăn này thông tin div đó là có hàng.

543
00:34:02,660 --> 00:34:05,430
Vì vậy, hãy chọn đó.

544
00:34:05,430 --> 00:34:13,870
Chúng tôi sẽ sử dụng jQuery và chọn bữa ăn thông tin ID div, hoặc thông tin ID bữa ăn, xin lỗi.

545
00:34:13,870 --> 00:34:16,580
Chúng tôi muốn nối thêm vào này.

546
00:34:16,580 --> 00:34:21,030
Nếu chúng tôi đã làm thử nghiệm, ví dụ, nó sẽ chỉ ghi đè lên nó mỗi lần duy nhất.

547
00:34:21,030 --> 00:34:29,190
Vì vậy, chúng tôi chỉ có thể nối thêm này.

548
00:34:29,190 --> 00:34:31,889
Phần tử hiện hành trong mảng, chúng ta sẽ có được tên ra khỏi nó,

549
00:34:31,889 --> 00:34:38,159
và chúng tôi sẽ thêm nó vào cuối bữa ăn thông tin ID div.

550
00:34:38,159 --> 00:34:40,120
Và sau đó chỉ để làm cho nó trông sạch hơn,

551
00:34:40,120 --> 00:34:51,550
chúng tôi cũng sẽ nối thêm một ngắt dòng vì vậy nó không phải tất cả trên cùng một dòng.

552
00:34:51,550 --> 00:34:55,280
Vì vậy, nếu mọi việc suôn sẻ, mà sẽ được tốt để -

553
00:34:55,280 --> 00:34:57,220
đầu tiên của tất cả, bất cứ khi nào nút này được nhấn,

554
00:34:57,220 --> 00:35:00,070
nó sẽ gửi đi một yêu cầu GET URL này.

555
00:35:00,070 --> 00:35:02,500
Khi dữ liệu trở lại từ nó, nó sẽ phân tích nó,

556
00:35:02,500 --> 00:35:06,950
biến nó thành JSON, vòng lặp trên toàn bộ mảng đại diện cho dữ liệu,

557
00:35:06,950 --> 00:35:10,310
và sau đó thêm tên và ngắt dòng

558
00:35:10,310 --> 00:35:16,500
để tất cả các dòng trong bữa ăn này thông tin ID mà trước đây có sản phẩm nào.

559
00:35:16,500 --> 00:35:18,910
Quay trở lại với trang này, chúng tôi sẽ làm mới,

560
00:35:18,910 --> 00:35:23,690
nhấp chuột, tìm ra - nó không hoạt động. Đó là không may.

561
00:35:23,690 --> 00:35:25,830
Và đây là nơi gỡ lỗi có in

562
00:35:25,830 --> 00:35:30,070
Index.html, dòng 1.

563
00:35:30,070 --> 00:35:57,210
Cái đó thật hấp dân.

564
00:35:57,210 --> 00:35:59,720
Được rồi, tốt, chứ không phải dành nhiều thời gian làm điều này, tôi chỉ cần đi để

565
00:35:59,720 --> 00:36:07,070
kéo lên tập tin thực hiện mà tôi có, đó là phiên bản hoàn thành.

566
00:36:07,070 --> 00:36:13,710
Tôi không chắc chắn những gì là sự khác biệt, nhưng chúng tôi chỉ có thể mở này lên thay thế.

567
00:36:13,710 --> 00:36:19,740
Và chúng tôi đi đến AJAX, và điều này sẽ làm việc một cách chính xác.

568
00:36:19,740 --> 00:36:21,730
Đó là những gì đã được cho ăn trưa ngày hôm nay,

569
00:36:21,730 --> 00:36:24,870
không theo thứ tự đặc biệt, với dấu ngoặc kép xung quanh nó, vì vậy nó không phải là đẹp nhất.

570
00:36:24,870 --> 00:36:27,090
Nhưng, rõ ràng, nếu bạn đã làm điều này cho một dự án cuối cùng,

571
00:36:27,090 --> 00:36:30,120
bạn sẽ làm cho nó trông tốt hơn.

572
00:36:30,120 --> 00:36:32,530
Nhưng đó chỉ là một ví dụ đơn giản về cách bạn làm theo yêu cầu GET.

573
00:36:32,530 --> 00:36:34,580
Và nếu chúng ta nhìn vào các mã thực tế, tôi đoán, tôi khá chắc chắn

574
00:36:34,580 --> 00:36:39,690
nó vẫn còn khá nhiều như nhau.

575
00:36:39,690 --> 00:37:04,990
Ồ, tôi quên để chuyển đổi nó thành một chuỗi, đó là nó.

576
00:37:04,990 --> 00:37:07,920
Không, nó vẫn không làm việc. Không phân biệt, đây là đoạn code hoàn thành thực tế

577
00:37:07,920 --> 00:37:10,300
cho điều này nên như thế nào,

578
00:37:10,300 --> 00:37:16,400
và nó làm điều tương tự như những gì tôi vừa thực hiện.

579
00:37:16,400 --> 00:37:22,760
Khi bạn nhấn chuột vào nút, nó sử dụng GET JSON để tự động phân tích dữ liệu.

580
00:37:22,760 --> 00:37:29,190
Phải mất dữ liệu trở lại từ nó và vòng qua toàn bộ mảng

581
00:37:29,190 --> 00:37:32,770
và in ra - bất cứ điều gì cho bữa ăn trưa ngày hôm nay, tên của nó,

582
00:37:32,770 --> 00:37:38,020
và gắn thêm một ngắt dòng sau mỗi dòng.

583
00:37:38,020 --> 00:37:41,100
Đó là cách bạn sử dụng chức năng GET.

584
00:37:41,100 --> 00:37:44,040
>> Bạn cũng có thể sử dụng POST, mà tôi không có thời gian

585
00:37:44,040 --> 00:37:47,940
để viết lên một ví dụ cho nó, nhưng chúng ta có thể xem xét các tài liệu hướng dẫn.

586
00:37:47,940 --> 00:37:53,220
Nếu bạn nhìn vào jquery.post,

587
00:37:53,220 --> 00:37:55,510
bạn có thể thấy nó gần như giống nhau.

588
00:37:55,510 --> 00:38:01,650
Bạn có một URL, nhưng thay vì đi qua các thông số sử dụng -

589
00:38:01,650 --> 00:38:03,990
chỉ cần đặt chúng trong chuỗi là URL chính nó,

590
00:38:03,990 --> 00:38:06,300
bạn phải vượt qua trong biến dữ liệu này

591
00:38:06,300 --> 00:38:11,990
mà về cơ bản là một mảng, một từ điển mà các bản đồ các thông số giá trị.

592
00:38:11,990 --> 00:38:17,690
Bạn vượt qua rằng trong, và gửi chúng trong việc sử dụng một POST.

593
00:38:17,690 --> 00:38:20,790
Và một khi bạn đã có, sau đó bạn có thể có một chức năng thành công

594
00:38:20,790 --> 00:38:23,930
để thực thi khi các dữ liệu trở lại.

595
00:38:23,930 --> 00:38:26,430
Nếu không, nó chính xác như nhau. Vì vậy, sử dụng POST,

596
00:38:26,430 --> 00:38:29,970
bạn có thể muốn sử dụng POST, ví dụ, nếu bạn có một hình thức đầu vào

597
00:38:29,970 --> 00:38:35,780
bạn cho mọi người mật khẩu nhập vào nó, và gửi những mật khẩu ra

598
00:38:35,780 --> 00:38:41,850
kịch bản back-end của bạn, kiểm tra trong cơ sở dữ liệu cho dù đó là người sử dụng là hợp lệ hay không.

599
00:38:41,850 --> 00:38:46,700
Bạn có thể làm điều đó tất cả sử dụng jQuery thay vì phải làm mới trang ở tất cả.

600
00:38:46,700 --> 00:38:52,160
Đó là cách tôi thực hiện trong các blog mà tôi đã được nói đến.

601
00:38:52,160 --> 00:38:59,530
Nếu chúng ta đi đến cổng cuối và đăng xuất, đăng xuất,

602
00:38:59,530 --> 00:39:02,600
Đăng xuất không hoạt động.

603
00:39:02,600 --> 00:39:13,360
Vâng, hãy để tôi chỉ cần mở nó lên trong một cửa sổ mới.

604
00:39:13,360 --> 00:39:16,580
Ở đây có một mật khẩu, và tôi sẽ gõ vào một cái gì đó ngẫu nhiên.

605
00:39:16,580 --> 00:39:18,590
Nó không hoạt động, nhưng bạn có thể thấy rằng chúng tôi đã không

606
00:39:18,590 --> 00:39:20,840
thực sự phải làm mới trang ở tất cả.

607
00:39:20,840 --> 00:39:24,610
Mã, nếu bạn muốn nhìn vào nó,

608
00:39:24,610 --> 00:39:37,460
là tất cả đều có trong đây.

609
00:39:37,460 --> 00:39:45,680
Vì vậy, các mã tôi đã viết năm ngoái đôi khi.

610
00:39:45,680 --> 00:39:47,790
Như bạn có thể thấy ở đây, chúng tôi đang gửi một yêu cầu POST.

611
00:39:47,790 --> 00:39:50,400
Tôi có một tập tin gọi là login.php trong kết thúc trở lại,

612
00:39:50,400 --> 00:39:53,860
trong đó kiểm tra nếu mật khẩu là hợp lệ.

613
00:39:53,860 --> 00:39:56,000
Các thông số trong chúng tôi vượt qua được mật khẩu, ánh xạ tới

614
00:39:56,000 --> 00:40:00,030
đầu vào đó là trong hộp đầu vào hiện nay.

615
00:40:00,030 --> 00:40:04,110
Và khi các dữ liệu trở lại, chúng tôi kiểm tra.

616
00:40:04,110 --> 00:40:07,680
Nếu dữ liệu là sai, thì chúng ta nói mật khẩu không chính xác, trượt xuống,

617
00:40:07,680 --> 00:40:09,580
và chỉ cần làm cho nó biến mất sau đó.

618
00:40:09,580 --> 00:40:12,320
Nếu không, chúng ta nạp các trang quản trị.

619
00:40:12,320 --> 00:40:15,080
Và điều này đã được tất cả thực hiện sử dụng JSON.

620
00:40:15,080 --> 00:40:18,510
Trong này nhiều dòng mã, bạn chỉ có thể truyền dữ liệu để kết thúc trở lại,

621
00:40:18,510 --> 00:40:21,020
kiểm tra xem nó chính xác, kiểm tra xem bạn đăng nhập một cách chính xác,

622
00:40:21,020 --> 00:40:24,200
và thực sự đáp ứng với nó, chuyển hướng người đến đúng trang

623
00:40:24,200 --> 00:40:29,760
hoặc không cho phép họ đăng nhập vào và nói với họ rằng họ đã có một mật khẩu không chính xác.

624
00:40:29,760 --> 00:40:33,040
Vì vậy, đó là một ví dụ về cách bạn có thể sử dụng jQuery POST

625
00:40:33,040 --> 00:40:37,010
để gửi một yêu cầu POST để kết thúc trở lại của bạn,

626
00:40:37,010 --> 00:40:42,400
kiểm tra xem một người nào đó đã đăng nhập một cách chính xác.

627
00:40:42,400 --> 00:40:44,820
>> Được rồi, vì vậy đó là tất cả các ví dụ tôi đã có, và tất cả những thứ tôi muốn để trang trải.

628
00:40:44,820 --> 00:40:47,110
Đó là những điều quan trọng mà jQuery cho phép bạn làm như sau:

629
00:40:47,110 --> 00:40:52,640
chọn các yếu tố, sửa đổi chúng bằng thao tác DOM,

630
00:40:52,640 --> 00:40:56,340
bạn có thể thêm hiệu ứng, kích hoạt những thứ trên các sự kiện,

631
00:40:56,340 --> 00:41:00,430
và cũng có thể làm các yêu cầu AJAX rất liền mạch và dễ dàng.

632
00:41:00,430 --> 00:41:02,840
Vì vậy, cảm ơn các bạn đã đến hoặc xem,

633
00:41:02,840 --> 00:41:06,230
và nếu bạn có bất kỳ câu hỏi, chỉ cho tôi biết. Yeah?

634
00:41:06,230 --> 00:41:12,730
[Sinh viên] Trở lại khi bạn thấy, bạn có JSON sau khi yêu cầu POST trong dấu ngoặc kép,

635
00:41:12,730 --> 00:41:15,170
và tôi đã chỉ tự hỏi những gì mà đã làm.

636
00:41:15,170 --> 00:41:20,070
>> Vâng, tôi nhìn thấy. Câu hỏi đặt ra là, trong ví dụ này tôi chỉ cho thấy,

637
00:41:20,070 --> 00:41:25,790
có JSON từ trong dấu ngoặc kép quanh -

638
00:41:25,790 --> 00:41:31,690
Tôi sẽ chỉ cần kéo nó lên một lần nữa - xung quanh các chức năng POST.

639
00:41:31,690 --> 00:41:43,320
Tôi chỉ cần kéo nó lên để hiển thị.

640
00:41:43,320 --> 00:41:46,890
Vì vậy, đây là yêu cầu POST này, và có JSON này trong dấu ngoặc kép.

641
00:41:46,890 --> 00:41:50,280
Mà chỉ xác định những gì chúng ta đang mong đợi đầu ra được.

642
00:41:50,280 --> 00:41:54,070
Vì vậy, nếu chúng tôi vượt qua trong JSON như kiểu dữ liệu dự kiến,

643
00:41:54,070 --> 00:41:56,070
nó không phải là một yêu cầu, nhưng nếu chúng ta vượt qua nó trong,

644
00:41:56,070 --> 00:41:58,590
sau đó dữ liệu sẽ tự động được phân tích như là JSON.

645
00:41:58,590 --> 00:42:00,600
Vì vậy, chúng tôi không cần phải gọi hàm phân tích cú pháp JSON trên nó,

646
00:42:00,600 --> 00:42:02,620
nó sẽ chỉ xảy ra tự động.

647
00:42:02,620 --> 00:42:05,150
Và nếu bạn có một cái nhìn tại các tài liệu hướng dẫn cho POST,

648
00:42:05,150 --> 00:42:09,850
có dữ liệu này kiểu biến, kiểu dữ liệu sẽ từ máy chủ.

649
00:42:09,850 --> 00:42:12,660
Nó mặc định là một đoán thông minh có thể là sai,

650
00:42:12,660 --> 00:42:15,520
do đó, bạn có thể để trống, nhưng nó chỉ là loại dữ liệu

651
00:42:15,520 --> 00:42:21,680
trong mã hóa mà bạn đang sử dụng, cho dù đó là JSON hay XML hay cái gì khác.

652
00:42:21,680 --> 00:42:25,280
>> Bất kỳ câu hỏi khác?

653
00:42:25,280 --> 00:42:27,300
Được rồi. Nếu bạn có bất kỳ câu hỏi khác, cảm thấy tự do để gửi email cho tôi

654
00:42:27,300 --> 00:42:30,830
tại vshekhawat@college.harvard.edu,

655
00:42:30,830 --> 00:42:34,860
và các slide và mã nên có sẵn trực tuyến khá sớm.

656
00:42:34,860 --> 00:42:42,810
Chúc may mắn với các dự án cuối cùng của bạn, hy vọng bạn sử dụng jQuery.

657
00:42:42,810 --> 00:42:46,810
[CS50.TV]