Impressum

Vorlesung

Vorlesungsunterlagen: komplett

Vorbereitungsstunde

Der Vorbereitungstermin ist am Do, 17.09 um 16:00 Uhr im Labor. Bitte bringt die Klausuren unten mit und kommt nicht ganz unvorbereitet. In 2 Stunden können wir nicht das Semester "wiederholen". Wenn es keine Fragen von euch gibt wird das eine sehr kurze Veranstaltung :-P


Beispielklausuren

Klausur 2011
Klausur 2012
Klausur 2013
Klausur 2014


Praktikum

Aufgaben zum Kapitel 2: HTML

2.1. Hilfe für das Arbeiten mit HTML

Studieren Sie die Seite http://de.selfhtml.org/index.htm Schauen Sie sich insbesondere über den Link HTML/XHTML die HTML-Referenz an. Was bedeutet Elementreferenz und Attributreferenz?

2.2. Erstes Arbeiten mit HTML

Starten Sie den EditPlus-Editor und erzeugen mit File>New>HTML-Page eine neue HTML-Datei. Speichern Sie die Datei in Ihrem persönlichen Verzeichnis

Falls Sie das Tag <meta> sehen: was bedeutet es und wie wird es verwendet? Schauen Sie unter der o.a. Web-Adresse nach! Schreiben Sie bitte HTML-Code, der im Browser wie folgt aussieht:


  Beispiellösung 

2.3. Sonderzeichen

Wie werden folgende Sonderzeichen in korrektem HTML-Quellcode erzeugt?

2.4. Überschriften und Absätze

Bitte erzeugen Sie folgende HTML-Seite. Es geht dabei vor allem um die Struktur - weniger um den Inhalt ...

Überschriften

2.5. Listen

Bitte schreiben Sie eine Datei liste.html , die im Browser so aussieht:

liste.html

  Beispiellösung 

2.6. Listen

Bitte schreiben Sie eine Datei liste2.html , die im Browser so aussieht:

 

liste.html

 

   Beispiellösung 

2.7. Stundenplan als html-Seite

Bitte erstellen Sie eine Datei plan1.html , die ihren Stundenplan enthät und im Browser etwa wie folgt aussieht. Ihre Stunden müssen Sie natürlich noch eintragen

plan1.html
Beispiellösung

Diese einfache Version nehmen Sie bitte als Grundlage für eine neue Datei mit dem Namen plan2.html, die im Browser so aussieht:

plan2.html
Beispiellösung

In der dritten Version, die Sie bitte in der Datei plan3.html speichern, sollen Sie eine Ergänzung am linken Rand vornehmen. In dieser Version können und sollen Sie Ihrer Phantasie freien Lauf lassen:

plan3.html

Beispiellösung

2.8. Hyperlinks und Grafiken

Bitte erstellen Sie folgendes HTML-Dokument hyperlinks.html.

Hyperlinks und Grafiken

Dabei sollen folgende Dinge umgsetzt werden:
Beispiellösung

2.9. Formulare

Bitte erstellen Sie ein Formular zur Veranstaltungsbewertung in HTML:

Formular

Beachten Sie bitte folgende Punkte:

Beispiellösung 

2.10. externe Elemente

Erstellen Sie wie auf dem Screenshot ein HTML-Dokument und binden Sie Ihr Lieblingsvideo von Youtube ein und eine Like Box von einer Seite von Facebook (hier: Hochschule OWL). Es handelt sich dabei um iFrames. Den Quelltext dazu bekommen Sie direkt bei Youtube/Facebook.

 

Facebook und Youtube

Beispiellösung 

3.1 Einbindung von CSS

Es gibt drei Arten, CSS in ein HTML-Dokument einzubinden. Was passiert, wenn Sie im head zunächst eine lokale Definition vornehmen und danach ein externes CSS-File mit zum Teil widersprechenden Regel einbinden? Was passiert, wenn Sie zuerst das CSS-File einbinden, und dann lokale Regeln definieren? Entwickeln Sie ein Beispiel, an dem Sie das Verhalten untersuchen und begründen können!

3.2 Klassen

