CodeGym/Java Course/Module 3/Interactie van JavaScript-code met de browser

Interactie van JavaScript-code met de browser

Beschikbaar

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 documentdegene 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 consoledegene 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 documentin consoleuw script kunt schrijven, zijn hun namen window.documenten window.console.

4.2 Dialogen in JavaScript

waarschuwing() methode

Het an object windowheeft 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- Cancelvraag 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 OnLoadhet 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>

Opmerkingen
  • Populair
  • Nieuw
  • Oud
Je moet ingelogd zijn om opmerkingen te kunnen maken
Deze pagina heeft nog geen opmerkingen