JAVASCRIPT OUTPUT

Introduciamo l’argomento “Javascript Output” dicendo che JavaScript può “visualizzare” i dati in diversi modi:

Scrivere in un elemento HTML, usando innerHTM
Scrivere nell’output HTML utilizzando document.write()
Scrivere in una finestra di avviso, utilizzando window.alert()
Scrivendo nella console del browser, utilizzando console.log()

INNERHTML

Per accedere a un elemento HTML, JavaScript può utilizzare il metodo document.getElementById(id). L’attributo id definisce l’elemento HTML. La proprietà innerHTML definisce il contenuto HTML.

Copy to Clipboard

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prorprietà innerHTML</title>
    <script type="rocketlazyloadscript">
        function changeText()
        {
            /*--Vedremo successivamente le variabili, per ora ti basta sapere
            che con l'istruzione let introduciamo la variabile x. Tale variabile
            grazie al simbolo di assegnamento(=) conterrà un riferimento al 
            paragrafo avente id="p1"--*/
            let x = document.getElementById("p1");
            x.innerHTML="Text Changed.";
            x.style.backgroundColor='red';
            document.getElementById("div").style.border="3px solid green";
            document.getElementById("div").style.backgroundColor="yellow";
        }
    </script>
</head>
<body>
    
    <p id="p1">Paragrafo uno</p>
    <p id="p2">Paragrafo due</p>
    <div id="div">Div uno</div>
    <br>
    <button onclick="changeText()">Click me!</button>
    <script type="rocketlazyloadscript">
        /*--Le operazioni aritmetiche che vedremo più avanti per quanto
        riguarda le precedenze tra gli operatori queste seguono le normali regole
        della matematica. Nell'esempio prima viene effettuata la moltiplicazione
        poi la somma. Per modificare la precedenza tra gli operatori occorre
        aggiungere le parentesi tonde. Ad esempio (7+9)*2. In questo caso
        prima viene effettuata la somma poi la moltiplicazione.--*/
        document.getElementById("p2").innerHTML=7+9*2
    </script>
</body>
</html>

JAVASCRIPT OUTPUT IL METODO DOCUMENT.WRITE

A scopo di test, è conveniente utilizzare document.write().

L’utilizzo di document.write() dopo il caricamento di un documento HTML eliminerà tutto l’HTML esistente.

JAVASCRIPT OUTPUT WINDOW.ALERT

Puoi saltare la parola chiave window. In JavaScript, l’oggetto window è l’oggetto ambito globale, ciò significa che variabili, proprietà e metodi per impostazione predefinita appartengono a tale oggetto. La parola chiave window è facoltativa:

CONSOLE.LOG

Per scopi di debug, puoi chiamare il metodo console.log() nel browser per visualizzare i dati. Imparerai di più sul debug in un post successivo.

Copy to Clipboard

<!DOCTYPE html>
<html>
    <head>
      <script type="rocketlazyloadscript">
         function calcolaRadice(val)
         {
             let x = Math.sqrt(val);
             alert('La radice quadrata di ' + val + ' = ' + x);
             console.log(val);
             console.log(x);
         }
      </script>
    </head>
    <body>
    <form method="get">
        <label for="radice">Inserisci un numero:</label>
        <input type="text" name="valore"  id="radice">
        <br>
        
        <button onclick="calcolaRadice(this.form.valore.value)">Calcola</button>
    </form>
    <br>
    <br>
    <p>Never call document.write after the document has finished loading.
        It will overwrite the whole document.</p>    
    <hr>
    <script type="rocketlazyloadscript">
        /*document.write(5 + 6 * 2);*/
    </script>
    </body>
</html>

LINK AI POST PRECEDENTI

POST SU HTML

POST SU CSS

IL LINGUAGGIO JAVASCRIPT

LINK AL CODICE SU GITHUB

GITHUB

JAVASCRIPT OUTPUT

JAVASCRIPT OUTPUT

INNERHTML

JAVASCRIPT OUTPUT IL METODO DOCUMENT.WRITE

JAVASCRIPT OUTPUT WINDOW.ALERT

CONSOLE.LOG

LINK AI POST PRECEDENTI

LINK AL CODICE SU GITHUB

Scritto da: Marco Albasini

Scrivi un commento Annulla risposta

Categories

Archive

JAVASCRIPT OUTPUT

JAVASCRIPT OUTPUT

JAVASCRIPT OUTPUT

INNERHTML

JAVASCRIPT OUTPUT IL METODO DOCUMENT.WRITE

JAVASCRIPT OUTPUT WINDOW.ALERT

CONSOLE.LOG

LINK AI POST PRECEDENTI

LINK AL CODICE SU GITHUB

Scritto da: Marco Albasini

Post correlati

Scrivi un commento Annulla risposta

Categories

Archive