Jak stworzyć kalkulator z HTML

Autor: John Stephens
Data Utworzenia: 21 Styczeń 2021
Data Aktualizacji: 14 Móc 2024
Anonim
Jak zrobić kalkulator w JavaScript | Poradnik do JavaScript dla początkujących
Wideo: Jak zrobić kalkulator w JavaScript | Poradnik do JavaScript dla początkujących

Zawartość

W tym artykule: Zrozumienie kodu Napisz podstawowy kod kalkulatora Utwórz kalkulator Użyj kalkulatora 11 Referencje

Istnieje wiele sposobów wykonywania obliczeń na komputerze za pomocą wbudowanego kalkulatora, ale możesz także tworzyć własne, używając tylko kodu HTML. Aby to zrobić, musisz nauczyć się podstaw HTML, zanim skopiujesz niezbędny kod do pliku e zapisanego w pliku extension.html. Następnie wystarczy otworzyć plik w ulubionej przeglądarce, aby uzyskać dostęp do kalkulatora. Ta technika pozwala wykonywać obliczenia bezpośrednio w przeglądarce, ucząc się podstaw sztuki programowania komputerowego.


etapy

Część 1 Zrozumienie kodu



  1. Zrozum, jak działa kod. Kod, którego użyjesz do utworzenia kalkulatora, opiera się na małych fragmentach kodu, które współpracują ze sobą w celu zdefiniowania różnych elementów dokumentu. Możesz dowiedzieć się więcej o HTML, klikając ten link lub przeczytać, co robi każda linia w kodzie, którego zamierzasz użyć w kalkulatorze.
    • html: ten fragment kodu wskazuje reszcie dokumentu, jakiego języka użyto. Używanych jest wiele różnych języków programowania, a znacznik wskazuje pozostałej części dokumentu, że tym razem używasz HTML.
    • głowa : oznacza to, że następujące informacje to dane zwane także „metadanymi”. Znacznik jest zwykle używany do definiowania stylistycznych elementów dokumentu, takich jak tytuł, nagłówki itp. To jest jak parasol, pod którym zdefiniowana jest reszta kodu.
    • tytuł : To tytuł, który nadasz dokumentowi. Ten znacznik służy do wyświetlania tytułu dokumentu po otwarciu w przeglądarce.
    • body bgcolor = "#" : Ustawia kolor tła dla dokumentu. Liczba pojawiająca się po ostrzu odpowiada z góry ustalonemu kolorowi.
    • = '' : Słowo w cudzysłowie wskazuje kolor e na dokumencie.
    • nazwa formularza = „” : Ten atrybut wskazuje nazwę formularza, który będzie używany w strukturze tego, co nastąpi później, aby JavaScript mógł wiedzieć, który formularz jest czytany. Na przykład nazwa formularza, której użyjemy, to „kalkulator”, który utworzy specyficzną strukturę dokumentu.
    • typ wejścia = „” : tutaj odbędzie się akcja. Atrybut „typ danych wejściowych” informuje dokument o typie wartości e w pozostałych nawiasach. Może to być na przykład e, hasło, przycisk (tak jak będzie w przypadku naszego kalkulatora) i tak dalej.
    • value = "" : Ten atrybut informuje dokument, co będzie zawierać atrybut „typ danych wejściowych”. W przypadku kalkulatora wyświetlane są liczby od 1 do 9 oraz znaki arytmetyczne (+, -, *, /, =).
    • onclick = "" : Ten fragment kodu opisuje zdarzenie, które mówi dokumentowi, że coś musi się zdarzyć po aktywowaniu przycisku. W przypadku kalkulatora chcesz wyświetlić liczbę odpowiadającą przyciskowi naciśniętemu przez użytkownika. Na przykład, jeśli przycisk 6 jest włączony, chcesz umieścić wartość document.calculator.in.value + = 6 między cudzysłowami.
    • br : jest to znacznik wskazujący podział linii, cała pozostała część kodu, który będzie następny, pojawi się poniżej linii.
    • / form, / body i / html Te zamykające znaczniki informują przeglądarkę, że otwarte wcześniej znaczniki są teraz zakończone i zamknięte.

Część 2 Napisz podstawowy kod kalkulatora

Skopiuj poniższy kod. Wybierz e poniżej, trzymając kursor wciśnięty z lewego górnego rogu pola i przeciągając go do prawego dolnego rogu, aby cały e był niebieski. Następnie naciśnij „Command + C” na Macu lub „Ctrl + C” na PC, aby skopiować e.


Kalkulator HTML

Rezultatem jest

Część 3 Tworzenie kalkulatora




  1. Otwórz plik e na komputerze. Istnieje wiele programów, z których można korzystać, ale ze względu na jakość zaleca się korzystanie z Edycji lub Notatnika.
    • Na komputerze Mac kliknij po prostu lupę w prawym górnym rogu ekranu, aby otworzyć Spotlight. Po otwarciu wpisz Edycja i kliknij program, który powinien być zaznaczony na niebiesko.
    • Na komputerze kliknij przycisk początek u dołu po lewej. Na pasku wyszukiwania wpisz Notepad i kliknij aplikację, która powinna pojawić się w wynikach.


  2. Wklej kod HTML do dokumentu.
    • Na komputerze Mac kliknij treść dokumentu i naciśnij „Command + V”, Następnie kliknij format u góry ekranu i dalej Zobacz w prosty e po wklejeniu kodu.
    • Na komputerze kliknij treść dokumentu i wklej kod, naciskając „Ctrl + V”.


  3. Zapisz plik. Po prostu kliknij przycisk plik w lewym górnym rogu okna, a następnie dalej Zapisz jako ... na PC lub Zapisz ... na komputerze Mac w wyświetlonym menu rozwijanym.


  4. Dodaj rozszerzenie HTML. Po kliknięciu w menu wpisz nazwę pliku, a następnie „.html” rekord, Na przykład, jeśli chcesz nazwać ten plik „moim pierwszym kalkulatorem”, możesz nadać mu nazwę: „MyPremierCalculette.html”.

Część 4 Korzystanie z kalkulatora



  1. Znajdź plik HTML. Po prostu wpisz nazwę pliku w Spotlight na Macu lub w pasku wyszukiwania menu Start systemu Windows. Nie trzeba wpisywać rozszerzenia pliku.


  2. Kliknij, aby go otworzyć. Twoja domyślna przeglądarka powinna otworzyć kalkulator w nowej karcie.


  3. Kliknij przyciski, aby z niego skorzystać. Wyniki twoich obliczeń powinny pojawić się na pasku przeznaczonym do tego celu.

Jak narysować wykres

Marcus Baldwin

Móc 2024

Inne ekcje Wykre to diagram (jako eria jednego lub więcej punktów, linii, odcinków linii, krzywych lub obzarów), który przedtawia zmienność zmiennej w porównaniu z jedną lub w...

Jak zostać żoną trofeum

Marcus Baldwin

Móc 2024

Inne ekcje Termin „żona-trofeum” jet częto używany w obraźliwym znaczeniu do opiania każdej zamężnej kobiety, która jet młoda, atrakcyjna, ma koztowny gut i która jet mężem bogatego (i prawd...

Nasze Publikacje