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 document
responsabile 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 console
responsabile 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 document
nel console
tuo script, infatti, i loro nomi window.document
e window.console
.
4.2 Finestre di dialogo in JavaScript
metodo alert()
Ha anche an object window
diverse 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
: Cancel
chiedere 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 OnLoad
può 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>