Cos'è Javascript

Javascript è il linguaggio più utilizzato per lo scripting lato client.
Si tratta dunque di un linguaggio che agisce direttamente sul DOM generato dal browser (un po' come il CSS) ed è a tutti gli effetti un linguaggio di programmazione, con variabili, elementi, funzioni e molto altro.

Javascript si utilizza maggiormente per due motivi:

  • Elaborazioni lato client rapide, senza dover richiedere l'intervento del server
  • Modifiche grafico/visive per rendere più gradevole l'interazione dell'utente con la pagina web.

E' fondamentale scrivere del buon codice Javascript, per evitare rallentamenti o malfunzionamenti della pagina web o addirittura il blocco del browser.

Il linguaggio Javascript

Elementi di base per l'utilizzo

Il linguaggio Javascript

Il linguaggio Javascript presenta molte analogie di sintassi con i più comuni linguaggi di programmazione, fra cui Java (in particolar modo) e anche per certi versi il PHP, soprattutto nella gestione delle variabili.
E' anche questo un linguaggio sequenziale e compilato a runtime.

Per poter scrivere del codice Javascript (JS) all'interno delle pagine web, si può procedere in due diverse tipologie (così come per il CSS):

  • Internal, inserendo liberamente il codice JS all'interno del tag HTML script

    <script type="text/javascript">
    	// Codice JS
    </script>
    
  • External, richiamando un file esterno con estensione .js sempre tramite tag HTML script

    <script  type="text/javascript" src="miofile.js"></script>
    

In tutti i casi conviene scrivere o includere codice JS sempre alla fine del body della pagina HTML, al fine di migliorare i tempi di caricamento della pagina.

Il linguaggio Javascript

Di seguito un prospoetto delle tematiche che affronteremo per il linguaggio JS:

  • Stampa e debug
  • Le variabili
  • Le funzioni
  • Condizioni e cicli iterativi
  • Intervalli
  • Manipolazione HTML
  • Gli eventi

Il linguaggio Javascript

Stampa e debug

Ci sono quattro diverse modalità di stampa nel linguaggio JS:

  • alert, popup per la comparsa prioritaria dell'informazione
  • document.write, per la scrittura sul DOM
  • innerHTML, per la scrittura all'interno di un tag HTML
  • console.log, per il debug (non visibile all'utente)

Il linguaggio Javascript

Stampa e debug

La funzione alert permette di far comparire un popup di interruzione, dunque prioritario rispetto all'intera pagina web, mostrando delle informazioni.
Originariamente era utilizzato molto per la comunicazione di messaggi di errore o comunicazioni importanti verso l'utente; ad oggi però l'utilizzo degli alert è deprecato e ridotto ai soli fini di debug.

alert("Hello world!");

Questo comando generà dunque una finestra del tipo:

Il linguaggio Javascript

Stampa e debug

L'opzione document.write permette la scrittura diretta sul DOM (un po' come il comando echo del PHP).

document.write("Hello world!"); 

Anche il document.write è ormai deprecato, in quanto appende gli elementi alla coda del body e dunque non è generalmente funzionale ai fini di un applicativo web.

Il linguaggio Javascript

Stampa e debug

Il comando innerHTML permette di inserire (sostituire) del testo all'interno del DOM o meglio di uno specifico tag HTML.
In JS ci sono diverse possibilità di identificare un elemnto HTML:

  • tramite ID, utilizzando il comando document.getElementById("mioid")
  • tramite TAG, utilizzando il comando document.getElementByTagName("miotag")
  • tramite CLASSE, utilizzando il comando document.getElementByClassName("miaclasse")

Si ricorda che il linguaggio JS è case sensitive, quindi occorre sempre ricordare la distinzione fra lettere minuscole e maiuscole anche nelle funzioni.
Con l'innerHTML potremo dunque modificare il contenuto HTML di un tag nel seguente modo:

<div id="demo">Ciao Mondo!</div>
document.getElementById("demo").innerHTML = "Hello world!";

Inizialmente dunque il DOM carica il div #demo con la scirtta Ciao Mondo, ma successivamente JS la sostituisce con Hello world.

Il linguaggio Javascript

Stampa e debug

La quarta possibilità di stampa è il console.log, utilizzato esclusivamente per scopi di debug in quanto non è visibile tramite la finestra del browser.
Per poter visualizzare la console, occorre infatti utilizzare delle estensioni del browser (come Firebug) oppure utilizzare il supporto nativo che ormai tutti i browser includono fra le opzioni per gli sviluppatori.

Oltre alla visualizzazione dei console.log, la console è l'elemento fondamentale per il debug di JS in quanto permette di visualizzare anche eventuali informazioni sugli errori generati.

// Visualizzazione messaggio generico
console.log("Hello World!");

// Visualizzazione messaggio di errore
console.error("Errore!");


// Visualizzazione messaggio di informazione
console.info("Informazione!");


// Visualizzazione messaggio di warning
console.warn("Attenzione");

Il linguaggio Javascript

Le variabili

Così come per il linguaggio PHP, anche in JS le variabili non necessitano di essere istanziate con una tipologia ben definita; possono dunque contenere nel loro ciclo di vita, valori di natura diversa.

Le variabili JS non hanno bisogno di essere dichiarate, ma per comodità molte volte può esser utile farlo; solo nel momento della dichiarazione, si utilizza la dicitura var:

var x = 5; // Dichiaro e inizializzo
x = x + 2; // Utilizzo

In seguito alla dichiarazione, la dicitura var non è più utilizzata.
Si ricorda che comunque non è necessaria la dichiarazione, dunque sarebbe possibile direttamente utilizzare la variabile x nel seguente modo:

x = 5 + 2; // Inizializzo

Fondamentale, mantenere univocità nel nome delle variabili al fine di evitare confusione in fase di calcolo.

Il linguaggio Javascript

Le variabili

Le variabili possono contenere come al solito numeri, testo, valori booleani, array o oggetti.

eta = 20; 						// Numero semplice
altezza = 1.78;						// Numero decimale
uomo = true;						// Booleano
nome = "Francesco"; 					// Stringa
es_array = ["Campo1", "Campo2"];			// Array
es_oggetto = {primo: "Campo1", secondo: "Campo2"};	// Oggetto 
  • L'operatore di concatenazione fra le stringhe è rappresentato dal simbolo "+".
  • Gli array non hanno una dimensione fissa e predefinita. Se si vuole inizializzare un'array vuoto, si utilizza la dicitura:
    es_array = [];
    
  • Gli oggetti possono essere intesi anche come array associativi, ed è possibile utilizzarne il contenuto in due diverse modalità:
    utente = {nome: "Francesco", cognome: "Pisciotta"};	// Oggetto 
    // Modalità ad oggetto
    console.log(utente.nome);
    // Modalità ad array associativo
    console.log(utente["nome"]);
    

Il linguaggio Javascript

Le variabili

Per le stringhe potrebbero tornare utili le seguenti funzioni:

nome = "Francesco";
lunghezza = nome.length; // Lunghezza testo
iniziali = nome.substring(0,2); // Estrae "Fr" dal nome
contenuto = nome.indexOf("esco"); // Cerca il testo "esco" in "Francesco"
maiuscolo = nome.toUpperCase(); // Ritorna "FRANCESCO"
minuscolo = nome.toLowerCase(); // Ritorna "francesco"

Il linguaggio Javascript

Le funzioni

Anche in JS è possibile creare delle funzioni o metodi per un'organizzazione più efficiente del codice.

function somma(primo, secondo) {
	return primo+secondo;
}

E' importante ricordare che le variabili dichiarate all'interno delle funzioni, non saranno visibili al di fuori delle stesse.

Esiste una seconda metodologia di dichiarazione delle funzioni, ovvero quelle che si definiscono espressioni di funzione:

var somma = function(primo, secondo) {
	return primo+secondo;
};

Il funzionamento è identico fra le due metodologie.
Ciò che cambia è il caricamento all'interno del DOM e quindi la possibilità di utilizzo.

Il linguaggio Javascript

Le funzioni

Esempio espressioni di funzione vs funzioni standard

// Funzione standard post-dichiarata

var x = somma(2 + 3); // Richiamo la funzione

// Dichiaro la funzione
function somma(primo, secondo) {
	return primo+secondo;
}

// X avrà il valore 5
// Funzione standard pre-dichiarata

// Dichiaro la funzione
function somma(primo, secondo) {
	return primo+secondo;
}

var x = somma(2 + 3); // Richiamo la funzione

// X avrà il valore 5
// Epsressione di funzione post-dichiarata

var x = somma(2 + 3); // Richiamo la funzione

// Dichiaro la funzione
var somma = function(primo, secondo) {
	return primo+secondo;
};

// Errore JS
// Espressione di funzione pre-dichiarata

// Dichiaro la funzione
var somma = function(primo, secondo) {
	return primo+secondo;
};

var x = somma(2 + 3); // Richiamo la funzione

// X avrà il valore 5

Il linguaggio Javascript

Le funzioni

Si può capire dunque dall'esempio precedente, che le espressioni di funzione devono necessariamente essere dichiarate prima dell'utilizzo, in quanto sono caricate in maniera sequenziale così come tutto il codice JS.

Viceversa le funzioni standard indipendentemente dal punto in cui saranno dichiarate all'interno del codice JS, saranno riconosciute e "compilate" dal browser con priorità rispetto al resto del codice.

Esiste una terza tipologia di dichiarazione delle funzioni, ovvero le funzioni immediate, la cui caratteristica è quella di non avere un nome, in quanto sono eseguite immediatamente al caricamento della pagina del browser.
Generalmente le funzioni immediate si utilizzano proprio per inizializzare alcuni aspetti della pagina subito dopo il suo caricamento:

(function() {
	alert("Hello World!");
})();

Il linguaggio Javascript

Condizioni e cicli iterativi

Così come per il linguaggio PHP, anche in JS esistono le condizioni e i cicli iterativi, il cui funzionamento è pressocchè identico.

Le uniche differenze da segnalare, sono per il costrutto if, else, elseif, dove la dicitura elseif non esiste e si utilizza dunque la dicitura else if, e per l'equivalente del foreach per la lettura di array multidimensionali o oggetti, identificato sempre con il ciclo iterativo for, in una forma un po' diversa:

// Esempio di array multidimensionale
lista = 
[
	{nome: "Francesco", cognome: "Pisciotta"},
	{nome: "Mario", cognome: "Rossi"},
	{nome: "Giorgio", cognome: "Persico"},
];

// Lettura (equivalente foreach)
for(i in lista) {
	document.write(i+") Utente "+ lista[i].nome+" "+lista[i].cognome+"<br />");
}

Il linguaggio Javascript

Intervalli

Una funzionalità molto utile del linguaggio JS è la possibilità di gestire i così detti delay ovvero degli intervalli predefiniti per l'esecuzione di un codice.

Esistono due diverse tipologie di intervalli nel JS:

  • setInterval: per l'esecuzione continua ad intervalli regolari (loop)
  • setTimeout: per l'esecuzione univoca in seguito ad un intervallo

Il tempo di esecuzione per gli intervalli, si esprime in entrambi i casi in millisecondi (1 sec = 1.000 msec)

// Alert Hello World ogni 5 secondi
setInterval(function () {
	alert("Hello World");
}, 5000);

/* Alert Hello World solo una volta, 
   dopo 5 secondi dal caricamento della pagina
*/
setTimeout(function () {
	alert("Hello World");
}, 5000);

Il linguaggio Javascript

Manipolazione HTML

Come già accennato nell'introduzione, una delle maggiori applicazioni del linguaggio JS è nella manipolazione degli elementi del DOM, ovvero nella pagina HTML in seguito alla sua visualizzazione sul browser.

Basta pensare alla comparsa o alla scomparsa degli elementi, all'aggiornamento dei dati o delle informazioni, alle animazioni varie e molto molto altro.

Abbiamo già visto come è possibile riconoscere gli elementi all'interno del DOM e come è possibile modificarne il contenuto HTML, tramite la proprità innerHTML; capiamo dunque come gestire al meglio ogni singola lettura o modifica.

Occorre ricordare che le funzioni getElementsByTagName e getElementsByClassName, restituiscono sempre un array di elementi a differenza della funzione getElementById che restituisce direttamente l'elemento selezionato.

Il linguaggio Javascript

Manipolazione HTML

Per quanto riguarda la parte HTML è dunque possibile manipolare il contenuto di un tag oppure i suoi attributi.
Il contenuto di un tag si può leggere o scrivere utilizzando la proprietà innerHTML:

<span id="testo">Il mio bel testo</span> 
// Leggo il contenuto dello span #testo
testo = document.getElementById("testo").innerHTML;

// Modifico il contenuto
testo = testo.replace("bel", "fantastico");

// Sovrascrivo il contenuto dello span
document.getElementById("testo").innerHTML = testo;

innerHTML è dunque utilizzato come una proprietà del tag HTML.

Il linguaggio Javascript

Manipolazione HTML

Utilizzando la stessa logica è dunque possibile agire sulle reali proprietà o meglio attributi del tag.

Se per esempio volessi modificare l'immagine di un tag img:

<img id="immagine" width="100%" src="immagine1.png" /> 
// Modifico l'attributo src dell'immagine
document.getElementById("immagine").src = "immagine2.png";

Con la stessa logica avrei potuto cambiare o aggiungere anche altri attributi.

Grazie a JS è anche possibile modificare le proprietà CSS dei vari tag; se per esempio volessimo modificare il colore di un testo:

// Imposto il colore rosso per il tag #descrizione
document.getElementById("descrizione").style.color = "red";

Per modificare il CSS si utilizza dunque la proprietà style, seguita dalla proprietà CSS sulla quale si vuole agire.

Il linguaggio Javascript

Gli eventi

Un altro aspetto fondamentale del JS è la possibilità di associare delle azioni, al verificarsi di determinati eventi, come per esempio un click, la pressione di un pulsante della tastiera e molto altro ancora.

E' proprio grazie alla gestione degli eventi che la pagina HTML prende vita e diventa dinamica anche lato client.

Gli eventi più utilizzati più comunemente sono:

  • onclick: al click del mouse
  • onchange: alla modifica di un campo (input) o di un elemento
  • onmouseover: al passaggio del mouse
  • onmouseout: al passaggio effettuato del mouse
  • onkeydown: alla pressione di un pulsante

Questi sono solo alcuni degli eventi presenti nel linguaggio JS; l'elenco completo è disponibile al link di seguito: W3C JS DOM Events

Il linguaggio Javascript

Gli eventi

Per poter associare gli eventi alla pagina HTML, si utilizzano due diversi approcci:

  • inline: associando gli eventi direttamente nel tag HTML
  • listener: gestione lato JS dell'associazione fra il tag e l'evento

Generalmente l'approccio inline si utilizza per associare ad un evento sul tag HTML, direttamente una funzione JS:

<button onclick="cliccato()">Invia</button>
function cliccato() {
	alert("Click sul pulsante!");
}

Si nota dunque che l'evento è riconosciuto direttamente come attributo del tag HTML.
Sarebbe stato possibile inserire direttamente il codice JS in seguito all'evento inline, ma per comodità e pulizia del codice è preferibile per lo meno associarlo ad una funzione.

Il linguaggio Javascript

Gli eventi

L'approccio maggiormente consigliato è quello dei listener, ovvero parti di codice JS che resteranno "in ascolto" sulla pagina HTML fino a quando non si verificano determinati eventi:

<button id="invia">Invia</button>
document.getElementById("invia").addEventListener("click", cliccato);

function cliccato() {
	alert("Click sul pulsante!");
};

Si nota dunque che l'evento è associato al click sul pulsante (scompare la dicitura "on" davanti al nome dell'evento).
Inoltre la funzione "cliccato" associata all'evento, è identificata con il termine callback (ovvero chiamata in seguito ad un evento appunto), dunque non prevede l'utilizzo delle parentesi tonde come consuetudine sulle funzioni.

