Nối tiếp Chương 5 – Mảng

7. Bài thực hành

Bài 1: Tạo và thao tác với mảng

Mục tiêu:

Luyện tập tạo mảng, thao tác với mảng.

Mô tả:

Viết một chương trình JavaScript để thêm vào các phần tử trong một mảng và hiển thị chúng.

Giao diện mẫu như sau:

Hướng dẫn:

Bước 1: Tạo file arrayElement.html. Thêm mã lệnh html để tạo giao diện:

1.	<!DOCTYPE html>
2.	<html>
3.	<head>
4.	   <meta charset=utf-8 />
5.	   <title>JS Bin</title>
6.	   <style>
7.	       body {padding-top:50px}
8.	    </style>
9.	</head>
10.	<body>
11.	   <input type="text" id="txtValue"></input>
12.	   <input type="button" 
13.	id="btnAdd" 
14.	value="Add" 
15.	onclick="add_element_to_array();"></input>
16.	   <input type="button" 
17.	id="btnDisplay" 
18.	value="Display" 
19.	onclick="display_array();"></input>
20.	   <div id="result"></div>
21.	</body>
22.	</html>

Thêm sự kiện onclick cho button Add gọi đến hàm add_element_to_array() và Display gọi đến hàm display_array().

Bước 2: Tạo biến x và khởi tạo bằng 0, x là chỉ số truy cập tới các phần tử trong mảng.

1.	let x = 0;

Bước 3: Tạo mảng array để lưu các giá trị được nhập vào

1.	let array = Array();

Bước 4: Xây dựng hàm add_element_to_array() để thêm mới một phần tử từ form

Lấy giá trị từ input-text và gán phần tử ở vị trí x trong mảng mỗi lần hàm add_element_to_array() được gọi

Tăng giá trị x lên 1

Hiển thị phần tử vừa được thêm vào mảng

Gán giá trị rỗng cho input-text

Mã lệnh thực thi có thể như sau:

1.	function add_element_to_array() {
2.	   array[x] = document.getElementById("txtValue").value;
3.	   alert("Element: " + array[x] + " Added at index " + x);
4.	   x++;
5.	   document.getElementById("txtValue").value = "";
6.	}

Bước 5: Xây dựng hàm display_array() để hiển thị các phần tử trong mảng

Tạo biến e để lưu thẻ <hr> mỗi lần hiển thị một phần tử thẻ <hr> sử dụng để phân cách các phần tử trong mảng: var e = “<hr/>”

Dùng vòng lặp for duyệt toàn bộ mảng: for (var i=0; i<array.length; i++)

Mỗi lần duyệt lấy giá trị của các phần tử cộng dồn vào biến e. Thêm thẻ <br/> cuối mỗi lần duyệt.

Kết thúc lặp. Hiển thị biến e.

Mã lệnh thực thi có thể như sau:

1.	function display_array() {
2.	   let e = "<hr/>";
3.	   for (let i = 0; i < array.length; i++) {
4.	       e += "Element " + i + " = " + array[i] + "<br/>";
5.	   }
6.	   document.getElementById("result").innerHTML = e;
7.	}

Bước 6: Thực thi chương trình, quan sát kết quả.

Bài 2: Đảo ngược các phần tử trong mảng

Mục tiêu:

Luyện tập tạo mảng, thao tác với mảng.

Mô tả:

Viết một chương trình JavaScript thực hiện đảo ngược các giá trị trong một mảng đã cho. Không sử dụng phương thức reverse().

Ví dụ mảng gồm các phần tử:

    [-3,5,1,3,2,10];

Sau khi gọi hàm reverse() mảng trên sẽ đảo ngược thành:

    [10,2,3,1,5,-3]

Hướng dẫn:

Bước 1: Khai báo mảng x và khởi tạo các phần tử trong mảng:

1.	let x = [-3, 5, 1, 3, 2, 10];

