HTML5 XP session 14 vòng lặp và mảng T7

Bài 14:
Lệnh lặp và Mảng
NexTGen Web
Lệnh lặp và Mảng
Mục tiêu bài học

Giải thích vòng lặp while

Giải thích vòng lặp for

Giải thích vòng lặp do while

Giải thích câu lệnh break và continue

Giải thích mảng một chiều

Giải thích mảng nhiều chiều

Giải thích vòng lặp for in
Lệnh lặp

Vòng lặp cho phép bạn thực hiện một lệnh đơn hoặc một khối lệnh nhiều
lần.

Chúng được sử dụng rộng rãi khi bạn muốn hiển thị một loạt các con số và
chấp nhận đầu vào lặp đi lặp lại.

Một cấu trúc vòng lặp bao gồm một điều kiện là chỉ thị cho trình biên dịch
số lần một khối cụ thể của mã sẽ được thực thi.

Nếu điều kiện không được chỉ định trong cấu trúc, vòng lặp lặp vô hạn.


Các kiểu lệnh lặp bao gồm:
•
for
•
do …. while
•
while
•
break & continue
•
for….in
Lệnh lặp while

Cú pháp

Ví dụ:
while (điều_kiện)
{
các_câu_lệnh;
}
<script type="text/javascript">
var i=0;
var sum=0;
while (i<=10)
{
sum=sum + i ;
i = i + 1;
}
alert("Sum of first 10 numbers: "+sum)

</script>
Vòng lặp while thực hiện một khối mã lệnh trong thân của nó khi điều kiện đã cho vẫn
còn đúng.
Vòng lặp while được bắt đầu bằng từ khóa while, theo sau là cặp dấu ngoặc đơn có chứa
một điều kiện boolean bên trong.
Nếu điều kiện này trả về true, khối lệnh trong thân vòng lặp while được thực hiện.
Một khi điều kiện trở thành sai, câu lệnh while dừng lại và chuyển điều khiển đến câu
lệnh tiếp theo ngay sau khối while.
Lệnh lặp while 1-2

Cú pháp
HTML5 / Toán tử và câu lệnh/ 5 of 27
while (điều_kiện)
{
các_câu_lệnh;
}
Lệnh lặp while 1-2

Ví dụ
HTML5 / Toán tử và câu lệnh/ 6 of 27
<script>
var i = 0;
var sum = 0;
while(i<=10)
{
sum = sum + i;
i = i + 1;
}
alert(‘Sum of first 10 numbers: ‘ + sum);
</script>

Kết quả
Lệnh lặp for 1-2

Cú pháp:
HTML5 / Toán tử và câu lệnh/ 7 of 27
Cú pháp đơn giản:
for (initalization; condition; increment/decrement){
các_câu_lệnh;
}
Cú pháp khuyết biểu thức 1:
for ( ; condition; increment/decrement){
các_câu_lệnh;
}
Cú pháp khuyết biểu thức 2:
for (initalization; ; increment/decrement){
các_câu_lệnh;
}
Cú pháp khuyết biểu thức 3:
for (initalization; condition; ){
các_câu_lệnh;
}
Cú pháp không có biểu thức nào:
for ( ; ; ) {
các_câu_lệnh;
}
Lệnh lặp for 2-2

Ví dụ
HTML5 / Toán tử và câu lệnh/ 8 of 27
<script>

var inputNum = prompt('Enter any number:');
var result = 0;
document.write ('Multiples of: ' + inputNum + '<br/>');
for (var i=1; i<=10; i++)
{
result = inputNum * i ;
document.write (inputNum + ' * '
+ i + ' = ' + result + '<br />');
}
</script>
Lệnh lặp do - while

Cú pháp

Ví dụ
do
{
các_câu_lệnh;
} while (điều_kiện);
<script type="text/javascript">
var answer='';
do
{
answer= prompt('Capital of United States:','');
}while (answer='Washington');
</script>
Câu lệnh break 1-2

Lệnh break có thể được sử dụng với câu lệnh ra quyết định cũng như
switch và cấu trúc như vòng lặp for và while


