1
00:00:00,770 --> 00:00:02,612
Ở bài này tôi sẽ giới thiệu
những điều cơ bản

2
00:00:02,612 --> 00:00:05,722
của việc sử dụng jQuery
trong trang web của bạn.

3
00:00:05,722 --> 00:00:09,005
Bước đầu tiên là
thêm thư viện jQuery

4
00:00:09,005 --> 00:00:11,542
bằng việc sử dụng
thẻ ''

5
00:00:12,232 --> 00:00:16,122
Trước đây, ta đặt JavaScript
bên trong thẻ '',

6
00:00:16,122 --> 00:00:20,276
nhưng lần này tôi sẽ
thêm thuộc tính 'src'.

7
00:00:20,276 --> 00:00:24,391
Và tôi cần đặt nó thành một URL.

8
00:00:24,391 --> 00:00:26,566
URL đó nên là gì?

9
00:00:26,566 --> 00:00:28,628
Nếu tôi đang làm việc
trên máy tính

10
00:00:28,628 --> 00:00:30,093
và đã tải xuống jQuery

11
00:00:30,093 --> 00:00:32,525
xuống cùng thư mục
với trang web của tôi,

12
00:00:32,525 --> 00:00:36,473
Tôi chỉ cần viết 'jquery.js' ở đây.

13
00:00:36,473 --> 00:00:39,408
Nhưng điều đó không có
tác dụng trên Khan Academy.

14
00:00:39,408 --> 00:00:43,096
Ở đây, tôi cần một URL
tuyệt đối của jQuery

15
00:00:43,096 --> 00:00:45,885
trên một máy chủ
trực tuyến nằm đâu đó.

16
00:00:45,885 --> 00:00:50,082
Ta có thể tìm được một danh sách
những URL như thế trong jquery.com,

17
00:00:50,622 --> 00:00:52,738
và tôi có một cái
ở đây, tôi sẽ dán vào.

18
00:00:52,738 --> 00:00:54,430
Được rồi.

19
00:00:54,430 --> 00:00:56,119
Bây giờ tôi muốn
chỉ ra một vài điều

20
00:00:56,119 --> 00:00:58,031
về URL này.

21
00:00:58,031 --> 00:01:01,820
Điều đầu tiên đó là
nó bắt đầu bằng 'https'.

22
00:01:01,820 --> 00:01:05,231
Điều đó có nghĩa
đó là một URL an toàn.

23
00:01:05,231 --> 00:01:09,231
Chúng tôi chỉ cho phép bạn
dùng các tài nguyên an toàn

24
00:01:09,231 --> 00:01:11,207
trên các trang web
của Khan Academy

25
00:01:11,207 --> 00:01:15,343
và đó là điều tốt khi
thực hành lập trình web.

26
00:01:15,663 --> 00:01:18,862
Điều thứ hai là
URL này được đặt

27
00:01:18,862 --> 00:01:22,751
trên một máy chủ
Google: googleapis.com.

28
00:01:22,751 --> 00:01:25,385
Máy chủ này được gọi là CDN,

29
00:01:25,385 --> 00:01:27,921
content delivery network
(mạng phân phối nội dung),

30
00:01:27,921 --> 00:01:29,406
có nghĩa là nó
đã được tối ưu hóa

31
00:01:29,406 --> 00:01:32,625
cho các tập tin tĩnh
như thư viện JavaScript

32
00:01:32,625 --> 00:01:35,388
và phục vụ chúng
rất nhanh chóng.

33
00:01:35,388 --> 00:01:38,164
Bây giờ máy chủ Google này
là máy chủ mà tôi tin tưởng

34
00:01:38,164 --> 00:01:41,301
và nói chung, bạn nên
luôn tin tưởng vào máy chủ

35
00:01:41,301 --> 00:01:43,002
mà bạn lấy tập lệnh

36
00:01:43,002 --> 00:01:47,240
vì chúng có thể gây ảnh hưởng
xấu tới trang của bạn.

37
00:01:47,400 --> 00:01:50,013
Điều thứ ba là
URL này

38
00:01:50,013 --> 00:01:53,807
hiển thị số phiên bản: 2.1.4.

39
00:01:53,807 --> 00:01:56,402
Thư viện jQuery đang trong
quá trình phát triển

40
00:01:56,402 --> 00:01:59,015
và họ thường phát hành
phiên bản mới.

41
00:01:59,015 --> 00:02:00,987
Các số càng nằm về
phía bên trái

42
00:02:00,987 --> 00:02:03,279
thì càng thể hiện sự thay đổi
phiên bản quan trọng hơn

43
00:02:03,279 --> 00:02:05,755
so với các số nằm phía bên phải,

44
00:02:05,755 --> 00:02:08,134
đại diện cho các phiên bản nhỏ.

45
00:02:08,134 --> 00:02:10,353
Tôi đang sử dụng jQuery
phiên bản 2 ở đây,

46
00:02:10,353 --> 00:02:12,295
hoạt động trong các
trình duyệt hiện đại

