JavaScript Laboratorio di Applicazioni Informatiche II mod. A.

Presentazione sul tema: "JavaScript Laboratorio di Applicazioni Informatiche II mod. A."— Transcript della presentazione:

1 JavaScript Laboratorio di Applicazioni Informatiche II mod. A

2 Laboratorio di Applicazioni Informatiche II mod. A Javascript

3

4 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, questultimo può gestire localmente alcuni compiti, dando così allutente tempi di risposta più brevi e riducendo il traffico di rete.

5 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. Laboratorio di Applicazioni Informatiche II mod. A Javascript - Introduzione 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).

6 Laboratorio di Applicazioni Informatiche II mod. A Javascript - Introduzione JavaScript non va confuso con Java, dato che tra i due linguaggi esistono importanti differenze: JavaScriptJava è un linguaggio interpretatoè un linguaggio compilato viene eseguito sul clientviene eseguito sul server non consente di scrivere programmi autonomi consente di scrivere programmi autonomi

7 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. Laboratorio di Applicazioni Informatiche II mod. A Javascript - Introduzione

8 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 loggetto window, come indica lo schema seguente: Laboratorio di Applicazioni Informatiche II mod. A Javascript - Introduzione

9 Proprietà A ciascun oggetto sono associate proprietà descrittive, che sono attributi che aiutano a differenziare un oggetto dallaltro. Esempi: Laboratorio di Applicazioni Informatiche II mod. A Javascript - Introduzione

10 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, alloggetto 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. Laboratorio di Applicazioni Informatiche II mod. A Javascript - Introduzione

11 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 dallutente, possono essere associati speciali metodi intrinseci, chiamati gestori di eventi, che avviano determinate azioni al verificarsi dellevento. Ecco il loro elenco.

12

13 Per aggiungere del codice JavaScript a un documento HTML, esso va inserito tra i tag e tanto nella sezione head quanto nella sezione body. //riga di commento <body Clicca sulla scritta Laboratorio di Applicazioni Informatiche II mod. A Javascript - Introduzione I due tag non sono necessari se si inseriscono espressioni JavaScript allinterno di tag HTML. Esempio:

14 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 ( //, /*, */ ) Laboratorio di Applicazioni Informatiche II mod. A Javascript

15 <!--Inizia a nascondere il contenuto dello script per i vecchi browser. codice JavaScript Fine della parte nascosta.--> Tuttavia, se si vuole che un browser che non supporta JavaScript non visualizzi il testo dello script, occorre racchiudere lo script tra i marcatori di commento di HTML. Esempio: Laboratorio di Applicazioni Informatiche II mod. A Javascript

16 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. Laboratorio di Applicazioni Informatiche II mod. A Javascript

17 abstractelseinstanceofsuper booleanenumintswitch breakexportinterfacesynchronized byteextendslabelthis casefalselongthrow catchfinalnativethrows charfinallynewtransient classfloatnulltrue constforpackagetry continuefunctionprivatetypeof debuggergotoprotectedvar defaultifpublicvoid deleteimplementsreturnvolatile doimportshortwhile doubleinstaticwith Laboratorio di Applicazioni Informatiche II mod. A Javascript

18 Esempio del gestore di eventi onmouseover JavaScript è eseguito se passi sopra questo link... 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 allinterprete JavaScript per lesecuzione. Un esempio di utilizzo di JavaScript è costituito dal seguente file: Laboratorio di Applicazioni Informatiche II mod. A Javascript

19 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. Laboratorio di Applicazioni Informatiche II mod. A Javascript Il metodo alert() è associato alloggetto 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().

20 Link alle gare AlertCiao.html Laboratorio di Applicazioni Informatiche II mod. A Javascript (che richiede, ovviamente, la presenza del file tabella.html ). In esso levento 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:

21 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.) }

22 Essa può essere usata nel seguente listato, che produce la stessa uscita del precedente: function Saluti() { alert("Ciao, questo è un saluto.") } Link alle gare Laboratorio di Applicazioni Informatiche II mod. A Javascript - Funzioni

23 Unaltra 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 dallutente:

24 Esempio colori function sfondo(colore) {document.bgColor = colore;} Modifica dei colori dello sfondo 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! Java3Colori.html Laboratorio di Applicazioni Informatiche II mod. A Javascript

25 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 lutente, 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 alloggetto window per richiamare il file FineSeco.html : Laboratorio di Applicazioni Informatiche II mod. A Javascript - Finestre

26 Nuovafinestra <input type="button" value="Nuova finestra onClick='window.open(FineSeco.html");'> ApriFinestra1.html Laboratorio di Applicazioni Informatiche II mod. A Javascript - Finestre

