Internetworking – Klausur SS 09 – HS Furtwangen · Internetworking – Klausur SS 09 – HS...
14
Internetworking – Klausur SS 09 – HS Furtwangen Name: Matrikelnummer: Aufgabe 1 von 22 Aufgabe 2 von 16 Aufgabe 3 von 20 Aufgabe 4 von 12 Aufgabe 5 von 20 Punkte von 90 Note Die Klausur wird ohne Hilfsmittel geschrieben. Schreiben Sie als erstes Ihren Namen und ihre Matrikelnr. in obige Tabelle. Tragen Sie die Lösungen bitte bei den Aufgaben mit ein. Kontrollieren Sie vor der Abgabe die Vollständigkeit Ihrer Lösungsblätter! Im Anhang befinden sich Hinweise zu den Aufgaben. Aufgabe 1 (22 Punkte) (a) Geben Sie den XHTML-Quelltext für die abgebildete Web-Seite an: Das Layout der Formularfelder ist mit einer Tabelle realisiert. Beim Abschicken des Formulars mit dem Submit-Knopf „Los geht's!“ soll zur Adresse http://www.hs- furtwangen.de/iw.php gewechselt werden. Eventuelle Parameter sollen dabei im message- body des http-Pakets übertragen werden. Das XHTML-Dokument soll zwingend eine Trennung von Inhalt und Layout erfordern.
Transcript of Internetworking – Klausur SS 09 – HS Furtwangen · Internetworking – Klausur SS 09 – HS...
Internetworking – Klausur SS 09 – HS Furtwangen
Name: Matrikelnummer: Aufgabe 1 von 22 Aufgabe 2 von 16 Aufgabe 3 von 20 Aufgabe 4 von 12 Aufgabe 5 von 20 Punkte von 90 Note
Die Klausur wird ohne Hilfsmittel geschrieben. Schreiben Sie als erstes Ihren Namen und ihre Matrikelnr. in obige Tabelle. Tragen Sie die Lösungen bitte bei den Aufgaben mit ein. Kontrollieren Sie vor der Abgabe die Vollständigkeit Ihrer Lösungsblätter! Im Anhang befinden sich Hinweise zu den Aufgaben. Aufgabe 1 (22 Punkte) (a) Geben Sie den XHTML-Quelltext für die abgebildete Web-Seite an: Das Layout der Formularfelder ist mit einer Tabelle realisiert. Beim Abschicken des Formulars mit dem Submit-Knopf „Los geht's!“ soll zur Adresse http://www.hs-furtwangen.de/iw.php gewechselt werden. Eventuelle Parameter sollen dabei im message-body des http-Pakets übertragen werden. Das XHTML-Dokument soll zwingend eine Trennung von Inhalt und Layout erfordern.
(b) Erläutern Sie die Unterschiede zwischen den XHTML-Dokumententypen Strict, Tansitional und Frameset.
(c) Gegeben ist der folgende XHTML-Code: 01 <?xml version="1.0" encoding="ISO-8859-1"?>
02 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Str ict//EN"
03 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.d td">
04 <html>
05 <head>
06 <title>IG 2 Klausur</title>
07 <script type="text/javascript src="klausur.js">< /script>
08 <link rel="stylesheet" type="text/css" href="kla usur.css">
09 </head>
10 <body title="IW Klausur">
11 <H1 background="#ffff00"> Internetworking Klausu r
12 </H1>
13 <div>
14 <ul>
15 <li>Client/Server Architekturen</li>
16 <li>Zeichensätze</li>
17 <li>Internet-Entwicklung</li>
18 </div>
19 </ol>
20 <H2 class="bewertung">Bewertungsschema</H2>
21 <table>
22 <td>
23 <tr>Punkte von</tr>
24 <tr>Punkte bis</tr>
25 <tr>Note</tr>
26 </td>
27 <td>
28 <tr>90</tr>
29 <tr>87</tr>
30 <tr>1.0</tr>
31 </td>
32 <!-- weitere Einträge aus Platzgründen gekürzt - ->
33 <td>
34 <tr>49</tr>
35 <tr>5</tr>
36 <tr>5.0</tr>
37 </td>
38 </table>
39 </body>
40 </xhtml> Finden Sie alle Fehler in obiger XHTML-Seite.
(d) Ändern Sie den XHTML-Code so, dass beim Klicken auf eine Note die JavaScript-Funktion klausuraufgabe (von, bis) aus der Datei klausur.js aufgerufen wird. Die Übergabeparameter sind dabei durch die entsprechenden Notenpunkte gegeben.
Aufgabe 2 (16 Punkte) (a) Gegeben ist die folgende CSS-Definition:
.betont {font-size:x-large; font-weight:bold}
Geben Sie einen Ausschnitt aus einem XHTML-Quelltext an, in dem diese Definition verwendet wird. Ihr Quelltext soll mit Hilfe des <div> -Tags den Satz Ergebnis der IW-Klausur ausgeben.
(b) Gegeben sei eine XHTML-Datei, welche im Browser folgende Ausgabe erwirkt:
Gehen Sie bei der Anzeige davon aus, dass Bildschirmauflösung und Fensterbereite des Browsers Ihnen unbekannt sind. Die Namen der dargestellten Boxen entsprechen dabei den ID’s des jeweiligen <div>-Elements. So hat beispielsweise die Box 1 die ID box1. Desweiteren existiert bereits ein CSS-Stylesheet, welches das Aussehen der XHTML-Elemente regelt.
Ergänzen Sie nun dieses Stylesheet so, dass obige Bildschirmausgabe erfolgt.
(c) Gegeben sei <p id="cascade" class="cascade">Kaskade</p> und folgende CSS-Anweisungen:
p{color:yellow} #cascade{color:red} .cascade{color:green}
Kreuzen Sie die Farbe an, in welcher das Wort Kaskade im obigen XHTML-Code vom Browser dargestellt wird?
__ rot __ gelb __ grün __ schwarz (d) Gegeben seien die folgenden CSS-Selektoren. Beschreiben Sie Ihre Wirkung:
CSS Beschreibung #box2 { position:relative; top:10px; left: 10px; }
a:visited {color:grey;}
h1 i {color:red;}
div > span {color:blue;}
div ol>li p {color:green;}
Aufgabe 3 (20 Punkte) (a) Gegeben ist folgendes JavaScript-Programm:
<script type="text/javascript"> var a = 6; var b = 4; while (b != a) {
if (a < b) { b = b – a;
} else { a = a – b:
} } document.writeln(a);
</script> Welchen Wert gibt dieses JavaScript-Programm aus?
(b) Ergänzen Sie den nachfolgenden Code um die fehlende JavaScript-Funktion check() . Sie soll prüfen, ob im Feld age ein Wert zwischen 18 und 120 eingegeben wurde und ob im Feld nick etwas eingegeben wurde. Ansonsten sollen Fehlermeldungen in alert -Fenstern produziert werden. Die Meldungen lauten „Invalid age“ bzw. „Missing Nickname“. Im Fehlerfall soll check() den Wert false zurückliefern, ansonsten den Wert true . <?xml version="1.0" encoding="ISO-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > <html> <head><title>Register</title> <script type="text/javascript">
} </script> </head> <body> <form action="register.php"> <p>Age: <input type="text" id="age" /><br /> Nickname: <input type="text" id="nick" /><br /> </p> <div> <input type="submit" value="Register" name ="submit" onclick="return check();" /> </div> </form> </body> </html>
(c) Gegeben ist das folgende Programm:
01 <?xml version="1.0" encoding="ISO-8859-1"?> 02 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Str ict//EN" 03 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.d td"> 04 <html> 05 <head> 06 <title>DOM Manipulation</title> 07 <script type="text/javascript" src="prototype.js "></script> 08 <script type="text/javascript"> 09 //<
19 $('female').observe( 'click', function() { ad d_name('female_name'); 20 }); 21 }); //]]> </script> </head> 22 <body> 23 <form action="javascript:void(0)" style="backgro und-color:#FFDDAA; 24 padding:10px; position:absolute top:10px; left: 10px; width:300px"> 25 <p>Frauenname:<br /> 26 <input type="text" id="female_name" style=" bo rder:solid 1px gray" /> 27 <button type="button" style="border:solid 1px gray" id="female">OK 28 </button></p><p>Männername:<br /> 29 <input type="text" id="male_name" style=" bord er:solid 1px gray" /> 30 <button type="button" style="border:solid 1px gray" id="male">OK 31 </button></p></form> 32 <div style="position:absolute; top:10px; left:35 0px;"> 33 <h1 style="font-size:120%">Frauennamen:</h1> 34 <ul id="female_names"></ul> 35 <h1 style="font-size:120%">Männernamen:</h1> 36 <ul id="male_names"></ul> 37 </div></body></html>
Erläutern Sie die mit der Zeilennummer unten angegebenen Programmzeilen. Beschreiben Sie hierbei möglichst exakt, was die entsprechende Anweisung bewirkt.
7) _______________________________________________________________________
8) _______________________________________________________________________
9) _______________________________________________________________________
10) ______________________________________________________________________
11) ______________________________________________________________________
12) ______________________________________________________________________
13) ______________________________________________________________________
14) ______________________________________________________________________
15) ______________________________________________________________________
16) ______________________________________________________________________
17) ______________________________________________________________________
18) _____________________________________________________________________
19) _____________________________________________________________________
Aufgabe 4 (12 Punkte) Kreuzen Sie bei allen Aussagen an, ob sie richtig oder falsch sind. Jede richtige Antwort gibt ein Punkt, falsche Antworten ergeben einen Punkt Abzug. Es können jedoch keine negativen Punkte in dieser Aufgabe entstehen. Nicht beantwortete Aussagen bleiben unberücksichtigt.
Aussage Richtig Falsch
Die XAMP-Installation ist für den Produktiveinsatz vorgesehen.
In Adobe Flash werden die Grafiken vektorbasiert abgelegt.
In Joomla erfolgt keine Trennung von Code und Design.
MediaWiki wurde mit PHP5 realisiert
JSP Seiten werden zur Laufzeit in ein Servlet umgewandelt.
Drupal ist ein Open-Source Projekt, das auf JSP-Seiten aufsetzt
Silverlight basiert auf XAML und SWF
Mittels MXML wird in Flex das Fenster-Layout entworfen
Ein Blog in Wordpress benötigt keine MySQL-Datenbank
ASP.NET Applikationen können ausschließlich in C# programmiert werden
Typo3 basiert im Gegensatz zu Joomla nicht auf Templates
Joomla Templates basieren oftmals auf dem YAML Framework
Aufgabe 5 (20 Punkte) (a) Gegeben sind die Variablen
$preis (mit einem ganzzahligen Wert) $top (mit einem Wahrheitswert true oder false )
Setzen Sie mittels einer PHP-Anweisung eine Boolesche Variable $preisOK an, die $preisOK auf true setzt, wenn der Wert von $preis echt kleiner als 100 ist oder wenn $top den Wert true hat und $preis echt kleiner als 150 ist. Andernfalls soll $preisOK false annehmen. (b) Die folgende Array-Definition in PHP ordnet bestimmten Blumensorten Preise zu: $blumen = array ( "Rose" => 2.3,
"Tulpe" => 1.3, "Aster" => 1.1, "Nelke" => 1.2, "Margerite" => 0.85);
Geben Sie eine foreach -Schleife an, die dieses Array durchläuft und die Namen aller Blumensorten ausgibt, deren Preis zwischen 1.00 und 2.00 liegt. (c) Gegeben sei untenstehendes XHTML-Formular blumenrechner.html, das in Teilaufgabe (b) beschriebene Array $blumen und ein PHP_Skript zur Formularverarbeitung. Ergänzen Sie den PHP-Code der Datei blumenrechner.php so, dass das Skript nach Betätigen des "Berechne"-Knopfes den Preis für eine Blume der eingegebenen Art wie folgt ausgibt: Bsp: Wenn der Benutzer „Tulpe“ eingibt, soll die Ausgabe so aussehen:
Eine Tulpe kostet 1.3
Unbekannte Blumensorten sollen wie in folgendem Beispiel behandelt werden.
Bsp: Bei Eingabe von „Fisch“, soll die Ausgabe wie folgt lauten:
Leider kein Preis für Fisch
Ermitteln Sie den Preis einer Blume mittels des Arrays $blumen. Ob ein Schlüssel in einem Array vorhanden ist, lässt sich mit der Funktion isset prüfen.
Datei blumenrechner.html <?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict //EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<html>
<head><title>Blumenrechner</title></head>
<body>
<form action="blumenrechner.php">
<p>Name: <input type="text" name="blume" value="" / ></p>
<div><input type="submit" name="submit" value="Bere chne" /></div>
</form>
</body>
</html>
Datei blumenrechner.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict //EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<html>
<head>
<meta http-equiv="content-type" content="applicatio n/xhtml+xml;
charset=utf-8" />
<title>Blumenrechner</title>
</head>
<body>
<div>
<?php
$blumen = array ( "Rose" => 2.30,
"Tulpe" => 1.30,
"Aster" => 1.10,
"Nelke" => 1.20,
"Margerite" => 0.85);
?>
</div>
</body>
</html>
(d) Das Programm soll nun noch etwas bedienfreundlicher gestaltet werden, in dem das Eingabefeld für die Blumen um eine Vorschlagsfunktion mittels AJAX erweitert wird. Hierzu wird die Datei blumenrechner.html wie folgt erweitert: Datei blumenrechner.html <?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict //EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<html>
<head><title>Blumenrechner</title>
<script type="text/javascript" src="prototype.js" ></script>
<script type="text/javascript" src="scriptaculous .js"></script>
<script type="text/javascript">
Event.observe(window, 'load', function() {
new Ajax.Autocompleter('blume', 'blumenauswah l', 'aj_blumen.php', {
});
});
</script></head>
<body><form action="blumenrechner.php">
<p>Name: <input type="text" name="blume" id="blume" value="" /></p>
<div><input type="submit" name="submit" value="Bere chne" /></div>
<div class="autocomplete" id="blumenauswahl" style= "display:none"></div>
</form>
</body>
</html>
Ergänzen Sie die unten stehende Datei aj_blumen.php so, dass bei einer Eingabe das Array $blumen durchsucht wird und falls die Anfangsbuchstaben übereinstimmen der entsprechende Blumenname vorgeschlagen wird. Bsp: Eingabe: Ro => Vorschlag Rose. Datei aj_blumen.php <ul>
<?php
$blumen = array ( "Rose" => 2.30,
"Tulpe" => 1.30,
"Aster" => 1.10,
"Nelke" => 1.20,
"Margerite" => 0.85);
?>
</ul>
Javascript: document.write(y.length) // Stringlänge von y
PHP:
