Giới thiệu
JavaScript là một trong những ngôn ngữ lập trình phổ biến nhất trên thế giới, được sử dụng rộng rãi trong phát triển web. Đối với người mới bắt đầu, học JavaScript là bước đầu quan trọng để trở thành một nhà phát triển web. Bài viết này sẽ chia sẻ các ví dụ demo đơn giản giúp bạn dễ dàng luyện tập và nắm vững các kiến thức cơ bản về JavaScript.
Tại sao chọn JavaScript?
1. Ứng dụng rộng rãi
JavaScript là ngôn ngữ lập trình chính được sử dụng trong phát triển web, từ phía client (trình duyệt) đến phía server (với Node.js). Học JavaScript giúp bạn xây dựng được các ứng dụng web động và tương tác.
2. Cộng đồng lớn và nhiều tài liệu
JavaScript có một cộng đồng người dùng rộng lớn và rất nhiều tài liệu học tập miễn phí. Bạn có thể dễ dàng tìm thấy các khóa học, bài viết, và video hướng dẫn để học JavaScript.
3. Hỗ trợ nhiều thư viện và framework
JavaScript có nhiều thư viện và framework mạnh mẽ như React, Angular, và Vue.js, giúp bạn xây dựng ứng dụng web phức tạp một cách dễ dàng.
Các ví dụ demo cho người mới bắt đầu
Dưới đây là một số ví dụ đơn giản giúp bạn làm quen với lập trình JavaScript và luyện tập các kiến thức cơ bản.
1. In ra màn hình “Hello, World!”
Đây là chương trình cơ bản nhất mà mọi người mới học lập trình đều bắt đầu. Chương trình này sẽ in ra dòng chữ “Hello, World!” trên màn hình.
<!DOCTYPE html>
<html>
<head>
<title>Hello, World!</title>
</head>
<body>
<h1>Hello, World!</h1>
<script>
console.log("Hello, World!");
</script>
</body>
</html>2. Tính tổng hai số
Chương trình này yêu cầu người dùng nhập hai số và sau đó tính tổng của chúng.
<!DOCTYPE html>
<html>
<head>
<title>Tính tổng hai số</title>
</head>
<body>
<h1>Tính tổng hai số</h1>
<label for="num1">Số thứ nhất:</label>
<input type="number" id="num1"><br><br>
<label for="num2">Số thứ hai:</label>
<input type="number" id="num2"><br><br>
<button onclick="tinhTong()">Tính tổng</button>
<p id="ketQua"></p>
<script>
function tinhTong() {
var num1 = parseFloat(document.getElementById('num1').value);
var num2 = parseFloat(document.getElementById('num2').value);
var sum = num1 + num2;
document.getElementById('ketQua').innerText = "Tổng của hai số là: " + sum;
}
</script>
</body>
</html>3. Kiểm tra số chẵn hay lẻ
Chương trình này sẽ kiểm tra xem một số nguyên do người dùng nhập vào là số chẵn hay số lẻ.
<!DOCTYPE html>
<html>
<head>
<title>Kiểm tra số chẵn hay lẻ</title>
</head>
<body>
<h1>Kiểm tra số chẵn hay lẻ</h1>
<label for="num">Nhập một số nguyên:</label>
<input type="number" id="num"><br><br>
<button onclick="kiemTraChanLe()">Kiểm tra</button>
<p id="ketQua"></p>
<script>
function kiemTraChanLe() {
var num = parseInt(document.getElementById('num').value);
if (num % 2 === 0) {
document.getElementById('ketQua').innerText = num + " là số chẵn";
} else {
document.getElementById('ketQua').innerText = num + " là số lẻ";
}
}
</script>
</body>
</html>4. Đếm số lần nhấn nút
Chương trình này sẽ đếm và hiển thị số lần người dùng nhấn vào nút.
<!DOCTYPE html>
<html>
<head>
<title>Đếm số lần nhấn nút</title>
</head>
<body>
<h1>Đếm số lần nhấn nút</h1>
<button onclick="dem()">Nhấn vào tôi</button>
<p id="soLanNhan">Bạn đã nhấn nút 0 lần</p>
<script>
var count = 0;
function dem() {
count++;
document.getElementById('soLanNhan').innerText = "Bạn đã nhấn nút " + count + " lần";
}
</script>
</body>
</html>5. Đổi màu nền trang web
Chương trình này cho phép người dùng đổi màu nền của trang web bằng cách chọn màu từ một ô chọn màu.
<!DOCTYPE html>
<html>
<head>
<title>Đổi màu nền trang web</title>
</head>
<body>
<h1>Đổi màu nền trang web</h1>
<label for="color">Chọn màu nền:</label>
<input type="color" id="color" onchange="doiMauNen()">
<script>
function doiMauNen() {
var color = document.getElementById('color').value;
document.body.style.backgroundColor = color;
}
</script>
</body>
</html>6. Đảo ngược một chuỗi
Chương trình này sẽ đảo ngược chuỗi do người dùng nhập vào.
<!DOCTYPE html>
<html>
<head>
<title>Đảo ngược một chuỗi</title>
</head>
<body>
<h1>Đảo ngược một chuỗi</h1>
<label for="string">Nhập một chuỗi:</label>
<input type="text" id="string"><br><br>
<button onclick="daoNguocChuoi()">Đảo ngược</button>
<p id="ketQua"></p>
<script>
function daoNguocChuoi() {
var string = document.getElementById('string').value;
var reversedString = string.split('').reverse().join('');
document.getElementById('ketQua').innerText = "Chuỗi đảo ngược là: " + reversedString;
}
</script>
</body>
</html>7. Tạo đồng hồ số
Chương trình này sẽ hiển thị đồng hồ số cập nhật theo thời gian thực.
<!DOCTYPE html>
<html>
<head>
<title>Đồng hồ số</title>
</head>
<body>
<h1>Đồng hồ số</h1>
<p id="dongHo"></p>
<script>
function capNhatDongHo() {
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
var timeString = hours + ":" + minutes + ":" + seconds;
document.getElementById('dongHo').innerText = timeString;
}
setInterval(capNhatDongHo, 1000);
</script>
</body>
</html>8. Tạo danh sách việc cần làm (To-Do List)
Chương trình này cho phép người dùng thêm công việc vào danh sách và đánh dấu chúng khi hoàn thành.
<!DOCTYPE html>
<html>
<head>
<title>Danh sách việc cần làm</title>
<style>
.done {
text-decoration: line-through;
}
</style>
</head>
<body>
<h1>Danh sách việc cần làm</h1>
<input type="text" id="task" placeholder="Nhập công việc">
<button onclick="themCongViec()">Thêm</button>
<ul id="toDoList"></ul>
<script>
function themCongViec() {
var task = document.getElementById('task').value;
if (task !== "") {
var li = document.createElement('li');
li.innerText = task;
li.onclick = function() {
li.classList.toggle('done');
};
document.getElementById('toDoList').appendChild(li);
document.getElementById('task').value = "";
}
}
</script>
</body>
</html>Kết luận
Việc học lập trình JavaScript thông qua các ví dụ thực hành giúp bạn nắm vững các kiến thức cơ bản và phát triển kỹ năng lập trình một cách hiệu quả. Hãy bắt đầu từ những bài tập đơn giản, kiên trì thực hành và không ngừng khám phá những kiến thức mới. Chúc bạn thành công trên con đường học lập trình JavaScript!