Anche in questo caso abbiamo tre files: un html, un css e un js. Il riferimento al css e al js è nell'intestazione del file html:
<link href="cssDoc.css" rel="stylesheet" type="text/css" />
<script language="javascript" src="jsDoc.js"></script>
Abbiamo una table con un certo numero di immagini di automobili prese da Internet. Al centro della table c'è un'immagine più grande delle altre. Cliccando su una qualsiasi delle immagini più piccole che la circondano, questa prende il posto dell'immagine grande, e quest'ultima si posiziona al posto di quella piccola. L'effetto è scenografico, ma il codice necessario è veramente poco: quattro istruzioni.
Per prima cosa occorre assegnare un id all'immagine centrale. La scelta è stata quella di assegnargli il valore id="trg". Ciò fatto, abbiamo assegnato (ad ognuna delle immagini piccole) un gestore all'evento onclick, con la seguente sintassi:
<img class="manina" onclick="swapImg(this)" src="quello che ve pare"/>
Non mi soffermo sulla classe css "manina" perché so che non ne avete bisogno. Andiamo al sodo, cioè alla sintassi onclick="swapImg(this)". Già sapete che questo significa che, cliccando sull'immagine, viene chiamata in esecuzione la funzione swapImg alla quale viene passato il parametro "this". Sapete anche che "this" in italiano significa "questo" (e nella nobile lingua ciociara "chisse").
Ma "chisse" che? In questo caso "this" significa l'intero tag:
<img class="manina" onclick="swapImg(this)" src="quello che ve pare"/>
Ora guardiamo il codice della funzione swapImg, alla quale viene passato il parametro "chisse"... oops scusate, volevo dire "this".
function swapImg(p)
{
var x=p.src;
var trg=document.getElementById("trg")
p.src=trg.src;
trg.src=x;
}
La function accetta il parametro "p" (ma avremmo potuto chiamarlo come ci pare, salvo il divieto di usare "parole riservate"). Ovvio che se chiamiamo "p" il parametro, da ciò segue che, nel corso dell'esecuzione della function esso avrà il valore che gli è stato passato, vale a dire l'intero tag:
<img class="manina" onclick="swapImg(this)" src="quello che ve pare"/>
Quindi, nell'ambito dell'esecuzione della function swapImg, accade che "this" venga chiamato "p".
Perché non ho chiamato, anche nella function, il parametro con la parola "this"? Perché l'ho rinominato "p"? Semplice: perché "this" è una parola riservata, e dunque deve e può essere usata solo ed esclusivamente secondo le regole del linguaggio, e non come serve a noi. Claro? Casomai ve lo rispiego in laboratorio.
Ora, se "p" è tutto il tag, e questo ha degli attributi, che nel caso in esame sono:
- class
- onclick
- src
noi possiamo leggerne il valore con l'istruzione: p.<nome_attributo>
Per cui, se vogliamo sapere qual è il valore dell'attributo "src" e assegnarlo alla variabile "x" possiamo scrivere:
var x=p.src;
Dunque, eseguita questa istruzione, nella variabile "x" è memorizzato il valore di "src" dell'immagine su cui abbiamo cliccato. L'istruzione successiva:
var trg=document.getElementById("trg")
assegna alla variabile "trg" il contenuto del tag "img" relativo all'immagine centrale (quella grande). In questo caso, siccome "trg" non è una parola riservata, per pura comodità (cioè fare una scelta che ci aiuta a ricordare che dde sse tratta) abbiamo usato come nome di variabile lo stesso nome dell'id nella pagina html.
Vi siete persi? No problem, su questi dettagli torneremo, torneremo, torneremo, torneremo, torneremo, torneremo, torneremo, torneremo, torneremo, torneremo, torneremo, torneremo, torneremo, torneremo, torneremo, torneremo, torneremo, torneremo, torneremo, torneremo....
A questo punto, con l'istruzione:
p.src=trg.src;
assegniamo all'attributo "src" dell'immagine su cui abbiamo cliccato (che è il tag il cui id è "this") il valore dell'attributo "src" dell'immagine centrale (quella grande). Se ci fermassimo qui, il risultato sarebbe:
- immagine su cui abbiamo cliccato: compare l'immagine centrale
- immagine centrale: resta quello che c'era
Non ci resta, quindi, che mettere nell'immagine centrale quella su cui abbiamo cliccato. Lo facciamo con l'ultima istruzione:
trg.src=x;
Cioè assegniamo all'immagine centrale (il cui riferimento è "trg", come risultato dell'istruzione var trg=document.getElementById("trg")) un nuovo valore per l'attributo "src", che avevamo precedentemente prelevato e salvato nella variabile "x".
Due parole sullo swap
Ho assegnato alla function il nome "swapImage" in onore al fatto che nel gergo informatico il termine "swap" indica lo scambio di valori tra due variabili. Son Diego e vi spiego:
se x="pippo" e y="pluto", fare lo swap tra x e y significa che, dopo l'istruzione, si ha x="pluto" e y=pippo".
Vi ho anche spiegato, con un esempio "alcolico", in cosa consista lo swap. Lo ripeto. Immaginate di fare i camerieri in un locale e di dover portare a un tavolo un bicchiere di vino e uno di birra, ma che per errore avete messo il vino nel bicchiere della birra e la birra in quello del vino. Il caposala vi becca e vi ingiunge di rimediare. Che fare? Ovviamente avete bisogno di un terzo bicchiere: prima mettete il vino in questo bicchiere, poi versate la birra nel bicchiere giusto, poi travasate il vino dal terzo bicchiere in quello giusto per il vino.
Chiaro? Ricordatevi sempre, cari ragasciuoli, che molto spesso ciò che appare difficile è, in realtà, molto banale. Si tratta solo di imparare i rudimenti di un nuovo linguaggio.
Alla proxy (chiara allusione al fatto che prima o poi dovrete sapere cos'è un proxy).
