Cách nhúng JS vào HTML

Bạn có thể nhúng JavaScript vào một file HTML theo một trong các cách sau đây:

• Sử dụng các câu lệnh và các hàm trong cặp thẻ
• Sử dụng các file nguồn JavaScript
• Sử dụng một biểu thức JavaScript làm giá trị của một thuộc tính HTML
• Sử dụng thẻ sự kiện [event handlers] trong một thẻ HTML nào đó

Trong đó, sử dụng cặp thẻ ... và nhúng một file nguồn JavaScript là được sử dụng nhiều hơn cả.

Sử dụng thẻ

Script được đưa vào file HTML bằng cách sử dụng cặp thẻ và . Các thẻ có thể xuất hiện trong phần hay của file HTML. Nếu đặt trong phần , nó sẽ được tải và sẵn sàng trước khi phần còn lại của văn bản được tải.

Thuộc tính duy nhất được định nghĩa hiện thời cho thẻ là “LANGUAGE=“ dùng để xác định ngôn ngữ script được sử dụng. Có hai giá trị được định nghĩa là "JavaScript" và "VBScript". Với chương trình viết bằng JavaScript bạn sử dụng cú pháp sau :

// INSERT ALL JavaScript HERE

Chú ý:

Ghi chú không được đặt trong cặp thẻ

Dòng cuối cùng của script cần có dấu // để trình duyệt không diễn dịch dòng này dưới dạng mã JavaScript. Các ví dụ trong chương này không chứa đặc điểm ẩn của JavaScript để mã có thể dễ hiểu hơn.

Sử dụng một file nguồn JavaScript

Thuộc tính SRC của thẻ cho phép bạn chỉ rõ file nguồn JavaScript được sử dụng [dùng phương pháp này hay hơn nhúng trực tiếp một đoạn lệnh JavaScript vào trang HTML].

Cú pháp:

....

Thuộc tính này rấy hữu dụng cho việc chia sẻ các hàm dùng chung cho nhiều trang khác nhau. Các câu lệnh JavaScript nằm trong cặp thẻ và có chứa thuộc tinh SRC trừ khi nó có lỗi. Ví dụ bạn muốn đưa dòng lệnh sau vào giữa cặp thẻ và :

document.write["Không tìm thấy file JS đưa vỡo!"];

Thuộc tính SRC có thể được định rõ bằng địa chỉ URL, các liên kết hoặc các đường dẫn tuyệt đối, ví dụ:

Các file JavaScript bên ngoài không được chứa bất kỳ thẻ HTML nào. Chúng chỉ được chứa các câu lệnh JavaScript và định nghĩa hàm.

Tên file của các hàm JavaScript bên ngoài cần có đuôi .js, và server sẽ phải ánh xạ đuôi .js đó tới kiểu MIME application/x-javascript. Đó là những gì mà server gửi trở lại phần Header của file HTML. Để ánh xạ đuôi này vào kiểu MIME, ta thêm dòng sau vào file mime.types trong đường dẫn cấu hình của server, sau đó khởi động lại server:

type=application/x-javascript

Nếu server không ánh xạ được đuôi .js tới kiểu MIME application/x-javascript , Navigator sẽ tải file JavaScript được chỉ ra trong thuộc tính SRC về không đúng cách.

Chú ý:

Khi bạn muốn chỉ ra một xâu trích dẫn trong một xâu khác cần sử dụng dấu nháy đơn [' ] để  phân  định xâu đó. Điều này cho phép script nhận ra xâu ký tự đó.

JavaScript là công cụ tuyệt vời giúp các website trở nên sống động hơn trong mắt người dùng. Để sử dụng được JavaScript, bạn cần biết cách nhúng JavaScript vào HTML để tối ưu nhất. Thông thường, có 3 cách để chèn [nhúng] JavaScript vào HTML. Hãy cùng tìm hiểu JavaScript là gì? Cũng như cách nhúng JavaScript qua bài viết dưới đây.

Mục lục

JavaScript là gì?

JavaScript là ngôn ngữ kịch bản [Scripting Language] được sử dụng phổ biến để lập trình website. Đây là một ngôn ngữ lập trình mạnh mẽ và đa năng, rất hữu ích với các lập trình viên công. Nó còn giúp dân IT có thể lập trình Front-end tiện lợi và nhanh chóng. JavaScript cùng với HTML và CSS sẽ tạo nên 1 website hoàn thiện. 

Đối với một website thì JavaScript là đoạn code giúp các thành phần của Website tương tác với nhau cũng như giúp người sử dụng có thể giao tiếp với website. Hiện nay, bạn có thể sử dụng trực tiếp JavaScript để lập trình Front-end dễ dàng. Ngoài ra bạn còn có thể dùng các framework như ReactJS, AngularJS và VueJS để tạo nên website.

3 cách nhúng JavaScript vào HTML

Để lập trình được website hoàn thiện, ta phải thêm JavaScript vào HTML. Đoạn mã HTML sẽ tạo nên bố cục ban đầu của website. Thế nhưng nếu chỉ có HTML không thì website sẽ không thể tương tác được. Do đó, ta cần phải thêm [nhúng] JavaScript vào HTML. Có 3 cách để thêm JavaScript vào HTML như sau:

Nhúng JavaScript vào HTML trực tiếp kiểu Internal

Cách đầu tiên mà bạn có thể dùng để chèn JavaScript vào HTML là sử dụng kiểu Internal. Ở cách này, bạn sẽ viết trực tiếp code JavaScript trong HTML. Thông thường, với cách Internal, bạn có thể chèn đoạn mã JavaScript vào thẻ hay đều được. Để chèn mã JavaScript vào HTML, bạn hãy đặt đoạn mã này trong 2 thẻ . Sau đó hãy tiến hành viết code như bình thường.

Thêm JavaScript vào HTML trực tiếp kiểu Inline

Cách nhúng JavaScript vào HTML trực tiếp kiểu Inline cũng tương tự như kiểu Internal. Với cách này, bạn có thể viết trực tiếp vào HTML mà không cần sử dụng thẻ . Tuy nhiên, chỉ một vài trường hợp có thể dụng cách viết này. Những đoạn mã JavaScript có thể ứng dụng kiểu Inline là khi dùng các tính năng DOM. Ví dụ như Onclick và thao túng thẻ . 

Nhúng JavaScript gián tiếp kiểu External

Cách cuối cùng bạn có thể chèn JavaScript vào HTML là sử dụng kiểu External. Đối với cách này, bạn sẽ tách file JavaScript thành 1 file độc lập rồi sau đó dẫn đường link của file đến file HTML. Đầu tiên, bạn hãy viết code JavaScript vào một file độc lập và lưu lại với đuôi “.JS”. Tiếp theo, bạn hãy cùng cú pháp để chèn file JavaScript vào HTML. Các bạn để có chèn đoạn code vào thẻ hay đều được.

Để kết hợp được JavaScript với HTML và CSS, bạn cần phải thêm JavaScript vào HTML. Cách nhúng tuy đơn giản nhưng cũng không nên chủ quan vì nếu sai một lỗi sẽ rất khó phát hiện ra. Hãy ghi nhớ 3 cách nhúng JavaScript vào HTML như trên để dễ dàng thành công hơn.