Hướng dẫn design a simple webpage for implementing a simple calculator using html, css javascript - thiết kế một trang web đơn giản để triển khai một máy tính đơn giản bằng html, css javascript
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ờ. Show
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ínhTrong 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:
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ínhMá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.
Cấu trúc thư mục của dự án máy tínhTạ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.
Mã HTMLMở 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:
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. 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: 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ở 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 display values // This function evaluates the expression and returns result 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. 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. 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. 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. 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. |