Kiểm tra kỹ năng: Hàm

Thao tác DOM: Hữu ích cần biết

Một số câu hỏi dưới đây yêu cầu bạn viết một số mã thao tác DOM để hoàn thành — chẳng hạn như tạo các phần tử HTML mới, đặt nội dung văn bản của chúng bằng các giá trị chuỗi cụ thể, và lồng chúng vào trong các phần tử hiện có trên trang — tất cả thông qua JavaScript.

Chúng ta chưa dạy điều này một cách rõ ràng trong khóa học, nhưng bạn sẽ thấy một số ví dụ sử dụng nó, và chúng ta muốn bạn tự nghiên cứu về các DOM API bạn cần để trả lời thành công các câu hỏi. Một điểm khởi đầu tốt là hướng dẫn Giới thiệu về DOM scripting của chúng ta.

Thử thách tương tác

Trước tiên, chúng ta cung cấp cho bạn một thử thách tương tác thú vị liên quan đến giá trị trả về của hàm, được tạo bởi đối tác học tập của chúng ta, Scrimba.

Xem scrim nhúng và hoàn thành nhiệm vụ trên dòng thời gian (biểu tượng bóng ma nhỏ) bằng cách làm theo hướng dẫn và chỉnh sửa mã. Khi bạn hoàn thành, bạn có thể tiếp tục xem scrim để kiểm tra xem giải pháp của giáo viên khớp với giải pháp của bạn như thế nào.

Hàm 1

Để hoàn thành nhiệm vụ hàm đầu tiên của chúng ta:

1. Định nghĩa hàm chooseName() in một tên ngẫu nhiên từ mảng được cung cấp (names) vào đoạn văn được cung cấp (para).
2. Gọi hàm chooseName() một lần.

<p></p>

* {
  box-sizing: border-box;
}

p {
  color: purple;
  margin: 0.5em 0;
}

Điểm khởi đầu của nhiệm vụ trông như thế này (chưa có gì hiển thị):

Đây là mã cơ sở cho điểm khởi đầu này:

const names = [
  "Chris",
  "Li Kang",
  "Anne",
  "Francesca",
  "Mustafa",
  "Tina",
  "Bert",
  "Jada",
];
const para = document.querySelector("p");

// Don't edit the code above here!

// Add your code here

Mã cập nhật của bạn sẽ xuất ra một tên ngẫu nhiên:

// ...
// Don't edit the code above here!

function chooseName() {
  const randomNumber = Math.floor(Math.random() * names.length);
  const choice = names[randomNumber];
  para.textContent = choice;
}

chooseName();

const names = [
  "Chris",
  "Li Kang",
  "Anne",
  "Francesca",
  "Mustafa",
  "Tina",
  "Bert",
  "Jada",
];
const para = document.querySelector("p");

function chooseName() {
  const randomNumber = Math.floor(Math.random() * names.length);
  const choice = names[randomNumber];
  para.textContent = choice;
}

chooseName();

Hàm 2

Nhiệm vụ này yêu cầu bạn tạo hàm vẽ hình chữ nhật trên phần tử <canvas> được cung cấp (biến tham chiếu canvas, ngữ cảnh có trong ctx), dựa trên năm biến đầu vào được cung cấp:

• x — tọa độ x của hình chữ nhật.
• y — tọa độ y của hình chữ nhật.
• width — chiều rộng của hình chữ nhật.
• height — chiều cao của hình chữ nhật.
• color — màu sắc của hình chữ nhật.

Điểm khởi đầu của nhiệm vụ trông như thế này (chưa có gì hiển thị trong <canvas>):

Đây là mã cơ sở cho điểm khởi đầu này:

<canvas width="240" height="160"></canvas>

canvas {
  border: 1px solid black;
}

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
const x = 50;
const y = 60;
const width = 100;
const height = 75;
const color = "blue";

// Don't edit the code above here!

// Add your code here

Đầu ra cập nhật sẽ trông như thế này:

// ...
// Don't edit the code above here!

function drawSquare(x, y, width, height, color) {
  ctx.fillStyle = "white";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = color;
  ctx.fillRect(x, y, width, height);
}

drawSquare(x, y, width, height, color);

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
const x = 50;
const y = 60;
const width = 100;
const height = 75;
const color = "blue";

function drawSquare(x, y, width, height, color) {
  ctx.fillStyle = "white";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = color;
  ctx.fillRect(x, y, width, height);
}

drawSquare(x, y, width, height, color);

Hàm 3

Trong nhiệm vụ này, bạn quay lại vấn đề được đặt ra trong Nhiệm vụ 1, với mục tiêu thực hiện ba cải tiến.

Để hoàn thành nhiệm vụ:

1. Tái cấu trúc mã tạo số ngẫu nhiên thành một hàm riêng gọi là random(), nhận hai tham số là giới hạn chung mà số ngẫu nhiên phải nằm trong khoảng, và trả về kết quả.
2. Cập nhật hàm chooseName() để nó sử dụng hàm số ngẫu nhiên, nhận mảng để chọn từ đó làm tham số (làm cho nó linh hoạt hơn), và trả về kết quả.
3. In kết quả trả về vào textContent của đoạn văn (para).

Điểm khởi đầu của nhiệm vụ trông như thế này:

Đây là mã cơ sở cho điểm khởi đầu này:

const names = [
  "Chris",
  "Li Kang",
  "Anne",
  "Francesca",
  "Mustafa",
  "Tina",
  "Bert",
  "Jada",
];
const para = document.querySelector("p");

// Don't edit the code above here!

// Update the code below here

function chooseName() {
  const randomNumber = Math.floor(Math.random() * names.length);
  const choice = names[randomNumber];
  para.textContent = choice;
}

chooseName();

Chúng ta chưa cung cấp nội dung hoàn chỉnh cho nhiệm vụ này vì nó trông giống với điểm khởi đầu. Mã chỉ được tái cấu trúc.

// ...
// Don't edit the code above here!

function random(min, max) {
  const num = Math.floor(Math.random() * (max - min)) + min;
  return num;
}

function chooseName(array) {
  const choice = array[random(0, array.length)];
  return choice;
}

para.textContent = chooseName(names);

const names = [
  "Chris",
  "Li Kang",
  "Anne",
  "Francesca",
  "Mustafa",
  "Tina",
  "Bert",
  "Jada",
];
const para = document.querySelector("p");

function random(min, max) {
  const num = Math.floor(Math.random() * (max - min)) + min;
  return num;
}

function chooseName(array) {
  const choice = array[random(0, array.length)];
  return choice;
}

para.textContent = chooseName(names);

Hàm 4

Trong nhiệm vụ này, chúng ta có một mảng tên và đang sử dụng Array.filter() để lấy mảng chỉ chứa các tên ngắn hơn 5 ký tự. Bộ lọc hiện đang được truyền một hàm được đặt tên isShort(). Hàm này kiểm tra độ dài của tên, trả về true nếu tên ngắn hơn 5 ký tự, và false nếu không.

Để hoàn thành nhiệm vụ, hãy cập nhật mã để chức năng bên trong isShort() thay vào đó được bao gồm trực tiếp bên trong lời gọi filter() như một hàm mũi tên. Xem bạn có thể làm cho nó gọn gàng như thế nào.

Điểm khởi đầu của nhiệm vụ trông như thế này:

Đây là mã cơ sở cho điểm khởi đầu này:

const names = [
  "Chris",
  "Li Kang",
  "Anne",
  "Francesca",
  "Mustafa",
  "Tina",
  "Bert",
  "Jada",
];
const para = document.querySelector("p");

// Don't edit the code above here!

// Update the code below here

function isShort(name) {
  return name.length < 5;
}

const shortNames = names.filter(isShort);
para.textContent = shortNames;

Chúng ta chưa cung cấp nội dung hoàn chỉnh cho nhiệm vụ này vì nó trông giống với điểm khởi đầu. Mã chỉ được tái cấu trúc.

// ...
// Don't edit the code above here!

// Update the code below here

const shortNames = names.filter((name) => name.length < 5);
para.textContent = shortNames;

const names = [
  "Chris",
  "Li Kang",
  "Anne",
  "Francesca",
  "Mustafa",
  "Tina",
  "Bert",
  "Jada",
];
const para = document.querySelector("p");

const shortNames = names.filter((name) => name.length < 5);
para.textContent = shortNames;

• Previous
• Overview: Lập trình động với JavaScript
• Next