la componente client‐side - DiUniTogoy/materiale/1920/06_TecWeb1920_introJSjQuery.pdf · –alla...

aa 2019/2020

1

la componente client‐side:

breve introduzione a Javascript e jQuery

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

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

aa 2019/2020

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

aa 2019/2020

3


Il DOM (Document Object Model) [www.html.it/pag/15174/introduzione14/]

• Javascript mette a disposizione del programmatore un insiemedi oggetti e di funzioni ("metodi") per interagire con glielementi 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 = titoloP = paragrafoUL = listaLI =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 HTML della 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

aa 2019/2020

4


Javascript: DOM ‐ IIIwindow document

immagine (tag img)con id="acrobati"

paragrafo (tag p) conid="descr_album"

locationhistory

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"

aa 2019/2020

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 valoredell'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/...):

<script>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

10VEDI: prove_js_navigator.htmlVEDI: prove_js_navigator.html

aa 2019/2020

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 voltache l'utente fa click su un link, scrive qualcosa nellacasella di un modulo online, preme un pulsante, ridimensiona una finestra, ecc… genera un "evento"

un programma Javascript deve contenere un gestoredi eventi (event handler), che sia in grado di intercettarele 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

12

aa 2019/2020

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 interattivele 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

aa 2019/2020

8


Esempio 1:

<script>window.onload = function() {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.htmlVEDI: prove_js_eventi.html

click sul link stampa della pagina


Esempio 2:<script>window.onload = function() {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

aa 2019/2020

9

17

Esempio 3:<a name="sard" /><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

<script>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() {window.document.getElementById("sardegna").src =

"calaChia.jpg"; }function caricaDiapo3() {window.document.getElementById("sardegna").src =

"acquaChia.jpg"; }</script>


Javascript: eventi ‐ VII

aa 2019/2020

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 paginaVEDI: prove_html5_api.htmlVEDI: prove_html5_api.html


<button id="playB">suona!</button><button id="pauseB">pausa...</button>

Nell'intestazione (<head> </head>):<script>window.onload = function() {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

aa 2019/2020

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 DOM e 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");

});

jQueryinterprete Javascript

libreria jQuery

document.getElById("aa").onclick = msg;...

Javascriptesecuzione

aa 2019/2020

12


jQuery ‐ IIIn 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 librerianella 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 ‐ IIIUno 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<script>$(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

aa 2019/2020

13


jQuery ‐ IVPer 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>


</li></ul>

aa 2019/2020

14


jQuery ‐ VII 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 licon name=p1

$('li').parent()seleziona il genitore(parent) di tutti glielementi di tipo <li>

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

ul

span

document

selectselectli

fratelli (figli di ul)


jQuery ‐ VIICi 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 asteriscocome 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)...

aa 2019/2020

15


jQuery ‐ VIIIEventi 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 ‐ IXEsempio: 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"

aa 2019/2020

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

aa 2019/2020

17


Strumenti… ‐ IUn suggerimento: usate gli strumenti per gli sviluppatori dei browser x il debugging(ricerca e risoluzione degli errori)

Per es. in Chrome...


Strumenti… ‐ II

aa 2019/2020

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 Javascriptconsole.log(<string>) potete stampare stringhe sulla Console (dove comunque vengono segnalati eventuali errori..)

aa 2019/2020

19


Strumenti… ‐ V

Di fronte a comportamenti "ostinati" del browser (es. quando sembrache non "veda" modifiche al codice della pagina...), può essere utilecancellare cookie, cronologia di navigazione, cache, ecc.In Chrome:


Strumenti… ‐ VI

aa 2019/2020

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

PUT ALL TOGETHER & TRY YOURSELF!

40

la componente client‐side - DiUniTogoy/materiale/1920/06_TecWeb1920_introJSjQuery.pdf · –alla...

Documents

Transcript of la componente client‐side - DiUniTogoy/materiale/1920/06_TecWeb1920_introJSjQuery.pdf · –alla...