01 Einstieg in JavaScript

Einstieg in das Thema

Ein paar Worte vorab

(Hier Text zur Programmierung einfügen)

Was brauchst du als Basiswissen?

Grundkenntnisse in HTML und CSS sind notwendig.

Worum geht es?

JavaScript wurde ursprünglich nur als kleine Scriptsprache implementiert, um Webseiten etwas Funktionalität zu verpassen.

Mit der Zeit wurden die Wünsche - und damit auch die Anforderungen an die Sprache - immer umfangreicher. Waren Webseiten am Anfang zur zum Austausch wissenschaftlicher Informationen gedacht, laufen auf dieser Technologie mittlerweise Spiele, die von klassischen Desktop-Programmen nicht mehr zu unterscheiden sind.

Auch kann man mit dieser Technik relativ schnell Programme entwickeln, die auf allen Betriebssystemen laufen. Das wird (aus guten Gründen) auch oft kritisiert, aber eigentlich ist die Entwicklung folgerichtig. Schließlich sind die Webbrowser die Betriebssysteme von heute.

JavaScript hat nix, aber auch gar nix mit Java zu tun.

Was ist das Ziel?

Am Ende dieses Kapitels kannst du die ersten kleinen Dinge auf einer Webseite zum Funktionieren bringen. Und du lernst, wie eine Webseite intern aufgebaut ist, sodass sie über ein Programm ausgelesen und verändert werden kann.

Erarbeitung

Theorie

Aufgaben zur Erarbeitung

Du bekommst beide Applets über das Gruppenverzeichnis. Basis für die ersten Aufgaben ist Onclick.

Aufgabe 1
Füge einen weiteren Button ein, der den Text "Button 3 gedrückt" ausgibt. Beschreibe kurz, was du alles tun musstest.
Aufgabe 2
Über getElementById bekommst du Zugriff auf die Objekte, die eine ID haben. Ändere bei Klick auf Button 1 den Text von Button1 ins "Aua!". Was musstest du tun?
Aufgabe 3
Alles, was du mit CSS geändert hast, findest du über style (z.B. ausgabe.style). Ändere beim Buttonklick die Farben der Ausgabe. Was musstest du tun?
Aufgabe 4
Auch die anderen Button sollen zusätzlich die Farben der Ausgabe ändern, falls du das noch nicht getan hast.

Basis für die nächsten Aufgaben ist das Applet

MouseOver

Aufgabe 5
Füge einen zweiten Button hinzu. Hier soll sich die Vordergrundfarbe ändern.
Aufgabe 6
Finde heraus, wie man die Hintergrundfarbe vom Body ändern kann, wenn man mit der Maus über den Button geht.
Aufgabe 7
Untersuche, ob onclick und mouseover auch bei Textelementen wie <p> funktionieren.
Aufgabe 8
Bis jetzt wurden die Eventhandler beim Element z.B. durch onclick festgelegt. Finde eine weitere Möglichkeit heraus.

Aufgabe ohne KI

Alles ist neu und deshalb ist auch diese Aufgabe einfach. Nimm als Basis eine Vorlage mit Scriptbereich. Füge nun einen Button ein und gib ihm einen Eventhandler, der den Text des Buttons ändert. Erledige all dies ohne KI, probiere es aus und lasse es von der KI prüfen. Gib an, welche Fehler die KI bemängelt hat bzw. welche du selbst herausgefunden hast.

Zusammenfassung

Was muss man wissen/können?

Du musst wissen, dass

  • die Elemente einer Webseite Objekte mit vielen Eigenschaften sind,
  • dass diese auf Ereignisse reagieren können,
  • man die Objekte z.B. über eine ID finden kann und
  • man dann die Eigenschaften auch ändern kann.

Du kannst

  • Button einfügen,
  • HTML-Elementen EventHandler zuweisen,
  • die EventHandler im Scriptbereich definieren (also den Programmcode dafür schreiben) und
  • zumindest Farben und Texte ändern.

Was können anschließende Themen sein?

Das alles ist viel und neu und muss erst einmal vertieft werden. Das macht die nächste Lektion.

Weiter