Una funzione è un'insieme di istruzioni racchiuse in un blocco di codice. Può essere contraddistinta da un nome, può accettare degli argomenti (o parametri) e restituire dei valori.
function nome(argomenti) {
// istruzioni
}Le funzioni hanno 2 fasi:
- fase di definizione, dove dichiariamo la funzione e gli assegnamo un nome;
- fase di invocazione o chiamata, in cui il blocco viene eseguito.
Esempio: dichiariamo una funzione che somma due valori:
- definizione o dichiarazione della funzione:
function sommaNumeri(numero1,numero2) { return numero1 + numero2; }
- Invocazione o chiamata:
var sommato = sommaNumeri(3,5); // 8
come possiamo vedere nell'esempio, nella nostra funzione è presente l'istruzione
returnche consente di terminare e restituire un valore.
Tutti gli argomenti che inseriamo all'interno della funzione vengono definiti in un array speciale chiamato arguments.
Prendiamo l'esempio precedente e modifichiamolo in modo da utilizzare l'array arguments:
// non abbiamo bisogno di passare dei parametri
function sommaNumeri() {
return arguments[0] + arguments[1];
}
// in fase di chiamata JavaScript inserirà automaticamente i valori all'array
var sommato = sommaNumeri(3,5); // 8Questo ci consente ad esempio di fare la somma di un numero indefinito di valori:
function sommaNumeri() {
var risultato = 0;
for (var i = 0; i < arguments.length; i++) {
risultato = risultato + arguments[i];
}
return risultato;
}
var somma1 = sommaNumeri(3,5,2);
var somma2 = sommaNumeri(somma1, 3);
console.log(somma1); // 10
console.log(somma2); // 13La dichiarazione di funzione vista sopra è, dal punto di vista sintattico, un'istruzione, le funzioni possono anche essere create da un'espressione di funzione. Una funzione di questo tipo può anche essere anonima e non avere un nome.
var moltiplicazione = function(a,b) {
return a * b;
}
var risultato = moltiplicazione(5,10); // la variabile risultato prende il valore 50Negli esempi precedenti siamo dovuti passare per le fasi di definizione e invocazione per poter utilizzare le nostre funzioni. C'è però un altro sistema per eseguire una funzione nel momento stesso in cui viene definita:
(function IIFE(){
console.log( "Ciao!" );
})();
// "Ciao!"In pratica ci basta inserire la nostra funzione tra ( funzione )();
Lo scope è l'ambito di visibilità o la portata nella quale una variabile può essere utilizzata.
Le variabili dichiarate all'interno di una funzione vengono definite locali e sono accessibili solo all'interno della funzione stessa. D'altro canto, le variabili dichiarate fuori dalle funzioni sono dette globali e sono accessibili da qualsiasi punto dello script, anche all’interno delle funzioni.
Consideriame il seguente esempio:
var numero = 5;
function aggiungiNumeroSegreto() {
var numeroSegreto = 10;
numero = numero + numeroSegreto;
return numero;
}Prevedibilmente quando noi chiamiamo (o invochiamo) la funzione aggiungiNumeroSegreto() il valore sarà 15, quindi la funzione ha preso la variabile numero scritta fuori e l'ha utilizzata correttamente. Inoltre alla variabile numero è stato assegnato il nuovo valore: 15, ma se fuori della funzione cerchiamo di ottenere il valore della variabile numeroSegreto otteniamo solo un errore.
console.log(numero); // 5
var risultato = aggiungiNumeroSegreto(); // 15
console.log(numero); // 15
console.log(numeroSegreto); // ReferenceError: numeroSegreto is not defined
Come già definito nella prima lezione, un oggetto ha un valore composto in cui è possibile assegnare delle proprietà che a loro volta possono avere valori di qualsiasi tipo.
var paprika = {
nome: 'Paprika',
cognome: 'Oppenheimer',
razza: 'Jack Russell Terrier',
anno: 2014,
}In estrema sintesi possiamo dire che un oggetto può possedere:
- Proprietà (dati), rappresentati da coppie di nome-valore;
- Metodi, sono le funzionalità dell'oggetto e sono rappresentate da funzioni.
Un metodo è una funzione, nell'esempio che segue creiamo un metodo che ci restituisce il nome completo:
var paprika = {
nome: 'Paprika',
cognome: 'Oppenheimer',
razza: 'Jack Russell Terrier',
anno: 2014,
nomeCompleto: function () { return "Paprika Oppenheimer"; }
}abbiamo semplicemente assegnato una funzione anonima direttamente in una proprietà dell'oggetto paprika e possiamo leggere il suo valore come se stessimo invocando una normale funzione.
console.log(paprika.nomeCompleto()); // Paprika OppenheimerNota bene: se non usiamo le parentesi
()JavaScript ci restituisce la definizione della funzione stessa:
console.log(paprika.nomeCompleto); // function () {}L'esempio precedente è veramente poco dinamico, per ottenere il nome e cognome avremmo potuto accedere alle proprietà nome e cognome dell'oggetto paprika. Per fare questo abbiamo bisogno di un metodo che ci permetta di vedere dall'interno dell'oggetto stesso il valore corrente delle proprietà.
In JavaScript possiamo utilizzare la parola chiave this, che rappresenta l'oggetto al quale appartiene il metodo invocato.
Esempio:
paprika.nomeCompleto: function () { return this.nome + " " + this.cognome; }
console.log(paprika.nomeCompleto()); // Paprika Oppenheimer
Il DOM, acronimo di Document Object Model, è l'interfaccia che permette a programmi e scripts di accedere dinamicamente al contenuto della pagina per manipolarlo, modificarlo o cambiargli lo stile.
Quello che a noi interessa in questo momento è il DOM HTML, che definisce:
- Gli elementi dell'HTML come oggetti;
- le proprietà degli elementi HTML;
- i metodi per accedere agli elementi HTML;
- gli eventi degli elementi HTML.
Ovvero le azioni che possiamo compiere sugli elementi HTML.
Prendiamo in considerazione l'esempio seguente, dove cambiamo il contenuto del paragrafo <p> con id contenitore:
<html>
<body>
<p id="contenitore"></p>
<script>
document.getElementById("contenitore").innerHTML = "Ciao!";
</script>
</body>
</html>In questo esempio, getElementById è il metodo, mentre innerHTML è la proprietà. document è l'oggetto che rappresenta la pagina web.
Come abbiamo detto, con JavaScript possiamo manipolare ogni elemento HTML, ma prima dobbiamo trovarlo. Per farlo abbiamo a disposizione vari metodi:
| Troviamo per | Esempio | Cosa restituisce |
|---|---|---|
| id | document.getElementById("id_elemento"); |
un elemento |
| classe | document.getElementsByClassName("p"); |
una collezione |
| nome del tag | document.getElementsByTagName("p"); |
una collezione |
| selettore css | document.getElementquerySelectorAll(".classe"); |
una collezione |
| oggetti HTML | document.title // tag title del dovumento HTML |
un elemento |
<html>
<head>
<title>Esempio DOM</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="app">
<div class="cont">CIAO</div>
<div class="cont">MONDO!</div>
</div>
<script>
// prendiamo l'elemento con id=app
var app = document.getElementById("app");
// prendiamo l'elemento'con classe=cont dentro app
var cont = app.getElementsByClassName("cont");
/*
Avremmo potuto allo stesso modo usare il selettore css con un altro metodo:
var cont = app.querySelectorAll(".cont");
*/
/*
Cosa c'è dentro cont?
Una collezione con 2 elementi conun indice
HTMLCollection {0: HTMLDivElement, constructor: Object}
0: <div class="cont">CIAO</div>
1: <div class="cont">MONDO!</div>
*/
// Modifichiamo il contenuto del primo cont usando l'indice
cont[0].innerHTML = "BUONGIONO";
// Mettiamo al posto del secondo il contenuto del tag title:
cont[0].innerHTML = document.title;
</script>
</body>
</html>Il modo più semplice è quello che abbiamo visto prima: la proprietà innerHTML.
document.getElementById('app').innerHTML = "<p>Nuovo paragrafo</p>"; Ma possiamo cambiare anche gli attributi:
<!DOCTYPE html>
<html>
<body>
<img id="immagine" src="casa.jpg">
<script>
document.getElementById("immagine").src = "albero.jpg";
</script>
</body>
</html>O Cambiare lo stile di un elemento HTML
document.getElementById("app").style.color = "blue";Il metodo addEventListener() attribuisce un evento ad un elemento.
Lista di tutti gli eventi →
// element.addEventListener(evento, funzione, useCapture);
// useCapture è booleano e opzionale, riguarda la propagazione dell'evento
document.getElementById("bottone").addEventListener("click", function(){
alert("hai cliccato!");
});
// Separiamo la funzione
function avvisa() {
alert("hai cliccato!");
}
// la funzione da utilizzare va messa senza parentesi!
document.getElementById("bottone").addEventListener("click", avvisa);