WEBVTT

00:00:00.570 --> 00:00:03.222
Ở video này, ta sẽ cùng
tìm hiểu những kiến thức cơ bản

00:00:03.222 --> 00:00:05.722
về jQuery và cách sử dụng
công cụ này trên trang web.

00:00:05.722 --> 00:00:09.005
Để sử dụng công cụ này, đầu tiên,
ta cần thêm thư viện jQuery

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

00:00:12.232 --> 00:00:16.122
Trước đây, ta tạo các mã lập
trình JavaScript trong thẻ ''script"

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

00:00:20.276 --> 00:00:24.391
nhận một đường dẫn URL.

00:00:24.391 --> 00:00:26.416
Vậy URL này nên là gì?

00:00:26.416 --> 00:00:29.088
Nếu bạn lập trình ở
trình soạn thảo riêng trên máy tính,

00:00:29.088 --> 00:00:30.401
bạn có thể tải jQuery xuống

00:00:30.401 --> 00:00:32.615
rồi nhập lệnh để kết nối với tệp jquery đó

00:00:32.615 --> 00:00:36.473
bằng cách điền "jquery.js"
vào thuộc tính "src".

00:00:36.473 --> 00:00:39.408
Nhưng ta không làm được
cách này trên Khan Academy.

00:00:39.408 --> 00:00:43.096
Ở đây, ta cần điền một URL của jQuery

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

00:00:45.885 --> 00:00:50.082
Ta có thể tìm được một danh sách
các URL như vậy trên trang web jquery.com.

00:00:50.362 --> 00:00:53.138
Sau khi tìm được URL,
ta dán vào thuộc tính "src".

00:00:53.138 --> 00:00:54.160
Được rồi.

00:00:54.160 --> 00:00:56.119
Bây giờ, ta cần lưu ý một số điều sau

00:00:56.119 --> 00:00:58.031
khi dùng URL jquery.

00:00:58.031 --> 00:01:01.820
Thứ nhất, đường dẫn này
cần bắt đầu bằng "https",

00:01:01.820 --> 00:01:05.231
nghĩa là URL này an toàn.

00:01:05.231 --> 00:01:09.231
Khan Academy chỉ cho phép
dùng các nguồn an toàn

00:01:09.231 --> 00:01:11.357
khi bạn đang thực hành
lập trình trang web.

00:01:11.357 --> 00:01:14.273
Đó cũng là điều bạn
cần lưu ý khi lập trình nói chung.

00:01:15.663 --> 00:01:18.862
Tiếp theo, điều thứ hai ta cần chú ý
là URL này đang được đặt

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

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

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
Máy chủ này đã được tối ưu hóa

00:01:29.406 --> 00:01:32.625
để chứa các tệp tin tĩnh
như thư viện JavaScript

00:01:32.625 --> 00:01:35.388
và cung cấp tệp tin nhanh chóng.

00:01:35.388 --> 00:01:38.164
Máy chủ Google là một máy chủ đáng tin.

00:01:38.164 --> 00:01:41.301
Nhìn chung, bạn nên
tìm hiểu các máy chủ

00:01:41.301 --> 00:01:43.002
mà bạn lấy nguồn tệp tin

00:01:43.002 --> 00:01:47.240
để tránh những nguy cơ
xấu ảnh hưởng tới trang web của bạn.

00:01:47.400 --> 00:01:50.013
Thứ ba, trên URL này có số hiệu

00:01:50.013 --> 00:01:53.807
thể hiện phiên bản là "2.1.4".

00:01:53.807 --> 00:01:56.692
Ta hiểu rằng thư viện jQuery
đang trong quá trình phát triển

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

00:01:58.895 --> 00:02:02.302
Trong số hiệu phiên bản, sự tăng lên
của các chữ số ngoài cùng bên trái

00:02:02.302 --> 00:02:04.469
thể hiện cho
những thay đổi lớn và quan trọng.

00:02:04.469 --> 00:02:06.808
Còn sự tăng lên của
các chữ số ngoài cùng bên phải

00:02:06.808 --> 00:02:08.254
đại diện cho các thay đổi nhỏ.

