2. JavaScript?
E’ un linguaggio di
scripting lato-client,
interpretato da un
browser web
3. A cosa serve?
Rende le nostre pagine
interattive
Rispondono alle azioni degli utenti
4. CLIENT SERVER
Quando l’elaborazione è a carico del server
5. CLIENT SERVER
Quando l’elaborazione è a carico del client
6. • Come standard nasce alla fine degli anni 90
Standardizzazione del
Microsoft linguaggio da parte
Sun Microsystem e propone 2 dell’ECMA(1)
Java linguaggi Nasce ECMAScript
Sviluppatori di alternativi
Mosaic: primo Mosaic VBScript e Adozione e
browser a fondano Netscape Jscript in riconoscimento dello
interfaccia Netscape Navigator 2.0 e Internet standard da parte
grafica Communicatio JavaScript 1.0 Explorer 3.0 dell’ISO(2)
n Corporation
1992 1994 1995 1996 1997/1998
(1) ECMA – European Computer Manufacturers Association
(2) ISO – Internation Organization for Standardization
Quando è nato?
7. • Nella pagina HTML dentro un tag <script>:
<script type=‘text/javascript’>
…
</script> 1 Da preferire per mantenere
la separazione tra codice
2 HTML e codice di scripting
Se JavaScript è
coinvolto nella
costruzione del
layout della
pagina
Dove scrivo il codice JavaScript?
8. • In file esterni (file di testo con estensione .js)
– Per alleggerire la pagina HTML
– Per utilizzare il codice in più pagine
– Per ottimizzare il caricamento delle pagine con lo
stesso codice (il file viene salvato nella cache del
browser – se attiva)
• Il codice viene reso disponibile nella pagina
attraverso la seguente sintassi prima della
fine del tag <head>
<script type="text/javascript" src=“my_first_jsfile.js"></script>
Dove scrivo il codice javascript???
11. un po’ di codice …
…
<script type=‘text/javascript’>
var d = new Date();
var time = d.getHours();
if (time < 18) {
document.write(‘<h1>Buongiorno</h1>’);
} else {
document.write(‘<h1>Buonasera</h1>’);
}
</script>
…
12. meglio se in una funzione:
…
function greetings() {
var d = new Date();
var time = d.getHours();
if (time < 18) {
document.write(‘<h1>Buongiorno</h1>’);
} else {
document.write(‘<h1>Buonasera</h1>’);
}
}
…
13. • Una variabile dichiarata all’interno di una
funzione ha validità locale per quella
funzione
• Se dichiaro una variabile esternamente
questa ha validità globale
• Se non dichiaro la variabile non viene fatta
distinzione tra locale e globale e assume
validità su tutta la pagina
Ambito delle variabili
14. • Il DOM descrive come i diversi oggetti di una
pagina sono collegati tra loro
<html>
<head> <body>
<title> <meta> <ul> <h1>
<li> <li>
Document Object Model
16. DOM
Tutto il contenuto presente in una pagina
HTML è rappresentato da un document, il
document è costituito da nodi
17. DOM
Tutto il contenuto presente in una pagina
HTML è rappresentato da un document, il
document è costituito da nodi, ogni tag è
un nodo di tipo element
18. <span class=“nota”>
Struttura di un nodo
</span>
element
span text
attribute
Struttura di un
class=“nota” nodo
19. proprietà di un nodo
nodeValue childNodes
Il valore salvato nel Insieme dei nodi figli
nodo (eccetto per il del nodo corrente
tipo element)
firstChild
Primo nodo figlio del
nodeType
nodo corrente
Il tipo di nodo, ovvero
TEXT, ELEMENT o
ATTRIBUTE espresso in lastChild
numero Ultimo nodo figlio del
nodo corrente
20. Il DOM può
essere
manipolato
con
JavaScript
al fine di
modificare il
contenuto di una
pagina HTML
21. <p id=‘ora’>Ore 17:33</p>
1• Recupero l’elemento tramite l’id:
var d = new Date();
var el = document.getElementById(‘ora’);
var text = el.firstChild;
text.nodeValue = ‘Ore ‘ + d.getHours() + ‘:’ + d.getMinutes();
Modificare il testo di un elemento
22. <p id=‘ora’>Ore 17:33</p>
2• Passo al primo nodo figlio per avere il testo
var d = new Date();
var el = document.getElementById(‘ora’);
var text = el.firstChild;
text.nodeValue = ‘Ore ‘ + d.getHours() + ‘:’ + d.getMinutes();
Modificare il testo di un elemento
23. <p id=‘ora’>Ore 17:33</p>
3• Assegno tramite la proprietà nodeValue il
nuovo valore:
var d = new Date();
var el = document.getElementById(‘ora’);
var text = el.firstChild;
text.nodeValue = ‘Ore ‘ + d.getHours() + ‘:’ + d.getMinutes();
Modificare il testo di un elemento
25. <p id=‘ora’>Ore 17:33</p>
2• Rimuovo tutti gli elementi figli del nodo
corrente
var d = new Date();
var el = document.getElementById(‘ora’);
while(el.firstChild){
el.removeChild(el.firstChild);
}
…
Modificare il testo di un elemento
26. <p id=‘ora’>Ore 17:33</p>
3• Creo un nuovo nodo di tipo testo
var d = new Date();
var el = document.getElementById(‘ora’);
while(el.firstChild){
el.removeChild(el.firstChild);
}
var text = ‘Ore ‘ + d.getHours() + ‘:’ + d.getMinutes();
var textNode = document.createTextNode(text);
Modificare il testo di un elemento
27. <p id=‘ora’>Ore 17:33</p>
4• Aggiungo il nuovo nodo al nodo principale
var d = new Date();
var el = document.getElementById(‘ora’);
while(el.firstChild){
el.removeChild(el.firstChild);
}
var text = ‘Ore ‘ + d.getHours() + ‘:’ + d.getMinutes();
var textNode = document.createTextNode(text);
el.appendChild(textNode);
Modificare il testo di un elemento
29. 1• Recupero tutti gli elementi <a>:
function a_InBlank() {
var links = document.getElementsByTagName(‘a’);
for(var i=0;i<links.length;i++){
var a = links[i];
if(!a.getAttribute(‘target’)){
a.setAttribute(‘target’, ‘_blank’);
}
}
}
Modificare il testo di un elemento
30. 2• Per ogni elemento verifico se l’attributo
target è già definito
function a_InBlank() {
var links = document.getElementsByTagName(‘a’);
for(var i=0;i<links.length;i++){
var a = links[i];
if(!a.getAttribute(‘target’)){
a.setAttribute(‘target’, ‘_blank’);
}
}
}
Modificare il testo di un elemento
31. 3• Se non è già stato definito, imposto il valore
a _blank
function a_InBlank() {
var links = document.getElementsByTagName(‘a’);
for(var i=0;i<links.length;i++){
var a = links[i];
if(!a.getAttribute(‘target’)){
a.setAttribute(‘target’, ‘_blank’);
}
}
}
Modificare il testo di un elemento
32. 3• Se non è già stato definito, imposto il valore
a _blank
function a_InBlank() {
var links = document.getElementsByTagName(‘a’);
for(var i=0;i<links.length;i++){
var a = links[i];
if(!a.getAttribute(‘target’)){
a.setAttribute(‘target’, ‘_blank’);
}
} Posso scriverlo anche così: a.target = ‘_blank’;
}
Modificare il testo di un elemento
33. ma
come faccio a far eseguire la
funzione al caricamento
della pagina?
39. • Prova a cliccare il pulsante …
function trick() {
var btn= document.getElementById(‘btn’);
var y = Math.floor(Math.random() * 100);
btn.style.position = ‘absolute’;
btn.style.top = y + ‘px’;
};
Questo è un event handler
…
<input type=‘button’ id=‘btn’ value=‘Clicca qui’
onmouseover=‘trick()’ onclick=‘alert(“Hai vinto!”)’ />
Giocare un po’ con gli eventi
45. • Proviamo a simulare il funzionamento di un
semaforo con JavaScript:
– premendo il tasto 'V' far scattare il verde
– premendo il tasto 'R' far arrivare il rosso
– aggiungere il giallo tra il verde e il rosso con una
attesa di 4 secondi
Controllare il tempo con JavaScript
46. • Tutto l’HTML che ci serve:
<h1>Semaforo</h1>
<table id=‘semaphore’>
<tr>
<td id=‘red’ class=‘on’> </td>
</tr>
<tr>
<td id=‘yellow’> </td>
</tr>
<tr>
<td id=‘green’> </td>
</tr>
</table>
Controllare il tempo con JavaScript
47. • Tutti i CSS che ci servono:
#semaphore { #red.on {
background-color:#000; background-color: red;
margin:20px; }
border-spacing:5px;
} #yellow.on {
background-color: #ffAE00;
#semaphore td { }
width:30px;
height:30px; #green.on {
background-color:#333; background-color: green;
} }
Controllare il tempo con JavaScript
48. 1• Adesso, intercettiamo con JavaScript la
pressione di un tasto:
function keyDown(e) {
var key = String.fromCharCode(event.keyCode);
if(key == 'V') { go(); }
else if(key == 'R')
{
decelerate();
setTimeout('stop()',4000);
}
}
document.onkeydown = keyDown;
Controllare il tempo con JavaScript
49. 2• Scriviamo una funzione che spenga tutte le
luci del semaforo:
function clear() {
var lights = document.getElementsByTagName('td');
for(var i=0; i < lights.length; i++) {
lights[i].className = '';
}
}
Controllare il tempo con JavaScript
50. 3• Per concludere scriviamo le funzioni per
cambiare gli stati del semaforo:
function stop() {
clear();
document.getElementById('red').className = 'on';
}
function decelerate() {
clear();
document.getElementById('yellow').className = 'on';
}
function go() {
if(!document.getElementById('yellow').className) {
clear();
document.getElementById('green').className = 'on';
}
}
Controllare il tempo con JavaScript
52. “change the way that you write JavaScript”
document.getElementsByTagName(‘a’)
lo possiamo scrivere
così:
53. Trova gli elementi
usando i selettori CSS
Seleziona per Id
$(‘#semaphore’)
Seleziona per class
$(‘.on’)
Seleziona per tipo di tag
$(‘a’)
Come con i CSS
$(‘#semaphore td’)
54. Esegui un’operazione
sugli elementi trovati
Manipolazione del DOM
.before(), .appendTo()
Attributi
.addClass(), .attr(), .val()
Gestione eventi
.click(), .bind()
Animazioni
.hide(), .fadeOut(), .animate()
55. function clear() {
var lights = document.getElementsByTagName('td');
for(var i=0; i < lights.length; i++) {
lights[i].className = '';
}
}
Rimuovo la classe specifica
function clear() {
$(‘td’).removeClass(‘on’);
}
56. • Vi ricordate il problema di assegnare un
event handler all’evento onload senza
sovrascriverne i precedenti?
document.onload = a_InBlank;
• Con jQuery diventa:
$(document).ready(a_InBlank);
oppure
$(a_InBlank); Questo è unobtrusive
JavaScript al 100%
Eseguire codice al caricamento della pagina
57. Credits
Le immagini contenute in questa presentazione
hanno licenza Creative Commons
Slide 7: http://www.flickr.com/photos/pisosantacruz/414375220/
Slide 20: http://www.flickr.com/photos/32347177@N02/5438832695/
Slide 37: http://www.flickr.com/photos/59951793@N00/2035571848/in/photostream/
Slide 38: http://www.flickr.com/photos/gato-gato-gato/4166319893/in/photostream/
Slide 40: http://www.flickr.com/photos/50251125@N08/6303643943/
Slide 43: http://www.flickr.com/photos/28481088@N00/2641260615/in/photostream/
Slide 44: http://www.flickr.com/photos/darko_pevec/2221561604/
58. Thank You MANUEL SCAPOLAN
website: www.manuelscapolan.it
twitter: manuelscapolan
e-mail: info@manuelscapolan.it