HTML có thể tạo máy tính không?

Kiểm tra các khóa học miễn phí của chúng tôi liên quan đến phát triển phần mềm

Các đề xuất thường thấy nhất bao gồm  Máy tính trong JavaScript  và Danh sách việc cần làm. Mặc dù chúng có vẻ dễ dàng, nhưng nó có thể là một nhiệm vụ khá khó khăn khi bạn bắt đầu thực hiện các dự án này. Ở đây, chúng tôi sẽ làm cho nó dễ dàng và hợp lý cũng như sôi động cho bạn.

Mục lục

• Khám phá các khóa học miễn phí về phát triển phần mềm của chúng tôi
• Logic trước mọi thứ khác
  • Máy tính hoạt động như thế nào?
• Các tính năng của Máy tính
• Các thành phần của Máy tính
• Giải quyết dự án. Chìa khóa để xây dựng mã
  • #1 Bắt đầu với HTML
• Khám phá các khóa học Kỹ thuật phần mềm phổ biến của chúng tôi
  • #2 Tạo kiểu với CSS
• Kỹ năng phát triển phần mềm theo yêu cầu
  • #3 Thêm chức năng bằng JavaScript
• Đọc các bài báo phổ biến của chúng tôi liên quan đến Phát triển phần mềm
• Các chức năng máy tính
• Tổng hợp
• HTML, CSS và Javascript được sử dụng để làm gì?
• Là vai trò của một nhà phát triển web một sinh lợi?
• Một số dự án tốt khác để thực hiện, để thực hành phát triển web là gì?

Khám phá các khóa học miễn phí về phát triển phần mềm của chúng tôi

Nguyên tắc cơ bản của điện toán đám mâyKhái niệm cơ bản về JavaScript từ đầuCấu trúc dữ liệu và thuật toánCông nghệ chuỗi khốiPhản ứng dành cho người mới bắt đầuKhái niệm cơ bản về Java cốt lõiJavaNode. js dành cho người mới bắt đầu JavaScript nâng cao

Chúng ta bắt đầu nhé?

Trước đó, hãy xem Chương trình đào tạo phát triển ngăn xếp đầy đủ [JS/MERN] – Đảm bảo việc làm từ upGrad

Logic trước mọi thứ khác

Khi bạn bắt đầu làm việc với một dự án, cho dù đó là máy tính hay danh sách việc cần làm, điều đầu tiên bạn cần xác định là logic.

Máy tính hoạt động như thế nào?

1. Bạn cộng hai hoặc nhiều số [bất kỳ số chữ số nào] bằng cách sử dụng các phím số được cung cấp trên máy tính
2. Sau đó, bạn thực hiện các hàm số học cơ bản, i. e. cộng, trừ, nhân và chia trên các số này
3. Máy tính sẽ có thể tính toán và đưa ra các giải pháp chính xác

Đây là tiền đề của công cụ máy tính của bạn. Vì vậy, bạn cần một bàn phím, một đơn vị hiển thị và các yếu tố chức năng.  

Nút “bằng” sẽ đánh giá câu trả lời trong khi nút “xóa” sẽ đảm bảo loại bỏ tất cả các đầu vào trên màn hình máy tính.  

Hãy xem Trại khởi động Java của upGrad

Hội thảo trực tuyến về công nghệ và phần mềm độc quyền của upGrad dành cho bạn –

Kinh doanh SAAS – Có gì khác biệt?

https. //cdn. nâng cấp. com/blog/mausmi-ambastha. mp4

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

Nếu bạn muốn biết cách tạo một máy tính bằng HTML CSS và javascript, trước tiên bạn nên tìm hiểu các tính năng của nó. Những tính năng này là không thể thiếu để phát triển máy tính đơn giản sử dụng HTML CSS javascript. Hơn nữa, máy tính đơn giản sử dụng HTML CSS javascript cố gắng kết hợp một số tính năng thiết yếu của ba công nghệ này. Đây là danh sách các tính năng dành cho máy tính HTML CSS javascript .

