CodeGym/Java kursus/Modul 3/Interaktion af JavaScript-kode med browseren

Interaktion af JavaScript-kode med browseren

Ledig

4.1 Browserobjekter

Som du allerede ved, fungerer JavaScript-sproget inde i browseren, så det skal på en eller anden måde interagere med den samme browser. For at gøre dette har browseren flere objekter og funktioner, der er tilgængelige fra JavaScript.

Den første er an object window, som beskriver browservinduet. Eller rettere, jeg plejede at beskrive, hvornår browsere var uden faner. Nu beskriver vinduesobjektet den aktuelle browserfane, hvor siden med scriptet er indlæst.

For det andet er det an object documentden, der er ansvarlig for det dokument, der vises i fanen. Dette kan være lidt forvirrende. Lad os for nemheds skyld sige, at dokumentet er det, der vises for brugeren, og vinduet er, hvad dette dokument vises i.

For det tredje er dette an object consoleden, der er ansvarlig for outputtet til browserkonsollen. Ja, browsere har også en konsol, den bruges hovedsageligt til at fejlfinde scriptet og vise fejlmeddelelser. Du kan normalt åbne den ved at trykke på F12-knappen i din browser.

Object window, er objektet på øverste niveau for alle sideobjekter. Og selvom du direkte kan skrive objektnavne documenti consoledit script, er deres navne window.documentog window.console.

4.2 Dialoger i JavaScript

alert() metode

Det an object windowhar også flere funktioner, der er synlige for sidescriptet. Den mest brugte er alert(). Det giver dig mulighed for at vise en dialogboks med en besked til brugeren. Scriptet suspenderes derefter, indtil brugeren klikker på OK.

Eksempel:

alert("JavaScript is the best!");

prompt() metode

Der er også en funktion, hvormed du kan bede brugeren om at indtaste en eller anden værdi - det er prompt().

Eksempel:

var age = prompt("Enter Year of Birth");

bekræfte() metode

Du kan vise en dialogboks med to knapper Ok- Cancelspørg brugeren om en handling.

Eksempel:

var isOK = confirm("Are you ready");

4.3 onload() hændelse

Og endnu et nyttigt og interessant øjeblik. Browservinduet har en hændelse , der udløses, når dokumentet er fuldt indlæst. Du kan angive kode, der skal udføres, efter at dokumentet er indlæst og vist.

Dette kan gøres på tre måder.

For det første kan du indlejre JavaScript-kode direkte på en HTML-side som en attributværdi:

<body onload="alert('document loaded');">
  <img src="big-image.png">
</body>

For det andet kan du indlejre JavaScript-kode simpelthen i en HTML-side:

<head>
    <script>
        function load()
        {
            alert('document loaded');
        }
        window.onload = load;
    </script>
</head>
<body>
    <img src="big-image.png">
</body>

For det tredje kan vi skrive det lidt kortere ved at erklære en anonym funktion:

<head>
    <script>
        window.onload = function () {
            alert('document loaded');
        }
    </script>
</head>
<body>
    <img src="big-image.png">
</body>

4.4 onclick() hændelse

Og endelig er en anden vigtig begivenhed (begivenhed) event OnClick. Hvilket forekommer på ethvert element, som brugeren klikkede på. Ligesom event OnLoaddet kan indstilles på forskellige måder, så giver vi kun den enkleste:

<body>
  <img src="big-image.png" onclick="alert('user clicked on the image');">
</body>

Kommentarer
  • Populær
  • Ny
  • Gammel
Du skal være logget ind for at skrive en kommentar
Denne side har ingen kommentarer endnu