WEBVTT

00:00:00.770 --> 00:00:02.612
Bây giờ tôi sẽ giới thiệu
cho bạn những điều cơ bản

00:00:02.612 --> 00:00:05.722
của việc sử dụng jQuery
trong trang web của bạn.

00:00:05.722 --> 00:00:09.005
Bước đầu tiên là
thêm thư viện jQuery

00:00:09.005 --> 00:00:11.542
bằng việc sử dụng
thẻ ''

00:00:12.232 --> 00:00:16.122
Trước đây, chúng tôi đặt JavaScript
bên trong thẻ '',

00:00:16.122 --> 00:00:20.276
nhưng lần này tôi sẽ
thêm thuộc tính 'src'.

00:00:20.276 --> 00:00:24.391
Và tôi cần đặt nó thành một URL.

00:00:24.391 --> 00:00:26.566
URL đó nên là gì?

00:00:26.566 --> 00:00:28.628
Nếu tôi đang làm việc trên
máy tính của mình

00:00:28.628 --> 00:00:30.093
và đã tải xuống jQuery

00:00:30.093 --> 00:00:32.525
xuống cùng thư mục
với trang web của tôi,

00:00:32.525 --> 00:00:36.473
Tôi chỉ cần viết 'jquery.js' ở đây.

00:00:36.473 --> 00:00:39.408
Nhưng điều đó sẽ không có
tác dụng trên Khan Academy.

00:00:39.408 --> 00:00:43.096
Ở đây, tôi cần một URL
tuyệt đối của jQuery

00:00:43.096 --> 00:00:45.885
trên một máy chủ
trực tuyến ở đâu đó.

00:00:45.885 --> 00:00:50.082
Và có một danh sách
những URL như thế trong jquery.com,

00:00:50.622 --> 00:00:52.738
và tôi có một cái
ở đây, tôi sẽ dán vào.

00:00:52.738 --> 00:00:54.430
Được rồi.

00:00:54.430 --> 00:00:56.119
Bây giờ tôi muốn
chỉ ra một vài điều

00:00:56.119 --> 00:00:58.031
về URL này.

00:00:58.031 --> 00:01:01.820
Điều đầu tiên đó là
nó bắt đầu bằng 'https'.

00:01:01.820 --> 00:01:05.231
Điều đó có nghĩa
đó là một URL an toàn.

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

00:01:09.231 --> 00:01:11.207
trên các trang web
của Khan Academy

00:01:11.207 --> 00:01:15.343
và đó là điều tốt khi
thực hành lập trình web.

00:01:15.663 --> 00:01:18.862
Điều thứ hai là
URL này được đặt

00:01:18.862 --> 00:01:22.751
trên một máy chủ
Google: googleapis.com.

00:01:22.751 --> 00:01:25.385
Máy chủ này được gọi là CDN,

00:01:25.385 --> 00:01:27.921
content delivery network
(mạng phân phối nội dung),

00:01:27.921 --> 00:01:29.406
điều đó có nghĩa là
nó đã được tối ưu hóa

00:01:29.406 --> 00:01:32.625
cho các tập tin tĩnh
như thư viện JavaScript

00:01:32.625 --> 00:01:35.388
và phục vụ chúng
rất nhanh chóng.

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

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ủ

00:01:41.301 --> 00:01:43.002
mà bạn lấy tập lệnh

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.

00:01:47.400 --> 00:01:50.013
Điều thứ ba là
có một số phiên bản

00:01:50.013 --> 00:01:53.807
trong URL này: 2.1.4.

00:01:53.807 --> 00:01:56.402
Thư viện jQuery đang trong
quá trình phát triển

00:01:56.402 --> 00:01:59.015
và họ thường phát hành
phiên bản mới.

00:01:59.015 --> 00:02:00.987
Các số càng nằm về
phía bên trái

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

00:02:03.279 --> 00:02:05.755
so với các số nằm phía bên phải,

00:02:05.755 --> 00:02:08.134
đại diện cho các phiên bản nhỏ.

00:02:08.134 --> 00:02:10.353
Tôi đang sử dụng jQuery
phiên bản 2 ở đây,

00:02:10.353 --> 00:02:12.295
hoạt động trong các
trình duyệt hiện đại

00:02:12.295 --> 00:02:14.484
nhưng không hoạt động trên
Internet Explorer 8.

00:02:14.484 --> 00:02:15.635
Trên trang web của bạn,

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.

00:02:19.627 --> 00:02:22.809
Được rồi. Chúng ta
đã cài đặt jQuery.

00:02:22.809 --> 00:02:24.973
Giờ hãy thực sự sử dụng nó

00:02:24.973 --> 00:02:28.266
bên trong thẻ '<script>' khác.

00:02:30.226 --> 00:02:33.309
Mọi thư viện JavaScript
đều hiển thị các hàm

00:02:33.309 --> 00:02:35.358
và đặt tên cho 
các hàm đó.

00:02:35.358 --> 00:02:37.010
Ta phải xem trong tài liệu

00:02:37.010 --> 00:02:39.262
để tìm ra tên
của các hàm đó

00:02:39.262 --> 00:02:41.761
và chức năng của chúng.

00:02:41.761 --> 00:02:45.444
Thư viện jQuery
hiển thị một hàm chính

00:02:45.444 --> 00:02:47.524
và nó có một cái tên rất ngắn.

00:02:47.524 --> 00:02:50.637
Đó chỉ là ký hiệu đô la ($).

00:02:50.637 --> 00:02:52.259
Điều đó có nghĩa
thứ đầu tiên ta viết

00:02:52.259 --> 00:02:53.556
là "$"

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,

00:02:56.526 --> 00:02:59.412
và tất nhiên là có
dấu chấm phẩy ";".

00:02:59.412 --> 00:03:01.928
Thật tuyệt nếu tên hàm ngắn như này

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.

00:03:06.226 --> 00:03:08.928
Có rất nhiều thứ ta
có thể truyền qua hàm đó,

00:03:08.928 --> 00:03:10.300
nhưng với ví dụ giới thiệu này,

00:03:10.300 --> 00:03:15.254
Tôi sẽ chỉ truyền
một xâu ký tự 'h1'.

00:03:16.319 --> 00:03:17.697
Bây giờ, khi tôi làm xong,

00:03:17.697 --> 00:03:19.724
câu lệnh bảo jQuery tìm

00:03:19.724 --> 00:03:23.095
tất cả các phần tử
'h1' có trong trang

00:03:23.095 --> 00:03:28.050
và trả lại chúng dưới dạng
bộ sưu tập đối tượng jQuery.

00:03:28.150 --> 00:03:29.311
Sau khi làm xong,

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

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.

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,

00:03:39.939 --> 00:03:43.356
Tôi có thể dùng hàm 'text'

00:03:43.356 --> 00:03:46.044
sau đó truyền cho nó
một xâu ký tự.

00:03:47.244 --> 00:03:48.492
Nó đang diễn ra.

00:03:48.492 --> 00:03:49.792
Được rồi.

00:03:49.792 --> 00:03:50.804
Và ta đã hoàn tất!

00:03:50.804 --> 00:03:53.029
Đó là một chút giới thiệu
của ta về jQuery.

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ẻ '',

00:03:56.910 --> 00:03:59.819
bảo jQuery tìm tất cả
'h1' có trong trang,

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

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 nữa

00:04:06.332 --> 00:04:07.653
chi tiết hơn,

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ử,

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,

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.