Nhúng JavaScript vào HTML
Tuỳ vào mục đích sử dụng mà các đoạn mã javascript sẽ được chèn vào các file html theo các cách khác nhau. Dưới đây là các cách thông dụng để chèn javascript vào trang html, mỗi cách đều có ưu điểm và nhược điểm của riêng nó. Cùng eLib.VN tham khảo bài viết dưới đây.
Mục lục nội dung
1. Trong thẻ HTML <head>...</head>
Nếu bạn muốn có một script chạy trên một số sự kiện, như khi người sử dụng nhấp chuột vào nơi nào đó, thì khi đó bạn sẽ đặt script đó trong Head như sau:
<html>
<head>
<script type="text/javascript">
<!--
function sayHello() {
alert("Hello World")
}
//-->
</script>
</head>
<body>
<input type="button" onclick="sayHello()" value="Hello!" />
</body>
</html>
Kết quả:
Hello World
2. Trong thẻ HTML <body>...</body>
Nếu bạn cần một script để chạy khi tải trang để tạo nội dung trong trang, thì khi đó. Trong trường hợp này, bạn sẽ không có bất kỳ hàm nào được định nghĩa bởi sử dụng JavaScript. Ví dụ:
<html>
<head>
</head>
<body>
<script type="text/javascript">
<!--
document.write("Hello JavaScript!");
//-->
</script>
<p> Ví dụ nhúng JavaScript và thẻ HTML body </p>
</body>
</html>
Kết quả:
Cách này ít được sử dụng vì JavaScript và JQuery cung cấp nhiều hàm để thực hiện việc chèn nội dung vào HTML.
3. Liên kết với file .js từ bên ngoài
Liên kết với file .js từ bên ngoài, đường dẫn của file .js được khai báo trong thẻ HTML <head>...</head>
Phương pháp này giúp tái sử dụng code và bảo trì dễ dàng hơn.
Ví dụ
Tạo file JavaScript common.js có nội dung như sau:
function sayHello() {
alert("Hello World!")
}
Nhúng file common.js vào trang HTML như sau, sau đó chúng ta có thể sử dụng hàm sayHello():
<html>
<head>
<script type="text/javascript" src="common.js" ></script>
</head>
<body>
<input type="button" onclick="sayHello()" value="Hello!" />
</body>
</html>
Kết quả:
Hello JavaScript!
Ví dụ nhúng JavaScript và thẻ HTML body
Trên đây là bài viết của eLib.VN về Nhúng JavaScript vào HTML. Như vậy với những thông tin cần thiết được đúc kết khác chi tiết và đầy đủ từ bài viết này đã giúp bạn hiểu rõ hơn về ngôn ngữ lập trình javascript. Đồng thời bạn cũng có thể hiểu được cách làm thế nào để nhúng javascript vào html cơ bản nhất. Chúc các bạn thành công!
Tham khảo thêm
- doc Cú pháp trong JavaScript
- doc Biến trong JavaScript
- doc Biến toàn cầu JavaScript
- doc Kiểu dữ liệu trong JavaScript
- doc Toán tử trong JavaScript
- doc Hàm (function) trong JavaScript
- doc Sự kiện (Event) trong JavaScript
