1. Javascript
Autore: Giuseppe Dell’Abate

2. Principi di base

3. Diffusione di Internet
Negli anni ‘90 la crescente diffusione di internet viene progressivamente
supportata da vari fattori:
L’affermazione del linguaggio HTML per la realizzazione dei siti web
in modalità statica
La diffusione di estensioni dinamiche D-HTML per rendere “meno”
statiche le pagine HTML lato client
L’evoluzione di linguaggi di scripting per il supporto di pagine
dinamiche lato client
Lo sviluppo di nuove tecnologie web (Servlet, Applet, ASP) per
realizzare il dinamismo delle pagine lato client e lato server

4. Lato Client e lato Server
Tecnologie lato client:
Nelle tecnologie lato client la dinamicità e l’interazione con l’utente
sono gestite direttamente da codice eseguito dal client o da un suo
plugin.
Attraverso l’utilizzo di:
Linguaggi di scripting: Javascript , VBscript, Jscript
Plugins dei Browser: JVM per esecuzione di Applet
Tecnologie lato server:
Nelle tecnologie lato server, il client ha un ruolo essenzialmente
passivo ed è il server a gestire la parte dinamica.
Attraverso l’utilizzo di:
Common Gateway Interface, le Active Server Pages (ASP) di
Microsoft, le Servlet e le Java Server Pages

5. Lato Client e lato Server
Tecnologie miste:
Le tecnologie miste fanno uso di plugin sia lato client che lato server
che interagiscono direttamente tra loro scavalcando il normale canale
di comunicazione client–server
Attraverso:
L’uso congiunto di Applet e Servlet Java.
Real Player, Macromedia Flash, ecc., i quali consentono al
server di inviare e al client di ricevere, suoni e animazioni

6. Nascita di Javascript
Data la forte diffusione di linguaggi di scripting che, inseriti nel
codice HTML, permettono all’utente di interagire con la rete, occorre
istruire i browser alla comprensione di questi nuovi linguaggi
Nel 1995 Brenda Eich della Netscape Communication
Corporation sviluppò Javascript e lo introdusse nel browser,
inizialmente con il nome di Mocha, successivamente di LiveScript e
solo in seguito rinominato Javascript
Nel 1995 Sun Microsystem introdusse le Applet Java che
permettevano all’utente di interagire, sempre lato client.
Microsoft che disponeva di un browser molto limitato, produsse
JScript che ebbe però poco successo

7. Vantaggi e Svantaggi
Il linguaggio di scripting, rispetto al linguaggio di programmazione,
presenta:
Vantaggi:
Sicurezza: non può accedere a informazioni riservate
Visibilità: codice in chiaro ed in continua evoluzione
Lato Client: non carica il server
Svantaggi:
Limitate capacità: deve delegare i linguaggi di
programmazione per effettuare altre operazioni
Download totale: deve essere scaricato tutto il codice per
interpretarlo
Lato Client: può caricare eccessivamente il client

8. Caratteristiche
Javascript presenta diverse caratteristiche:
E’ un linguaggio di scripting
Consente di effettuare alcune operazioni ma non di gestire
completamente tutte le funzionalità messe a disposizione dal
Sistema Operativo
E’ basato sugli oggetti
Gli oggetti vengono utilizzati per la programmazione ma non è
possibile sfruttare polimorfismo, ereditarietà, tipizzazione
E’ guidato dagli eventi
Gli eventi consentono di eseguire delle azioni
E’ indipendente dalla piattaforma
Tutti i browser che supportano la specifica sanno eseguire lo script,
indipendentemente dal Sistema Operativo residente
E’ standardizzato
La ECMA ha standardizzato Javascript nel 1997 con il nome
ECMAScript ed inoltre è uno standard ISO

9. Versioni e limiti
Nel 1996 Netscape sottopose JavaScript al processo di
standardizzazione da parte dell’ECMA
Nel giugno 1997 fu adottata la versione 1.1 e fu definita ECMAScript
o ECMA-262
Le versioni devono essere recepite nei browser per essere adottate.
Solo la versione javascript 1.1 è stata recepita da tutti i browser.
Solo la parte CORE fa parte dello standard, quindi solo le istruzioni
di base del linguaggio (non l’oggetto windows ! )

10. Motori Javascript
Javascript è un linguaggio interpretato che necessita di un “motore”
di esecuzione che esegua il codice sorgente.
I browser incorporano un motore javascript che ha recepito la
specifica dell’ECMA
L’engine solitamente è sviluppato in C e prevede la compilazione
JIT:
Opera 10: utilizza Carakan, prima (v.9) Linear B, ancor prima
(v.8 e v.7) Futhark
Internet Explorer 9 : utilizza Chakra, prima (v.8) JScript
Mozilla Firefox 3.5 utilizza TraceMonkey, prima (v.3)
SpiderMonkey
Google Chrome utilizza V8

11. Primi script
Il browser riconosce i codice Javascript in quanto viene utilizzato il
tag HTML
<script> …codice javascript … </script>
Se il browser non supporta lo script allora visualizzerà il codice
senza interpretarlo
Per evitare questo problema il codice deve essere commentato
<script> <!--…codice javascript… --> </script>
Se il browser non supporta lo script allora eseguirà il tag <noscript>
che informerà l’utente dei limiti del suo browser.
<noscript> Il browser non supporta Javascript </noscript>

12. Primi script
Per essere sicuri che lo script venga eseguito utilizzando il motore
javascript presente nel browser, verrà specificato il linguaggio
utilizzato:
<script language=“Javascript1.1”><!-- ... --> </script>
Javascript può essere impiegato in una pagina HTML in 4 modi:
1. Utilizzando il tag <script> ed inserendo nell’elemento il codice
2. Utilizzando il tag <script> ed importando una pagina javascript
esterna
3. Utilizzando la parola chiave “javascript:” prima della sua
invocazione.
4. Utilizzando l’attivazione di un evento: onmouseover ecc

13. Primi script
File MiaProva.html
<html>
<head>
<title>MiaProva</title>
<SCRIPT LANGUAGE="JavaScript">
<!--
1) codice
function prova() {
alert("Ciao Mondo!");
}
//-->
</SCRIPT>
2) import
<SCRIPT LANGUAGE="JavaScript" src="mio.js"></SCRIPT>
</head>
<BODY>
3) key
<A HREF="javascript:alert('Hello')">Hello World!</A> javascript
<A HREF=“#” onclick=“prova()">Ciao Mondo!</A>
</BODY>
</html>
4) evento
File mio.js
alert( “Hello World!");

15. Livelli
La specifica ECMAScript ha standardizzato le istruzioni che
rappresentano il CORE di Javascript, ossia le istruzioni tipiche di un
linguaggio di programmazione (tipi, array, iterazioni, condizioni) ma
NON la gestione della pagina ad opera del Browser poiché non è
disciplinata ed è stata gestita dai vendor che hanno creato degli
oggetti ad-hoc determinando l’insorgere del BOM.
Il BOM (Browser Object Model) è quella parte di Javascript che
consente l’interazione con il browser tramite l’oggetto “window”. Non
è previsto nessuno standard pertanto segue solo le scelte che sono
state effettuate dai vendor (Microsoft, Netscape). Tali aspetti sono
stati presi in carico dal W3C per determinare uno standard ed è
stato creato il DOM.
Il DOM (Document Object Model) è quella parte di Javascript
standardizzata dal W3C che prevede di gestire il documento HTML
come XML e di navigarlo e modificarlo in modo più efficiente rispetto
al BOM.

18. La sintassi
In ogni linguaggio occorre definire :
Il soggetto: colui che esegui l’azione
Il verbo: l’azione che sarà effettuata
Nei linguaggi di programmazione questo viene tradotto in
Dati: rappresentano i valori che sono oggetto della nostra
elaborazione.
Istruzioni: rappresentano l’elaborazione, l’algoritmo che dovrà
essere applicato ai dati .

19. La sintassi
Dati: rappresentano i valori che sono oggetto della nostra
elaborazione.
Ogni dato viene identificato da un tipo che identifica la tipologia
di valori
Un nome che serve per identificare univocamente il nostro dato
Un valore che indica il valore che abbiamo scelto di conservare
A seconda che il loro valore sia modificabile o meno abbiamo
variabili e costanti
Istruzioni: rappresentano l’elaborazione, l’algoritmo che dovrà
essere applicato ai dati . Possono distinguersi in istruzioni:
elementari: che vengono messi a disposizione dal linguaggio
utilizzato (operatori)
complesse: sono blocchi di istruzioni che si ha necessità di
utilizzare più volte

20. La sintassi
Nome:
Non possono utilizzare dei nomi riservati dal linguaggio
Non è possibile utilizzare spazi all’interno del nome
Assegnazione
Utilizziamo l’operatore = per indicare che un valore deve essere
conservato (assegnato ) ad un nome
Tipi di valori in Javascript:
Intero: rappresenta l’insieme dei numeri interi
Decimali: rappresenta l’insieme di numeri reali
Logico: è un insieme contenente valori vero o falso
Stringa: rappresenta un insieme costituito di caratteri
Undefined: rappresenta l’assenza di valore
null: rappresenta un valore volutamente vuoto

21. La sintassi
La visibilità delle variabili varia a seconda del blocco di codice in cui
viene dichiarata:
{ //non vedo la variabile pippo
{ var pippo=1;
vedo la variabile pippo
{//vedo la variabile pippo
}
{//non vedo la variabile pippo
}
//non vedo la variabile pippo
}
La variabile pippo è visibile solo dal blocco che definisce la variabile
ed in quelli contenuti in esso.

22. La sintassi
Le istruzioni elementari si classificano in:
Unari : richiedono un dato in ingresso (++, --, -)
indice++
Binari : richiedono due dati in ingresso (=, +, -, *, /, %)
var indice = 0;
Ternari : richiedono tre dati in ingresso (? : )
var scelta = (indice==0) ? true : false;
Booleani: restituiscono un valore booleano (==, !=, <, <=, >, >=)
if ( scelta == true ) alert(‘vero!’)
Logici: richiedono e restituiscono valori booleani (&&, ||, !)
if ( scelta == true && indice == 0) alert(‘vero!’)

24. Strutture di controllo
Le funzioni: consentono di modulare un blocco di codice e poterlo
riutilizzare più volte.
function nome_funzione (parametri di ingresso) {
//blocco di codice
return valore_restituito;
}
Esempio:
function moltiplicazione (a, b) {
c =a*b;
return c;
}

25. Strutture di controllo
Javascript non è un linguaggio tipizzato e così come non è
necessario dichiarare il tipo di dato ( intero, stringa, booleano ) non è
necessario dichiarare il tipo di ritorno di una funzione.
Pertanto le funzioni possono tornare diversi tipi di dato o non
tornarlo affatto:
function moltiplicazione (a, b, op) {
If (op==‘molt’)
return (a*b);
else if (op==‘add’)
return (“la somma è “ + a+b);
}
function(5,6,’molt’)
function(5,6,add’)
function(5,6,’err’)

26. Strutture di controllo
Istruzioni condizionali: consentono di prendere delle decisioni in
base ai dati inseriti
if(condizione) {
//blocco istruzione
} else {
//blocco istruzione
}
Per esempio:
a=window.prompt(“primo valore”,0);
b=window.prompt(“primo valore”,0);
if (a<b) document.write(a + “ è minore di “+ b);
else document.write(a + “ è maggiore di “+ b);

27. Strutture di controllo
Istruzioni di selezione: permette di verificare i possibili valori
dell'espressione presa in considerazione
Sintassi: Esempio:
switch (espressione) { var a = 1;
case val1: switch (a) {
case 0:
istruzioni1; break
alert("a = zero");break;
... case 1:
case val_n: alert("a = uno");break;
istruzioni_n; break case 2:
default: alert("a = due");break;
case 3:
istruzioni
alert("a = tre");break;
} default:
alert("a maggiore di 3");
}

28. Strutture di controllo
Istruzioni di loop : consentono di reiterare un blocco di istruzioni
fino a quando una condizione risulti vera:
while(condizione) {
//blocco di codice
}
Esempio:
condizione = true;
while(condizione) {
a=window.prompt("Indovina il numero", a);
if (a==5) document.write("esatto");
condizione =false;
}

29. Strutture di controllo
Istruzioni for: consentono di reiterare un blocco di istruzioni un
numero finito di volte
for(definizione di variabile, condizione, incremento) {
//blocco di codice
}
Esempio:
for(var i=0;i<10;i++) {
a=window.prompt(“Inserisci il numero", 0);
document.write(“numero “ + (a+1) + “=“ + i);
condizione =false;
}

31. Gli oggetti
Javascript è un linguaggio basato ad oggetti, questo significa che è
possibile creare o utilizzare degli oggetti esistenti per svolgere
alcune funzionalità.
Ogni oggetto è costituito da proprietà che rappresentano dei valori
associati ad un oggetto
Ogni oggetto è costituito da metodi che forniscono il
comportamento del nostro oggetto

33. Gli oggetti
Javascript è un linguaggio non tipizzato che non consente di create dei tipi
ma è possibile creare degli oggetti
La libreria Core mette a disposizione degli oggetti che consentono allo
sviluppatore di facilitare l’attività di sviluppo.
Tali oggetto sono:
Array
Boolean
Date
Math
Number
String

34. Gli Array
L’oggetto Array consente di creare un array e di gestirlo tramite i propri
metodi
Un array è una lista di valori che possono essere referenziati con un nome
ed un indice
1) Definizione di array
nome = new Array(‘prova1’, ‘prova2’);
2) Definizione di array
nome = new Array(2);
nome[0]= ‘nome1’
nome[1]= ‘nome2’

35. Array mono-dimensionali
Per definire un array e' possibile usare una di queste sintassi:
Creare un oggetto Array vuoto
nome_variabile = new Array( );
myArray = new Array();
Creare un oggetto Array vuoto di 3 elementi
nome_variabile = new Array( dimensione_array );
myArray = new Array(3);
Creare un oggetto Array vuoto di N elementi valorizzati
nome_variabile = new Array( valore1, valore2, valore3 );
myArray = new Array('pippo', 'pluto', 'paperino');

36. Array mono-dimensionali
Per popolare o riassegnare dei valori alll'array creato precedentemente
occorre usare questa sintassi:
nome_variabile[ indice_array] = valore;
Per assegnare il valore "pippo" alla variabile myArray con indice 0 (indice
di partenza dell'array)
myArray[0] = "pippo";

37. Array bi-dimensionali
E' possibile creare un array bi-dimensionale assegnando ad un elemento
dell'array un nuovo array, usando questa sintassi:
myArray = new Array();
myArray[0] = new Array()
oppure in questo altro modo, che consente di creare un oggetto Array
nidificato
myArray = new Array( new Array() );

38. Array bi-dimensionali
Per popolare o riassegnare dei valori all'array bi-dimensionale creato
precedentemente occorre indicare questa sintassi:
nome_variabile[ indice_array ] [ indice_array ] = valore;
Questa istruzione serve per assegnare il valore "pippo" alla variabile
myArray con indice [0][0]
myArray[0][0] = "pippo";
Sarebbe stato possibile assegnare il valore in sede di creazione, in questo
modo:
myArray = new Array( new Array("pippo") );

39. Array bi-dimensionali -
rettangolari
Sono quegli array che hanno uguale dimensione orizzontate, esempio:
myArray = new Array();
myArray[0] = new Array(2)
myArray[0][0] = 'prova1'
myArray[0][1] = 'prova2'
myArray[1] = new Array(2)
myArray[1][0] = 'prova3'
myArray[1][1] = 'prova4'

40. Array bi-dimensionali –
non rettangolari
Sono quegli array che NON hanno uguale dimensione orizzontate,
esempio:
myArray = new Array();
myArray[0] = new Array(2)
myArray[0][0] = 'prova1'
myArray[0][1] = 'prova2'
myArray[1] = new Array(3)
myArray[1][0] = 'prova3'
myArray[1][1] = 'prova4'
myArray[1][2] = 'prova5'

41. Iterare su Array
E' possibile iterare su un array mono-dimensionale usando il ciclo "for",
myArray = new Array("prova1 ", "prova2");
for(i = 0; i < myArray.length; i++){
document.write( myArray [i] );
}
in questo caso verrà stampata la stringa:
prova1 prova2

42. Iterare su Array
E' possibile iterare su un array bi-dimensionale usando il ciclo "for",
myArray = new Array(new Array('prova1 ','prova2 '), new Array
('prova3 ','prova4 ') );
for(i = 0; i < myArray.length; i++){
for(y = 0; y < myArray[i].length; y++){
document.write( myArray[i][y] );
}
}
in questo caso verrà stampata la stringa:
prova1 prova2 prova3 prova4

43. Array dinamici
E' possibile:
1. creare array di dimensione variabile in base alla dimensione di
precedenti array,
2. assegnare un array ad una nuova variabile
1. Creazione un Array dal nome myArray2 di dimensione corrispondente a
myArray MA VUOTO
myArray = new Array('prova1 ','prova2 ','prova3 ');
myArray2 = new Array( myArray.length );
2. Assegnazione alla variabile myArray3 dello stesso puntatore della
variabile myArray, quindi con lo stesso contenuto ('prova1 ','prova2
','prova3 ')
myArray3 = myArray;

44. Gli Array
I metodi dell’oggetto Array sono
concat unisce 2 array e ritorna un nuovo array
join collega tutti gli elementi di un array in una stringa
pop rimuove l’ultimo elemento dall’array e lo ritorna
push aggiunge un elemento all’array e lo ritorna.
reverse inverte l’ordine degli elementi dall’array
shift rimuove il primo elemento dall’array e lo ritorna.
slice estrae una sezione dell’array e lo ritorna
splice aggiunge o rimuove elementi all’array
sort ordina gli elementi dell’array
unshift aggiunge un elemento all’array e ritorna la lunghezza

45. Boolean e Date
Boolean
Definisce un tipo boleano che può catturare valori true/false
booleanObjectName = new Boolean( true );
Se il valore è omesso allora avrà valore false
Date
Permette di creare un oggetto di tipo Data che, come Java, decorre
dal 1/1/1970 ed è espresso in milli secondi.
Presenta solo metodi e non proprietà
var time = new Date()
var hour = time.getHours()
var minute = time.getMinutes()
var second = time.getSeconds()
var temp = "" + ((hour > 12) ? hour - 12 : hour)
temp += ((minute < 10) ? ":0" : ":") + minute
temp += ((second < 10) ? ":0" : ":") + second
temp += (hour >= 12) ? " P.M." : " A.M."
alert(temp)

46. Math
Math
Questo oggetto consente di poter invocare tutti quei metodi che
possono essere utilizzati per effettuare calcoli matematici
abs valore assoluto
sin, cos, tan funzioni trigonometriche standard
acos, asin, atan funzioni trigonometriche inverse
exp, log esponente e logaritmo naturale
ceil numero intero massimo
floor numero intero minimo
min, max inferiore o maggiore
pow esponenziale
round arrotondamento all'intero + vicino
sqrt radice quadrata

47. Number e String
Number
Viene utilizzato per rappresentare dei numeri e poter li manipolare facilmente:
MAX_VALUE rappresenta il numero + grande
MIN_VALUE rappresenta il numero + piccolo
NaN Special “not a number” value
NEGATIVE_INFINITY valure infinito negativo
POSITIVE_INFINITY valore infinito
String
Consente di creare degli oggetti stringa e di manipolarli tramite un insieme di
metodi
a = new String(“prova”);
length ritorna la lunghezza della stringa
toUpperCase/toLowerCase trasforma in maiuscolo/minuscolo i caratteri
substring(start, end) seleziona una parte di stringa dal punto start ad end

48. String
String
anchor crea una ancora HTML
big, blink, bold, fixed, italics, crea corrispondenti tag HTML
small, strike, sub, sup String formattate in HTML
charAt, charCodeAt ritorna il carattere in data posizione
indexOf, lastIndexOf ritorna la posizione di un carattere
link crea un HTML hyperlink
concat concatena 2 stringhe
split divide una stringa in un array di stringhe
slice estrae una sezione di stringa
match, replace, search usato con le espressioni regolari

50. Gli oggetti
E’ consentito, per lo sviluppatore, creare dei proprio oggetti da poter
riutilizzare come un libreria oppure da potere mettere a disposizione
della comunità degli sviluppatori
La definizione di un oggetto può essere effettuata in 3 modi distinti:
1. Utilizzando l’oggetto Object() ed aggiungere proprietà e metodi
ad esso.
2. Definendo un oggetto letterale che contenga tutte le proprietà e
metodi
3. Definendo una funzione che usi la logica degli oggetti ( tramite
la parola chiave this, ecc)

51. 1) new Object()
var Anagrafica = new Object();
Anagrafica.Anagrafica = function(Nome, Giorno, Mese, Anno) {
this.Nome = Nome;
this.Giorno = Giorno;
this.Mese = Mese;
this.Anno = Anno;
};
Anagrafica.stampaOggetto = function() {
document.write ("Dati in archivio:");
document.write ("<BR>Nome: "+this.Nome);
document.write ("<BR>Giorno: "+this.Giorno);
document.write ("<BR>Mese: "+this.Mese);
document.write ("<BR>Anno: "+this.Anno);
};
Anagrafica.Anagrafica("Antonio", 11, "Novembre", 1968);
Anagrafica.stampaOggetto();

52. 2) Oggetti letterali
var Anagrafica = {
Anagrafica: function(Nome, Giorno, Mese, Anno) {
this.Nome = Nome;
this.Giorno = Giorno;
this.Mese = Mese;
this.Anno = Anno;
},
StampaOggetto: function() {
document.write ("Dati in archivio:");
document.write ("<BR>Nome: "+this.Nome);
document.write ("<BR>Giorno: "+this.Giorno);
document.write ("<BR>Mese: "+this.Mese);
document.write ("<BR>Anno: "+this.Anno);
}
}
Anagrafica.Anagrafica("Antonio", 11, "Novembre", 1968);
Anagrafica.StampaOggetto();

53. 3) Funzioni di oggetti
function StampaOggetto () {
document.write ("Dati in archivio:");
document.write ("<BR>Nome: "+this.Nome);
document.write ("<BR>Giorno: "+this.Giorno);
document.write ("<BR>Mese: "+this.Mese);
document.write ("<BR>Anno: "+this.Anno);
}
function Anagrafica (Nome, Giorno, Mese, Anno) {
this.Nome = Nome;
this.Giorno = Giorno;
this.Mese = Mese;
this.Anno = Anno;
this.Visualizza = StampaOggetto;
}
var Antonio = new Anagrafica ("Antonio", 11, "Novembre", 1968);
Antonio.Visualizza();

55. Il BOM
Javascript prevede 3 tipologie di oggetti:
Ereditati dalle librerie CORE
Creati dallo sviluppatore
Creati dal Browser ( BOM )
Questa terza tipologia di oggetti è costituita da tutti quegli oggetti
che vengono creati dal browser per memorizzare il documenti HTML
e tutte le informazioni relative al browser, allo schermo e necessarie
per il corretto funzionamento
Lo sviluppatore può interagire con questi oggetti ma, nel caso di
oggetti BOM che non sono oggetto di specifica, occorre gestire le
differenze esistenti tra i browser, il modo in cui tali oggetti vengono
creati ed i metodi che mettono a disposizione.

56. Gli oggetti BOM
Quando programmate con JavaScript dovete immaginare che la
pagina del browser sia formata da vari oggetti in relazione fra loro:
prima di tutto c'è il browser stesso (l'oggetto window.navigator)
poi la finestra che contiene il tutto (l'oggetto window)
eventuali frames (l'oggetto window.frames)
il documento HTML vero e proprio (window.document)
i moduli per raccogliere l'input dell'utente (document.forms
["nomeForm"])
le immagini (document.images["nomeImmagine"])
i cookie (document.cookie["nomeCookie"])
le applet (document.applets["nomeApplet"])
la barra degli indirizzi (window.location)
I siti visitati del browser (window.history)
Le informazioni del monitor dell’utente (window.screen)

57. L’oggetto navigator
L’oggetto navigator serve per ottenere delle informazioni sul browser e
sulla configurazione del sistema:
Navigator Object Collections
plugins[] informazioni dei plugins istallati
Navigator Object Properties
appCodeName Nome in codice del browser
appMinorVersion Minor version del browser
appName Nome del browser
appVersion Piattaforma e versione del browser
browserLanguage Lingua del browser
cookieEnabled Abilitazione o meno dei cookies
cpuClass Classe di CPU
onLine Navigazione offline o online

58. L’oggetto navigator
platform Sistema operativo
systemLanguage Lingua del sistema operativo
userAgent user-agent utilizzato
userLanguage lingua di default
Navigator Object Methods
javaEnabled() Java abilitato

59. L’oggetto window
L’oggetto window è
l'oggetto di massimo livello
nella gerarchia dei clienti di
Javascript.
Un oggetto window può
rappresentare sia una
finestra di livello top o un
frame all'interno di un
frameset.

60. L’oggetto window
Frames e finestre
frames Un raggruppamento (array) che riflette tutti i frame della
finestra.
length Il numero dei frames nella finestra.
parent Un sinonimo per indicare una finestra o un frame il cui
frameset contiene il frame corrente.
self Un sinonimo per indicare la finestra corrente.
window Un sinonimo per indicare la finestra corrente.
top Un sinonimo per indicare la finestra più in alto nel browser.
opener Specifica il nome della finestra di un certo documento
quando una finestra viene aperta usando il metodo "open".
name Un nome unico usato per riferirsi a questa finestra.

61. L’oggetto window
Messaggi utente
alert Mostra una casella-dialogo di Allarme (Alert Box), con un
messaggio e un bottone "OK".
confirm Mostra una casella-dialogo di Conferma (Confirm Box), con
uno specifico messaggio e i bottoni "OK" e "Annulla".
prompt Mostra una casella-dialogo di Informazione (Prompt Box)
con un messaggio e una zona di inserimento dati.
status
defaultStatus messaggio di default mostrato sulla barra di status
della finestra.
status Specifica una priorità o un messaggio transitorio nella barra
di status della finestra.

62. L’oggetto window
Barre
statusbar Rappresenta la barra di status della finestra del browser.
personalbar Rappresenta la barra personale della finestra del
browser (altrimenti chiamata barra delle directory).
scrollbars Rappresenta le barre di scorrimento della finestra del
browser.
toolbar Rappresenta la barra degli strumenti della finestra del
browser.
locationbar Rappresenta la barra di locazione della finestra del
browser.
menubar Rappresenta la barra di menù della finestra del browser.

63. L’oggetto window
Timeout ed intervalli
clearTimeout Cancella una scadenza di tempo che era stata
inserita con il metodo setTimeout.
setTimeout Valuta un'espressione o richiama una funzione allo
scadere di una definita quantità di millisecondi.
clearInterval Cancella una scadenza di tempo che era stata inserita
con il metodo setInterval .
setInterval Valuta un'espressione o chiama una funzione ogni volta
che una certa quantità di millisecondi è scaduta.

64. L’oggetto window
Gestione finestre
open Apre una nuova finestra del web browser.
close Chiude la finestra indicata.
closed Specifica se una finestra è stata chiusa.
stop Interrompe lo scaricamento corrente.
Varie
print Stampa i contenuti della finestra o del frame.
blur Elimina il fuoco dall'oggetto specificato.
focus Mette a fuoco l'oggetto specificato.
find Trova una specifica stringa di testo nei contenuti di una
specifica finestra
home Dirige il browser sull'URL indicato nelle preferenze come
home page dell'utente.

65. L’oggetto window
Eventi sulle finestre
onDragDrop L'utente rilascia un oggetto, per esempio un file, sulla
finestra del browser.
onLoad Il browser finisce di caricare una finestra o tutti i frames
all'interno di un tag FRAMESET.
onMove L'utente (o il programma) sposta una finestra o un frame.
onResize L'utente (o il programma) cambia le dimensioni di una
finestra o di un frame
onUnload L'utente fa il refresh di una finestra
onBlur Un elemento di forma va fuori fuoco o quando una finestra o
un frame vanno fuori fuoco.
onError L'atto di scaricare un documento o un'immagine provoca un
errore.
onFocus Una finestra, frame o frameset riceve fuoco o quando un
elemento di forma riceve un input "fuoco“.

66. L’oggetto window
Gestori eventi
captureEvents Permette alla finestra o al documento di catturare
tutti gli eventi del tipo indicato.
disableExternalCapture Disconnette la cattura di eventi esterni
installata col metodo enableExternalCapture.
enableExternalCapture Permette a una finestra con frames di
catturare eventi in pagine caricate da locazioni diverse (servers).
handleEvent Richiama lo strumento che manipola un evento (event
handler) specificato.
releaseEvents Mette al finestra in condizione di rilasciare eventi del
tipo specificato, mandando l'evento agli oggetti più avanti nella
gerarchia degli eventi.
routeEvent Fa passare un evento catturato attraverso la normale
gerarchia degli eventi.

67. L’oggetto document
L’oggetto document permette di ottenere un riferimento al documento
HTML ed agli elementi definiti in esso
L'oggetto espone solo pochi metodi:
open(): apre un flusso di informazione
close() chiude un flusso di informazioni
write() e writeln() scrivono nella pagina formattata in HTML una
stringa passata come parametro.
Le proprietà disponibili sono relative:
1. Agli attributi del tag <body>
fgColor e bgColor si riferiscono agli attributi text e background per
indicare il colore di primo piano e di sfondo della pagina
2. Alle proprietà del documento HTML
title: titolo del documento HTML
3. Al contenuto del documento HTML ( segue … )

68. L’oggetto document
Tutti gli elementi presentano
proprietà:
name: ricava il nome del campo
value: imposta o ricava il valore del campo
type: specifica il tipo di campo
metodi:
focus() e blur(): per ottenere o rilasciare il focus
A seconda del tipo di elemento HTML cui ci si riferisce, è possibile gestire
diverse proprietà in modo da ottenere informazioni sull’elemento in
questione, per esempio:
Caselle di testo <input type=text> (size, maxLength, select(),
onchange)
Aree di testo <textarea> (rows e cols )
Pulsanti di opzione <input type=checkbox> (checked )
Liste <select> <option> (options, selectedIndex, text , index )

69. L’oggetto document
Esempio di oggetto document
<SCRIPT LANGUAGE="JavaScript">
function visualizza() {
alert(document.statform.userName.value)
}
</SCRIPT>
<FORM NAME="statform">
<INPUT TYPE = "text" name = "userName" size = 20 onchange="visualizza()">
</FORM>

70. L’oggetto location
Tale oggetto consente di ottenere informazioni sull’URL della pagina
corrente tramite le proprietà:
port href hash
http://www.google.com:80/search?q=java#miotag
protocol pathname
hostname search

71. L’oggetto location
L’oggetto location contiene 2 metodi:
replace(): ordina al browser di sostituire la pagina attuale con la
pagina dell’URL specificata
reload(): ricarica la pagina dal server

72. L’oggetto history
L’oggetto history da accesso limitato ai siti visitati dal browser.
Per motivi di sicurezza è possibile sapere solo la lunghezza della history
dell’utente.
I metodi disponibili sono tre:
go(): indica di quante pagine si vuole andare avanti o indietro
back(): emula il pulsante indietro del browser di una posizione
forward(): emula il pulsante avanti del browser di una posizione

73. L’oggetto screen
L’oggetto screen consente di avere informazioni sulla dimensione dello
schermo dell’utente in base alla configurazione attuale e potenziale, in
modo da poter dimensionare in modo ottimale la dimensione del browser.
Utilizzando le proprietà di questo oggetto è possibile ottenere delle
informazioni utente ed utilizzando i metodi dell’oggetto window sarà
possibile modificare il dimensionamento del browser

74. L’oggetto screen
Proprietà
scroll Fa scorrere una finestra secondo una coordinata specificata.
innerHeight Specifica la dimensione verticale, in pixel, dell'area di
contenuto della finestra.
innerWidth Specifica la dimensione orizzontale, in pixel, dell'area di
contenuto della finestra.
outerHeight Specifica la dimensione verticale, in pixel, del margine
esterno della finestra.
outerWidth Specifica la dimensione orizzontale, in pixel, del margine
esterno della finestra.
pageXOffset Fornisce la posizione x corrente, in pixel, di una pagina
mostrata della finestra.
pageYOffset Fornisce la posizione y corrente, in pixel, di una pagina
mostrata della finestra.

75. L’oggetto screen
Metodi di windows da utilizzare
moveBy() Muove la finestra secondo quantità specificate.
moveTo () Muove l'angolo in alto a sinistra della finestra secondo le
specificate coordinate dello schermo.
resizeBy () Dà nuove dimensioni a un'intera finestra muovendo l'angolo in
basso a destra secondo una quantità indicata.
resizeTo() Dà nuove dimensioni a un'intera finestra secondo le indicate
dimensioni esterne di altezza e larghezza.
scrollBy() Fa scorrere l'area di visualizzazione di una finestra secondo
quantità definite.
scrollTo() Fa scorrere l'area di visualizzazione della finestra secondo
coordinate definite, in modo che il punto indicato diventi l'angolo superiore
sinistro.

77. I Cookies
I Cookies consentono di conservare nel browser dell’utente delle
informazioni che possono essere utilizzate nel momento in cui l’utente
accede nuovamente al sito.
Ogni dominio può salvare nel browser dell’utente massimo 20 cookies
Si tratta di file di testo che contengono delle informazioni, quali:
Nome
Data di scadenza
Dominio
Percorso

78. I Cookies
function setCookie(NameOfCookie, value, expiredays) {
var ExpireDate = new Date ();
ExpireDate.setTime(ExpireDate.getTime() + (expiredays * 24 * 3600 *
1000));
document.cookie = NameOfCookie + "=" + escape(value) + ((expiredays
== null) ? "" : "; expires=" + ExpireDate.toGMTString());
}
function delCookie (NameOfCookie) {
if (getCookie(NameOfCookie)) {
document.cookie = NameOfCookie + "=" + "; expires=Thu, 01-Jan-70 00:
00:01 GMT";
}
}

79. I Cookies
function getCookie(NameOfCookie){
if (document.cookie.length > 0) {
begin = document.cookie.indexOf(NameOfCookie+"=");
if (begin != -1) {
begin += NameOfCookie.length+1;
end = document.cookie.indexOf(";", begin);
if (end == -1) end = document.cookie.length;
return unescape(document.cookie.substring(begin, end));
}
}
return null;
}

81. Gli eventi
In seguito alle azioni che decide di effettuare l’utente, vengono a
crearsi degli eventi che devono essere gestiti
La gestione di un evento indica la necessità di richiamare delle
funzioni pertanto abbiamo la presenza di handler ossia “gestori degli
eventi” che hanno il compito di richiamare la funzione appropriata
per quell’evento
<a href=“pagina.html” onclick=”alert(‘ciao’)”>link</a>
Nell’esempio precedente:
onclick: è il gestore degli eventi
alert(‘ciao’): è l’attività associata al verificarsi dell’evento che verrà
avviata dal gestore

82. Gli eventi
Nel corso del tempo il numero degli eventi è progressivamente
aumentato
Possiamo distinguerli in 5 categorie:
Eventi di sistema : onLoad, onUnload, onAbort, onError
Eventi legati al mouse: onClick, onMouseOver, onMouseOut
Eventi attivabili alle modifiche dell’utente: onChange
Eventi legati al fuoco: onFocus, onBlur, onSelect
Eventi legati a particolari bottoni: onSubmit, onReset

83. Gli eventi
Eventi di sistema :
onLoad: si attiva quando la pagina html viene caricata
onUnload: si attiva quando la pagina html viene abbandonata
(pressione di un link, chiusura finestra)
onAbort: si attiva quando l’utente preme il tasto stop e ESC
onError: si attiva quando si verifica un errore durante il
caricamento di un oggetto
Eventi legati al mouse:
onClick: si attiva quando l’utente clicca su un oggetto
onMouseOver: si attiva quando l’utente passa il mouse su un
oggetto
onMouseOut:: si attiva quando l’utente passa il mouse lontano
dall’oggetto

84. Gli eventi
Eventi attivabili alle modifiche dell’utente:
onChange: si attiva quando l’utente effettua delle modifiche ad
un oggetto testo, area di testo, password
Eventi legati al fuoco:
onFocus: si attiva quando l’utente attiva un determinato oggetto
onBlur: si attiva quando l’utente non utilizza un determinato
oggetto
onSelect: si attiva quando l’utente seleziona delle caselle di
testo
Eventi legati a particolari bottoni:
onSubmit: quando l’utente effettua l’invio di una form
onReset: quando l’utente clicca sul tasto “annulla” di una form

86. Il DOM
Il DOM (Document Object Model) è il frutto di una specifica del W3C
per consentire di navigare il documento HTML come una struttura
XML ed accedere a tutti i suoi elementi
Ancor oggi si continua ad utilizzare il BOM in quanto è più intuitivo e
per problemi di compatibilità
Il DOM presenta un documento HTML come una struttura ad albero
composta da elementi attributi e testo
Il DOM definisce una modalità standard per accedere e manipolare
documenti HTML

87. Il DOM

88. Il DOM
Per ogni elemento di un albero DOM è possibile accedere,
modificarlo, cancellarlo e ricrearlo
Il primo elemento si chiama root e non ha padre
Gli elementi senza figli si chiamano leaf (foglia)
Gli elementi che possiedono lo stesso padre si chiamano siblings
(fratelli)

89. Il DOM
Proprietà DOM
x.innerHTML - il codice html dell'elemento x
x.nodeName - il nome di x
x.nodeValue - il valore di x
x.parentNode - il nodo padre di x
x.childNodes - il nodo figlio di x
x.nextSibling – il successivo nodo fratello di x
x.previousSibling – il successivo nodo fratello di x
x.attributes - gli attributi di x
Metodi DOM
x.getElementById(id) - recupera il nodo in base al nome
x.getElementsByTagName(name) - recupera tutti i nodi in base al nome
x.appendChild(node) - inserisce un nodo figlio ad x
x.removeChild(node) - rimuove un nodo figlio a x

90. Il DOM
<html>
<body><p align="center" id="ciccio"><b>prova</b></p></body>
<script language="javascript">
alert(document.getElementById("ciccio").parentNode.nodeName );
alert(document.getElementById("ciccio").nodeName)
alert(document.getElementById("ciccio").attributes[0].nodeName);
alert(document.getElementById("ciccio").attributes[0].nodeValue);
alert(document.getElementById("ciccio").innerHTML)
alert(document.getElementById("ciccio").childNodes[0].nodeName);
</script>
</html>