• Nó có thể thực hiện các phép tính số học cơ bản như cộng, trừ, nhân và chia
• Nó có thể thực hiện các hoạt động thập phân
• JavaScript HTML CSS máy tính hiển thị Vô cực nếu bạn chia bất kỳ số nào cho 0.
• Máy tính trong HTML CSS javascript sẽ không hiển thị bất kỳ kết quả nào khi có biểu thức không hợp lệ. Chẳng hạn, 6++8 sẽ không hiển thị bất kỳ kết quả nào.
• Tính năng xóa màn hình sẽ xóa màn hình hiển thị bất cứ khi nào bạn muốn

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

Nếu bạn muốn tránh nhầm lẫn về cách tạo một máy tính bằng HTML CSS và javascript, hãy xem qua danh sách các thành phần bên dưới.

 Toán tử toán học.

• Cộng [+]
• Phép trừ [-]
• Phép nhân [*]
• Phân công [/]

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

Màn hình hiển thị. Thành phần này của máy tính trong HTML CSS javascript hiển thị biểu thức toán học và kết quả.

Xóa nút màn hình. Nó xóa tất cả các giá trị toán học

Nút tính toán [=]. Nó đánh giá biểu thức toán học và đưa ra kết quả

Tìm hiểu Các khóa học phát triển phần mềm trực tuyến từ các trường Đại học hàng đầu thế giới. Kiếm các Chương trình PG Điều hành, Chương trình Chứng chỉ Nâng cao hoặc Chương trình Thạc sĩ để nhanh chóng theo dõi sự nghiệp của bạn

Giải quyết dự án. Chìa khóa để xây dựng mã

Thay vì viết mã ngay lập tức, bạn cần học cách giải quyết một dự án mới. Bạn có hai thứ đã sẵn sàng cho bạn. logic và hiểu biết cơ bản về các công nghệ front-end, tôi. e. JavaScript, HTML và CSS.  

Trước khi bắt đầu xây dựng máy tính của mình bằng JavaScript, bạn cần những điều sau.

1. Môi trường phát triển tích hợp sẽ giúp bạn xây dựng dự án của mình bằng cả ba công nghệ.  
2. Máy chủ cục bộ sẽ giúp bạn kiểm tra mã của mình và loại bỏ lỗi. Do đó, bạn sẽ có thể khởi chạy ứng dụng nhanh hơn và linh hoạt hơn.  

Học viên của chúng tôi cũng đọc . Khóa học java miễn phí.

#1 Bắt đầu với HTML

Bước đầu tiên là làm quen với HTML một chút để bạn có thể xây dựng phác thảo cho máy tính của mình.  

Có mười nút trên máy tính, từ 0 đến 9. HTML chịu trách nhiệm xây dựng các khóa cho mỗi chữ số

Ngoài điều này, bạn sẽ cần sử dụng HTML để tạo các khóa riêng biệt cho các hàm số học khác nhau khi xây dựng máy tính bằng JavaScript.

Bạn có thể sử dụng HTML để thêm nút để hiển thị các chữ số đã nhập hoặc kết quả cũng như để xóa màn hình

Đơn vị trực quan của máy tính của bạn hoàn toàn phụ thuộc vào HTML và CSS, trong đó các nút và ID của chúng cần được tạo bằng HTML. Để tạo ID và nút cũng như kiểu dáng sau này, mã javascript HTML CSS của máy tính rất hữu ích.

