Chương 2 – Biến, kiểu dữ liệu và toán tử(Tiếp)

Thực hiện các phép tính toán

9. Hiển thị dữ liệu

JavaScript có thể “hiển thị” dữ liệu theo nhiều cách khác nhau:

• Viết thành một phần tử HTML, sử dụng thuộc tính innerHTML.
• Viết vào đầu ra HTML sử dụng document.write().
• Viết vào một hộp cảnh báo sử dụng alert().
• Viết vào bảng điều khiển trình duyệt sử dụng console.log().

Sử dụng innerHTML

Để truy cập một phần tử HTML, JavaScript có thể sử dụng phương thức document.getElementById(id). Trong đó, id là thuộc tính giúp xác định thành phần HTML mà chúng ta muốn truy cập. Thuộc tính innerHTML chính là nội dung bên trong của thành phần HTML đó:

Ví dụ:

1.	   <p id="demo"></p>
2.	   <script>
3.	       document.getElementById("demo").innerHTML = 7;
4.	   </script>

Kết quả: Nội dung của thẻ <p> với id là demo đã được thay đổi thành 7.

Sử dụng document.write()

Hàm document.write() thường được dùng để hiển thị dữ liệu bằng cách viết trực tiếp ra tài liệu HTML.

Ví dụ:

1.	<h2>My First Web Page</h2>
2.	       <p>My first paragraph.</p>
3.	       <button type="button" onclick="document.write(5 + 6)">Try it</button>

Sử dụng hàm alert()

Hàm alert() có nhiệm vụ in một thông báo popup, nó có một tham số truyền vào là nội dung ta muốn thông báo với người dùng.

Ví dụ:

1.	<h2>My First Web Page</h2>
2.	<p>My first paragraph.</p>
3.	<button type="button" onclick="alert(5 + 6)">Try it</button>

Sử dụng console.log()

Hàm console.log được sử dụng thường xuyên trong việc tìm lỗi (debug). Hàm này có nhiệm vụ hiển thị ra giá trị của tất cả các loại dữ liệu như number, integer, array, object ra cửa sổ console của trình duyệt.

Mẹo: Tùy phím tắt của các dòng máy tính khác nhau nhưng thường chúng ta nhấn F12 và tab console sẽ xuất hiện.

Ví dụ:

1.	<script>
2.	    console.log("xin chao")
3.	</script>

10. Bài thực hành

Bài 1: Khai báo các biến thuộc các kiểu khác nhau, gán giá trị cho chúng và in ra tài liệu HTML.

• Biến i kiểu số nguyên, có giá trị là 10
• Biến f kiểu số thực, có giá trị là 20.5
• Biến b kiểu logic, có giá trị là true
• Biến s kiểu chuỗi, có giá trị là “Hà Nội”.

Sử dụng hàm document.write() để viết kết quả ra màn hình.

Mã tham khảo:

1.	let i = 10;
2.	let f = 20.5;
3.	let b = true;
4.	let s = 'Hà Nội';
5.	 
6.	document.write('i = ' + i);
7.	document.write('<br/>');
8.	document.write('f = ' + f);
9.	document.write('<br/>');
10.	document.write('b = ' + b);
11.	document.write('<br/>');
12.	document.write('s = ' + s);

Bài 2: Viết một đoạn mã JavaScript, khai báo biến width chứa giá trị độ rộng của hình chữ nhật, biến height chứa giá trị chiều cao của hình chữ nhật. In ra màn hình diện tích của hình chữ nhật đó.

Mã tham khảo:

1.	let width = 20;
2.	let height = 10;
3.	let area = width * height;
4.	document.write('Area = ' + area);

Bài 3: Dùng hàm prompt() để nhập 2 số từ bàn phím, lưu vào 2 biến là a và b. Kiểm tra xem a có phải là bội số của b hay không (tức là a có chia hết cho b hay không). Hiển thị kết quả ra màn hình bằng cách sử dụng hàm alert().

Mã tham khảo:

1.	let a = parseInt(prompt("Enter a:"));
2.	let b = parseInt(prompt("Enter b:"));
3.	let result = a%b;
4.	if(result == 0){
5.	  alert("a is the multiple of b");
6.	}else{
7.	  alert("a is not a multiple of b");
8.	}

11. Bài tập

Bài 1: Ứng dụng chuyển đổi tiền tệ

