Chương 3 (Tiếp) Bài tập và lời giải

Trước: Chương 3 (Tiếp) Cấu trúc điều kiện

8. Bài thực hành

Bài 1: Kiểm tra năm nhuận

Mục tiêu:

Luyện tập sử dụng cấu trúc điều kiện if.

Mô tả:

Trong phần này, chúng ta sẽ phát triển một ứng dụng nhằm kiểm tra xem một năm có phải là năm nhuận hay không. Ứng dụng cho phép người dùng nhập vào một năm, sau đó sẽ đưa ra thông báo là năm đó là năm nhuận hay không phải là năm nhuận. Năm nhuận là một năm đặc biệt, được cộng thêm một ngày để giữ cho lịch được đồng bộ với lịch thiên văn.

Cách xác định năm nhuận: Những năm chia hết cho 4 là năm nhuận, ngoại trừ những năm chia hết cho 100 mà không chia hết cho 400. Từ đó, có thể rút gọn thành các quy tắc xác định năm nhuận: “Những năm chia hết cho 4 mà không chia hết cho 100 là năm nhuận.Những năm chia hết cho 100 mà không chia hết cho 400 thì KHÔNG PHẢI là năm nhuận.Những năm chia hết đồng thời cho 100 và 400 là năm nhuận”.

>> Xem thêm: TÀI LIỆU LẬP TRÌNH CĂN BẢN – ĐƠN GIẢN, DỄ HỌC!

Hướng dẫn:

Bước 1: Tạo dự án mới với file index.html và khối lệnh JavaScript

Bước 2: Nhập dữ liệu từ bàn phím

1.	let year = parseInt(prompt("Enter a year")); 

Bước 3: Phân loại và hiển thị kết quả

1.	if (year % 4 == 0) {
2.	 if (year % 100 == 0) {
3.	   if (year % 400 == 0) {
4.	     alert(year + " is a leap year");
5.	   } else {
6.	     alert(year + " is NOT a leap year");
7.	   }
8.	 } else {
9.	   alert(year + " is a leap year");
10.	 }
11.	} else {
12.	 alert(year + " is NOT a leap year");
13.	}

Bước 4: Chạy và quan sát kết quả

Sử dụng các năm sau để kiểm tra tính đúng đắn của chương trình:

Năm	Kết quả
12	Năm nhuận
13	Năm không nhuận
1000	Năm không nhuận
2000	Năm nhuận

Lưu ý:

Với các điều kiện như trên, chúng ta có thể chỉnh sửa để mã nguồn tốt hơn như sau:

1.	let year = parseInt(prompt("Enter a year"));
2.	let isLeapYear = false;
3.	if (year % 4 == 0) {
4.	 if (year % 100 == 0) {
5.	   if (year % 400 == 0) {
6.	     isLeapYear = true;
7.	   }
8.	 } else {
9.	   isLeapYear = true;
10.	 }
11.	}
12.	if (isLeapYear) {
13.	 alert(year + " is a leap year");
14.	} else {
15.	 alert(year + " is NOT a leap year");
16.	}

Đảm bảo clean code:

Trong đoạn mã trên, các điều kiện bên trong các câu lệnh if sẽ là khó hiểu, bởi vì bản thân các biểu thức không trực tiếp nói rõ ý nghĩa của nó. Chúng ta có thể sử dụng kỹ thuật tách biến để các câu lệnh này dễ hiểu hơn.

Ví dụ:

1.	let isLeapYear = false;
2.	 
3.	let isDivisibleBy4 = year % 4 == 0;
4.	if (isDivisibleBy4) {
5.	 let isDivisibleBy100 = year % 100 == 0;
6.	 if (isDivisibleBy100) {
7.	   let isDivisibleBy400 = year % 400 == 0;
8.	   if (isDivisibleBy400) {
9.	     isLeapYear = true;
10.	   }
11.	 } else {
12.	   isLeapYear = true;
13.	 }
14.	}
15.	 
16.	if (isLeapYear) {
17.	 alert(year + " is a leap year");
18.	} else {
19.	 alert(year + " is NOT a leap year");
20.	}

Bài 2: Luyện tập với cấu trúc if…else

Mục tiêu:

