Post on 13-May-2015
description
JAVASCRIPT
Sviluppo applicazioni web e linguaggio HTML
LEZIONE 02
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
Quando l’elaborazione è a carico del server
SERVER CLIENT
Quando l’elaborazione è a carico del client
SERVER CLIENT
• Come standard nasce alla fine degli anni 90
Quando è nato?
1997/1998
Netscape Navigator 2.0 e
JavaScript 1.0
Sun Microsystem e Java
1992 1994 1995 1996
Mosaic: primo browser a interfaccia
grafica
Sviluppatori di Mosaic fondano Netscape Communication Corporation
Microsoft propone 2
linguaggi alternativi VBScript e Jscript in Internet Explorer 3.0
Standardizzazione del linguaggio da parte dell’ECMA(1) Nasce ECMAScript
Adozione e riconoscimento dello standard da parte dell’ISO(2)
(1) ECMA – European Computer Manufacturers Association
(2) ISO – Internation Organization for Standardization
• Nella pagina HTML dentro un tag <script>:
Dove scrivo il codice JavaScript?
<script type=‘text/javascript’>
…
</script> 1
2
Da preferire per mantenere
la separazione tra codice
HTML e codice di scripting
Se JavaScript è
coinvolto nella
costruzione del
layout della
pagina
• 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>
Dove scrivo il codice javascript???
<script type="text/javascript" src=“my_first_jsfile.js"></script>
Hello World! …
<script type=‘text/javascript’>
alert(‘Hello World!’);
</script>
</head>
…
Hello World! …
</head>
<script type=‘text/javascript’>
document.write(‘Hello World!’);
</script>
…
(2)
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>
…
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
Document Object Model
<html>
<head> <body>
<h1> <ul>
<li> <li>
<title> <meta>
DOM Tutto il contenuto presente in una pagina
HTML è rappresentato da un document
DOM Tutto il contenuto presente in una pagina
HTML è rappresentato da un document, il
document è costituito da nodi
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
span
class=“nota” Struttura di un
nodo
<span class=“nota”>
Struttura di un nodo
</span>
element
attribute text
proprietà di un nodo
nodeValue Il valore salvato nel
nodo (eccetto per il
tipo element)
nodeType Il tipo di nodo, ovvero
TEXT, ELEMENT o
ATTRIBUTE espresso in
numero
childNodes Insieme dei nodi figli
del nodo corrente
firstChild Primo nodo figlio del
nodo corrente
lastChild Ultimo nodo figlio del
nodo corrente
Il DOM può
essere
manipolato
con
JavaScript al fine di
modificare il
contenuto di una
pagina HTML
• Recupero l’elemento tramite l’id:
Modificare il testo di un elemento
<p id=‘ora’>Ore 17:33</p>
var d = new Date();
var el = document.getElementById(‘ora’);
var text = el.firstChild;
text.nodeValue = ‘Ore ‘ + d.getHours() + ‘:’ + d.getMinutes();
1
• Passo al primo nodo figlio per avere il testo
Modificare il testo di un elemento
<p id=‘ora’>Ore 17:33</p>
var d = new Date();
var el = document.getElementById(‘ora’);
var text = el.firstChild;
text.nodeValue = ‘Ore ‘ + d.getHours() + ‘:’ + d.getMinutes();
2
• Assegno tramite la proprietà nodeValue il
nuovo valore:
Modificare il testo di un elemento
<p id=‘ora’>Ore 17:33</p>
var d = new Date();
var el = document.getElementById(‘ora’);
var text = el.firstChild;
text.nodeValue = ‘Ore ‘ + d.getHours() + ‘:’ + d.getMinutes();
3
ma se vogliamo fare le
cose per bene …
• Rimuovo tutti gli elementi figli del nodo
corrente
Modificare il testo di un elemento
<p id=‘ora’>Ore 17:33</p>
var d = new Date();
var el = document.getElementById(‘ora’);
while(el.firstChild){
el.removeChild(el.firstChild);
}
…
2
• Creo un nuovo nodo di tipo testo
Modificare il testo di un elemento
<p id=‘ora’>Ore 17:33</p>
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);
3
• Aggiungo il nuovo nodo al nodo principale
Modificare il testo di un elemento
<p id=‘ora’>Ore 17:33</p>
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);
4
Scriviamo una
funzione che
imposti tutti i link della pagina affinché si
aprano su una nuova
finestra ( target=‘_blank’ )
• Recupero tutti gli elementi <a>:
Modificare il testo di un elemento
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’);
}
}
}
1
• Per ogni elemento verifico se l’attributo
target è già definito
Modificare il testo di un elemento
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
• Se non è già stato definito, imposto il valore
a _blank
Modificare il testo di un elemento
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’);
}
}
}
3
• Se non è già stato definito, imposto il valore
a _blank
Modificare il testo di un elemento
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’);
}
}
}
3
Posso scriverlo anche così: a.target = ‘_blank’;
ma come faccio a far eseguire la
funzione al caricamento
della pagina?
</script>
</head>
<body>
…
window.onload = a_InBlank
</script>
</head>
<body>
…
window.onload = a_InBlank
evento di caricamento della pagina
</script>
</head>
<body>
…
window.onload = a_InBlank
evento di caricamento della pagina
funzione assegnata come handler dell’evento
un evento
ci dice che qualcosa è
accaduto e noi
possiamo decidere
che cosa fare quando si verifica
onmouseover
onclick
onmouseout
onresize
onload
onkeyup
onblur
• Prova a cliccare il pulsante …
Giocare un po’ con gli eventi
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!”)’ />
Questo è un event handler
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;
}
}
window.onload = trickyButtons; ! Sovrascrive qualsiasi altro event handler 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:
Controllare il tempo con JavaScript
<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:
Controllare il tempo con JavaScript
#semaphore {
background-color:#000;
margin:20px;
border-spacing:5px;
}
#semaphore td {
width:30px;
height:30px;
background-color:#333;
}
#red.on {
background-color: red;
}
#yellow.on {
background-color: #ffAE00;
}
#green.on {
background-color: green;
}
• Adesso, intercettiamo con JavaScript la
pressione di un tasto:
Controllare il tempo con JavaScript
function keyDown(e) {
var key = String.fromCharCode(event.keyCode);
if(key == 'V') { go(); }
else if(key == 'R')
{
decelerate();
setTimeout('stop()',4000);
}
}
document.onkeydown = keyDown;
1
• Scriviamo una funzione che spenga tutte le
luci del semaforo:
Controllare il tempo con JavaScript
function clear() {
var lights = document.getElementsByTagName('td');
for(var i=0; i < lights.length; i++) {
lights[i].className = '';
}
}
2
• Per concludere scriviamo le funzioni per
cambiare gli stati del semaforo:
Controllare il tempo con JavaScript
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';
}
}
3
jquery
“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()
function clear() {
var lights = document.getElementsByTagName('td');
for(var i=0; i < lights.length; i++) { lights[i].className = '';
}
}
function clear() {
$(‘td’).removeClass(‘on’);
}
Rimuovo la classe specifica
• Vi ricordate il problema di assegnare un
event handler all’evento onload senza
sovrascriverne i precedenti?
• Con jQuery diventa:
Eseguire codice al caricamento della pagina
document.onload = a_InBlank;
$(document).ready(a_InBlank);
$(a_InBlank);
oppure
Questo è unobtrusive
JavaScript al 100%
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/
Credits Le immagini contenute in questa presentazione
hanno licenza Creative Commons
Thank You
MANUEL SCAPOLAN website: www.manuelscapolan.it twitter: manuelscapolan e-mail: info@manuelscapolan.it