HTML, CSS và JavaScript là ba ngôn ngữ chính được sử dụng trong phát triển front-end. HTML là ngôn ngữ đánh dấu và 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 để xây dựng phía máy khách của các ứng dụng web và di động. Ngôn ngữ nguồn mở năng động này đã trở thành một trong những ngôn ngữ lập trình được sử dụng rộng rãi nhất nhờ 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 cần sử dụng ngôn ngữ lập trình như JavaScript mà trình duyệt có thể hiểu được.
Bài viết này sẽ giải thích lý do bạn cần sử dụng JavaScript với HTML, các cách tiếp cận khác nhau để thê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 đến vậy
- Thêm tính tương tác: Tính tương tác 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. Ví dụ: bạn có thể có bộ đếm tăng lên một đơn vị mỗi lần nó được nhấp vào. Một ví dụ khác là một câu trả lời thông báo cho người dùng 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 để thu thập dữ liệu hợp lệ trong biểu mẫu. Ví dụ: bạn có thể sử dụng ngôn ngữ lập trình này để xác thực dữ liệu nhập của người dùng trên trang đăng ký dựa trên định dạng email, độ dài mật khẩu và tổ hợp ký tự được 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 linh hoạt nội dung của trang web. Nhờ công nghệ này, nội dung của trang được cập nhật tự động dựa trên dữ liệu người dùng nhập 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.
Điều kiện tiên quyết
- Hiểu biết 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ư id, class và bộ chọn 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 JavaScript vào HTML. Chúng tôi nghiên cứu từng cách tiếp cận và xem nó phù hợp nhất ở đâu.
# 1. Nhúng mã giữa các thẻ
Cách tiếp cận này cho phép bạn có 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ẽ chứng minh cách nó hoạt động. 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 tin; 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ã bắt đầu 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ó kết quả như thế này;
Bây giờ chúng ta có thể thêm một đoạn JavaScript đơn giản có nội dung “đã gửi” khi nhấp vào nút gửi. HTML được tái cấu trúc bằng JavaScript sẽ;
<!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 nhấp vào gửi, bạn sẽ nhận được thông tin tương tự như thế này;
Vui lòng nhúng mã JavaScript giữa các thẻ
- Triển khai nhanh chóng: Làm việc trên cùng một tệp có thể giúp bạn tiết kiệm thời gian vì bạn có thể tham chiếu mã JavaScript của mình từ mã HTML từ cùng một tệp.
- Mã dễ đọc: Sự hiện diện của thẻ
- Khiến việc sử dụng lại mã trở nên khó khăn: Nếu bạn có nhiều biểu mẫu trong ứng dụng của mình, điều đó có nghĩa là 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.
#2. Mã nội tuyến bằng cách sử dụng mã JavaScript trực tiếp bên trong HTML
Thay vì đặt đoạn mã JavaScript ở trên vào , bạn có thể thêm nó trực tiếp vào mã HTML. Chúng ta sẽ sử dụng cùng mã HTML và biểu định kiểu (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ỏ sẽ xuất hiện trong trình duyệt của bạn có nội dung "Gửi bằng văn bản".
Ưu điểm của việc thêm JavaScript làm mã nội tuyến
- Triển khai nhanh: 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 thì JavaScript tích hợp là một lựa chọn tuyệt vời.
Nhược điểm của việc thêm JavaScript dưới dạng mã nhúng
- 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 từng biểu mẫu.
- Làm chậm hiệu suất: Các khối mã lớn trong tài liệu HTML có thể làm chậm quá trình tải.
- Khả năng đọc mã: Khi cơ sở mã 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ẽ thấy 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ó thể sẽ có các trang web có tốc độ tải chậm khi có nhiều mã trong tệp HTML của mình.
Tạo tệp script.js mới để lưu trữ mã JavaScript.
Nhập tệp script.js vào 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 cập nhật mới 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 của bạn;
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ó trình xử lý sự kiện đang chờ sự kiện DOMContentLoaded kích hoạt.
- Hàm gọi lại được thực thi khi sự kiện DOMContentLoaded kích hoạt.
- Mã sử dụng querySelector để chọn 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 chuyển sang trang mới) khi sự kiện gửi diễn ra.
- Thông báo "Tải lên trang JS bên ngoài" được kích hoạt khi sự kiện tải lên được kích hoạt.
JavaScript trong HTML: các phương pháp hay nhất
- Giảm kích thước tệp: Kích thước tệp càng lớn thì thời gian tải trong trình duyệt càng lâu. Việc thu nhỏ sẽ 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.
- Sắp xếp mã của bạn: Điều này sẽ giúp dễ đọc và bảo trì hơn. 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 thư viện bên ngoài: Nếu thư viện có thể thực hiện một tác vụ cụ thể 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 hoàn thành 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 JavaScript vào tệp HTML, hãy đảm bảo nó xuất hiện sau HTML. Đặt JavaScript giữa các thẻ
Bạn nghĩ gì về bài báo này?