47
00:02:12,295 --> 00:02:14,484
nhưng không hoạt động trên
Internet Explorer 8.

48
00:02:14,484 --> 00:02:15,635
Trên trang web của bạn,

49
00:02:15,635 --> 00:02:19,627
bạn có thể chọn phiên bản để dùng
dựa trên nhu cầu của bạn.

50
00:02:19,627 --> 00:02:22,809
Được rồi. Chúng ta
đã cài đặt jQuery.

51
00:02:22,809 --> 00:02:24,973
Giờ hãy thực sự sử dụng nó

52
00:02:24,973 --> 00:02:28,266
bên trong thẻ '<script>' khác.

53
00:02:30,226 --> 00:02:33,309
Mọi thư viện JavaScript
đều hiển thị các hàm

54
00:02:33,309 --> 00:02:35,358
và đặt tên cho 
các hàm đó.

55
00:02:35,358 --> 00:02:37,010
Ta phải xem trong tài liệu

56
00:02:37,010 --> 00:02:39,262
để tìm ra tên
của các hàm đó

57
00:02:39,262 --> 00:02:41,761
và chức năng của chúng.

58
00:02:41,761 --> 00:02:45,444
Thư viện jQuery
hiển thị một hàm chính

59
00:02:45,444 --> 00:02:47,524
và nó có một cái tên rất ngắn.

60
00:02:47,524 --> 00:02:50,637
Đó chỉ là ký hiệu đô la ($).

61
00:02:50,637 --> 00:02:52,259
Điều đó có nghĩa
;à ký tự đầu tiên

62
00:02:52,259 --> 00:02:53,556
là "$"

63
00:02:53,556 --> 00:02:56,526
sau đó là hai dấu ngoặc đơn "( )",
bởi vì nó là một hàm,

64
00:02:56,526 --> 00:02:59,412
và tất nhiên là có
dấu chấm phẩy ";".

65
00:02:59,412 --> 00:03:01,928
Nếu tên hàm ngắn như vậy thì tốt

66
00:03:01,928 --> 00:03:05,756
bởi vì chúng ta sẽ cần
gọi hàm đó rất nhiều.

67
00:03:06,226 --> 00:03:08,928
Có rất nhiều thứ ta
có thể truyền qua hàm đó,

68
00:03:08,928 --> 00:03:10,300
nhưng với ví dụ giới thiệu này,

69
00:03:10,300 --> 00:03:15,254
Tôi sẽ chỉ truyền
một xâu ký tự 'h1'.

70
00:03:16,319 --> 00:03:17,697
Bây giờ, khi tôi làm xong,

71
00:03:17,697 --> 00:03:19,724
câu lệnh bảo jQuery tìm

72
00:03:19,724 --> 00:03:23,095
tất cả các phần tử
'h1' có trong trang

73
00:03:23,095 --> 00:03:28,050
và trả lại chúng dưới dạng
đối tượng tập hợp jQuery.

74
00:03:28,150 --> 00:03:29,311
Sau khi làm xong,

75
00:03:29,311 --> 00:03:33,233
Tôi có thể dùng các phương thức khác
trên đối tượng jQuery

76
00:03:33,233 --> 00:03:37,200
để có thể thao tác được với
tất cả phần tử 'h1' được tìm thấy.

77
00:03:37,200 --> 00:03:39,939
Nếu tôi muốn thay đổi
văn bản bên trong của chúng,

78
00:03:39,939 --> 00:03:43,356
Tôi có thể dùng hàm 'text'

79
00:03:43,356 --> 00:03:46,044
sau đó truyền cho nó
một chuỗi ký tự.

80
00:03:47,244 --> 00:03:48,492
Nó đang diễn ra.

81
00:03:48,492 --> 00:03:49,792
Được rồi.

82
00:03:49,792 --> 00:03:50,804
Và ta đã hoàn tất!

83
00:03:50,804 --> 00:03:53,029
Đó là một chút giới thiệu
của ta về jQuery.

84
00:03:53,029 --> 00:03:56,910
Vì vậy chúng tôi đã đưa jQuery vào
thư viện với thẻ '',

85
00:03:56,910 --> 00:03:59,819
bảo jQuery tìm tất cả
'h1' có trong trang,

86
00:03:59,819 --> 00:04:03,643
sau đó yêu cầu jQuery
thay đổi văn bản của chúng.

87
00:04:03,643 --> 00:04:06,332
Nếu bạn học tiếp, chúng ta
có thể khai phá nhiều hơn

88
00:04:06,332 --> 00:04:07,653
và chi tiết hơn,

89
00:04:07,653 --> 00:04:11,117
nhiều cách hơn để lựa chọn và
thao tác với các phần tử,

90
00:04:11,117 --> 00:04:14,353
sử dụng jQuery để phản hồi
hoạt động của người dùng trên trang,

91
00:04:14,353 --> 00:04:18,558
cùng với những điều thú vị
với hoạt ảnh và hiệu ứng.