Lệnh break được ký hiệu bằng cách sử dụng từ khoá break. Nó được
sử dụng để thoát khỏi vòng lặp mà không xét các điều kiện quy định.

Điều khiển sau đó được đưa vào câu lệnh tiếp theo ngay sau vòng lặp.
Câu lệnh break 2-2

Ví dụ
HTML5 / Toán tử và câu lệnh/ 11 of 27
<script>
var inputNum = parseInt(prompt('Enter number: ',''));
var num = 2;
while(num <= inputNum-1)
{
if(inputNum % num == 0) {
alert(inputNum + ' is not a Prime Number');
break;
}
num++;
}
if(num == inputNum) {
alert(inputNum + ' is a Prime Number');
}
</script>
Câu lệnh continue 1-2

Câu lệnh continue chủ yếu được sử dụng trong các cấu trúc vòng lặp và
được ký hiệu là từ continue.

Nó được sử dụng để chấm dứt việc thực hiện hiện tại của vòng lặp và tiếp

tục với sự lặp lại tiếp theo bằng cách trả lại quyền kiểm soát cho đầu vòng
lặp.

Điều này có nghĩa, câu lệnh tiếp tục sẽ không chấm dứt vòng lặp hoàn
toàn, nhưng chấm dứt thực thi hiện hành.

Hình sau thể hiện luồng thực thì của continue
HTML5 / Toán tử và câu lệnh/ 12 of 27
Câu lệnh continue 2-2
<script>
var result = '';
for (var i = 0; i <= 15; i++)
{
if((i%2) != 0)
{
continue;
}
result = result + i + '\n';
}
alert('Even Numbers:\n' +
result);
</script>
Mảng

Mảng là một tập hợp các giá trị được lưu trữ liên tiếp trong bộ nhớ.

Các giá trị của mảng có cùng kiểu dữ liệu và được tham chiếu bằng một
tên chung.

Các giá trị được coi như là các phần

tử được truy xuất bằng số thứ tự
của vị trí hay còn gọi là chỉ số.

Hình sau đây cho thấy đạt được sử
dụng bộ nhớ hiệu quả khi dùng
mảng.
Mảng một chiều 1-3

Các phần tử của mảng được lưu trữ thành một hàng trong bộ nhớ
được cấp phát.

Hình dưới đây cho thấy sự cấp phát bộ nhớ cho mảng một chiều

Như đã thấy trong hình minh họa, phần tử đầu tiên của mảng có chỉ số
là 0(zero). Phần tử cuối cùng có chỉ số là tổng số phần tử trừ đi 1.

Sự sắp xếp như vậy giúp cho việc lưu trữ dữ liệu đạt hiệu quả.
Mảng một chiều 2-3

Khai báo mảng: có hai cách
•
Khai báo và chỉ ra kích thước mảng
•
Khai báo và khởi tạo phần tử mảng
Hoặc

Truy xuất phần tử mảng
HTML5 / Toán tử và câu lệnh/ 16 of 27
var tên_mảng = new Array(kích_thước);
var tên_mảng = new Array([phầntử0, phầntử1, , phầntửN])

var tên_mảng = [phầntử0, phầntử1, , phầntửN];
tên_mảng[chỉ_số];
Mảng một chiều 3-3

Đoạn code dưới đây cho thấy nhiều cách khác nhau để khai báo vào
khởi tạo mảng một chiều
HTML5 / Toán tử và câu lệnh/ 17 of 27
<script>
//Khai báo bằng đối tượng Array và sau đó khởi tạo
var marital_status = new Array(3);
marital_status[0] = ‘Single’;
marital_status[1] = ‘Married’;
marital_status[2] = ‘Divorced’;
//Khai báo và khởi tạo
var marital_status = new
Array(‘Single’,’Married’,’Divorced’);
//Khai báo và khởi tạo
var marital_status = [‘Single’,’Married’,’Divorced’];
</script>
Mảng đa chiều

Mảng hai chiều là một ví dụ của mảng
đa chiều.

