JavaScript: Cách thêm JavaScript vào HTML
Giới thiệu
JavaScript, còn được viết tắt là JS, là một ngôn ngữ lập trình được sử dụng trong phát triển web. Là một trong những công nghệ cốt lõi của web cùng với HTML và CSS, JavaScript được sử dụng để làm cho các trang web trở nên tương tác và để xây dựng các ứng dụng web. Các trình duyệt web hiện đại, tuân theo các tiêu chuẩn hiển thị thông thường, hỗ trợ JavaScript thông qua các công cụ tích hợp sẵn mà không cần bổ sung thêm plugin.
Khi làm việc với các tệp cho web, JavaScript cần được tải và chạy cùng với đánh dấu HTML. Điều này có thể được thực hiện nội tuyến (inline) trong tài liệu HTML hoặc trong một tệp riêng biệt mà trình duyệt sẽ tải xuống cùng với tài liệu HTML.
Hướng dẫn này sẽ trình bày cách kết hợp JavaScript vào các tệp web của bạn, cả nội tuyến vào tài liệu HTML và dưới dạng tệp riêng biệt.
Thêm JavaScript vào tài liệu HTML
Bạn có thể thêm mã JavaScript vào tài liệu HTML bằng cách sử dụng thẻ HTML chuyên dụng <script> bao quanh mã JavaScript.
Các thẻ <script> có thể được đặt trong phần HTML <head> của bạn hoặc trong phần <body>, tùy thuộc vào khi nào bạn muốn Javascript được tải.
Nói chung, mã JavaScript có thể được đặt vào bên trong <head> để giữ cho chúng nằm trong và ngoài nội dung chính của tài liệu HTML của bạn.
Tuy nhiên, nếu tập lệnh của bạn cần chạy tại một điểm nhất định trong bố cục của trang - như khi sử dụng document.write để tạo nội dung - thì bạn nên đặt nó ở điểm mà nó nên được gọi, thường là trong phần <body>.
Hãy xem xét tài liệu HTML trống sau với tiêu đề trình duyệt là Today's Date:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Today's Date</title>
</head>
<body>
</body>
</html>
Hiện tại, tệp này chỉ chứa đánh dấu HTML. Giả sử chúng ta muốn thêm mã JavaScript sau vào tài liệu:
let d = new Date();
alert("Today's date is " + d);
Điều này sẽ cho phép trang web hiển thị cảnh báo (alert) với ngày hiện tại bất kể khi nào người dùng tải trang web.
Để đạt được điều này, chúng ta sẽ thêm một thẻ <script> cùng với một số mã JavaScript vào tệp HTML.
Để bắt đầu, chúng ta sẽ thêm mã JavaScript vào giữa các thẻ <head> và </head>, báo hiệu trình duyệt chạy tập lệnh JavaScript trước khi tải phần còn lại của trang. Ví dụ, chúng ta có thể thêm JavaScript bên dưới thẻ <title>, như được hiển thị bên dưới:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Today's Date</title>
<script>
let d = new Date();
alert("Today's date is " + d);
</script>
</head>
<body>
</body>
</html>
Sau khi tải trang, bạn sẽ nhận được một cảnh báo tương tự như sau:
Nếu chúng ta đang sửa đổi những gì được hiển thị trong phần nội dung của HTML, chúng ta sẽ cần triển khai điều đó sau phần <head> để nó hiển thị trên trang, như trong ví dụ dưới đây:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Today's Date</title>
</head>
<body>
<script>
let d = new Date();
document.body.innerHTML = "<h1>Today's date is " + d + "</h1>"
</script>
</body>
</html>
Đầu ra cho tài liệu HTML ở trên được tải qua trình duyệt web sẽ trông giống như sau:
Các tập lệnh nhỏ hoặc chỉ chạy trên một trang có thể hoạt động tốt trong tệp HTML, nhưng đối với các tập lệnh lớn hơn hoặc tập lệnh sẽ được sử dụng trên nhiều trang, đó không phải là giải pháp hiệu quả vì bao gồm cả nó có thể trở nên khó sử dụng hoặc khó đọc. Trong phần tiếp theo, chúng ta sẽ xem xét cách xử lý một tệp JavaScript riêng biệt trong tài liệu HTML của bạn.
Làm việc với một tệp JavaScript riêng biệt
Để chứa các tập lệnh lớn hơn hoặc tập lệnh sẽ được sử dụng trên một số trang, mã JavaScript thường nằm trong một hoặc nhiều tệp js được tham chiếu trong tài liệu HTML, tương tự như cách các nội dung bên ngoài như CSS được tham chiếu.
Các lợi ích của việc sử dụng một tệp JavaScript riêng biệt bao gồm:
- Tách mã đánh dấu HTML và mã JavaScript để làm cho cả hai đơn giản hơn
- Các tệp riêng biệt giúp bảo trì dễ dàng hơn
- Khi các tệp JavaScript được lưu vào bộ nhớ đệm, các trang sẽ tải nhanh hơn
Để trình bày cách kết nối tài liệu JavaScript với tài liệu HTML, hãy tạo một dự án web nhỏ. Nó sẽ bao gồm script.js trong thư mục js/, style.css trong thư mục css/ và một trang chính index.html trong thư mục gốc của dự án.
project/
├── css/
| └── style.css
├── js/
| └── script.js
└── index.html
Chúng ta có thể bắt đầu với mẫu HTML trước của mình từ phần trên:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Today's Date</title>
</head>
<body>
</body>
</html>
Bây giờ, hãy di chuyển mã JavaScript của chúng ta sẽ hiển thị ngày dưới dạng tiêu đề <h1> cho file script.js:
let d = new Date();
document.body.innerHTML = "<h1>Today's date is " + d + "</h1>"
Chúng ta có thể thêm tham chiếu đến tập lệnh này vào phần <body>, với dòng mã sau:
<script src="js/script.js"></script>
Thẻ <script> được trỏ đến file script.js trong thư mục js/ của dự án web của chúng ta.
Hãy xem xét dòng này trong ngữ cảnh của tệp HTML của chúng ta, trong trường hợp này, trong phần <body>:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Today's Date</title>
</head>
<body>
<script src="js/script.js"></script>
</body>
</html>
Cuối cùng, hãy chỉnh sửa file style.css bằng cách thêm màu nền và kiểu vào thẻ <h1>:
body {
background-color: #0080ff;
}
h1 {
color: #fff;
font-family: Arial, Helvetica, sans-serif;
}
zzzChúng tôi có thể tham chiếu tệp CSS đó trong <head>phần của tài liệu HTML của chúng tôi:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Today's Date</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<script src="js/script.js"></script>
</body>
</html>
Bây giờ, với JavaScript và CSS tại chỗ, chúng tôi có thể tải index.htmltrang vào trình duyệt web mà chúng tôi chọn. Chúng ta sẽ thấy một trang trông tương tự như sau:
Bây giờ chúng tôi đã đặt JavaScript trong một tệp, chúng tôi có thể gọi nó theo cách tương tự từ các trang web bổ sung và cập nhật tất cả chúng ở một vị trí duy nhất
Phần kết luận
Hướng dẫn này đề cập đến cách kết hợp JavaScript vào các tệp web của bạn, cả nội tuyến vào tài liệu HTML và dưới dạng .jstệp riêng biệt .
Từ đây, bạn có thể tìm hiểu cách làm việc với Bảng điều khiển dành cho nhà phát triển JavaScript và cách viết nhận xét bằng JavaScript .