Kịch bản thuyết trình: Slides 15, 16, 17
Mình bắt đầu với slide 15, 16 và 17 nhé. Phần này mình sẽ hướng dẫn cách tạo cấu trúc External JavaScript bằng VS Code.
Đầu tiên, mình sẽ tạo một thư mục có tên là "external_js". Trong VS Code, mình mở thư mục external_js đã tạo bằng nút Open Folder hoặc phím tắt Ctrl + K + O.
Tiếp theo, tại cây thư mục của external_js, mình nhấp chuột phải và chọn New File để tạo ra 2 file: index.html và script.js nằm cùng cấp nhau.
Mình đã chuẩn bị sẵn code trước. Mình sẽ copy và giải thích để tiết kiệm thời gian.
Trong nội dung của file index.html, mình sẽ dùng thẻ <script> với thuộc tính src để nhúng file .js vào trang HTML.
Ở đây có 2 cách đặt:
Cách 1: Đặt trong phần <head> như ví dụ bên trái:
<script src="script.js" defer></script>
Lưu ý là khi đặt trong head, mình cần thêm thuộc tính defer để đảm bảo script chỉ chạy sau khi HTML đã được tải xong.
Cách 2: Hoặc mình có thể đặt ngay trước thẻ đóng </body> như ví dụ bên phải:
<script src="script.js"></script>
Khi đặt ở cuối body thì không cần defer nữa.
Tiếp theo, nếu file .js không nằm cùng cấp với file HTML thì trong src cần sửa lại đường dẫn.
Ví dụ:
Trường hợp 1: File .js nằm trong thư mục con js/
- Cấu trúc: external_js/ → index.html và js/ → script.js
- Sửa thành:
<script src="js/script.js"></script>
Trường hợp 2: File .js nằm ở thư mục cha
- Cấu trúc: external_js/ → script.js và html/ → index.html
- Sửa thành:
<script src="../script.js"></script>
Về cách get đường dẫn tương đối như trên, mọi người vui lòng xem lại file HTML mình đã trình bày trước đó.