Tôi nên đặt mã javascript của mình vào html ở đâu?
Ngày đăng:24/01/2023
Trả lời:0
Lượt xem:12
Nhận xét kết thúc bằng dấu "//-->". Ở đây "//" biểu thị một nhận xét trong JavaScript, vì vậy chúng tôi thêm nó để ngăn trình duyệt đọc phần cuối của nhận xét HTML dưới dạng một đoạn mã JavaScript. Tiếp theo, chúng tôi gọi một tài liệu chức năng. viết, ghi một chuỗi vào tài liệu HTML của chúng tôi
JavaScript, còn được gọi là JS, là một trong những ngôn ngữ kịch bản (kịch bản phía máy khách), thường được sử dụng trong phát triển web để tạo các trang web hiện đại và tương tác. Thuật ngữ "script" được sử dụng để chỉ các ngôn ngữ không độc lập về bản chất và ở đây nó đề cập đến JavaScript chạy trên máy khách
Nói cách khác, chúng ta có thể nói rằng thuật ngữ kịch bản được sử dụng cho các ngôn ngữ yêu cầu sự hỗ trợ của ngôn ngữ khác để được thực thi. Ví dụ: các chương trình JavaScript không thể được thực thi nếu không có sự trợ giúp của HTML hoặc không được tích hợp vào mã HTML
JavaScript được sử dụng theo nhiều cách trong các trang web như tạo thông báo cảnh báo, xây dựng thư viện hình ảnh, thao tác DOM, xác thực biểu mẫu, v.v.
Thêm JavaScript vào các trang HTML
Có ba cách sau để người dùng có thể thêm JavaScript vào các trang HTML
mã nhúng
mã nội tuyến
tệp bên ngoài
Chúng ta sẽ thấy ba trong số họ từng bước
I. mã nhúng. -
Để thêm mã JavaScript vào các trang HTML, chúng ta có thể sử dụng thẻ của HTML bao quanh mã JavaScript bên trong chương trình HTML. Người dùng cũng có thể xác định mã JavaScript trong thẻ (hay có thể nói là phần nội dung) hoặc thẻ vì nó hoàn toàn phụ thuộc vào cấu trúc của trang web mà người dùng sử dụng
Chúng ta có thể hiểu điều này rõ ràng hơn với sự trợ giúp của một ví dụ, cách thêm JavaScript vào html
Thí dụ
đầu ra
Chúng tôi cũng có thể xác định mã JavaScript trong thẻ hoặc phần nội dung
Hãy hiểu thông qua một ví dụ
đầu ra
II. mã nội tuyến. -
Nói chung, phương thức này được sử dụng khi chúng ta phải gọi một hàm trong thuộc tính sự kiện HTML. Có nhiều trường hợp (hoặc sự kiện) trong đó chúng tôi phải thêm mã JavaScript trực tiếp, ví dụ:. , sự kiện OnMover, OnClick, v.v.
Hãy xem với sự trợ giúp của một ví dụ, cách chúng ta có thể thêm JavaScript trực tiếp vào html mà không cần sử dụng thẻ
Hãy xem ví dụ
đầu ra
III. tệp bên ngoài. -
Chúng tôi cũng có thể tạo một tệp riêng để chứa mã JavaScript bằng (. js) và sau đó kết hợp/đưa nó vào tài liệu HTML của chúng tôi bằng cách sử dụng thuộc tính src của thetag cũng không được sử dụng trong đó
Phần tử noscript HTML
Phần tử cung cấp cho chúng tôi một cách khác để tạo nội dung cho người dùng có trình duyệt không hỗ trợ JavaScript hoặc đã tắt JavaScript trong trình duyệt
Ngay khi Trình phân tích cú pháp HTML gặp mã JavaScript, nó sẽ ngừng phân tích cú pháp HTML và chuyển nó cho công cụ JavaScript để thực thi mã JavaScript
Trong quá trình này, mã JavaScript sẽ báo lỗi nếu không thể tìm thấy phần tử HTML chưa được phân tích cú pháp
Trước tiên hãy xem mã JavaScript
Thêm mã JavaScript vào cuối thẻ
Bằng cách thêm mã Javascript vào cuối thẻ body, nó sẽ đảm bảo rằng các phần tử DOM được tải đầy đủ và có thể truy cập được khi mã Javascript bắt đầu thực thi
Đây là một ví dụ
🛑 Mã Xấu
Trong ví dụ trên, phần tử DOM hộp sẽ không thể truy cập được vào thời điểm trình thông dịch đang cố truy cập thuộc tính InternalHTML của nó
Điều này là do phần tử hộp div được khai báo sau mã Javascript
Như bạn đã biết, nói chung mã đang được thực thi từ trên xuống dưới, từng dòng một
✅ Mã đẹp
Trong ví dụ trên, phần tử box DOM được khai báo trước
Vì vậy, nó sẽ có thể truy cập được khi trình thông dịch bắt đầu thực thi mã Javascript ở phía dưới
khá thẳng về phía trước
Chờ đợi…
Đó có phải là lựa chọn duy nhất?
Vâng… câu trả lời là Không
Ngoài ra, bạn có thể chèn mã Javascript vào đầu thẻ body hoặc bất kỳ đâu trong trang HTML miễn là phương thức onload trên đối tượng cửa sổ thực thi trước, trước khi chạy bất kỳ mã JavaScript nào
✅ Mã đẹp
Trong ví dụ trên, phương thức onload đợi cho đến khi DOM (tất cả HTML trên trang) được tải đầy đủ trước khi bắt đầu thực thi mã Javascript bên trong
Bạn có thể sử dụng DOMContentLoaded thay vì phương thức onload trên đối tượng cửa sổ
Sự khác biệt chính giữa chúng là
Sự kiện DOMContentLoaded kích hoạt khi tài liệu được tải và cây DOM được xây dựng đầy đủ
Phương thức onload kích hoạt khi tất cả các khung con như hình ảnh, biểu định kiểu, tập lệnh, v.v. đã được tải xuống
Thêm mã CSS ở giữa các thẻ
Không giống như JavaScript, mã CSS phải được đưa vào trước khi mã HTML (DOM) được tải trên trình duyệt
Bạn có thể thắc mắc tại sao… bởi vì bạn có thể thêm mã CSS vào cuối phần nội dung và nó sẽ hoạt động tốt
Giống như mã bên dưới… phải không?
🛑 Mã Xấu
Đoạn mã trên hoạt động tốt vì nó có một lượng nhỏ phần tử DOM trong trang
Khi DOM phát triển, bạn có thể thấy một cách lật nhanh mã HTML trên trình duyệt không có CSS sẽ tải trước, sau đó nhanh chóng CSS sẽ được áp dụng cho trang
Để tránh hành vi này, hãy luôn bao gồm mã CSS, cho dù là nội tuyến hay từ một tệp bên ngoài, ở giữa các thẻ đầu
Sử dụng Trì hoãn
Ngoài ra, nếu bạn muốn sử dụng tệp JavaScript bên ngoài bằng thẻ script, bạn có thể đưa vào trước thẻ
kết thúc
Điều này hoạt động gần như mọi lúc, kể cả một số trình duyệt cũ
Nhưng có một cách tốt hơn đó là sử dụng thuộc tính trì hoãn
Trì hoãn làm cho mã JavaScript được liên kết chờ thực thi một lần
Tệp JavaScript được liên kết đã được tải xuống hoàn toàn và
Trình duyệt kết thúc quá trình xây dựng và kết xuất DOM
Sử dụng không đồng bộ
Khi sử dụng thuộc tính async cho phần tử tập lệnh, tệp JavaScript được liên kết bên ngoài sẽ chỉ được thực thi khi được tải xuống đầy đủ