Javascript Tutor - Lektion 17
Zuerst lass uns eine einfache Funktion erstellen, die etwas in den rechten Frame schreibt. Bei der Nutzung von Javascript in Frames fand ich heraus, das es am besten ist, wenn man so viel Code wie möglich in die oberste Frameset Seite schreibt (master.html in diesem Besipiel). Also öffne die master.html noch mal und füge folgendes hinzu...
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT language="JavaScript"><!--
function RechtsSchreiben()
{
}
//--></SCRIPT>
</HEAD>
<FRAMESET COLS="200,*">
<FRAME SRC="links.html" NAME="linkerframe">
<FRAME SRC="rechts.html" NAME="rechterframe">
</FRAMESET>
</HTML>
|
Bis jetzt noch eine leere Funktion. Nun lass uns meine Namen in den rechten Frame schreiben.
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT language="JavaScript"><!--
function RechtsSchreiben()
{
window.rightframe.document.clear();
window.rightframe.document.open();
window.rightframe.document.write("Joe");
window.rightframe.document.close();
}
//--></SCRIPT>
</HEAD>
<FRAMESET COLS="200,*">
<FRAME SRC="links.html" NAME="linkerframe">
<FRAME SRC="rechts.html" NAME="rechterframe">
</FRAMESET>
</HTML>
|
Verstehst Du, was wir hier machen? Im Grunde ist es ein einfaches document.write(), wir sagen aber, das es im Dokument im rechten Frame geschehen soll. Es sind auch noch ein paar weitere Zeilen notwendig, wenn man in ein Fenster (oder Frame) schreibt. Zuerst leeren wir es clear(), dann öffnen wir es open(), schreiben etwas hinein write() und schließen es close().
Wir sind noch nicht fertig. Wir müssen den Link erstellen, der die Funktion aufruft. Öffne left.html noch mal und füge folgendes hinzu...
<HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> <A HREF="javascript:top.RechtsSchreiben()">Klicke hier</A> </BODY> </HTML> |
Beachte, dass wir die Funktion mit top.RechtsSchreiben() aufrufen. Wenn wir einfach nur RechtsSchreiben() gesagt hätten, würde der Browser die Funktion im selben Dokument suchen, aus dem sie aufgerufen wurde. Da unsere Funktion im obersten Frameset steht, müssen wir darauf mit top.RechtsSchreiben() verweisen. Vielleicht ein wenig verwirrend, aber nicht zu schwierig, oder.
Studiere das letzte Beispiel, bis Du es verstanden hast.
Was noch erwähnt werden sollte, ist, dass wir nur "Joe" in das Dokument geschrieben haben, überhaupt keine HTML Tags. Wenn Du Dir den Quelltext ansiehst, nachdem das Dokument geschrieben wurde, siehst Du nur "Joe"... keine <HTML>, <HEAD> oder <BODY> Tags. Das wäre nur da, wenn wir es auch rein geschrieben hätten...
window.rechterframe.document.clear();
window.rechterframe.document.open();
window.rechterframe.document.write("<HTML>");
window.rechterframe.document.write("<HEAD><TITLE></TITLE></HEAD>");
window.rechterframe.document.write("<BODY>");
window.rechterframe.document.write("Joe");
window.rechterframe.document.write("</BODY>");
window.rechterframe.document.write("</HTML>");
window.rechterframe.document.close();
Obwohl es normalerweise eine gute Idee ist, ein komplettes HTML Dokument zu schreiben, können wir das aus Gründen der Einfachheit überspringen.
Übung: Ändere das letzte Beispiel so, das es einen Wert an die Funktion im Link sendet. Hinweis: es wird wieder das Problem der verschachtelten Hochkommas auftreten, obwohl es hier etwas anders ist. Die Lösung liegt hier in der Nutzung des einfachen Hochkommas (') für den zu übergebenden Wert ...
<A HREF="javascript:top.RechtsSchreiben('Frank')">Klicke hier</A>
Obgleich der Browser durch mehrer verschachtelte Hochkommas verwirrt wird, kann er ein Paar einzelne Hochkommas in einem Paar doppelte Hochkommas verarbeiten.
Übung: Finde einen Weg, eine PopUpBox zu öffnen, die nach dem Namen (oder so) fragt und schreibe die Nutzer-Eingabe in den rechten Frame.
Übung: Erweitere die obige Lösung, dass Du nicht nur nach dem Namen fragst, sondern auch nach dem Alter und nach einem hexadezimalen Wert für eine Hintergrundfarbe (wie CCCCCC). Schreibe den rechten Frame, etwa "Paul ist 22 Jahre alt" and zeige das Dokument mit der gewählten Hintergrundfarbe an (dies geschieht durch Schreiben des BODY Tag, nicht nur durch Wechseln der Farbe per Javascript). Wenn Du schon dabei bist, schreibe eine Standardfarbe in die PopUpBox wie hier.
Übung: Anstatt drei PopUpBoxen zu öffnen, nutze ein einfaches Formular mit drei Eingabefeldern und einem Button. Wenn der Button gedrückt wird, werden die Werte aus den Feldern genommen und für das Schreiben im rechten Frame verwendet.
Bleibe hartnäckig. Es nutzt mehrere Sachen, die wir in der Vergangenheit gelernt haben und ist nicht so einfach, wie es aussieht. Wenn es nicht funktioniert, findest Du den Schlüssel in den Fehlermeldungen, die erzeugt werden. Hinweis: Ich denke, Fehlermeldungen im Netscape Browser sind BEI WEITEM aussagefähiger als die vom Internet Explorer. Ich nutze Nestcape als Programmier-Browser, und test die Seiten und Scripte dann im in Explorer.
Übe so lange, bis die die gesamte Übung fertig hast und sie so arbeitet wie erwartet. (Selbst wenn es drei Tage dauert!). Am besten lernt man, wenn man sich mit Problemen herumschlägt.
Übung: Nutze das Simple Mathe-Scipt, berechne wie viele Stunden der Nutzer alt ist und füge das zu der Seite hinzu. Etwa "Du bist über 1000 Stunden alt!"
| << Zurück Weiter >> |
 |
|
 |
