Cách xây dựng một máy tính đơn giản bằng HTML, CSS và JavaScript
Cách tốt nhất để học JavaScript là xây dựng các dự án. Nếu muốn trở thành một nhà phát triển web giỏi, bạn cần bắt đầu tạo dự án càng sớm càng tốt. Bạn có thể bắt đầu bằng cách xây dựng các dự án ở cấp độ mới bắt đầu như máy tính đơn giản, đồng hồ kỹ thuật số hoặc đồng hồ bấm giờ.
Bằng cách sử dụng các công nghệ web cơ bản như HTML, CSS và JavaScript, người ta có thể dễ dàng xây dựng một máy tính thô sơ có khả năng thực hiện các phép tính số học cơ bản bao gồm cộng, trừ, nhân và chia.
Tính năng của Máy tính
Mục tiêu của cam kết này là tạo ra một máy tính tiên tiến với các khả năng sau:
Thiết bị này có khả năng thực hiện các phép toán cơ bản như cộng, trừ, chia và nhân.
⭐Nó sẽ thực hiện các phép tính thập phân.
Máy tính sẽ hiển thị giá trị vô cùng ở đầu ra khi cố gắng tính kết quả của phép chia bất kỳ số lượng nào cho giá trị bằng 0.
Công cụ tìm kiếm sẽ không cung cấp phản hồi nếu biểu thức đã nhập được coi là không hợp lệ. Ví dụ: nhập “5+\+9” sẽ không có kết quả.
Chức năng “Clear Screen” cho phép xóa ngay lập tức tất cả nội dung trên màn hình theo ý của bạn.
Mã nguồn được sử dụng trong nỗ lực này đã có thể truy cập được thông qua kho lưu trữ GitHub, nơi cấp cho bạn quyền sử dụng nó miễn phí theo các điều khoản của giấy phép MIT. Trong trường hợp bạn muốn xem xét một ví dụ hoạt động của dự án này, vui lòng truy cập phần trình diễn của chúng tôi.
Thành phần của Máy tính
Máy tính bao gồm các thành phần sau:
Tập hợp các phép toán bao gồm phép cộng được biểu thị bằng ký hiệu “+”, phép trừ được ký hiệu là “-”, phép nhân được biểu thị bằng “*” và phép chia được ký hiệu là “/”.
Các chữ số và nút thập phân bao gồm các số từ 0 đến 9, cũng như ký hiệu dấu thập phân (.).
Màn hình hiển thị trình bày hình ảnh trực quan của biểu thức toán học và kết quả tương ứng của nó.
Nút “Xóa màn hình” là một công cụ thân thiện với người dùng cho phép bạn xóa tất cả các biểu thức toán học hiện tại trên màn hình, đảm bảo một phương tiện mới cho các tính toán trong tương lai của bạn.
Nút “Tính toán” là lệnh đánh giá một biểu thức toán học đã nhập vào, dẫn đến giá trị đầu ra được hiển thị.
Cấu trúc thư mục của dự án Máy tính
Để tạo một ứng dụng web máy tính tương tác, hãy thiết lập một thư mục chính có tên là “Máy tính”. Thư mục này sẽ chứa nhiều thành phần thiết yếu khác nhau như tệp HTML, CSS và JavaScript. Tên của những tập tin này có thể được chọn theo ý của bạn; tuy nhiên, việc tuân thủ các quy ước đặt tên đã thiết lập cho từng loại tệp tương ứng sẽ là điều thận trọng. Theo thông lệ thông thường, tệp HTML phải có tiêu đề “index.html”, trong khi tệp CSS đi kèm của nó phải được gắn nhãn “styles.css” và tệp JavaScript phải được gọi là “script.js”. Nói chung, nên tuân thủ cả tiêu chuẩn đặt tên JavaScript và HTML/CSS để đảm bảo tính nhất quán và tạo điều kiện cho sự cộng tác suôn sẻ giữa các nhà phát triển.
Thêm cấu trúc vào máy tính bằng HTML
Vui lòng mở tệp “index.html” và chèn mã HTML được cung cấp cho máy tính như sau:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Simple Calculator using HTML, CSS and JavaScript</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<table class="calculator" >
<tr>
<td colspan="3"> <input class="display-box" type="text" id="result" disabled /> </td>
<!-- clearScreen() function clears all the values -->
<td> <input type="button" value="C" onclick="clearScreen()" id="btn" /> </td>
</tr>
<tr>
<!-- display() function displays the value of clicked button -->
<td> <input type="button" value="1" onclick="display('1')" /> </td>
<td> <input type="button" value="2" onclick="display('2')" /> </td>
<td> <input type="button" value="3" onclick="display('3')" /> </td>
<td> <input type="button" value="/" onclick="display('/')" /> </td>
</tr>
<tr>
<td> <input type="button" value="4" onclick="display('4')" /> </td>
<td> <input type="button" value="5" onclick="display('5')" /> </td>
<td> <input type="button" value="6" onclick="display('6')" /> </td>
<td> <input type="button" value="-" onclick="display('-')" /> </td>
</tr>
<tr>
<td> <input type="button" value="7" onclick="display('7')" /> </td>
<td> <input type="button" value="8" onclick="display('8')" /> </td>
<td> <input type="button" value="9" onclick="display('9')" /> </td>
<td> <input type="button" value="\+" onclick="display('\+')" /> </td>
</tr>
<tr>
<td> <input type="button" value="." onclick="display('.')" /> </td>
<td> <input type="button" value="0" onclick="display('0')" /> </td>
<!-- calculate() function evaluates the mathematical expression -->
<td> <input type="button" value="=" onclick="calculate()" id="btn" /> </td>
<td> <input type="button" value="*" onclick="display('*')" /> </td>
</tr>
</table>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
Cam kết hiện tại sử dụng atag để thiết lập cấu hình chung của máy tính. Trong đó có năm thẻ, mỗi thẻ đại diện cho một phần nằm ngang của máy tính. Mỗi thẻ có thẻ tương ứng riêng, trong đó thẻ cư trú bao gồm màn hình hiển thị và các phím chức năng của máy tính.
Tạo kiểu cho máy tính bằng CSS
Vui lòng mở tệp “styles.css” và chèn mã CSS tiếp theo để triển khai máy tính trên trang web:
@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');
.calculator {
padding: 10px;
border-radius: 1em;
height: 380px;
width: 400px;
margin: auto;
background-color: #191b28;
box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}
.display-box {
font-family: 'Orbitron', sans-serif;
background-color: #dcdbe1;
border: solid black 0.5px;
color: black;
border-radius: 5px;
width: 100%;
height: 65%;
}
#btn {
background-color: #fb0066;
}
input[type=button] {
font-family: 'Orbitron', sans-serif;
background-color: #64278f;
color: white;
border: solid black 0.5px;
width: 100%;
border-radius: 5px;
height: 70%;
outline: none;
}
input:active[type=button] {
background: #e5e5e5;
-webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
-moz-box-shadow: inset 0px 0px 5px #c1c1c1;
box-shadow: inset 0px 0px 5px #c1c1c1;
}
Mã được cung cấp xác định thẻ HTML tùy chỉnh, “calc”, đại diện cho giao diện máy tính, bao gồm các nút cho các phép toán khác nhau như cộng, trừ, nhân, chia, xóa và bằng. Nó cũng bao gồm các trường đầu vào cho hai số và dấu bằng. Nhãn nút được hiển thị trên đầu mỗi nút bằng cách sử dụng định vị tuyệt đối trong phần tử div của chính nó có áp dụng phần đệm và bán kính đường viền. Ngoài ra, nó còn sử dụng các lớp CSS của Tailwind như flex, px-4, py-2, round-md, bg-white, text-red-500, hover:bg-gray-100, focus:outline-none và transition to style sự xuất hiện của thẻ calc. Cuối cùng, nó nhập họ phông chữ Orbitron từ Google Fonts bằng cách sử dụng “@import
Thêm chức năng vào máy tính bằng JavaScript
Vui lòng sửa đổi tệp “script.js” hiện có bằng cách kết hợp mã JavaScript được cung cấp để nâng cao chức năng của máy tính cơ bản như sau:
// This function clears all the values
function clearScreen() {
document.getElementById("result").value = "";
}
// This function displays the values
function display(value) {
document.getElementById("result").value \+= value;
}
// This function evaluates the expression and returns the result
function calculate() {
var p = document.getElementById("result").value;
var q = eval(p);
document.getElementById("result").value = q;
}
Hiểu mã JavaScript
Các chức năng nói trên cung cấp cho máy tính những khả năng cụ thể, bao gồm xóa màn hình, trình bày trực quan kết quả đầu ra và thực hiện các phép toán tương ứng.
Xóa giá trị
Hàm clearScreen() sử dụng mã định danh của phần tử có ID được chỉ định, được gọi là “kết quả”, để truy cập Mô hình đối tượng tài liệu (DOM) và sửa đổi nội dung của nó bằng cách đặt nó thành một chuỗi trống. Quá trình này thường được gọi là thao tác DOM. Các phần khác nhau của trang web có thể được truy cập và sửa đổi thông qua việc sử dụng bộ chọn DOM, là các mã cụ thể xác định các thành phần cụ thể trong hệ thống phân cấp DOM nhằm mục đích thay đổi thuộc tính hoặc nội dung của chúng.
function clearScreen() {
document.getElementById("result").value = "";
}
Hiển thị giá trị
Việc triển khai hàm display() liên quan đến việc truy cập Mô hình đối tượng tài liệu (DOM) thông qua mã định danh được liên kết với tùy chọn đã chọn và sau đó gắn giá trị tương ứng vào phần tử được xác định trong DOM.
function display(value) {
document.getElementById("result").value \+= value;
}
Đánh giá biểu thức
Hàm Calculate() truy xuất giá trị được đánh giá của một biểu thức bằng cách truy cập Mô hình Đối tượng Tài liệu (DOM) bằng cách sử dụng mã định danh của một phần tử cụ thể, sau đó sử dụng hàm eval() để đánh giá biểu thức. Sau đó, kết quả tính toán được gán lại cho phần tử được chỉ định.
Hàm JavaScript đánh giá() phục vụ mục đích tính toán một biểu thức nhất định, được cung cấp làm đầu vào cho hàm và sau đó mang lại kết quả thu được từ biểu thức đó.
function calculate() {
var p = document.getElementById("result").value;
var q = eval(p);
document.getElementById("result").value = q;
}
Phát triển các dự án lập trình thú vị
Một phương tiện hiệu quả để nâng cao trình độ lập trình của một người là thực hiện phát triển dự án, bất kể họ là người mới hay quay lại viết mã sau một thời gian dài gián đoạn. Việc hoàn thành và triển khai thành công các ứng dụng chức năng, bao gồm cả những ứng dụng có chức năng cơ bản, có thể củng cố sự tự tin.
Thật vậy, có rất nhiều công việc có thể tiếp cận được, từ các hoạt động giải trí như cờ vua và tic-tac-toe đến các công cụ thiết thực như danh sách việc cần làm, bộ chuyển đổi trọng lượng và đồng hồ đếm ngược mà người ta có thể thử nghiệm.
Đắm mình vào các dự án này để nâng cao kỹ năng phát triển của bạn bằng cách tích lũy kinh nghiệm thực tế thông qua học tập thực hành.