Bước 2: Khai báo biến first và gán giá trị bằng 0. Biến này để duyệt từ phần tử đầu tiên trong mảng.

1.	let first = 0;

Bước 3: Khai báo biến last và gán giá trị bằng độ dài mảng trừ 1. Biến này để duyệt phần tử cuối cùng trong mảng.

1.	let last = x.length - 1;

Bước 4: Dùng vòng lặp chạy với điều kiện first < last, trong quá trình lặp đổi chỗ phần tử đầu tiên và cuối cùng cho nhau. Sau đó tăng biến first lên 1 để duyệt phần tử tiếp theo, giảm last đi một.

1.	while (first < last) {
2.	   let b = x[first];
3.	   x[first] = x[last];
4.	   x[last] = b;
5.	   first++;
6.	   last--;
7.	}

Bước 5: In ra mảng sau khi đảo ngược

1.	document.write(x);

Bước 6: Thực thi chương trình, quan sát kết quả.

Bài 3: Tìm giá trị trong mảng

Mục tiêu:

Luyện tập tạo mảng, thao tác với mảng.

Mô tả:

Viết một chương trình JavaScript để tìm một giá trị được nhập vào từ hộp thoại có nằm trong mảng hay không. Nếu có in ra vị trí của phần tử đó.

Hướng dẫn:

Bước 1: Nhập giá trị cần tìm từ hộp thoại và lưu vào biến value

1.	let value = prompt("Enter a number: ");

Bước 2: Khai báo mảng x và khởi tạo giá trị ban đầu cho mảng

1.	let x = [-3, 5, 1, 3, 2, 10];

Bước 3: Dùng vòng lặp duyệt toàn bộ mảng x. Kiểm tra nếu một phần tử trong mảng x bằng giá trị được nhập vào thì hiển thị thông báo:

1.	for (let i = 0; i < x.length; i++) {
2.	   if (value == x[i]) {
3.	       alert("Value " + x[i] + "found at " + i);
4.	   }
5.	}

Bước 4: Thực thi chương trình, quan sát kết quả.

Bài 4: Tìm giá trị lớn nhất trong mảng

Mục tiêu:

Luyện tập tạo mảng, thao tác với mảng.

Mô tả:

Viết một chương trình JavaScript để tìm giá trị lớn nhất trong mảng cho trước.

Hướng dẫn:

Bước 1: Khai báo mảng x và khởi tạo giá trị ban đầu cho mảng

1.	let x = [-3, 5, 1, 3, 2, 10];

Bước 2: Khai báo biến max để lưu giá trị lớn nhất mặc định là phần tử đầu tiên trong mảng

1.	let max = x[0];

Bước 3: Khai báo biến index mặc định gán giá trị 0 để lưu chỉ số của phần tử lớn nhất trong mảng

1.	let index = 0;

Bước 4: Dùng vòng lặp duyệt toàn bộ mảng x từ phần tử tiếp theo đến hết mảng. Kiểm tra nếu một phần tử trong mảng x có giá trị lớn hơn max thì gáb max chính là phần tử đó và gán index bằng vị trí của phần tử đó.

1.	for (let i = 1; i < x.length; i++) {
2.	   if (x[i] > max) {
3.	       max = x[i];
4.	       index = i;
5.	   }
6.	}

Bước 5: In ra phần tử lớn nhất và vị trí của nó trong mảng

1.	alert("max: " + max + " at position " + index);

Bước 6: Thực thi chương trình, quan sát kết quả.

Bài 5: Tạo bàn cờ caro đơn giản

Mục tiêu:

Luyện tập mảng hai chiều với vòng lặp for, truy cập và thay đổi các phần tử trong mảng 2 chiều.

Mô tả:

Xây dựng game caro đơn giản. Bàn cờ hiển thị đơn giản gồm N dòng và M cột. Mỗi giá trị trong cột nhận giá trị mặc định là 0.

Khi người dùng click vào nút “Change Value” sẽ hiển thị hộp thoại yêu cầu nhập vị trí phần tử cần thay đổi và giá trị phần tử cần thay đổi. Sau khi thay đổi màn hình hiển thị lại bàn cờ như sau:

Hướng dẫn:

Bước 1: Tạo file carosimple.html.

Bước 2: Tạo giao diện sử dụng thẻ html

1.	<!DOCTYPE html>
2.	<html lang="en">
3.	<body>
4.	   <h3>Caro Game Simple</h3>
5.	   <p id="carogame" />
6.	   <input type="button" value="Change Value" onclick="changeValue()">
7.	</body>
8.	</html>

Bước 3: Hiển thị bàn cờ

1.	let b = document.getElementById("carogame ");
2.	let board = [];
3.	let data = "";
4.	for (let i = 0; i < 5; i++) {
5.	   board[i] = new Array(0, 0, 0, 0, 0);
6.	}
7.	for (let i = 0; i < 5; i++) {
8.	   data += "<br/>";
9.	   for (let j = 0; j < 5; j++) {
10.	       data += board[i][j] + "  ";
11.	   }
12.	}
13.	data += "<br/><br/><input type='button' value='Change Value' onclick='changeValue()'>"
14.	b.innerHTML = data;

Bước 4: Xử lý sự kiện khi người dùng click chuột vào nút “Change Value”

1.	function changeValue() {
2.	   let positionX = prompt("X: ");
3.	   let positionY = prompt("Y: ");
4.	   data = "";
5.	   board[positionX][positionY] = "x";
6.	   for (let i = 0; i < 5; i++) {
7.	       data += "<br/>";
8.	       for (let j = 0; j < 5; j++) {
9.	           data += board[i][j] + "    ";
10.	       }
11.	   }
12.	   data += "<br/><br/><input type='button' value='Change Value' onclick='changeValue()'>"
13.	   b.innerHTML = "<hr/>" + data;
14.	}

Bước 5: Chạy chương trình và thay đổi vị trí trên bàn cờ. Quan sát kết quả

8. Bài tập

Bài 1: Chèn dấu (-) giữa 2  số chẵn

Hãy viết một chương trình nhận một số nhập vào và chèn dấu (-) giữa 2  số chẵn. Ví dụ nếu nhập vào 025468 thì kết quả của chương trình sẽ là 0-254-6-8.

Bài 2: Chuyển các ký tự thường thành ký tự hoa và ngược lại

Hãy viết một chương trình nhập vào một chuỗi và chuyển các ký tự chữ thường trong chuỗi vừa nhập sang thành dạng chữ hoa và ngược lại. Ví dụ: nếu nhập vào chuỗi ‘The Quick Brown Fox’ kết quả của chương trình là ‘tHE qUICK bROWN fOX’.

Bài 3: Ứng dụng từ điển đơn giản

Mô tả:

Hãy phát triển một ứng dụng từ điển đơn giản. Ứng dụng cho phép tra cứu các từ tiếng Anh sang tiếng Việt. Danh sách các từ được lưu trữ trong các mảng.

Hướng dẫn:

Bước 1: Tạo một trang web với một form đơn giản cho phép người dùng nhập từ cần tìm kiếm.

Bước 2: Viết mã Javascript

  • Tạo 2 mảng có độ dài bằng nhau để lưu trữ danh sách các từ. Mảng 1 lưu trữ các từ tiếng Anh, mảng 2 lưu trữ các từ tiếng Việt tương ứng.
  • Khi tìm kiếm, tìm vị trí của từ tiếng Anh trong mảng 1. Nếu tìm thấy thì hiển thị từ tiếng Việt ở cùng vị trí trong mảng 2.
  • Nếu không tìm thấy thì hiển thị thông báo không tìm thấy.

9. Bài kiểm tra

Câu 1: Mảng là một biến đặc biệt, chỉ có thể chứa một giá trị?

  1. Đúng
  2. Sai

