🔥CHỌN LỌC TOP NHỮNG KHOÁ HỌC LẬP TRÌNH ONLINE NHIỀU NGƯỜI THEO HOC TẠI ĐÂY🔥

Chào các bạn, hôm nay cafedev chia sẻ cho ace một danh sách các bài tập từ cơ bản tới nâng cao liên quan tới các kiến thức cơ bản trong lập trình Javascript. Cụ thể, trong bài này chúng ta sẽ làm quen với Object, this, new, constructorm, Optional. Từ đó giúp ace nâng cao kiến thức, kỹ năng, kinh nghiệm lập trình của mình và áp dụng nó vào thực tế.

Trước khi đi vào chi tiết bài tập, cafedev khuyến khích ace tự code bài tập của mình trước khi tham khảo bài hướng dẫn nhé.

Để chạy hoặc code các bài tập sau, ace có thể code trên trang web này như sau:

  • Chọn new
  • Chọn dự án bạn muốn code, ở đây có nhiều lựa chọn như Javascript, AngularJS, React,…. Tất nhiên mình sẽ chọn Javascript.
  • Sau đó bạn sẽ thấy nơi bạn code.
  • Sau khi code sau chọn Preview để xem kết quả.

Ngoài ra ace cũng có thể dùng các IDE đã được giới thiệu tại đây để code và chạy code đó trên máy tính của mình nhé.

Lưu ý: Mọi bài tập bên dưới cũng như các bài tập khác trong Series Javascript này được tạo ra từ các bài học và kiến thức của từng phần trong series tự học Javascript này. Nếu ace nào chưa làm được hoặc chưa hiểu kỹ về bài học thì bạn có thể tham khảo lại series tự học này nhé. Chúc các bạn thành công.

Bài 1

Viết code, một dòng cho mỗi yêu cầu sau:

  • Tạo một đối tượng user trống.
  • Thêm thuộc tính name với giá trị David.
  • Thêm thuộc tính surname với giá trị Xuan.
  • Thay đổi giá trị của name thành Cafedev.
  • Xóa thuộc tính name khỏi đối tượng.

Bài 2

Viết hàm isEmpty (obj) trả về true nếu đối tượng không có thuộc tính, ngược lại là false.

Để sử dụng cho đoạn code sau:

let schedule = {};

alert( isEmpty(schedule) ); // true

schedule["8:30"] = "get up";

alert( isEmpty(schedule) ); // false

Bài 3

Chúng ta có một đối tượng lưu trữ tiền lương của nhóm chúng ta:

let salaries = {
  John: 100,
  Ann: 160,
  Pete: 130
}

Viết code để tính tổng tất cả các khoản lương và lưu trữ trong biến tổng. Nên là 390 trong ví dụ trên.

Nếu tiền lương trống, thì kết quả phải là 0.

Bài 4

Tạo một hàm multiplyNumeric(obj) nhân tất cả các thuộc tính số của obj với 2.

với Object sau:

// before the call
let menu = {
  width: 200,
  height: 300,
  title: "My menu cafedev"
};

multiplyNumeric(menu);

// after the call
menu = {
  width: 400,
  height: 600,
  title: "My menu cafedev"
};

Xin lưu ý rằng multiplyNumeric(obj) không cần trả về bất cứ thứ gì. Nó sẽ sửa đổi đối tượng tại chỗ.

Hướng dẫn cách xem và tải tài liệu từ trang cafedev tại đây.


Bài giải 1,2,3,4

Bài 5

Ở đây hàm makeUser trả về một đối tượng.

Kết quả của việc truy cập ref của nó là gì? Tại sao như vậy?

function makeUser() {
  return {
    name: "David",
    ref: this
  };
}

let user = makeUser();

alert( user.ref.name ); // What's the result?

Bài 6

Tạo một máy tính đối tượng với ba phương thức sau:

  • read() nhận hai giá trị và lưu chúng dưới dạng thuộc tính đối tượng.
  • sum() trả về tổng các giá trị đã lưu.
  • mul() nhân các giá trị đã lưu và trả về kết quả.

Bài 7

Có một đối tượng ladder cho phép lên và xuống:

let ladder = {
  step: 0,
  up() {
    this.step++;
  },
  down() {
    this.step--;
  },
  showStep: function() { // shows the current step
    alert( this.step );
  }
};

Bây giờ, nếu chúng ta cần thực hiện một số cuộc gọi theo trình tự, có thể thực hiện như sau:

ladder.up();
ladder.up();
ladder.down();
ladder.showStep(); // 1

Sửa đổi mã up, down và showStep để thực hiện các cuộc gọi có thể thực hiện được như sau:

ladder.up().up().down().showStep(); // 1

Giải bài 5,6,7

Bài 8

Có thể tạo các hàm A và B như new A() == new B() không?

function A() { ... }
function B() { ... }

let a = new A;
let b = new B;

alert( a == b ); // true

Nếu đúng, hãy viết code đó.

Bài 9

Tạo một hàm khởi tạo Calculator tạo các đối tượng với 3 phương thức:

  • read() yêu cầu hai giá trị bằng cách sử dụng prompt và ghi nhớ chúng trong thuộc tính đối tượng.
  • sum() trả về tổng của các thuộc tính này.
  • mul() trả về tích nhân của các thuộc tính này.

Bài 10

Tạo một hàm khởi tạo Accumulator(startingValue).

Đối tượng tạo với yêu cầu:

  • Lưu trữ “giá trị hiện tại” trong giá trị thuộc tính. Giá trị startingValue được đặt thành đối số của hàm khởi tạo startValue.
  • Phương thức read() nên sử dụng prompt để đọc một số mới và thêm nó vào giá trị.

Nói cách khác, thuộc tính value là tổng của tất cả các giá trị do người dùng nhập với giá trị ban đầu là startingValue.


Giải bài 8,9,10

Nguồn và Tài liệu tiếng anh tham khảo:

Tài liệu từ cafedev:

Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa:

Chào thân ái và quyết thắng!

Đăng ký kênh youtube để ủng hộ Cafedev nha các bạn, Thanks you!

BÀI VIẾT LIÊN QUANXEM THÊM