JavaScript là gì? Hướng dẫn tích hợp vào HTML

Trong thế giới phát triển web, JavaScript nổi lên như một ngôn ngữ lập trình dẫn đầu, duy trì vị thế phổ biến nhất trong suốt hai thập kỷ qua. Đây là một trong ba trụ cột cốt lõi của phát triển web hiện đại, song hành cùng HTML và CSS:

HTML (HyperText Markup Language): Là xương sống của trang web, cung cấp cấu trúc và nội dung. Nó giống như bộ khung xương của một ngôi nhà, định hình các yếu tố như tiêu đề, đoạn văn, hình ảnh và liên kết.
CSS (Cascading Style Sheets): Đảm nhiệm vai trò thiết kế và bố cục. CSS giúp trang web trở nên hấp dẫn về mặt thị giác bằng cách định dạng màu sắc, phông chữ, khoảng cách và cách sắp xếp các phần tử trên trang.
JavaScript: Là yếu tố năng động, làm cho trang web trở nên “sống động”. JavaScript cho phép bạn thêm các tính năng tương tác, cập nhật nội dung động, xử lý sự kiện người dùng và mang lại trải nghiệm hấp dẫn hơn.

Một trong những ưu điểm nổi bật của JavaScript là khả năng học và áp dụng nhanh chóng. Nó không chỉ giới hạn ở việc làm phong phú thêm tính năng cho website mà còn có thể được sử dụng để phát triển game, tạo các ứng dụng web phức tạp và thậm chí phát triển phần mềm hoạt động trên nền web. Sự đóng góp to lớn từ cộng đồng lập trình viên, đặc biệt là trên các nền tảng như GitHub, đã tạo ra một hệ sinh thái phong phú với hàng ngàn mẫu template và ứng dụng JavaScript sẵn có.

Hiểu về HTML: Nền tảng của mọi trang web

HTML, viết tắt của Hypertext Markup Language, là ngôn ngữ đánh dấu cho phép bạn tạo và cấu trúc các thành phần trên một trang web hoặc ứng dụng. Nó định nghĩa các khối nội dung như đoạn văn, tiêu đề (headings), siêu liên kết (links), trích dẫn (blockquotes) và nhiều hơn nữa. Về cơ bản, giống như Microsoft Word dùng để định dạng văn bản, HTML sử dụng các cặp thẻ (tags) và thuộc tính (attributes) để đánh dấu và tổ chức nội dung trên trang web.

Ví dụ, để tạo một đoạn văn, bạn sẽ đặt nội dung văn bản vào giữa thẻ mở <p> và thẻ đóng </p>. Tuy nhiên, điều quan trọng cần lưu ý là HTML tự nó không phải là ngôn ngữ lập trình; nó không có khả năng tạo ra các chức năng “động” hay logic phức tạp. Vai trò của nó là định khung và hiển thị nội dung.

Hai cách hiệu quả để tích hợp JavaScript vào HTML

Sau khi đã nắm vững vai trò và sự cần thiết của JavaScript, điều quan trọng tiếp theo là hiểu cách nó tương tác và được nhúng vào cấu trúc HTML của bạn. Có hai phương pháp chính để thực hiện điều này:

1. Nhúng JavaScript trực tiếp vào tệp HTML

Phương pháp đơn giản nhất là đặt mã JavaScript trực tiếp vào tệp HTML bằng cách sử dụng thẻ <script></script>. Mã JavaScript có thể được đặt tại hai vị trí chính trong tệp HTML:

Trong thẻ <head>: Đặt mã JavaScript ở đây thường được coi là một thực tiễn tốt. Nó giúp tách biệt mã logic khỏi nội dung chính của trang, cho phép trình duyệt xử lý các thẻ HTML và hiển thị nội dung trước khi thực thi tập lệnh. Điều này có thể tạo cảm giác trang web tải nhanh hơn cho người dùng.
Trong thẻ <body>: Việc đặt mã JavaScript ở cuối thẻ <body> có thể tăng tốc độ tải trang. Lý do là nội dung của trang web (HTML và CSS) sẽ được tải và hiển thị trước, sau đó trình duyệt mới tiến hành phân tích (parse) và thực thi mã JavaScript. Điều này đặc biệt hữu ích với các trang HTML có nhiều nội dung.

Dưới đây là ví dụ về một tệp HTML cơ bản mà chưa có bất kỳ chức năng JavaScript nào:

<!DOCTYPE html>
<html lang=”en-US”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>Time right now is: </title>
</head>
<body>
</body>
</html>

Để làm cho trang web này hiển thị thời gian thực, chúng ta có thể thêm mã JavaScript sau vào:

var time = new Date();
console.log(time.getHours() + “:” + time.getMinutes() + “:” + time.getSeconds());

Khi đặt mã này vào trong cặp thẻ <script> và </script>, bạn có thể chọn đặt nó ở phần <head> (để nó được thực thi khi trang tải lên và thông báo thời gian hiện tại trong bảng điều khiển của trình duyệt – console) hoặc ở phần <body> để hiển thị trực tiếp trên trang.

