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 ...
2.5. Listen
Bitte schreiben Sie eine Datei liste.html , die im Browser so aussieht:
Beispiellösung
2.6. Listen
Bitte schreiben Sie eine Datei liste2.html , die im Browser so aussieht:
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
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:
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:
Beispiellösung
2.8. Hyperlinks und Grafiken
Bitte erstellen Sie folgendes HTML-Dokument hyperlinks.html.
Dabei sollen folgende Dinge umgsetzt werden:
- Sie können irgendein schönes Bild einfügen.
- Beim Klick auf den ersten Link öffnet sich die Webseite vom FB7
- Beim Klick auf den zweiten Link öffnet sich die Seite von Ihrem
Lieblingsverein
- Beim Klick auf den dritten Link öffnet sich das voreingestellte
E-Mail-Programm, mit Angabe des Empfängers und dem Betreff
(funktioniert u.U. nicht im Raum 344 / 362!) (Betreffzeile: siehe Selfhtml!)
- Beim Klick auf den untersten Link springen Sie ganz noben
Beispiellösung
2.9. Formulare
Bitte erstellen Sie ein Formular zur Veranstaltungsbewertung in HTML:
Beachten Sie bitte folgende Punkte:
- Das Attribut action lassen Sie bitte leer, da es im Raum 216/217 bzw. 344 / 362 u.U. nicht funktioniert
- Die Felder sind ordentlich ausgerichtet!
- Es soll eine höchstens achtstellige Matrikelnummer eingetragen werden können.
- In der Auswahlliste stehen folgende Werte zur Verfügung: IP, I1, IM, IE, IA – wobei wie abgebildet IP vorgewählt sein soll.
- Das Kommentarfeld ist 5 x 30 Zeichen groß
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.
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:
- Klasse grell: Hintergrund gelb, Schriftgröße 18px, Schriftfarbe rot
- Klasse rand: Schriftgröße 14px, Hintergrund hellgrau, Schriftfarbe schwarz, Umrandung in schwarz mit einer ein Pixel starken Linie
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:
- Die Listeneinträge haben keinen Stil (kein circle, disc, Nummer etc
- Kein Link hat einen Unterstrich (wie das geht bspw. unter css4you.de oder z.B. direkt hier...)
- Die Farbe des unbesuchten Links soll schwarz sein
- Besuchte Links sollen in rot dargestellt werden
- Beim Überfahren mit der Maus soll der Link in weisser Schrift auf schwarzem Hintergrund dargestellt werden
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:
- Der Hinweis: "Sie sind volljaehrig und noch nicht im Rentenalter" fuer ein Alter zwischen 18 und 67
- Der Hinweis: "Sie sind noch nicht volljaehrig oder bereits im Rentenalter" fuer unter 18 oder ueber 67, es sei denn folgender Punkt trifft zu:
- Der Hinweis: "So alt wird niemand" fuer ein Alter ueber 110.
Beispiellösung (Vielen Dank an Mario)
Teil 2
In dem Beratungsunternehmen ProConsult gibt es ein simples Karrieremodell:
- Mitarbeiter mit weniger als einem Jahr Berufserfahrung führen die Berufsbezeichnung Juniorberater
- Mitarbeiter zwischen einem und drei Jahren Berufserfahrung führen die Berufsbezeichnung Berater
- Für Mitarbeiter, die mehr als drei Jahre Berufserfahrung haben, gilt:
- Falls sie kein Team leiten, ist ihre Berufsbezeichnung Seniorberater
- Falls sie ein Team bis zu zwanzig Personen leiten, heißen sie Manager
- Falls sie Verantwortung für mehr als zwanzig Mitarbeiten haben, heißen sie Direktor
Schreiben Sie Programm in JavaScript, mit dem auf Grundlage der beiden Einflussgrößen
berufsjahre und anzahl_mitarbeiter die Berufsbezeichnung ausgegeben wird.
- Erstellen Sie zunächst auf einem Blatt Papier einen Ablaufplan für Ihr Programm
(PAP bzw. Aktivitätsdiagramm, Struktogramm oder Pseudocode). Visualisieren Sie dabei insbesondere sehr
detailliert den Ablauf der mehrstufige Entscheidung
- Hier können Sie studieren, wie Sie Eingaben von BenutzerInnen einlesen können.
- Fangen Sie schließlich auch nicht sinnvolle Zahleneingaben ab! Das Unternehmen hat nicht mehr
als 650 Mitarbeiter und niemand ist länger als 40 Jahre dort.
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:
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.
Beispiellösung
5.9. Ausstieg aus einer Schleife
Ändern Sie die for-Schleife aus Übung 5.7. wie folgt:
- Es sollen die Quadrate von 1 bis 25 ausgegeben werden
- Die Quadrate der Zahlen 7, 12 und 19 sollen nicht ausgegeben werden
- Falls der Abstand der Quadrate zweier aufeinander folgender Zahlen größer als 42 ist,
soll eine entsprechende Meldung ausgegeben und die Abarbeitung endgültig abgebrochen werden.
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:
- Sie brauchen die Modulo-Funktion, die in JavaScript mit % dargestellt wird. Die Modulo-Funktion gibt den Rest einer ganzzahligen Division an. Beispiel: 13 % 5 hat den Wert 3, denn „dreizehn geteilt durch fünf ergibt zwei Rest drei“. Mithilfe der Modulo-Funktion können Sie also feststellen, ob eine Zahl durch eine andere Zahl ganzzahlig teilbar ist, denn es gilt zum Beispiel 2000 % 4 == 0 , da 2000 ohne Rest durch 4 teilbar ist.
- Ein Jahr ist ein Schaltjahr, wenn es ohne Rest durch vier teilbar ist (also: Jahreszahl % 4 == 0) mit folgender Ausnahme:
- An Jahrhundertwenden liegt kein Schaltjahr vor, es sei denn, die Jahreszahl kann ohne Rest auch durch vierhundert geteilt werden.
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:
- Die Funktion bekommt den Bruttobetrag und den MWST-Satz als Parameter übergeben und gibt den daraus ermittelten Nettobetrag zurück
- Sie können die Funktion MWST_Anteil aus dem Folien-Skript als Anregung verwenden - allerdings muss der MWST-Satz variabel sein
- Testen Sie die Funktion, in dem Sie ein kleines Programm schreiben:
- Zunächst muss der Bruttobetrag eingegeben werden - benutzen Sie dazu wie in den vorigen Aufgaben window.prompt()
- Dann wird der MWST-Satz abgefragt, der mit dem aktuellen Wert 19 vorbelegt sein soll - auch das kann elegant mit window.prompt() gemacht werden
- Beide Eingabe werden an die Funktion netto() übergeben und das Ergebnis der Berechnung ausgegeben
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:
- Kommen in der Zeichenkette ein Punkt sowie das Zeichen ’@’ vor? Verwenden Sie die in der Vorlesung vorgestellte Methode indexOf()
- Enthält die Zeichenkette kein Leerzeichen ’ ’ ?
- Ist das drittletzte oder viertletzte oder fünftletzte Zeichen ein Punkt? Verwenden Sie die Methode lastIndexOf(). Überlegen Sie, wie groß die Differenz zwischen dem von lastIndexOf() geliefertem Wert und der gesamten Länge der Zeichenkette (bekommen Sie ja mithilfe des length-Attributs, gell) sein darf
- Kommt in der Zeichenkette genau ein ’@’ vor? Dann müsste ja das erste Auftreten identisch sein mit dem letzten Auftreten …
- Liegen zwischen dem ’@’ und dem letzten vorkommenden Punkt mindestens zwei Zeichen – nur dann kann es sich um eine gültige Domain handeln, denn es gibt keine einbuchstabigen Domains.
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:
- Der Benutzer wird gebeten, eine Zahl zwischen 7 und 13 einzugeben (Fehleingaben abfangen!)
- Das Ziehen der Glückszahl wird simuliert und ausgegeben
- Schließlich wird ausgegeben, in welchem Versuch die Glückszahl gezogen wurde, also bspw. so:
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.
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:
- Sie benötigen ein Array undefinierter Länge. Überlegen Sie, mit welcher Methode ein Array verlängert werden kann.
- Erinnerung: prompt-Eingaben werden zu Zeichenketten. Soll damit gerechnet werden, benötigen Sie die Funktion parseInt()
- Zeilenumbrüche wie im Screenshot in der Eingabeaufforderung benötigen ein Steuerzeichen
- Die Methode .pop() kann das letzte Element eines Arrays abschneiden
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