HTML - JavaScript: Hướng dẫn cho người mới bắt đầu

Xin chào các bạn đang học lập trình web! Tôi rất vui mừng được làm hướng dẫn viên của các bạn trong hành trình thú vị vào thế giới của HTML và JavaScript. Là một người đã dạy lập trình hơn một thập kỷ, tôi có thể đảm bảo với các bạn rằng sẽ có rất nhiều điều thú vị đang chờ đợi. Hãy cùng nhau lặn sâu và khám phá những bí ẩn của phát triển web nhé!

HTML - Javascript

JavaScript là gì?

Trước khi chúng ta nhảy vào những chi tiết cụ thể, hãy hiểu xem JavaScript là gì. JavaScript là một ngôn ngữ lập trình mạnh mẽ giúp网页生动起来. Nó giống như cây phép của internet, biến những trang HTML tĩnh thành những trang tương tác và phản hồi với các hành động của người dùng.

Hãy tưởng tượng một trang web như một ngôi nhà. HTML là cấu trúc - những bức tường, mái nhà và nền móng. CSS là sơn và trang trí. JavaScript? Đó là điện, nước và tất cả các thiết bị thông minh giúp ngôi nhà hoạt động và tương tác!

Cú pháp

JavaScript có một bộ quy tắc riêng, giống như bất kỳ ngôn ngữ nào khác. Hãy phân tích cơ bản:

Biến

Biến giống như những容器 chứa thông tin. Dưới đây là cách bạn宣布它们:

let tenCuaToi = "Alice";
const tuoiCuaToi = 25;
var soThichCuaToi = "lập trình";

Trong ví dụ này:

let được sử dụng cho các biến có thể thay đổi.
const là cho các biến không thay đổi.
var là cách宣布 biến cũ, nhưng let và const được ưa thích hơn bây giờ.

Hàm

Hàm là những khối mã có thể tái sử dụng. Chúng giống như những công thức cho chương trình của bạn:

function chao(name) {
console.log("Xin chào, " + name + "!");
}

chao("Bob"); // Xuất: Xin chào, Bob!

Hàm này nhận một name làm đầu vào và in ra lời chào. Nó giống như một robot thân thiện chào hỏi bất kỳ ai bạn giới thiệu cho nó!

Câu điều kiện

Những câu này giúp mã của bạn ra quyết định:

let nhietDo = 22;

if (nhietDo > 30) {
console.log("Ngoại trời rất nóng!");
} else if (nhietDo > 20) {
console.log("Đây là một ngày đẹp!");
} else {
console.log("Ngoại trời hơi lạnh.");
}

Mã này kiểm tra nhiệt độ và đưa ra các thông báo khác nhau tùy thuộc vào mức độ ấm áp. Nó giống như dạy máy tính làm bình luận thời tiết!

Ví dụ về JavaScript trong HTML

Bây giờ, hãy xem cách chúng ta có thể sử dụng JavaScript trong các trang HTML của mình. Có ba cách chính để làm điều này:

1. JavaScript nội tuyến

Đây giống nhưispersing một hướng dẫn nhanh:

<button onclick="alert('Xin chào!')">Nhấn vào tôi</button>

Khi bạn nhấn vào nút này, nó sẽ hiển thị một hộp thoại nói "Xin chào!". Nó nhanh và dễ dàng, nhưng không tốt cho các đoạn mã lớn.

2. JavaScript nội bộ

Đây giống nhưcho trang HTML của bạn một não bộ riêng:

<!DOCTYPE html>
<html>
<head>
<title>Trang của tôi</title>
<script>
function doiMau() {
document.body.style.backgroundColor = "lightblue";
}
</script>
</head>
<body>
<button onclick="doiMau()">Thay đổi Màu</button>
</body>
</html>

Đoạn mã này thay đổi nền trang thành xanh lam khi bạn nhấn vào nút. Nó giống nhưcho trang web của bạn khả năng thay đổi màu sắc!

3. JavaScript ngoại bộ

Đây giống nhưcho trang web của bạn một não bộ riêng biệt mà nó có thể tham khảo:

<!DOCTYPE html>
<html>
<head>
<title>Trang của tôi</title>
<script src="myscript.js"></script>
</head>
<body>
<button onclick="chao()">Nói Hello</button>
</body>
</html>

Và trong myscript.js:

function chao() {
alert("Xin chào từ một tệp ngoại bộ!");
}

Điều này giữ cho HTML của bạn sạch sẽ và JavaScript của bạn được tổ chức. Nó giống nhưgiữ các công cụ của bạn trong một hộp công cụ thay vì rải rác khắp nhà.

Element HTML

Đôi khi, JavaScript có thể không khả dụng hoặc không được启用 trong trình duyệt của người dùng. Đó là lúc element <noscript> phát huy tác dụng:

<script>
document.write("Xin chào, JavaScript đang hoạt động!");
</script>
<noscript>
<p>Oh không! Trình duyệt của bạn không hỗ trợ JavaScript hoặc nó đã tắt.</p>
</noscript>

Điều này giống như có một kế hoạch dự phòng. Nếu JavaScript hoạt động, người dùng sẽ thấy thông điệp đầu tiên. Nếu không, họ sẽ thấy thông điệp thứ hai. Luôn tốt hơn khi chuẩn bị trước!

Bảng phương thức JavaScript

Hãy xem xét một số phương thức JavaScript phổ biến mà bạn sẽ thường sử dụng:

Phương thức	Mô tả	Ví dụ
`alert()`	Hiển thị một thông báo pop-up	`alert("Xin chào, Thế giới!");`
`console.log()`	In ra console của trình duyệt	`console.log("Đây là một log");`
`document.getElementById()`	Tìm một element HTML theo ID	`let elem = document.getElementById("myDiv");`
`addEventListener()`	Thêm một handler sự kiện vào element	`button.addEventListener("click", function() { alert("Nhấn!"); });`
`setTimeout()`	Thực thi một hàm sau một khoảng thời gian	`setTimeout(function() { console.log("Tin nhắn bị trì hoãn"); }, 2000);`

Những phương thức này giống như những cây kéo đa năng của JavaScript - linh hoạt và rất hữu ích!

Kết luận

Chúc mừng! Bạn đã bước ra những bước đầu tiên vào thế giới của HTML và JavaScript. Nhớ rằng, học lập trình giống như học骑自行车 - ban đầu có thể cảm thấy không vững, nhưng với sự luyện tập, bạn sẽ nhanh chóng zoom qua trong tích tắc.

Đừng sợ thử nghiệm, mắc lỗi và học hỏi từ những sai lầm. Đó là cách tất cả các lập trình viên vĩ đại đã bắt đầu! Hãy tiếp tục lập trình, học hỏi và quan trọng nhất, hãy vui vẻ với nó. Trước khi bạn nhận ra, bạn sẽ xây dựng những trang web và ứng dụng web tuyệt vời.

Chúc mừng coding, những phù thủy web tương lai! ??‍??‍?

Credits: Image by storyset