Trong hướng dẫn này, chúng tôi sẽ tạo một Máy tính đơn giản bằng Javascript. JavaScript là ngôn ngữ viết kịch bản hoặc lập trình cho phép bạn triển khai những thứ phức tạp trên trang web. Nó được sử dụng rộng rãi trong việc thiết kế một trang web tuyệt đẹp. Nó là một ngôn ngữ lập trình được giải thích có khả năng Hướng đối tượng
Tạo máy tính bằng JavaScript Chúng tôi cũng thực hiện các chức năng hoạt động khác nhau. Và chúng tôi sử dụng từ khóa return để biểu thị trạng thái hiện tại. Ta tạo các hàm như add[], product[],divide[],multiply[]
Một máy tính đơn giản được xây dựng bằng HTML, CSS và JavaScript
Tại thời điểm này, JavaScript là một trong những ngôn ngữ đòi hỏi khắt khe nhất. Bạn sẽ tìm thấy chương trình máy tính này trên một trang web rất nổi tiếng như CodePen, nhưng những chương trình đó sẽ rất nâng cao. Nếu bạn là người mới bắt đầu hoặc đang tìm kiếm mã đơn giản, thì những mã đó sẽ khó hiểu đối với bạn
Quảng cáo. Trong dự án này, chúng ta sẽ học cách tạo một máy tính khoa học đơn giản bằng javascript. Đây là kịch bản cho máy tính khoa học. Mã Javascript
Mục tiêu của tôi là rèn luyện kỹ năng xây dựng máy tính Javascript đơn giản, nhưng để làm cho nó hoạt động đầy đủ và cũng bao gồm tất cả các trường hợp cạnh có thể xảy ra
Và thành thật mà nói, nó khó hơn tôi nghĩ, vì các hướng dẫn tôi tìm thấy, không đáp ứng được mong đợi của tôi. Và một số giải pháp và trường hợp khó khăn tôi phải tự tìm ra
Tôi sẽ chỉ ra tất cả logic và giải thích chi tiết các bước của mình
Dự án. Máy tính Javascript đơn giản
// cách tạo máy tính javascriptXem Bút không có tiêu đề của jsSecrets [@jssecrets] trên CodePen
Tôi quyết định tạo kiểu cho nó trong thiết kế giao diện người dùng Windows 95/98 và nghĩ rằng nó trông khá tuyệt 🙂
giải thích mã
// cách xây dựng máy tính javascriptHTML
// cách viết mã máy tính javascript
0
7
8
9
+
4
5
6
-
1
2
3
*
0
C
=
/
Ở đây tôi đã tạo cointaner chính
7
7
+
+
C
=
7
7
+
+
C
=
7
7
+
+
C
=
7
7
+
+
C
=
7
7
+
+
C
= Tìm hiểu sâu hơn về đánh dấu nút
// cách tạo một máy tính javascript
7
7
+
+
C
= Mỗi nút có thuộc tính
7
7
+
+
C
= Và mọi thuộc tính đều mang tính mô tả; . Vì nên đặt tên mô tả cho biến, lớp, v.v.
CSS
// cách thiết kế một máy tính javascript____10Không có quá nhiều kiểu dáng đặc biệt trong dự án máy tính JS của tôi. Trước hết, một số thiết lập lại CSS cơ bản. Sau đó, tôi đã sử dụng CSS Grid để đặt tất cả các nút. Đối với kiểu giao diện người dùng Windows 95/98, tôi đã sử dụng các kiểu từ thư viện bên ngoài [liên kết ở cuối bài viết]
JS
// cách tạo một máy tính javascript____11Mã JS là trọng tâm chính của dự án, vì vậy tôi sẽ chia nhỏ từng bước về cách tôi xây dựng máy tính
Khái niệm cốt lõi
// cách xây dựng ứng dụng máy tính javascriptHiểu khái niệm cốt lõi là một phần quan trọng. Vì khi nắm được nguyên lý – phương pháp có thể khác
Trong máy tính của chúng tôi có bốn phần để xem xét
1️⃣. để nhận ra một số được nhập đầu tiên
2️⃣. để nhận dạng hoạt động [+, -, * hoặc /]
3️⃣. để nhận ra một số đã nhập thứ hai
4️⃣. kết nối 1, 2 và 3 với "bằng"
🔠. bao gồm các trường hợp cạnh và hành vi không chuyển tiếp thẳng
Đó là nó, vì vậy hãy đi sâu vào nó
Biến
// cách tạo ứng dụng máy tính javascript
7
7
+
+
C
= Chức năng
Chức năng làm sạch màn hình
7
7
+
+
C
= Chức năng trường hợp cạnh
7
7
+
+
C
= Mẹo
Bạn nên viết một hàm nếu mã được sử dụng nhiều lần
KHÔ - Đừng lặp lại chính mình 🙂
Xóa tất cả chức năng
7
7
+
+
C
= Hàm nhập số
7
7
+
+
C
= hàm bằng
7
7
+
+
C
= Hoạt động nhập chức năng
7
7
+
+
C
= Người nghe sự kiện
Ở đây mọi thứ khá đơn giản
Trình xử lý sự kiện cho tất cả các chữ số và nút hoạt động đang được đính kèm thông qua vòng lặp
7
7
+
+
C
=
7
7
+
+
C
= ý tưởng
1️⃣ Để mở rộng thêm máy tính Javascript này. Để thêm dấu thập phân, xóa lùi và các hoạt động nâng cao như chức năng nguồn, v.v.
2️⃣ Để tạo máy tính như trong iPhone. Khi ở chế độ dọc, máy tính tối giản. Khi calc ở chế độ nằm ngang, nó sẽ hiển thị tất cả các chức năng
3️⃣ Nhiều ý tưởng từ máy tính Windows
Sự kết luận
Đó là máy tính Javascript đầu tiên của tôi mà tôi đã xây dựng từ đầu. Tôi đã cố gắng bao gồm tất cả các chức năng cơ bản và các trường hợp cạnh. Và tôi có thể nói rằng tôi hài lòng với thử nghiệm đầu tiên của mình. Hi vọng trong tương lai mình sẽ build bản hoàn chỉnh với nhiều chức năng hơn
Hãy thử lập mô hình máy tính JS này và cho tôi biết nó hoạt động như thế nào trong phần nhận xét
Nếu bạn tìm thấy một số lỗi hoặc một số trường hợp Edge mới, vui lòng cho tôi biết
Ghi chú
Nếu bạn có dự án Javascript nào đó muốn tôi giải thích, vui lòng viết nó trong phần bình luận