Hướng dẫn nhanh 3 cách nhúng JavaScript vào HTML
11/05/2023
929
Có ba cách để nhúng JavaScript vào HTML: External Javascript, Internal Javascript và Inline Javascript. JavaScript có nhiệm vụ làm cho các trang HTML năng động và tăng khả năng tương tác hơn. Hãy cùng Topchuyengia tìm hiểu nhanh 3 cách nhúng JavaScript vào HTML trong bài viết dưới đây.
Tại sao bạn nên nhúng JavaScript vào HTML?
HTML, CSS và JavaScript là ba trụ cột cơ bản của thế giới web hiện đại. Nếu bạn muốn tạo ra một trang web hiện đại, tương tác, thì khó lòng tránh được việc kết hợp CSS và JavaScript vào các tệp văn bản HTML. Các tệp HTML là các tài liệu văn bản thuần để tạo và cấu trúc nội dung trang web. HTML dễ học và bạn có thể làm việc mà không cần định dạng. Nó cũng thân thiện với người dùng nhờ các trình chỉnh sửa mã miễn phí như Notepad++ hoặc Kate. Trên một khía cạnh khác, tính sáng tạo được cung cấp bởi các tệp văn bản CSS được nhúng trong HTML, định nghĩa bố cục, màu sắc, kiểu chữ và các yếu tố thiết kế khác của một trang web.
Một trang web chỉ thực sự tương tác khi có các yếu tố JavaScript, giúp thêm hành vi động vào nội dung. Các tệp JavaScript được nhúng trong HTML, ví dụ như cho phép sửa đổi nội dung trang web một cách tự động như hiển thị ngày tự động, tô màu phụ thuộc vào ngày, hoặc hiển thị thông báo tự động khi truy cập trang web. Với JavaScript được kích hoạt, nội dung JavaScript có thể được thực thi trực tiếp trên hầu hết các trình duyệt. Điều này giúp tiết kiệm công suất xử lý và cải thiện tốc độ tải của nội dung tương tác và hoạt ảnh trên một trang web.
XEM THÊM:
- Review các khóa học đào tạo BA uy tín
- Chuyên gia BA là ai? Họ làm gì trong dự án
Hướng dẫn cách nhúng JavaScript vào HTML
External Javascript File - nhúng JavaScript vào HTML
Để nhúng JavaScript vào HTML bằng tệp JavaScript ngoài, bạn có thể làm theo các bước sau:
- Tạo một tệp JavaScript ngoài với phần mở rộng .js. Ví dụ: external.js
- Trong tệp JavaScript ngoài, viết mã JavaScript của bạn. Ví dụ:
- Trong tệp HTML của bạn, sử dụng thẻ script để nhúng tệp JavaScript ngoài vào. Có hai cách để nhúng:
a) Sử dụng URL tương đối:
b) Sử dụng URL tuyệt đối:
Trong cả hai cách trên, thẻ script được đặt trong phần head hoặc trước phần cuối của thẻ body.
- Khi trang HTML được tải, tệp JavaScript ngoài sẽ được tải và thực thi. Trong ví dụ trên, một hộp thoại thông báo sẽ xuất hiện khi trang HTML được tải.
Lưu ý rằng việc nhúng JavaScript bằng tệp ngoài là một trong nhiều cách để nhúng mã JavaScript vào HTML. Bạn cũng có thể sử dụng các phương pháp khác như nhúng JavaScript trực tiếp trong thẻ script hoặc sử dụng các framework hoặc thư viện JavaScript.
Internal Javascript - nhúng JavaScript vào HTML
Để nhúng JavaScript vào HTML bằng cách sử dụng Internal JavaScript, bạn có thể làm theo các bước sau:
- Trong tệp HTML của bạn, sử dụng thẻ script để nhúng mã JavaScript trực tiếp vào. Có hai cách để làm điều này
- Viết mã JavaScript trực tiếp trong thẻ script
- Sử dụng thẻ script với thuộc tính src để trỏ đến tệp JavaScript nội bộ
- Nếu bạn chọn cách thứ hai, hãy tạo một tệp JavaScript nội bộ với phần mở rộng .js (ví dụ: internal.js). Trong tệp JavaScript này, viết mã JavaScript của bạn
- Đặt thẻ script trong phần head hoặc trước phần cuối của thẻ body.
- Khi trang HTML được tải, mã JavaScript trong phần Internal JavaScript sẽ được thực thi. Trong ví dụ trên, một hộp thoại thông báo sẽ xuất hiện khi trang HTML được tải.
Inline Javascript - nhúng JavaScript vào HTML
- Trong tệp HTML của bạn, sử dụng thuộc tính onload hoặc các sự kiện khác của các phần tử HTML để gọi mã JavaScript trực tiếp.
- Trong ví dụ trên, khi người dùng nhấp vào nút "Nhấn vào đây", hàm myFunction() sẽ được gọi và mã JavaScript sẽ được thực thi. Trong trường hợp này, một hộp thoại thông báo sẽ xuất hiện khi nút được nhấp.
Xem thêm các bài viết hướng dẫn khác:
- Mã hóa md5 là gì - Hàm mã hóa md5 trong PHP
- Hướng dẫn cài đặt SQL Server 2019 mới nhất
- Hướng dẫn đổi cổng XAMPP chi tiết và hiệu quả nhất
0