JavaScript không hỗ trợ trực tiếp mảng
hai chiều. Bạn có thể tạo mảng hai
chiều bằng việc tạo mảng của các
mảng một chiều.

Cách khai báo vào khởi tạo mảng hai

chiều
var tên_mảng = new Array(kích_thước);
tên_mảng[chỉ_số]=new Array('giá_trị_1',…'Giá_trị_N');
Truy cập mảng hai chiều 1-3

Mảng đa chiều có thể được truy cập bằng cách sử dụng các chỉ số của biến mảng chính
cùng với chỉ số phụ mảng.

Code sau tạo ra một mảng hai chiều có hiển thị các chi tiết của nhân viên.
HTML5 / Toán tử và câu lệnh/ 19 of 27

Truy cập phần tử không sử dụng vòng lặp
<script>
var employees = new Array(3);
employees[0] = new Array('John', '25', 'New Jersey');
employees[1] = new Array('David', '21', 'California');
document.write('<H3> Employee Details </H3>');
document.write('<P><B>Name: </B>' + employees[0][0] + '</P>');
document.write('<P><B>Location: </B>' + employees[0][2] + '</P>');

document.write('<P><B>Name: </B>' + employees[1][0] + '</P>');
document.write('<P><B>Location: </B>' + employees[1][2] + '</P>');
</script>
Truy cập mảng hai chiều 2-3
HTML5 / Toán tử và câu lệnh/ 20 of 27

Truy cập sử dụng vòng lặp
<script>
var products = new Array(2);
products[0] = new Array('Monitor', '236.75');

products[1] = new Array('Keyboard', '45.50');
document.write('<TABLE border=1><TR><TH>Name</TH>
<TH>Price</TH></TR>');
for(var i=0; i<products.length; i++)
{
document.write('<TR>');
for(var j=0; j<products[i].length; j++)
{
document.write('<TD>' + products[i][j] + '</TD>');
}
document.write('</TR>');
}
document.write('</TABLE>');
</script>
Truy cập mảng hai chiều 3-3

Kết quả
HTML5 / Toán tử và câu lệnh/ 21 of 27
Các phương thức của mảng

Các phương thức của đối tượng mảng có thể dùng thao tác trên mảng.

Các phương thức của đối tượng mảng bao gồm:
•
concat(arr): Ghép các phần tử của mảng arr vào cuối mảng.
•
join(["delimeter"]): Ghép các phần tử của mảng thành một chuỗi. Các
phần tử ngăn cách bởi delimeter.
•
pop(): Trả về phần tử cuối cùng trong mảng và xóa nó khỏi mảng.

•
push(item1,…,itemN): Chèn thêm một hoặc nhiều phần tử vào cuối
mảng.
•
sort(): Săp xếp mảng theo bảng chữ cái.
Các phương thức của mảng

Ví dụ:
<script type="text/javascript">
var arr = new Array(3)
arr[0] = "Jani"
arr[1] = "Tove"
arr[2] = "Hege"
var arr2 = new Array(3)
arr2[0] = "John"
arr2[1] = "Andy"
arr2[2] = "Wendy"
document.write("Số phần tử mảng:"+ arr.length + "<br>")
document.write( arr.concat(arr2) + "<br>")
document.write(arr.join(".") + "<br>")
document.write(arr.push("Bush", "Bill") + "<br>")
document.write("Mảng được sắp xếp: "+arr.sort()+ "<br>")
document.write("Phần tử bị xóa khỏi mảng: "+arr.pop()+ "<br>")
</script>
Vòng lặp for in 1-3
HTML5 / Toán tử và câu lệnh/ 24 of 27
Cú
pháp:
for (variable_name in array_name)
{

//statements;
}
Vòng lặp for in 2-3

Ví dụ
HTML5 / Toán tử và câu lệnh/ 25 of 27
<script>
var books = new Array(‘Beginning CSS 3.0’,
‘Introduction to HTML5’, ‘HTML5 in Mobile
Development’);

document.write(‘<H3> List of Books </H3>’);
for(var i in books)
{
document.write(books[i] + ‘<br/>’);
}
</script>