JavaScript có nên ở trong cùng một tệp với HTML không?

Để làm cho các ngôn ngữ này hoạt động cùng nhau, bạn phải thêm tệp JavaScript vào tài liệu HTML của mình. Với mục đích làm như vậy, bạn có thể thêm tệp JavaScript bên ngoài vào tài liệu HTML của mình

Thêm tệp JavaScript

To add an external JavaScript file in your HTML document, assign the link of your file to the src attribute in the tag.

cú pháp

script > //thêm tệp JS bằng no

Hoặc là,

script > //thêm tệp JS bằng tệp

Hoặc là,

script > //thêm tệp JS bằng URL

Những điểm cần nhớ

  • You can place these tags either in the section or in the section.
  • Như đã chỉ ra trong cú pháp, phần mở rộng của các tệp JavaScript bên ngoài phải là. js
  • Sẽ có lợi khi sử dụng các tệp JavaScript bên ngoài khi bạn phải sử dụng cùng một mã trong nhiều tài liệu HTML. Hơn nữa, điều này sẽ nâng cao khả năng đọc và bảo trì tài liệu của bạn

Dưới đây chúng tôi đã thảo luận các cách tiếp cận khác nhau để thêm tệp JavaScript của bạn vào HTML

Điều kiện 1. Thêm tệp JS bằng đường dẫn tệp

In order to add your external JavaScript file into your HTML document, you have to provide your file path in the src attribute of the tag.

tập lệnh >

Giả sử chúng ta có các tệp HTML và javascript trong thư mục của mình

Tệp HTML


< html >
< nội dung >

Nhập tên của bạn. < đầu vào loại=" id="tutorial">

< nút title="functionName[]">Submit

< script src="jsFile. js" >< /tập lệnh >

< /body >
< /html >

Trong ví dụ trên, chúng tôi đang tạo một trường nhập yêu cầu người dùng nhập tên của mình

Trong khi đó, chúng tôi đã xác định chức năng của mình trong tệp JavaScript bằng mã sau

hàm Tên hàm []{
    cảnh báo ["Tên của bạn đã được gửi. "];
}

Khi người dùng nhấn nút gửi, một thông báo cảnh báo sẽ được hiển thị

Trong một trường hợp khác, khi tệp HTML của bạn được đặt trong một thư mục riêng và tệp JavaScript trong một thư mục khác như hình bên dưới

Use the following syntax, to add your file path to the src attribute in the tag.

tập lệnh >

Điều kiện 2. Thêm tệp JS bằng URL

When you want to add a JavaScript file that is stored online then you have to simply add the url of your online JavaScript file in the src attribute of your tag.

tập lệnh >

Thí dụ


< html >
< nội dung >
Nhập tên của bạn. < đầu vào loại=" id="tutorial">
< nút title="funcName[]">Submit
< script src="https. //cdn. jsdelivr. net/gh/naftab017/test-repo/index. js" >< /tập lệnh >
< /body >
< /html >

Trong ví dụ trên, chúng tôi đã thêm url của tệp JavaScript bên ngoài được lưu trữ trực tuyến. Tệp JavaScript trực tuyến trông như thế này

Trong tệp trên, chúng tôi đã xác định chức năng của mình nhằm hiển thị thông báo cảnh báo khi người dùng nhấn nút gửi

đầu ra

Làm theo các bước này, bạn có thể dễ dàng thêm tệp JavaScript bên ngoài vào tài liệu HTML của mình

Phần kết luận

Để thêm tệp JavaScript trong HTML, hãy cung cấp đường dẫn tệp JavaScript của bạn tới thuộc tính src của thẻ hoặc nếu bạn đang sử dụng tệp JavaScript được lưu trữ trực tuyến thì bạn phải thêm URL của tệp đó. Trong bài đăng này, chúng tôi đã thảo luận chi tiết về các cách tiếp cận để thêm tệp JavaScript của bạn vào HTML bằng cách minh họa chúng thông qua các ví dụ

JavaScript và HTML có thể ở trong cùng một tệp không?

Bạn không bị hạn chế duy trì mã giống hệt nhau trong nhiều tệp HTML . Thẻ script cung cấp một cơ chế cho phép bạn lưu trữ JavaScript trong một tệp bên ngoài và sau đó đưa nó vào các tệp HTML của bạn.

Mỗi trang HTML có nên có tệp JavaScript riêng không?

Có, bạn có thể sử dụng theo cách này, trang web của bạn tải nhanh hơn . Nhưng nếu bạn bao gồm tất cả JS cho tất cả các tệp, nó sẽ tải chậm hơn vì thời gian tải tăng lên vì cả ba tệp đều tải cho cả ba trang. Hoặc một cách tiếp cận khác.

Tại sao đặt JavaScript trong tệp riêng biệt?

Mặt khác, nếu mã JavaScript của bạn được sử dụng trong nhiều trang web thì bạn nên cân nhắc việc giữ mã của mình trong một tệp riêng. Trong trường hợp đó, nếu bạn muốn thực hiện một số thay đổi đối với mã của mình, bạn chỉ cần thay đổi một tệp giúp bảo trì mã dễ dàng .

JavaScript có thể ở trong một tệp riêng không?

Bạn không cần phải đặt tất cả JavaScript của mình vào cùng một vị trí với tài liệu trang web HTML của bạn. Bạn có thể muốn đặt chúng vào một thư mục JavaScript riêng. Trong trường hợp này, bạn chỉ cần sửa đổi giá trị trong thuộc tính src để bao gồm vị trí của tệp

Chủ Đề