Schreiben und testen Sie zwei CSS-Klassen zu unterschiedlichen Darstellung von Absätzen. Dabei sollen folgende Merkmale gelten:

Beispiellösung 

3.3 Listen und Pseudoklassen-Selektor

Ersellen Sie ein HTML-Dokument, das eine Liste mit 3 Einträgen enthält. Diese Einträge sind Links zu Webseiten Ihrer Wahl. Die Gestaltung soll folgende Eigenschaften haben:

Beispiellösung 

3.4 Positionierung

Mit der CSS-Eigenschaft position lassen sich Blöcke platzieren. Gestalten Sie die auf dem Screenshot dargestellte Webseite.

Insgesamt ist der Bereich 800 Pixel breit und 620 Pixel hoch.
Der Zwischenraum beträgt 20 Pixel.
Der gelbe Bereich ist 200 Pixel breit;
der rote 100 Pixel hoch.
Der Innenabstand des Textes beträgt an allen Seiten 10 Pixel

Beispiellösung

3.5 Positionierung Teil2

Mit der CSS-Eigenschaft float lassen sich ebenfalls Elemnte steuern. Gestalten Sie die auf dem Screenshot dargestellte Webseite.

Insgesamt ist der Bereich 800 Pixel breit und 620 Pixel hoch.
Der Zwischenraum beträgt 20 Pixel.
Der linke Bereich ist 200 Pixel breit;
der obere Bereich 100 Pixel hoch.
Die Fußzeile ist 30px hoch;
Der Innenabstand des Textes beträgt an allen Seiten 10 Pixel

Beispiellösung

4.1 Validität eines XML Dokuments

Das Dokument „Praktikum_XML.xml“ ist nicht wohlgeformt und es haben sich viele Fehler eingeschlichen.
Korrigieren Sie diese!

Binden Sie danach die folgende DTD in das Dokument ein und validieren Sie es unter validator.w3.org bei "direct input".


<!DOCTYPE Gedichtsammlung [
<!ELEMENT Gedichtsammlung (Gedicht*)>
<!ELEMENT Gedicht (Autor, Titel, Untertitel?, Strophe+)>
<!ELEMENT Autor (Vorname, Nachname)>
<!ELEMENT Vorname (#PCDATA)>
<!ELEMENT Nachname (#PCDATA)>
<!ELEMENT Titel (#PCDATA)>
<!ELEMENT Untertitel (#PCDATA)>
<!ELEMENT Strophe (Vers+)>
<!ELEMENT Vers(#PCDATA|Fett)*>
<!ELEMENT Fett (#PCDATA)>

<!ATTLIST Gedicht
Erscheinungsjahr CDATA #IMPLIED
Sprache CDATA #IMPLIED> ]>

Beispiellösung pdf
Beispiellösung xml Datei

4.2 Erstellen eines XML Dokuments

Gegeben sei folgendes Tabellenblatt "Adressen":

Überführen Sie das Tabellenblatt mit beiden Datensätzen in ein XML-Dokument. Zeigen Sie dabei zwei(!) Lösungen auf!

Wer noch mehr machen will: (nicht Klausurrelevant)
Erstellen Sie eine geeignete DTD und validieren Sie Ihr Dokument

5.1. Das erste JavaScript Programm

Erstellen Sie dazu im EditPlus eine neue HTML-Datei und speichern Sie in einem Verzeichnis JavaScript unter dem Namen JavaScriptTest.html ab. Fügen Sie folgende JavaScript-Zeile hinzu – denken Sie aber daran, in welche HTML-Tags JavaScript eingebunden sein muss:
alert("Ja, mein Skript funktioniert!!");

5.1. b Das zweite Programm

Erzeugen Sie folgende Bildschirmausgabe:

Beispiellösung 

Tip: Sie benötigen hierzu die Steuerzeichen, (bitte in Vorlesungsunterlagen anschauen)

5.2. Reservierte Wörter und Bezeichner

Welche der folgenden Bezeichner sind als Variablennamen zulässig? Erzeugen Sie zur Überprüfung die HTML-Datei bezeichner.html und versuchen in einer JavaScript – Umgebung die jeweiligen Variablen zu definieren. Welche Ausgaben macht der Debugger (= Fehlermelder), falls ein Fehler vorliegt? Was meinen Sie, aus welchem Grund ein Variablenname nicht zulässig ist? Ändern Sie die Namen so, dass sie funktionieren.

Tabelle mit Loesung

Variablenname zulässig? Begründung
Bemerkung
korrigierter Name
for nein reserviertes Wort kein Vorschlag
Kundennr. nein Punkt nicht erlaubt KundenNr
NAME ja keine Regel verletzt  
$Var ja keine Regel verletzt  
42_Test nein beginnt mit einer Ziffer Test_42
Test_42 ja keine Regel verletzt  
Prüfziffer ja ungeschickt wg. des Umlautes PruefZiffer
If ja ungeschickt wg. der Nähe zum reservierte Wort if kein Vorschlag
Kunden-Nr nein Bindestrich nicht erlaubt KundenNr
%-Zahl nein %-Zeichen und Bindestrich nicht erlaubt ProzentZahl
StartWert ja keine Regel verletzt  
Hallo() nein Klammern in Variablennamen nicht erlaubt Hallo
Wert$Nr ja keine Regel verletzt  
Variable ja keine Regel verletzt  
Hinweis: War schon mal Prüfungsfrage ...

5.3. Variablendefinitionen

Bitte kopieren Sie die Datei variablen.html in Ihr Verzeichnis Javascript. Erklären Sie die entstehenden Ausgaben. Wenn etwas gar nicht klappen sollte - kommentieren Sie die Zeile einfach aus!

Sie lernen nebenbei, wie Sie Werte ausgeben können. Vorerst müssen Sie darauf vertrauen, dass das mit document.write("…"); geht – später sehen wir noch, warum das so ist.

Hinweis: Bis hierhin sollten Sie gegen Ende 05.06. gekommen sein

5.4b. Arithmetische Operationen und Zuweisungsoperatoren

Nun geht es weiter mit Stift und Papier (wenn Sie mögen :)).
Wie lauten die Ergebnisse folgender Tabelle? Wenn noch Zeit ist, können Sie gerne danach(!) es auch am Rechner ausprobieren.

Achtung: "Punkt-vor-Strich"-Rechnung gilt hier nicht, da Inkrement- bzw. Dekrementoperatoren jaselbst eine Rechnung enthalten.
-->

Lösung

Lösung als Bild 
Lösung als Javascript Datei

5.5. Der tückische +-Operator

Der +-Operator ist sowohl auf Zahlen als auch auf Zeichenketten (strings) definiert - hat aber eine andere Bedeutung. Studieren Sie bitte die Datei OperatorPlus.html

5.6. Mehrstufige Auswahl

Teil 1

Erzeugen Sie eine variable "alter" und weisen einen beliebigen wert zu. Erzeugen Sie nun eine Fallunterscheidung, die folgende Ausgabe erzeugt:
Beispiellösung (Vielen Dank an Mario) 

Teil 2

In dem Beratungsunternehmen ProConsult gibt es ein simples Karrieremodell:
Schreiben Sie Programm in JavaScript, mit dem auf Grundlage der beiden Einflussgrößen berufsjahre und anzahl_mitarbeiter die Berufsbezeichnung ausgegeben wird.
Beispiellösung 

Hinweis: Bis hierhin sollten Sie mindestens gegen Ende 12.06. gekommen sein.

5.7. Zählergesteuerte Wiederholung

Schreiben Sie über eine for-Schleife ein Programm, das die Quadrate der Zahlen eins bis zehn z.B. in folgender Form ausgibt:

for-Schleife

5.8. Kopf- und Fußgesteuerte Wiederholung

Überführen Sie bitte die for-Schleife aus Übung 5.7. in eine while-Schleife und eine do-Schleife, so dass Sie die folgende Ausgabe (mit den Überschriften!) bekommen.

Ändern Sie schließlich die do-Schleife so ab, dass die Zahlen solange ausgegeben werden, wie das Quadrat kleiner als 1764 ist.

while- und do-Schleife

Beispiellösung  

5.9. Ausstieg aus einer Schleife

Ändern Sie die for-Schleife aus Übung 5.7. wie folgt: Benutzen Sie bei der Lösung break und continue !

Beispiellösung 

Hinweis: Bis hierhin sollten Sie mindestens gegen Ende 19.06. gekommen sein.

Aufgabe aus dem Unterricht zur Ansicht

Schreiben Sie eine Funktion, die eine Tabelle erstellt und die Anzahl der Spalten und Zeilen (gerne auch den Text für den Inhalt der Zellen) übergeben bekommt.

Beispiellösung 


5.10. Funktion: Schaltjahr

Schreiben Sie eine Funktion schaltjahr(), die ermittelt, ob ein Jahr ein Schaltjahr ist – die Funktion bekommt also als Parameter eine Zahl und gibt true oder false zurück! Verwenden Sie die Funktion in einem kleinen Programm, in dem eine Benutzerin eine Jahreszahl eingeben kann und das danach ausgibt, ob es sich um ein Schaltjahr handelt. Tipps und Hinweise:

Beispiellösung 

Falls Zeit ist: 5.11. Funktion: Rechtwinkliges Dreieck

Schreiben Sie eine Funktion, die feststellt, ob drei Zahlen die Seiten eines rechtwinkligen Dreiecks bilden können. Die Funktion bekommt also drei Parameter und gibt einen Booleschen Wert zurück (return true oder false).

Zusatzaufgabe: Wenn Sie noch mehr machen möchten: Schreiben Sie eine Funktion, die feststellt, ob drei Zahlen die Seiten eines beliebigen Dreiecks sein können!

Beispiellösung  

5.12. Funktion: Nettobetrag

Schreiben Sie eine Funktion netto(), die den Nettobetrag eines Rechnungsbetrages bestimmt:

Beispiellösung

Hinweis: Bis hierhin sollten Sie gegen Ende 26.06. gekommen sein

5.13. Funktion: E-Mail-Adresse prüfen

Schreiben Sie eine Funktion, die true zurückgibt, falls die ihr übergebene Zeichenkette eine gültige E-Mail-Adresse sein kann.
Überprüfen Sie dazu folgende Dinge:

Beispiellösung 

5.14. Funktion: Glückszahl

Schreiben Sie bitte eine Funktion glueckszahl() Diese Funktion gibt, wenn sie aufgerufen wird, eine Zufallszahl zwischen 7 und 13 zurück.
Testen Sie Ihre Funktion in einem Programm, das folgendes leistet:

Beispiellösung


weitere Infos zu Zufallszahlen

Ergänzend zu den Vorlesungsinhalten bzw. zur Verdeutlichung der Wahrscheinlichkeiten von Verteilungen bei Zufallszahlen je nach Formel kann eine Beispieldatei vielleicht helfen:

Zufallszahlentest 


5.15. Zeitmessung

Messen Sie die Zeit, die ein Benutzer benötigt, um seine E-Mail-Adresse einzugeben. Programmieren Sie dazu folgendes Aktivitätsdiagramm – die abgebildeten Notizen enthalten einige Hinweise.

Zeitmessung

Beispiellösung 

Hinweis: Bis hierhin (oder angefangen, schliesslich war 5.13 nicht so einfach) sollten Sie gegen Ende 03.07. gekommen sein. Auf in die Semesterferien und viel Erfolg bei den Prüfungen!! :-)

Wer trotzdem Lust hat, kann sich an den folgenden Aufgaben versuchen, die wir aber nicht mehr im Unterricht schaffen. Somit nicht Klausurrelevant!

5.16 Array

Stellen Sie eine Benutzereingabe bereit, die zur Eingabe von Zahlen auffordert und durch Eingabe von Buchstaben abgebrochen wird. Die Zahlen werden in einem Array gespeichert, der Durchschnitt durch eine Funktion berechnet. Die Ausgabe soll wie folgt ausgegeben:

Hilfestellung:
Beispiellösung 

5.17 Formulareingaben

Übernehmen Sie die Aufgabe 5.13 um zu bestimmen, ob eine Email-Adresse korrekt ist und übertragen Sie diese in ein schöneres Format, wie folgender Screenshot zeigt:

Beispiellösung