JavaScript Laboratorio di Applicazioni Informatiche II mod. A.

JavaScript

Laboratorio di Applicazioni Informatiche II mod. A

Laboratorio di Applicazioni Informatiche II mod. A Javascript

Introduzione

JavaScript è un linguaggio di scripting, ossia un linguaggio dalle funzionalità ridotte rispetto a un vero e proprio linguaggio di programmazione.

Laboratorio di Applicazioni Informatiche II mod. A Javascript - Introduzione

JavaScript può essere utilizzato per controllare quasi tutte le componenti del browser e per rispondere a varie azioni dell'utente, quali l'immissione nei moduli e la navigazione nella pagina.

È particolarmente utile perché tutti i compiti di elaborazione sono scritti nello script (incorporato nel documento HTML), e quindi l'intero processo definito dallo script è eseguito sul lato del client, senza la necessità di fare riferimento a un server.

In altri termini, invece di fare eseguire al server dei compiti e fornire i risultati al browser, quest’ultimo può gestire localmente alcuni compiti, dando così all’utente tempi di risposta più brevi e riducendo il traffico di rete.

Si può utilizzare JavaScript anche per controllare direttamente oggetti quali la barra di stato del browser, i frame e perfino la finestra di visualizzazione.

Infine JavaScript offre l'interattività tra plug-in e applet Java. Si può scrivere uno script di JavaScript, ad es., per verificare che dei dati numerici siano stati inserti in un modulo che richiede un numero di telefono.

Senza alcuna trasmissione in rete, uno script di questo tipo può interpretare il testo immesso e avvertire l'utente con una finestra di messaggio appropriata.


