6a - Tecnologie Web: approcci avanzati a.a. 2020/2021 - Unito
←
→
Trascrizione del contenuto della pagina
Se il tuo browser non visualizza correttamente la pagina, ti preghiamo di leggere il contenuto della pagina quaggiù
Tecnologie Web:
approcci avanzati
a.a. 2020/2021
6a
Anna Goy
Goy - a.a. 2020/2021 Tecnologie Web: approcci avanzati 1
la componente
client-side:
breve introduzione a
Javascript e jQuery
Goy - a.a. 2020/2021 Tecnologie Web: approcci avanzati 2
Goy - a.a. 2020/2021 Tecnologie Web: approcci avanzati 3
Javascript - I
Javascript [www.html.it/guide/guida-javascript-per-esempi]
• è un linguaggio di programmazione "ad alto livello" che serve per scrivere
programmi contenuti nelle pagine web (= script ⇒ è un linguaggio di scripting)
• è interpretato (e non compilato)
• l'interprete Javascript è contenuto nel browser ⇒ è una tecnologia client-side:
è il client (il browser) che interpreta (ed esegue) gli script
• è utilizzato soprattutto per costruire interfacce utente interattive nelle
applicazioni web
• è possibile utilizzare Javascript come linguaggio di programmazione web
server-side, cioè con un interprete sul server, utilizzando la libreria Node.js
[nodejs.org]
Goy - a.a. 2020/2021 Tecnologie Web: approcci avanzati 4
Javascript - II
• il codice Javascript viene (di solito) racchiuso nel tag (solitamente
nell'intestazione − head − della pagina HTML):
window.onload = function() {
document.getElementById("sta").onclick=stampa;
};
function stampa() {
window.print();
}
quando l'interprete HTML incontra il tag , "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)
Goy - a.a. 2020/2021 Tecnologie Web: approcci avanzati 5
Javascript: DOM - I
Il DOM (Document Object Model) [www.html.it/pag/15174/introduzione14]
• con Javascript possiamo scrivere programmi che interagiscono (attraverso
funzioni o metodi) con oggetti che rappresentano elementi della pagina web
Vi ricordate HTML...?!?
TAG: definiscono la struttura della pagina, per es:
H1 = titolo
P = paragrafo
UL = lista
LI =elemento della lista
Ogni TAG, correttamente aperto e chiuso (... opp
), definisce un elemento (oggetto) della pagina
Javascript, grazie al DOM, ci permette di manipolare questi elementi (per es.
cambiare testi, immagini, menu, ecc.)
Goy - a.a. 2020/2021 Tecnologie Web: approcci avanzati 6
Javascript: DOM - II
Il DOM contiene:
• un insieme 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:
→ oggetto di tipo immagine
→ oggetto di tipo paragrafo
→ oggetto di tipo form
→ oggetto di tipo campo di input
• delle funzioni (chiamate anche metodi) per eseguire operazioni sugli oggetti
Goy - a.a. 2020/2021 Tecnologie Web: approcci avanzati 7
Javascript: DOM - III
history window location document
Il disco è "nato" a Lecce
nello studio "Posada
Negro" di Roy Paci ... paragrafo
immagine
campo di input
testuale
Goy - a.a. 2020/2021 Tecnologie Web: approcci avanzati 8
Javascript: DOM - IV
Il DOM è organizzato in modo gerarchico:
• window è il "progenitore"
• navigator, document, ... sono suoi "figli"
• gli elementi nella pagina sono "figli" di
document (che rappresenta la pagina)
• i campi di un form sono "figli"
dell'oggetto form, ecc... navigator
window
navigator image – id="acrobati"
document paragraph – id="descr_album"
location form – id="costo" campo di input (testuale)
– id="username"
history
Goy - a.a. 2020/2021 Tecnologie Web: approcci avanzati 9
Javascript: DOM - V
Per accedere alla gerarchia di oggetti del DOM si può usare la dot notation:
window.document.getElementById("acrobati");
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)
Goy - a.a. 2020/2021 Tecnologie Web: approcci avanzati 10RIF prove_js_navigator.html
Javascript: DOM - VI
Alcuni esempi di utilizzo degli oggetti del DOM...
• si può usare l'oggetto navigator per avere informazioni sul browser che si sta
utilizzando :
var n = window.navigator.userAgent;
document.write("");
document.write("n = " + n);
document.write("");
Per es. con Chrome:
n = Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/84.0.4147.105 Safari/537.36
Goy - a.a. 2020/2021 Tecnologie Web: approcci avanzati 11Javascript: DOM - VII
• 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 dai vari browser (Firefox, MS Explorer, Safari, Chrome, ecc...)
⇒ non esiste un vero standard!
⇒oggetti e funzioni possono avere comportamenti diversi nei vari browser
⇒ possono nascere incompatibilità…
⇒ testate sempre gli script nei vari browser!
Goy - a.a. 2020/2021 Tecnologie Web: approcci avanzati 12Javascript: eventi - I
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 dal programmatore
• Esempi: al passaggio del mouse (evento=mouseOver) su un'immagine →
cambia l'immagine; al click del mouse (evento=click) su un pulsante →
stampa la pagina, ecc...
Goy - a.a. 2020/2021 Tecnologie Web: approcci avanzati 13Javascript: eventi - II
⇒ grazie ai gestori di eventi (che intercettano la specifica azione dell'utente)
e agli oggetti (per capire su quale elemento della pagina avviene l'evento)
definiti nel DOM, negli script Javascript è possibile:
intercettare gli eventi
eseguire delle azioni (sugli elementi del browser e della pagina) in
risposta a tali eventi
cioè... rendere interattive le applicazioni web!
Per ottenere questa interattività occorre:
1. utilizzare il gestore di eventi opportuno e legarlo all'oggetto prescelto (es.
click sul pulsante con id="stampa")
2. assegnare al gestore una funzione (una sequenza di istruzioni) da eseguire al
verificarsi dell'evento
Goy - a.a. 2020/2021 Tecnologie Web: approcci avanzati 14RIF prove_js_eventi.html
Javascript: eventi - III
Esempio 1:
...
window.onload = function() {
window.document.getElementById("sta").onclick = stampa;
};
function stampa() {
window.print();
}
... click sul bottone (con id="sta")
→ esegui la funzione stampa,
... la quale invoca la funzione
print() sull'oggetto window
stampa il testo
...
Goy - a.a. 2020/2021 Tecnologie Web: approcci avanzati 15RIF prove_js_eventi.html
Javascript: eventi - IV
Esempio 2:
...
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";
}
passaggio mouse sull'img (id="foto") → esegui la funzione caricaSecondaFoto[*]
...
spostamento mouse fuori dall'img (id="foto")
→ esegui la funzione caricaPrimaFoto [*]
...
...
[*] le quali assegnano alla proprietà src dell'oggetto
con id="foto" (immagine) un nuovo valore (file dell'img)
Goy - a.a. 2020/2021 Tecnologie Web: approcci avanzati 16RIF prove_js_eventi.html
Javascript: eventi - V
Esempio 3:
...
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";
}
...
Goy - a.a. 2020/2021 Tecnologie Web: approcci avanzati 17RIF prove_js_eventi.html
Javascript: eventi - VI
...
Torre Coltellazzo
Chia: spiaggia
Chia: mare
...
click sui link (con id="uno/due/tre")
→ esegui la funzione caricaDiapo1/2/3,
la quale assegna alla proprietà src dell'oggetto
con id="uno/due/tre" (immagine) un nuovo
valore (file dell'img)
Goy - a.a. 2020/2021 Tecnologie Web: approcci avanzati 18RIF prove_html5_api.html
Javascript e HTML5: multimedia - I
Una delle innovazioni più citate di HTML5 riguarda la gestione degli oggetti
multimediali nella pagina:
– nuovi tag per inserire oggetti multimediali:
– API (Javascript!) per interagire con questi oggetti; per es:
l'attributo controls (impostato a true)
fa sì che vengano inseriti i controlli l'attributo preload (impostato a
(play, pause, ecc.) nel widget true) fa sì che l'audio/video venga
caricato insieme alla pagina
Goy - a.a. 2020/2021 Tecnologie Web: approcci avanzati 19RIF prove_html5_api.html
Javascript e HTML5: multimedia - II
suona!
pausa...
Nell'intestazione ( ):
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(); }
Goy - a.a. 2020/2021 Tecnologie Web: approcci avanzati 20Tecnologie Web:
approcci avanzati
a.a. 2020/2021
6b
Anna Goy
Goy - a.a. 2020/2021 Tecnologie Web: approcci avanzati 21jQuery - 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 document.
(function() { getElById("aa").
alert("Hello"); onclick = msg;
});
libreria ... interprete
jQuery jQuery Javascript Javascript esecuzione
Goy - a.a. 2020/2021 Tecnologie Web: approcci avanzati 22jQuery - 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
Per usare jQuery occorre innanzitutto importare la libreria nella pagina HTML:
−
(se ho scaricato la libreria jQuery è l'ho salvata sul mio server;
rif. https://jquery.com/download/)
−
(se uso una versione remota di jQuery, x es. fornita sul server di Google;
rif. https://developers.google.com/speed/libraries/#jquery)
Goy - a.a. 2020/2021 Tecnologie Web: approcci avanzati 23jQuery - III
Uno degli aspetti principali di jQuery sono i selettori,
accanto ai gestori di eventi; per esempio:
• al click su qualunque link presente nella pagina,
fai comparire una finestra di benvenuto
$(document).ready(function(){ gestore dell'evento click: al verificarsi
$('a').click(function(){ dell'evento, esegui questa funzione
alert("Benvenuto!");});
} selettore (criterio di selezione: "a", cioè
tutti gli elementi di tipo )
• al click su un certo link (con id="pippo"), fai comparire una finestra di
benvenuto
...
$('#pippo').click(function(){ selettore (criterio di selezione:
alert("Benvenuto!");}); "#pippo", cioè l'elemento con
)
Goy - a.a. 2020/2021 Tecnologie Web: approcci avanzati 24jQuery - IV
Per selezionare elementi della pagina si può utilizzare…
• il valore dell'attributo id: $('#pippo') → seleziona l'elemento con
• il tipo (= il tag HTML): $('a') → seleziona tutti gli elementi di tipo
• la presenza di un attributo, opp il valore di un attributo:
$('[alt]') → seleziona tutti gli elementi di che hanno l'attributo
$('[alt="palla"]') → seleziona tutti gli elementi di che hanno
• la classe (generalmente definita nel foglio di stile CSS):
$('.dispari') → seleziona tutti gli elementi di che hanno
• i filtri [non li vediamo: rif. Cameron 2014, pp. 94-97]
Goy - a.a. 2020/2021 Tecnologie Web: approcci avanzati 25RIF prove_jQuery.html
jQuery - V
Vediamo qualche esempio:
Goy - a.a. 2020/2021 Tecnologie Web: approcci avanzati 26RIF prove_jQuery.html
jQuery - VI
Nella pagina HTML:
Io sono il paragrafo pippo
pagina uno
pagina due
pagina tre
Io sono il primo paragrafo (dispari)
Io sono il secondo paragrafo (pari)
Io sono il terzo paragrafo (dispari)
Nel CSS:
// definizione della classe dispari
.dispari {
background-color:yellow
}
Goy - a.a. 2020/2021 Tecnologie Web: approcci avanzati 27RIF prove_jQuery.html
jQuery - VII
Nella pagina HTML:
...
... ris contiene l'elemento UL dove
scriverò i risultati
jQuery(document).ready(function(){
pi contiene l'unico elemento che ha
var ris = $('#ris'); id='pippo'
var pi = $('#pippo');
ris.append("Selezione elem con id='pippo' > lunghezza risultato: "
+pi.length+", tag: "+pi.prop("tagName")+", contenuto: "
...
+pi.text()+"");
append(…): inserisce il contenuto
(argomento di tipo stringa) nell'elemento
del DOM su cui viene invocato
ready: funzione che controlla che il DOM sia prop(…): restituisce il valore della proprietà
stato costruito → tutti gli elementi (oggetti) passata come argomento (stringa), per
sono disponibili; prende come argomento l'elemento del DOM su cui viene invocata
una funzione anonima che contiene… tutte text(…): restituisce il testo (senza markup!)
le istruzioni che devo eseguire sul DOM! dell'elemento del DOM su cui viene invocata
Goy - a.a. 2020/2021 Tecnologie Web: approcci avanzati 28RIF prove_jQuery.html
jQuery - VIII
var all_a = $('a'); all_a contiene tutti gli elementi di tipo A
ris.append("Selezione tutti i link > lunghezza risultato: "
+all_a.length+", tag: "+ all_a.prop("tagName"));
il tag è uguale per tutti gli elementi selezionati, quindi lo chiedo una sola volta
(di fatto, al primo elemento)
il testo e l'attributo href sono diversi per i diversi elementi trovati dal selettore,
quindi uso un ciclo per leggerli tutti
for (i = 0; i < all_a.length; i++){
ris.append("("+i+") testo: "+all_a[i].text+", href: "+all_a[i].href
+"");
}
ris.append("");
la proprietà text contiene il testo
(senza markup!) dell'elemento
la proprietà href contiene il valore
dell'attributo href
Goy - a.a. 2020/2021 Tecnologie Web: approcci avanzati 29RIF prove_jQuery.html
jQuery - IX
var alt_pa = $('[alt="palla tre"]');
alt_pa contiene l'unico elemento che
ha alt='palla tre'
ris.append("Selezione elemento con alt='palla tre' > lunghezza
risultato: "+alt_pa.length+", tag: "+alt_pa.prop("tagName")
+", file: "+alt_pa.attr('src')+"");
attr(…): restituisce il valore dell'attributo passato come argomento (stringa), per
l'elemento del DOM su cui viene invocata
var di = $('.dispari'); all_a contiene tutti gli elementi con class='dispari'
ris.append("Selezione elementi con class='dispari' > lunghezza
risultato: "+di.length);
for (i = 0; i < di.length; i++) {
ris.append("("+i+") tag: "+di[i].tagName+", contenuto: "+di[i].innerHTML
+"");
}
ris.append("");
}); // chiusura funzione ready sia il tag sia il testo sono (potenzialmente) diversi
per i diversi elementi trovati dal selettore, quindi
uso un ciclo per leggerli tutti
Goy - a.a. 2020/2021 Tecnologie Web: approcci avanzati 30jQuery - X
ATTENZIONE! i modi per leggere proprietà varie degli elementi selezionati sono
molto eterogenei... :-( Notate per esempio:
• per leggere il tagName: pi.prop("tagName"), di[i].tagName
• per leggere il testo: pi.text(), all_a[i].text, di[i].innerHTML
• per leggere il valore di un attributo: alt_pa.attr('src'), all_a[i].href
Perché?? [https://stackoverflow.com/questions/33390659/what-kind-of-object-does-a-jquery-selector-return]
I selettori jQuery restituiscono "oggetti jQuery" (selection set), simili ad array
→ posso accedere agli elementi del selection set attraverso l'indice (es: di[i])
→ posso invocare, su questi "oggetti jQuery" dei metodi (funzioni) jQuery, x
es prop(…), text(), attr(…)
Gli elementi contenuti in un selection set NON sono "oggetti jQuery", ma
semplici elementi del DOM (DOM object)!!
→ NON posso usare i metodi (funzioni) jQuery, ma posso usare le proprietà
definite nel DOM (x es tagName, text, innerHTML, href)
NB per convertire un elemento del DOM in un "oggetto jQuery": $(domEl)
Goy - a.a. 2020/2021 Tecnologie Web: approcci avanzati 31jQuery - XI
• I selettori possono essere combinati... x es:
$('li[name="p1"]') → seleziona l'elemento li (list item) che ha name=p1
• Sia i metodi (funzioni) jQuery, sia le proprietà definite nel DOM possono essere
usate anche per assegnare valori agli oggetti!! x esempio:
$('#pippo').text("io sono pippo); → assegna il testo passato come argomento
all'elemento selezionato
$('p')[i].text = "tutti paragrafi uguali!!"; → assegna il testo indicato
all'elemento selezionato
$('#palla').attr("src","img-palla.jpg"); → assegna il file, il cui nome è passato
come secondo argomento, come valore dell'attributo, indicato nel primo
argomento, dell'elemento selezionato
$('a')[i].href = "http://unito.it/"; → assegna il valore (URL) indicato
all'attributo href dell'elemento selezionato
• Ci sono varie altre funzioni per navigare e per manipolare il DOM...
[rif. Cameron 2014, pp. 97-103]
• Un buon tutorial jQuery: www.w3schools.com/jquery
Goy - a.a. 2020/2021 Tecnologie Web: approcci avanzati 32RIF prove_jQuery.html
jQuery - XII
Naturalmente, con jQuery, possiamo intercettare gli eventi (e eseguire azioni in
risposta a essi)... x esempio:
aggiungi immagine
< img src="lamanorossa.jpg">
$('#addImage').click(function(e){
e.preventDefault(); Nel CSS:
$('#img').removeClass('noShow'); .noShow {
$('#cmd').addClass('noShow'); display:none;
}); }
• 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 (anonima) da eseguire
• al verificarsi di tale evento su quell'elemento, viene eseguita la funzione, la quale:
o evita il comportamento di default del click sul link (e.preventDefault();)
o rimuove l'attributo class="noShow" dall'elemento con id="img" e lo aggiunge
all'elemento con id="cmd"
Goy - a.a. 2020/2021 Tecnologie Web: approcci avanzati 33jQuery - XIII
• la funzione anonima passata come parametro al gestore di eventi viene
eseguita 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...)
Goy - a.a. 2020/2021 Tecnologie Web: approcci avanzati 34Strumenti… - I
Un suggerimento: usate
gli strumenti per gli
sviluppatori dei browser
x il debugging (= ricerca e
risoluzione degli errori)
Per es. in Chrome...
Goy - a.a. 2020/2021 Tecnologie Web: approcci avanzati 35Strumenti… - II Goy - a.a. 2020/2021 Tecnologie Web: approcci avanzati 36
Strumenti… - III
è possibile "guardare dentro" a un
elemento (del DOM) cliccando col tasto
destro del mouse e selezionando Ispeziona
Goy - a.a. 2020/2021 Tecnologie Web: approcci avanzati 37Strumenti… - IV
utilizzando l'istruzione Javascript
console.log() potete stampare
stringhe sulla Console, dove comunque
vengono segnalati gli errori!
Goy - a.a. 2020/2021 Tecnologie Web: approcci avanzati 38Strumenti… - 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:
Goy - a.a. 2020/2021 Tecnologie Web: approcci avanzati 39Strumenti… - VI Goy - a.a. 2020/2021 Tecnologie Web: approcci avanzati 40
Strumenti… - VII Goy - a.a. 2020/2021 Tecnologie Web: approcci avanzati 41
Attenzione...
... alla confusione di notazione tra PHP e Javascript/jQuery!!
• il punto (concatenazione di stringhe e dot notation)
– in PHP: "Buongiorno".$p → "Buongiorno pippo"
– in JS/jQuery: window.document.getElementById("acrobati") → seleziona
l'oggetto del DOM document e su di esso invoca il metodo getElementById(...)
• il dollaro (variabili e selettori)
– in PHP: $p = "pippo";
– in JS/jQuery: $('#pippo').click(function(){...});
• le frecce (array associativi e dot notation)
– in PHP:
$cliente = array("nome" => "anna", "cognome" => "goy", ...);
foreach ($lista as $k => $v) {
... }
$r = $db->query("SELECT * from libri");
$this->conn = null;
Goy - a.a. 2020/2021 Tecnologie Web: approcci avanzati 42PUT ALL TOGETHER & TRY YOURSELF!
CASE STUDY: quiz (versione 5)
Aggiorniamo il case study
• utilizzando jQuery, nell'ultima domanda, aggiungiamo la possibilità di
visualizzare il ritratto del personaggio cliccando su un link
NB Attenzione a come legare i vari id degli elementi del DOM (e i nomi dei file .jpg) alle
singole risposte...!!
RIF login_v5.php, logout_v5.php, dataMgr/domande_quiz_v5.sql, dataMgr/connDB_v5.php,
dataMgr/DomandaV.php,
Goy - a.a. 2020/2021 dataMgr/RispostaV, dataMgr/domande_v5.php, quiz_v5.php,
Tecnologie Web: approcci avanzati quiz_v5_elabora_risposte.php 43Puoi anche leggere
