4.1 Browser-objecten
Zoals je al weet, werkt de JavaScript-taal in de browser, dus het moet op de een of andere manier communiceren met dezelfde browser. Om dit te doen, heeft de browser verschillende objecten en functies die beschikbaar zijn via JavaScript.
De eerste is an object window
, die het browservenster beschrijft. Of beter gezegd, ik beschreef altijd wanneer browsers geen tabbladen hadden. Nu beschrijft het window-object het huidige browsertabblad waarin de pagina met het script is geladen.
Ten tweede is dit an object document
degene die verantwoordelijk is voor het document dat op het tabblad wordt weergegeven. Dit is misschien een beetje verwarrend. Laten we voor de eenvoud zeggen dat document is wat wordt weergegeven aan de gebruiker, en venster is waarin dit document wordt weergegeven.
Ten derde is dit an object console
degene die verantwoordelijk is voor de uitvoer naar de browserconsole. Ja, browsers hebben ook een console, deze wordt voornamelijk gebruikt voor het debuggen van het script en het weergeven van foutmeldingen. U kunt het meestal openen door op de F12-knop in uw browser te drukken.
Object window
, is het object op het hoogste niveau voor alle pagina-objecten. En hoewel u direct objectnamen document
in console
uw script kunt schrijven, zijn hun namen window.document
en window.console
.
4.2 Dialogen in JavaScript
waarschuwing() methode
Het an object window
heeft ook verschillende functies die zichtbaar zijn voor het paginascript. De meest gebruikte is de alert()
. Hiermee kunt u een dialoogvenster weergeven met een bericht voor de gebruiker. Het script wordt vervolgens opgeschort totdat de gebruiker op OK klikt.
Voorbeeld:
alert("JavaScript is the best!");
prompt() methode
Er is ook een functie waarmee u de gebruiker kunt vragen een waarde in te voeren - dit is prompt()
.
Voorbeeld:
var age = prompt("Enter Year of Birth");
confirm() methode
U kunt een dialoogvenster met twee knoppen weergeven Ok
- Cancel
vraag de gebruiker om een actie.
Voorbeeld:
var isOK = confirm("Are you ready");
4.3 onload()-gebeurtenis
En nog een nuttig en interessant moment. Het browservenster heeft een gebeurtenis die wordt geactiveerd wanneer het document volledig is geladen. U kunt code opgeven die moet worden uitgevoerd nadat het document is geladen en weergegeven.
Dit kan op drie manieren.
Ten eerste kunt u JavaScript-code rechtstreeks in een HTML-pagina insluiten als een kenmerkwaarde:
<body onload="alert('document loaded');">
<img src="big-image.png">
</body>
Ten tweede kunt u JavaScript-code eenvoudig in een HTML-pagina insluiten:
<head>
<script>
function load()
{
alert('document loaded');
}
window.onload = load;
</script>
</head>
<body>
<img src="big-image.png">
</body>
Ten derde kunnen we het iets korter schrijven door een anonieme functie te declareren:
<head>
<script>
window.onload = function () {
alert('document loaded');
}
</script>
</head>
<body>
<img src="big-image.png">
</body>
4.4 onclick()-gebeurtenis
En tot slot is er nog een belangrijke gebeurtenis (event) event OnClick
. Dat gebeurt op elk element waarop de gebruiker heeft geklikt. Net zoals event OnLoad
het op verschillende manieren kan worden ingesteld, geven we alleen de eenvoudigste:
<body>
<img src="big-image.png" onclick="alert('user clicked on the image');">
</body>
GO TO FULL VERSION