Javascript

Autore: Giuseppe Dell’Abate

Principi di base

Diffusione di InternetNegli 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à staticaLa diffusione di estensioni dinamiche D-HTML per rendere “meno” statiche le pagine HTML lato clientL’evoluzione di linguaggi di scripting per il supporto di pagine dinamiche lato clientLo sviluppo di nuove tecnologie web (Servlet, Applet, ASP) per realizzare il dinamismo delle pagine lato client e lato server

Lato Client e lato ServerTecnologie 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

Lato Client e lato ServerTecnologie 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–serverAttraverso:

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

Nascita di JavascriptData 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 JavascriptNel 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

Vantaggi e SvantaggiIl linguaggio di scripting, rispetto al linguaggio di programmazione, presenta:Vantaggi:

Sicurezza: non può accedere a informazioni riservateVisibilità: codice in chiaro ed in continua evoluzioneLato Client: non carica il server

Svantaggi:Limitate capacità: deve delegare i linguaggi di programmazione per effettuare altre operazioniDownload totale: deve essere scaricato tutto il codice per interpretarloLato Client: può caricare eccessivamente il client

CaratteristicheJavascript presenta diverse caratteristiche:

E’ un linguaggio di scriptingConsente di effettuare alcune operazioni ma non di gestire completamente tutte le funzionalità messe a disposizione dal Sistema Operativo

E’ basato sugli oggettiGli oggetti vengono utilizzati per la programmazione ma non è possibile sfruttare polimorfismo, ereditarietà, tipizzazione

E’ guidato dagli eventiGli eventi consentono di eseguire delle azioni

E’ indipendente dalla piattaformaTutti i browser che supportano la specifica sanno eseguire lo script, indipendentemente dal Sistema Operativo residente

E’ standardizzatoLa ECMA ha standardizzato Javascript nel 1997 con il nome ECMAScript ed inoltre è uno standard ISO

Versioni e limitiNel 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-262Le 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 ! )

Motori JavascriptJavascript è 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’ECMAL’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) FutharkInternet Explorer 9 : utilizza Chakra, prima (v.8) JScriptMozilla Firefox 3.5 utilizza TraceMonkey, prima (v.3) SpiderMonkeyGoogle Chrome utilizza V8

Primi scriptIl 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 interpretarloPer 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>

Primi scriptPer 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

esterna3. Utilizzando la parola chiave “javascript:” prima della sua

invocazione.4. Utilizzando l’attivazione di un evento: onmouseover ecc

Primi scriptFile MiaProva.html<html><head><title>MiaProva</title><SCRIPT LANGUAGE="JavaScript"><!--function prova() {alert("Ciao Mondo!");}//--></SCRIPT><SCRIPT LANGUAGE="JavaScript" src="mio.js"></SCRIPT></head><BODY><A HREF="javascript:alert('Hello')">Hello World!</A><A HREF=“#” onclick=“prova()">Ciao Mondo!</A></BODY></html>

File mio.jsalert( “Hello World!");

1) codice

2) import

3) key javascript

4) evento

LivelliLa 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.

La sintassiIn ogni linguaggio occorre definire :

Il soggetto: colui che esegui l’azioneIl 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 .

La sintassiDati: rappresentano i valori che sono oggetto della nostra elaborazione.

Ogni dato viene identificato da un tipo che identifica la tipologia di valoriUn nome che serve per identificare univocamente il nostro datoUn valore che indica il valore che abbiamo scelto di conservareA 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

La sintassiNome:

Non possono utilizzare dei nomi riservati dal linguaggioNon è possibile utilizzare spazi all’interno del nome

AssegnazioneUtilizziamo 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 interiDecimali: rappresenta l’insieme di numeri realiLogico: è un insieme contenente valori vero o falsoStringa: rappresenta un insieme costituito di caratteriUndefined: rappresenta l’assenza di valorenull: rappresenta un valore volutamente vuoto

La sintassiLa 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.

La sintassiLe 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!’)

Strutture di controlloLe funzioni: consentono di modulare un blocco di codice e poterlo riutilizzare più volte.

function nome_funzione (parametri di ingresso) {//blocco di codicereturn valore_restituito;

}Esempio:

function moltiplicazione (a, b) {c =a*b;

return c;}

Strutture di controlloJavascript 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’)

Strutture di controlloIstruzioni 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);

Strutture di controlloIstruzioni di selezione: permette di verificare i possibili valori dell'espressione presa in considerazione

Sintassi:switch (espressione) {case val1:istruzioni1; break...case val_n:istruzioni_n; breakdefault:istruzioni}

Esempio:var a = 1;switch (a) {case 0:alert("a = zero");break;case 1:alert("a = uno");break;case 2:alert("a = due");break;case 3:alert("a = tre");break;default:alert("a maggiore di 3");}

Strutture di controlloIstruzioni 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;

}

Strutture di controlloIstruzioni 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;

}

Gli oggettiJavascript è 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 oggettoOgni oggetto è costituito da metodi che forniscono il comportamento del nostro oggetto

Gli oggettiJavascript è un linguaggio non tipizzato che non consente di create dei tipi ma è possibile creare degli oggettiLa libreria Core mette a disposizione degli oggetti che consentono allo sviluppatore di facilitare l’attività di sviluppo.Tali oggetto sono:

ArrayBooleanDateMathNumberString

Gli ArrayL’oggetto Array consente di creare un array e di gestirlo tramite i propri metodiUn array è una lista di valori che possono essere referenziati con un nome ed un indice

1) Definizione di arraynome = new Array(‘prova1’, ‘prova2’);

2) Definizione di arraynome = new Array(2);nome[0]= ‘nome1’nome[1]= ‘nome2’

Array mono-dimensionaliPer definire un array e' possibile usare una di queste sintassi:

Creare un oggetto Array vuotonome_variabile = new Array( );myArray = new Array();

Creare un oggetto Array vuoto di 3 elementinome_variabile = new Array( dimensione_array );myArray = new Array(3);

Creare un oggetto Array vuoto di N elementi valorizzatinome_variabile = new Array( valore1, valore2, valore3 );myArray = new Array('pippo', 'pluto', 'paperino');

Array mono-dimensionaliPer 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";

Array bi-dimensionaliE' 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() );

Array bi-dimensionaliPer 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") );

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'

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'

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

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

Array dinamiciE' 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;

Gli ArrayI metodi dell’oggetto Array sono

concat unisce 2 array e ritorna un nuovo arrayjoin collega tutti gli elementi di un array in una stringapop rimuove l’ultimo elemento dall’array e lo ritornapush aggiunge un elemento all’array e lo ritorna.reverse inverte l’ordine degli elementi dall’arrayshift rimuove il primo elemento dall’array e lo ritorna.slice estrae una sezione dell’array e lo ritornasplice aggiunge o rimuove elementi all’arraysort ordina gli elementi dell’arrayunshift aggiunge un elemento all’array e ritorna la lunghezza

Boolean e DateBoolean

Definisce un tipo boleano che può catturare valori true/falsebooleanObjectName = new Boolean( true );Se il valore è omesso allora avrà valore false

DatePermette 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" : ":") + minutetemp += ((second < 10) ? ":0" : ":") + secondtemp += (hour >= 12) ? " P.M." : " A.M."alert(temp)

MathMath

Questo oggetto consente di poter invocare tutti quei metodi che possono essere utilizzati per effettuare calcoli matematiciabs valore assolutosin, cos, tan funzioni trigonometriche standardacos, asin, atan funzioni trigonometriche inverseexp, log esponente e logaritmo naturaleceil numero intero massimofloor numero intero minimomin, max inferiore o maggiorepow esponenzialeround arrotondamento all'intero + vicinosqrt radice quadrata

Number e StringNumber

Viene utilizzato per rappresentare dei numeri e poter li manipolare facilmente:MAX_VALUE rappresenta il numero + grandeMIN_VALUE rappresenta il numero + piccoloNaN Special “not a number” valueNEGATIVE_INFINITY valure infinito negativoPOSITIVE_INFINITY valore infinito

StringConsente di creare degli oggetti stringa e di manipolarli tramite un insieme di metodia = new String(“prova”);length ritorna la lunghezza della stringatoUpperCase/toLowerCase trasforma in maiuscolo/minuscolo i caratterisubstring(start, end) seleziona una parte di stringa dal punto start ad end

StringString

anchor crea una ancora HTML big, blink, bold, fixed, italics, crea corrispondenti tag HTMLsmall, strike, sub, sup String formattate in HTMLcharAt, charCodeAt ritorna il carattere in data posizioneindexOf, lastIndexOf ritorna la posizione di un caratterelink crea un HTML hyperlinkconcat concatena 2 stringhesplit divide una stringa in un array di stringheslice estrae una sezione di stringamatch, replace, search usato con le espressioni regolari

Gli oggettiE’ consentito, per lo sviluppatore, creare dei proprio oggetti da poter riutilizzare come un libreria oppure da potere mettere a disposizione della comunità degli sviluppatoriLa 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)

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

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

3) Funzioni di oggettifunction 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();