27 Nel prossimo esempio, invece, il contenuto della finestra secondaria è definito direttamente allinterno della pagina principale che la richiama, tramite unapposita funzione. Nellesempio saranno utilizzati alcuni degli argomenti supportati da JavaScript per definire le caratteristiche di una finestra: Laboratorio di Applicazioni Informatiche II mod. A Javascript - Finestre

28 Finestra indipendente function NuovaFinestra() { win2=window.open("FineSeco.html","NewWindow", "toolbar=no,directories=no,menubar=no,scrollbars=no, width=400,height=300"); } <input type="button" value="Nuova finestra onclick='NuovaFinestra();'> ApriFinestra2.html Laboratorio di Applicazioni Informatiche II mod. A Javascript - Finestre

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

30 function NuovaFinestra() { msg=open("","schermo","toolbar=no,directories=no,menubar=no, width=370,height=250,resizable=yes"); msg.document.write(" html.it "); msg.document.write(" Finestra secondaria con vari link "); msg.document.write(" Javascript (Link interno) "); msg.document.write(" Sfondi "); msg.document.write(" Gif animate "); msg.document.write(" Guida HTML "); msg.document.write(" Controllo qualità "); } Esempio di pagina HTML che apre una finestra secondaria con JavaScript ApriFinestra3.html Laboratorio di Applicazioni Informatiche II mod. A Javascript - Finestre

31 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: Nuovafinestra <input type="button" value="Nuova finestra onClick='window.open("FineSeco1.html");'> Laboratorio di Applicazioni Informatiche II mod. A Javascript - Finestre e inserire nel codice di quella secondaria un tag del tipo:

32 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). Laboratorio di Applicazioni Informatiche II mod. A Javascript - Finestre

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

34 Operazioni con le date JavaScript dispone delloggetto incorporato (o intrinseco) Date() per catturare e manipolare informazioni su data e ora. Il listato seguente: var today = new Date() document.write("La variabile today, ottenuta con l'istruzione 'var today = new Date()', ha il valore:) document.write( +today) Data1.html visualizza la data e lora corrente, producendo luscita: Laboratorio di Applicazioni Informatiche II mod. A Javascript - Date

35 Nella istruzione: var today = new Date() la parola chiave new crea una nuova istanza delloggetto 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: Laboratorio di Applicazioni Informatiche II mod. A Javascript - Date 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:+" "+oggi)

36 Laboratorio di Applicazioni Informatiche II mod. A Javascript - Date Se si vuole che non venga visualizzata anche lora corrente ( 21.42.18, nellesempio 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 listruzione: var oggidata = oggi.substring(0,25)

37 var today = new Date() var oggi = today.toLocaleString() var oggidata = oggi.substring(0,25) document.write(" Benvenuto, oggi è +oggidata+ ") document.write(" Questo documento è stato modificato "+document.lastModified+" ") Data3.html Loggetto 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 lultima volta. Riassumiamo quanto finora detto sulla data con il seguente listato: Laboratorio di Applicazioni Informatiche II mod. A Javascript - Date

38 Se vogliamo estrarre dalla data lora, possiamo utilizzare i seguenti metodi delloggetto Date() : getTime() getMonth() getHours() getMinutes() getSeconds() scrivendo, ad es., un file di questo tipo: Laboratorio di Applicazioni Informatiche II mod. A Javascript - Date

39 var oggi = new Date() var ore = oggi.getHours() var min = oggi.getMinutes() var sec = oggi.getSeconds() document.write("Sono le ore: "+ore+":"+min+":"+sec) DataOra.html

40 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 dellutente, ma anche in modo automatico, come indica il prossimo listato. Esso utilizza: loggetto location, che viene creato automaticamente dal browser, che vi inserisce lURL 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 linterprete 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.htmlCambiaURL.html Laboratorio di Applicazioni Informatiche II mod. A Javascript - URL

41 Fun with Phonics function cambiaSito() { alert("Stai per essere trasferito sul nuovo sito JS-Tutor") location = "JSTutor.html" } 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 qui oppure aspetta 10 secondi per essere " var intro4 = "trasferito automaticamente al nostro nuovo sito." var introMsg = intro1+" "+intro2+" "+intro3+" "+intro4 document.write(" "+introMsg+" ") setTimeout(cambiaSito()",20000) Laboratorio di Applicazioni Informatiche II mod. A Javascript - URL

42 Laboratorio di Applicazioni Informatiche II mod. A Javascript 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 dallutente, che viene richiamata automaticamente, al caricamento della pagina, dal gestore di evento onLoad.

43 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) } FineScorre.html Laboratorio di Applicazioni Informatiche II mod. A Javascript