Mã javascript CSS HTML máy tính sau đây giúp bạn bắt đầu với HTML. giúp bạn bắt đầu với HTML. giúp bạn bắt đầu với HTML. giúp bạn bắt đầu với HTML. giúp bạn bắt đầu với HTML. giúp bạn bắt đầu với HTML. giúp bạn bắt đầu với HTML. giúp bạn bắt đầu với HTML. giúp bạn bắt đầu với HTML. giúp bạn bắt đầu với HTML. giúp bạn bắt đầu với HTML. giúp bạn bắt đầu với HTML. giúp bạn bắt đầu với HTML. giúp bạn bắt đầu với HTML. giúp bạn bắt đầu với HTML. giúp bạn bắt đầu với HTML. giúp bạn bắt đầu với HTML. giúp bạn bắt đầu với HTML. giúp bạn bắt đầu với HTML. giúp bạn bắt đầu với HTML. giúp bạn bắt đầu với HTML. giúp bạn bắt đầu với HTML. giúp bạn bắt đầu với HTML. giúp bạn bắt đầu với HTML. giúp bạn bắt đầu với HTML. giúp bạn bắt đầu với HTML. giúp bạn bắt đầu với HTML. giúp bạn bắt đầu với HTML. giúp bạn bắt đầu với HTML. giúp bạn bắt đầu với HTML. giúp bạn bắt đầu với HTML. giúp bạn bắt đầu với HTML. giúp bạn bắt đầu với HTML. giúp bạn bắt đầu với HTML. giúp bạn bắt đầu với HTML. giúp bạn bắt đầu với HTML. giúp bạn bắt đầu với HTML. giúp bạn bắt đầu với HTML. giúp bạn bắt đầu với HTML. giúp bạn bắt đầu với HTML. giúp bạn bắt đầu với HTML. giúp bạn bắt đầu với HTML. giúp bạn bắt đầu với HTML. giúp bạn bắt đầu với HTML.

 Mã soạn sẵn

Máy tính

Mã thực tế để tạo phác thảo máy tính

