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>
<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>
<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>
</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.
Nessun commento:
Posta un commento