====== Output con Javascript ======

[[namespace:javascript|Pagina principale di Javascript]]


Ci sono varie opzioni per mandare qualcosa in output con JavaScript, le basilari sono:
  * alert() - Porpone una finstra di alert
  * console.log() - Scrive sulla console Javascript
  * InnerHTML - Consente di modificare l'HTML all'interno dei tag

===== Alert =====
Con la funzione alert è possibile inviare un messaggio all'utente in una finestra del browser.

{{:page:alertjs.png?400|Questo screenshoot è preso su Firefox in Ubuntu}}

L'alert blocca l'esecuzione del codice e resta in attesa finchè non viene premuto il bottone OK.
Come viene mostrato l'alert dipende dal sistema operativo e dal browser che usiamo.


Il codice che genera la finestra è:

<Code:javascript linenums:1 |Come creare un alerti>
<script>
    alert('Io sono un alert')
</script>
</Code>

===== console.log() =====

Il metodo console.log() consente di stampare un messaggio sulla console del browser. 
La console non è visibile all'utente, ma è uno strumento necessario per inserire dei messaggi di controllo e soprattutto è nella console che vengono mostrati gli errori.
Come si può accedere alla console varia a seconda del browser.

<Code:javascript linenums:1|Scrivere sulla console>
<script>
    console.log('Mi vedrai sulla console')
</script>
</Code>


[[https://codepen.io/David-De-Nora/pen/MWZJZrE | Esempio eseguibile ]]

===== InnerHTML =====
Il metodo InnerHTML consente di modificare il contenuto dei tag in tempo reale, per questo è strettamente legato al codice HTML.

<Code: HTML linenums:1|Esempio di HTML>
<p id="mioP">
  io sono un paragrafo
</p>
</Code>

Possiamo modificare il contenuto di **p#mioP** con il seguente codice Javascript

<Code: javascript linenums:1|Codice javscript>
document.getElementById('mioP').innerHTML = "sovrascrivo p"
</Code>

Attraverso **document.getElementById('mioP')** poniamo l'attenzione sul tag con id uguale a **mioP**, successivamente modifchiamo il contenuto del tag scrivendo **innerHTML = "sovrascrivo p"**.

In pratica con document.getElementById() selzione un oggetto presente nel codice HTML e con il metodo InnerHTML  andiamo a modifcarene il contenuto. 

Con inner HTML è possibile anche assegare dei tag.

<Code: javascript linenums:1|Codice javscript>
document.getElementById('mioP').innerHTML = "<strong>Sono il nuovo p</strong>"
</Code>