Mit HTML einen Taschenrechner erstellen

PDF herunterladenPDF herunterladen

Es gibt eine Reihe Möglichkeiten, wie du auf einem Desktop-Computer mit einem integrierten Taschenrechner Berechnungen erstellen kannst, aber eine weitere Möglichkeit ist, mit einfachem HTML-Code selbst einen zu erstellen. Um mit HTML einen Taschenrechner zu erstellen, lerne ein paar Grundlagen von HTML, kopiere den erforderlichen Code in einen Texteditor und speichere ihn mit einer HTML-Dateiendung. Du kannst deinen Taschenrechner dann nutzen, indem du das HTML-Dokument in einem Browser öffnest. Wenn du all dies machst, kannst du nicht nur in einem Browser Berechnungen ausführen, du kannst auch die Grundlagen in der Kunst des Programmierens erlernen!

Teil 1
Teil 1 von 4:

Deinen Code verstehen

PDF herunterladen
  1. How.com.vn Deutsch: Step 1 Lerne, was die einzelnen HTML-Funktionen machen.
    Der Code, mit dem du deinen Taschenrechner erstellen wirst, besteht aus vielen Teilen mit einer Syntax, die zusammen arbeiten, um verschiedene Elemente eines Dokuments zu definieren. Klicke hier für eine Anleitung, wie du dich damit vertraut machst, oder lies weiter, um zu erfahren, was die einzelnen Textzeilen im Code machen, mit denen du deinen Taschenrechner erstellst.
    • html: Dieser Teil der Syntax gibt dem Rest des Dokuments an, welche Sprache im Code verwendet wird. Beim Programmieren werden verschiedene Sprachen eingesetzt und <html> gibt dem Rest des Dokuments an, dass es in - du hast es bestimmt schon erraten! - html ist.[1]
    • head: Dies gibt an, dass alles darunter Daten sind, auch als "Metadaten" bezeichnet. Die Angabe <head> wird normalerweise zur Definition von stilistischen Elementen eines Dokuments wie Titel, Überschriften und so weiter verwendet. Stelle es dir vor wie einen Schirm, unter dem der Rest des Codes definiert wird.[2]
    • title: Hier gibst du den Titel deines Dokuments an. Mit diesem Attribut wird definiert, wie der Titel des Dokuments lautet, wenn es im Browser geöffnet wird.
    • body bgcolor= "#": Hiermit wird die Hintergrundfarbe festgelegt. Die Zahl zwischen diesen beiden Anführungszeichen, die nach dem Rautezeichen (#) steht, entspricht einer vorbestimmten Farbe.
    • text= "": Das Wort zwischen diesen beiden Anführungszeichen legt die Textfarbe im Dokument fest.
    • form name="": Hiermit wird der Name eines Formulars angegeben, mit dem die Struktur dessen aufgebaut wird, was danach kommt. Dies ist abhängig davon, was der Name des Formulars in Javascript bedeutet. Wir werden z. B. den Formularnamen "calculator" verwenden, was in dem Dokument eine bestimmte Struktur erzeugt.[3]
    • input type="": Hier passiert die Handlung. Das Attribut "input type" gibt an, welche Art Text die Werte im Rest der Klammern sind. Sie könnten z. B. ein Text, ein Passwort, ein Button (wie beim Taschenrechner) und so weiter sein.[4]
    • value="": Hiermit wird angegeben, was im oben angegebenen input type enthalten ist. Bei einem Taschenrechner sind dies unsere Zahlen (1 bis 9) und Operationen (+, -, *, /, =).[5]
    • onClick="": Diese Syntax beschreibt ein Ereignis, welches dem Dokument mitteilt, dass etwas passieren soll, wenn auf den Button geklickt wird. Bei einem Taschenrechner wollen wir, dass der Text, der auf jedem Button angezeigt wird, als solcher zu verstehen ist. Für den Button "6" setzen wir also document.calculator.ans.value+='6' zwischen die Anführungszeichen.[6]
    • br: Dieser Tag löst einen Zeilenumbruch aus, so dass alles, was danach kommt, jeweils eine Zeile darunter erscheint.[7]
    • /form, /body und /html: Hiermit werden die entsprechenden Angaben von vorhin geschlossen bzw. beendet.[8]
    Werbeanzeige
Teil 2
Teil 2 von 4:

Ein einfacher HTML-Code für einen Taschenrechner

PDF herunterladen

Kopiere den Code unten. Markiere den Text im Kästchen unten, indem du oben links auf den Text klickst, die Maustaste gedrückt hältst und deine Maus nach rechts unten im Kästchen ziehst, so dass der gesamte Text blau ist. Drücke dann auf einem Mac auf "Command + C" oder auf einem PC auf "Strg + C", um den Code in die Zwischenablage zu kopieren.

<html><head><title>HTML-Taschenrechner </title></head><body bgcolor= "# 000000" text= "gold"><form name="calculator" ><input type="button" value="1" onClick="document.calculator.ans.value+='1'"><input type="button" value="2" onClick="document.calculator.ans.value+='2'"><input type="button" value="3" onClick="document.calculator.ans.value+='3'"><input type="button" value="+" onClick="document.calculator.ans.value+='+'"><input type="button" value="4" onClick="document.calculator.ans.value+='4'"><input type="button" value="5" onClick="document.calculator.ans.value+='5'"><input type="button" value="6" onClick="document.calculator.ans.value+='6'"><input type="button" value="-" onClick="document.calculator.ans.value+='-'"><input type="button" value="7" onClick="document.calculator.ans.value+='7'"><input type="button" value="8" onClick="document.calculator.ans.value+='8'"><input type="button" value="9" onClick="document.calculator.ans.value+='9'"><input type="button" value="*" onClick="document.calculator.ans.value+='*'"><input type="button" value="/" onClick="document.calculator.ans.value+='/'"><input type="button" value="0" onClick="document.calculator.ans.value+='0'"><input type="reset" value="Reset"><input type="button" value="=" onClick="document.calculator.ans.value=eval(document.calculator.ans.value)">Solution is <input type="textfield" name="ans" value=""></form></body></html>
Teil 3
Teil 3 von 4:

Deinen Taschenrechner erstellen

PDF herunterladen
  1. How.com.vn Deutsch: Step 1 Öffne einen Texteditor auf deinem Computer.
    Es gibt eine Reihe Programme, die du nutzen kannst, aber aus Gründen der Bequemlichkeit und Qualität empfehlen wir die Verwendung von TextEdit oder Notepad.[9][10]
    • Klicke auf einem Mac oben rechts auf die Lupe, um Spotlight zu öffnen. Tippe in Spotlight TextEdit ein und klicke auf das Programm TextEdit, welches jetzt blau markiert sein sollte.
    • Gehe auf einem PC unten links ins Startmenü. Tippe ins Suchfeld Notepad ein und klicke auf das Programm Notepad, welches rechts daneben in der Liste mit den Ergebnissen angezeigt wird.
  2. How.com.vn Deutsch: Step 2 Füge den HTML-Code für einen Taschenrechner in das Dokument ein.
    • Klicke auf einem Mac in das Dokument und drücke auf "Command + V". Du musst dann nach dem Einfügen des Codes oben auf dem Bildschirm auf "Formatieren" klicken und "Reiner Text" auswählen.[11]
    • Klicke auf einem PC in das Dokument und drücke auf "Strg + V".
  3. How.com.vn Deutsch: Step 3 Speichere die Datei.
    Klicke dafür oben links auf "Datei" und wähle aus dem Menü "Speichern als..." aus.
  4. How.com.vn Deutsch: Step 4 Füge dem Namen der Datei eine HTML-Endung hinzu.
    Tippe im Menü "Speichern als..." den Namen der Datei gefolgt von ".html" ein und klicke dann auf "Speichern". Wenn du die Datei z. B. Mein erster Taschenrechner benennen möchtest, würdest du die Datei als "MeinErsterTaschenrechner.html" speichern.
    Werbeanzeige
Teil 4
Teil 4 von 4:

Deinen Taschenrechner verwenden

PDF herunterladen
  1. How.com.vn Deutsch: Step 1 Finde die Datei, die du gerade erstellt hast.
    Tippe dafür (wie im vorigen Schritt beschrieben) den Namen der Datei in Spotlight oder im Suchfeld des Startmenüs ein. Du musst die Dateiendung "html" nicht eingeben.
  2. How.com.vn Deutsch: Step 2 Klicke zum Öffnen auf die Datei.
    Dein Standard-Browser öffnet den Taschenrechner als neue Webseite.
  3. How.com.vn Deutsch: Step 3 Klicke auf die Buttons des Taschenrechners, um ihn zu benutzen.
    Die Ergebnisse deiner Gleichungen werden im Ergebnisfeld angezeigt.
    Werbeanzeige

Tipps

  • Du kannst diesen Taschenrechner in eine Webseite einbetten, wenn du möchtest.
  • Du kannst auch mit HTML das Aussehen des Taschenrechners anpassen.
Werbeanzeige

Über dieses How.com.vn

How.com.vn Deutsch: How.com.vn Staff
unter Mitarbeit von :
How.com.vn's Autoren
Dieser Artikel wurde durch speziell ausgebildete Mitglieder unseres Mitarbeiter-Teams bearbeitet, was Vollständigkeit und Genauigkeit garantiert.

How.com.vn's Kontroll-Management Team prüft die bearbeiteten Inhalte sorgfältig, um zu garantieren, dass jeder Einzelne den hohen Qualitätsansprüchen entspricht. Dieser Artikel wurde 19.932 Mal aufgerufen.
Kategorien: Computer
Diese Seite wurde bisher 19.932 mal abgerufen.

War dieser Artikel hilfreich?

⚠️ Disclaimer:

Content from Wiki How Deutsch language website. Text is available under the Creative Commons Attribution-Share Alike License; additional terms may apply.
Wiki How does not encourage the violation of any laws, and cannot be responsible for any violations of such laws, should you link to this domain, or use, reproduce, or republish the information contained herein.

Notices:
  • - A few of these subjects are frequently censored by educational, governmental, corporate, parental and other filtering schemes.
  • - Some articles may contain names, images, artworks or descriptions of events that some cultures restrict access to
  • - Please note: Wiki How does not give you opinion about the law, or advice about medical. If you need specific advice (for example, medical, legal, financial or risk management), please seek a professional who is licensed or knowledgeable in that area.
  • - Readers should not judge the importance of topics based on their coverage on Wiki How, nor think a topic is important just because it is the subject of a Wiki article.

Werbeanzeige