JavaScript è un linguaggio di scripting utilizzato per aggiungere “dinamicità” nelle pagine web.
Abbiamo visto nel precedente articolo le istruzioni “if”, “for” e “while”; inoltre c’è l’istruzione di stampa a video della stringa “ciao!” che al momento andiamo ad emulare con l’istruzione JavaScript “console.log()”.
Esempio, crea un nuovo file HTML e incolla il codice di seguito riportato;
<!DOCTYPE html>
<html>
<head>
<script>
function primafunzione(){
console.log('ciao');
}
</script>
</head>
<body>
<button onclick="primafunzione();">esegui javascript</button>
</body>
</html>
Nella stessa sezione dove si inseriscono i CSS visti negli articoli precedenti (quindi all’interno di “<head>”), c’è il tag <script>.
All’interno del tag <script> vediamo che c’è una novità, la funzione “primafunzione()”. Vediamo che la dichiarazione di una funzione è effettuata tramite la dicitura “function”.
Le funzioni servono per eseguire del codice ogni volta che sono chiamate. In pratica ogni volta che eseguiamo la chiamata della funzione (che può avvenire da una sezione qualsiasi), la funzione eseguirà il comando “console.log(‘ciao’)”.
Apri il file con il browser o con l’editor HTML, il risultato visuale sarà il seguente:
Oltre ai tag visti nei precedenti articoli, adesso c’è un tag nuovo “<button>”; questo tag non visualizzerà il semplice testo ma creerà un “pulsante” nella pagina web (in questo caso è il pulsante “esegui JavaScript” appena mostrato) che può essere cliccato ed eseguire l’azione che decidi.
All’interno del tag “<button>” c’è l’attributo “onclick”. Tale attributo indica che nel momento in cui avviene la pressione del tag button (nel nostro esempio quando si clicca sul pulsante “esegui JavaScript”) allora esegue l’azione indicata. L’azione indicata nel nostro esempio è richiamare la funzione JavaScript “primafunzione()”.
Per vedere il risultato, aprendo la pagina con il browser Chrome, è necessario premere “F12” (o in alternativa pulsante destro del mouse -> ispeziona) e scegliere il tab “console”. Ogni volta che prenderai sul pulsante “esegui JavaScript” vedrai che l’istruzione “console.log(‘ciao’)” stamperà la stringa ciao nel riquadro visualizzato.
Tutto chiaro?
Riepilogando hai aggiunto un nuovo pulsante nella pagina web (il pulsante <button>); ogni volta che premi tale pulsante viene effettuata una chiamata alla funzione JavaScript (indicato dentro l’attributo onclick), tale funzione eseguirà il codice all’interno delle parentesi graffe, in questo caso “console.log(‘ciao’)”.
Benissimo, adesso puoi testare la condizione “if” e il ciclo “for” visti nel precedente articolo.
<!DOCTYPE html>
<html>
<head>
<script>
function primafunzione(){
for(i=0;i<3;i++){
console.log('ciao');
}
}
</script>
</head>
<body>
<button onclick="primafunzione();">esegui javascript</button>
</body>
</html>
Eseguendo il codice dell’esempio, ogni volta che premerai il pulsante “esegui JavaScript” la funzione stamperà tre volte la stringa ‘ciao’.
<!DOCTYPE html>
<html>
<head>
<script>
function primafunzione(){
i=1;
if(i<2){
console.log('i minore di 2');
}else{
console.log('i maggiore o uguale a 2');
}
}
</script>
</head>
<body>
<button onclick="primafunzione();">esegui javascript</button>
</body>
</html>
In questo caso se la variabile i è minore di 2 effettuerà la stampa “i minore di 2” altrimenti stamperà “i maggiore o uguale a 2”; avendo impostato i uguale a 1 tramite l’assegnazione “i=1” la verifica (i<2) è vera e la stampa sarà “i minore di 2”.
Prova a modificare il valore di i, assegna magari un valore maggiore di 2, vedi quale sarà la stampa e capisci bene il perché!
Tieni presente che il codice all’interno delle parentesi graffe di else (altrimenti) è eseguito se il controllo iniziale di if è falso. Nel caso in cui fissi i=3, il controllo iniziale i<2 è falso pertanto sarà eseguito il codice all’interno della condizione else.
Prova a testare da solo il ciclo “while” che esegue il codice fino a quando la condizione risulta essere vera.
Hai capito quindi che JavaScript è del codice attraverso il quale puoi effettuare delle attività che vanno a modificare le pagine web; finora però hai visto solo la stampa della stringa ‘ciao’ effettuata peraltro nella console di debug e non nella pagina web.
Nel prossimo articolo vediamo un po’ di apportare modifiche alle pagine web.
Non esitare a lasciare un commento o chiedere informazioni per chiarire i tuoi dubbi!