- Các loại chú thích và câu lệnh trong JavaScript
- Biến cơ bản trong JavaScript
- Các kiểu biến dữ liệu trong JavaScript
- Cách sử dụng biến và chuỗi trong JavaScript
- Thay đổi nội dung HTML và khả năng hiển thị của JavaScript
- Toán tử trong JavaScript
- Sử dụng hàm trong JavaScript
- Tạo ứng dụng Quiz bằng JavaScript
- Tạo ứng dụng bảng tính bằng JavaScript
- Tìm hiểu về mảng và vòng lặp trong JavaScript
- Sử dụng vòng lặp While trong JavaScript
- Câu lệnh điều kiện IF trong JavaScript
Chào các bạn, hôm nay chúng ta sẽ đến với bài học mới trong chuỗi bài học JavaScript từ cơ bản đến nâng cao của Kênh 49. Trong bài hôm nay chúng ta sẽ cùng tìm hiểu về mảng và vòng lặp trong JavaScript.
Khi bạn có một mảng chứa tất cả dữ liệu trong đó, thì bạn có thể sử dụng một vài cách để lấy ra các giá trị đó và in chúng ra màn hình. Bài học hôm nay chúng ta sẽ học một cách khá hay để làm việc này thông qua việc sử dụng vòng lặp.
GIỚI THIỆU VỀ MẢNG
Đầu tiên ta sẽ tạo một biến và đặt tên cho nó là ALEast, biến này sẽ chứa tất cả các đội bóng rổ trong đó. Nhập các đội bóng từ vòng tứ kết trở vào, chúng ta sẽ đặt ALEast bằng với một mảng chứa tất cả các đội bóng của giải American League. Đó là các đội Yankees, Red Sox, Orioles, Rays, và Blue J. Vậy là các bạn có các đội bóng trong đó. Và mảng cũng đã được thiết lập. Chúng ta sẽ bắt đầu với một biến khá đơn giản như vậy.
<html lang="vi">
<head>
<meta charset="utf-8">
<title>Mảng và vòng lặp - Kênh 49</title>
</head>
<body>
<script>
var ALEast = ["Yankees", "Red Sox", "Orioles", "Rays", "Blue J" ];
</script>
</body>
</html>ĐƯA MẢNG VÀO BẢNG
Một điều mà bạn thường làm đối với một mảng đó là đưa mảng vào một bảng. Cách đơn giản để làm điều này đó chính là sử dụng lệnh document.write và hãy bắt đầu mở thẻ table và đóng thẻ lại. Đây là cách đơn giản để làm điều này và còn nhiều cách khác nữa các bạn có thể làm.
<html lang="vi">
<head>
<meta charset="utf-8">
<title>Mảng và vòng lặp - Kênh 49</title>
</head>
<body>
<script>
var ALEast = ["Yankees", "Red Sox", "Orioles", "Rays", "Blue J" ];
document.write("<table>");
</script>
</body>
</html>Trong lệnh document tiếp theo ta sẽ thêm thẻ tr để biểu diễn hàng.
<html lang="vi">
<head>
<meta charset="utf-8">
<title>Mảng và vòng lặp - Kênh 49</title>
</head>
<body>
<script>
var ALEast = ["Yankees", "Red Sox", "Orioles", "Rays", "Blue J" ];
document.write("<table>");
document.write("<tr><th>Teams</th></tr>");
</script>
</body>
</html>Tóm lại, thường thì chúng ta sẽ bắt đầu bằng việc tạo một bảng mới rồi thiết lặp một hàng và trong hàng đó chúng ta thêm vào tiêu đề là Teams
VÒNG LẶP
Việc tiếp theo chúng ta sẽ làm đó là lặp qua tất cả các đội của American League East và trình bày chúng trong bảng này. Bảng này sẽ là nơi chứa dữ liệu của chúng ta. Để làm điều này hãy sẽ dụng vòng lặp for với i = 0 và i < ALEast.lenght(); biểu thức này sử dụng hàm lenght() để trả về số phần tử trong mảng. Tiếp theo là i++ để làm biến tăng lên.
Việc mà chúng ta muốn là hiển thị mỗi đội bóng vào một hàng. Vì vậy chúng ta sẽ dùng lệnh document.write, trong các dấu nháy đơn ta thêm vào thẻ <tr> <th>, kèm theo một dấu +. Trong đó thêm vào biến ALEast và sử dụng các dấu ngoặc vuông. Thêm vào giá trị của biến i. Bởi vì giá trị này chúng ta đã đươc biết là sẽ tăng lên mỗi lần lặp, giá trị của biến lần lượt sẽ là 0,1,2,3,4. Sau đó thêm vào dấu nháy đơn nữa rồi đóng bảng bằng thẻ. Và nhớ sử dụng document.write(“</table>”); để đóng bảng cho mã HTML thật gọn gàng
<html lang="vi">
<head>
<meta charset="utf-8">
<title>Mảng và vòng lặp - Kênh 49</title>
</head>
<body>
<script>
var ALEast = ["Yankees", "Red Sox", "Orioles", "Rays", "Blue J" ];
document.write("<table>");
document.write("<tr><th>Teams</th></tr>");
for(var i = 0; i < ALEast.length; i++)
{
document.write("<tr><td>" + ALEast[i] + "</th></tr>");
}
document.write("</table>");
</script>
</body>
</html>Sau cùng bạn hãy lưu bảng này lại và chạy thử, bạn sẽ thấy một bảng hiện ra. Bảng này có tiêu đề Teams và in ra từng dữ liệu một mà bạn lấy được trong quá trình lặp qua các đội bóng.
Nếu muốn dữ liệu được sắp xếp theo bảng chữ cái, chúng ta sẽ sử dụng hàm sort(); ALEast.sort();
<html lang="vi">
<head>
<meta charset="utf-8">
<title>Mảng và vòng lặp - Kênh 49</title>
</head>
<body>
<script>
var ALEast = ["Yankees", "Red Sox", "Orioles", "Rays", "Blue J" ];
ALEast.sort();
document.write("<table>");
document.write("<tr><th>Teams</th></tr>");
for(var i = 0; i < ALEast.length; i++)
{
document.write("<tr><td>" + ALEast[i] + "</th></tr>");
}
document.write("</table>");
</script>
</body>
</html>Và đây là cách mình chỉ cho bạn cách sử dụng mảng và vòng lặp trong JavaScript để in ra mọi thứ trên màn hình. Và các sử dụng các thành phần hữu ích như bảng. Và một lần nữa bài học hôm nay chỉ cho bạn nguyên lý đằng sau cách thiết lập dữ liệu đằng sau một ô của bảng, và trong mỗi bảng thông tin sẽ được lặp lại bằng cách sử dụng vòng lặp. Bài học hôm nay bạn đã học được cách quản lý dữ liệu cà hiển thị chúng trong một bảng. Hẹn gặp các bạn ở bài học tiếp theo.