Quando si sviluppa un sito web, è fondamentale essere in grado di visualizzare l'output di un'istruzione in JavaScript. In questa lezione, esploreremo tre strumenti essenziali per farlo: alert(), console.log() e document.write().
Cos'è un output
Un output, in informatica, si riferisce ai risultati o alle informazioni generate da un sito web o da una parte di codice. In JavaScript, la maggior parte delle istruzioni produce un output. Ad esempio, prendiamo in esame questa istruzione:
let somma = 1 + 2;La variabile somma (con dichiarazione let) è il risultato di 1 + 2: questo è l'output. Per visualizzarlo, ci sono tre metodi che possiamo utilizzare:
alert().console.log().document.write().Come funziona alert()
Il metodo alert() è forse il più famoso tra i modi per visualizzare un output. Funziona in questo modo: all'interno delle parentesi tonde, bisogna inserire il valore o la variabile da visualizzare. Una volta aperta la pagina HTML, verrà visualizzato il popup di alert.
let somma = 1 + 2;
alert(somma); // Risultato: 3Come detto prima, posso anche inserire una scritta all'interno delle parentesi, racchiusa dalle virgolette.
alert("Esempio di scritta");Anche se non è necessario, la forma originale dell'alert di JavaScript è window.alert(), ma window è un oggetto default.
Come funziona console.log()
A differenza di alert(), console.log() funziona in maniera leggermente diversa. Invece di visualizzare l'output come popup nella pagina, viene inserito nella console del browser.
Dove si trova la console del browser?
Per andare nella console, apri la pagina HTML, poi clicca il tasto destro del mouse, poi clicca Ispeziona o Esamina (in base al browser) e apri la sezione Console. Puoi anche usare lo shortcut da tastiera:
Il contenuto compreso tra le parentesi di console.log() funziona allo stesso modo di alert().
let somma = 1 + 2;
console.log(somma); // Risultato: 3
console.log("Esempio di scritta");Meglio alert() o console.log()?
La maggior parte dei programmatori utilizza soltanto console.log(). Perché? alert() blocca l'esecuzione del programma JavaScript finché l'utente non clicca Ok nel popup, mentre console.log() ne permette l'esecuzione e trascrive tutti gli output nella console, sempre visibile (anche successivamente).
Come funziona document.write()
Sia alert() che console.log() non agiscono sul codice HTML. Mentre il metodo document.write() sì. Utilizzando questo tipo di visualizzazione, viene cancellato tutto il codice della pagina e viene visualizzato soltanto ciò che è stato indicato all'interno delle parentesi tonde.
let somma = 1 + 2;
document.write(somma); // Risultato: 3Nell'esempio qui sopra, eseguendo il codice viene eliminato tutto ciò che è presente nella pagina e viene inserito 3
Nota: puoi approfondire document.write() nella lezione DOM e contenuto HTML. Puoi trovare maggiori informazioni sull'oggetto document in DOM e l'oggetto document.