HTML-Schnittstelle implementieren
<!DOCTYPE html> <html> <head> <title>Select and Go Navigation</title> <script src="script01.js"></script> <link rel="stylesheet" href="script01.css" rel="external nofollow" > </head> <body> <form action="gotoLocation.cgi" class="centered"> <select id="newLocation"> <option selected>Select a topic</option> <option value="script06.html">Cross-checking fields</option> <option value="script07.html">Working with radio buttons</option> <option value="script08.html">Setting one field with another</option> <option value="script09.html">Validating Zip codes</option> <option value="script10.html">Validating email addresses</option> </select> <noscript> <input type="submit" value="Go There!"> </noscript> </form> </body> </html>
Menünavigation implementieren
window.onload = initForm;
window.onunload = function() {};
function initForm() {
document.getElementById("newLocation").selectedIndex = 0;
document.getElementById("newLocation").onchange = jumpPage;
}
function jumpPage() {
var newLoc = document.getElementById ("newLocation");
var newPage = newLoc.options [newLoc.selectedIndex].value;
if (newPage != "") {
window.location = newPage;
}
}
Das Folgende ist die Quellcode-Analyse
1.
window.onload = initForm;
window.onunload = function() {};
Wenn das Fenster geladen wird, wird die Funktion initForm() aufgerufen. Die nächste Zeile bedarf einer Erklärung, da es sich um eine Problemumgehung für das seltsame Verhalten einiger Browser handelt.
Wenn das Fenster entladen wird (d. h. das Fenster geschlossen wird oder der Browser zu einer anderen URL wechselt), rufen wir eine anonyme Funktion auf, d. h. eine Funktion ohne Namen. In diesem Beispiel hat die Funktion nicht nur keinen Namen, sondern sie führt auch überhaupt nichts aus. Diese Funktion wird bereitgestellt, da onunload auf etwas eingestellt sein muss. Andernfalls wird das Onload-Ereignis nicht ausgelöst, wenn auf die Zurück-Schaltfläche des Browsers geklickt wird, da die Seite in einigen Browsern (z. B. Firefox und Safari) zwischengespeichert wird. Wenn Sie onunload irgendetwas tun lassen, wird die Seite nicht zwischengespeichert. Wenn der Benutzer also einen Schritt zurücknimmt, tritt das Onload-Ereignis ein.
Anonym bedeutet, dass zwischen Funktion und () kein Name steht. Dies ist die einfachste Möglichkeit, onunload auszulösen, aber nichts tun zu lassen. Wie bei jeder Funktion enthalten geschweifte Klammern den Inhalt der Funktion. Die geschweiften Klammern sind hier leer, da diese Funktion nichts bewirkt.
2.
document.getElementById("newLocation").selectedIndex = 0;
document.getElementById("newLocation").onchange = jumpPage;
In der Funktion initForm() ruft die erste Zeile das Menü auf der HTML-Seite ab (ihre ID ist newLocation) und setzt ihre selectedIndex-Eigenschaft auf Null, was dazu führt, dass „Thema auswählen“ angezeigt wird.
Die zweite Zeile weist das Skript an, die Funktion „jumpPage()“ aufzurufen, wenn sich die Menüauswahl ändert.
3.
var newLoc = document.getElementById("newLocation");
In der Funktion „jumpPage()“ sucht die Variable „newLoc“ nach dem Wert, den der Besucher im Menü ausgewählt hat.
4.
var newPage = newLoc.options[newLoc.selectedIndex].value;
Beginnen Sie mit dem Code in eckigen Klammern und arbeiten Sie sich nach außen vor. newLoc.selectedIndex ist eine Zahl von 0 bis 5 (weil es 6 gibt
).
Menüoptionen. Denken Sie daran, dass die JavaScript-Nummerierung häufig auf Null basiert. Nachdem Sie diese Nummer erhalten haben, holen Sie sich als nächstes den entsprechenden Menüpunkt
Der Wert von ist der Name der Webseite, zu der wir springen möchten. Weisen Sie dann das Ergebnis der Variablen newPage zu.
5.
if (newPage != "") {
window.location = newPage;
Diese bedingte Anweisung prüft zunächst, ob newPage nicht leer ist. Mit anderen Worten: Wenn newPage einen Wert hat, lassen Sie das Fenster zu
gehen
Die vom ausgewählten Menüelement angegebene URL.
