Tách Mã JavaScript Ra File Riêng

Trong bài học này chúng ta sẽ thực hiện một công việc khá đơn giản đó là thêm vào một tập tin để chứa chỉ mã lệnh JavaScript và sau đó chúng ta sẽ nhúng tập tin này vào các trang web cần sử dụng tới nó. Cách làm này sẽ giúp cho mã JavaScript độc lập với HTML qua đó giúp chúng ta dễ dàng quản lý code của website hơn.

Tạo Tập Tin script.js

Trước tiên ở trong thư mục gốc chứa website bạn tạo ra một thư mục mới với tên javascripts. Sau đó bạn sử dụng phần mềm code editor hoặc IDE có trên máy tính để tạo một tập tin script.js:

Cấu trúc thư mục của website

Thêm vào tập tin này đoạn mã JavaScript như sau:

alert("Xin chào!");

Đoạn mã trên được tạo ra với mục đích để kiểm tra chúng ta sẽ thực hiện việc kiểm tra này ở phần dưới đây và sau đó sẽ xoá nó đi.

Nhúng Tập Tin script.js Vào Trang Web

Bây giờ chúng ta sẽ nhúng tập tin script.js trên vào trang home.html thông qua thẻ HTML <script>. Chúng ta sẽ đặt thẻ này ngay trước thẻ đóng </body> như sau:

...
<body>
    ...
    <script type="text/javascript" src="./javascripts/script.js"></script>
</body>
...

Việc đặt mã JavaScript ở cuối trang là một tập quán tốt và thường được ứng dụng trong thiết web vì điều này giúp cho mã lệnh JavaScript được chạy sau khi trang HTML đã được trình duyệt tải về và sẽ đảm bảo không xảy ra lỗi khi mà mã JavaScript cần tương tác với một phần tử DOM trên trang nhưng phần tử này lại chưa có do việc tải trang chưa hoàn tất.

Bây giờ bạn mở trình duyệt và tải lại trang home.html để kiểm tra lại. Bạn sẽ thấy lúc này trình duyệt hiển thị một hộp thoại cảnh báo như sau:

Hộp thoại cảnh báo trên trình duyệt

Lưu ý: Mặc dù đặt mã JavaScript ở cuối trang là một tập quán tốt và phổ biến tuy nhiên trong một số trường hợp chúng ta vẫn cần đặt mã JavaScript ở đầu trang (thường trước thẻ đóng </head>). Ví dụ như trường hợp chúng ta cần tới một thư viện JavaScript bên ngoài như jQuery thì cách làm này sẽ giúp chúng ta có thể sử dụng các hàm của thư viện này ở bất cứ vị trí nào trên trang HTML.

Nội dung không được để trống

Hướng Dẫn Liên Quan