Vorlesung

Beispielklausuren

Praktikum

Aufgaben zum Kapitel 2: HTML

2.1. Hilfe für das Arbeiten mit HTML

2.2. Erstes Arbeiten mit HTML

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

2.4. Überschriften und Absätze

2.5. Listen

  Beispiellösung 

2.6. Listen

   Beispiellösung 

2.7. Stundenplan als html-Seite

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

• 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

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

• 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.

Beispiellösung

3.5 Positionierung Teil2

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

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!

5.1. Das erste JavaScript Programm

5.1. b Das zweite Programm

Beispiellösung 

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

5.2. Reservierte Wörter und Bezeichner

Tabelle mit Loesung

5.3. Variablendefinitionen

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.

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.

Lösung

Lösung als Bild 
Lösung als Javascript Datei  

5.5. Der tückische +-Operator

5.6. Mehrstufige Auswahl

Teil 1

• 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

• 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

• 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 

5.7. Zählergesteuerte Wiederholung

5.8. Kopf- und Fußgesteuerte Wiederholung

Ä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

• 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.

Beispiellösung 

Beispiellösung 

5.10. Funktion: Schaltjahr

• 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

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

• 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

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

• 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

• 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

Zufallszahlentest 

5.15. Zeitmessung

Beispiellösung 

5.16 Array

• 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

Beispiellösung