Mit HTML einen Taschenrechner erstellen

unter Mitarbeit von wikiHow Staff

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

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/08\/Create-a-Calculator-Using-HTML-Step-1-Version-3.jpg\/v4-460px-Create-a-Calculator-Using-HTML-Step-1-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/08\/Create-a-Calculator-Using-HTML-Step-1-Version-3.jpg\/v4-728px-Create-a-Calculator-Using-HTML-Step-1-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

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]
  X
  Forschungsquelle}
- 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]
  X
  Forschungsquelle}
- 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]
  X
  Forschungsquelle}
- 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]
  X
  Forschungsquelle}
- 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]
  X
  Forschungsquelle}
- 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]
  X
  Forschungsquelle}
- br : Dieser Tag löst einen Zeilenumbruch aus, so dass alles, was danach kommt, jeweils eine Zeile darunter erscheint. ^{[7]
  X
  Forschungsquelle}
- /form, /body und /html : Hiermit werden die entsprechenden Angaben von vorhin geschlossen bzw. beendet. ^{[8]
  X
  Forschungsquelle}
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 
 >