JavaScript

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! …


alert(‘Hello World!’);

</script>

</head>

…

Hello World! …

</head>


document.write(‘Hello World!’);

</script>

…

(2)

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

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


HTML è rappresentato da un document, il

document è costituito da nodi


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



var d = new Date();




2

• Assegno tramite la proprietà nodeValue il

nuovo valore:



var d = new Date();




3

ma se vogliamo fare le

cose per bene …

• Rimuovo tutti gli elementi figli del nodo

corrente



var d = new Date();


while(el.firstChild){

el.removeChild(el.firstChild);

}

…

2

• Creo un nuovo nodo di tipo testo



var d = new Date();




}

var text = ‘Ore ‘ + d.getHours() + ‘:’ + d.getMinutes();

var textNode = document.createTextNode(text);

3

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

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


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





var a = links[i];



}

}

}

2

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



}

}

}

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>

…


evento di caricamento della pagina

</script>

</head>

<body>

…


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:


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

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:


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:


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:


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

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

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: [email protected]

JavaScript

Technology

Transcript of JavaScript