Erste Programme in JavaScript

• Laden Sie folgendes zip-Archiv herunter und entpacken Sie es an einen geeigneten Ort. Z.B. gleich mit der Kommandozeile:

freifach                                     # Ins geeignete Verzeichnis wechseln
unzip ~/Downloads/01-intro-basics.zip        # Nicht ausschreiben, Tabulator-Taste verwenden!
cd 01-intro-basics
start basics.html                            # Seite im Browser zum Testen öffnen
code .                                       # Visual Studio Code starten.

• Gehen Sie den HTML-Code durch und versuchen Sie, jede Zeile zu verstehen. Wenn Sie eine Zeile nicht verstehen, fragen Sie.
• Gehen Sie den CSS-Code durch.
• Gehen Sie den JavaScript-Code Zeile für Zeile durch. Stellen Sie Fragen, wenn etwas nicht klar ist.

• Fügen Sie im HTML-Code einen zweiten Knopf mit dem Text «Löschen» ein, der die Funktion loeschen(); aufrufen soll.
• Im JavaScript-Code, kopieren Sie die Funktion ausgabe und ändern Sie diese wie folgt ab:
  • Der Funktionsname wird zu loeschen umbenannt.
  • Die Funktion bekommt kein Argument, dargestellt durch ein leeres Klammerpaar.
  • Die Funktion löscht den gesamten Inhalt vom div mit id meinOutput. Dazu wird innerText vom Element auf die leere Zeichenkette ""

    gesetzt.

  • Testen Sie Ihr Programm. Öffnen Sie dabei die Entwicklertools mit F12 und öffnen Sie die Console, damit eventuelle Fehlermeldungen angezeigt werden.
  • Korrigieren Sie allfällige Fehler.

// Probieren Sie erst selbst, stellen Sie Fragen, wenn Sie nicht weiterkommen. Die Lösung folgt.