Il BOMJavascript prevede 3 tipologie di oggetti:

Ereditati dalle librerie CORECreati dallo sviluppatoreCreati 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 funzionamentoLo 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.

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)

L’oggetto navigatorL’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 browserappMinorVersion Minor version del browser appName Nome del browserappVersion Piattaforma e versione del browser browserLanguage Lingua del browsercookieEnabled Abilitazione o meno dei cookiescpuClass Classe di CPUonLine Navigazione offline o online

L’oggetto navigatorplatform Sistema operativosystemLanguage Lingua del sistema operativouserAgent user-agent utilizzato userLanguage lingua di default

Navigator Object MethodsjavaEnabled() Java abilitato

L’oggetto windowL’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.

L’oggetto windowFrames 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.

L’oggetto windowMessaggi 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.

statusdefaultStatus messaggio di default mostrato sulla barra di status della finestra. status Specifica una priorità o un messaggio transitorio nella barra di status della finestra.

L’oggetto windowBarre

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.

L’oggetto windowTimeout 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.

L’oggetto windowGestione 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.

Varieprint 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 finestrahome Dirige il browser sull'URL indicato nelle preferenze come home page dell'utente.

L’oggetto windowEventi 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 frameonUnload 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“.

L’oggetto windowGestori 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.

L’oggetto documentL’oggetto document permette di ottenere un riferimento al documento HTML ed agli elementi definiti in essoL'oggetto espone solo pochi metodi:

open(): apre un flusso di informazioneclose() 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 HTMLtitle: titolo del documento HTML

3. Al contenuto del documento HTML ( segue … )

L’oggetto documentTutti gli elementi presentano

proprietà:name: ricava il nome del campovalue: imposta o ricava il valore del campotype: 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 )

L’oggetto documentEsempio 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>

Tale oggetto consente di ottenere informazioni sull’URL della pagina corrente tramite le proprietà:

http://www.google.com:80/search?q=java#miotag

L’oggetto location

protocol

hostname

pathname

search

hashport href

L’oggetto locationL’oggetto location contiene 2 metodi:

replace(): ordina al browser di sostituire la pagina attuale con la pagina dell’URL specificatareload(): ricarica la pagina dal server

L’oggetto historyL’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 indietroback(): emula il pulsante indietro del browser di una posizioneforward(): emula il pulsante avanti del browser di una posizione

L’oggetto screenL’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

L’oggetto screenProprietà

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.

L’oggetto screenMetodi 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.

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

NomeData di scadenzaDominioPercorso

I Cookiesfunction 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";}}

I Cookiesfunction 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;}

Gli eventiIn seguito alle azioni che decide di effettuare l’utente, vengono a crearsi degli eventi che devono essere gestitiLa 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 eventialert(‘ciao’): è l’attività associata al verificarsi dell’evento che verrà avviata dal gestore

Gli eventiNel corso del tempo il numero degli eventi è progressivamente aumentatoPossiamo distinguerli in 5 categorie:

Eventi di sistema : onLoad, onUnload, onAbort, onErrorEventi legati al mouse: onClick, onMouseOver, onMouseOutEventi attivabili alle modifiche dell’utente: onChangeEventi legati al fuoco: onFocus, onBlur, onSelectEventi legati a particolari bottoni: onSubmit, onReset

Gli eventiEventi di sistema :

onLoad: si attiva quando la pagina html viene caricataonUnload: 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 ESConError: 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 oggettoonMouseOver: si attiva quando l’utente passa il mouse su un oggettoonMouseOut:: si attiva quando l’utente passa il mouse lontano dall’oggetto

Gli eventiEventi 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 oggettoonBlur: si attiva quando l’utente non utilizza un determinato oggettoonSelect: si attiva quando l’utente seleziona delle caselle di testo

Eventi legati a particolari bottoni: onSubmit: quando l’utente effettua l’invio di una formonReset: quando l’utente clicca sul tasto “annulla” di una form

Il DOMIl 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 elementiAncor 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 testoIl DOM definisce una modalità standard per accedere e manipolare documenti HTML

Il DOM

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

Il DOMProprietà DOM

x.innerHTML - il codice html dell'elemento x x.nodeName - il nome di xx.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 xx.previousSibling – il successivo nodo fratello di xx.attributes - gli attributi di x

Metodi DOMx.getElementById(id) - recupera il nodo in base al nomex.getElementsByTagName(name) - recupera tutti i nodi in base al nomex.appendChild(node) - inserisce un nodo figlio ad xx.removeChild(node) - rimuove un nodo figlio a x

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>