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

https://www.youtube.com/channel/UCyZTnYDACl13tHjxCyvd3ew HTML 5 là phiên bản kế tiếp và là một phiên bản chuẩn mới.Phần lớn các trình duyệt đều hỗ trợ phần tử và giao diện lập trình ứng dụng (API Application Programming Interface) của HTML 5. HTML có khả năng mở rộng khi được sử dụng với JavaScript, hiển thị dữ liệu người dùng định nghĩa được yêu cầu mỗi khi trang web được tải trong trình duyệt.HTML động sử dụng JavaScript và CSS để làm cho các trang web trở lên động và chuyển đổi cảm quan (look and feelgiao diện) của các trang web.

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

 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.

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.

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.

 Đ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

alert('Even Numbers:\n' +

result);

</script>

 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ố];

//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

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>');

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('</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.

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 3-3

 Kết quả

HTML5 / Toán tử và câu lệnh/ 26 of 27