[

Học. 20 dự án Javascript hàng đầu trên Github dành cho người mới bắt đầu

Khám phá các khóa học Kỹ thuật phần mềm phổ biến của chúng tôi

Thạc sĩ Khoa học về Khoa học Máy tính từ LJMU & IIITBChương trình Chứng chỉ An ninh mạng CTME của Caltech Phát triển Full Stack Chương trình BootcampPG trong BlockchainChương trình PG cấp cao trong Phát triển Full StackXem tất cả các khóa học của chúng tôi bên dướiKhóa học kỹ thuật phần mềm

#2 Tạo kiểu với CSS

Sau khi bạn đã xác định cấu trúc cho máy tính, bạn sẽ sử dụng các phần tử CSS nội tuyến để tạo kiểu cho máy tính của mình và làm cho máy tính hấp dẫn về mặt trực quan cũng như dễ sử dụng.  

While inline CSS is excellent when it comes to designing and styling your app’s appearance, it may not be SEO friendly. Apart from this, you can also use external CSS elements by tagging them to the same root directory. You can even use internal or embedded CSS elements that are present within the tags within the head section.

Điều đầu tiên cần làm khi phát triển một máy tính sử dụng HTML CSS và javascript là đảm bảo máy tính không quá rộng. Sau khi bạn thêm các kiểu vào đầu ra và các nút của máy tính sử dụng HTML CSS và javascript, điều này có thể xảy ra.

Sau đây, chúng tôi sẽ hướng dẫn bạn mã mà bạn có thể sử dụng để tạo kiểu cho máy tính của mình.  

[Bạn có thể tạo các biến thể cho mã này nếu muốn. ]

/* các kiểu phổ biến */

* {

đệm. 0;

lề. 0;

}

cơ thể người {

bề rộng. 100vw;

chiều cao. 100vh;

tràn ra. ẩn giấu;

trưng bày. uốn cong;

biện minh cho nội dung. trung tâm;

sắp xếp các mục. trung tâm;

màu nền. #222831;

họ phông chữ. sans serif;

}

/* kết thúc các kiểu phổ biến */

/* máy tính */

máy tính {

bề rộng. 300px;

đệm-đáy. 15px;

bán kính đường viền. 7px;

màu nền. #000;

bóng hộp. 5px 8px 8px -2px rgba[0, 0, 0, 0. 61];

}

/* kết thúc kiểu máy tính */

/* trưng bày */

trưng bày {

bề rộng. 100%;

chiều cao. 80px;

biên giới. không ai;

kích thước hộp. hộp viền;

đệm. 10px;

cỡ chữ. 2rem;

màu nền. #00ff44;

màu. #000;

căn chỉnh văn bản. đúng;

bán kính đường viền trên cùng bên trái. 7px;

bán kính đường viền trên cùng bên phải. 7px;

}

/* kết thúc kiểu hiển thị */

/* chèo thuyền */

chèo thuyền {

trưng bày. uốn cong;

biện minh cho nội dung. không gian giữa;

}

/* kết thúc kiểu hàng */

/* cái nút */

cái nút {

bề rộng. 50px;

chiều cao. 50px;

bán kính đường viền. 50%;

biên giới. không ai;

đề cương. không ai;

cỡ chữ. 1. 5rem;

màu nền. #222;

màu. #ffff;

lề. 10px;

}

cái nút. bay lượn {

con trỏ. con trỏ;

}

/* kết thúc kiểu nút */

/* nhà điều hành */

nhà điều hành {

màu nền. #00ff44;

màu. #000;

}

/* kết thúc kiểu toán tử */

Kỹ năng phát triển phần mềm theo yêu cầu

Khóa học JavaScript Khóa học Java cốt lõi Khóa học về cấu trúc dữ liệuNode. Khóa học js Khóa học SQL Khóa học phát triển full stack Khóa học NFT Khóa học DevOps Khóa học dữ liệu lớnReact. Khóa học js Khóa học bảo mật mạng Khóa học điện toán đám mây Khóa học thiết kế cơ sở dữ liệu Khóa học Python Khóa học tiền điện tử

Làm cho máy tính này vui hơn

Bây giờ, bạn đã hiểu phần lớn cách tạo máy tính bằng HTML CSS và javascript.  Vì hiện tại chúng tôi có một kiểu cơ sở để làm việc nên việc thực hiện một số thay đổi nhỏ nhất định và cập nhật hoàn toàn giao diện của máy tính này sẽ nhanh chóng và dễ dàng.

Máy tính này sử dụng HTML CSS javascript có thể trở nên thú vị hơn bằng cách biến các nút thành hình tròn thay vì hình chữ nhật. Nếu bạn hiểu rõ cách tạo máy tính bằng HTML CSS và javascript, bạn có thể tiếp tục làm cho máy tính trở nên thú vị hơn. Để làm được điều đó, bạn cần thay đổi một số dòng mã CSS.

Đầu tiên, hãy tạo các nút thành hình tròn. Đối với điều đó, bạn phải chắc chắn rằng chúng có chiều rộng và chiều cao giống hệt nhau. Không thể sử dụng phần đệm vì mỗi ký tự và số có một chút khác biệt về kích thước;

Vì vậy, bạn cần xóa phần đệm và thêm chiều cao [kích thước khối] và chiều rộng [kích thước nội tuyến]. Tiếp theo, thêm bán kính đường viền là 60px trong đoạn mã sau của máy tính bằng HTML CSS javascript.

máy tính__phím {

lai lịch. hsl[210, 35%, 85%];

biên giới. không ai;

cỡ chữ. 2rem;

/* Phong cách CSS vui nhộn. */

kích thước nội tuyến. 80px;

kích thước khối. 80px;

bán kính đường viền. 60px;

}

 Bây giờ, điều cần thiết là thêm một số khoảng trắng gần các nút. Ngoài ra, trong máy tính có HTML CSS và javascript này, nút bằng phải được cố định. Nó phải kéo dài bốn hàng hiện không khả thi vì chiều cao [còn được gọi là kích thước khối] được đặt thành 80px. Để khắc phục điều đó, bạn có thể thay đổi chiều cao của nó thành tự động.

 Với hai thay đổi này, mã CSS sẽ xuất hiện bên dưới.

máy tính__phím {

đệm. 0. 5rem;

trưng bày. lưới;

lưới-mẫu-cột. lặp lại [4, 1fr];

khoảng cách lưới. 1px;

lai lịch. hsl[207, 19%, 61%];

}

máy tính__phím {

lai lịch. hsl[210, 35%, 85%];

biên giới. không ai;

cỡ chữ. 2rem;

/* Phong cách vui nhộn của CSS. */

kích thước nội tuyến. 80px;

kích thước khối. 80px;

bán kính đường viền. 60px;

lề. 0. 25rem;

}

Calculator__key–nhập {

lưới-cột. 4/5;

hàng lưới. 2/nhịp 4;

lai lịch. hsl[350, 100%, 70%];

chiều cao. Tự động;

}

Đầu ra của đoạn mã trên của máy tính có HTML CSS và javascript không tập trung vào thiết kế. Nhưng phải sửa. Hơn nữa, đầu ra và nền của các nút có màu khác nhau. Đoạn mã sau thực hiện những thay đổi đó.

 Hãy thực hiện cả hai thay đổi đó.

máy tính {

màu. hsl[202, 11%, 29%];

}

máy tính__đầu ra {

lai lịch. hsl[255, 100%, 100%];

đệm-khối-bắt đầu. 2rem;

đệm-nội tuyến-kết thúc. 1. 25rem;

}

máy tính__phím {

lai lịch. hsl[255, 100%, 100%];

}

#3 Thêm chức năng bằng JavaScript

Bây giờ chúng ta đã thảo luận chi tiết về các khía cạnh hữu hình của việc xây dựng máy tính sử dụng JavaScript. Hãy thực hiện một số kịch bản để giúp làm cho máy tính hoạt động và thực hiện các tác vụ tính toán. Chúng tôi sẽ hiểu một số bước liên quan đến việc xây dựng mã JS, điều này sẽ giúp bạn phát triển mã nhanh hơn.

• Bạn sẽ cần gọi các thẻ HTML mà bạn đã tạo cho các chức năng riêng lẻ bằng JavaScript. Bạn sẽ sử dụng các bộ chọn để gọi từng đầu vào này và lưu trữ chúng trong một biến. Đối với mỗi chức năng, bạn sẽ cần một biến. Chẳng hạn, có một biến riêng để hiển thị, các chữ số, hàm xóa cũng như hàm bằng. Có thể sử dụng hàm getElementbyID[] trong trường hợp này
• Giả sử bạn muốn thực hiện phép tính đơn giản 20+30, trước tiên bạn sẽ gọi 20 bằng phương pháp được đề cập ở trên. Trước khi gọi 30 và hàm số học, bạn sẽ cần lưu trữ 20 đã gọi trước đó ở đâu đó. Mã của bạn phải tạo khoảng trống cho việc lưu trữ tạm thời các số để dễ dàng tính toán. Một mảng trống sẽ giữ số dưới dạng một chuỗi. Khi bạn đã thêm số khác và hàm số học, sử dụng eval[], bạn có thể đánh giá các số và nhận câu trả lời.  
• Khi bạn bấm vào các nút trong máy tính, bạn muốn một số kết quả, chúng được hiển thị hoặc chúng được đánh giá. Với mục đích này, bạn nên thêm trình xử lý sự kiện vào mã của mình. Bằng cách này, các nút sẽ lắng nghe tiếng bấm. Khi bạn thêm các chức năng cho trình lắng nghe sự kiện, chúng sẽ tự động thực hiện tác vụ trên âm thanh nhấp chuột
• Đơn vị hiển thị sẽ trả về giá trị của nút mà bạn nhấp vào. Bạn có thể sử dụng sự kiện. đối tượng đích, vì nó sẽ trả về giá trị của phần tử mà sự kiện đã xảy ra. Chẳng hạn, bạn muốn số “1” hiển thị ngay khi bạn nhấp vào nó. Đối với điều này, bạn sẽ cần lưu trữ số ở dạng biến. Sử dụng hàm “if”, bạn sẽ so sánh biến hiện có để xác định xem nó có bằng 0 hay không. Trong trường hợp nó là số 0, thì bạn sẽ nối nó vào một chuỗi trống để không có số nào bắt đầu bằng số 0. Cuối cùng, bạn sẽ thêm nội dung của khóa “1” vào biến hiển thị. Kết quả là ngay khi kích hoạt phím số, bạn sẽ thấy nội dung trong hộp hiển thị
• Cuối cùng, bạn cần tạo hàm giúp áp dụng các phép toán cho các số được hiển thị. Đảm bảo máy tính trong JavaScript có thể thực hiện các phép tính một cách dễ dàng. Để kích hoạt chức năng này, bạn có thể sử dụng kết hợp các cú pháp và phương thức. Chúng tôi đã chỉ định mã cho các thành phần JavaScript bên dưới để bạn xem xét.

// chọn tất cả các nút

nút const = tài liệu. truy vấnSelectorAll['nút'];

// select the element

const hiển thị = tài liệu. querySelector[‘. trưng bày'];

// thêm eventListener vào mỗi nút

nút. forEach[function[button] {

cái nút. addEventListener['click', tính toán];

}];

// tính hàm

chức năng tính toán [sự kiện] {

// giá trị các nút được nhấp hiện tại

const clickedButtonValue = sự kiện. Mục tiêu. giá trị;

nếu [clickedButtonValue === '='] {

// kiểm tra nếu màn hình không rỗng thì chỉ tính toán

nếu [hiển thị. giá trị. ==”] {

// tính toán và đưa đáp số ra màn hình

trưng bày. giá trị = eval[hiển thị. giá trị];

}

} khác nếu [clickedButtonValue === 'C'] {

// xóa mọi thứ trên màn hình

trưng bày. giá trị = ”;

} khác {

// nếu không thì nối nó vào màn hình

trưng bày. giá trị += clickButtonValue;

}

}

Phải đọc. Giải thích về kiến ​​trúc & thành phần Java

Đọc các bài báo phổ biến của chúng tôi liên quan đến Phát triển phần mềm

Làm cách nào để triển khai trừu tượng hóa dữ liệu trong Java? Lớp bên trong trong Java là gì? Mã định danh Java. Định nghĩa, cú pháp và ví dụHiểu về đóng gói trong OOPS với các ví dụGiải thích về đối số dòng lệnh trong C10 tính năng & đặc điểm hàng đầu của điện toán đám mây năm 2022Tính đa hình trong Java. Các khái niệm, loại, đặc điểm & ví dụ Gói trong Java & Cách sử dụng chúng? Hướng dẫn Git cho người mới bắt đầu. Học Git từ đầu

Các chức năng máy tính

Điều quan trọng tiếp theo là xác định các thao tác khác nhau mà máy tính sẽ thực hiện. Đầu tiên là hàm clear[] xóa các giá trị của các biến khác nhau. Một phương pháp khác là delete[] để xóa một số duy nhất trong máy tính bằng cách sử dụng javascript và HTML.

Bạn có thể tạo một chức năng quyết định điều gì sẽ xảy ra bất cứ khi nào người dùng nhấp vào một số để thêm vào màn hình. Hàm này là appendNumber[số]. Chức năng selectOperation[thao tác] giúp kiểm soát điều gì sẽ xảy ra bất cứ khi nào người dùng nhấp vào bất kỳ nút thao tác nào. Hàm tính toán [] chấp nhận các giá trị trong máy tính của bạn và hiển thị kết quả. Hàm updateDisplay[] giúp bạn cập nhật các giá trị trong đầu ra

Sau khi xác định tất cả các thao tác quan trọng, bạn có thể cân nhắc sử dụng các thuộc tính khác nhau mà máy tính sử dụng javascript và HTML yêu cầu để lưu trữ. Bạn phải xác định toán hạng trước đó được nhập bởi người dùng, toán hạng họ đang làm việc hiện tại và thao tác họ đã chọn.

Tổng hợp

Cho dù bạn đang xây dựng máy tính bằng JavaScript hay làm việc trên một dự án phức tạp hơn, thì ý tưởng là chia nhỏ nội dung theo cách logic. . Điều này sẽ giúp bạn rút ra cú pháp chính xác và sẽ dẫn đến một ứng dụng web mượt mà. Thay vì bắt đầu viết mã trực tiếp, hãy cố gắng hiểu mục đích thực sự của công nghệ bạn đang sử dụng là gì và nó sẽ dẫn bạn đến mã.

Nếu bạn muốn tìm hiểu thêm về Java, phát triển phần mềm toàn ngăn xếp, hãy xem Chương trình PG Điều hành của upGrad & IIIT-B trong Phát triển phần mềm – Chuyên môn về Phát triển toàn ngăn xếp được thiết kế cho các chuyên gia đang làm việc và cung cấp hơn 500 giờ đào tạo nghiêm ngặt