la componente client‐side:

(1)

la componente client‐side:

breve introduzione a Javascript e jQuery

Goy ‐ a.a. 2019/2020 Tecnologie Web: approcci avanzati 1

(2)

Javascript

^[www.html.it/guide/guida-javascript-per-esempi/]

• nonostante la somiglianza nel nome, è un linguaggio completamente distinto da Java!

• è un linguaggio di programmazione "ad alto livello" che serve per scrivere programmi contenuti nelle pagine web (= script  è un linguaggio di scripting )

• è utilizzato soprattutto per costruire interfacce utente interattive nelle applicazioni web

• è un linguaggio interpretato (e non compilato)

• L'interprete Javascript è contenuto nel browser  è una tecnologia client‐side: è il client (il browser) che interpreta (ed esegue) gli script

... anche se, recentemente, sono stati costruiti degli stumenti (es. Node.js) per utilizzare Javascript server‐side (cioè con un interprete sul server)

Cenni a Javascript ‐ I

• il codice Javascript viene (di solito) racchiuso nel tag <script>

(solitamente nell'intestazione  head  della pagina HTML):

<script>

window.onload = function() {

document.getElementById("sta").onclick=stampa; };

function stampa() { window.print(); }

</script>

quando l'interprete HTML incontra il tag <script>, "passa la palla" all'interprete Javascript

• Il funzionamento di Javascript si basa su due concetti principali:

1. il DOM (Document Object Model)

2. gli eventi (per questo si dice che i programmi Javascript sono event‐driven)

Cenni a Javascript ‐ II

(3)

Il DOM (Document Object Model)

[www.html.it/pag/15174/introduzione14/]

• Javascript mette a disposizione del programmatore un insieme di oggetti e di funzioni ("metodi") per interagire con gli

elementi della pagina web Vi ricordate HTML...?!?

Javascript, grazie al DOM, ci permette di manipolare questi elementi (per es. cambiare testi, immagini, menu, ecc.)

Javascript: DOM ‐ I

TAG: definiscono la struttura della pagina, per es:

H1 = titolo P = paragrafo UL = lista

LI =elemento della lista

Ogni TAG, correttamente aperto e chiuso (<tag>...</tag> opp

<tag />), definisce un elemento (oggetto) della pagina

Goy ‐ a.a. 2019/2020 Tecnologie Web: approcci avanzati

Ma cos'è il DOM? Il DOM contiene:

• una serie di oggetti predefiniti, che corrispondono:

– alla pagina web in quanto tale (document)

– ad altri elementi appartenenti al browser, per es:

o il browser in quanto applicazione (navigator),

o la finestra corrente (window),

o l'URL corrente (location)

o l'elenco degli URL visitati di recente (history)

• gli oggetti ricavati dal codice HTMLdella pagina, per es:

<img src="silvestri1.jpg" id="acrobati">

<p id="descr_album">

<form action="calcola.php" method="post" id="costo_tot">

<input type="text" id="username">

• delle funzioni (chiamate anche metodi) per eseguire operazioni sugli oggetti

Javascript: DOM ‐ II

6

(4)

Javascript: DOM ‐ III

window document

immagine (tag img) con id="acrobati"

paragrafo (tag p) con id="descr_album"

location history

Il disco è "nato" a Lecce nello studio "Posada Negro" di Roy Paci ...

form (tag form) con id="costo_tot"

campo di input testuale (tag input) con id="username"

Javascript: DOM ‐ IV

navigator Il DOM è organizzato in modo gerarchico (window è il

"progenitore"; navigator, document, ... sono suoi "figli";

gli elementi nella pagina sono

"figli" di document; ecc...):

window

history location document navigator

paragraph – id="descr_album"

form – id="costo_tot"

image – id="acrobati"

campo di input (testuale) – id="username"

(5)

Per accedere alla gerarchia di oggetti del DOM si può usare la dot notation:

window.document.getElementById("acrobati")

Javascript: DOM ‐ V

funzione predefinita nel DOM che

‐ prende in input una stringa di testo (es. "acrobati")

‐ restituisce come risultato l'oggetto del DOM che ha quella stringa come valore dell'id (nel nostro es. un'immagine)

Alcuni esempi di utilizzo degli oggetti del DOM...

• si può usare l'oggetto navigator per sapere quale browser si sta utilizzando (Explorer/Firefox/Chrome/...):

var n = window.navigator.userAgent;

document.write("<p>");

document.write("n = " + n);

document.write("</p>");

</script>

In Firefox:

n = Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:61.0) Gecko/20100101 Firefox/61.0

Javascript: DOM ‐ VI

VEDI: prove_js_navigator.html 10 VEDI: prove_js_navigator.html

(6)

• si può usare l'oggetto location per caricare nella finestra una pagina differente:

window.location.href = "http://www.unito.it";

[alla proprietà href dell'oggetto location assegno un nuovo valore (un nuovo URL)]

• si può usare l'oggetto history per tornare alla pagina web precedente:

window.history.back();

[all'oggetto history chiedo di eseguire l'operazione back()]

Nota generale su Javascript:

Attenzione! Il DOM è definito dal browser! E la definizione è fatta separatamente da Firefox, MS Explorer, Safari, Chrome, ecc... non esiste un vero standard!

 possono nascere incompatibilità…

Javascript: DOM ‐ VII

11

I programmi Javascript sono tipicamente "guidati dagli eventi" (event‐driven):

• Eventi = azioni dell'utente sulla pagina web: ogni volta che l'utente fa click su un link, scrive qualcosa nella casella di un modulo online, preme un pulsante, ridimensiona una finestra, ecc… genera un "evento"

 un programma Javascript deve contenere un gestore di eventi (event handler), che sia in grado di intercettare le azioni dell'utente (eventi) ed eseguire, di conseguenza, delle istruzioni

• Il DOM fornisce una serie di gestori di eventi predefiniti (cioè capaci di intercettare diversi tipi di azioni

dell'utente): l'accadere di un evento nella pagina web mette automaticamente in azione il corrispondente gestore di eventi, che eseguirà le istruzioni assegnategli

Javascript: eventi ‐ I

(7)

 grazie agli oggetti definiti nel DOM e ai gestori di eventi, negli script Javascript è possibile:

 reagire agli eventi (azioni dell'utente)

 interagire con vari elementi del browser e della pagina

 rendere interattive le applicazioni web!

Per esempio:

• fa sì che, al passaggio del mouse, un'immagine cambi

• far sì che, al click del mouse su un link, venga eseguita una azione (per es. di stampa)

• far sì che, al click del mouse su un link, venga visualizzata un'immagine

• ecc…

Javascript: eventi ‐ II

In generale, per ottenere questa interattività occorre:

1. intercettare l'evento, per es. il passaggio o il click del mouse su un determinato oggetto del DOM

2. assegnare al gestore dell'evento una funzione (una sequenza di istruzioni) da eseguire al verificarsi dell'evento

Es. di eventi generati da azioni del mouse su un oggetto:

 click

 dbclick (doppio click)

 mouseover (il cursore del mouse passa sull'oggetto)

 mouseout (il cursore del mouse "esce" dall'oggetto)

Javascript: eventi ‐ III

(8)

Esempio 1:

window.document.getElementById("sta").onclick = stampa;

};

function stampa() { window.print();

}

</script>

...

<button id="sta">

stampa il testo

</button>

Javascript: eventi ‐ IV

VEDI: prove_js_eventi.html VEDI: prove_js_eventi.html

click sul link stampa della pagina

Esempio 2:

window.document.getElementById("foto").onmouseover = caricaSecondaFoto;

window.document.getElementById("foto").onmouseout = caricaPrimaFoto;

};

function caricaPrimaFoto() {

window.document.getElementById("foto").src =

"silvestri1.jpg";

}

function caricaSecondaFoto() {

window.document.getElementById("foto").src =

"silvestri2.jpg";

}

</script>

...

<img src="silvestri_s.jpg"

id="foto">

Javascript: eventi ‐ V

passaggio mouse sull'immagine

 cambiamento dell'immagine

(9)

17

Esempio 3:

<ol>

<li><a href="#sard" id="uno">

Torre Coltellazzo</a></li>

<li><a href="#sard" id="due">

Chia: spiaggia</a></li>

<li><a href="#sard" id="tre">

Chia: mare </a></li>

</a></li>

</ol>

<img src="coltellazzo.jpg"

id="sardegna">

Javascript: eventi ‐ VI

click del mouse sui link

visualizzazione img corrispondente

window.document.getElementById("uno").onclick = caricaDiapo1;

window.document.getElementById("due").onclick = caricaDiapo2;

window.document.getElementById("tre").onclick = caricaDiapo3;

function caricaDiapo1() {

window.document.getElementById("sardegna").src =

"coltellazzo.jpg"; } function caricaDiapo2() {

"calaChia.jpg"; } function caricaDiapo3() {

"acquaChia.jpg"; }

</script>

Javascript: eventi ‐ VII

(10)

Una delle innovazioni più citate di HTML5 riguarda la gestione degli oggetti multimediali nella pagina:

– nuovi tag per inserire oggetti multimediali:

<audio src=...> </audio>

<video src=...> </video>

– API (Javascript!) per interagire con questi oggetti; per es:

<audio id="casa" src="laMiaCasa.mp3" controls preload>

</audio>

Javascript e HTML5: multimedia ‐ I

l'attributo controls (impostato a true) fa sì che vengano inseriti i controlli (play, pause, ecc.) nel widget

l'attributo preload (impostato a true) fa sì che l'audio/video venga caricato insieme alla pagina

VEDI: prove_html5_api.html VEDI: prove_html5_api.html

<button id="playB">suona!</button>

<button id="pauseB">pausa...</button>

Nell'intestazione (<head> </head>):

window.document.getElementById("playB").onclick = suona;

window.document.getElementById("pauseB").onclick = pausa;

};

function suona() {

window.document.getElementById("casa").play(); } function pausa() {

window.document.getElementById("casa").pause(); }

</script>

Javascript e HTML5: multimedia ‐ II

(11)

Esiste anche la possibilità di utilizzare Javascript come

linguaggio di programmazione web server‐side (utilizzando la libreria Node.js: ), ma si tratta di un uso decisamente poco comune...

• https://nodejs.org/

• http://www.html.it/guide/guida-nodejs/

Javascript – Node.js

jQuery ‐ I

jQuery (jquery.com) [www.html.it/guide/guida-jquery]

è una libreria Javascript che

• "nasconde" la complessità dell'interazione diretta con il DOMe con XMLHttpRequest (AJAX, che vedremo poi...) semplifica la vita ai programmatori e rende il codice più compatto...

• permette di sviluppare applicazioni (client‐side) cross‐browser

• usa DOM API native, quindi non fa nulla di più di Javascript!

Cosa vuol dire che jQuery è una libreria Javascript?!?

... che il codice jQuery viene prima tradotto in Javascript e poi interpretato (ed eseguito) dall'interprete Javascript!

$("a").click (function() { alert("Hello");

});

jQuery

interprete Javascript libreria

jQuery

document.

getElById("aa").

onclick = msg;

...

Javascript esecuzione

(12)

jQuery ‐ II

In particolare, con jQuery è possibile:

• interagire con il DOM, selezionando e manipolando elementi definiti dall'HTML (o dal CSS), ed eseguire operazioni in risposta ad eventi

• inviare richieste (e ricevere risposte) asincrone e parziali (d)al Web Server, secondo il modello AJAX

 è un modo di scrivere programmi Javascript... senza usare Javascript!

Per usare jQuery occorre innanzitutto importare la libreria nella pagina HTML:

 <script src="jquery-3.4.1.js"></script>

(se ho scaricato la libreria jQuery è l'ho salvata sul mio server; rif. https://jquery.com/download/)

 <script src="https://ajax.googleapis.com/ajax/libs/

jquery/3.4.1/jquery.min.js"></script>(se uso una versione remota di jQuery, x es. fornita sul server di Google; rif.

https://developers.google.com/speed/libraries/#jquery)

jQuery ‐ III

Uno degli aspetti principali di jQuery sono i selettori, accanto ai gestori di eventi; per es:

• al click su qualunque link presente nella pagina, fai comparire una finestra di benvenuto

$(document).ready(function(){

$('a').click(function(){

alert("Benvenuto!");});

}

</script>

• al click su un certo link (con id="pippo"), fai comparire una finestra di benvenuto

<a id="pippo">...</a>

$('#pippo').click(function(){

alert("Benvenuto!");});

selettore (criterio di selezione: "a", cioè tutti gli elementi di tipo<a...></a>)

selettore (criterio di selezione: "#pippo", cioè l'elemento con

<... id="pippo"

)

gestore dell'evento click: al verificarsi dell'evento, esegui questa funzione

(13)

jQuery ‐ IV

Per selezionare elementi della pagina si può utilizzare…

• il tipo: ^$('a') seleziona tutti gli elementi di tipo

<a...></a>(NB il tipo è dato dal tag!!)

• un attributo: ^$('[alt]') seleziona tutti gli elementi di che hanno l'attributo<... alt=...>

$('[alt="pippo"]') seleziona tutti gli elementi di che hanno <... alt="pippo" ...>

• la classe (generalmente definita nel foglio di stile CSS):

$('.dispari') seleziona tutti gli elementi di che hanno

<... class="dispari" ...>

• l'id: $('#pippo') seleziona l'elemento con

<... id="pippo" ...>

• i filtri[non li vediamo: rif. Cameron 2014, pp. 94‐97]

jQuery ‐ V

Consideriamo il seguente codice HTML:

<ul id="lista_prodotti">

<li name="p1">

<span name="n1">prodotto 1</span>:

<span name="prezzo1">10 euro</span>

</li>

<li name="p2">

</li>

<li name="p3">

</li>

</ul>

(14)

jQuery ‐ VI

I selettori possono essere combinati... x es:

$('li[name="p1"]') seleziona l'elemento li (list item) che ha name=p1

Una volta selezionato un elemento, possiamo partire da lì per navigare il DOM, x es:

$('li[name="p1"]').siblings() seleziona i fratelli (siblings) dell'elemento li

con name=p1

$('li').parent() seleziona il genitore (parent) di tutti gli elementi di tipo^<li>

ricordiamoci che gli elementi della pagina hanno una struttura gerarchica, definita dall'HTML...

ul

span document

select selectli

fratelli (figli di ul)

jQuery ‐ VII

Ci sono varie altre funzioni per navigare il DOM...

[rif. Cameron 2014, pp. 97‐99]

Possiamo anche manipolare elementi del DOM, x es:

$('span[name="n1"]').append('*') aggiunge un asterisco come figlio dell'elemento di tipo span con name=n1

Ci sono varie altre funzioni per manipolare il DOM...

[rif. Cameron 2014, pp. 99‐103]

Possiamo anche ispezionare elementi del DOM, x es:

• $('select').val() mi restituisce il valore dell'opzione selezionata nel (primo!) menu (select)

• $('select').val('pippo') assegna il valore "pippo"

(selezione) al (primo!) menu (select)

Naturalmente, con jQuery, possiamo intercettare gli eventi (e eseguire azioni in risposta a essi)...

(15)

jQuery ‐ VIII

Eventi generati dall'utente:

̶ click: click su un elemento (es. pulsante o link)

̶ dbclick: doppio click su un elemento (es. pulsante o link)

̶ hover: passaggio del mouse su un elemento

̶ mousedown: click sul pulsante del mouse (prima che venga rilasciato)

̶ mouseup: rilascio del pulsante del mouse (precedentem. cliccato)

̶ keypress: click su un tasto (con il cursore all'interno di un elemento, x es.

un campo di un form)

̶ keydown: click su un tasto (prima che l'esito compaia sullo schermo)

̶ focus: spostamento del cursore (focus) in un campo (form)

̶ blur: spostamento del cursore (focus) al di fuori di un campo in focus

̶ change: cambiamento del valore di un campo di un form

Eventi generati dal sistema:

̶ il documento (pagina) è stato caricato (ready/load)

̶ si è verificato un errore

̶ la finestra del browser è stata ridimensionata

jQuery ‐ IX

Esempio: Nel CSS:

$('#addImage').click(function(e) { .noShow {

e.preventDefault(); display:none;

$('#img').removeClass('noShow'); }

$('#cmd').addClass('noShow');

});

...

<p id="cmd"><a href="#" id="addImage">aggiungi imm.</a></p>

<div id="img" class="noShow"><img src="lamanorossa.jpg"></div>

Cosa fa il codice jQuery?

̶ seleziona l'elemento con id="addImage";

̶ aggiunge a tale elemento un gestore di eventi (o event listener) che intercetta l'evento di click (utilizzando la funzione ^click(...), la quale richiede, come parametro, la funzione da eseguire)

̶ al verificarsi di tale evento su quell'elemento, esegue una funzione anonima, che ha come parametro l'evento di click (e), la quale:

̵ evita il comportamento di default del click sul link

̵ rimuove l'attributo class="noShow"dall'elemento con id="img"e lo aggiunge all'elemento con id="cmd"

(16)

jQuery ‐ X

• la funzione anonima passata come parametro al gestore di eventi viene chiamata funzione di callback, cioè una funzione che non viene eseguita subito, ma solo quando si verifica l'evento

$(...).click(function(e) { e.preventDefault();

});

questa funzione ha un parametro (e) che, al verificarsi dell'evento, viene "riempito" (dall'interprete jQuery) con l'oggetto che rappresenta l'evento stesso

• ad uno stesso elemento possono essere associati diversi gestori di eventi: ai link, il browser associa sempre un gestore che fa sì che al click venga caricata la pagina indicata nell'attributo HREF; per inibire questo comportamento, si può invocare, sull'evento di click (e) la funzione preventDefault()

NB è possibile aggiungere gestori di eventi a qualunque elemento (html) della pagina (anche se è molto comune usare i link...)

jQuery ‐ XI

Un ultima cosa...

è necessario evitare che i gestori di eventi vengano aggiunti a elementi del DOM prima che questo sia stato completato:

$(document).ready(function() {

$('#addImage').click(function(e) { e.preventDefault();

$('#insImg').removeClass('noShow');

});

});

oppure:

$(document).load(function() {

$('#addImage').click(function(e) { e.preventDefault();

$('#insImg').removeClass('noShow');

});

});

il DOM è stato costruito, ma non necessariamente tutti gli elementi (es. le immagini) sono stati caricati

il DOM è stato costruito e tutti gli elementi (es.

le immagini) sono stati caricati

(17)

Strumenti… ‐ I

Un suggerimento: usate gli strumenti per gli sviluppatori dei browser x il

debugging (ricerca e risoluzione degli errori) Per es. in Chrome...

Strumenti… ‐ II

(18)

Strumenti… ‐ III

è possibile "guardare dentro" a un elemento (del DOM) cliccando col tasto destro del mouse e selezionando Ispeziona

Strumenti… ‐ IV

utilizzando l'istruzione Javascript console.log(<string>) potete stampare stringhe sulla Console (dove comunque vengono segnalati eventuali errori..)

(19)

Strumenti… ‐ V

Di fronte a comportamenti "ostinati" del browser (es. quando sembra che non "veda" modifiche al codice della pagina...), può essere utile cancellare cookie, cronologia di navigazione, cache, ecc.

In Chrome:

Strumenti… ‐ VI

(20)

Strumenti… ‐ VII

Javascript e jQuery

• vedremo Javascript e soprattutto jQuery in uso nei prossimi capitoli della saga...

• intanto potete provare a giocare un po' con loro

la componente client‐side: