|
|
Sie sind hier:
Startseite • Studium • Lerninhalte • JSC01
Geprüfter Webmaster - Lerninhalte
JSC 01 - JavaScript 1
Aufgabe 1: Sie haben den Auftrag bekommen, für einen Internet- Versandhandel
diese Aufgaben zu lösen:
Eine Begrüßungsseite, die den Nutzer mit Namen "anspricht" und das Datum des letzten Besuchs der Webseite zeigt. Einen Preisumrechner von Dollar in Euro (oder umgekehrt) in einer Webseite. Eine Seite, die den Warenkorb des Benutzers zusammenfasst und alle Artikel mit aktuellen
Preisen und Bildern anzeigt.
Nennen Sie zu jeder der Aufgaben die unterschiedlichen Anforderungen und die
Vor- und Nachteile eines Einsatzes von JavaScript. Stellen Sie dabei zunächst fest,
ob eine Anwendung auf dem Client oder auf dem Server sinnvoller ist? Wie können in a. die Daten abgespeichert werden, sodass die
Webseite den Benutzernamen gleich beim Aufruf "kennt"? Falls Sie eine der Aufgaben nicht mit JavaScript lösen, welche Technik schlagen
Sie vor? Kann man JavaScript für eine unterstützende Teilaufgabe einsetzen,
sodass der Server entlastet wird?
Lösung
Begrüssungsseite mit persönlicher Ansprache:
Diese Anwendung soll vom Client aus ausgeführt werden. Dazu wird von JavaScript
auf der Festplatte des Benutzers ein "cookies.txt" angelegt, bei dem die
Benutzerdaten (in diesem Fall Name und Datum) über einen bestimmten Zeitraum gespeichert
(archiviert) sind. Bei einem erneuten Aufruf der Webseite sendet der Client die Cookie-
Informationen über HTTP- Protokoll an den Server. Voraussetzung ist, dass die Cookies
vom Anwender frei geschaltet sind. Preisumrechner: Diese Anwendung erfolgt zum größten Teil auf dem Server.
Dazu wird im Header der HTML- Datei ein JavaScript integriert, bei dem die benötigten
Funktionen definiert sind. Im Body- Bereich derselben HTML- Datei ist ein weiterer JavaScript
mit den entsprechenden Befehlen platziert. Der Anwender kann gewünschte Angaben machen, die
dann vom Client an den Server gesendet werden. Der Server verarbeitet diese Angaben und sendet
sie an den Client zurück, der das Ergebnis ausgibt. Warenkorb mit aktuellen Preisen: Diese Anwendung basiert auf einer Zusammenarbeit von
Client und Server. Der Warenkorb selbst kann etwa in einer Cookie- Datei auf dem Client
(Rechner des Anwenders) für einen bestimmten Zeitraum (z.B. 10 Tage) abgespeichert werden. Die
aktuellen Preise und Bilder hingegen müssen von einer Datenbank auf dem Server aufgerufen werden.
Hier stößt JavaScript an seine Grenzen, da es keine Anbindung an die Datenbank erlaubt.
Sinnvoll ist die Anwendung mit Hilfe von PHP, der in der Lage ist, auf dem Server Daten anzulegen
und zu verändern sowie Datenbankzugriffe auszuführen. Auch kann der PHP- Script auf die
Cookies zugreifen, die auf dem Client abgelegt sind.
[Lösung schließen]
Aufgabe 2: Hier ein kurzes Beispiel für eine HTML- Seite mit JavaScript:
<html>
<headl>
<title>Testseite zur Aufgabe 2</title>
</head>
<body>
Dies ist eine Testseite.<br />
<script type="text/javascript">
<!--
// Hier kommt der JavaScript- Text
document.wrtie("Ihr Browser heisst: " + navigator.appName);
// -->
</script>
<br />
Hier steht der normale HTML- Text.
</body>
</html>
Wozu dienen die Zeilen <!-- und //-->
für die HTML-Seite?
Lösung
Die Zeilen <!-- und --> dienen zum internen Auskommentieren
von Inhalten oder Befehlen in einem HTML- Quelltext und werden vom Browser unterdrückt,
d.h. bei der Präsentation nicht angezeigt. Die Zeile // kennzeichnet ein internes
Kommentar innerhalb von JavaScript. Hier können etwa Erklärungen zu den einzelnen
JavaScript- Funktionen oder -Anweisungen notiert werden. Die Kombination //-->
beendet somit sowohl den JavaScript- als auch den HTML- Kommentar.
[Lösung schließen]
Was kann geschehen, wenn die beiden Zeilen weggelassen werden?
Lösung
Die alten Browser- Versionen kennen JavaScript nicht und dementsprechend können sie
auch nichts mit dem script- Element anfangen. Wenn diese Browser auf einen JavaScript- Bereich
sto?en, wird dessen Inhalt dann so dargestellt, als handelt es sich um normalen Text in HTML- Datei.
Dadurch bekommt der Anwender den Script- Code zu Gesicht. Dies soll ein HTML- Kommentar, der den
Code umschließt, verhindern. Browser, die das script- Element kennen, können die
Anweisungen in JavaScript trotzdem einlesen.
[Lösung schließen]
Wass passiert, wenn man eine der beiden Zeilen vergisst oder falsch
schreibt, z.B. <!- oder // ->?
Lösung
Bei der falschen Syntax im Einleitungs- Tag kann es passieren, dass der gesamte Kommentar-
Inhalt im Browser als Text dargestellt wird. Bei der falschen Syntax im End- Tag wird hingegen
der gesamte darauf folgende HTML- Inhalt nicht angezeigt.
[Lösung schließen]
Aufgabe 3:
- var m;
- var n = null;
- var x = 0;
- var y = 055;
- var z = 0.5;
Welche der Variablen m, n, x, y, z weurden durch die oben
stehenden Anweisungen definiert?
Sind alle Anweisungen gültige Deklarationen? Welchen Datentyp und welchen Wert haben die Variablen?
Aufgabe 4: Mit welchem Attribut wird ein externes JavaScript referenziert?
Nennen Sie bitte den Fall, in dem ein externes JavaScript benötigt wird.
Lösung
Mit der folgenden Anweisung kann ein externes JavaScript in HTML- Code integriert werden:
<script src="zusatz.js" type="text/javascript"></script>
Es ist sinnvoll, ein separates JavaScript zu verwenden, wenn man die gleichen Funktionen auf mehreren
HTML- Seiten verwenden möchte. Als Beispiel wäre ein Kalender zu nennen, der auf jeder HTML-
Seite das aktuelle Datum ausgeben soll.
[Lösung schließen]
Aufgabe 5: Ersetzen Sie in der Vorlage die Fragezeichen so, dass die HTML- Seite unter
Benutzung von JavaScript- Streustrukturen Folgendes leistet:
Anlegen eines Arrays von sechs Lottozahlen, gefüllt mit den Werten 9, 15, 33, 34, 42, 46 Ausgeben der Zahlen mittels einer Schleife in folgender Form (Achten Sie auch auf Komma und Punkt):
Die aktuellen Lottozahlen lauten: 9, 15, 33, 34, 42, 46
<html>
<headl>
<title>Lottozahlen - Aufgabe 4</title>
<script language="JavaScript">
<!--
// Hier wird das Array für die Lottozahlen angelegt
var lotto = new Array(6) ;
lotto[?] = 9;
???????? = 15;
??????[?] =
??????[?] =
??????????
??????[5] = 46;
// -->
</script>
</head>
<body>
Die Lottozahlen lauten:
<script language="JavaScript">
<!--
// -->
var ?????
while (i != ?)
{
if (i == 5)
document.write(lotto[?] + ".");
else
document.write(lotto[?] + "?");
i = ?????????;
}
</script>
</body>
</html>
Lösung
Das vollständige HTML- Code sieht folgendermaßen aus:
<html>
<headl>
<title>Lottozahlen - Aufgabe 4</title>
<script language="JavaScript">
<!--
// Hier wird das Array für die Lottozahlen angelegt
var lotto = new Array(6) ;
lotto[0] = 9;
lotto[1] = 15;
lotto[2] = 33;
lotto[3] = 34;
lotto[1] = 42;
lotto[5] = 46;
// -->
</script>
</head>
<body>
Die Lottozahlen lauten:
<script language="JavaScript">
<!--
// -->
var i = 0;
while (i != 6)
{
if (i == 5)
document.write(lotto[i] + ".");
else
document.write(lotto[i] + "?");
i = i++;
}
</script>
</body>
</html>
[Lösung schließen]
Einführung in das Multimediarecht ... JavaScript 2 |
