====================== Name : _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
MMK-Test-Klausur 3
====================== Vorname: _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
Matr#: _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
Auf. Nr | 1 | 2 | 3 | 4 | 5 |
-----------|---|---|---|---|---|
Soll Pkte | 3 | 3 | 3 | 3 | 3 |
-----------|---|---|---|---|---|
Ist Pkte | | | | | |
a) === Nennen sie 5 Stichworte zur Physiologie der Augen, die zum Sehvorgang gehören :
___________________________________________________________
___________________________________________________________
___________________________________________________________
___________________________________________________________
___________________________________________________________
b) === Geben sie min/max-Grenzwerte (Frequenzbereich, Lautstärkebereich) an, die für das Hören gelten :
___________________________________________________________
___________________________________________________________
c) === Womit beschäftigt sich die experimentelle Wahrnehmungspsychologie (mindestens 5 Teilgebiete) ?
___________________________________________________________
___________________________________________________________
___________________________________________________________
___________________________________________________________
___________________________________________________________
d) === Für alle "benamten XHTML-Zeichen-Entities" enthält http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd die 3 "ENTITY-Include-Files" lat1.ent, special.ent, symbol.ent. Bestimmte Zeichen-Definition sind in bestimmten Dateiel festgelegt. Bitte unzutreffende Filenamen streichen:
Zeichen-Definition | ist enthalten in
--------------------|-----------------------------------------------
ä (benamt ä ) | symbol.ent, special.ent, lat1.ent
|
‰ (benamt ‰) | symbol.ent, special.ent, lat1.ent
|
α (benamt α ) | symbol.ent, special.ent, lat1.ent
|
← (benamt ← ) | symbol.ent, special.ent, lat1.ent
e) === Nennen sie zu den folgenden Tags einige Tag-Attribute und Erklären sie bitte (sehr kurz in Stichworten) die Bedeutung der Attribute:
input-Tag: ______________________________________________________
___________________________________________________________
___________________________________________________________
___________________________________________________________
___________________________________________________________
a-Tag: ______________________________________________________
___________________________________________________________
___________________________________________________________
iframe-Tag: ______________________________________________________
___________________________________________________________
___________________________________________________________
___________________________________________________________
frameset-Tag: ____________________________________________________
___________________________________________________________
___________________________________________________________
___________________________________________________________
___________________________________________________________
form-Tag: ______________________________________________________
___________________________________________________________
___________________________________________________________
___________________________________________________________
a) === Eine Router-Beschreibung verwende die folgenden Abkürzungen. Was bedeuten diese Abkürzungen ?
DHCP : ________________________________________________________ DNS : ________________________________________________________ WLAN : ________________________________________________________ Repeater: _____________________________________________________ PPPoE: ________________________________________________________
b) === Wozu dienen WLAN-Verschlüsselungen ?
_________________________________________________________
_________________________________________________________
_________________________________________________________
c) === Die folgenden CSS-Klassen werden weiter unten in 9 div-Tags verwendet. Ordnen sie die Nummern der CSS-Style-Klassen bg1, bg2, ..., bg7 den dargestellten Bildern zu .. my.gif ist ein kleines "Recheck-Pfeilchen-gif".
bitte hier die
bg-CSS-Class-Nummern
eintragen
zu Bild a) gehören ____________________
zu Bild b) gehören ____________________
zu Bild c) gehören ____________________
zu Bild d) gehören ____________________
zu Bild e) gehören ____________________
Im XHTML-Head steht:
<style type="text/css">
.bg { height: 15px; width: 100%; margin: 10px;
padding: 10px; border: 1px solid #000; }
.bg1 { background-image: url(my.gif); background-repeat:no-repeat; }
.bg2 { background-image: url(my.gif); background-repeat:no-repeat; float:left; }
.bg3 { background-image: url(my.gif); background-repeat:repeat-x; }
.bg4 { background-image: url(my.gif); background-repeat:repeat-x; float:left; }
.bg5 { background-image: url(my.gif); background-repeat:repeat-y; }
.bg6 { background-image: url(my.gif); background-repeat:repeat-y; float:right; }
.bg7 { background-image: url(my.gif); }
.bg8 { background-image: url(my.gif); background-repeat:repeat; float:right; }
.bg9 { background-image: url(my.gif); background-repeat:repeat; }
</style>
Im XHTML-Body steht:
bg1) <div class="bg bg1"> </div>
bg2) <div class="bg bg2"> </div>
bg3) <div class="bg bg3"> </div>
bg4) <div class="bg bg4"> </div>
bg5) <div class="bg bg5"> </div>
bg6) <div class="bg bg6"> </div>
bg7) <div class="bg bg7"> </div>
bg8) <div class="bg bg8"> </div>
bg9) <div class="bg bg9"> </div>
d) === Ergänzen sie den folgenden Ausschnitt aus einer css.css-Datei so, daß
/* 1 */ ... als Seiten-Hintergrund das Bild "my.jpg"
erscheint
/* 2 */ ... die Schriftfarben für p-Tag-Style-Klassen soll mit
unterschiedlichen Schreibarten der Farbangaben
2a) rot, 2b) blau, 2c) gelb, 2d grün gesetzt werden
/* 3 */ der Außen-Abstand der Style-Klasse e
rechts auf 2 Pixel, links auf 4 Pixel und
unten auf 3-Textzeilen, oben auf eine Textzeile
gesetzt werden.
Bitte hier ergänzen:
______ { background: _____________________________ } /* 1 */
p.a { ________________________________ } /* 2a rot */
p.b { ________________________________ } /* 2b blau */
p.c { ________________________________ } /* 2c gelb */
p.d { ________________________________ } /* 2d grün */
p.e { ________________________________ } /* 3 */
/* 4 */ Jetzt kommt die Anwendung der Style-Klassen im p-Tag: Verwenden sie eine obige CSS-Klasse so, dass die p-Schriftfarbe rot ist
<p ______________________> ... </p>
Verwenden sie zwei obige CSS-Klassen so, dass für das p-Tag die Schriftfarbe gelb ist und die p-Aussenabstände von /* 3 */ verwendet werden:
<p _____________________________> ... </p>
e) === Nennen sie die 4 Universal-Attribute, die praktisch bei allen XHTML-Tags verwendet werden können:
___________________________________________________________
___________________________________________________________
___________________________________________________________
___________________________________________________________
f) === Auf einen Server funktioniere PHP. Skizzieren sie sehr grob, wie sie diese eingegebenen Formulardaten serverseitig mit PHP verarbeiten würden:
___________________________________________________________
___________________________________________________________
___________________________________________________________
___________________________________________________________
a) === Bitte tragen sie die regulären Ausdrücke ein, die folgende Zeichenfolgen finden: :
Finde eine C-style hexadecimal Zahl / _____________________ / Finde eine ganze Dezimalzahl, die 5 Ziffern enthält / _____________________ /
b) ===
handle = window.setTimeout(p1,p2)
führt eine Anweisung p1 nach einer bestimmten Verzögerungszeit aus.
p1 ist meist ein Funktionsaufruf (als String), p2 die ms bis zum Ausführen.
Damit sich z.B. ein Popup-Fenster (window) selbst in 2 Sekunden schließt,
Muß die close-Funktion ausgeführt werden.
Zum automatischen schließen eines Popup-Fensters
würde ich im JavaScript-Tag des XHTML-Header eintragen
:
handle = window.setTimeout( _______________________, __________ );
Auch würde ich einen geeigneten Aufruf
window.clearTimeout(handle)
( ) einbauen bzw.
( ) nicht einbauen (geeignet ankreuzen)
weil (kurze Begründung):
_______________________________________________________________ _______________________________________________________________
c) === Das HTTP-Protokoll spezifiziert keine maximale Anzahl von URL-Zeichen. Dennoch gibt es server-browser-abhängige Begrenzungen. Welche maximale Anzahl von URL-Zeichen wird (praktisch immer) unterstützt?
Geschätzte max.Anz. URL-Zeichen = ___________________________________
d) === Eine XHTML-Seite enthält mehrere a-Tags. Mit Hilfe von DOM-Zugriffen sollen (unmittelbar nach dem Laden der Seite, zu Testzwecken) alle "href's"- und "taget"-Werte zeilenweise in einer alert()-Box angezeigt werden.
Bitte die folgende Funktion ergänzen, die im XHTML-Header stehen soll:
<script type="text/javascript"> /*_________________*/
_________________________ = function ()
{
var a_objekte = __________________________________________
var str = "Anzahl von a-tags = " + _______________________
for (var i=0; i < ____________________; i++) {
str += "______ href = " + ____________________________
str += "______ target = " + ____________________________
} alert(str);
};
/*_________________*/ </script>
e) === Alle a-Tags einer Seite sollen den folgenden Style erhalten:
a {
font-size: 1.2em;
background-color: #e8e0d8;
color: #aaf;
text-decoration: none;
text-align: center;
border-width: 4px;
border-color: #00f;
border-style: outset;
}
Die Style-Zuweisung an die a-Tags soll mit Hilfe von JavaScript erfolgen.
Die folgende Funktion set_all_a_tags_styles()
ist entsprechend zu ergänzen
:
function set_all_a_tags_styles()
{
var a_ = document.__________________________________;
for(var i = 0; i < a_.length; i++)
{
var _____ = a_[i].______________;
_____________________ = "1.2em"; _____________________ = "#e8e0d8";
_____________________ = "#000000"; _____________________ = "none";
_____________________ = "center"; _____________________ = "4px";
_____________________ = "#00f"; _____________________ = "outset";
}
}
f) === Wie kann
diese obige JavaScript-Funktion set_all_a_tags_styles()
im JavaScript-Tag des XHTML-Headers aufgerufen werden?
_________________________________________________________
_________________________________________________________
g) === Wo im XHTML-Body muß ein JavaScript-Tag stehen,
wenn dort der Funktionsaufruf set_all_a_tags_styles() steht?
_________________________________________________________
TEIL A: Objekte
A1) ===
Im folgenden liegen lediglich "flache Objekte" vor
(ohne "Tiefenschachtelungen"), wie z.B.:
var obj2 = {u:"U2", v:"V2", w:2};
a) Es soll eine Funktion toString(obj) geschrieben werden,
die zu einem gegebenen Objekt (z.B. obj2) einen String s,
etwa {u:"U2", v:"V2", w:2} zurück gibt.
Eine Objekt-Komponente bestehen aus name : obj[name].
Bitte ergänzen:
function toString(obj) {
var s = "{ ";
for ( __________________________________ )
{
if ( s !== "{ " ) s += _______________;
_______________________________________
}
return s + " }";
}
A2) ===
Nun soll eine Funktion extend() ergänzt werden,
die mehrere "flache Objekte" in ein Objekt zusammen mischt.
extend() soll eine Parameterliste mit variabler Länge haben,
d.h. der arguments-Array enthält die Aufrufparameter.
function extend() {
var len = arguments.length;
var r = {};
for ( i=0; i < len; i++ )
{
________________________________________________________________
________________________________________________________________
________________________________________________________________
________________________________________________________________
________________________________________________________________
} return r;
}
A3) === Welche Ausgabe liefert das folgende Code-Stück, wenn die obigen Funktionen fehlerfrei sind?
var obj0 = {a:"A0", b:0 };
var obj1 = {a:"A1", b:"B0" };
var obj2 = {u:"U2", v:"V2", w:2};
var obj3 = extend( obj0, obj1, obj2);
var s="";
s += "var obj0 = " + toString(obj0);
s += "var obj1 = " + toString(obj1);
s += "var obj2 = " + toString(obj2);
s += "var obj3 = " + toString(obj3);
s += "typeof(obj0.b) = " + typeof(obj0.b);
s += "typeof(obj3.w) = " + typeof(obj1.b);
alert(s);
Anzeige von s sieht etwa so aus:
________________________________________________________________
________________________________________________________________
________________________________________________________________
________________________________________________________________
________________________________________________________________
________________________________________________________________
A4) ===
Die obige Funktion
function toString(obj) { ... }
verwendet die Object-Parameter-Übergabe toString(obj).
Nun sollen eine "object-like"-Aufrufart verwendbar werden,
etwa so
var s=""; s += "var obj0 = " + obj0.toString(); s += "var obj1 = " + obj1.toString();
Wie würde sie die obigen Funktionsdefinition
function toString(obj) { ... }
ersetzen? Bitte eintragen:
Object.prototype.__________________ = ____________________________
{
... wie oben,
als übergebenes Objekt wird _______________ verwendet.
}
TEIL B: Frame und URL
Eine frameset-Seite wie die folgende kann
menu.htm in den FRAME_MENU und
info.htm in den FRAME_INFO laden.
Beim Wechseln der Inhalte von FRAME_INFO
ändert sich nicht die URL (frameset).
Dadurch sind keine Seiten-Bookmark-Zuordnungen und keine
Seiten-Inhalts-Zuordnungen (Roboter) möglich.
Nun soll dies dennoch programmtechnisch realisiert werden.
<frameset cols="140,*" > <frame src="menu.htm" name="FRAME_MENU" /> <frame src="info.htm" name="FRAME_INFO" /> <noframes> ... </noframes> </frameset>
Hilfen:
Besteht eine URL aus den Teilen a?b
(Beipiel:
a = "http://www.fh-giessen.de/~hgxx/index.htm"
b = "/sub/page.htm"),
so
ermittelt url = self.location.toString()
den String a?b, d.h.
"http://www.fh-giessen.de/~hgxx/index.htm?/sub/page.htm".
Durch b = self.location.search.substring(1) kann der String "/sub/page.htm"
ermittelt werden.
Um den FRAME_INFO kann geladen werden mit frame.location.href = bb;
wobei bb = "http://www.fh-giessen.de/~hgxx/sub/page.htm" ist.
b allein reicht nicht aus.
B1) === Bitte die folgende JavaScript-function call_url_im_frameset(frame), die in index.htm gebraucht wird, ergänzen:
function call_url_im_frameset(frame) {
var b = ______________________________________________
if(b.length < 1) _____________________;
var url = self.location.toString();
var a = url.substring(0, ____________________________________);
bb = a.substring(0, a.lastIndexOf(_________________)+1) + b;
frame.location.href = bb;
}
B2) === Damit wird eine URL-Zuordnung zu Frame-Subseiten möglich, wenn im frameset-Tag eingetragen wird:
<frameset cols="140,*" ___________ ="call_url_im_frameset(this.___________)"> ... </frameset>
Diese Aufgabe bestaht darin, ein XHTML-Formular vor dem "upload" zum Server infolge von action="..." vorher clientseitig im Browser mit onsubmit="..." zu prüfen. Es soll also mit Hilfe der bereits includierten Bibliothek jQuery die function validiere() erstellt werden. So etwa stehe das XHTML-Formular in der Seite:
<form id="FORM" method="post" enctype="multipart/form-data"
onsubmit = "return validiere();"
action = "javascript:alert('testet lediglich onsubmit()');">
<pre>
Name <input type="text" name="NAME" value="" />
Ort <input type="text" name="ORT" value="" />
Telefon-Nummer <input type="text" name="TELEFON_NR" value="0123456" />
E-Mail-Adresse <input type="text" name="EMAIL_ADR" value="aa@bb.cc" />
Kommentar <textarea name="KOMMENTAR" rows="4" cols="30"></textarea>
<input type="submit" name="_SUBMIT" value="Senden" />
</pre>
Für alle zu prüfenden Formularfelder die minimale und maximale Anzahl von einzugegebenden Zeichen geprüft werden. Zur Identifizierung erhält jedes Formularfeld ein eindeutiges name="..." - Attribut. Zur besseren Übersicht sind diese XHTML-name-Bezeichner hier in Grossbuchstaben geschrieben. Der String x enthält die zu prüfenden Eingabe-Elemente (x = String für die zu prüfenden Elemente):
var x = 'NAME:t:3:99|ORT:t:3:99|TELEFON_NR:n:6:16| ... kein Umbruch
EMAIL_ADR:e:5:99|KOMMENTAR:t:3:10000';
hierbei steht z.B. :3:99 für :min:max-Anzahl von Zeichen und
"t" für <input type="text" für die Eingabe von beliebigen Zeichen
"n" für <input type="text" aber nur numerische Eingaben
"e" für <input type="text" aber für ein korrekte E-Mail-Eingabe
Hieraus werden später die Array-Variable xxx geholt, deren Teile ermittelt werden mit Hilfe von
teilstrings = str.split(Trennzeichen);
Für xxx[2] ergibt sich dann z.B.:
xxx[2]["nam"] = "TELEFON_NR"; // entsprich im XHTML name="TELEFON_NR"
xxx[2]['typ'] = "n" // Erkennungstyp n bedeutet <input type="text"
und nur Ziffern erlaubt
xxx[2]['min'] = 6 // Minimale Anzahl von einzugebenden Zeichen
xxx[2]['max'] = 16 // Maximale Anzahl von einzugebenden Zeichen
Bitte Durchdenken und ergänzen sie die function validiere(). In validiere() sind Ergänzungsstellen durch /*..*/ markiert. Zugehörigen (erklärenden) Fragen, die das Ergänzen der function validiere() erleichtern können, kommen jetzt:
/*1*/ ermittle Anz. xarrlen der Elemente des JavaScript-Array xarr
/*2*/ hier wird für xxx[i] ein "new" gebraucht
/*3*/ xxx[i] wird nun an den Stellen ":" gesplittet
/*4*/ parseInt() kann aus tem[2], tem[3] Integer-Zahlen machen
/*5*/ hier werden alle vorhandenen XHTML-Eingabe-Elemente des
Formulares durchlaufen, wobei in $("________")
der Selektor eingetragen wird, der von id="FORM" alle
Eingabe-Elemente (input's einschliesslich der Textarea)
ermittelt
/*6*/ setze den Hintergrund des aktuellen
formular-Elementes obj auf weiss
/*7*/ ok soll true werden, wenn die tatsächliche
Anzahl len zwischen "min" und "max" liegt
/*8*/ wegen !ok liegt ein Fehler vor, deshalb
setze background-color auf rot
/*9*/ Ist der String val eine numerische Zahleneingabe?
regExpr.test(val) liefert true/false
/*10*/ setze im Fehlerfall background-color auf blau
/*11*/ teste mit einem regExpr das EMAIL_ADR-Feld
/*12*/ setze im Fehlerfall background-color auf gelb
/*13*/ setze im Fehlerfall background-color auf grün
/*14*/ Welchen Wert muss die Funktion validiere() zurück geben
Wenn das form-Tag des Formulares kein action="..."
auslösen soll?
========================================================================
function validiere() {
// x = String für die zu prüfenden Formular-Elemente
var x = 'NAME:t:3:99|ORT:t:3:99| ...zeilenfortsetzung...
TELEFON_NR:n:6:16|EMAIL_ADR:e:5:99|KOMMENTAR:t:3:10000';
var xarr = new String(x).split("|");
/*1*/
var xarrlen = __________________, i, k, ok, ok1, tem;
// Parse xarr und schreibe die "token" in den Array xxx
var xxx = []; // xxx soll die geparsten Teile von x aufnehmen
for(i=0; i < xarrlen; i++) {
/*2*/
xxx[i] = _______________________;
/*3*/
tem = new String(xarr[i]).split(_____________________);
xxx[i]["nam"] = ___________;
xxx[i]["typ"] = ___________;
/*4*/
xxx[i]["min"] = ____________________________;
xxx[i]["max"] = ____________________________
}
/*5*/
$("_____________________").each(function(k)
{
var obj = $(this); // obj ist das aktuelle input-Element
var tag = obj.get(0).nodeName.toLowerCase();
var name = obj.attr("name"); if(!name) alert(tag+" name=..??");
var type = obj.attr("type"); if(!type) type = tag;
var val = obj.attr("value");if(!val) val ="";
var len = val.length; // Anzahl der zeichen von val
/*6*/
obj.css("background-color", _________________________ );
// jetzt wird das aktuelle Element (obj hat tag, name, typ, val)
// gegen alle Prüfvorschriften des xxx[i]-Elementes getestet
for(i=0; i < xarrlen; i++) {
if( name != xxx[i]["nam"] ) ________________________;
/*7*/
var ok = ( (len >= ____________________________)
&& (len <= ____________________________));
switch(tag) {
case "input":
if (("t" == xxx[i]["typ"])&&(!ok)) { /*8*/
obj.css(_____________________________________,"#f00");
} else
if("n" == xxx[i]["typ"]) { /*9*/
ok1 = /________________________________________/.test(val);
/*10*/
if(!ok1 || !ok) ______________________________________________
} else
/*11*/
if("e" == ______________________________) { /*12*/
ok1 = /______________________________________________/i.test(val);
if(!ok1 || !ok) ______________________________________________
} break;
case "textarea": /*13*/
________________________________________________________________
________________________________________________________________
________________________________________________________________
break;
} // ende switch
} // ende for
});// ende each
return __________; /*14*/
}