Hướng dẫn simple calculator program using javascript in html - chương trình máy tính đơn giản sử dụng javascript trong html

Question

Cách tốt nhất để học JavaScript là xây dựng các dự án. Nếu bạn muốn trở thành một nhà phát triển web tốt, bạn cần bắt đầu tạo các 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ờ.

Nội dung chính Show

Các tính năng của máy tính
Các thành phần của máy tính
Cấu trúc thư mục của dự án máy tính
Mã JavaScript
Hiểu mã JavaScript
Xóa các giá trị
Hiển thị các giá trị
Đánh giá biểu thức
Phát triển các dự án lập trình tuyệt vời
Làm thế nào để bạn mã hóa một máy tính trong HTML?
Làm thế nào để bạn mã hóa một máy tính trong JavaScript?
Làm cách nào để sử dụng JavaScript trong HTML?

Bạn có thể tạo một máy tính đơn giản bằng cách sử dụng các công nghệ web lõi: HTML, CSS và JavaScript. Máy tính này có thể thực hiện các hoạt động toán học cơ bản như bổ sung, trừ, nhân và chia.

Các tính năng của máy tính

Trong dự án này, bạn sẽ phát triển một máy tính sẽ có các tính năng sau:

Nó sẽ thực hiện các hoạt động số học cơ bản như bổ sung, trừ, chia và nhân.
Nó sẽ thực hiện các hoạt động thập phân.
Máy tính sẽ hiển thị Infinity nếu bạn cố gắng chia bất kỳ số nào cho 0.Infinity if you try to divide any number by zero.
Nó sẽ không hiển thị bất kỳ kết quả nào trong trường hợp biểu thức không hợp lệ. Ví dụ, 5 ++ 9 sẽ không hiển thị bất cứ điều gì.
Xóa tính năng màn hình để xóa màn hình hiển thị bất cứ lúc nào bạn muốn.

Mã được sử dụng trong dự án này có sẵn trong kho GitHub và miễn phí để bạn sử dụng theo giấy phép MIT. Nếu bạn muốn xem phiên bản trực tiếp của dự án này, bạn có thể xem bản demo này.

Các thành phần của máy tính

Máy tính bao gồm các thành phần sau:

Toán tử toán học: Bổ sung (+), phép trừ (-), phép nhân (*) và chia (/).: Addition (+), Subtraction (-), Multiplication (*), and Division (/).

Các chữ số và nút thập phân: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9,. .: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, . .

Màn hình hiển thị: Nó hiển thị biểu thức toán học và kết quả.: It displays the mathematical expression and the result.

Nút màn hình rõ ràng: Nó xóa tất cả các giá trị toán học.: It clears all mathematical values.

Nút tính toán (=): Nó đánh giá biểu thức toán học và trả về kết quả.: It evaluates the mathematical expression and returns the result.

A calculator's basic components divided into the display and the key inputs.

Cấu trúc thư mục của dự án máy tính

Tạo một thư mục gốc chứa các tệp HTML, CSS và JavaScript. Bạn có thể đặt tên cho các tệp bất cứ thứ gì bạn muốn. Ở đây thư mục gốc được đặt tên là máy tính. Theo quy ước đặt tên tiêu chuẩn, các tệp HTML, CSS và JavaScript được đặt tên là index.html, styles.css và script.js tương ứng.Calculator. According to the standard naming convention, the HTML, CSS, and JavaScript files are named index.html, styles.css, and script.js respectively.

Folder structure of the calculator project

Mã HTML

Mở tệp index.html và dán mã HTML sau đây cho máy tính:index.html file and paste the following HTML code for the calculator:

<!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" srx="script.js"></script>
 </body>
 </html>

Dự án này sử dụng một thẻ để tạo cấu trúc tổng thể của máy tính. Thẻ chứa năm hàng đại diện cho năm phần ngang của máy tính. Mỗi hàng có một thẻ tương ứng. Mỗi thẻ chứa các thẻ giữ màn hình hiển thị và các nút của máy tính.

tag to create the overall structure of the calculator. The

tag contains five rows which represent five horizontal sections of the calculator. Each row has a corresponding tag. Each tag contains

tags which hold the display screen and buttons of the calculator.

Calculator Rows

Mã CSS

Mở tệp Styles.css và dán mã CSS sau đây cho máy tính:styles.css file and paste the following CSS code for the calculator:

@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;
}

Các CSS trên tạo kiểu máy tính. Bộ chọn .Class trong CSS chọn các phần tử với một thuộc tính lớp cụ thể. Bộ chọn lớp .Calculator và .Display-Box Kiểu cấu trúc bảng và màn hình hiển thị của máy tính tương ứng. @Import Nhập các gia đình phông chữ Orbitron từ phông chữ Google..class selector in CSS selects elements with a specific class attribute. The .calculator and .display-box class selectors style the table structure and the display screen of the calculator respectively. @import imports the Orbitron font-family from Google fonts.

Mã JavaScript

Mở tệp script.js và thêm chức năng vào máy tính đơn giản bằng mã JavaScript sau:script.js file and add functionality to the simple calculator using the following JavaScript code:

// This function clear all the values
function clearScreen() {
    document.getElementById("result").value = "";
} // This function display values
function display(value) {
    document.getElementById("result").value += value;
}
 // This function evaluates the expression and returns result
function calculate() {
    var p = document.getElementById("result").value;
    var q = eval(p);
    document.getElementById("result").value = q;
}

Hiểu mã JavaScript

Các hàm ClearScreen (), Display () và Tính toán () thêm chức năng cho máy tính. clearScreen(), display(), and calculate() functions add functionality to the Calculator.

Xóa các giá trị

Hàm ClearScreen () truy cập DOM bằng ID của kết quả và xóa giá trị của nó bằng cách gán cho nó một chuỗi trống. Bạn có thể sử dụng bộ chọn Dom để nhắm mục tiêu các thành phần khác nhau của một trang. clearScreen() function access the DOM using the id of the result and clear its value by assigning it an empty string. You can use DOM selectors to target various components of a page.

function clearScreen() {
    document.getElementById("result").value = "";
}

Hiển thị các giá trị

Hàm hiển thị () truy cập vào DOM bằng ID của kết quả và nối giá trị của nút nhấp vào kết quả.display() function accesses the DOM using the id of the result and appends the value of the clicked button to the result.

function display(value) {
    document.getElementById("result").value += value;
}

Đánh giá biểu thức

Hàm tính toán () truy cập DOM bằng ID của kết quả và đánh giá biểu thức bằng hàm eval (). Giá trị được đánh giá của biểu thức một lần nữa được gán cho kết quả. calculate() function accesses the DOM using the id of the result and evaluates the expression using the eval() function. The evaluated value of the expression is again assigned to the result.

Hàm JavaScript Eval () đánh giá một biểu thức mà bạn truyền cho nó. Nó trả về kết quả của biểu thức đó.eval() function evaluates an expression that you pass to it. It returns the result of that expression.

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 tuyệt vời

Bạn có thể cải thiện kỹ năng mã hóa của mình bằng cách phát triển các dự án, cho dù bạn là người mới bắt đầu hay bạn sẽ quay lại mã hóa sau một thời gian nghỉ. Tạo các ứng dụng hoạt động đầy đủ, thậm chí các ứng dụng đơn giản, có thể tăng cường sự tự tin của bạn.

Bạn có thể thử nhiều dự án đơn giản từ các trò chơi (cờ vua, tic-tac-toe, kéo giấy đá) đến các tiện ích đơn giản (danh sách việc cần làm, chuyển đổi trọng lượng, đồng hồ đếm ngược).

Nhận được bàn tay của bạn bẩn với các dự án này và trở thành một nhà phát triển tốt hơn.

Làm thế nào để bạn mã hóa một máy tính trong HTML?

Làm thế nào để bạn mã hóa một máy tính trong JavaScript?

const number1 = parsefloat (nhắc ('nhập số đầu tiên:'));const number2 = parsefloat (nhắc ('nhập số thứ hai:'));để kết quả;// Tuyên bố của biến.// Sử dụng nếu, otherif và từ khóa khác để xác định điều kiện máy tính trong JavaScript.

Làm cách nào để sử dụng JavaScript trong HTML?

Thêm JavaScript vào tài liệu HTML, bạn có thể thêm mã JavaScript vào tài liệu HTML bằng cách sử dụng thẻ HTML chuyên dụng bao quanh mã JavaScript.Thẻ có thể được đặt trong phần HTML của bạn hoặc trong phần, tùy thuộc vào thời điểm bạn muốn JavaScript tải.employing the dedicated HTML tag

programming javascript Calculator HTML Tip calculator javascript Simple calculator code

Bài Viết Liên Quan

Ba yếu tố cơ bản của màu sắc là gì năm 2024

Hướng dẫn simple calculator program using javascript in html - chương trình máy tính đơn giản sử dụng javascript trong html

Các tính năng của máy tính

Các thành phần của máy tính

Cấu trúc thư mục của dự án máy tính

Mã HTML

Mã CSS

Mã JavaScript

Hiểu mã JavaScript

Xóa các giá trị

Hiển thị các giá trị

Đánh giá biểu thức

Phát triển các dự án lập trình tuyệt vời

Làm thế nào để bạn mã hóa một máy tính trong HTML?

Làm thế nào để bạn mã hóa một máy tính trong JavaScript?

Làm cách nào để sử dụng JavaScript trong HTML?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội