il linguaggio javascript scuola superiore g. reiss romoli

Il linguaggioIl linguaggio

JavaScriptJavaScript

SCUOLA SUPERIORE G. REISS ROMOLI

IntroduzioneIntroduzione

Javscript è un “linguaggio di scripting”: il Browser (Internet explorer, Netscape, Opera etc) interpreta sequenzialmente ogni riga del programma e lo esegue, quindi passa alla riga successiva

Javscript è un linguaggio di programmazione nato per conferire dinamicità alle pagine web (1995)


Storia, evoluzione e Storia, evoluzione e tipologia delle pagine webtipologia delle pagine web

Pagine statichePagine staticheHtml: non è un linguaggio nel senso tradizionale ma un impaginatore che consente di posizionare degli oggetti (testo, grafica ed elementi “inglobati”) all’interno di un file che viene interpretato dal browser (.htm, .html)

Non c’è interazione con l’utente se non tramite link ipertestuali (elementi sensibili di una pagina web che consentono il salto incondizionato verso un indirizzo diverso da cui l’utente si trova oppure verso un altro punto nella stessa pagina web (ancoraggio)

Le pagine web possono essere statiche o dinamiche


Pagine dinamichePagine dinamiche

Prima di Javascript l’interazione era solo “lato server”

Es: nei Moduli (Forms) i dati venivano inviati al server e lì elaborati tramite programmi scritti in “linguaggi di programmazione lato server” (Perl, C, ..)

Tali programmi generavano dinamicamente pagine HTML di ritorno visualizzate direttamente dal browser dell’utente

Cosa può fare un programma “lato server”?

- validazione ed elaborazioni di dati

- accesso a basi di dati o a file di dati formato testo

- produzione di effetti grafici

- eseguire ciclicamente un certo numero di operazioni strutturate in blocchi di sottoprogrammi


Pagine dinamiche (Javascript)Pagine dinamiche (Javascript)Con Javascript l’interazione diventa anche “lato client”

Alcune operazioni prima demandate esclusivamente al server vengono eseguite in locale dal javascript sulla macchina client:

- validazione ed elaborazioni di dati e controllo dell’integrità dei dati stessi

- produzione di effetti grafici

- eseguire ciclicamente un certo numero di operazioni strutturate in blocchi di sottoprogrammi

In questo modo una certa mole di operazioni viene decentrata dal server al client contribuendo a “decongestionare” le attività del server: si pensi ad applicazioni web dove tanti utenti accedono contemporaneamente ad es. ad una base dati


Evoluzione della programmazione Evoluzione della programmazione web (ASP)web (ASP)

ASP (Active Server Pages) è un ambiente di programmazione lato server della Microsoft (funziona con il sistema operativo Windows NT Server o Windows 2000 o con Windows 98) che può contenere codice HTML, javascript, VBScript (simile al Visual Basic). Per funzionare ASP ha bisogno di un supporto software che costituisce un web server (IIS - Internet Information server) oppure PWS - Personal Web Server

Il codice scritto nei documenti ASP è interpretato ed è in codice ASCII quindi appare in chiaro anche se l’utente della macchina client non visualizza il sorgente ma soltanto il risultato che l’elaborazione lato server produce.


Evoluzione della programmazione Evoluzione della programmazione web (Java)web (Java)

Nelle pagine HTML possono essere inglobati degli “applet” Java per produrre animazioni o fare elaborazioni qualitativamente avanzate

Java è un linguaggio “semicompilato”; non produce un eseguibile puro, ma un file in formato “bytecode” che viene interpretato sul client da una macchina virtuale chiamata Java Virtual Machine

L’applet viene spedito dal server al client dove avviene l’elaborazione


Evoluzione della programmazione Evoluzione della programmazione web (COM)web (COM)

L’elaborazione lato server può avvenire anche tramite “Componenti”, blocchi di codice indipendente compilato quindi non visibile dall’esterno. Di solito sono costituiti da file .dll scritte in C oppure in Visual Basic

Interessante ai fini dell’implementazione delle applicazioni web è il modello “a tre strati” dove l’utente interagisce con lo stato “superficiale”, costiutito da pagine HTML o ASP, che costituisce l’interfaccia dell’applicazione web.

Le pagine web comunicano i comandi per le interrogazioni di dati con uno “strato intermedio” composto da uno o più componenti eventualmente distribuiti su più server. I componenti effettuano fisicamente le interrogazioni di dati al (ai) database aziendali (nascondendo così la struttura dei dati stessi). I database costituiscono il “terzo strato”, inaccessibile in questo modo dall’esterno in quanto il codice con il quale sono costituiti i componenti non è “in chiaro”

I risultati delle interrogazioni vengono presentati direttamente all’interfaccia web come valori delle proprietà delle classi costituenti i componenti o come risultati dell’esecuzione di metodi delle classi stesse.


Cosa Javascript può o non può fareCosa Javascript può o non può fareVantaggi:

Svantaggi:

- javascript è in chiaro, quindi facilmente interpretabile e di facile manutenzione a differenza dei file eseguibili che non sono intellegibili

- viene alleggerito il carico del server

- non è possibile svolgere alcuni task che debbono essere demandati a elementi esterni, (java, ASP, CGI, C) Es: non si può accedere a file di dati o di testo, non si può operare direttamente sull’hardware del computer client.

- il codice è a disposizione di chiunque proprio perché in chiaro

- il codice deve essere scaricato dal server al client prima di essere eseguito e questo a volte ritarda i tempi di elaborazione


Come si inserisce uno script in una Come si inserisce uno script in una pagina webpagina web

- tramite il tag <script> all’interno di un file HTML

Es:

<body>

<script language="JavaScript"></script></body>

- Caricandolo da una file esterno

Es:

dove nel file miofile.js si scrive solamente il blocco di codice javascriptEs: alert(“Questo è un blocco di codice javascript in un file esterno”);

Vantaggi: modularità per utilizzare degli script richiamabili all’interno di più file)

Cosa usare per scrivere codice Javascript?Un qualsiasi editor di testo (Notepad, Visual Interdev, Dreamweaver etc

<html><head><script language="JavaScript” SRC=“miofile.js”> </script> </head><body>…..</body></html>

Dove va scritto il codice javascript in Dove va scritto il codice javascript in una pagina webuna pagina web

Sia nella sezione <head> che nella sezione <body> di un documento HTML

Gli script inseriti nella sezione <head> vengono caricati ed eventualmente eseguiti prima degli script inseriti nella sezione <body>, i quali vengono eseguiti sequenzialmente secondo l’ordine di caricamento.

Nella sezione <head> vengono spesso inseriti script relativi a “funzioni” javascript (vedi dopo) che verranno richiamate all’interno del programma


Esempio: provare il seguente codice javascript

All’inizio dell’elaborazione la variabile x vale 1 perché così impostato nel tag <head>

<html>

<head>

<script language=“JavaScript”>x=1; alert(“Intestazione=“ + x);</script> </head><body>

<script language="JavaScript”>x++; alert(“Nuovo valore di x=“ + x);x++; alert(“Nuovo valore di x =“ + x);</script> </body></html>

Attenzione all’uso degli apici (singoli e doppi)


I metodi per inserire e richiamare I metodi per inserire e richiamare gli script al’interno di un documentogli script al’interno di un documento- tramite il tag script <script>……</script>

- tramite un “gestore di eventi” con richiamo esplicito al linguaggio javascript :

- tramite un “gestore di eventi” che richiama una funzione esterna (vedi dopo):

<body><a href=“#” onclick=“javascript:alert(‘ciao’);”>Clicca qui</a></body>

<body><a href=“#” onclick=“MostraMessaggio();”>Clicca qui</a></body>


Per scrivere all’interno di un Per scrivere all’interno di un documento HTML tramite javascript:documento HTML tramite javascript:

Utilizziamo il comando: document.write(“Ciao”);

Tramite il comando document.write scrivo direttamente nel documento associato alla pagina web corrente, cosicchè se scrivo codice HTML esso verrà interpretato dal browser per produrre documenti di tipo web

<body>

<script language="JavaScript”>document.write(“<font face=‘Verdana,Arial’ size=‘2’ color=‘red’>”);

document.write(“Sto scrivendo in javascript in un documento HTML”);document.write(“</font>”);

</script></body>


La sintassi del linguaggio javascript:La sintassi del linguaggio javascript:

Javascript è un linguaggio strutturato; esso possiede alcune strutture tipiche dei linguaggi di programmazione:

Le istruzioni di senso compiuto dovrebbero sempre essere terminate da un punto e virgola (;) - esso separa due istruzioni di senso compiuto, che quindi possono essere scritte anche su una stessa riga

- istruzioni di comando - [ x=2; alert(“Ho scritto “ + x); ]

- istruzioni condizionali - [ if (x==2) alert(“Ho scritto “ + x);]

- istruzioni iterative - [ for (I=1; i<=10; I++) alert(“Ho scritto “ + I); ]

- richiamo di funzioni [ < a href=“#” onclick=“MostraMessaggio();”>Mostra il Messaggio</a> ]


Le variabiliLe variabili

Sono locazioni di memoria associate ad un nome all’interno del programma. esse possono assumere valori variabili durante l’esecuzione del programma stesso.

x=3;

nome=“pippo”;

coniugato=false;

nome[k]=“Giovanni”;

Javascript è un linguaggio “debolmente tipizzato” nel senso che il tipo della variabile viene attribuito nel momento dell’utilizzo

Es: x=3 significa che x è di tipo numerico (x++ restituirà 4)


nome=“pippo” significa che la variabile nome è di tipo stringa quindi “pippo”+”3” restituirà “pippo3”

coniugato=false; coniugato è una variabile booleana

nome[k]=“Giovanni”; nome è una variabile di tipo array

Le variabili possono essere anche dichiarate ma non utilizzate subito. In questo caso il valore attribuito è null oppure undefined

var nome;

In alternativa si può dichiarare una variabile ed assegnarne subito il valore var nome=“pippo”;


Gli operatori:Gli operatori:+ - * / ^ Operatori aritmetici

&&, ||, ! AND, OR, NOT Operatori Logici

++, - - Operatori di incremento e di decremento

!= diverso da

= < <= > >= Operatori relazionali

== Operatore di confronto: if(x==3)

= Operatore di assegnazione x=3


Variabili Globali e variabili localiVariabili Globali e variabili locali

Variabili globali: hanno valore in tutto il documento HTML e di solito vanno dichiarate nel tag <head>

Variabili locali: hanno valore soltanto nell’ambito della funzione in cui sono dichiarate

ATTENZIONE: in Javascript le variabili, così come le parole chiave della sintassi, cosi come i nomi delle funzioni e gli identificatori debbono essere scritte sempre tenendo conto delle lettere maiuscole e minuscole, perché Javascript è un linguaggio di tipo “case sensitive”, cioè sensibile allle lettere maiuscole e minuscole


Esempio di utilizzo di variabili locali e globali

<HTML><HEAD><TITLE>Variabili locali e variabili globali</TITLE><SCRIPT LANGUAGE="JavaScript">var scope="globale";function checkScope() { var scope="locale"; document.write(scope + "<br>")}</SCRIPT></HEAD><BODY><H1>Variabili locali e variabili globali</H1><HR><SCRIPT LANGUAGE="JavaScript">checkScope(); //scrive: localedocument.write(scope); // scrive: globale</script></BODY></HTML>


L’istruzione condizionale IfL’istruzione condizionale IfL’istruzione If permette di eseguire istruzioni di tipo condizionale.

Viene valutata un’espressione ed a seconda se questa è vera o falsa viene eseguito un diverso blocco di istruzioni

Sintassi

if(condizione){

istruzione_1 //può essere anche un blocco di istruzioni

}

else

{

istruzione_2

}


Esempio pratico sull’istruzione If

A seconda del valore di una variabile viene mostrata una scritta di colore diverso

<SCRIPT LANGUAGE="JavaScript">var colore=“blu”if(colore==“verde”){

document.write(“<font size=‘3’ color=‘green’>” document.write(“Questa scritta apparirà di colore verde” ) document.write(“</font>”

}else{document.write(“<font size=‘3’ color=‘green’>”

document.write(“Questa scritta apparirà di colore ” + colore) document.write(“</font>”

}

</script>


Istruzione ciclica ForIstruzione ciclica ForIl For costituisce un ciclo a numero di iterazioni fissato

Il programma esegue un blocco di istruzioni un certo numero di volte già noto all’inizio del ciclo

Sintassi

Esempio: per far scrivere un numero progressivo da 0 a 9

for(inizializzazione; test_fine_ciclo; incremento) {

blocco_di_istruzioni

}

for(var i=0;i<10;i++){

document.write(“Ho scritto ” + i + “<br>”)

}


Esercitazione: Calcolo del fattoriale con il ciclo For

Si definisce fattoriale (N!) di un intero positivo N un numero tale che se N=0 vale 1, se N>0 vale 1 * 2 *…* N

<script language="javascript">document.write("<font face='verdana,arial' size='3'

color='red'>fattoriali</font><br>");document.write("questa pagina calcolerà il fattoriale dei

numeri fino a 10 utilizzando il ciclo FOR<br>");

var fattoriale=1;for (x=0; x<=10; x++){if (x==0)fattoriale=1;else {fattoriale=fattoriale * x;document.write("<font size=" +x +">");document.write("il fattoriale di " + x +" è uguale a " +

fattoriale +"<br>");}

}</script>


Istruzione ciclica WhileIstruzione ciclica WhileIl costrutto while costituisce un ciclo a numero di iterazioni non prefissato. La fine del ciclo dipende dal verificarsi di una condizione di fine ciclo

E’ necessario l’utilizzo di una variabile contatore

Sintassi

Il programma valuta una condizione di fine ciclo. Se questa è falsa il ciclo finisce; se è vera viene eseguito un blocco di istruzioni e poi viene incrementata la variabile che conta il numero di iterazioni.

Se la condizione d’uscita è falsa il ciclo non esegue alcuna istruzione

Se la condizione d’uscita è sempre vera il ciclo non finisce mai

While (condizione){

blocco_di_istruzioni

incremento_variabile_contatore

}


Esempio: per far scrivere un numero progressivo da 0 a 9 con il ciclo while

<script language=“javascript”>

var i=0;

While(i<10){

document.write(“Ho scritto ” + i + “<br>”)

i++;

}

</script>


Esercitazione: Calcolo del fattoriale con il ciclo While

<script language="javascript">document.write("<font face='verdana,arial' size='3'

color='red'>fattoriali</font><br>");document.write("questa pagina calcolerà il fattoriale dei numeri

fino a 10 utilizzando il ciclo WHILE<br>");var fattoriale=1;var x=0;while (x<=10){if (x==0)fattoriale=1;else {fattoriale=fattoriale * x;}document.write("<font size=" +x + " color=" +"#" + fattoriale +

">");document.write("il fattoriale di " + x +" è uguale a " + fattoriale

+"<br>");x++;}</script>


Le funzioniLe funzioniBlocchi di codice autonomo eventualmente dipendenti da parametri d’ingresso, che vengono richiamate una o più volte nel corso del programma.

Come il concetto matematico di funzione

y=F(x1, x2, …. , xn) esse producono un solo risultato in uscita

La funzione viene dichiarata (nella sezione <head> se viene vista nell’ambito di tutto il documento, oppure nella sezione <body> e viene vista da quel punto in poi)

I parametri ( x1, x2, … , xn) presenti nella dichiarazione sono detti i “parametri formali”

La funzione viene poi richiamata e i parametri che vengono ad essa passati sono detti i “parametri attuali” che si sostituiscono in valore ai parametri formali.


Esempio: funzione che effettua la somma tra due numeri immessi dall’utente

Step 1) Scriviamo prima una generica funzione per controllare che i dati immessi siano di tipo numerico

<html><head>

<title></title><script language="Javascript">

function ErrorString(campo,nomeCampo) //Controlla che il campo sia di tipo numerico

{ var str = campo.value; for (var i=0;i < str.length;i++) if ((str.charAt(i) < '0') || (str.charAt(i) > '9')) { alert("Attenzione: il campo '"+nomeCampo+"' deve essere

numerico!"); campo.focus(); return false;

} return true;

}


NOTE SULL’ESEMPIO

- Una stringa viene trattata come un vettore (vedi dopo) o Array

- Vettore (Array): insieme di coppie ordinate indice-valore. Una stringa è un insieme ordinato di caratteri indicizzati dalla posizione 0 fino alla posizione N-1 dove N è il numero di caratteri della stringa.

Nozioni aggiuntive:

- str.length = lunghezza in caratteri della stringa- str.charAt(i) = estrae il valore dell’i-mo carattere della stringa- str.charAt(0) è l primo carattere della stringa- il metodo focus posiziona il cursore sull’oggetto in questione (vedi dopo: Oggetti)


Step 2) Scriviamo una generica funzione per controllare che siano effettivamente stati immessi dei dati (il campo non sia vuoto)

function StringaVuota(campo,nomecampo){ //controlla che non ho immesso nel campo un valore nullo

if(campo.value==""){alert(nomecampo + " non può avere valore nullo");campo.focus();return false;

}

return true;}


Step 3) scriviamo una funzione che effettua la somma tra due numeri immessi dall’utente

function Somma(x,y){ //funzione che effettua la somma di due addendi passati come parametri

//if generale di controllo: se tutte e quattro le chiamate di funzione danno true come risultato anche il risultato della //funzione somma sarà true

if (StringaVuota(x,”Primo addendo") && ErrorString(x," Primo addendo ") && StringaVuota(y,”Secondo addendo") && ErrorString(y,”Secondo addendo"))

{var Risultato=parseInt(x.value)+parseInt(y.value);alert("La somma di " + x.value + " e " + y.value + " è uguale

a " + Risultato);return true;

}elsereturn false;

}</script></head>


NOTE SULL’ESEMPIO

Return: istruzione che termina l’esecuzione di una funzione e produce un risultato (nel caso specifico true o false)

La funzione parseInt(x) converte un carattere immesso in un numero permettendo di poterne fare operazioni aritmetiche


Step 4) Scriviamo la parte HTML della presente esercitazione

<body><form name="FrmProva" method="get"><font face="Verdana,Arial" size="1">I campi contrassegnati con l'asterisco sono ad immissione

obbligatoria<table border="0" width=50%><tr><td>* Inserisci il primo addendo</td><td><input type="text"

name="TxtNome" size="30" maxlenght="40"></td></tr><td>* Inserisci il secondo addendo</td><td><input type="text"

name="TxtCognome" size="30" maxlenght="40"></td></tr><td><input type="submit" name="BtnSubmit" Value="Somma"

onclick="return Somma(document.FrmProva.TxtNome, document.FrmProva.TxtCognome);"></td><td>

<input type="reset" name="BtnReset" value="annulla"></td></tr></table></form></body></html>


NOTE SULL’ESEMPIO

- nel tag <form> il metodo get, a differenza del metodo post permette di visualizzare sulla barra dell’URL i parametri che vengono inviati al server con il pulsante di Submit

- la funzione somma viene richiamata sull’evento click del pulsante che invia i dati al server

- le funzioni debbono essere richiamate facendo attenzione ad utilizzare la stessa sequenza di maiuscole e minuscole

Esercitazione: scrivere una funzione che effettua la moltiplicazine tra due numeri immessi dall’utente tramite due input text box


Gli OggettiGli OggettiUn oggetto si definisce come “un’istanza di una classe”

Una classe è una collezione di oggetti che condividono stesse proprietà, eventi, metodi

Regole della programmazione ad oggetti

Abbiamo già utilizzato l’oggetto document ed il suo metodo write per scrivere all’interno di un documento HTML

document.write(“Ciao”)

- incapsulamento

- ereditarietà

- polimorfismo


Metodi e proprietàMetodi e proprietàI metodi li possiamo vedere come delle “azioni” che gli oggetti possono compiere oppure delle azioni fatte fare agli oggetti

Per richiamare (invocare) un metodo:

NomeOggetto.Metodo(…..) con eventuali argomenti

Le proprietà invece caratterizzano gli oggetti nella loro peculiarità

Es: Per il TAG <input type=“text” size=“30” name=“TxtNome”>

type, size, name sono delle proprietà dell’oggetto input


Gli eventiGli eventiGli eventi come dice la parola stessa sono “qualcosa che può accadere agli oggetti” come p.es. il click del mouse sull’oggetto oppure il passaggio del mouse sull’area dell’oggetto oppure il caricamento dell’oggetto nel documento

Oggetti appartenenti a classi diverse non è detto che posseggano gli stessi eventi

In javascript possiamo gestire gli eventi associando ad un evento di un oggetto una funzione

Es: <input type=“submit” name=“CmdInvia” value=“Invia” onclick=“return ControlloDati();”>

Quando si fa click sul pulsante viene richiamata la funzione ControlloDati()


In javascript possiamo gestire le proprietà, eventi e metodi di oggetti già predefiniti nel Browser (Oggetti intrinseci)

Come vedremo, è possibile anche creare e gestire nuovi oggetti. Javascript mette quindi a disposizione alcune peculiarità della programmazione ad oggetti ma in maniera “soft”: non è possibile paragonare javascript a java o a C++


Gerarchia degli oggetti in javascriptGerarchia degli oggetti in javascriptUno dei punti di forza di JavaScript è la sua capacità di lavorare direttamente con elementi della pagina Web che viene gestita tramite una “gerarchia di oggetti JavaScript”.

Questa gerarchia contiene una notevole varietà di oggetti che rappresentano i dati

nella pagina Web corrente e nella finestra del browser in esecuzione. Tutti gli oggetti sono organizzati in una gerarchia di oggetti genitori e oggetti figli. Un oggetto figlio non è che un oggetto utilizzato come proprietà di un altro (l’oggetto genitore). Ciò significa che cascun oggetto appartenente alla gerarchia include proprietà che a loro volta sono spesso altri oggetti.

Un oggetto può avere dei metodi che servono per eseguire funzioni su di esso; può includere dei gestori di eventi che chiamano funzioni o enunciati javaScript quando si verifica un evento relativo a quell’oggetto.

A questo punto cominceremo ad esaminare l’oggetto che è al top della gerarchia degli oggetti Javascript: l’oggetto window


L’oggetto WindowL’oggetto WindowL’oggetto window è al primo posto nella gerarchia degli oggetti. Per ogni finestra del browser aperta esiste un oggetto window.

Le proprietà di questo oggetto descrivono il documento nella finestra e forniscono informazioni sulla finestra.

Tre proprietà dell’oggetto window sono oggetti figli:

location memorizza la posizione (URL) che è visualizzata nella finestra;

document contiene la pagina Web vera e propria

history contiene un elenco delle pagine visitate prima e dopo della pagina attualmente sulla finestra del browser.


Metodi dell’oggetto windowMetodi dell’oggetto windowAlcuni metodi più usati dell’oggetto window:

Esempio: dall’istanza corrente del browser aprire una nuova finestra più piccola da dove è possibile cambiare alcune proprietà della finestra più grande.

Scriviamo prima la funzione che consente di aprire la “finestra figlia”

window.open(….) consente di aprire una nuova istanza del browser con parametri personalizzati

window.close() chiude l’istanza corrente del browser

function aprifin(){window.open("finestra_figlia.htm", "figlia",

"width=300, height=300, top=60, left=60, scrollbars=no")

}


Poi nella finestra madre richiamo la funzione aprifin()

Notare l’utilizzo dell’ evento onload (su caricamento) del tag body

Scrivo il codice all’interno della “finestra figlia”

<body onload="aprifin();"><div align="center"><br><br><br><br><br><br><br><br><br>decidi il colore di sfondo di questa finestra

cliccando sui relativi comandi in quella più piccola!

</body>

<script language="javascript">function CambiaColore(mycolore){document.bgColor=mycolore;}</script>


opener fa riferimento alla finestra che ha aperto quella corrente

Tramite opener è possibile far riferimento a variabili, funzioni ed oggetti definiti nella finestra che l’ha creata.

<body><div align="center"><a href="#" onclick="opener.document.bgColor='#ff0000';">rosso</a><br><a href="#" onclick="opener.document.bgColor='green';">verde</a><br><a href="#" onclick="opener.document.bgColor='blue';">blu</a><br><a href="#" onclick="opener.close();">Chiudi la finestra madre</a><br><a href="#" onclick="window.close();">Chiudi la finestra figlia</a><br></div><br>

<input type="button" value="Cambia il colore di sfondo" name="btnCambiaColore" onclick="return CambiaColore('red');">

</body>


I Timeout e l’oggetto WindowI Timeout e l’oggetto WindowIl Metodo window.setTimeout differisce l’esecuzione del codice di un certo ritardo espresso in millisecondi

Sintassi:

window.setTimeout(codice,ritardo)


EsercitazioneCreare un file HTML che contenga uno script che imposta un timer allo scadere del quale il browser carica un’altra pagina HTML.

<HTML><HEAD><script language="javascript">ID=window.setTimeout("Redirect();",3000);function Redirect() {document.open();document.write("<html>");document.write("<head>");document.write("</head>");document.write("<body>");document.write("</body>");document.write("Ciao");document.write("</html>");document.close();}</script></HEAD><body>Timer</body></html>


Note sull’esempioDopo 3 secondi dal caricamento della pagina viene eseguita la funzione Redirect()

La funzione apre dinamicamente un nuovo documento

Nel documento aperto viene scritto solo “Ciao”


Esercitazione

Creare un documento HTML che utilizzi un timeout per visualizzare un messaggio-contatore che si incrementa ogni n secondi nella riga di stato e in un campo testo.

Un pulsante “Reset” fa ricominciare il conteggio e un pulsante “Stop” lo arresta.

Il valore all’interno della casella di testo viene espresso tramitedocument.form1.input1.value

<SCRIPT language=“javascript”>var counter = 0;// chiamo la funzione Update dopo 2 second1 dal primo caricamentoID=window.setTimeout("Update();",2000);function Update() {counter ++;window.status="Sono passati " + counter + " secondi";document.form1.input1.value="Sono passati " + counter + " secondi";// richiamo di nuovo la funzione per un altro conteggioID=window.setTimeout("Update();",1000);}</SCRIPT>


Per resettare il conteggio viene impostata la variabile counter=0

Per azzerare il timeout si utilizza la funzione clearTimeout(ID) dove ID è il valore restituito da setTimeout

<BODY><H1>Esempio di contatore</H1><HR>Il testo sottostante e la Status Bar saranno aggiornati ogni secondo.Premere il pulsante RESET per far ripartire il conteggio ed il pulsante STOP

per fermarlo<HR><FORM NAME="form1"><INPUT TYPE="text" NAME="input1" SIZE="40"><BR><INPUT TYPE="button" VALUE="RESET" onClick="counter = 0;"><INPUT TYPE="button" VALUE="STOP" onClick="window.clearTimeout(ID);"></FORM><HR></BODY></HTML>


Esercitazione: aggiungere un tasto RESTART per far ripartire il conteggio dopo lo STOP

Soluzione:

Basta aggiungere la riga di codice

<INPUT TYPE="button" VALUE="RESTART" onClick="ID=window.setTimeout('Update();',1000);">


L’oggetto Window: altri metodiL’oggetto Window: altri metodiL’oggetto window ha numerosi metodi che consentono di eseguire funzioni relative alle finestre: aprire, chiudere, manipolare finestre e visualizzare finestre di dialogo.

- alert() visualizza una finestra di dialogo di avvertimento

- blur() rimuove la finestra dal primo piano, ponendola come sfondo

- close() chiude una finestra che è stata aperta

- confirm() visualizza una finestra di dialogo e restituisce true oppure false

- focus() porta la finestra in primo piano

- open() apre una nuova finestra

- prompt() sollecita l’utente e restituisce il testo immesso


Ed ancora:

- scroll() fa scorrere la finestra sia orizzontalmente che verticalmente

- setTimeout() imposta un timer per eseguire un’istruzione differita e restituisce un identificatore per il timeout

- clearTimeout() azzera il timeout che definito da setTimeout

- setInterval() imposta un timer per eseguire un’istruzione ad intervalli regolari; restituisce un’identificatore per il timeout

- clearInterval() azzera il timeout definito da setInterval


Proprietà dell’oggetto windowProprietà dell’oggetto windowL’oggetto window ha diverse proprietà che forniscono informazioni sulla finestra e i suoi componenti.

Ogni oggetto window comprende tra le altre le seguenti proprietà:

- length: numero di cornici (frames) in una finestra di tipo parent-name: nome della finestra

- status: il valore attuale della riga di stato

- window.status rappresenta lo spazio in basso a sinistra nella finestra in cui visualizzare eventuali messaggi; possiamo usarlo come spazio per i “suggerimenti” sul significato di campi e link (es.: onMouseOver)


L’oggetto Window: gestori diL’oggetto Window: gestori dieventieventi

Alcuni degli eventi associati all’oggetto window:

- l’evento onLoad si verifica quando il documento nella finestra è stato completamente caricato

- l’evento onUnload si verifica quando si inizia a caricare un altro documento che rimpiazza quello presente sulla finestra

- l’evento onFocus si verifica quando la finestra è posta in primo piano

- l’evento onBlur si verifica quando la finestra è posta in secondo piano

- l’evento onError si verifica se il documento nella finestra non viene caricato nel modo corretto


Esercitazione

Scrivere un documento HTML e gestire gli eventi onLoad, onUnload, onFocus e onBlur visualizzando, ad esempio, dei messaggi appropriati come “Hello!” al

caricamento, etc

Soluzione

<HTML><HEAD><TITLE>Events Example</TITLE></HEAD><BODY onLoad="window.alert('La finestra è stata caricata');"onUnload="window.alert('La finestra è stata chiusa');"onFocus="window.alert('La finestra ha il focus');"onBlur="window.alert('La finestra ha perso il focus');"><H1>Gli eventi dell'oggetto WINDOW</H1><HR>

</BODY></HTML>


L’oggetto LocationL’oggetto LocationL’oggetto location è gerarchicamente inferiore all’oggetto window e ne costituisce una sua proprietà.

Contiene informazioni sulla URL della pagina visualizzata dalla finestra.

Ha un insieme di proprietà che gli servono per organizzare i vari componenti della URL

P.es.

Se si desidera caricare un’altra pagina si utilizza la seguente istruzione:

window.location.href = "http://www.netscape.com/"; Se desidera caricare un’altra pagina in un frame:

parent.frame1.location = "http://www.netscape.com/";dove frame1 è il nome del frame in questione


Esercitazione

Scegliere all’interno di una select box un URL di destinazione tra quelli elencati e far visualizzare la pagina corrispondente tramite l’evento onchange

Scriviamo prima la funzione per la redirezione all’URL prescelto

<script language=“javascript”>

function VaiAUrl(myUrl){

self.location.href=myUrl;

window.status=myUrl;}

</script>


Poi la parte HTML con il richiamo della funzione

<form method=“post” name=“FrmProva” action=“”>

select name=“SelUrl” onchange=“VaiAUrl(document.FrmProva.SelUrl.options[document.FrmProva.SelUrl. selectedIndex].value);”>

<option> </option>

<option value=“http://www.netscape.com”>Vai al sito Netscape</option>

<option value=“http://www.netscape.com”>Vai al sito Microsoft</option>

<option value=“http://www.rai.it”>Vai al sito RAI</option>

<option value=“http://www.macromedia.com”>Vai al sito Macromedia</option>

</select>

</form>


L’oggetto history L’oggetto history

Anche l’oggetto history è gerarchicamente connesso con l’oggetto window (e ne costituisce una proprietà); contiene informazioni sulle URL che sono state visitate prima e dopo il documento in corso. Anche questo oggetto dispone di metodi che consentono di tornare alle prosizioni precedenti oppure di andare a posizioni successive.

L’oggetto history ha una proprietà length che consente di sapere il numero di documenti che sono state visitate.

L’oggetto history dispone di metodi che consentono di andare a posizioni

precedenti o successive: - history.back() rimanda indietro alla posizione precedente - history.forward() rimanda avanti alla posizione successiva


Ed ancora:

- history.back() rimanda indietro alla posizione precedente - history.go() rimanda a una ben definita posizione dell’elenco history (numeri negativi vanno indietro, numeri positivi vanno avanti)

- history.go(0) permette di ricaricare le pagine web dalla cache - window.location.reload() permette di ricaricare la pagina dal server


Esercitazione

Inserire in una pagina HTML due pulsanti che permettono di ricaricare la pagina precedente oppure la pagina successiva (pulsanti “indietro” e “avanti” del

browser):

<INPUT TYPE="BUTTON”VALUE=”Indietro”

onClick="history.go(-1);"> <INPUT TYPE="BUTTON" VALUE=”Avanti”onClick="history.go(1);">

oppure

<INPUT TYPE="BUTTON”VALUE=”Indietro”onClick="history.back();"> <INPUT TYPE="BUTTON" VALUE=”Avanti”onClick="history.forward();">


L’oggetto DocumentL’oggetto DocumentUn altro oggetto gerarchicamente dipendente dall’oggetto window è l’oggetto document. Questo oggetto rappresenta il contenuto della pagina Web HTML in corso di elaborazione. Questo oggetto contiene un’ampia varietà di attributi che definiscono le informazioni sulla pagina in corso.

Le proprietà dell’oggetto document rappresentano le caratteristiche della pagina HTML in corso. Molte di queste vengono specificate nella tag <BODY> del documento, mentre altre vengono impostate dal browser nel momento in cui il documento viene caricato.

Alcune di queste proprietà sono:

- bgColor il colore dello sfondo

- fgColor il colore del primo piano (testo)

- lastModified la data ultima in cui il documento è stato modificato.

- referrer è la URL della pagina che l’utente aveva visualizzato prima dell’attuale pagina, di solito è la pagina con un collegamento alla pagina corrente


Gli oggetti “figli” dell’oggetto document sono:

- document.forms è una matrice che contiene un elemento per ogni modulo del documento

- document.links è una matrice che contiene gli elementi di ciascun collegamento presente nel documento

- document.anchors è una matrice con elementi per ciascuno delle ancore presenti nel documento

- document.images contiene un elemento per ciascuna immagine del documento in corso di elaborazione

- document.applets è una matrice che si riferisce a ciascun applet Java incorporato nel documento.


I metodi per l’oggetto documentI metodi per l’oggetto documentL’oggetto document non ha gestori di eventi ma comprende i seguenti metodi:

- clear() cancella un documento che è stato chiuso

- close() chiude un flusso e visualizza il testo scritto

- open() apre un flusso e cancella il documento in corso di elaborazione

- write() stampa i testi nella finestra del documento

- writeln() serve sia per stampare i testi nella finestra del documento sia per inserire un ritorno a capo


L’oggetto FORML’oggetto FORM

L’oggetto form rappresenta un MODULO HTML. Ci possono essere diversi form all’interno di un documento. Si può accedere ad una form utilizzando il nome oppure la matrice forms, che contiene un elemento per ogni modulo.

Gli elementi di un modulo HTML sono gerarchicamente dipendenti dall’oggetto Form:

- Text box - Text hidden - Text Password

- Select box

- check box

- radio button

- TextArea

- Submit Button, Reset Button, Button, Image Button


Gli oggetti di una form e loro Gli oggetti di una form e loro interazione con Javascriptinterazione con Javascript

Javascript viene utilizzato nella maggior parte dei casi come strumento di controllo e validazione dal lato client dei dati prima di inviarli al server

Esercitazione: Semplice controllo e validazione dei dati in un formulario:

Scriviamo prima una funzione che controlla l’immissione in un campo Nome

function ControllaNome(campo,nomecampo) {var st=campo.valuefor (var I=0; I<st.length;I++){

var car=st.charAt(I);if ((car<10) && (car >=0)){

alert("Il campo " + nomecampo + " non può contenere caratteri numerici");

campo.focus();campo.value=""return true;}

}return false;}


}

poi una funzione che controlla l’immissione in un campo Telefono

function ErrorTel(campo,nomecampo){var st=campo.value; var car;

for (var k=0;k<st.length;k++){ car=st.charAt(k); if ( ((car<'0') || (car>'9')) && ((car != '+') && (car !='/') && (car !='-')) ) { alert("Attenzione: numero di "+nomecampo+" non valido."); campo.focus(); return true; }}

return false;}


Poi scrivo una funzione che controlla in OR la validità delle altre funzioni.

Se una sola delle funzioni richiamate è vera la funzione CheckInvia() è falsa e quindi il Submit dei dati non ha luogo.

function CheckInvia(){

if ( ControllaNome(document.form1.txtNome,"Nome")|| ErrorVuoto(document.form1.txtNome,"Nome")|| ErrorVuoto(document.form1.txtTelefono,"Telefono")|| ErrorTel(document.form1.txtTelefono,"Telefono") ) return false;return true;}


Di seguito la pagina web contenente la Form dove vengono controllati i dati

<FORM name="form1" action="" method="post">Nome: <INPUT name="txtNome"><BR>

Telefono: <INPUT name="txtTelefono"><BR>

<INPUT type="submit" value="Submit" name="submit1" onclick="return CheckInvia();">

<INPUT type="reset" value="Reset" name="reset1"> </FORM>


Gli oggetti di un moduloGli oggetti di un modulo

Vedremo di seguito come vengono caratterizzati i TAG HTML relativi agli oggetti di un modulo e come ci si riferisce in javascript alle loro proprietà


Gli oggetti di tipo INPUT TEXTGli oggetti di tipo INPUT TEXT

-Text box

<input type=“text” name=“TxtNome” size=“30” maxlength=“30” value=“XXX”>

- Hidden text box

<input type=“hidden” name=“TxtNome” size=“30” maxlength=“30” value=“XXX”>

- Password text box

<input type=“password” name=“TxtNome” size=“30” maxlength=“30” value=“XXX”>

in javascript:

document.form1.TxtNome.value si riferisce al valore


I PulsantiI Pulsanti

Pulsante generico (permette di richiamare una funzione sull’evento click)

<input type=“button” name=“BtnRestart” value=“Restart” onclick=“return Restart();”>

- Pulsante di Submit (invia i dati della form al server)

<input type=“submit” name=“BtnInvia” value=“Invia” onclick=£return CheckInvia();”>

(Viene prima eseguita la funzione CheckInvia() e poi se questa restituisce true i dati vengono inviati al server)


Altri tipi di Pulsanti:

- Pulsante di Reset (Reimposta i dati della form)

<input type=“reset” name=“BtnReset” value=“Reimposta”>

- Pulsante tipo Image (Invia i dati della form al server ma tramite un’immagine)

<input type=“image” name=“BtnImg” src=“miaimg.jpg” onclick=“return CheckInvia();”>


l Radio boxl Radio box

Collezione di caselle di opzione mutuamente esclusive. Condividono stesso nome e valore diverso:

In HTML:

<input type=“radio” name=“Optbox” value=“0”>

<input type=“radio” name=“Optbox” value=“1”>

In Javascript:

if(document.Form1.Optbox[0].checked=true)

verifica se il radio box con indice 0 è selezionatp

Optbox viene trattato come un array


Esercitazione

Un semplice sondaggio: scrivo prima la funzione che richiamata ritorna la scelta effettuata

function VerificaVoto() {

if (document.FrmGov.gov[0].checked==true || document.FrmGov.gov[1].checked==true || document.FrmGov.gov[2].checked==true || document.FrmGov.gov[3].checked==true){for (i=0; i<=3; i++) {

if (document.FrmGov.gov[i].checked==true)alert("Hai scelto la risposta n. " + parseInt(i+1));}

return true;}else {alert("Scegliere una delle possibili risposte");document.FrmGov.gov[0].focus();return false;}}


Scrivo poi il codice HTML della pagina web

<body><div align="center"><h1>Sondaggio on-line</h1><hr width="75%">Chi vincerà il campionato di calcio?<form method="post" name="FrmGov"><table><tr><td>1) Roma</td><td><input type="radio" name="gov"

value="0"></td></tr><tr><td>2) Juventus</td><td><input type="radio" name="gov"

value="1"></td></tr><tr><td>3) Milan</td><td><input type="radio" name="gov"

value="2"></td></tr><tr><td>4) Inter</td><td><input type="radio" name="gov"

value="3"></td></tr><tr><td colspan="2" align="right"><input type="image"

src="vota_sotto.gif" onclick="return VerificaVoto();"></td></tr></table></div><br><br><br></body>


L’oggetto TextAreaL’oggetto TextArea

L’oggetto Textarea è una casella di testo in cui posso scrivere su più righe a differenza della Input TextBox dove posso scrivere su una riga sola.

In HTML:

<textarea name="AreaRisultati" rows="10" cols="50" wrap="soft">Testo inserito</textarea>

in Javascript:

document.form1.AreaRisultati.value=“XXX”


L’oggetto CheckBoxL’oggetto CheckBox

Collezione di caselle di opzione NON mutuamente esclusive

EsercitazioneDati 10 checkbox chK1…chK10 scrivere una funzione che controlli se almeno uno è selezionato

In HTML:

<INPUT type="checkbox" name="chK1">

in Javascript:

if(document.form1.chK1.checked) controlla se la checkbox di nome chK1 è selezionata


Soluzione

function ErrChk(){

if (document.FrmGestioneDati.chK1.checked || document.FrmGestioneDati.chK2.checked ||document.FrmGestioneDati.chK3.checked ||document.FrmGestioneDati.chK4.checked ||document.FrmGestioneDati.chK5.checked ||document.FrmGestioneDati.chK6.checked ||document.FrmGestioneDati.chK7.checked ||document.FrmGestioneDati.chK8.checked ||document.FrmGestioneDati.chK9.checked ||

document.FrmGestioneDati.chK10.checked)

{return false;

}else{

alert("Selezionare almeno una checkbox");document.FrmGestioneDati.chK1.focus();return true;

}

}


Esercitazione

Dati 10 checkbox chK1…chK10 scrivere una funzione che controlli se ne sono

stati selezionati più di tre

Soluzione

function ErrorTreScelte()

{var cont=0;

with (document.FrmGestioneDati){for(var I=1;I<=10;I++){

if (eval("chK" + I + ".checked")) cont++;if (cont>3) {

alert("Non è possibile effettuare più di tre scelte");

chK1.focus();return true;}

}}

return false;}


Notare l’uso della funzione EVAL() che permette valutare un’espressione composta composta come un comando Javascript

Senza la funzione eval() l’espressione “chK” + I + “.checked” è una stringa e non un booleano quindi IF(….)

darebbe errore


Il controllo e la validazione dei dati in Il controllo e la validazione dei dati in un moduloun modulo

Esempio: Utilizziamo gli eventi di tastiera (onkeyUp) per realizzare un semplice modulo di controllo del carrello della spesa per un’applicazione di e-commerce

Si tratta di un modulo in cui posso scegliere dei prodotti da una lista. In conseguenza della scelta mi iene presentato il prezzo unitario del prodotto.

L’utente immette la quantità che vuole acquistare e viene automaticamente calcolato il prezzo totale.

Bisognerà controllare che non sia possibile da parte degli utenti effettuare manomissioni sui dati immessi e calcolati.


Scrivo il codice per il modulo di scelta della merce da acquistare:


<form name="FrmFruttarolo" method="post” action=“”>

<table border="1">

<tr align="center"><td>Seleziona il frutto che preferisci</td><td>Quantità</td><td>Prezzo per chilogrammo</td><td>Totale</td></tr>

<tr align="center"><td>

<select name="CmbFrutta" onChange="SelezionaArticolo();">

<option>------</option>

<option value="4000">Banane</option>

<option value="3000">Mele</option>

<option value="3500">Pere</option>

<option value="2800">Arance</option>

<option value="8000">Meloni</option>

<option value="1900">Cocomeri</option>

</select>

CONTINUA


</td>

<td align="center"><input type="text" name="TxtQta" size="15" onkeyup="return CalcolaTotali1(document.FrmFruttarolo.TxtPrzzo.value, document.FrmFruttarolo.TxtQta, document.FrmFruttarolo.TxtTot);"></td>

<td>

<input type="text" name="TxtPrzzo" size="15" onkeyup="MostraPrezzo();"></td>

<td><input type="text" name="TxtTot" size="15" onkeyup="CalcolaTotali2(document.FrmFruttarolo.TxtPrzzo.value, document.FrmFruttarolo.TxtQta, document.FrmFruttarolo.TxtTot);"></td></tr>

<tr>

</tr>

<tr align="center">

<td colspan="2"><input type="button" name="BtnSubmit" value="Acquista");"></td>

<td colspan="2"><input type="reset" name="BtnReset" value="Annulla"></td>

</tr>

<tr><td

</table>

</form>

Scrivo la funzione MostraPrezzo() che per ogni scelta di merce mostra il prezzo al Kg


<script language="javascript">

var scelta;

var prezzo;

function MostraPrezzo() {//mostra il prezzo al kg sull’evento change della select box

scelta=document.FrmFruttarolo.CmbFrutta.options[document.FrmFruttarolo.CmbFrutta.selectedIndex].text;

prezzo=document.FrmFruttarolo.CmbFrutta.options[document.FrmFruttarolo.CmbFrutta.selectedIndex].value;

document.FrmFruttarolo.TxtPrzzo.value=prezzo;

}

CONTINUA

Scrivo la funzione CalcolaTotali1() che calcola il prezzo totale come prodotto di Quantità x Prezzo Unitario


function CalcolaTotali1(prezzo,quantita, arrivo) {//calcola il prezzo totale=Qta*PrUni e viene chiamata //sull’evento onKeyUp del campo quantità previa verifica che la quantità è numerica

if(VerificaNumeri(quantita)){

var totale=(parseInt(prezzo) * parseInt(quantita.value));

arrivo.value=totale;

return true;

}

else {

alert("Immissione non valida");

quantita.value="";

return false;

}

}

CONTINUA

Scrivo la funzione CalcolaTotali2() che effettua il ri-calcolo del prezzo totale come prodotto di Quantità x Prezzo Unitario ogni qual volta si tenta di scrivere nel campo Prezzo Totale


function CalcolaTotali2(prezzo,quantita, arrivo) {//effettua il ricalcolo del totale sul keyup del campo totale per evitare manomissioni

var totale=(parseInt(prezzo) * parseInt(quantita.value));

arrivo.value=totale;

return true;

}

CONTINUA

Scrivo la funzione VerificaNumeri() che controlla che la quantità scritta dall’utente sia un valore numerico


function VerificaNumeri(elem) {

var str=elem.value;

if (str=="") {

//alert("Immissione non valida");

return false;

}

for (I=0; I<str.length; I++) {

if ((str.charAt(I)<'0') || (str.charAt(I)>'9')) {

return false;

}

}

return true;

}

CONTINUA

Scrivo la funzione SelezionaArticolo() che chiama la funzione MostraPrezzo() dopo aver azzerato il valore della Quantità e del Prezzo Totale. Questo per ripristinare le condizioni iniziali ogni volta che l’utente sceglie un nuovo articolo


function SelezionaArticolo() {

document.FrmFruttarolo.TxtQta.value="";

document.FrmFruttarolo.TxtTot.value="";

MostraPrezzo();

}

</script>

Gli ArrayGli ArrayUn Array è una collezione ordinata di coppie indice - valore intendendo dire che ogni elemento di una array è individuato dal valore e dalla posizione all’intewrno dell’array

Gli elementi di uno stesso array possono essere anche di tipo diverso e possono essere a loro volta array


Creazione di un arrayCreazione di un arrayvar A=new Array() crea un array vuoto senza elementi

E’ possibile anche assegnare i valori degli elementi di un array direttamente all’atto della creazionevar A=new Array(5,4,8,”Pippo”)

Un array è ordinato a partire dall’indice 0Quindi nell’espressione var A=new Array(5,4,8,”Pippo”)A[0]=5; A[1]=4; A[2]=8; A[3]=“Pippo”;

La proprietà length dell’array rappresenta la lunghezza ovvero il numero di elementi dell’array (intero a 32 bit senza segno)

Un altro modo per creare un nuovo array è quello di utilizzare un singolo argomento numerico che ne specifica la lunghezza

var A=new Array(10) crea un nuovo array con 10 elementi impostati al valore undefined


Lettura e scrittura degli elementi di un Lettura e scrittura degli elementi di un arrayarray

Per accedere agli elementi di un array si utilizza l’operatore [ ]

Es: value=A[0] ; A[1]=3.14 ; i=1 ; A[i+1]=“Ciao”;

Per aggiungere un nuovo elemento ad un array è sufficiente assegnargli un valore.La memoria di un array viene allocata dinamicamente, ovvero solo per gli indici valorizzati

Es: A[0] = 1000; A[1000] = “Pippo”


Es: mostrare il valore di tutti gli elementi di un array (FRUITS) che esistono

for(var i=0 i < FRUITS.length; i++) if(FRUITS[i]) alert(FRUITS[i])

Metodi per gli arrayMetodi per gli arrayMetodo join(): converte tutti gli elementi di un array in una stringa e li concatena

Es: var A =[1,2,3] ; str=A.join() --> str=“1,2,3”

Al contrario si comporta il metodo Split:var B=str.split(“,”) --> crea un nuovo array spezzettando una stringa secondo il delimitatore “,”

Metodo reverse(): inverte l’ordine degli elementi di un array

Es: a=new array(1,2,3) ; a.reverse(); str=a.join() --> str=“3,2,1”


Metodo sort(): ordina gli elementi di un array; la chiamata del metodo sort senza argomenti ordina secondo l’ordine alfabetico

Es: a = new Array(“mela”, “ciliegia”, “banana”)

a.sort() ; str=a.join() ; --> str=“banana” , “ciliegia”, “mela”

Metodi push() e pop() ; consentono di lavorare con gli array come se fossero stack

- Il metodo push() aggiunge uno o più nuovi elementi alla fine di un array e restituisce l’ultimo valore aggiunto

- Il metodo pop() elimina l’ultimo elemento dell’array e restituisce il valore eliminato

var stack=new Array()stack.push(1,2) --> stack : [1,2] ; restituisce 2stack.pop() --> stack : [1] ; restituisce 2


Applicazione degli Array - L’array Applicazione degli Array - L’array ImagesImagesLa matrice images (è un array)contiene un elemento per ogni immagine definita all’interno del documento. Gli elementi sono indicizzati a partire da 0 secondo l’ordine di come vengono visualizzati nella pagina.

Ciascun oggetto image ha le seguenti proprietà:


- border: rappresenta l’attributo border della tag <IMG> e serve per stabilire se è stato disegnato un bordo intorno ad un’immagine collegata;

- height e width: rappresentano i corrispondenti attributi dell’immagine (altezza e larghezza);

- name: è il nome dell’immagine. Si può definirlo attraverso l’attributo name che si trova nella definizione dell’immagine;

- src_ è l’origine dell’immagine, ovvero l’URL. Questo valore può essere modificato per cambiare le immagini in maniera dinamica.

Esempio:Scrivere una pagina HTML che contenga due immagini e un pulsante. Cliccando sul pulsante si invertono i sorgenti delle immagini

Prima scrivo la funzione da richiamare e che permette lo scambio delle immagini


function Cambia(){src_primo = document.images[0].src;height_primo = document.images[0].height;width_primo = document.images[0].width;src_secondo = document.images[1].src;height_secondo = document.images[1].height;width_secondo = document.images[1].width;document.images[0].src = src_secondo;document.images[0].height = height_secondo;document.images[0].width = width_secondo;document.images[1].src = src_primo;document.images[1].height = height_primo;document.images[1].width = width_primo;}

poi la parte HTML dove la funzione viene richiamata


<body><p><img src=”01.jpg" width="500" height="250" alt=" 01.jpg "></p><p><img src=" 02.jpg " width="400" height="200" alt=" 02.jpg "></p><form><center><p><input type="button" value=”Cambia" name="primo"onClick="Cambia()"></p></center></form></body>

Altre nozioni di sintassi Javascript: il Altre nozioni di sintassi Javascript: il ciclo For … Inciclo For … In

Il ciclo for … in può eseguire operazioni iterative su ogni proprietà di un oggetto:

Sintassi:


for ( variabile in Oggetto)

istruzione

Esempio:

for (i in mioarray) {mioarray[i]++;}

- l’esempio somma 1 ad ogni elemento della matrice mioarray; ovviamente questo tipo di istruzione non si utilizza solo con gli array, bensì se ne coglie l’utilità nel caso di controlli e modifiche sulle proprietà di un qualsiasi oggetto.

P. Es il ciclo for..in seguente mostra il nome ed il valore di ciascuna proprietà di un oggetto

Applicazione: l’oggetto Navigator

La proprietà window.navigator si riferisce ad un oggetto navigator che contiene informazioni relative al browser attualmente in uso (supportata sia da Netscape che da IE)


for (myprop in myobject)

{

document.write(“nome= “ + myprop + “; valore= “ + myobject[myprop]+ “<br>”)

}

Proprietà dell’oggetto navigatorProprietà dell’oggetto navigator

Per listare tutte le proprietà utilizziamo il seguente codice:


- appName il nome del browser web

-appVersion numero di versione e/o altre informazioni di versione del browser

-appCodeName nome in codice del browser (es: Mozilla)

Var browser=“Informazioni sul browser:\n”;

For (var myprob in navigator) {

browser+=myprop + “: - “ + navigator[myprop]+ “\n”

}

alert (browser);

Esempio: determiniamo a partire dall’oggetto navigator un nuovo oggetto browser con il quale estraiamo la versione del browser ed il tipo


Var browser=new(object); //creo il nuovo oggetto browser

//estraggo la versione del browser

Browser.version=parseInt(navigator.appVersion)

//Netrscape o IE=?

Browser.isNavigator=false

Browser.isIE=false

If(navigator.AppName.indexOf(“Netscape”) !=-1)

Browser.isNavigator=true;

Else If(navigator.AppName.indexOf(“Microsoft”) !=-1)

Browser.isIE=true;

La programmazione ad oggetti in La programmazione ad oggetti in javascript - Creazione degli oggettijavascript - Creazione degli oggetti

Un oggetto viene creato attaverso l’operatore new

Tale oggetto deve essere seguito dal nome del costruttore che serve ad inizializzare l’oggetto ed a conferirgli le caratteristiche principali

Abbiamo visto che è possibile creare un nuovo oggetto “vuoto” (senza proprietà) con la sintassi:

var o =new Object();

Successivamente a quest’oggetto si possono assegnare le proprietà dinamicamente come vedremo nella prossima slide


Esempio: determiniamo a partire dall’oggetto navigator un nuovo oggetto browser con il quale estraiamo la versione del browser ed il tipo


Var browser=new(object); //creo il nuovo oggetto browser

//estraggo la versione del browser

Browser.version=parseInt(navigator.appVersion)

//Netrscape o IE=?

Browser.isNavigator=false

Browser.isIE=false

If(navigator.AppName.indexOf(“Netscape”) !=-1)

Browser.isNavigator=true;

Else If(navigator.AppName.indexOf(“Microsoft”) !=-1)

Browser.isIE=true;

In seguito vedremo che è possibile creare oggetti con costruttori creati ex novo.

Ancora: semplicemente è possibile definire degli oggetti semplici (senza simulare il meccanismo dell’ereditarietà) tramite i “letterali oggetto”, un elenco di proprietà e di valori separato da virgole


var cerchio= { x:0; y:0, raggio:2 }

Oppure:

var pippo= { nome:”Pippo”, età: 27, coniugato:true,

occupazione:”ingegnere”, email:”[email protected]”}

Accesso alle proprietà degli oggetti: Accesso alle proprietà degli oggetti: tramite l’operatore “.”tramite l’operatore “.”

Nell’esempio precedente:

pippo.età=27; pippo.email=”[email protected]”

Ancora: è possibile definire dinamicamente nuovi oggetti in maniera gerarchica a partire da oggetti esistenti come proprietà degli oggetti genitori

Le proprietà sono tutte di lettura/scrittura


var book=new Object();

Book.titolo=“Introduzione al javascript”

Book.capitolo1=new object();

Book.capitolo1.titolo=“Introduzione”

Book.capitolo1.pagine=50;

E’ possibile eliminare definitivamente una proprietà di un oggetto con l’operatore Delete()

Delete book.capitolo1

In alternativa

book.capitolo1=null non distrugge la proprietà ma la setta al valore undefined


I costruttoriI costruttoriLe definizione degli oggetti appena date sono semplici ed in queste non è possibile scoprire alcunchè di programmazione ad oggetti

Non c’è per es. il concetto di classe

Per creare una classe associabile ad un nuovo oggetto è necessario specificarne il “costruttore” che ne inizializza le principali proprietà e consente di specificarne i metodi

Un costruttore è una funzione del tipo:


function Rettangolo(x,y) {

this.larghezza=x;

this.altezza=y; }

Poi in seguito:

var rect1=new Rettangolo(1,2) //creo un nuovo oggetto rect1 a partire //dal costruttore

I MetodiI MetodiUn metodo è una funzione javascript che viene richiamata tramite un oggetto

Es:


function area() { return this.width* this.height }

var r=new Rettangolo(4, 5.6)

r.sup=area;

I Prototype e la simulazione I Prototype e la simulazione dell’ereditarietàdell’ereditarietàEsiste un metodo di creazione delle classi che ottimizza di più la memoria in quanto per ogni oggetto creato come nuova istanza della classe le proprietà non debbono essere di nuovo create ma vengono “ereditate” dalla classe stessa.

Ciò viene fatto tramite “prototipi” (Prototype) definiti all’interno della classe stessa. Ogni oggetto quindi può avere un prototipo da cui eredita le proprietà.

Costruiamo una classe attraverso il meccanismo dei prototype

Es: la classe Cerchio


function Cerchio(raggio) // Cerchio è il costruttore

{

This.r=raggio; //definisco la proprietà r

}

Cerchio.prototype.pigreco=3.14159 //definisco la variabile d’istanza pigreco tramite il suo prototipo;

La proprietà pigreco verrà ereditata da tutte le istanze della classe Cerchio

Poi definisco un metodo per il calcolo dell’area

Poi definisco un metodo per il calcolo della Circonferenza


function Cerchio_area() {

Return Cerchio.prototype.pigreco * this.r * this.r;}

Cerchio.prototype.area=Cerchio_area;//area è un metodo d'istanza; il metodo area() verrà ereditato da tutte le istanze della classe Cerchio

function Cerchio_circonferenza() {return this.pigreco * this.r * 2 };Cerchio.prototype.circonferenza=Cerchio_circonferenza;

//circonferenza è un metodo d'istanza; il metodo circonferenza() verrà ereditato da tutte le istanze della classe Cerchio

A questo punto creo un nuovo oggetto c1 di classe Cerchio e ne calcolo l’area

Poi ne calcolo la circonferenza


var c1=new Cerchio(3); //cerchio di raggio 3

var Sup=c1.area();

alert("Area= " + Sup);

// c1 eredita direttamente il metodo area() dal prototipo

var circ=c1.circonferenza();alert("Circonferenza= " + circ);

// c1 eredita direttamente il metodo circonferenza() dal prototipo

Definisco poi un nuovo metodo Cerchio_max che attibuisco però direttamente alla classe, quindi non viene direttamente ereditato

A questo punto creo un nuovo oggetto c2 di classe Cerchio e applico il metodo Cerchio_max per determinare il maggiore tra c1 e c2


function Cerchio_max(a,b) //Metodo di classe{if( a.r > b.r )

return a;return b;}

var c2=new Cerchio(4);var bigger=Cerchio_max(c1,c2)

alert(bigger.r);

il linguaggio javascript scuola superiore g. reiss romoli

Documents