Để bao gồm tệp JavaScript bên ngoài, chúng ta có thể sử dụng thẻ script có thuộc tính
...
Some HTML Content
6. Bạn đã sử dụng thuộc tính
...
Some HTML Content
6 khi sử dụng hình ảnh. Giá trị cho thuộc tính src phải là đường dẫn đến tệp JavaScript của bạn
Thẻ tập lệnh này phải được bao gồm giữa các thẻ trong tài liệu HTML của bạn
Tệp JavaScript
Tệp JavaScript không phải là tệp HTML hoặc tệp CSS- Luôn kết thúc bằng phần mở rộng js
- Chỉ bao gồm JavaScript
Theo thông lệ, đặt tất cả các tệp JavaScript vào một thư mục có tên là js trên các trang web, như vậy
Bản demo đơn giản bao gồm JavaScript
Dưới đây là minh họa rất đơn giản về cách đưa tệp JavaScript bên ngoài vào trang HTML
JavaScript của người khác
Đối với lớp này, bạn không cần phải viết bất kỳ mã JavaScript thực tế nào. Thật may mắn cho bạn, nhiều người đã viết rất nhiều JavaScript và thậm chí còn cho phép bạn sử dụng nó miễn phí
Khung JavaScript
Framework về cơ bản là một thư viện mã cho một ngôn ngữ nhất định. Nói chung, khung trừu tượng hóa các tác vụ phổ biến và giúp các nhà thiết kế và nhà phát triển viết mã cụ thể của họ dễ dàng và nhanh hơn. Các khung không thực sự tự làm bất cứ điều gì, chúng chỉ cung cấp một nền tảng dễ dàng hơn để mọi người xây dựng trên đó
Khung JavaScript phổ biến
Trong số các khung này, JQuery hiện là khung phổ biến nhất. Đó cũng là từ mà bạn muốn gặp nhất khi được sử dụng như một từ thông dụng
Kích thước tệp JavaScript
Nhiều tệp JavaScript có xu hướng khá lớn, điều này có thể làm chậm thời gian tải trang của bạn. Các khung phổ biến thường cung cấp phiên bản mã "rút gọn" của chúng. Bạn phải luôn sử dụng phiên bản này trong các trang của mình vì phiên bản này sẽ có kích thước tệp nhỏ hơn
Thông thường, hầu hết mọi người đặt tên cho tệp script Javascript của họ là
...
Some HTML Content
0 hoặc
...
Some HTML Content
2 nhưng bạn có thể đặt tên cho tệp của mình theo bất kỳ thứ gì bạn muốnQuy ước đặt tên ở trên là một thông lệ phổ biến nếu bạn đang phát triển một trang web chỉ có một vài tệp Javascript
Nhưng nếu bạn bắt gặp mã nguồn của một ứng dụng web, thông thường sẽ sử dụng
...
Some HTML Content
3 hoặc
...
Some HTML Content
4 vì chúng đóng vai trò là điểm vào cho các mô-đun nhỏ khác của tệp JavascriptBước 2. Liên kết tệp Javascript với tài liệu HTML
Chúng tôi sử dụng thẻ
...
Some HTML Content
5 cho công việc nàyThẻ
...
Some HTML Content
5 có thuộc tính
...
Some HTML Content
7 và nó chấp nhận đường dẫn tệpGiả sử tên của tệp Javascript là
...
Some HTML Content
0 và nó được đặt trong thư mục
...
Some HTML Content
9 của dự án của bạn
...
Some HTML Content
0Đây là cách bạn liên kết tệp
...
Some HTML Content
0 với tệp
...
Some HTML Content
21
...
Some HTML Content
Trong trường hợp này, chúng tôi đang cung cấp một đường dẫn tương đối của tệp
...
Some HTML Content
0 tới tài liệu HTMLPhần tiếp theo là giải thích chi tiết về đường dẫn tệp tương đối và đường dẫn tệp tuyệt đối và khi nào nên sử dụng cái gì
💡
Nếu bạn đã thực hiện bất kỳ số lượng mã hóa CSS nào, bạn có thể có một chút kinh nghiệm làm việc với đường dẫn tệp khi bao gồm các tệp
...
Some HTML Content
23 của bạn bằng thẻ
...
Some HTML Content
24. Các quy tắc tương tự cũng áp dụng cho các tệp
...
Some HTML Content
8 có thẻ
...
Some HTML Content
26. Vì vậy, nếu bạn đã giỏi với chúng, hãy chuyển sang bài học tiếp theo trực tiếp
Giới thiệu đường dẫn tệp tương đối
Hãy nói rằng đây là cấu trúc tệp của dự án HTML của bạn
...
Some HTML Content
2Nếu bạn để ý, cả tệp
...
Some HTML Content
21 và tệp
...
Some HTML Content
0 đều nằm ở cùng một cấp trong hệ thống tệpNói cách khác, có những tập tin nằm cạnh nhau trên hệ thống tập tin
Bây giờ, giả sử chúng ta phải liên kết
...
Some HTML Content
0 với
...
Some HTML Content
21 bằng đường dẫn tương đốiNhận một đường dẫn tương đối chỉ đơn giản là hỏi câu hỏi sau
Câu hỏi. Tệp
...
Some HTML Content
0 nằm ở đâu so với tệp
...
Some HTML Content
21?Câu trả lời. Nó nằm ở cùng cấp độ
Tuyệt quá. Nếu các tệp được đặt ở cùng cấp độ, thì chúng ta chỉ cần sử dụng tên tệp cho đường dẫn tương đối
...
Some HTML Content
5Bây giờ với đường dẫn tương đối ở trên, bạn đang nói với trình duyệt rằng "Này. bạn có thể tìm thấy tệp
...
Some HTML Content
0 trong cùng thư mục với tệp
...
Some HTML Content
21"Dù sao đi nữa, hãy nhanh chóng nói về một tình huống phổ biến hơn để hiểu rõ hơn về các đường dẫn tương đối
...
Some HTML Content
0Lần này, tệp
...
Some HTML Content
0 nằm trong thư mục
...
Some HTML Content
9Vì vậy, trước tiên, chúng ta phải truy cập vào thư mục
...
Some HTML Content
9 và sau đó truy cập vào tệp
...
Some HTML Content
0 bên trong thư mục đóVà thư mục
...
Some HTML Content
9 nằm ở đâu so với tệp
...
Some HTML Content
21? Vì vậy, đây là đường dẫn tệp tương đối cho tệp
...
Some HTML Content
0
...
Some HTML Content
6Đơn giản, phải không?
Giới thiệu đường dẫn tệp tuyệt đối
Trong thế giới trình duyệt web, đường dẫn tệp tuyệt đối là đường dẫn đầy đủ cho tệp liên quan đến giao thức HTTP
Vì vậy, đường dẫn tệp tuyệt đối bắt đầu bằng giao thức HTTP
Ví dụ: giả sử tệp
...
Some HTML Content
0 được lưu trữ trên thư mục nội dung của trang web
...
Some HTML Content
03Trong trường hợp này, đường dẫn tệp tuyệt đối cho tệp
...
Some HTML Content
0 sẽ như thế này
...
Some HTML Content
0Bây giờ, điều này giống như
...
Some HTML Content
1Nếu bạn để ý, đường dẫn tệp ở trên đang bắt đầu bằng dấu gạch chéo xuôi 105 thay vì giao thức HTTP
Trong thế giới của các trình duyệt web, dấu gạch chéo lên phía trước
...
Some HTML Content
05 giống như tên miền đầy đủ bao gồm cả giao thức HTTPVì vậy, hầu hết mọi người sẽ chỉ sử dụng mẫu
...
Some HTML Content
05 thay vì nhập tên miền đầy đủ. Nó dễ dàng hơn nhiều và ít bị lỗi nhất trong một số thiết lập máy chủĐường dẫn tệp tương đối vs Đường dẫn tệp tuyệt đối
Các đường dẫn tương đối được khuyến nghị khi chúng tôi đang phát triển một trang web cục bộ
Các đường dẫn tuyệt đối được khuyến nghị khi chúng tôi đang sử dụng máy chủ web để phục vụ các tệp trang web của mình hoặc nếu chúng tôi đang liên kết với một tài nguyên Javascript bên ngoài như jQuery
Giải thích này sẽ rõ ràng hơn khi chúng ta xây dựng dự án AJAX vì các dự án AJAX yêu cầu máy chủ web hoạt động
💡
Hầu hết các bài tập trong khóa học này không cần máy chủ web để hoạt động. Vì vậy, bạn sẽ thấy tôi sử dụng đường dẫn tương đối để liên kết các tệp javascript trong phần lớn khóa học này
Sau khi liên kết tệp, hãy viết mã Javascript bên trong tệp javascript
Và trình duyệt sẽ lo phần còn lại
💡
Quan trọng. Khi chúng tôi viết mã Javascript bên trong tệp Javascript, chúng tôi không bọc mã bên trong thẻ
...
Some HTML Content
5Trong bài học tiếp theo, chúng ta sẽ nói về lý do tại sao việc đặt các thẻ ở cuối tài liệu HTML lại quan trọng