4.1 Browserobjekte
Wie Sie bereits wissen, funktioniert die JavaScript-Sprache innerhalb des Browsers und muss daher irgendwie mit demselben Browser interagieren. Zu diesem Zweck verfügt der Browser über mehrere Objekte und Funktionen, die in JavaScript verfügbar sind.
Das erste ist an object window
, das das Browserfenster beschreibt. Oder besser gesagt, ich habe früher beschrieben, als Browser keine Tabs hatten. Nun beschreibt das Fensterobjekt den aktuellen Browser-Tab, in dem die Seite mit dem Skript geladen wird.
Zweitens ist dieser an object document
für das im Tab angezeigte Dokument verantwortlich. Das könnte etwas verwirrend sein. Nehmen wir der Einfachheit halber an, dass es sich bei dem Dokument um das handelt, was dem Benutzer angezeigt wird, und bei dem Fenster, in dem dieses Dokument angezeigt wird.
Drittens ist dieser an object console
für die Ausgabe an die Browserkonsole verantwortlich. Ja, Browser verfügen auch über eine Konsole, diese dient hauptsächlich dem Debuggen des Skripts und der Anzeige von Fehlermeldungen. Normalerweise können Sie es öffnen, indem Sie die F12-Taste in Ihrem Browser drücken.
Object window
ist das Objekt der obersten Ebene für alle Seitenobjekte. Und obwohl Sie Objektnamen direkt document
in console
Ihr Skript schreiben können, sind deren Namen window.document
und window.console
.
4.2 Dialoge in JavaScript
Alert()-Methode
Es an object window
verfügt außerdem über mehrere Funktionen, die für das Seitenskript sichtbar sind. Am häufigsten wird das verwendet alert()
. Es ermöglicht Ihnen, ein Dialogfeld mit einer Nachricht an den Benutzer anzuzeigen. Das Skript wird dann angehalten, bis der Benutzer auf „OK“ klickt.
Beispiel:
alert("JavaScript is the best!");
prompt()-Methode
Es gibt auch eine Funktion, mit der Sie den Benutzer auffordern können, einen Wert einzugeben – diese ist prompt()
.
Beispiel:
var age = prompt("Enter Year of Birth");
bestätigen()-Methode
Sie können ein Dialogfeld mit zwei Schaltflächen anzeigen Ok
– Cancel
fragen Sie den Benutzer nach einer Aktion.
Beispiel:
var isOK = confirm("Are you ready");
4.3 onload()-Ereignis
Und noch ein nützlicher und interessanter Moment. Das Browserfenster verfügt über ein Ereignis , das ausgelöst wird, wenn das Dokument vollständig geladen ist. Sie können Code angeben, der ausgeführt werden soll, nachdem das Dokument geladen und angezeigt wurde.
Dies kann auf drei Arten erfolgen.
Erstens können Sie JavaScript-Code als Attributwert direkt in eine HTML-Seite einbetten:
<body onload="alert('document loaded');">
<img src="big-image.png">
</body>
Zweitens können Sie JavaScript-Code einfach in eine HTML-Seite einbetten:
<head>
<script>
function load()
{
alert('document loaded');
}
window.onload = load;
</script>
</head>
<body>
<img src="big-image.png">
</body>
Drittens können wir es etwas kürzer schreiben, indem wir eine anonyme Funktion deklarieren:
<head>
<script>
window.onload = function () {
alert('document loaded');
}
</script>
</head>
<body>
<img src="big-image.png">
</body>
4.4 onclick()-Ereignis
Und schließlich ist noch ein weiteres wichtiges Ereignis (Ereignis) event OnClick
. Dies geschieht bei jedem Element, auf das der Benutzer geklickt hat. Da event OnLoad
es auf verschiedene Arten eingestellt werden kann, geben wir hier nur die einfachste an:
<body>
<img src="big-image.png" onclick="alert('user clicked on the image');">
</body>
GO TO FULL VERSION