Luyện tập sử dụng cấu trúc if/else.

Mô tả:

Sử dụng cấu trúc if…else, viết chương trình nhập vào một chuỗi câu trả lời cho câu hỏi “What is the “official” name of JavaScript?”. Nếu câu trả lời nhập vào là “ECMAScript”,  thì hiển thị thông báo: “Right!”, ngược lại hiển thị thông báo: “Didn’t know? ECMAScript!”

Lưu đồ:

Hướng dẫn:

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

Bước 2: Thêm thẻ <script> thực hiện viết các mã JavaScript

Bước 3: Khai báo biến value nhận giá trị được nhập vào từ hộp thoại

1.	let value = prompt('What is the "official" name of JavaScript?', '');

Bước 4: Sử dụng cấu trúc if…else kiểm tra giá trị của value

1.	if (value == 'ECMAScript') {
2.	 alert('Right!');
3.	} else {
4.	 alert("You don't know? ECMAScript!");
5.	}

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

Bài 3: Luyện tập với cấu trúc if…else…if

Mục tiêu

Luyện tập sử dụng cấu trúc if…else…if

Mô tả

Viết chương trình kiểm tra đăng nhập hệ thống của người dùng theo yêu cầu sau:

• Yêu cầu người dùng nhập tên từ bàn phím.
• Nếu tên nhập vào là “Admin” thì yêu cầu nhập mật khẩu.
• Nếu mật khẩu là “TheMaster” thì in ra chuỗi “Welcome”.
• Nếu mật khẩu nhập vào là null in ra chuỗi “Canceled”.
• Còn lại in ra chuỗi “Wrong password”.
• Nếu tên nhập vào là null in ra chuỗi “Canceled”.
• Còn lại in ra chuỗi “I don’t know you”.

Hướng dẫn

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

Bước 2: Thêm thẻ <script> thực hiện viết các mã JavaScript

Bước 3: Tạo biến userName nhận giá trị nhập vào từ hộp thoại

1.	let userName = prompt("Who's there?", '');

Bước 4: Kiểm tra giá trị của userName

1.	if (userName == 'Admin') {
2.	   //code vào đây
3.	} else if (userName == null) {
4.	   alert('Canceled');
5.	} else {
6.	   alert("I don't know you");
7.	}

Bước 5: Nếu userName là “Admin”. Khai báo biến pass nhận giá trị nhập vào từ hộp thoại.

1.	let pass = prompt('Password?', '');

Bước 6: Kiểm tra pass

1.	if (pass == 'TheMaster') {
2.	   alert('Welcome!');
3.	} else if (pass == null) {
4.	   alert('Canceled.');
5.	} else {
6.	   alert('Wrong password');
7.	}

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

Bài 4: Luyện tập với cấu trúc switch…case

Mục tiêu:

Luyện tập với cấu trúc switch…case

Mô tả:

Viết lại cấu trúc if sau thành cấu trúc switch … case

1.	if (browser == 'Edge') {
2.	   alert("You've got the Edge!");
3.	} else if (browser == 'Chrome' || browser == 'Firefox' || browser == 'Safari' || browser == 'Opera') {
4.	   alert('Okay we support these browsers too');
5.	} else {
6.	   alert('We hope that this page looks ok!');
7.	}

Hướng dẫn

Cấu trúc if được viết lại với cấu trúc switch…case như sau:

1.	switch (browser) {
2.	   case 'Edge':
3.	       alert("You've got the Edge!");
4.	       break;
5.	   case 'Chrome':
6.	   case 'Firefox':
7.	   case 'Safari':
8.	   case 'Opera':
9.	       alert('Okay we support these browsers too');
10.	       break;
11.	   default:
12.	       alert('We hope that this page looks ok!');
13.	}

Bài 5: Luyện tập với cấu trúc switch…case

Mục tiêu:

Luyện tập với cấu trúc switch…case.

Mô tả:

Viết lại cấu trúc if sau thành cấu trúc switch…case.

1.	let a = prompt('a?', '');
2.	if (a == 0) {
3.	   alert(0);
4.	}
5.	if (a == 1) {
6.	   alert(1);
7.	}
8.	if (a == 2 || a == 3) {
9.	   alert('2,3');
10.	}