E' possibile associare anche più listener per uno stesso elemento HTML.

Il linguaggio Javascript

Gli eventi

Ecco invece un classico esempio per il riconoscimento del pulsante "INVIO" su un form

<input id="e-mail" type="email" />
document.getElementById("e-mail").addEventListener("keypress", function(e) {
	pulsante = e.keyCode; // Riconosco valore ASCII del carattere
	if(pulsante == 13) alert("Prova login!");
});

In questo caso non abbiamo utilizzato un callback nel listener, ma abbiamo direttamente inserito la funzione.
Abbiamo dunque creato un listener in ascolto alla pressione di ogni pulsante della tastiera; nel caso in cui il tasto corrisponda al carattere ASCII = 13 (Enter), si visualizza l'alert.

Di seguito il link per la consultazione dei valori restituiti dal metodo keyCode: link tabella keycode

Esercitazione

Utilizzo di JS

Esercitazione

Riprodurre con il solo utilizzo di linguaggio client-side (HTML, CSS e JS) il funzionamento di una calcolatrice con le funzionalità di base della somma, sottrazione, moltiplicazione e divisione.

Realizzare il design seguendo il mockup del link http://bit.ly/1BcWSGU.

Prevedere il funzionamento sia tramite l'utilizzo del mouse, che tramite la sola tastiera per rendere i calcoli più agevoli.

<Thank u!>

Sempre pronto a darti una mano