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>