Bài tập JavaScript có lời giải là một trong những tài liệu tham khảo cơ bản và quan trọng cho những người học lập trình, đặc biệt là những người mới bắt đầu. Trong phạm vi bài viết này, chúng mình muốn chia sẻ top 4 bài tập có lời giải cơ bản nhất cho các bạn. Cùng tham khảo để học từ những bài cơ bản nhất nhé.
Bài tập JavaScript số 1
Đề bài: Người dùng nhập và tên và tuổi, bạn hãy viết lại tên và tuổi của người đó ra màn hình bằng hàm document.write và hiển thị tên có màu đậm, tuổi được gạch chân.
Lời giải mẫu:
<HTML>
<HEAD> </HEAD>
<BODY>
<script language = "JavaScript">
var Ten, Tuoi; // Khai báo 2 biến để lưu tên và tuổi
Ten = prompt("Bạn hãy nhập vào tên ", "");
Tuoi = prompt("Bạn hãy nhập vào Tuổi : ", 20);
document.write("Chào bạn : <B> " + Ten + "</B>");
document.write("<BR>"); // Xuống dòng
document.write("Tuổi của bạn là : <U> " + Tuoi + "</U>");
</script>
</BODY>
</HTML>
Bài tập JavaScript số 2
Đề bài: Bạn hãy tạo một nút có name là Welcome, giá trị value là “Welcome” và một textbox có tên là msg, value = “Welcome to”.
Lời giải mẫu:
<HTML>
<HEAD> </HEAD>
<BODY>
<script language = "JavaScript">
document.write("Tao Button va Text bang Script<BR>");
document.write("<BR>");
document.write("<input type=button name=welcome value = 'Welcome' ");
document.write("onclick = 'alert ('Welcome to JavaScript');' > ");
document.write("<input type = text name = msg value = 'Welcome to'>");
</script>
</BODY>
</HTML>
Bài tập JavaScript số 3
Đề bài: Minh họa tính năng đọc giá trị trong phần tử text, sau đó hiển thị ra màn hình.
Tạo một hộp Text có tên là Hoten, một nút có tên là HienThi, value= “Hiển thị”. Khi người dùng click chuột vào nút HienThi thì nội dung trong hộp text sẽ được hiển thị bằng hàm alert.
Lời giải mẫu:
Bạn lấy giá trị của một phần tử HTML nào đó, viết <Tên phần tử>.value.
Minh hoạ :
<HTML>
<HEAD>
<TITLE>Đọc giá trị trong hộp text</TITLE>
</HEAD>
<BODY>
<h2>Hãy gõ văn bản vào trong hộp text và click vào nút Hiển thị</h2>
<INPUT type="text" name="HoTen" >
<INPUT type="button" name="HienThi" value="Hiển thị" onClick="alert(HoTen.value); ">
</BODY>
</HTML>
Bài tập JavaScript số 4
Đề bài: Ẩn và hiển thẻ div bằng JavaScript
Lời giải mẫu:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript Example</title>
</head>
<body>
<h2>Ẩn và hiện thẻ div bằng Javascript</h2>
<p>Sử dụng Javascript để thay đổi thuộc tính display:none để ẩn và display:block để hiển thị thẻ div</p>
<div id="content" style="border: solid 1px; padding: 20px; background: #ddd;">
Nội dung thẻ div: Chào mừng bạn đến đến với webiste học lập trình <a href="https://freetuts.net" title="học lập trình">freetuts.net</a>
</div>
<br/>
<input type="button" id="btn1" value="Ẩn"/>
<input type="button" id="btn2" value="Hiển Thị"/>
<script language="javascript">
document.getElementById("btn1").onclick = function () {
document.getElementById("content").style.display = 'none';
};
document.getElementById("btn2").onclick = function () {
Trên đây là 4 bài tập JavaScript cơ bản nhất mà một người bắt đầu làm quen với lập trình JavaScript có thể tham khảo và thực hành. Sau khi tự thực hành được các bài cơ bản như trên, bạn mới có thể tiếp tục làm các bài tập nâng cao dần. Điều quan trọng là phải thực hành thật nhiều để tự viết từng đoạn code ngắn nhất đến dài hơn trong suốt quá trình học, đồng thời lĩnh hội được những kinh nghiệm hữu ích, tránh các lỗi sai dù là nhỏ nhất khi coding.
Học lập trình bất cứ một ngôn ngữ nào, kể cả JavaScript thì người học cũng cần phải kiên trì đi từ những điều nhỏ nhất nhưng cơ bản nhất. Với 4 bài tập JavaScript cơ bản nhất kể trên, hi vọng bạn sẽ có một khởi đầu học lập trình Javascript thật thuận lợi, càng ngày càng có thêm đam mê với lĩnh vực này .