Quando un documento HTML con uno script di JavaScript è caricato in un browser che supporta questo linguaggio, le funzioni dello script vengono calcolate, memorizzate, ed eseguite quando si verificano determinati eventi (a es. quando l'utente sposta il mouse sopra un oggetto o immette un testo in una casella).


JavaScript non va confuso con Java, dato che tra i due linguaggi esistono importanti differenze:

JavaScript Java

è un linguaggio interpretato

è un linguaggio compilato

viene eseguito sul client viene eseguito sul server

non consente di scrivere programmi autonomi

consente di scrivere programmi autonomi

JavaScript si compone di elementi di programmazione quali:

•oggetti,•proprietà,•metodi,•gestori di eventi.

La sintassi di JavaScript ha due elementi fondamentali:

•espressione (o istruzione): combinazione di operatori, variariabili, letterali e parole chiave di cui si può calcolare il valore.

• funzione: gruppo di enunciati provvisto di un nome, che si può usare più volte semplicemente chiamandone il nome.


Oggetti

JavaScript fornisce un facile accesso a componenti prefabbricate di una pagina Web, dette oggetti, che possono essere:

• creati con HTML (pulsanti, link, moduli, menu, immagini, testo);

• intrinseci di JavaScript (window, document, Date, function, …);

• definiti automaticamente dal browser (particolari della configurazione).

Gli oggetti di JavaScript hanno una struttura gerarchica al cui vertice si trova l’oggetto window, come indica lo schema seguente:


Proprietà

A ciascun oggetto sono associate proprietà descrittive, che sono attributi che aiutano a differenziare un oggetto dall’altro.

Esempi:


Metodi

A ogni oggetto sono associati particolari comportamenti o metodi.

Esempi:

• il metodo blink() associato a un testo ne produce la visualizzazione lampeggiante.

•dato che un pulsante può solamente essere premuto, all’oggetto button è associato il solo metodo click().

I metodi hanno un nome seguito da una coppia di (), in quanto esigono (spesso, ma non sempre) dei parametri.



Gestori di eventi

Javascript consente di fornire un elevato livello di interattività alle pagine Web e di accedere a eventi quali:

•click del mouse su un pulsante; •avvio di programmi;•caricamento di una pagina Web in un browser;•uscita del mouse da una finestra.

A questi e altri eventi, automatici o provocati dall’utente, possono essere associati speciali metodi intrinseci, chiamati gestori di eventi, che avviano determinate azioni al verificarsi dell’evento.

Ecco il loro elenco.

Per aggiungere del codice JavaScript a un documento HTML, esso va inserito tra i tag

<script Language=“JavaScript”>e

</script>

tanto nella sezione head quanto nella sezione body.

<html> <head> <script Language="JavaScript"> //riga di commento </script> </head> <body <a href=“#" onclick="alert('ciao')"> Clicca sulla scritta </body></html>


I due tag non sono necessari se si inseriscono espressioni JavaScript all’interno di tag HTML.

Esempio:

Commenti

Nel listato precedente abbiamo visto un commento di JavaScript.

I commenti possono essere di due tipi, come indicato nei due esempi seguenti:

1. // commento di una sola riga che inizia con due barre inclinate

2. /* commento che può occupare più righe, inizia con una barra seguita da un asterisco e termina con un asterisco seguito da una barra */.

In JavaScript non si possono usare i simboli dei commenti di HTML ( per terminare un commento) e, analogamente,

in HTML non si possono usare i simboli dei commenti di JvaScript (// , /* , */)

Parole chiave

In JavaScript, come in tutti i linguaggi di programmazione, vi sono parole riservate (o parole chiave) che hanno un significato particolare.

La maggior parte delle parole riservate è utilizzata nelle dichiarazioni di programma o nella definizione di dati.

Una parola riservata non deve essere utilizzata come variabile, funzione, metodo o nome di oggetto. Le parole riservate sono elencate in Tabella.

Alcune di esse hanno un significato particolare, altre sono riservate per un utilizzo futuro e altre ancora non devono essere utilizzate, in modo da rendere il codice compatibile con Java.


abstract else instanceof super

boolean enum int switchbreak export interface synchronized

byte extends label thiscase false long throwcatch final native throwschar finally new transientclass float null trueconst for package trycontinue function private typeofdebugger goto protected var

default if public voiddelete implements return volatile

do import short whiledouble in static with


<html> <head> <script language=”Javascript”> </script> </head> <body> <h1>Esempio del gestore di eventi onmouseover</h1> <a href="#" onmouseover="alert('OK, ci sei passato')"> JavaScript è eseguito se passi sopra questo link... </a> </body></html>

OnMouse.html

Le parole chiave vengono poi combinate con le funzioni, le variabili e gli operatori per creare le espressioni, o istruzioni significative, che vengono passate all’interprete JavaScript per l’esecuzione.

Un esempio di utilizzo di JavaScript è costituito dal seguente file:


Nel listato precedente si trova il seguente codice JavaScript:

onmouseover="alert('OK, ci sei passato')“

nel quale il gestore di eventi

onmouseover

fa eseguire il metodo

alert()

con valore

OK, ci sei passato

quando il puntatore si avvicina al link.


Il metodo alert() è associato all’oggetto window, e permette di creare un tipo speciale di finestra a comparsa (finestra di avvertimento) che visualizza alcune informazioni. Esse costituiscono il parametro passato al metodo alert().

<html> <head> </head> <body> <a href="tabella.html" onclick="alert('ciao')"> Link alle gare </a> </body></html>

AlertCiao.html


(che richiede, ovviamente, la presenza del file tabella.html).

In esso l’evento che fa eseguire il metodo alert(), il quale visualizza una finestra con la scritta ciao, è la pressione del pulsante OK che compare nella finestra.

Un altro esempio, che usa sempre il metodo alert(), ma il gestore di eventi onClick è costituito dal seguente file:

Funzioni

JavaScript consente di scrivere delle righe di script che possono essere usate più volte in una forma abbreviata, assegnandole come valore a una funzione.

Una funzione è definita dalla parola chiave function, dal nome che le si vuole assegnare, da una coppia di parentesi () e da una di parentesi {}.

La funzione seguente visualizza un messaggio utilizzando il metodo alert():

Laboratorio di Applicazioni Informatiche II mod. A Javascript - Funzioni

function Saluti(){ alert(“Ciao, questo è un saluto.”) }

Essa può essere usata nel seguente listato, che produce la stessa uscita del precedente:

<html> <head> <script language="Javascript"> function Saluti() { alert("Ciao, questo è un saluto.") } </script> </head> <body> <a href="tabella.html" onClick="Saluti()"> Link alle gare </a> </body></html>



Un’altra azione che può essere determinata dalla pressione di un pulsante (quindi dal gestore di eventi onclick()) è il cambiamento di colore dello schermo.

Essa è realizzata dal seguente listato, che usa una funzione definita dall’utente:

<html> <head><title>Esempio colori</title></head> <body Bgcolor="white"> <script language="JavaScript"> function sfondo(colore) {document.bgColor = colore;} </script> <center><h3>Modifica dei colori dello sfondo</h3></center><br> <font color="Firebrick">Questa pagina dimostra come si possano modificare i colori dello sfondo utilizzando la funzione JavaScript "bgColor", all'interno di una funzione definita dall'utente chiamata sfondo().La funzione viene richiamata dai pulsanti di input che trasferiscono il colore alla funzione. Quando l'utente clicca sul pulsante con il nome del colore, il colore dello sfondo viene impostato su quel colore. Provate!<br><center><hr width=“60%"> <form name=“ColoreSfondo”> <input type="button" value="Rosso" onclick="sfondo('red')"> <input type="button" value=" Blu " onclick="sfondo('blue')"> <input type="button" value="Arancio"onclick="sfondo('orange')"> <input type="button" value="Verde" onClick="sfondo('green')"> <input type="button" value="Nero" onClick="sfondo('black')"> <input type="button" value="Grigio" onClick="sfondo('gray')"> <input type="button" value="Giallo" onClick="sfondo('yellow')"> <input type="button" value="bianco" onClick="sfondo('white')"> </center></form> </body></html> Java3Colori.html


Apertura di finestre secondarie Una delle caratteristiche più usate di JavaScript è la possibilità

di aprire una finestra secondaria, indipendente da quella principale del browser.

Ciò è utile - nel caso in cui la finestra principale contenga dei link esterni - per evitare che l’utente, cliccandovi sopra, esca dal sito.

Il contenuto di una finestra secondaria può essere definito in due modi:

- da un file HTML esterno

- direttamente all'interno della pagina principale del browser.

Ecco un esempio della prima tecnica, che usa il metodo open() associato all’oggetto window per richiamare il file FineSeco.html:

Laboratorio di Applicazioni Informatiche II mod. A Javascript - Finestre

<html> <head> <title>Nuovafinestra</title> </head> <body> <form> <input type="button" value="Nuova finestra“ onClick='window.open(“FineSeco.html");'> </form> </body></html>

ApriFinestra1.html


Nel prossimo esempio, invece, il contenuto della finestra secondaria è definito direttamente all’interno della pagina principale che la richiama, tramite un’apposita funzione.

Nell’esempio saranno utilizzati alcuni degli argomenti supportati da JavaScript per definire le caratteristiche di una finestra:


<html> <head> <title>Finestra indipendente</title> <script language="JavaScript"> function NuovaFinestra() { win2=window.open("FineSeco.html","NewWindow", "toolbar=no,directories=no,menubar=no,scrollbars=no, width=400,height=300"); } </script> </head> <body> <form> <input type="button" value="Nuova finestra“ onclick='NuovaFinestra();'> </form> </body></html> ApriFinestra2.html



Osserviamo che:

• richiamare il contenuto di una finestra direttamente dalla pagina principale del browser ha il vantaggio di alleggerire il traffico sul server, visto che comunque il browser non deve richiamare un nuovo documento HTML, ma interpretare quello posto all'interno dello script.

• richiamare il contenuto di una finestra da un file HTML esterno, è consigliabile quando tale contenuto non si limiti a semplice testo, ma contenga immagini, suoni e una struttura complessa.Naturalmente la finestra secondaria che si apre può contenere anche link ad altri documenti, come quella del listato seguente :

<html> <head> <script language="JavaScript"> function NuovaFinestra() { msg=open("","schermo","toolbar=no,directories=no,menubar=no, width=370,height=250,resizable=yes"); msg.document.write("<head><title>html.it</title></head><body>"); msg.document.write("<b><center><font size=6> Finestra secondaria con vari link</font></center></b><br>"); msg.document.write("<a href=FineSeco.html target=home> Javascript (Link interno)</a><br>"); msg.document.write("<a href=sfondi.htm target=home>Sfondi</a><br>"); msg.document.write("<a href=gif.htm target=home>Gif animate</a><br>"); msg.document.write("<a href=guida.htm target=home>Guida HTML</a><br>"); msg.document.write("<a href=contr.htm target=home>Controllo qualità </a><br>"); } </script> </head> <body><h3> Esempio di pagina HTML che apre una finestra secondaria con JavaScript </h3><form> <input type="button" value="Apri la finestra" onclick="NuovaFinestra()"> </form> <p><br><hr> </body></html> ApriFinestra3.html


Una volta aperta una finestra indipendente dal browser può essere utile, ai fini di una maggiore funzionalità delle pagine, creare un pulsante per chiuderla.

In questo caso si può aprire la finestra nel solito modo:

<html> <head><title>Nuovafinestra</title></head> <body> <form> <input type="button" value="Nuova finestra“ onClick='window.open("FineSeco1.html");'> </form> </body></html>


e inserire nel codice di quella secondaria un tag del tipo:

<input type="button" value="Chiudi" onclick="window.close()">

FinestraChiudi.html

Esso usa il metodo, close(), simile al già visto open(), con la differenza che procura l'effetto inverso di chiudere la finestra.

La tabella seguente mostra i metodi caratteristici di due oggetti molto utilizzati in JavaScript: window (finestra) e frame (riquadro).



Naturalmente, se le finestre da aprire sono più di una, si possono definire più funzioni NuovaFinestra, assegnando a ciascuna di esse un numero diverso:

NuovaFinestra1() NuovaFinestra2() ...

Operazioni con le date

JavaScript dispone dell’oggetto incorporato (o intrinseco) Date() per catturare e manipolare informazioni su data e ora. Il listato seguente: <html> <head></head> <body> <script language="JavaScript"> var today = new Date() document.write("La variabile today, ottenuta con l'istruzione 'var today = new Date()', ha il valore:”) document.write(“<br>”+today) </script> </body></html> Data1.html

visualizza la data e l’ora corrente, producendo l’uscita:

Laboratorio di Applicazioni Informatiche II mod. A Javascript - Date

Nella istruzione:

var today = new Date()

la parola chiave new crea una nuova istanza dell’oggetto Date() e la assegna alla variabile today.

Se si vuole che la data sia visualizzata nel formato italiano, si può applicare il metodo toLocaleString() alla variabile today, creando la nuova variabile oggi:

var oggi = today.toLocaleString()

Il valore di oggi si potrà poi visualizzare al solito modo:


Se si aggiungono le ultime due istruzioni alla fine dello script precedente, si ottiene la seguente videata:

Data2.html

document.write("La variabile oggi, ottenuta con l'istruzione 'var oggi = today.tolocaleString()', ha il valore:“+"<br>"+oggi)


Se si vuole che non venga visualizzata anche l’ora corrente (21.42.18, nell’esempio precedente), si può applicare alla variabile oggi il metodo substring().

Esso estrae da una variabile una sottostringa, ossia un gruppo di caratteri, che inizia da uno qualsiasi (nel prossimo esempio dal primo, di numero 0) ed è lunga un numero specificato di caratteri (diciamo 25).

Tale sottostringa viene assegnata alla nuova variabile oggidata con l’istruzione:

var oggidata = oggi.substring(0,25)

<html> <head></head> <body> <script language="JavaScript"> var today = new Date() var oggi = today.toLocaleString() var oggidata = oggi.substring(0,25) document.write("<h2><center>Benvenuto, oggi è “ +oggidata+“</center></h2>") document.write("<br><h4><center>Questo documento è stato modificato "+document.lastModified+"</center></h4>") </script> </body></html> Data3.html

L’oggetto document possiede, oltre a write(), numerosi altri metodi e proprietà, tra i quali il metodo lastModified(), che fornisce la data in cui il documento è stato modificato per l’ultima volta.

Riassumiamo quanto finora detto sulla data con il seguente listato:


Se vogliamo estrarre dalla data l’ora, possiamo utilizzare i seguenti metodi dell’oggetto Date():

getTime() getMonth() getHours()getMinutes() getSeconds()

scrivendo, ad es., un file di questo tipo:



<html> <head></head> <body> <script language="JavaScript"> var oggi = new Date() var ore = oggi.getHours() var min = oggi.getMinutes() var sec = oggi.getSeconds() document.write("Sono le ore: "+ore+":"+min+":"+sec) </script> </body></html>

DataOra.html

Cambiamento di URL

Può succedere che un sito Web debba cambiare il proprio URL. In tal caso è opportuno che chi digita il vecchio URL sia avvertito del nuovo o, meglio ancora, vi si possa trasferire automaticamente.

JavaScript consente tale trasferimento, non solo a seguito di un click dell’utente, ma anche in modo automatico, come indica il prossimo listato. Esso utilizza:

•l’oggetto location, che viene creato automaticamente dal browser, che vi inserisce l’URL del documento corrente. Il contenuto può però essere sostituito da un altro.

• il metodo setTimeout(), il quale prevede due variabili: il codice che si vuole eseguire (in questo caso una funzione) e il numero di millisecondi che l’interprete JavaScript deve attendere prima di eseguirlo.

Il listato presenta anche una tecnica diffusa per scrivere sullo schermo testi che si estendano su più righe. CambiaURL.html

Laboratorio di Applicazioni Informatiche II mod. A Javascript - URL

<html> <head> <title>Fun with Phonics</title> <script language=“JavaScript"> function cambiaSito() { alert("Stai per essere trasferito sul nuovo sito JS-Tutor") location = "JSTutor.html" } </script> </head> <body> <center><img src="fun.jpg" hspace=55 vspace=5 height=64 width=129> <hr width="75%"> </center> <script language=“JavaScript"> var intro1 = "Ciao, grazie per aver visitato il nostro sito Web, ma ci siamo trasferiti. " var intro2 = "Per favore, prendi nota del nostro nuovo URL (www.funphonics.com). " var intro3 = "Clicca<a href='JSTutor.html'> qui </a> oppure aspetta 10 secondi per essere " var intro4 = "trasferito automaticamente al nostro nuovo sito." var introMsg = intro1+"<br>"+intro2+"<br>"+intro3+"<br>"+intro4 document.write("<h4><font color='firebrick'>"+introMsg+"</font></h4>") setTimeout(“cambiaSito()",20000) </script> </body></html>

Laboratorio di Applicazioni Informatiche II mod. A Javascript - URL


Il listato che segue visualizza un messaggio che scorre in una finestra.

Le istruzioni che realizzano il messaggio scorrevole sono contenute in una funzione definita dall’utente, che viene richiamata automaticamente, al caricamento della pagina, dal gestore di evento onLoad.

<html> <head> <script language="JavaScript"> var UTV=" Università di Tor Vergata " var SpazioMes="--- ---" var PosInizio = 0 function scorreMes() { document.ModuloMessaggio.scorreMes.value=UTV.substring (PosInizio,UTV.length)+SpazioMes+UTV.substring(0,PosInizio) PosInizio = PosInizio + 1 if (PosInizio > UTV.length) { PosInizio = 0 } window.setTimeout("scorreMes()",300) } </script></head> <body onload="scorreMes()"> <form name="ModuloMessaggio"> <input type="text" name="scorreMes" size=23"> </form> </body></html> FineScorre.html


JavaScript Laboratorio di Applicazioni Informatiche II mod. A.

Documents

Transcript of JavaScript Laboratorio di Applicazioni Informatiche II mod. A.