Lösung Nr. 9 – Java-Script – Code
Erkläre folgenden Code – Was passiert hier genau? Erkläre Zeile für Zeile
Was du im Schlaf kennen solltest -.) – einfacher Code-Aufbau erklären
Stell dir vor, in einer Klassenarbeit bekommst du so einen Code vor die Nase gesetzt und sollst ihn erklären. Was passiert hier genau im Code? Weiter unten erkläre ich dir Zeile für Zeile, damit du gut gerüstet bist. Am besten du versuchst das ganze selber praktisch nachzubauen und auszuprobieren.
Du hast es sicherlich gleich erkannt. Es ist Java-Script. In diesem Beispiel wurde Java-Script in ein HTML-Gerüst eingefügt. Wenn du in einem Code etwas mit „script“ liest, dann handelt es sich in der Regel um java-script. Im unteren Beispiel auch einfach zu erkennen. Es fängt an in Zeile 11 und endet in Zeile 17. In diesem Beispiel werden einfach 2 Zahlen zusammengerechnet und in einem kleinen Fenster ausgegeben.
Was passiert hier genau im Code- Schritt für Schritt – Anleitung für Anfänger.
Zeile 1
HTML bildet die Struktur, mit Zeile 1 wird das HTML eingeleitet
Zeile 2
lang = language = Sprache ist auf Englisch
Zeile 3
Da das ganze in ein HTML-Gerüst eingebaut ist, und HTML in einen sogenannten Head und Body-Bereich geglieder ist, geht hier der Head-Bereich los. Das ist der sogenannte Kopf-Bereich. Dieser Bereich wird nicht in der Ausgabe angezeigt.
Zeile 4
Was ist UTF 8 ? ( Wiki)
Zeile 5
Dadurch erhält der Browser Anweisungen, wie er die Abmessungen und die Skalierung der Seite steuern kann.
Der Teil width=device-width legt die Breite der Seite so fest, dass sie der Bildschirmbreite des Geräts folgt (die je nach Gerät variieren kann).
Der Teil „initial-scale=1.0“ legt die anfängliche Zoomstufe fest, wenn die Seite zum ersten Mal vom Browser geladen wird.
Zeile 6
Ist der Titel
Zeile 7
Der Head-Bereich ist abgeschlossen, das erkennst du sofort, wenn du ein Schrägstrich siehst, dann ist etwas beendet. </head > Wenn du also in einer Klassenarbeit gefragt wirst, wo beginnt der Head -Bereich und wo endet er, dann schaust du einfach, wo steht head ohne Schrägstrich, dort beginnt der Head-Bereich und wo steht der Head-Bereich mit Schrägstrich, dort endet der Head-Bereich also in unserem Falle. Der Head-Bereich geht in Zeile 3 los und endet in Zeile 7.
Zeile 8
Body Hier wird es spannend, weil hier geht der Body los. Das heißt bereits in Zeile 9 kannst du deinen Code schreiben. In Zeile 20 endet er Body-Bereich und im Zwischenraum schreibst du den Code. In unserem Falle wurde hier der Java-Script-Code eingetragen. Falls dich also jemand fragt, wo schreibe ich den Code überhaupt rein? Dann antwortest du einfach: Im Zwischraum, zwischen dem angefangenen Body Tag und dem geschlossenen Body-Tag und schon sahnst du in einer Klassenarbeit cool alle Punkte ab. -.)
<body> = offener Body-Tag ( kein Schrägstrich) Zeile 8
Hier im Zwischenraum fängst du an zu coden…. Ganz einfach-.)!
</body> = geschlossener Body-Tag ( Geschlossen, weil hier ein Schrägstrich ist, nach dem kleinen Dreieck. ) Zeile 20
Zeile 9
Hier wurde einfach ein Bild eingefügt mit dem Name „car“. Alt bedeutet, hier hast du die Möglichkeit das Bild etwas näher zu beschreiben. Diese Beschreibung könnte wichtig sind, für Leute, die zum Beispiel blind sind, oder auch für SEO. ( Suchmaschine / Optimierung) Mit width und height kannst du cool die Bildgröße bestimmen und sie dir anzeigen lassen.
Zeile 11 -17
Hier geht java-Script los Hier auch wieder: Du fängst an den Code wieder im Zwischenraum zwischen dem geöffneten script und dem geschlossenen script zu schreiben. Geöffnet ist es in Zeile 11 – geschlossen in Zeile 17. Im Zwischenraum, also ab Zeile 12 schreibst du gemütlich deinen java-Script Code.
Zeile 20 / 21
Body und html ist abgeschlossen ( Schrägstrich).
Wie kann ich mir jetzt das Ergebnis hier anzeigen lassen? Was kann ich jetzt mit dem Code machen?
Antwort: In Visual-Studio-Code klickst du einfach auf den Live-Server, der wird dir unten rechts eingeblendet, in Visual-Studio-Code. du musst ihn aber erst installieren. Das Ergebnis des Programms siehst du dann hier.
Wie installiere ich den Live-Server, damit ich auch sehen kann, was ich programmiert habe?
Für was braucht man Java-Script eigentlich? einfach erklärt.
Java-Script ist eine der meist verbreitesten Sprachen im gesamten Web. Ein einfaches praktisches Beispiel: Wenn du eine coole Webseite coden möchtest, dann brauchst du in der Regel 4 Dinge. Ist fast wie beim Obstkuchen backen-:)
Punkt 1 – Du brauchst ein Programm oder einen Editor, oder eine sogenannte Entwicklungsumgebung, wo du deinen Code reinschreiben kannst. Unten stehend wird Visual-Studio-Code genommen. Mit CSS bestimmst du den Style der Webseite, bestimmst, wo sollen die Bilder hin, wie soll der Hintergrund aussehen. Und mit Java-Script, schreibst du Funktionen, oder du kannst Dinge berechnen, oder du kannst mit Drag-and Drop-Technik arbeiten. Java-Script ist für das Dynamische einer Webseite verantwortlich.
Diese 3 Techniken HTML, CSS, Java-Script werden auch Frontend genannt, weil es das ist, was du dann letzendlich siehst auf einer Webseite. Später, wenn du diese 3 Techniken cool gelernt hast, dann kannst du dich mit sogenannten Frameworks und wichtigen Bibliotheken im Frontend beschäftigen. In der Frontend-Entwicklung wären dies zum Beispiel die wichtige Bibliothek React.js oder du arbeitest mit Vue.js oder mit Angular. Schulhof-Programmierung hat eine eigene Seite hierfür angelegt, falls du dich hier nicht auskennst. Frameworks + Bibliotheken.
Anmerkung: Video- Zusammenfassung
Hier wird dir alles nochmals in einem Video zusammengefasst. Video ( 30 Minuten)
zurück zum Programmiersprache-raten mehr