Câu 2: Cú pháp đúng khai báo mảng?

  1. let arr = [item1; item2; …];
  2. let arr = {item1; item2; …};
  3. let arr = [item1, item2, …];
  4. let arr = {item1, item2, …};

Câu 3: Đâu là khai báo mảng đúng?

  1. let car = [“Saab”, “Volvo”];
  2. let car = [“Saab”; “Volvo”];
  3. let = {“Saab”, “Volvo”};
  4. let car = new Array(“Saab”, “Volvo”, “BMW”);

Câu 4: Dự đoán kết quả đoạn mã sau:

      let x = [1, 2, 4];
      console.log(x);
  1. [1, 2, 4]
  2. [ ]
  3. Không đáp án nào đúng
  4. [1, 2, 4, null]

Câu 5: Dự đoán kết quả đoạn mã sau:

      let x = [1, 3, 5, 7];
      let y = [2, 4, 6];
      x[2] = y[x.length - 3];
      console.log(x);
  1. Không đáp án nào đúng
  2. [1,3,5,7]
  3. [1,3,4,5]
  4. [1,3,4,7]

Câu 6: Dự đoán kết quả đoạn mã sau:

      let x = [1, 3, 5, 7];
      let y = [2, 4, 6];
      x[2] = y[x.length - 3] + x[x[0] + y[0]];
      console.log(x);
  1. Không đáp án nào đúng
  2. [2,3,11,7]
  3. [1,3,11,7]
  4. [1,3,11,13]

Câu 7: Đọc đoạn mã sau:

       let iMax = 20;
      let jMax = 10;
      let f = new Array();
      for (i = 0; i < iMax; i++) {
          f[i] = new Array();
          for (j = 0; j < jMax; j++) {
              f[i][j] = 0;
          }
      }

Giá trị của f.length là gì?

  1. 20
  2. 200
  3. Đoạn mã có lỗi
  4. 10

Câu 8: Đoạn mã sau trả về kết quả gì?

let x = [2, 4, 6, 3, 7];
let y = x.length - 2;
console.log(x[y]);
  1. 4
  2. 3
  3. 6
  4. Đoạn mã có lỗi

Câu 9:

let x = [2, 4, 5];
let counter = 0;
if (x[counter] < 5) {
console.log('code');
} else {
console.log('gym');
}

Đoạn mã trên trả về kết quả gì?

  1. gym
  2. Đoạn mã có lỗi
  3. code
  4. Codegym

Câu 10: Dự đoán giá trị của x sau khi thực thi đoạn mã lệnh sau:

let a = new Array(12, false, "text");
x = 10;
if (a[1]) {
      x = 20;
} else x = 30;
  1. 10
  2. Đoạn mã có lỗi
  3. 20
  4. 30

Đáp án: Câu 1: b, Câu 2: c , Câu 3: a, d, Câu 4: a, Câu 5: d, Câu 6: c, Câu 7: a, Câu 8: b, Câu 9: c, Câu 10: d

10. Tổng kết

  • Mảng cho phép lưu trữ nhiều giá trị cùng kiểu
  • Các khái niệm của mảng: Tên mảng, kiểu dữ liệu, kích thước, phần tử, chỉ số
  • Tên của mảng tuân theo quy tắc của tên biến
  • Chỉ số của phần tử đầu tiên là 0
  • Chỉ số của phần tử cuối cùng là length – 1
  • Có thể sử dụng vòng lặp for và for-each để duyệt mảng
  • Để sao chép mảng thì cần sao chép lần lượt từng phần tử của mảng
  • Mảng đa chiều được sử dụng phổ biến là 2 chiều
  • Số lượng “chiều” của mảng bằng với số lượng chỉ số để truy xuất đến một phần tử của mảng
  • Có thể sử dụng 2 vòng lặp lồng nhau để duyệt qua các phần tử của mảng hai chiều

Xem tiếp: Chương 6 – Hàm