Grundlegende Sprachelemente

01 - Aufgabe 1 04 - Aufgabe 4
02 - Aufgabe 2 05 - Aufgabe 5
03 - Aufgabe 3  

 

Erstelle die praktischen Aufgaben in den Ordner "CLISS1\Aufgaben\01\" und erstelle für jede Aufgabe einen neuen Unterordner. Antworte auf die Fragen in einer neuen Webseite die du in den Ordner "CLISS1\Fragen\01\" speicherst.

01

Aufgabe 1

Erstelle ein neues HTML5-Dokument und füge folgende Zeilen im Body hinzu:

Quelltext für Aufgabe 1
<script>
    var name = prompt("Bitte geben Sie Ihren Namen ein", "");
    document.write("Hallo " + name + ", herzlich willkommen auf meiner dynamischen Webseite!");
</script>

HTML5-Code wird mittels dem <html> und CSS mittels dem <style> Tag eingeleitet.

  1. Wozu dient das <script> Tag?

Mit dem Schlüsselwort var wird eine Variable namens name deklariert. Eine Variable dient dazu Informationen zu speichern, um sie später weiter zu verwenden. In unserem Fall wird mittels dem Zuweisungsoperator = das Ergebnis der Methode prompt in der Variable name gespeichert.

Eine Methode ist eine Funktion eines Objekts. Eine Funktion beinhaltet eine oder mehrere Anweisungen, die durch den Aufruf der Funktion mittels ihres Namens ausgeführt werden können. Das Standardobjekt in einem Browserfenster heißt window. Normalerweise muss man vor dem Methodennamen den Namen des Objektes gefolgt von einem Punkt angeben, in diesem Fall also window.prompt("Bitte geben Sie Ihren Namen ein");. Wenn die Objektangabe fehlt, nimmt der Browser das Standardobjekt an.

  1. Was bewirkt die Methode prompt?
  2. Was passiert in Zeile 3?
  3. Recherchiere die Methode window.alert in deinem Buch. Welche Veränderung im Verhalten dieses Beispiels würdest du erwarten, falls du document.write in der dritten Zeile durch window.alert ersetzt? Probier es aus. Was beobachtest du? Nach dem was wir weiter oben gelernt haben, wie können wir window.alert kürzer schreiben mit dem gleichen Ergebnis?
  4. Recherchiere den Begriff Debugger. Finde heraus wie du mittels Firebug das Beispielprogramm debuggen kannst und wie du die Entwicklung der Variablen name beobachten kannst.
  5. Ändere das Skript so um, dass es den Benutzer auch nach seinem Alter fragt und anschließend dem Benutzer seinen Namen und sein Alter mitteilt.

02

Aufgabe 2

  1. Lies die Kapitel 17.4.2 bis 17.4.4 auf den Seiten 765-768 gründlich durch. Erkläre den Unterschied zwischen "Ausgabe in die Seite", "Ausgabe in einem Meldungsfenster" und "Ausgabe in der Entwicklerkonsole".
  2. Praktische Aufgabe: Erstelle eine Webseite die beim Öffnen ein Meldungsfenster mit dem Text "Hello World!" anzeigt.
  3. Praktische Aufgabe: Erstelle eine Webseite die beim Öffnen ein einziges Meldungsfenster mit folgendem Text anzeigt:

    The limerick packs laughs anatomical
    In space that is quite economical.
    But the good ones I've seen
    So seldom are clean
    And the clean ones so seldom are comical.

  4. Praktische Aufgabe: Erstelle eine Webseite die beim Öffnen ein Skript ausführt das die unten aufgeführten Sachen erledigt. Jeder Befehl muss ordentlich kommentiert sein.
    1. Den Text "Wahnsinn!" dynamisch in die Seite schreiben.
    2. Den Text "Toll!" in einem Meldungsfenster anzeigen.
    3. Den Text "Klasse!" in der Konsole anzeigen.
  5. Versuche die Aufgabe 2.4 Schritt für Schritt auszuführen indem du in der Entwicklerkonsole Breakpoints benutzt.
  6. Praktische Aufgabe: Lies das Kapitel "17.5 Arithmetische Operatoren in JavaScript" auf den Seiten 768-770 gründlich durch. Erstelle danach eine Webseite die beim Öffnen die folgenden Rechnungen gefolgt von den Resultaten dynamisch in der Webseite ausgibt. Die Resultate sollen mittels JavaScript errechnet werden.
    1. $7 + 4$
    2. $7 - 4$
    3. $7 \times 4$
    4. $7 \div 4$
    5. $-(2+5)$
    6. $3 + 5 \over 3 \times 8$

03

Aufgabe 3

  1. Lies dir das Kapitel "19.1.3 Die verschiedenen Dialogboxen im Überblick" auf den Seiten 861-863 gründlich durch.
  2. Praktische Aufgabe: Erstelle eine Webseite die beim Öffnen den Benutzer nach seinem Geburtsort fragt.
  3. Praktische Aufgabe: Erstelle eine Webseite die beim Öffnen den Benutzer nach seinem Alter fragt. Das Eingabefenster soll die Zahl 18 als Vorgabewert anzeigen.

04

Aufgabe 4

  1. Lies dir das Kapitel "17.3 Die Verwendung von Variablen in JavaScript" auf den Seiten 760 bis 763 gründlich durch.
  2. Praktische Aufgabe: Erstelle eine Webseite die den Benutzer nach seinem Namen, seinem Alter, seinem Geburtsort und seiner Emailadresse fragt. Dann soll der folgende Texte dynamisch in die Webseite geschrieben werden:

    Name: <Name des Benutzers>
    Alter: <Alter des Benutzers>
    Geburtsort: <Geburtsort des Benutzers>
    Emailadresse: <Emailadresse des Benutzers>

  3. Praktische Aufgabe: Erstelle eine Webseite die den Benutzer nach zwei Zahlen fragt und die dann die Summe der beiden eingegebenen Zahlen dynamisch in die Seite schreibt.

05

Aufgabe 5

Die folgenden Aufgaben müssen ordnungsgemäß kommentiert sein.

  1. Praktische Aufgabe: Erstelle eine Webseite die den Benutzer nach der Seitenlänge eines Quadrates fragt und die dann den Umfang sowie de Fläche des Quadrates rechnet und ordentlich in der Seite anzeigt.
  2. Praktische Aufgabe: Erstelle eine Webseite die den Benutzer nach seinem Alter (in Jahren) fragt und die ihm dann in der Seite anzeigt wie alt er in Tagen, Stunden, Minuten und Sekunden ist. Die Webseite muss mit CSS ordentlich formatiert sein.
  3. Schwere praktische Aufgabe (Kompetenz SA2): Erstelle eine Webseite die beim Öffnen den Benutzer mittels Eingabefenster nach einer, in HTML zulässigen Farbe oder einem RGB Farbwert fragt und dann den kompletten Hintergrund der Seite mit dieser Farbe färbt.
  4. Schwere praktische Aufgabe (Kompetenz SA2): Verändere die Aufgabe 6.2 so, dass die Webseite den Benutzer nicht mehr nach seinem Alter (in Jahren) sondern nach seinem Geburtsjahr fragt. Benutze dann die folgende Zeile Code um das aktuelle Jahr in die Variable thisYear zu speichern: var thisYear = (new Date()).getFullYear(); Anhand der Variable thisYear und der Eingabe des Benutzers kannst du dann sein Alter errechnen. Die Anzeige der Webseite soll die gleiche bleiben wie in Aufgabe 6.2.
Sign In