Xây dựng một máy tính đơn giản sử dụng HTML và JavaScript có thể là một công việc thú vị và mang tính giáo dục cho các nhà phát triển web mới bắt đầu.  Bằng cách kết hợp các khả năng của HTML để thiết kế giao diện người dùng và JavaScript để xử lý tính toán, bạn có thể xây dựng một máy tính hoạt động và tương tác ngay trong trình duyệt của mình.  Trong bài đăng này, chúng tôi sẽ hướng dẫn bạn quy trình từng bước tạo một máy tính cơ bản từ đầu đồng thời khám phá các nguyên tắc lập trình web trên đường đi.  Để bắt đầu, trước tiên chúng ta phải tạo môi trường dự án. Chúng ta sẽ xây dựng khung HTML cơ bản để làm nền tảng cho máy tính của chúng ta. Ngoài ra, để làm cho máy tính hấp dẫn hơn về mặt hình ảnh, chúng ta sẽ thiết lập giao diện của máy tính bằng CSS.  Cuối cùng, chúng tôi sẽ định cấu hình môi trường JavaScript để thêm chức năng vào máy tính của chúng tôi.   Mục lục  Các bước để tạo một máy tính đơn giản bằng HTML và JavaScript  Thiết kế giao diện người dùng  Xử lý đầu vào của người dùng  Thực hiện tính toán  Mã HTML đầy đủ cho máy tính HTML đơn giản  Xem trước máy tính HTML đơn giản  Phần kết luận  Các bước để tạo một máy tính đơn giản bằng HTML và JavaScript  Dưới đây là các bước để tạo một máy tính đơn giản sử dụng HTML và JavaScript có thể thực hiện phép tính số học đơn giản trên các số nguyên.  Đầu vào văn bản và nút được sử dụng trên bảng trong phần tử biểu mẫu và sự kiện OnClick được sử dụng để đặt các giá trị nút trên màn hình hoặc để đánh giá các con số.  1. Thiết kế giao diện người dùng  Giao diện người dùng (UI) là mặt trước của máy tính. Chúng tôi sẽ tạo một màn hình rõ ràng để hiển thị đầu vào và kết quả. Chúng tôi cũng sẽ cung cấp các nút tương tác cho số nguyên và toán tử. Mục tiêu của chúng tôi là tạo ra một thiết kế trực quan và thân thiện với người dùng, làm phong phú thêm mọi khía cạnh của người dùng máy tính.  Sử dụng các bước sau để thiết kế giao diện người dùng của máy tính.  Bước 1. Ban đầu, tạo thẻ <html> cùng với phần tử <form> và thẻ <body> như bên dưới.   <html> <head><title>A Simple Calculator Using HTML</title></head> <body> <h3>A Simple Calculator Using HTML</h3> <form Name="calc"> </form> </body> </html>  Bước 2. Bây giờ, hãy tạo một bảng trong thẻ <form>……</form> bằng cách sử dụng thẻ <table> …..</table> và chèn hai loại Văn bản đầu vào và các nút trong dữ liệu bảng của hàng của bảng bằng cách sử dụng <tr Thẻ ><td>….</td></tr>.   <table id="calc" border=2> <tr> <td colspan=5><input id="btn" name="display" type="text"></td> <td style="display:none"><input name="M" type="number"></td> </tr> </table>  Bước 3. Sau đó, tạo các nút bằng cách sử dụng thẻ <input>, đồng thời đặt “id” và “value” của các nút này trong hàng của bảng có thẻ <tr><td>….</td></tr> làm trình bày bên dưới.   <tr> <td><input id="btn" type=button value="MC"></td> <td><input id="btn" type=button value="0"></td> <td><input id="btn" type=button value="1"></td> <td><input id="btn" type=button value="2"></td> <td><input id="btn" type=button value="+"></td> </tr> <tr> <td><input id="btn" type=button value="MS"></td> <td><input id="btn" type=button value="3"></td> <td><input id="btn" type=button value="4"></td> <td><input id="btn" type=button value="5"></td> <td><input id="btn" type=button value="-"></td> </tr> <tr> <td><input id="btn" type=button value="MR"></td> <td><input id="btn" type=button value="6"></td> <td><input id="btn" type=button value="7"></td> <td><input id="btn" type=button value="8"></td> <td><input id="btn" type=button value="x"></td> </tr> <tr> <td><input id="btn" type=button value="M+"></td> <td><input id="btn" type=button value="9"></td> <td><input id="btn" type=button value="±"></td> <td><input id="btn" type=button value="="></td> <td><input id="btn" type=button value="/"></td> </tr> <tr> <td><input id="btn" type=button value="1/x"></td> <td><input id="btn" type=button value="."></td> <td><input id="btn" type=button value="x2"></td> <td><input id="btn" type=button value="√"></td> <td><input id="btn" type=button value="C"></td> </tr>  Bước 4. Cuối cùng, thêm mã CSS sau để tạo thiết kế cho máy tính với thẻ <style>…..</style> như bên dưới.   <style> #calc{width:300px;height:250px;} #btn{width:100%;height:40px;font-size:20px;} </style>  2. Xử lý đầu vào của người dùng  Sử dụng các bước sau để thiết kế giao diện người dùng của máy tính.  #Bước 1. Chỉ định một sự kiện “onkeypress” cho một nút hiển thị đã được tạo để hiển thị đầu vào và kết quả của phép tính như dưới đây.   <tr> <td colspan=5><input id="btn" name="display" onkeypress="return event.charCode >= 48 && event.charCode <= 57" type="text"></td> <td style="display:none"><input name="M" type="number"></td> </tr>  Bước 2. Chỉ định một sự kiện OnClick cho tất cả các nút có số và toán tử số học như bên dưới.   <tr> <td><input id="btn" type=button value="MC" OnClick="calc.M.value=''"></td> <td><input id="btn" type=button value="0" OnClick="calc.display.value+='0'"></td> <td><input id="btn" type=button value="1" OnClick="calc.display.value+='1'"></td> <td><input id="btn" type=button value="2" OnClick="calc.display.value+='2'"></td> <td><input id="btn" type=button value="+" OnClick="calc.display.value+='+'"></td> </tr> <tr> <td><input id="btn" type=button value="MS" OnClick="calc.M.value=calc.display.value"></td> <td><input id="btn" type=button value="3" OnClick="calc.display.value+='3'"></td> <td><input id="btn" type=button value="4" OnClick="calc.display.value+='4'"></td> <td><input id="btn" type=button value="5" OnClick="calc.display.value+='5'"></td> <td><input id="btn" type=button value="-" OnClick="calc.display.value+='-'"></td> </tr> <tr> <td><input id="btn" type=button value="MR" OnClick="calc.display.value=calc.M.value"></td> <td><input id="btn" type=button value="6" OnClick="calc.display.value+='6'"></td> <td><input id="btn" type=button value="7" OnClick="calc.display.value+='7'"></td> <td><input id="btn" type=button value="8" OnClick="calc.display.value+='8'"></td> <td><input id="btn" type=button value="x" OnClick="calc.display.value+='*'"></td> </tr>  3. Thực hiện phép tính  Chỉ định một sự kiện OnClick cho tất cả các toán tử số học, cung cấp một dấu nháy kép có dấu cách (“”) cho nút Clear(C) và sử dụng hàm eval() để đánh giá các số trong sự kiện OnClick như được cung cấp bên dưới.   <tr> <td><input id="btn" type=button value="M+" OnClick="calc.M.value=(Number(calc.M.value))+(Number(calc.display.value))"></td> <td><input id="btn" type=button value="9" OnClick="calc.display.value+='9'"></td> <td><input id="btn" type=button value="±" OnClick="calc.display.value=(calc.display.value==Math.abs(calc.display.value)?-(calc.display.value):Math.abs(calc.display.value))"> </td> <td><input id="btn" type=button value="=" OnClick="calc.display.value=eval(calc.display.value)"></td> <td><input id="btn" type=button value="/" OnClick="calc.display.value+='/'"></td> </tr> <tr> <td><input id="btn" type=button value="1/x" OnClick="calc.display.value=1/calc.display.value"></td> <td><input id="btn" type=button value="." OnClick="calc.display.value+='.'"></td> <td><input id="btn" type=button value="x2" OnClick="calc.display.value=Math.pow(calc.display.value,2)"></td> <td><input id="btn" type=button value="√" OnClick="calc.display.value=Math.sqrt(calc.display.value)"></td> <td><input id="btn" type=button value="C" OnClick="calc.display.value=''"></td> </tr>  Mã HTML đầy đủ cho Máy tính HTML đơn giản   <html> <head></head> <body> <h3>Simple Calculator</h3> <br/> <style> #calc{width:300px;height:250px;} #btn{width:100%;height:40px;font-size:20px;} </style> <form Name="calc"> <table id="calc" border=2> <tr> <td colspan=5><input id="btn" name="display" onkeypress="return event.charCode >= 48 && event.charCode <= 57" type="text"></td> <td style="display:none"><input name="M" type="number"></td> </tr> <tr> <td><input id="btn" type=button value="MC" OnClick="calc.M.value=''"></td> <td><input id="btn" type=button value="0" OnClick="calc.display.value+='0'"></td> <td><input id="btn" type=button value="1" OnClick="calc.display.value+='1'"></td> <td><input id="btn" type=button value="2" OnClick="calc.display.value+='2'"></td> <td><input id="btn" type=button value="+" OnClick="calc.display.value+='+'"></td> </tr> <tr> <td><input id="btn" type=button value="MS" OnClick="calc.M.value=calc.display.value"></td> <td><input id="btn" type=button value="3" OnClick="calc.display.value+='3'"></td> <td><input id="btn" type=button value="4" OnClick="calc.display.value+='4'"></td> <td><input id="btn" type=button value="5" OnClick="calc.display.value+='5'"></td> <td><input id="btn" type=button value="-" OnClick="calc.display.value+='-'"></td> </tr> <tr> <td><input id="btn" type=button value="MR" OnClick="calc.display.value=calc.M.value"></td> <td><input id="btn" type=button value="6" OnClick="calc.display.value+='6'"></td> <td><input id="btn" type=button value="7" OnClick="calc.display.value+='7'"></td> <td><input id="btn" type=button value="8" OnClick="calc.display.value+='8'"></td> <td><input id="btn" type=button value="x" OnClick="calc.display.value+='*'"></td> </tr> <tr> <td><input id="btn" type=button value="M+" OnClick="calc.M.value=(Number(calc.M.value))+(Number(calc.display.value))"></td> <td><input id="btn" type=button value="9" OnClick="calc.display.value+='9'"></td> <td><input id="btn" type=button value="±" OnClick="calc.display.value=(calc.display.value==Math.abs(calc.display.value)?-(calc.display.value):Math.abs(calc.display.value))"> </td> <td><input id="btn" type=button value="=" OnClick="calc.display.value=eval(calc.display.value)"></td> <td><input id="btn" type=button value="/" OnClick="calc.display.value+='/'"></td> </tr> <tr> <td><input id="btn" type=button value="1/x" OnClick="calc.display.value=1/calc.display.value"></td> <td><input id="btn" type=button value="." OnClick="calc.display.value+='.'"></td> <td><input id="btn" type=button value="x2" OnClick="calc.display.value=Math.pow(calc.display.value,2)"></td> <td><input id="btn" type=button value="√" OnClick="calc.display.value=Math.sqrt(calc.display.value)"></td> <td><input id="btn" type=button value="C" OnClick="calc.display.value=''"></td> </tr> </table> </form> </body> </html>  Xem trước Máy tính HTML đơn giản  Bạn có thể xem và sử dụng máy tính HTML từ bài viết gốc được đăng trên InfoTechSite.   Bấm vào đây để xem máy tính HTML.   Cũng được xuất bản  ở đây

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Get free Tech Tutorials Now!

Read My Stories

Nghe bài viết này bằng Tiếng Anh, đọc bởi robot thông minh của HackerNoon

Cách tốt nhất để tạo một máy tính đơn giản bằng HTML và JavaScript

About Author

BÌNH LUẬN

chuyên mục

BÀI VIẾT NÀY CŨNG CÓ MẶT TẠI

Related Stories

85 Stories To Learn About Productivity Hacks

147 Stories To Learn About Reading Books Online

145 Stories To Learn About Book

287 Stories To Learn About Blockchain Development

85 Stories To Learn About Productivity Hacks

147 Stories To Learn About Reading Books Online

145 Stories To Learn About Book

287 Stories To Learn About Blockchain Development

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps