Mein erster java-script-Code im Leben
Wenn du noch nie im Leben etwas mit java-script zu tun hattest, dann versuche das ganze mal nachzubauen. Es ist eine tolle Übung und sehr schnell hast du den ersten Code deines Lebens geschrieben.
Stell dir vor, du bekommst folgende Aufgabe, die du lösen sollst.
Aufgabe
Du bekommst zu Weihnachten 80 Euro geschenkt und dein Kumpel zahlt dir endlich die Schulden zurück von 110 Euro. Das heißt, du hast nun 190 Euro zur Verfügung. Schreibe in java-Script ein kleines Programm, wo du die Beträge beliebig eingeben kannst und wo die Beträge dir dann einfach zusammengerechnet werden. Das besondere: Du möchtest, dass das ganze wenn du auf den Live-Server klickst, also auf die Ausgabe von Visual-Studio-Code, dass dann ein kleines Fenster geöffnet wird und es dir dann 190 Euro anzeigt.
Die Lösung könnte so aussehen. Am besten du baust das ganze einfach mal so nach und schaust, ob es funktioniert. Visual-Studio-Code und den Live-Server kannst du dir hier kostenlos downloaden.
Das Ergebnis, wenn du auf den LIve-Server klickst lautet 190,00 Euro. Siehe Abbildung 2
Abb. 2
Bedeutung der Code-Zeilen
Zeile 1 : HTML wird eingeleitet
Zeile 2 : Es bedeutet dass es in Englisch ist
Zeile 3 Hier beginnt der HTML-Head-Bereich
Zeile 4 bedeutet, dass du auch Sonderzeichen nutzen kannst
Zeile 5 ist für das responsive
Zeile 6 Das ist der Titel z. B. Taschengeld, oder in unserem Falle könntest du auch Geschenk eintragen
Zeile 7 Ist eine Verknüpfungszeile, die das HTML mit dem CSS verbindet.
Zeile 8 Hier wird der Head-Bereich abgeschlossen. Du erkennst es an diesem / ( Schrägstrich).
Zeile 9 Der Body-Bereich geht los. Jedes HTML-Dokument hat einen Head und einen Body-Bereich.
Zeile 10 Extrem wichtige Zeile, denn hier beginnt das java-script. In unserem Fall das geöffnete Script -Tag
Zeile 11 Variable wird definiert, in unserem Falle 80 Euro
Zeile 12 Variable wird definiert, in unserem Falle 110 Euro
Zeile 13 Beides wird zusammengerechnet
Zeile 14 über window.alert, kannst du ein Fenster erzeugen, das dann ausgeworfen wird, wenn du rechts unten auf den Live-Server klickst und dann wird dir 190 als Ausgabe anzeigt. Siehe Ergebnis-Bild oben.
Zeile 15 leer
Zeile 16 endet das java-script. Du siehst es wieder an dem geschlossenen script „Schrägstrich“ im Script-Tag.
Zeile 17 leer
Zeile 18 leer
Zeile 19 body wird geschlossen
Zeile 20 HTML wird abgeschlossen.
Java-Script kannst du in 5 verschiedenen Möglichkeiten ausführen. Check das Video
Zurück zum Programmier-Baum