Hướng dẫn:

Cấu trúc if được viết lại với cấu trúc switch…case như sau:

1.	let a = prompt('a?', '');
2.	switch (a) {
3.	   case 0:
4.	       alert(0);
5.	       break;
6.	   case 1:
7.	       alert(1);
8.	       break;
9.	   case 2:
10.	   case 3:
11.	       alert('2,3');
12.	       break;
13.	}

Bài 6: Luyện tập với cấu trúc if…else

Mục tiêu:

Luyện tập với cấu trúc if…else.

Mô tả:

Sử dụng cấu trúc if…else, nhập vào một số, kiểm tra giá trị của số nhập vào.

• Nếu số nhập vào lớn hơn 0 hiển thị 1
• Nếu số nhập vào nhỏ hơn 0 thì hiển thị -1
• Còn lại hiển thị 0

Hướng dẫn:

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

Bước 2: Khai báo biến value nhận giá trị đầu vào từ hộp thoại, mặc định không nhập gì value = 0

1.	let value = prompt('Type a number', 0);

Bước 3: Viết khối if…else..if

1.	if (value > 0) {
2.	   alert(1);
3.	} else if (value < 0) {
4.	   alert(-1);
5.	} else {
6.	   alert(0);
7.	}

Bước 4: Thực thi chương trình. Nhập giá trị 0, -5, 5. Quan sát kết quả nhận được

Bước 5: Thay thế cấu trúc if bằng cấu trúc switch…case. Làm lại các bước như trên.

Bài 7: Tính tổng 2 số

Mục tiêu:

Luyện tập sử dụng cấu trúc điều kiện với toán tử “?”, ” :”

Mô tả:

Hãy viết chương trình nhập vào giá trị cho a và b. Tính tổng a và b, nếu tổng nhỏ hơn 4, hiển thị chuỗi Below, ngược lại hiển thị Over. Lưu ý sử dụng toán tử ? :

Hướng dẫn:

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

Bước 2: Thêm thẻ <script> thực hiện viết các mã JavaScript

1.	<!DOCTYPE html>
2.	<html>
3.	<body>
4.	    <script>
5.	    //code vào đây
6.	    </script>
7.	</body>
8.	</html>

Bước 3: Khai báo biến a, b nhập vào giá trị cho a, b từ hộp thoại

1.	let a = prompt("a: ");
2.	let b = prompt("b: ");

Bước 4: Khai báo biến result lưu kết quả

1.	result = (a + b < 4) ? 'Below' : 'Over';

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

Bài 8: Luyện tập với chuỗi

Mục tiêu:

Luyện tập với chuỗi.

Mô tả:

 Viết chương trình nhập vào giá trị cho chuỗi message.

• Nếu giá trị nhập vào là Employee thì hiển thị chuỗi Hello.
• Còn lại nếu giá trị nhập vào là Director thì hiển thị chuỗi Greetings
• Còn lại nếu giá trị nhập vào chuỗi rỗng thì hiển thị No login
• Còn lại hiển thị chuỗi rỗng

Sử dụng toán tử ? : để viết chương trình với cấu trúc điều kiện như sau:

1.	 let message;
2.	       if (login == 'Employee') {
3.	           message = 'Hello';
4.	       } else if (login == 'Director') {
5.	           message = 'Greetings';
6.	       } else if (login == '') {
7.	           message = 'No login';
8.	       } else {
9.	           message = '';
10.	       }

Hướng dẫn:

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

Bước 2: Thêm thẻ <script> thực hiện viết các mã JavaScript

1.	<!DOCTYPE html>
2.	<html>
3.	<body>
4.	   <script>
5.	   //code vào đây
6.	   </script>
7.	</body>
8.	</html>

Bước 3: Khai báo biến message

1.	let message = (login == 'Employee') ?
2.	           'Hello' :
3.	           (login == 'Director') ?
4.	               'Greetings' :
5.	               (login == '') ?
6.	                   'No login' :
7.	                   '';

Bước 4: Hiển thị thông báo

1.	alert(message);

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

Bài 9: Sự kiện bàn phím

Mục tiêu:

Luyện tập xử lý sự kiện bàn phím.

Mô tả:

Di chuyển hình ảnh nhân vật Nobita lên, xuống, sang trái, sang phải sử dụng các phím tương ứng. Việc này được thực hiện bằng cách thay đổi thuộc tính tọa độ của thẻ khi xử lý event.

Hướng dẫn:

Bước 1: Chèn ảnh nobita.jpg vào

1.	<img id="nobita" src="images/nobita.jpg" style="position:absolute;left:0; top:0;" height="100" width="80"/>

Bước 2: Xây dựng các hàm xử lý khi nhấn phím lên

1.	function upArrowPressed() {
2.	    let element = document.getElementById("nobita");
3.	    element.style.top = parseInt(element.style.top) - 5 + 'px';
4.	}

Bước 3: Xây dựng các hàm xử lý khi nhấn phím xuống

1.	function downArrowPressed() {
2.	    var element = document.getElementById("nobita");
3.	    element.style.top = parseInt(element.style.top) + 5 + 'px';
4.	}

Bước 4: Xây dựng các hàm xử lý khi nhấn phím sang trái

1.	function leftArrowPressed() {
2.	    var element = document.getElementById("nobita");
3.	    element.style.left = parseInt(element.style.left) - 5 + 'px';
4.	}

Bước 5: Xây dựng các hàm xử lý khi nhấn phím sang phải

1.	function rightArrowPressed() {
2.	    var element = document.getElementById("nobita");
3.	    element.style.left = parseInt(element.style.left) + 5 + 'px';
4.	}

Bước 6: Xây dựng các hàm nhận các phím

1.	function moveSelection(evt) {
2.	    switch (evt.keyCode) {
3.	        case 37:
4.	            leftArrowPressed();
5.	            break;
6.	        case 39:
7.	            rightArrowPressed();
8.	            break;
9.	        case 38:
10.	            upArrowPressed();
11.	            break;
12.	        case 40:
13.	            downArrowPressed();
14.	            break;
15.	    }
16.	}

Bước 7: Xây dựng hàm doReady()

1.	function docReady() {
2.	    window.addEventListener('keydown', moveSelection);
3.	}

Bước 8: Gọi hàm doReady()

1.	       <body onload="docReady()">

Bước 9: Chạy chương trình. Sử dụng các phím lên-xuống-sang trái-sang phải để di chuyển ảnh và quan sát kết quả.

Bài 10: Sự kiện chuột

Mục tiêu:

Luyện tập thao tác sự kiện chuột.

Mô tả:

Làm sử dụng sự kiện click chuột để di chuyển hình ảnh một quả bóng. Mỗi lần click quả bóng sẽ được di chuyển sang trái/phải một khoảng cách.

Hướng dẫn:

Bước 1: Tạo giao diện như hình

 <form>
2.	       <img id="myImage" src="images/ball.jpg" />
3.	       <p>Click button below to move the image to right</p>
4.	       <input type="button" value="Click Me" />
5.	   </form>

1.	let imgObj = null;

Bước 3: Sử dụng hàm getElementById () để nhận được một đối tượng DOM và sau đó gán nó cho biến imgObj.

1.	imgObj = document.getElementById('myImage');

Bước 4: Tạo hàm init () để khởi tạo imgObj mà chúng ta đã đặt vị trí và các thuộc tính còn lại.

1.	function init() {
2.	    imgObj = document.getElementById('myImage');
3.	    imgObj.style.position = 'relative';
4.	    imgObj.style.left = '0px';
5.	}

Bước 5: Tạo hàm moveRight () để tăng khoảng cách trái 10 pixel. Bạn cũng có thể đặt nó là một giá trị âm để di chuyển nó sang bên trái.

1.	function moveRight() {
2.	    imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
3.	}

Bước 6: Gọi hàm init() khi trình duyệt được tải lần đầu

1.	window.onload = init;

Bước 7: Xác định sự kiện onclick cho button

1.	<input type="button" value="Click Me" onclick="moveRight();" />

Bước 8: Chạy chương trình. Click chuột vào button Click Me và quan sát kết quả.

9. Bài tập

Bài 1: Ứng dụng tính chỉ số cân nặng của cơ thể