Dưới đây là ví dụ với JavaScript được thêm vào phần <head>:

<!DOCTYPE html>
<html lang=”en-US”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>Time right now is: </title>
<script>
var time = new Date();
console.log(time.getHours() + “:” + time.getMinutes() + “:” + time.getSeconds());
</script>
</head>
<body>
</body>
</html>

Nếu mục tiêu là hiển thị thời gian trực tiếp trên phần thân trang, bạn sẽ chèn mã JavaScript vào trong thẻ <body>. Mã này sẽ ghi đè nội dung hiện tại của <body> để hiển thị thời gian dưới dạng một thẻ tiêu đề H1. Đây là ví dụ sau khi chèn:

<!DOCTYPE html>
<html lang=”en-US”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>Time right now is: </title>
</head>
<body>
<script>
let d = new Date();
document.body.innerHTML = “<h1>Time right now is: ” + d.getHours() + “:” + d.getMinutes() + “:” + d.getSeconds()
“</h1>”
</script>
</body>
</html>

Kết quả trực quan:

2. Sử dụng tệp JavaScript độc lập

Trong nhiều trường hợp, việc nhúng JavaScript trực tiếp vào HTML có thể làm cho mã nguồn trở nên lộn xộn, đặc biệt khi bạn có nhiều đoạn mã JavaScript hoặc khi một đoạn mã cần được sử dụng lại trên nhiều trang khác nhau. Giải pháp tối ưu là tạo một tệp JavaScript riêng biệt (.js) và liên kết nó với tệp HTML của bạn. Phương pháp này tương tự như cách bạn liên kết các tệp CSS bên ngoài.

Lợi ích của việc sử dụng tệp JavaScript độc lập bao gồm:

Tái sử dụng mã: Mã JavaScript được viết một lần và có thể được tham chiếu từ nhiều tệp HTML, tiết kiệm thời gian và công sức.
Dễ đọc và bảo trì: Việc tách biệt mã logic khỏi cấu trúc trang giúp mã nguồn dễ đọc hơn, việc tìm kiếm, sửa lỗi và cập nhật trở nên đơn giản hơn.
Cải thiện hiệu suất: Các tệp JavaScript được cache bởi trình duyệt. Khi một người dùng truy cập lại trang web của bạn, trình duyệt có thể tải tệp JavaScript đã được cache thay vì tải lại từ máy chủ, giúp tăng tốc độ tải trang đáng kể.

Dưới đây là cách bạn liên kết một tệp JavaScript có tên myscript.js vào tệp HTML của bạn:

<!DOCTYPE html>
<html lang=”en-US”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>Time right now:</title>
</head>
<body>
</body>
<script src=”js/myscript.js”></script>
</html>

Nội dung của tệp myscript.js sẽ chứa mã để hiển thị thời gian:

let d = new Date();
document.body.innerHTML = “<h1>Time right now is: ” + d.getHours() + “:” + d.getMinutes() + “:” + d.getSeconds()</h1>”

Lưu ý quan trọng: Để liên kết này hoạt động, tệp myscript.js cần được đặt trong một thư mục con tên là ‘js' nằm cùng cấp với tệp HTML của bạn, hoặc bạn cần điều chỉnh đường dẫn `src` cho phù hợp với cấu trúc thư mục thực tế.

Ví dụ thực tế: Xác thực địa chỉ email bằng JavaScript

JavaScript không chỉ làm trang web đẹp mắt hơn mà còn tăng cường chức năng của nó, ví dụ như xác thực dữ liệu nhập từ người dùng ngay tại phía trình duyệt (client-side) trước khi gửi đến máy chủ. Một trong những trường hợp sử dụng phổ biến nhất là kiểm tra tính hợp lệ của địa chỉ email. Hàm JavaScript dưới đây minh họa cách thực hiện điều này:

function validateEmailAddress(email) {
var re = /^(([^<>()[].,;:s@”]+(.[^<>()[].,;:s@”]+)*)|(“.+”))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
function validate() {
$(“#result”).text(“”);
var emailaddress = $(“#email”).val();
if (validateEmailAddress(emailaddress)) {
$(“#result”).text(emailaddress + ” is valid :)”);
$(“#result”).css(“color”, “green”);
} else {
$(“#result”).text(emailaddress + ” is not correct, please retry:(“);
$(“#result”).css(“color”, “red”);
}
return false;
}
$(“#validate”).bind(“click”, validate);

Để tích hợp hàm xác thực này vào một biểu mẫu (form) nhập liệu, bạn có thể sử dụng đoạn mã HTML sau:

<form>
<p>Enter an email address:</p>
<input id='email'>
<button type='submit' id='validate'>Validate!</button>
</form>
<h2 id='result'></h2>

Khi kết hợp cả mã JavaScript và HTML này, người dùng sẽ thấy một ô nhập liệu cho email và một nút “Validate!”. Sau khi nhập email và nhấn nút, kết quả xác thực sẽ hiển thị ngay lập tức bên dưới nút: