CodeGym/Java Course/Modulo 3/Interazione del codice JavaScript con il browser

Interazione del codice JavaScript con il browser

Disponibile

4.1 Oggetti browser

Come già sai, il linguaggio JavaScript funziona all'interno del browser, quindi deve in qualche modo interagire con questo stesso browser. Per fare ciò, il browser ha diversi oggetti e funzioni che sono disponibili da JavaScript.

Il primo è an object window, che descrive la finestra del browser. O meglio, descrivevo quando i browser erano senza schede. Ora l'oggetto finestra descrive la scheda corrente del browser in cui è caricata la pagina con lo script.

In secondo luogo, questo è an object documentresponsabile del documento visualizzato nella scheda. Questo potrebbe creare un po' di confusione. Per semplicità, diciamo che document è ciò che viene visualizzato all'utente e window è ciò in cui viene visualizzato questo documento.

In terzo luogo, questo è an object consoleresponsabile dell'output sulla console del browser. Sì, anche i browser hanno una console, viene utilizzata principalmente per il debug dello script e la visualizzazione dei messaggi di errore. Di solito puoi aprirlo premendo il pulsante F12 nel tuo browser.

Object window, è l'oggetto di primo livello per tutti gli oggetti della pagina. E sebbene tu possa scrivere direttamente i nomi degli oggetti documentnel consoletuo script, infatti, i loro nomi window.documente window.console.

4.2 Finestre di dialogo in JavaScript

metodo alert()

Ha anche an object windowdiverse funzioni che sono visibili allo script della pagina. Il più usato è il alert(). Consente di visualizzare una finestra di dialogo con un messaggio per l'utente. Lo script viene quindi sospeso finché l'utente non fa clic su OK.

Esempio:

alert("JavaScript is the best!");

metodo prompt()

C'è anche una funzione con la quale puoi chiedere all'utente di inserire un valore: questo è prompt().

Esempio:

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

metodo confirm()

È possibile visualizzare una finestra di dialogo con due pulsanti Ok: Cancelchiedere all'utente alcune azioni.

Esempio:

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

4.3 evento onload()

E un altro momento utile e interessante. La finestra del browser ha un evento che si attiva quando il documento è completamente caricato. È possibile specificare il codice da eseguire dopo che il documento è stato caricato e visualizzato.

Questo può essere fatto in tre modi.

Innanzitutto, puoi incorporare il codice JavaScript direttamente in una pagina HTML come valore di attributo:

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

In secondo luogo, puoi incorporare il codice JavaScript semplicemente in una pagina HTML:

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

Terzo, possiamo scriverlo un po' più breve dichiarando una funzione anonima:

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

4.4 evento onclick()

E infine, un altro evento importante (evento) è event OnClick. Che si verifica su qualsiasi elemento su cui l'utente ha fatto clic. Proprio come event OnLoadpuò essere impostato in diversi modi, quindi daremo solo il più semplice:

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

Commenti
  • Popolari
  • Nuovi
  • Vecchi
Devi avere effettuato l'accesso per lasciare un commento
Questa pagina non ha ancora commenti