Hãy viết một ứng dụng cho phép chuyển đổi giữa VNĐ và các loại tiền tệ khác. Giao diện của ứng dụng tương tự như sau, chương trình sẽ hiển thị hộp thoại để thông báo kết quả.

Bài 2: Ứng dụng máy tính đơn giản

Hãy viết một ứng dụng máy tính đơn giản cho phép thực hiện các phép tính Cộng, Trừ, Nhân, Chia, Bình phương, Lập phương…

Giao diện của ứng dụng có thể như sau:

• Chương trình có ba ô nhập liệu và các nút chức năng. Hai ô nhập đầu tiên để người dùng nhập các toán hạng, ô thứ 3 để chương trình hiển thị kết quả tính.
• Các nút chức năng chỉ cần dùng đến một giá trị (ví dụ tính bình phương, lập phương, phân số) thì chỉ dùng đến giá trị của ô nhập liệu thứ nhất.
• Nhấn vào các nút chức năng, chương trình sẽ hiển thị kết quả phép tính tương ứng vào ô nhập liệu thứ 3.
• Khi nhấn vào nút chức năng “Use now”, giá trị vừa tính ra sẽ được đưa vào ô nhập liệu đầu tiên, giá trị ở ô nhập liệu thứ 2 và thứ 3 sẽ được xóa trắng.

12. Bài kiểm tra

Câu 1: Trong JavaScript, nếu x = 83 và y = 9 thì sau khi thực hiện x %= y, x sẽ có giá trị là bao nhiêu?

1. 0
   1. 1
   1. 2
   1. 9

Câu 2: JavaScript có phân biệt hoa\thường hay không?

1. Có
2. Không

Câu 3: Các định danh nào được đặt đúng?

1. 1_Name
   1. _Name
   1. name_1

Câu 4. Thẻ HTML nào cho phép đưa các mã JavaScript vào trang web?

1. <jsscript>
   1. <script>
   1. <javascript>
   1. <scripting>

Câu 5: Trong JavaScript, đâu là mã để viết chuỗi “Xin chào” vào trang web?

1. document.write(“Xin chào”);
   1. response.write(“Xin chào”);
   1. windows.write(“Xin chào”);
   1. writeln(“Xin chào”);

Câu 6: Làm thế nào để viết thông điệp “Xin chào” lên hộp thoại của trình duyệt?

1. msgBox(“Xin chào”)
   1. alert(“Xin chào”)
   1. alertBox=”Xin chào”
   1. alertBox(“Xin chào”)

Câu 7: Đâu là các cú pháp đúng để viết chú thích trong JavaScript?

1. Đây là chú thích
   1. <!– Đây là chú thích –>
   1. /* Đây là chú thích */
   1. // Đây là chú thích

Câu 8: Đâu là dòng lệnh đúng dùng để khai báo một biến trong JavaScript?

1. char[] name;
   1. let name;
   1. String name;
   1. let $name;

Câu 9: Biểu thức “1”+2+4 cho kết quả là gì?

1. “16”
   1. Undefined
   1. “124”
   1. 7

Câu 10: Biểu thức 2+5+”8″ cho kết quả là gì?

1. “258”
   1. 15
   1. “78”
   1. undefined

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

13. Tổng kết

• Biến là một khái niệm được dùng để đại diện cho một giá trị được lưu trữ trong bộ nhớ của máy tính
• Khi khai báo biến thì cần xác định tên của biến
• Tên của biến cần phải tuân thủ các quy định của từng ngôn ngữ lập trình
• Sau khi khai báo biến thì có thể gán giá trị cho biến
• Dữ liệu trong máy tính được chia thành nhiều kiểu khác nhau
• Một số kiểu dữ liệu thông dụng bao gồm: kiểu số, kiểu chuỗi, kiểu boolean, kiểu đối tượng…
• Có thể thực hiện các phép toán khác nhau trên các giá trị hoặc các biến
• Có các loại toán tử thông dụng như: Toán học, Logic, So sánh
• Các toán tử có độ ưu tiên nhất định, có thể thay đổi độ ưu tiên bằng cách sử dụng dấu ngoặc ()
• Có một vài cách khác nhau để đọc dữ liệu từ bên ngoài, chẳng hạn sử dụng hàm prompt() hoặc đọc dữ liệu từ thẻ input
• Có một vài cách khác nhau để hiển thị dữ liệu ra bên ngoài, chẳng hạn như alert(), document.write() hoặc console.log()