cách nhúng Javascript vào HTML

Học Javascript : cách nhúng Javascript vào HTML5 phút đọc

Cách nhúng Javascript vào HTML là bài thứ hai trong series bài viết “Tự học Javascript cơ bản” trên WDI Blog.Ở bài viết trước bạn đã biết Javascript là gì và lý do vì sao nên học Javascript ngay hôm nay.

Và trong bài viết này bạn sẽ học cách khai báo code Javascript.Không chỉ có lý thuyết nhàm chán mà bạn sẽ được thực hành ngay qua hai ví dụ thực tế trong bài viết.

Còn chờ gì nữa hãy bắt đầu khám phá Javascript ngay thôi nào.

2 cách nhúng Javascript vào HTML

Nhúng Javascript vào HTML chỉ có hai cách duy nhất đó là nhúng trực tiếp vào file HTML và nhúng thông qua file có đuôi mở rộng .js.Đây là kiến thức cơ bản của cơ bản nên bạn cần phải nắm rõ và thực hành thành công nó.

Mình sẽ giải thích thật kĩ kèm theo code và hình ảnh minh họa luôn.Nếu có gì thắc mắc thì đừng ngần ngại hãy vào phần Liên hệ ở chân website và đặt câu hỏi cho mình bạn nhé.

Nhúng trực tiếp vào file HTML

Cách đầu tiên để nhúng Javascript vào trong HTML đó là nhúng trực tiếp thông qua cặp thẻ <script></script>.Về nguyên tắc bạn sẽ khai báo cặp thẻ này trong file HTML và viết code Javascript bên trong chúng.

Để dễ hình dung chúng ta làm thử một ví dụ đơn giản nhé.Bạn hãy tạo ra một file index.html sau đó copy đoạn code dưới đây về. Giờ mình sẽ tiếp tục phân tích code cho bạn hiểu nhé.

index.html

Bên trong cặp thẻ <head> mình sẽ khai báo thêm cặp thẻ <script> để viết code Javascript vào trong đó.

Để kiểm tra xem đã nhúng Javascript vào HTML thành công hay chưa thì bạn hãy khai báo một câu code Javascript hiện thông báo đơn giản đó là : alert(“Xin chào ! WDI Blog”); vào giữa hai cặp thẻ <script>.

Giờ bạn lưu lại và mở file HTML này trên trình duyệt bất kì thử xem.Bạn sẽ thấy xuất hiện một popup thông báo với tiêu đề là : Xin chào ! WDI Blog.

nhúng javascript vào html 0

Trên đây là hình ảnh minh họa kết quả cho popup thông báo.Vậy là bạn đã nhúng Javascript vào HTML thành công rồi đó.Quá đơn giản phải không nào.

Về vị trí cặp thẻ <script>, bạn có thể đặt nó bên trong cặp thẻ <head> hoặc cặp thẻ <body> đều được cả.Nhưng nếu không có yêu cầu gì đặc biệt thì thông thường cặp thẻ <script> này sẽ được đặt ở cuối file HTML trước thẻ đóng </body>.

Nhúng bằng cách gọi file .js

Cách thứ hai để nhúng Javascript vào HTML đó là tạo ra một file chứa code Javascript riêng với phần đuôi mở rộng là .js và nhúng file này vào trong file HTML.Cách này là cách phổ biến nhất và được áp dụng rộng rãi trong thực tế vì dễ quản lý code hơn.

Chúng ta sẽ tiếp tục đến với một ví dụ nữa để bạn dễ hình dung hơn nhé.

nhúng javascript vào html 1

Mình tạo ra một file để chứa code Javascript có tên là main.js.Sau đó mình gọi file Javascript này vào trong file HTML bằng cách khai báo đường dẫn đến nơi chứa file Javascript thông qua thuộc tính src=”” nằm bên trong thẻ mở <script>.

Lần này mình khai báo cặp thẻ <script> này bên trong cặp thẻ <body> để bạn có thể so sánh kết quả so với cách đầu tiên ở trên.

nhúng javascript vào html 2

Tương tự như ở ví dụ đầu tiên thì ở ví dụ này mình vẫn sử dụng câu lệnh xuất ra thông báo trên màn hình với tiêu đề là : “Xin chào ! WDI Blog“.Câu lệnh này mình sẽ khai báo bên trong file main.js như bạn thấy ở hình ảnh trên đây.

Bạn hãy lưu lại cả hai file là index.htmlmain.js.Sau đó mở file index.html trên trình duyệt bạn sẽ thấy kết quả tương tự như ở ví dụ đầu tiên.

Một popup xuất hiện với dòng chữ thông báo “Xin chào ! WDI Blog“.Dưới đây là code để bạn có thể thực hành khi cần.

index.html

main.js

Kết luận

Như bạn thấy cách nhúng Javascript vào HTML khá giống với cách nhúng CSS vào HTML.Mình tin là bạn nào sau khi đọc xong bài viết này cũng sẽ thực hiện thành công 100%.

Đây là bài khởi động và những bài tiếp theo sẽ đi sâu vào code hơn nữa.Hãy luôn theo dõi WDI Blog để cập nhật thêm nhiều kiến thức bổ ích về Javascript trong các bài viết tới nhé.

Bài viết trước

Bài viết sau

 

 

 

 

Nếu bạn thấy bài viết này hay và có ích thì bạn có thể ủng hộ blog của mình bằng một trong số những cách sau để mình có thêm động lực xuất bản nhiều bài viết mới chất lượng hơn nữa.

  • Chia sẻ bài viết này lên mạng xã hội qua các nút bên dưới đây.
  • Thả tim ở ngay cuối cùng bài viết này.
  • Đăng kí nhận thông báo bài viết mới bằng cách nhấn vào chuông đỏ góc dưới cùng bên trái.
  • Đánh giá chất lượng bài viết bằng sao ở trên cùng bài viết này.

Tìm kiếm bài viết trên blog với Google Search :

Bài viết có thể bạn sẽ thích

guest
0 Comments
Inline Feedbacks
View all comments
0
Hãy cùng thảo luận về bài viếtx
()
x