Chỉ số khối cơ thể (Body mass index-BMI) là một thước đo sức khoẻ dựa trên cân nặng và chiều cao. Nó được tính bằng cách lấy cân nặng đơn vị tính kilogam chia cho bình phương của chiều cao đơn vị tính mét. Công thức:

bmi = weight / (height * 2)

Chỉ số BMI đối với người trên 20 tuổi được phân loại và diễn giải theo bảng sau:

BMI	Diễn giải
BMI < 18.5	Thiếu cân
18.5 <= BMI < 25.0	Bình thường
25.0 <= BMI < 30.0	Thừa cân
30.0 <= BMI	Mập

Ví dụ: Một người có cân nặng là 65Kg và chiều cao là 1.75m thì BMI là 65 / 1.752 = 22.22. Chỉ số này nằm trong khoảng 18.5 đến 25.0 cho nên được phân loại là Bình thường.

Hãy viết một chương trình cho phép nhập vào chiều cao và cân nặng, sau đó đưa ra thông báo về chỉ số BMI và diễn giải nó.

Bài 2: Ứng dụng tính số ngày trong tháng

Hãy viết một ứng dụng cho phép tính được số ngày trong một tháng. Giao diện của ứng dụng tương tự như sau. Chương trình sẽ hiển thị số ngày của tháng tương ứng.

• Chương trình có ô nhập vào một số là số thứ tự của tháng trong năm
• Nhấn nút “Tính số ngày” thì sẽ hiển thị số ngày của tháng đó
• Lưu ý: Trong trường hợp tháng 2, kết quả sẽ là “Tháng 2 có 28 hoặc 29 ngày”.

10. Bài kiểm tra

Câu 1: Xác định kết quả của biến number trong đoạn mã sau:

 let number = 5;
       if (number >= 5) {
           number += 1;
       } else {
           number -= 1;
       }

a. 4

b. 7

c. 6

d. 5

Câu 2: Trong JS, cách nào sau đây sử dụng để kiểm tra điều kiện “number” bằng 5 trước khi thực thi các mã lệnh khác?

1. if number = 5 then
2. if number == 5 then
3. if (number == 5)
4. if (number = 5)

Câu 3: Trong JS, cách nào sau đây sử dụng để kiểm tra điều kiện “number” khác 5 trước khi thực thi các mã lệnh khác?

1. if number != 5 then
2. if (number != 5)
3. if (number > 5)
4. if (number =! 5)

Câu 4: Xác định kết quả của biến number trong đoạn mã sau:

let number = 5;
       if (number++ > 5) {
           number += 1;
       } else {
           number -= 1;
       }

1. 6
2. 7
3. 4
4. 5

Câu 5: JavaScript hỗ trợ những cấu trúc nào khi xử lý về điều kiện\rẽ nhánh?

1. if then else
2. switch case
3. when case
4. if else

Câu 6: Xác định giá trị của biến message sau khi chạy đoạn mã sau:

let day = "Mon";
       let message = "";
       switch (day) {
           case "Mon":
               message = "Ngày đầu tuần";
           case "Wed":
               message = "Ngày giữa tuần";
           case "Sat":
           case "Sun":
               message = "Ngày nghỉ";
       }

1. Xảy ra lỗi
2. “Ngày nghỉ”
3. “Ngày giữa tuần”
4. “Ngày đầu tuần”

Đáp án: Câu 1: c, Câu 2: c, Câu 3: b, Câu 4: d, Câu 5: b, d, Câu 6: b

11. Tổng kết

• Câu lệnh điều kiện được sử dụng để lựa chọn việc thực thi một khối lệnh dựa vào một điều kiện cho trước
• Câu lệnh điều kiện còn được gọi là câu lệnh rẽ nhánh hoặc câu lệnh lựa chọn
• Có các câu lệnh điều kiện thông dụng là if-else và switch-case
• Có thể kết hợp các câu lệnh điều kiện if-else để hình thành dạng lồng nhau hoặc dạng bậc thang
• Câu lệnh switch case được sử dụng trong trường hợp muốn so sánh bằng và rẽ nhiều nhánh khác nhau

Từ khoá break được dùng để ngắt luồng thực thi của một khối lệnh trong switch-case.

Xem tiếp: Chương 4