Tạo ứng dụng bảng tính bằng JavaScript

Hướng dẫn học JavaScript từ cơ bản đến nâng cao

Các loại chú thích và câu lệnh trong JavaScript
Biến cơ bản trong JavaScript
Các kiểu biến dữ liệu trong JavaScript
Cách sử dụng biến và chuỗi trong JavaScript
Thay đổi nội dung HTML và khả năng hiển thị của JavaScript
Toán tử trong JavaScript
Sử dụng hàm trong JavaScript
Tạo ứng dụng Quiz bằng JavaScript
Tạo ứng dụng bảng tính bằng JavaScript
Tìm hiểu về mảng và vòng lặp trong JavaScript
Sử dụng vòng lặp While trong JavaScript
Câu lệnh điều kiện IF trong JavaScript

Chào các bạn, hôm nay mình sẽ hướng dẫn tạo ứng dụng bảng tính bằng JavaScript. Đây là một công cụ tính toán đơn giản để các bạn làm quen. Các lệnh trong này các bạn sẽ gặp và sử dụng nó thường xuyên kể cả khi bạn không dùng để tính toán với các tập tin hay dữ liệu nào đó.

Đầu tiên ta sẽ tạo một trang HTML

<html lang="vi">
	<head>
		<meta charset="utf-8">
		<title>Ứng dụng tính toán - Kênh 49</title>
	</head>
	<body>
		
	</body>
</html>

Trước tiên chúng ta phải phân biệt khối nhập dữ liệu vào một cách rõ ràng. Trong phần body sẽ chịu trách nhiệm nhận dữ liệu và chúng ta sẽ dùng JavaScript để xử lý dữ liệu đó. Điều hay nhất chúng ta có thể làm đó là bắt đầu bằng một hoặc ba giá trị để xem các hàm có hoạt động tốt không. Hãy tạo một form và đặt tên là frm. Việc đặt trên này khá quang trong vì chúng ta sẽ gọi tên này của form trong JavaScript. Sau đó đóng thẻ form

<html lang="vi">
	<head>
		<meta charset="utf-8">
		<title>Ứng dụng tính toán - Kênh 49</title>
	</head>
	<body>
		<form name="frm"> </form>
	</body>
</html>

Sau đó chúng ta tạo một thẻ input đặt tên là result, và thêm một thẻ input đặt tên là 1, value 1, thuộc tính type là button. Và tương tự chúng ta sẽ tạo thêm vài nút thay đổi các giá trị thành 2,3,4.

<html lang="vi">
	<head>
		<meta charset="utf-8">
		<title>Ứng dụng tính toán - Kênh 49</title>
	</head>
	<body>
		<form name="frm">
			<input name="result"><br>
			<input type="button" name="1" value="1">
			<input type="button" name="1" value="2">
			<input type="button" name="1" value="3">
			<input type="button" name="1" value="4">
		</form>
	</body>
</html>

Khi chúng ta nhân vào các nút này và muốn lấy các giá trị chứa các số này vào hộp input. Vậy làm cách nào bằng JavaScript. Cách chúng ta làm ở đây đó làm thêm thẻ script. Tóm lại việc chúng ta muốn làm là khi click vào các button số này, nó sẽ lấy các giá trị đưa vào khung ipnut result. Để làm vậy chúng ta cần thêm sự kiện onclick và các button chạy hàm run1() sao chi khi chúng ta click vào button 1 hàm run1 sẽ được chạy. Và sau đó chúng ta định nghĩa hàm run1 trong thẻ script, và chúng ta sẽ làm cho hàm này thực hiện việc đưa giá trị 1 vào input result. Đây là thao tác cơ bản để nhập số vào công cụ tính toán trong bài tạo ứng dụng bảng tính này. Vậy ta mình sẽ dùng lệnh, document.frm (frm chính là tên form) tiếp đến là document.frm.result.value phải bằng với 1. Và thử chạy chương trình xem. chúng ta sẽ thấy giá trị 1 nằm trên khung input result

<html lang="vi">
	<head>
		<meta charset="utf-8">
		<title>Ứng dụng tính toán - Kênh 49</title>
	</head>
	<body>
		<form name="frm">
			<input name="result"><br>
			<input type="button" name="1" value="1" onclick="run1()">
			<input type="button" name="1" value="2">
			<input type="button" name="1" value="3">
			<input type="button" name="1" value="4">
		</form>
		<script> function run1() { document.frm.result.value = "1"; } </script>
	</body>
</html>

Vậy là hàm đã hoạt động, những giờ mình muốn mỗi lần nhần nhút, mình muốn thêm vào một dãy số 1. Vậy chúng ta sẽ thay đổi toán tử một chút bằng cách thêm dấu cộng vào

<html lang="vi">
	<head>
		<meta charset="utf-8">
		<title>Ứng dụng tính toán - Kênh 49</title>
	</head>
	<body>
		<form name="frm">
			<input name="result"><br>
			<input type="button" name="1" value="1" onclick="run1()">
			<input type="button" name="1" value="2">
			<input type="button" name="1" value="3">
			<input type="button" name="1" value="4">
		</form>
		<script>
		function run1() { document.frm.result.value += "1"; }
		</script>
	</body>
</html>

Giờ thì mọi thứ đã như ý, đây là đoạn mã của hàm run1(), chúng ta sẽ làm tương tự với các nút 2,3,4 bằng các đoạn mã run2(), run3(), run4(). Và sau đó tạo dấu cộng bằng cách tạo input button với tên plus value +. Cùng với sự kiện onclick chạy hàm runplus()

<html lang="vi">
	<head>
		<meta charset="utf-8">
		<title>Ứng dụng tính toán - Kênh 49</title>
	</head>
	<body>
		<form name="frm">
			<input name="result"><br>
			<input type="button" name="1" value="1" onclick="run1()">
			<input type="button" name="1" value="2" onclick="run2()">
			<input type="button" name="1" value="3" onclick="run3()">
			<input type="button" name="1" value="4" onclick="run4()">
			<input type="button" name="plus" value="+" onclick="runplus()">
		</form>
		<script>
		function run1() { document.frm.result.value += "1"; }
		function run2() { document.frm.result.value += "2"; }
		function run3() { document.frm.result.value += "3"; }
		function run4() { document.frm.result.value += "4"; }
		function runplus() { document.frm.result.value += "+"; }
		</script>
	</body>
</html>

Và giờ điều chúng ta muốn JavaScript làm đó là tính ra dãy số bất kì với các phép tính được viết ra. Để làm được điều này, chúng ta sẽ viết một hàm để tính giá trị đó. Ta sẽ tạo hàm evaluator. Đầu tiên ta sẽ tạo một biến và gán nó bằng với document.frm.result.value. Chúng ta muốn lấy giá trị tương ứng của chuỗi dãy số nhập vào, nên chúng ta sẽ sử dụng hàm có sẵn trong javascript đó là hàm eval. Đối với hàm này bạn có thể đặt bất kì giá trị dạng chuỗi nào vào và hàm eval sẽ tính toán mọi thứ trong đó dưới dạng sâu. Do đó, hàm này sẽ lấy tất cả cac giá trị trong ô input result rồi tính toán và đưa chúng vào biến evalo. Và giờ chúng ta sẽ kiểm tra giá trị đưa vào hàm evaluator tính được. Nhưng trước tiên chúng ta sẽ thêm vào trong from một nút với name calu và value “=”

<html lang="vi">
	<head>
		<meta charset="utf-8">
		<title>Ứng dụng tính toán - Kênh 49</title>
	</head>
	<body>
		<form name="frm">
			<input name="result"><br>
			<input type="button" name="1" value="1" onclick="run1()">
			<input type="button" name="1" value="2" onclick="run2()">
			<input type="button" name="1" value="3" onclick="run3()">
			<input type="button" name="1" value="4" onclick="run4()">
			<input type="button" name="plus" value="+" onclick="runplus()"><br>
			<input type="button" name="calu" value="=" onclick="evaluator()">
		</form>
		<script>
		function run1() { document.frm.result.value += "1"; }
		function run2() { document.frm.result.value += "2"; }
		function run3() { document.frm.result.value += "3"; }
		function run4() { document.frm.result.value += "4"; }
		function runplus() { document.frm.result.value += "+"; }
		function evaluator() { var evalo = eval(document.frm.result.value); document.frm.result.value = evalo; }
		</script>
	</body>
</html>

Và hàm đã hoạt động. Tương tự các bạn có thể làm với phép trừ, phép nhân, phép chia,…. Các bạn đã có thể tạo ra một ứng dụng bảng tính toán cho riêng mình, chúc các bạn thành công! Hẹn gặp lại các bạn ở bài tiếp theo

Series Navigation

<< Tạo ứng dụng Quiz bằng JavaScriptTìm hiểu về mảng và vòng lặp trong JavaScript >>

Ăn Uống

Tạo ứng dụng bảng tính bằng JavaScript

Trả lời Hủy