Vediamo come generare un output sulla pagina, usando il codice JS.
Output
Un’azione di output prevede di far comparire qualcosa (ad esempio un messaggio o un oggetto) all’interno della pagina web.
JavaScript è in grado di produrre un output in vari modi, oggi vediamo:
- la generazione di elementi HTML sulla pagina;
- la generazione di un messaggio in una finestra di dialogo;
- la modifica di un elemento (a livello di nodo) della pagina web;
- l’invio di un messaggio alla console di debug del browser.
document.write()
Il primo output che vediamo consiste nell’invocare il metodo write() sull’oggetto document.
Quando una pagina web (un file HTML) viene caricata in un browser, viene generato un oggetto document.
L’oggetto document ha diverse proprietà e metodi (comportamenti) a sua disposizione.
Tra i suoi metodi troviamo write() che permette di “riempire” il documento con un contenuto di tipo HTML, passato come argomento (all’interno delle parentesi).
Pensiamo ad un codice di questo tipo:
<script>
document.write("Testo semplice");
</script>
Tale codice, all’interno di una pagina web, inserisce un contenuto HTML nel punto in cui viene collocato lo script.
Cosa si intende per “contenuto HTML”?
Esattamente quello che voi potete scrivere nel Body di una pagina web:
- testo;
- paragrafi;
- immagini;
- tabelle;
- ecc.
Per esempio, se voi scrivete nel body:
<body> Rosso di sera, bel tempo si spera. </body>
avete inserito un contenuto HTML all’interno della pagina.
In questo esempio, il contenuto è dato da un testo semplicissimo, senza cioè tag per la formattazione o la definizione di oggetti specifici.
Quello che avete scritto si può realizzare in JS usando la seguente sintassi:
<body>
<script>
document.write("Rosso di sera, bel tempo si spera.");
</script>
</body>
Notate che il testo è stato inserito tra doppi apici in quanto si tratta di una stringa, ovvero una sequenza di caratteri alfanumerici.
Se invece del testo semplice volevate inserire un paragrafo, sostituite il contenuto tra le parentesi con un nuovo contenuto che comprenda i tag del paragrafo:
<body>
<script>
document.write("<p>Rosso di sera, bel tempo si spera.</p>");
</script>
</body>
Anche in questo caso è stato inserito tutto il contenuto tra doppi apici, compresi i tag dell’HTML, in quanto anche loro comprendono caratteri alfanumerici.
Quando lo script JS con document.write() viene inserito assieme all’HTML, ovvero viene eseguito mentre il browser carica gli elementi della pagina, l’output generato dal JS si mischia con quello in HTML della pagina web.
Se invece il metodo write() viene invocato quando gli elementi della pagina web sono ormai stati caricati (magari richiamandolo con un pulsante) la pagina verrà sovrascritta da ciò che passerete al metodo tra le sue parentesi.
Per questo motivo, il metodo write() viene spesso usato con scopi di testing, in quanto sono disponibili soluzioni più precise e sicure (ad esempio il metodo innerHTML, descritto di seguito) per le modifiche di una pagina che ha già del contenuto.
alert()
Un altro modo per generare un output è quello di sfruttare una finestra di dialogo.
Una finestra di dialogo (ne parleremo verso la fine di questo corso JS livello Base) è una finestrella che appare per avvisare l’utente della pagina o per chiedergli qualcosa.
Un esempio di questa finestra è dato da alert():
<script>
alert("CIAO CIAO");
</script>
Alert genera una finestra molto semplice, costituita da un messaggio e da un pulsante che permette di chiuderla.
Il messaggio corrisponde a ciò che voi indicherete nelle parentesi tonde, sempre tra doppi apici.
Esempio di risultato finale:
Ci sono vari tipi di finestre di dialogo, ne parlerò nelle ultime lezioni al termine di questo corso.
innerHTML
Un modo “intelligente” per inserire un contenuto HTML in un punto preciso della pagina è dato da innerHTML.
Essendo questo uno dei primi capitoli di un corso base, non voglio ancora trattare concetti complicati ma vi farò una piccola introduzione ad un argomento interessante.
Secondo il DOM (Document Object Model), la pagina web viene vista come una struttura ad albero, caratterizzata da elementi genitori e sotto-elementi figli.
Ciascuno di questi elementi è detto nodo e rappresenta un oggetto della pagina web.
L’oggetto di livello superiore, quello in cima alla gerarchia è document: tutti gli altri nodi sono suoi figli.
Con JS è possibile manipolare i singoli nodi figli del document ma, per farlo, è necessario prima selezionarli.
Per selezionare i nodi possiamo usare diversi metodi ma oggi vediamo (occhio alle maiuscole!):
document.getElementById()
Tale metodo è in grado di selezionare un determinato nodo in base al valore del suo attributo Id.
Esempio, se la pagina contiene questo paragrafo:
<body> <p id="speciale">Paragrafo speciale.</p> </body>
Il paragrafo è stato etichettato con l’id “speciale”, e solo lui può avere questo nome, in modo da poterlo individuare tra altri paragrafi.
Per poter scrivere del testo all’interno di quel determinato paragrafo, possiamo usare:
document.getElementById("speciale")
Ma selezionarlo e basta non serve a nulla, dobbiamo dire al codice JS cosa deve fare con quel nodo, per questo usiamo il metodo innerHTML:
<body>
<p id="speciale">Paragrafo speciale.</p>
<script>
document.getElementById("speciale").innerHTML = "Nuovo contenuto";
</script>
</body>
In questo esempio, abbiamo individuato l’unico paragrafo speciale della pagina e gli abbiamo modificato il contenuto, sovrascrivendolo.
console.log()
Un ultimo metodo di output si usa nelle operazioni di testing e debug dei programmi JS, e prevede di inviare messaggi alla console del browser.
Questa console è un ambiente di controllo che solitamente viene visualizzato sul vostro browser premendo il tasto F12.
Con il comando JS:
console.log("messaggio");
potete mostrare un messaggio direttamente nella finestra di output della console per lo sviluppo.
Si tratta di una operazione utile prevalentemente all’analisi dei vostri programmi, al testing ed al debug.