Pagine

domenica 21 febbraio 2016

Programmazione web lato client (2)

Salve ragasciuoli, eccomi qua a spiegarvi il secondo esercizio...

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).

sabato 13 febbraio 2016

Programmazione web lato client

Ho preparato un piccolo esempio per introdurre i miei studenti ai fondamentali della programmazione web lato client. L'esempio consta di tre files: il file htmlDoc.html, il file cssDoc.css e il file jsDoc.js, tutti nella stessa cartella.
Il sorgente di htmlDoc.html è il seguente:

<!DOCTYPE html>
<html>
<head>
<link href="cssDoc.css" rel="stylesheet" type="text/css" />
<script language="javascript" src="jsDoc.js"></script>
</head>
<body>
<p>Lorem ipsum dolor sit amet, nec molestie lacus elit nunc lacinia. Fermentum consequat nec, nunc orci, et amet vitae accumsan et, sit amet quam porttitor. Metus interdum vitae nulla id mi, a vehicula, cum et. Vero justo dictum, vivamus euismod neque mi pede pulvinar blandit, ad et nec quis vel molestie, mattis ultricies lorem dapibus volutpat non. Eget sem nec scelerisque vehicula hac.</p>
<p>
Ornare et vel dictum dictum et, quis mauris tempus accumsan. Sed ligula, est integer justo viverra. Lacus porttitor blandit ac, sit in rerum sodales urna. Urna amet malesuada feugiat sed eu sodales, integer quae aenean pellentesque eget vulputate est, pretium cupiditate, praesent taciti sapien. Tristique sodales leo urna, aliquet consectetuer fermentum sit. In neque gravida ac nunc, interdum orci bibendum convallis lobortis ac nec, vitae nibh nulla sodales mi justo nulla, sed sit vestibulum. Vestibulum eget morbi dolor. Et quis massa ultricies et eros est, vel id. Fringilla curabitur non orci duis erat commodo. Amet mauris nulla dui imperdiet, pede elit semper dui.</p>
<p>
Nunc suspendisse vehicula ipsum. A turpis mollis nulla nunc nunc. Libero facilisis fermentum vel at, viverra duis dolor orci pede lacinia tempore, mauris a justo proin in tincidunt, euismod nibh egestas. Tempus eleifend sit, vel placerat lacus est, sed suspendisse ut, aliquam arcu neque a. Duis eu nec suscipit eros accumsan. Consectetuer maecenas sed ac velit etiam, ante eget mattis sapien vitae vivamus, est faucibus vestibulum wisi, commodo purus congue nunc velit nec nec, ante ligula quis orci sed consequatur potenti. Vivamus libero, dis consequat donec mattis diam vestibulum, dis nunc pellentesque, metus augue mollis nisl, sed adipiscing faucibus curabitur non pede ut. Sit at a suscipit sed quis, tincidunt metus tellus, id risus massa vehicula, quis in ut dis sollicitudin turpis sem, vitae egestas tortor. Ut lacinia pulvinar pulvinar in, quis elit elit eu sed, nulla lorem placerat tempor pellentesque in, ullamcorper urna. Ut dictum vel fusce eros lectus, justo nulla cum ligula eros quis vel, arcu ullamcorper, torquent pulvinar fringilla turpis fringilla dolor. Fermentum leo augue natoque, fringilla vestibulum quis. Quis eleifend eget est vestibulum.</p>
<p>
Vel mauris mattis sit id, eget diam urna dui vestibulum sed, eu vulputate in mi et sit laoreet. Turpis ullamcorper quis sapien semper et tortor, auctor non elit fringilla, montes pellentesque viverra condimentum volutpat risus, diam tincidunt, lorem quam. Porta pede duis sed massa. Neque sit vehicula porta nec cras tortor, sed lobortis donec mi odio faucibus, mollis neque proin pretium ut, nonummy nostra tellus placerat adipiscing vel. Ultrices leo, lorem sem cursus mauris.</p>

<select id="paragrafo">

  <option value="">Scegli un paragrafo</option>
  <option value="0">Paragrafo 1</option>
  <option value="1">Paragrafo 2</option>
  <option value="2">Paragrafo 3</option>
  <option value="3">Paragrafo 4</option>
</select>

<select id="styling">

  <option value="">Scegli uno stile</option>
  <option value="pace">Pace</option>
  <option value="viulenza">Viulenza</option>
  <option value="sconvolten">Sconvolten</option>
  <option value="delicatessen">Delicatessen</option>
</select>

<button type="button" onclick="changePar()">Applica</button> 

<button type="button" onclick="resetPar()">Resetta</button>

</body>

</html>

Si noti l'uso di testo Lorem ipsum.

Nell'intestazione sono referenziati i due files cssDoc.css e jsDoc.js:

<link href="cssDoc.css" rel="stylesheet" type="text/css" />
<script language="javascript" src="jsDoc.js"></script>

Il codice di cssDoc.css è il seguente:

body
{
margin-left: 15px;
margin-right:15px;
padding:0;
height:100%;
font-family: Verdana;
font-size: 20px;


p

{
margin-left:35px;
margin-right:35px;
}

.pace{color: blue;background-color: yellow }

.viulenza{color: red;background-color: black }
.sconvolten{color: white;background-color: black }
.delicatessen{color: blue;background-color: red }

In particolare si notino le tre dichiarazioni di classe css: .pace, .viulenza, .sconvolten e .delicatessen.

Tali stili non sono usati al primo caricamento della pagina. Lo saranno quando, dopo aver scelto un singolo paragrafo e lo stile da applicare, premeremo sul pulsante "Applica". La pressione del pulsante "Reset" riporterà la pagina nella condizione iniziale.

Il file javascript che "fa il lavoro" è il seguente:

function changePar()
{
var par=document.getElementById("paragrafo").value;
var stile=document.getElementById("styling").value;
var pList = document.getElementsByTagName("p");

pList[par].className=stile;

}

function resetPar(){

var pList = document.getElementsByTagName("p");

for (i = 0; i < pList.length; i++) {

pList[i].className="";
}

paragrafo.selectedIndex=0;

styling.selectedIndex=0;

}


Esso consta di due funzioni, changePar() e resetPar(), che vengono eseguite quando si premono, rispettivamente, i pulsanti "Applica" e "Reset".

Gi studenti sono invitati a copiare i sorgenti e ad eseguire il codice. Ciò fatto, possono provare a introdurre qualche modifica, ad esempio al file css. I più bravi potranno intervenire sul codice javascript per ulteriori modifiche al comportamento della pagina.

Non appena possibile realizzerò un filmato nel quale approfondirò gli aspetti più concettuali dell'esempio e, più in generale, della programmazione web lato client. Have fun guys.