Internetworking Klausur SS 09 HS Furtwangen

Transkript

1 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 gewechselt werden. Eventuelle Parameter sollen dabei im messagebody des http-pakets übertragen werden. Das XHTML-Dokument soll zwingend eine Trennung von Inhalt und Layout erfordern.

2 (b) Erläutern Sie die Unterschiede zwischen den XHTML-Dokumententypen Strict, Tansitional und Frameset.

3 (c) Gegeben ist der folgende XHTML-Code: 01 <?xml version="1.0" encoding="iso "?> 02 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 03 " 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="klausur.css"> 09 </head> 10 <body title="iw Klausur"> 11 <H1 background="#ffff00"> Internetworking Klausur 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  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.

4 (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.

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

6 (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 #box2 { position:relative; top:10px; left: 10px; } Beschreibung a:visited {color:grey;} h1 i {color:red;} div > span {color:blue;} div ol>li p {color:green;}

7 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 "?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html> <head><title>register</title> <script type="text/javascript">

8 } </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 "?> 02 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 03 " 04 <html> 05 <head> 06 <title>dom Manipulation</title> 07 <script type="text/javascript" src="prototype.js"></script> 08 <script type="text/javascript"> 09 //<![CDATA[ 10 function add_name(ul_id) { 11 var name = $(ul_id).value; 12 $(ul_id).value = ""; 13 var li_elem = document.createelement("li"); 14 var li_text = document.createtextnode(name); 15 li_elem.appendchild(li_text); 16 eval('$("' + ul_id + 's").appendchild(li_elem)'); } 17Event.observe(window, 'load', function() { 18 $('male').observe( 'click', function() { add_name('male_name'); });

9 19 $('female').observe( 'click', function() { add_name('female_name'); 20 }); 21 }); //]]> </script> </head> 22 <body> 23 <form action="javascript:void(0)" style="background-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=" border: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=" border: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:350px;"> 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)

10 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)

11 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 "?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html> <head><title>blumenrechner</title></head>

12 <body> <form action="blumenrechner.php"> <p>name: <input type="text" name="blume" value="" /></p> <div><input type="submit" name="submit" value="berechne" /></div> </form> </body> </html> Datei blumenrechner.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html> <head> <meta http-equiv="content-type" content="application/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>

13 (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 "?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <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', 'blumenauswahl', '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="berechne" /></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>

14 Javascript: document.write(y.length) // Stringlänge von y PHP: