Cách sử dụng JavaScript trong HTML để tạo trang web tương tác
HTML, CSS và JavaScript là ba ngôn ngữ chính được sử dụng trong phát triển giao diện người dùng. HTML là ngôn ngữ đánh dấu, trong khi CSS là ngôn ngữ tạo kiểu.
JavaScript là ngôn ngữ lập trình hướng đối tượng chủ yếu được sử dụng để tạo phía máy khách của các ứng dụng web và di động. Ngôn ngữ động nguồn mở này đã trở thành một trong những ngôn ngữ lập trình được sử dụng nhiều nhất do tính linh hoạt và dễ hiểu của nó.
Với HTML5 và CSS3, bạn có thể tạo các trang web tĩnh. Tuy nhiên, để thêm tính tương tác vào một trang web như vậy, bạn phải sử dụng ngôn ngữ lập trình như JavaScript mà trình duyệt hiểu được.
Bài viết này sẽ giải thích lý do tại sao bạn cần sử dụng JavaScript với HTML, các cách tiếp cận khác nhau để thêm mã JavaScript vào HTML và các phương pháp hay nhất để kết hợp hai ngôn ngữ.
Tại sao việc sử dụng JavaScript trong HTML lại quan trọng
- Thêm tính tương tác: Tính tương tác đang phản hồi đầu vào/hành động của người dùng trong thời gian thực mà không cần tải lại trình duyệt. Chẳng hạn, bạn có thể có một bộ đếm tăng lên một lần mỗi khi nó được nhấp vào. Một ví dụ khác có thể là phản hồi cho người dùng biết rằng phản hồi của họ đã được gửi mỗi khi họ nhấp vào nút gửi.
- Xác thực phía máy khách: Bạn có thể sử dụng JavaScript để nắm bắt dữ liệu chính xác trên các biểu mẫu. Chẳng hạn, bạn có thể sử dụng ngôn ngữ lập trình này để xác thực thông tin nhập của người dùng trên trang đăng ký theo định dạng email, độ dài mật khẩu và tổ hợp các ký tự sẽ sử dụng.
- Thao tác DOM: JavaScript cung cấp Mô hình đối tượng tài liệu (DOM), giúp dễ dàng thay đổi nội dung của trang web một cách linh hoạt. Với công nghệ này, nội dung của một trang được cập nhật tự động dựa trên đầu vào của người dùng mà không cần tải lại trang web.
- Khả năng tương thích giữa nhiều trình duyệt: JavaScript tương thích với tất cả các trình duyệt hiện đại. Do đó, các trang web được tạo bằng HTML, CSS và JavaScript sẽ hoạt động hoàn hảo trên các trình duyệt khác nhau.
điều kiện tiên quyết
- Hiểu cơ bản về HTML: Bạn hiểu các thẻ HTML cơ bản, có thể thêm các nút và tạo biểu mẫu bằng HTML.
- Hiểu biết cơ bản về CSS: Bạn hiểu các khái niệm CSS như bộ chọn id, lớp và phần tử.
- Trình chỉnh sửa mã: Bạn có thể sử dụng trình chỉnh sửa mã như VS Code hoặc Atom. Bạn cũng có thể sử dụng trình biên dịch JavaScript trực tuyến nếu không muốn cài đặt phần mềm trên hệ thống của mình.
Cách sử dụng JavaScript trong HTML
Bạn có thể sử dụng ba phương pháp chính để thêm mã JavaScript vào HTML. Chúng tôi khám phá từng phương pháp và nơi phù hợp nhất.
#1. Nhúng mã giữa thẻ
Cách tiếp cận này cho phép bạn có mã JavaScript và HTML trong cùng một tệp (tệp HTML). Chúng ta có thể bắt đầu bằng cách tạo một thư mục dự án nơi chúng ta sẽ trình bày cách thức hoạt động của nó. Bạn có thể sử dụng các lệnh này để bắt đầu;
mkdir javascript-html-playground cd javascript-html-playground
Tạo hai tệp; index.html và style.css
Thêm mã khởi động này vào tệp HTML;
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/style.css" type="text/css" /> </head> <body> <div class="form-container"> <form> <label for="name">Name:</label> <input type="text" id="name" /> <br /> <label for="email">Email:</label> <input type="email" id="email" /> <br /> <label for="message">Message:</label> <textarea id="message" name="message" rows="5" cols="30" required ></textarea> <br /> <input type="submit" value="Submit" /> </form> </div> </body> </html>
Thêm mã khởi động này vào tệp CSS của bạn;
.form-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input[type="text"],
input[type="email"],
textarea {
display: block;
margin-bottom: 10px;
padding: 5px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 8px;
}
input[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 5px 10px;
border: none;
border-radius: 2.5px;
font-size: 8px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #3e8e41;
}
Khi trang web được hiển thị, bạn sẽ có một cái gì đó như thế này;
Giờ đây, chúng tôi có thể thêm một mã JavaScript đơn giản có nội dung “đã gửi” khi bạn nhấp vào nút gửi. Mã HTML được cấu trúc lại với JavaScript sẽ là;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/style.css" type="text/css" />
</head>
<body>
<div class="form-container">
<form>
<label for="name">Name:</label>
<input type="text" id="name" />
<br />
<label for="email">Email:</label>
<input type="email" id="email" />
<br />
<label for="message">Message:</label>
<textarea
id="message"
name="message"
rows="5"
cols="30"
required
></textarea>
<br />
<input type="submit" value="Submit" onclick="submitted()" />
</form>
</div>
<script>
function submitted() {
alert("submitted");
}
</script>
</body>
</html>
Khi bạn nhấp vào nút gửi, bạn sẽ nhận được một cái gì đó tương tự như thế này;
Pros of embedding JavaScript code between <script> … </script> tags
- Fast to implement: Working on the same file can save you time as you can reference your JavaScript code from HTML code from the same file.
- Easy to read code: The presence of <script> tags separates HTML from JavaScript codes, making it easier to read and debug.
Cons of embedding JavaScript code between <script> … </script> tags
- Makes it hard to reuse code: If you have several forms in your app, it means you will create JavaScript code for every form.
- Slows performance: Big code blocks on the HTML document can slow loading speeds.
#2. Inline Code by using JavaScript code directly inside HTML
Instead of enclosing the above JavaScript code in <script> …. </script> tags, you can add it directly to the HTML code. We will use the same HTML code and style sheet (style.css).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/style.css" type="text/css" />
</head>
<body>
<div class="form-container">
<form>
<label for="name">Name:</label>
<input type="text" id="name" />
<br />
<label for="email">Email:</label>
<input type="email" id="email" />
<br />
<label for="message">Message:</label>
<textarea
id="message"
name="message"
rows="5"
cols="30"
required
></textarea>
<br />
<input type="submit" value="Submit" onclick="alert('inline submit')" />
</form>
</div>
</body>
</html>
Khi bạn nhấp vào gửi, một cửa sổ nhỏ trên trình duyệt của bạn có dòng chữ “gửi nội tuyến” sẽ xuất hiện.
Ưu điểm của việc thêm JavaScript làm Mã nội tuyến
- Thực hiện nhanh chóng: Bạn không cần phải chuyển từ tài liệu này sang tài liệu khác để viết mã HTML và JavaScript.
- Hoàn hảo cho một ứng dụng nhỏ: Nếu bạn có một ứng dụng nhỏ không yêu cầu nhiều tính tương tác, JavaScript nội tuyến là một lựa chọn hoàn hảo.
Nhược điểm của việc thêm JavaScript làm Mã nội tuyến
- Mã không thể tái sử dụng: Nếu ứng dụng của bạn có nhiều biểu mẫu, bạn sẽ tạo mã JavaScript cho mọi biểu mẫu.
- Làm chậm hiệu suất: Các khối mã lớn trên tài liệu HTML có thể làm chậm tốc độ tải.
- Khả năng đọc mã: Khi cơ sở mã tiếp tục phát triển, khả năng đọc mã sẽ giảm.
#3. Tạo tệp JavaScript bên ngoài
Khi ứng dụng của bạn phát triển, bạn sẽ lưu ý rằng việc thêm mã JavaScript trực tiếp vào tệp HTML không phải là một ý tưởng hay. Bạn cũng có khả năng có các trang web có tốc độ tải thấp khi bạn có nhiều mã trên tệp HTML của mình.
Tạo một tệp script.js mới để mang mã JavaScript của bạn.
Nhập tệp script.js trên tệp HTML;
<head> <script src="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/script.js"></script> </head>
Trang HTML mới được cập nhật sẽ có mã này;
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/style.css" type="text/css" /> <script src="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/script.js"></script> </head> <body> <div class="form-container"> <form> <label for="name">Name:</label> <input type="text" id="name" /> <br /> <label for="email">Email:</label> <input type="email" id="email" /> <br /> <label for="message">Message:</label> <textarea id="message" name="message" rows="5" cols="30" required ></textarea> <br /> <input type="submit" value="Submit" /> </form> </div> </body> </html>
Thêm mã này vào tệp script.js;
document.addEventListener("DOMContentLoaded", function() {
const form = document.querySelector("form");
form.addEventListener("submit", function(event) {
event.preventDefault();
alert("external JS sheet submit");
});
});
JavaScript này thực hiện như sau;
- Chúng tôi có một trình lắng nghe sự kiện chờ sự kiện DOMContentLoaded kích hoạt.
- Chức năng gọi lại được thực thi sau khi sự kiện DOMContentLoaded được kích hoạt.
- Mã sử dụng querySelector để chọn một biểu mẫu.
- Chúng tôi sử dụng event.preventDefault() để ngăn DOM chọn hành vi mặc định (làm mới trang hoặc điều hướng đến một trang mới) khi sự kiện gửi được kích hoạt.
- Thông báo “gửi trang tính JS bên ngoài” được kích hoạt sau khi sự kiện gửi được kích hoạt.
JavaScript trong HTML: Các phương pháp hay nhất
- Giảm thiểu kích thước tệp: Kích thước tệp càng lớn thì càng mất nhiều thời gian để tải trên trình duyệt. Giảm thiểu loại bỏ tất cả các ký tự không mong muốn trong mã nguồn mà không làm thay đổi ý nghĩa hoặc hiệu suất của nó. Bạn có thể sử dụng các công cụ như Yahoo YUI Compressor và HTMLMinifier để tạo một cơ sở mã nhỏ gọn.
- Giữ mã của bạn có tổ chức: Điều này sẽ giúp bạn dễ đọc và dễ bảo trì. Bạn có thể sử dụng các tiện ích mở rộng như Prettier để sắp xếp mã của mình.
- Sử dụng các thư viện bên ngoài: Nếu một thư viện có thể thực hiện một tác vụ nhất định cho ứng dụng của bạn thì bạn không cần phải viết mã từ đầu. Tuy nhiên, tránh sử dụng nhiều thư viện đạt được cùng mục tiêu trong cùng một dự án.
- Tối ưu hóa vị trí JavaScript: Nếu bạn định thêm mã JavaScript vào tệp HTML của mình, hãy đảm bảo rằng mã này nằm sau mã HTML. Đặt JavaScript giữa các thẻ