00:02:08.254 --> 00:02:10.713
Vậy với số 2.1.4, ta đang
sử dụng jQuery phiên bản 2

00:02:10.713 --> 00:02:12.595
tương thích với các
trình duyệt hiện đại

00:02:12.595 --> 00:02:15.074
nhưng không hoạt động được
trên Internet Explorer 8.

00:02:15.074 --> 00:02:16.145
Với trang web của bạn,

00:02:16.145 --> 00:02:19.627
bạn có thể chọn phiên bản
để dùng tùy theo nhu cầu.

00:02:19.627 --> 00:02:22.809
Được rồi. Vậy là chúng ta đã thêm jQuery.

00:02:22.809 --> 00:02:24.973
Ta sẽ thực hiện bước tiếp theo

00:02:24.973 --> 00:02:28.266
để sử dụng jQuery.

00:02:30.226 --> 00:02:33.309
Mọi thư viện JavaScript
đều có sẵn 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.250
Ta phải xem trong tài liệu tham khảo

00:02:37.250 --> 00:02:39.262
để tìm ra tên của mỗi hàm

00:02:39.262 --> 00:02:41.761
và chức năng tương ứng.

00:02:41.761 --> 00:02:45.444
Thư viện jQuery có một hàm chính

00:02:45.444 --> 00:02:47.524
với 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
Vậy để dùng thư viện jQuery

00:02:52.259 --> 00:02:53.966
ta nhập hàm bằng ký tự là "$"

00:02:53.966 --> 00:02:56.526
theo sau là cặp dấu ngoặc đơn

00:02:56.526 --> 00:02:59.412
và cuối cùng là dấu chấm phẩy.

00:02:59.412 --> 00:03:01.928
Ta thấy rằng tên hàm ngắn như vậy

00:03:01.928 --> 00:03:05.756
rất tiện khi ta sẽ cần
gọi hàm đó nhiều lần.

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

00:03:08.928 --> 00:03:10.710
nhưng trong video giới thiệu này,

00:03:10.710 --> 00:03:15.254
ta sẽ thử truyền vào chuỗi ký tự là "h1".

00:03:16.319 --> 00:03:17.697
Như vậy, với câu lệnh này,

00:03:17.697 --> 00:03:19.724
ta đang yêu cầu jQuery tham chiếu đến

00:03:19.724 --> 00:03:23.095
tất cả các phần tử "h1" trên trang web

00:03:23.095 --> 00:03:28.050
và trả lại kết quả là một
đối tượng tập hợp jQuery.

00:03:28.150 --> 00:03:30.691
Sau đó, ta có thể gọi các phương thức

00:03:30.691 --> 00:03:33.233
lên đối tượng jQuery

00:03:33.233 --> 00:03:37.200
để thực hiện thao tác với
tất cả phần tử "h1" được tham chiếu.

00:03:37.200 --> 00:03:39.939
Ví dụ như ta cần thay đổi
văn bản bên trong của phần tử,

00:03:39.939 --> 00:03:43.356
ta có thể dùng hàm "text"

00:03:43.356 --> 00:03:46.044
và truyền vào nội dung ta cần thay đổi.

00:03:47.244 --> 00:03:50.804
Bạn có thể quan sát thấy
sự thay đổi trên khung kết quả.

00:03:50.804 --> 00:03:53.199
Và đó là một số kiến thức cơ bản về jQuery.

00:03:53.199 --> 00:03:56.910
Vậy vừa rồi, ta đã đưa
thư viện jQuery vào thẻ ''script",

00:03:56.910 --> 00:03:59.819
yêu cầu jQuery tham chiếu đến
các phần tử "h1" trên trang web

00:03:59.819 --> 00:04:03.643
và thay đổi nội dung văn bản trong "h1".

00:04:03.643 --> 00:04:06.332
Trong các video tiếp theo, ta sẽ tìm hiểu

00:04:06.332 --> 00:04:08.053
nhiều kiến thức chi tiết hơn

00:04:08.053 --> 00:04:11.117
về cách chọn và thao tác với các phần tử

00:04:11.117 --> 00:04:14.353
bằ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
hoặc tạo các hiệu ứng hoạt hình thú vị.