JavaScript

Sviluppo applicazioni web e linguaggio HTML

LEZIONE 02

JAVASCRIPT

JavaScript?
E’ un linguaggio di
scripting lato-client,
interpretato da un
browser web

A cosa serve?
Rende le nostre pagine
interattive

Rispondono alle azioni degli utenti

CLIENT SERVER

Quando l’elaborazione è a carico del server

CLIENT SERVER

Quando l’elaborazione è a carico del client

• 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?

• 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?

• 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???

Hello World!
…
alert(‘Hello World!’);
</script>
</head>
…

(2)
Hello World!
…
</head>
document.write(‘Hello World!’);
</script>
…

un po’ di codice …
…
var d = new Date();
var time = d.getHours();
if (time < 18) {
document.write(‘<h1>Buongiorno</h1>’);
} else {
document.write(‘<h1>Buonasera</h1>’);
}
</script>
…

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>’);
}
}
…

• 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

• 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

DOM
Tutto il contenuto presente in una pagina
HTML è rappresentato da un document

DOM
HTML è rappresentato da un document, il
document è costituito da nodi

DOM
HTML è rappresentato da un document, il
document è costituito da nodi, ogni tag è
un nodo di tipo element

<span class=“nota”>
Struttura di un nodo
</span>
element

span text
attribute

Struttura di un
class=“nota” nodo

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

Il DOM può
essere
manipolato
con
JavaScript
al fine di
modificare il
contenuto di una
pagina HTML

<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


2• Passo al primo nodo figlio per avere il testo

var d = new Date();



3• Assegno tramite la proprietà nodeValue il
nuovo valore:
var d = new Date();


ma
se vogliamo fare le
cose per bene …


2• Rimuovo tutti gli elementi figli del nodo
corrente
var d = new Date();
while(el.firstChild){
el.removeChild(el.firstChild);
}
…



3• Creo un nuovo nodo di tipo testo
var d = new Date();
}
var text = ‘Ore ‘ + d.getHours() + ‘:’ + d.getMinutes();
var textNode = document.createTextNode(text);



4• Aggiungo il nuovo nodo al nodo principale
var d = new Date();
}
var text = ‘Ore ‘ + d.getHours() + ‘:’ + d.getMinutes();
var textNode = document.createTextNode(text);
el.appendChild(textNode);


Scriviamo una

funzione che
imposti tutti i link
della pagina affinché si
aprano su una nuova
finestra ( target=‘_blank’ )

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’);
}
}
}


2• Per ogni elemento verifico se l’attributo
target è già definito
var a = links[i];
}
}
}


3• Se non è già stato definito, imposto il valore
a _blank
var a = links[i];
}
}
}


3• Se non è già stato definito, imposto il valore
a _blank
var a = links[i];
}
} Posso scriverlo anche così: a.target = ‘_blank’;
}


ma
come faccio a far eseguire la
funzione al caricamento
della pagina?

window.onload = a_InBlank
</script>
</head>
<body>
…

evento di caricamento della pagina

</script>
</head>
<body>
…

evento di caricamento della pagina

</script>
</head> funzione assegnata come handler dell’evento

<body>
…

un evento
ci dice che qualcosa è
accaduto e noi
possiamo decidere
che cosa fare
quando si verifica

onresize

onload
onclick
onmouseover

onkeyup onmouseout

onblur

• 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

HTML e
JavaScript teniamoli
separati

function trick() {
var btn= document.getElementById(‘btn’);
var y = Math.floor(Math.random() * 100);
btn.style.position = ‘absolute’;
btn.style.top = y + ‘px’;
};
…
<input type=‘button’ id=‘btn’ value=‘Clicca qui’

onmouseover=‘trick()’ onclick=‘alert(“Hai vinto!”)’ />

function trickyButton() {
var inputs = document.getElementsByTagName(‘input’);
for(var i=0; i < inputs.length; i++){
var el = inputs[i];
if(el.className == ‘tricky’ && el.type == ‘button’)
el.onmouseover = trick;
}
} Sovrascrive qualsiasi
altro event handler
window.onload = trickyButtons; ! definito in precedenza

possiamo anche

controllare il tempo
e decidere esattamente

quando
far eseguire al browser
le nostre funzioni

http://jsfiddle.net/SnbfM/

• 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

• 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>


• 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;
} }


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;


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 = '';
}
}


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';
}
}


“change the way that you write JavaScript”

document.getElementsByTagName(‘a’)

lo possiamo scrivere
così:

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

Esegui un’operazione
sugli elementi trovati
Manipolazione del DOM
.before(), .appendTo()
Attributi
.addClass(), .attr(), .val()
Gestione eventi
.click(), .bind()
Animazioni
.hide(), .fadeOut(), .animate()

• 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

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/

Thank You MANUEL SCAPOLAN
website: www.manuelscapolan.it
twitter: manuelscapolan
e-mail: info@manuelscapolan.it

JavaScript

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to JavaScript (20)

JavaScript