Tìm hiểu về HTML và JavaScript
HTML (HyperText Markup Language)
HTML là ngôn ngữ đánh dấu siêu văn bản được sử dụng để tạo cấu trúc và hiển thị nội dung trên trang web. Nó bao gồm các thẻ (tags) và thuộc tính (attributes) để mô tả các phần tử trên trang. Dưới đây là một ví dụ về một tài liệu HTML cơ bản:
<!DOCTYPE html>
<html>
<head>
<title>Tiêu đề trang</title>
</head>
<body>
<h1>Tiêu đề chính</h1>
<p>Đây là một đoạn văn bản.</p>
<img src="image.jpg" alt="Mô tả hình ảnh">
</body>
</html>
Trong ví dụ trên, chúng ta có một tiêu đề trang <title>, tiêu đề chính <h1>, đoạn văn bản <p>, và một hình ảnh <img>. HTML cung cấp nhiều thẻ khác nhau để định dạng và sắp xếp nội dung trên trang.
Công cụ làm việc với HTML
Để làm việc với HTML, bạn có thể sử dụng một trình soạn thảo văn bản đơn giản như Notepad hoặc các trình soạn thảo mã nguồn phổ biến như Visual Studio Code, Sublime Text, hoặc Atom. Sau khi tạo và lưu tệp HTML với phần mở rộng .html, bạn có thể mở trình duyệt web để xem kết quả.
JavaScript
JavaScript là một ngôn ngữ lập trình phía máy khách (client-side) được sử dụng để tạo ra các tương tác động trên trang web. Nó giúp bạn điều khiển hành vi của các phần tử HTML và tương tác với người dùng. Dưới đây là một ví dụ về việc sử dụng JavaScript để hiển thị một thông báo:
<!DOCTYPE html>
<html>
<head>
<title>Tiêu đề trang</title>
<script>
alert("Xin chào! Đây là một thông báo JavaScript.");
</script>
</head>
<body>
<h1>Tiêu đề chính</h1>
<p>Đây là một đoạn văn bản.</p>
<img src="image.jpg" alt="Mô tả hình ảnh">
</body>
</html>
Trong ví dụ trên, chúng ta sử dụng hàm alert() để hiển thị một thông báo popup khi trang web được tải.
console.log, alert, confirm, prompt trong JavaScript
Trong JavaScript, có một số hàm cơ bản để tương tác với người dùng và ghi thông tin ra console. Dưới đây là mô tả của các hàm này:
console.log(): Dùng để ghi thông tin ra console của trình duyệt web. Ví dụ: console.log("Hello, world!");
alert(): Hiển thị một hộp thoại thông báo cho người dùng. Ví dụ: alert("Xin chào!");
confirm(): Hiển thị một hộp thoại xác nhận có hoặc không. Kết quả trả về là true hoặc false tùy thuộc vào lựa chọn của người dùng. Ví dụ: var result = confirm("Bạn có muốn tiếp tục không?");
prompt(): Hiển thị một hộp thoại yêu cầu người dùng nhập dữ liệu. Kết quả trả về là giá trị mà người dùng đã nhập. Ví dụ: var name = prompt("Nhập tên của bạn:");
Viết Hello world với HTML và JavaScript
Để viết một ví dụ Hello World sử dụng cả HTML và JavaScript, bạn có thể sử dụng mã sau:
<!DOCTYPE html>
<html>
<head>
<title>Tiêu đề trang</title>
<script>
function sayHello() {
var name = prompt("Nhập tên của bạn:");
alert("Xin chào, " + name + "!");
}
</script>
</head>
<body>
<h1>Tiêu đề chính</h1>
<p>Đây là một đoạn văn bản.</p>
<button onclick="sayHello()">Nhấn vào đây</button>
</body>
</html>
Trong ví dụ trên, chúng ta có một hàm sayHello() được định nghĩa trong thẻ <script>. Hàm này yêu cầu người dùng nhập tên và sau đó hiển thị một thông báo chào mừng với tên đã nhập. Nút <button> được sử dụng để gọi hàm sayHello() khi được nhấn.
Đây là một tài liệu cơ bản về HTML và JavaScript. Bạn có thể tìm hiểu thêm về các khái niệm và kỹ thuật phức tạp hơn trong lập trình web.