Tiếp tục làm bài tập Javascript nào. Trong bài này chúng ta làm một số bài tập liên quan đến vòng lặp while nhằm giúp các bạn ôn tập lại kiến thức. Và như thường lệ trong bài này vẫn sử dụng kiến thức ở phần lý thuyết học Javascript toàn tập nên nếu bạn thấy không hiểu bài thì hãy đọc serie đó đi nhé.
Thực sự mà nói thì vòng lặp while rất ít khi sử dụng khi trong các ứng dụng web mà chủ yếu sử dụng vòng lặp for, nó chỉ thường dùng khi các bạn xây dựng Game bằng Javascript hoặc một số trường hợp không xác định được số lần lặp. Vì vậy chúng ta chỉ làm các bài tập đơn giản thôi nhé.
1. Các bài tập vòng lặp while trong Javascript
Trước khi vào bài thì mình có một lưu ý như sau, khi giải các bài tập thì bạn có thể tự mình thay thế cách giải bằng cách sử dụng vòng lặp do while hoặc một vòng lặp khác để nâng cao kỹ năng coding.
0 tới n bằng cách sử dụng vòng lặp while trong javascriptBài này ta sẽ sử dụng một biến index để lưu trữ số lần lặp và sau mỗi vòng lặp while sẽ tăng index lên một đơn vị, lúc này điều lặp sẽ là index <= n. Chúng ta sẽ viết tất cả code trong một hàm để có thể sử dụng nhiều lần, kết hợp với lệnh prompt() để lấy số n. Và cuối cùng để an toàn dữ liệu thì ta sẽ dùng hàm parseInt() để chuyển đổi dữ liệu người dùng nhập sang kiểu number.
Bài giải: XEM DEMO
function tinh_tong(n)
{
var tong = 0;
var index = 0;
while (index <= n)
{
// Nếu số chẵn thì cộng vào
if (index % 2 == 0){
tong += index;
}
// tăng biến đếm
index++;
}
document.write("Tổng số chẵn từ 1 tới " + n + " là: " + tong + "<br/>");
}Nếu kết hợp với hàm prompt() để lấy n từ người dùng thì bạn chỉnh lại bài giải như sau.
Bài giải: XEM DEMO
function tinh_tong(n)
{
var tong = 0;
var index = 0;
while (index <= n)
{
// Nếu số chẵn thì cộng vào
if (index % 2 == 0){
tong += index;
}
// tăng biến đếm
index++;
}
return tong;
}
var n = parseInt(prompt("Nhập số cần kiểm tra"));
document.write("Tổng số chẵn từ 1 tới " + n + " là: " + tinh_tong(n));Nếu giải bài này bằng vòng lặp do while thì bạn cần lưu ý khi sử dụng vòng lặp do while thì nó luôn luôn lặp ít nhất một lần, vì vậy ta phải bắt đầu lặp từ 0 để cho lần lặp đầu tiên không có tác dụng.
Bài giải: XEM DEMO
function tinh_tong(n)
{
var tong = 0;
var index = 0;
do
{
// Nếu số chẵn thì cộng vào
if (index % 2 == 0){
tong += index;
}
// tăng biến đếm
index++;
}
while (index <= n);
return tong;
}
var n = parseInt(prompt("Nhập số cần kiểm tra"));
document.write("Tổng số chẵn từ 1 tới " + n + " là: " + tinh_tong(n));HTML đề bài cho:
<body>
<div>Lẻ</div>
<div>Chẵn</div>
<div>Lẻ</div>
<div>Chẵn</div>
<div>Lẻ</div>
<div>Chẵn</div>
<div>Lẻ</div>
<div>Chẵn</div>
<div>Lẻ</div>
<div>Chẵn</div>
<div>Lẻ</div>
<button onclick="deleteElement()">Remove</button>
</body>Bài này bạn phải sử dụng DOM Element để truy vấn Selectors lấy danh sách các thẻ div, sau đó lặp qua từng thẻ div và kiểm tra thẻ nào là thẻ chẵn và thẻ nào là thẻ lẻ, nếu là thẻ chẵn thì đưa nó vào danh sách cần xóa, sau đó lặp danh sách cần xóa và sử dụng hàm remove() để xóa. Tuy nhiên có một lưu ý hơi ngược đời là vì chúng ta lặp từ 0 cho nên những thẻ chẵn sẽ thay thế vị trí cho thẻ lẽ, vì vậy điều kiện một thẻ có phải nằm vị trí chẵn hay không là (index % 2 != 0 && index != 0)
Bài giải: XEM DEMO
function deleteElement()
{
// Danh sách thẻ div
var elements = document.getElementsByTagName('div');
// Mảng chứa thẻ cần xóa
var elements_remove = [];
// Lặp để lấy thẻ div cần xóa
var index = 0;
while (index < elements.length){
if (index % 2 != 0 && index != 0){
elements_remove.push(elements[index]);
}
index++;
}
// Thực hiện xóa
index = 0;
while (index < elements_remove.length){
elements_remove[index].remove();
index++;
}
}2. Lời kết
Điểm mạnh của Javascript là có các đối tượng DOM, BOM nên những kiến thức lập trình căn bản này chắc hẳn bạn đã học ở một ngôn ngữ lập trình khác rồi, vì vậy để không mất thời gian thì mình sẽ ngưng bài này tại đây và dành thời gian để viết những ví dụ và bài tập Javascript thực tế hơn.
Học Javascript qua các bài tập thực hành
Bạn muốn học và nắm bắt Javascript một cách nhanh nhất thì khoá học Javascript từ đầu sẽ giúp bạn, đây là khóa học được biên soạn dành cho người mới học, và mọi thứ sẽ thông qua thực hành, bạn sẽ dễ dàng nắm bắt và nhớ lâu hơn. Bạn sẽ được học xử kỹ thuật lý các hiệu ứng, thao tác với DOM, BOM và nhiều kỹ thuật khác.
Nguồn: freetuts.net
