1 JavaScript: generalità

Transcript

1 1 JavaScript: generalità JavaScript (di seguito abbreviato in JS) è un linguaggio di scripting (linguaggio usato per definire degli script, dei piccoli programmi di utilità, composti anche di sole poche righe, eseguiti da un interprete del linguaggio). Uno script JS è eseguito quando la pagina web in cui è inserito viene caricata e visualizzata dal browser. È il browser stesso che si occupa di eseguire le istruzioni JavaScript: esso contiene un interprete JavaScript. Esistono moltissime guide di JavaScript, sia cartacee che online; quest ultime sono liberamente consultabili, a volte anche scaricabili. Una la trovate qui e un altra la trovate qui. 1.1 Compatibilità delle versioni di JS I diversi browser non implementano la stessa versione del linguaggio JS, ma si differenziano a volte anche in modo vistoso. La versione del linguaggio varia anche tra differenti versioni di uno stesso browser. Esiste però uno standard JavaScript: ECMAScript, proposto dal consorzio W3C (World Wide Web Consortium). Tutto ciò implica che non è assicurato che uno script JS sia eseguito correttamente da un qualsiasi browser. JavaScript non è correlato a Java: sono linguaggi diversi. La somiglianza dei nomi è voluta. Inizialmente il linguaggio si chiamava LiveScript ma poi cambiò nel nome attuale per sfruttare la popolarità di Java. 1.2 Codice JavaScript incorporato in un file HTML Un programma JavaScript è eseguito durante la visualizzazione di un file HTML. Il codice JavaScript è incorporato nel file, racchiuso tra i tag <script> e </script>, e.g. <script type="text/javascript"> istruzioni JavaScript </script> l attributo type indica il linguaggio usato per scrivere lo script: <script type="text/javascript"> document.write( questa istruzione verra ignorata ); </script> 1.3 File sorgente JavaScript Un programma JS può essere anche scritto in un file esterno (con estensione.js) alla pagina web. Un file sorgente contiene solo codice JS, non contiene alcun tag, nemmeno i tag <script>. Per eseguire un file sorgente si deve aggiungere al tag <script> l attributo src che indica il percorso del file sorgente; le istruzioni comprese tra i tag <script> sono ignorate. E.g., <script type="text/javascript" src=./javafiles/esempio.js > document.write( questa istruzione verra ignorata ); </script> 1.4 Script multipli Nei documenti HTML possono essere presenti diversi script e si può combinare l uso di codice JavaScript incorporato con l uso di file sorgente. In entrambe le modalità, ogni sezione JavaScript di un documento HTML deve essere delimitata dai tag <script>. L ordine di esecuzione di ogni sezione JavaScript corrisponde all ordine di apparizione delle sezioni all interno del documento. 1

2 1.5 I commenti JavaScript Il codice sorgente di ogni programma (in un qualsiasi linguaggio di programmazione) deve essere documentato per favorire la sua manutenzione e il suo aggiornamento. Tale documentazione è possibile introducendo i commenti, delle righe di testo che non vengono eseguite dall interprete e che contengono delle informazioni sul programma, come la data di creazione del programma, il nome del programmatore, etc.. Come in Processing, Java e molti altri linguaggi di programmazione, esistono due tipi di commenti: i commenti monoriga che cominciano con due barre // e terminano in fondo alla riga, e i commenti multiriga che iniziano con /* e terminano con */. 1.6 Posizionamento del codice JS in un documento HTML Per visualizzare un messaggio che informi gli utenti che il loro browser è incompatibile con la versione di JS usata, si inserisce il messaggio tra i tag <noscript> e </noscript> che seguono la coppia di tag <script> e </script>. Una sezione JavaScript può essere inserita: nell intestazione di un documento HTML tra l intestazione e il corpo di un documento HTML nel corpo di un documento HTML Nel primo caso l esecuzione del codice JS avverrà prima della visualizzazione del documento HTML 2 Variabili Una variabile è una coppia < nome, valore > usata all interno di un programma per memorizzare valori durante la sua esecuzione. Prima di essere usata, una variabile deve essere creata o dichiarata: var miavariabile (senza inizializzazione) var miavariabile = 100 (con inizializzazione) var primavar = testo, secondavar =100, terzavar = 2.5 (inizializzazione multipla) nel caso di dichiarazione senza inizializzazione, il valore della variabile è indefinito. 2.1 Identificatori var è una parola chiave e come tale non può essere usata come nome di una variabile. I nomi di variabili si dicono anche identificatori e sono quelle parole formate da lettere maiuscole e minuscole, dai simboli $, _ e dalle cifre decimali che: 1. non siano parole chiave, 2. non abbiano come primo simbolo una cifra decimale. Per convenzione i nomi delle variabili iniziano con una lettera minuscola e se sono costituiti da più parole, l iniziale di ogni parola successiva alla prima è maiuscola (camel notation) oppure le parole sono separate dal simbolo _ detto underscore (e.g., valoremediodellasterlina oppure valore_medio_della_sterlina). 2

3 2.2 Comando di Assegnamento Il comando di assegnamento nome = valore permette di modificare il valore di una variabile, e.g. miocane = Setter Irlandese assegna alla variabile miocane il valore di tipo stringa Setter Irlandese. Per saperne di più sui tipi di dati di JS vai alla sezione 8. 3 Costrutti di controllo di JavaScript I costrutti di controllo di JavaScript sono identici ai costrutti di controllo di Java, Processing, C e molti altri linguaggi di programmazione. Riportiamo di seguito una descrizione sommaria di alcuni dei principali costrutti. 3.1 Comando if if (<espressione logica> ) Istruzione se l espressione logica è vera si esegue l istruzione 3.2 comando if-else if (<espressione logica> ) Istruzione1 else Istruzione2 se l espressione logica è vera si esegue Istruzione1 altrimenti si esegue Istruzione2. N.B. un istruzione è anche una sequenza di istruzioni separate da punti e virgole e racchiuse tra parentesi graffe: I 1 ;... ; I n. 3.3 Ciclo for Ha il formato dove for (I1; <espressione logica> ; I2) I3 I1 è l istruzione di inizializzazione <espressione logica> è la guardia del for I2 è l istruzione di incremento o aggiornamento I3 è il corpo del for L inizializzazione I1 assegna un valore ad una variabile, detta variabile di controllo. Se la guardia è vera si esegue il corpo I3 e poi l aggiornamento I2, poi si valuta di nuovo la guardia: se è vera si esegue di nuovo il corpo e l aggiornamento, finché l espressione logica diventa falsa. 3

4 4 Funzioni Un programma JavaScript è composto da una sequenza di istruzioni separate da punti e virgola. Come nella maggior parte dei linguaggi di programmazione è possibile definire delle procedure (che in Java e Processing si dicono metodi) assegnando un nome a una sequenza di istruzioni in modo tale che poi basti scrivere (anche in più punti di un programma) il nome della procedura affinché essa sia eseguita. In JavaScript, le procedure si dicono funzioni, sia che producano o meno un valore. Esistono funzioni predefinite come alert(), ma ogni programmatore può definire le funzioni che più gli convengono e usarle nei suoi programmi. Le definizioni di funzione sono preferibilmente inserite nell intestazione di un documento HTML. Le chiamate di funzione sono preferibilmente inserite nel corpo di un documento HTML. Una funzione è definita una sola volta, ma può essere chiamata un numero arbitrario di volte. 4.1 Definizione di funzioni Il formato della definizione di una funzione è il seguente dove function nome (lista parametri) { istruzioni } function : parola chiave che stabilisce l inizio di una definizione di funzione, nome : nome della funzione, lista parametri: sequenza eventualmente vuota di identificatori (separati da virgole) di variabili usate dalle istruzioni della funzione, istruzioni: sequenza di istruzioni che viene eseguita quando si chiama la funzione. La prima riga della definizione di una funzione si dice intestazione, le istruzioni sono il corpo della funzione. 4.2 Chiamata di funzioni Per eseguire le istruzioni di una funzione, bisogna chiamarla in uno o più punti del programma, ovvero scrivere il nome della funzione seguito tra parentesi da tanti valori (gli argomenti) quanti sono i parametri della funzione. L assegnamento degli argomenti ai parametri della funzione si dice passaggio dei parametri. Il passaggio dei parametri avviene immediatamente prima delle esecuzione delle istruzioni della funzione. 4.3 Funzioni che restituiscono valori L esecuzione di una funzione può anche produrre un valore che può essere usato in un altro punto del programma, quando nel corpo della funzione appaia l istruzione return, e.g. la funzione function media_numeri(a, b, c) { var somma_numeri = a+b+c ; var risultato = somma_numeri / 3 ; return risultato; } restituisce la media dei tre valori a, b, c. Il valore prodotto da una chiamata di media_numeri() può essere assegnato a una variabile per essere poi utilizzato: l istruzione var valorerestituito = media_numeri(1, 2, 3); 4

5 assegna la media di 1, 2, 3 alla variabile valorerestituito. N.B. In altri linguaggi di programmazione come Java, Processing si distingue tra procedure (funzioni che non restituiscono valori) e funzioni (funzioni che restituiscono valori. 4.4 funzione prompt La chiamata della funzione predefinita prompt("inserite il vostro nome", "inserite il vostro nome qui"); provoca l apparizione di una finestra di dialogo contenente un messaggio, una casella di testo, un pulsante OK e un pulsante annulla. 4.5 funzione alert La chiamata della funzione predefinita alert("benvenuto/a " + nome_utente + "!"); provoca l apparizione di una finestra di dialogo contenente un messaggio e un pulsante OK. 5 Oggetti JavaScript Abbiamo visto che una variabile serve per memorizzare dei dati utilizzabili da un programma. E possibile però memorizzare dati complessi come oggetti: JavaScript è un linguaggio orientato agli oggetti. Un oggetto rappresenta un entità che può essere descritta da una serie di proprietà o attributi e a un oggetto si possono applicare solo delle funzioni specifiche dette metodi dell oggetto. Un attributo di un oggetto invece può essere usato come una qualsiasi variabile. 5.1 Tag HTML come oggetti JavaScript Gli oggetti che di solito appaiono all interno di uno script corrispondono ai tag HTML di una pagina web, dove gli attributi dei tag corrispondono alle proprietà degli oggetti corrispondenti. Per accedere ad un tag, si utilizza il metodo getelementbyid() che agisce sull oggetto document. Il parametro deve essere il valore dell attributo id del tag desiderato. Ad esempio, per accedere al tag 5

6 si scrive: <img src= figura.jpg id= miaimm > var myimg=document.getelementbyid( miaimm ); che assegna alla variabile myimg l oggetto corrispondente al tag. A questo punto, l attributo src del tag corrisponde alla proprietà omonima dell oggetto myimg. Si noti che E.g., per modificare l attributo src del tag precedente si scrive: var myimg=document.getelementbyid( miaimm ); myimg.setattribute("src", figura2.jpg ); L effetto di quest istruzione è di cambiare l immagine visualizzata nella pagina: l immagine figura.jpg è sostituita dall immagine figura2.jpg. Per accedere a un attributo occorre usare la funzione getattribute(). Essa agisce su un oggetto (elemento di una pagina) e restituisce il valore dell attributo specificato come valore di tipo String. Ad esempio: var pathimg = myimg.getattribute("src"); assegna alla variabile pathimg il percorso dell immagine sotto forma di stringa. 5.2 Il DOM Il modello a oggetti di un documento (Document Object Model, DOM) è una libreria software per la rappresentazione, l accesso e la manipolazione di un documento scritto in un linguaggio di markup come (X)HTML. Esso permette a JavaScript l accesso alle pagine web, potendo modificarne la struttura, i contenunti e gli stili, modificando così l aspetto delle pagine. Ad esempio, le funzioni getelementbyid(), setattribute, getattribute() fanno parte del DOM. IL DOM è quindi il meccanismo fondamentale per il cosidetto DOM scripting (una volta si sarebbe detto HTML dinamico (DHTML)) che si realizza impiegando congiuntamente (X)HTML, fogli di stile CSS e JavaScript. (X)HTML definisce la struttura e i contenuti della pagina, CSS ne definisce il formato e JS, attraverso il DOM, definisce il comportamento della pagina, manipolando sia il codice (X)HTML che gli stili CSS, modificando così struttura, contenuti e formato. Ogni marcatore HTML è un oggetto che ha come proprietà i suoi attributi e i marcatori in esso annidati. Purtroppo i browser non implementano la stessa versione del DOM e nemmeno rispettano le specifiche standard del DOM fornite dal W3C, oggi giunte alla terza versione. Di conseguenza, non è sempre possibile creare pagine web dinamiche portabili, ovvero visualizzabili e funzionanti allo stesso modo con un qualsiasi browser. 5.3 Il BOM Il modello a oggetti del browser (Browser Object Model, BOM) è una libreria software per la rappresentazione, l accesso e la manipolazione della finestra del browser. Esso permette di determinare alcune caratteristiche del browser, come marca e modello. Non esiste uno standard de jure, ma è uno standard de facto poiché è sostanzialmente implementato allo stesso modo da tutti i browser. 6 Eventi JavaScript è in grado di rendere interattivi i documenti HTML perché è in grado di gestire circostanze specifiche, dette eventi, come il click del mouse, il caricamento di un immagine, il posizionamento del mouse su un particolare elemento del documento, etc.. La gestione degli eventi è di solito associata a un tag HTML (sorgente dell evento). Quando un evento si verifica, viene attivato il gestore di quell evento. 6

7 6.1 gestori di eventi Il gestore di un evento (event handler) è uno script JavaScript che è il valore di un attributo di un tag HTML sorgente dell evento: < taghtml evento = codice JS >. Ogni tag è una sorgente per alcuni tipi eventi. Ad esempio, il tag <a> (link) è una sorgente per gli eventi onclick, onmouseover, onmouseout; i tag <img> e <body> sono sorgenti per gli eventi onabort, onerror, onload, onunload. Ad esempio, il tag <body onload="saluti_utente()" onunload="commiato_utente()" > provoca la chiamata della funzione saluti_utente() al momento del caricamento o apertura del documento (onload) la chiamata della funzione commiato_utente() al momento dello scaricamento (onunload) del documento (chiusura della pagina, caricamento di un altra pagina). L evento associato al tag <a> più frequente è onclick che viene eseguito automaticamente dal browser aprendo il documento specificato dall URL dell attributo href (non è necessario inserire il gestore onclick ) <a href= altrapaginaweb.html > Un altra pagina web </a> La gestione dell evento onclick può essere ridefinita inserendo un gestore onclick appropriato; questo gestore dovrà restituire (con return) true oppure false se si vuole che dopo l esecuzione del gestore del click si carichi comunque la pagina oppure no. 7 Animazioni La possibilità di cambiare delle singole componenti di un documento HTML come un immagine in esso contenuta permette la possibilità di creare delle animazioni cambiando ad intervalli di tempo ravvicinati l immagine mostrata in un certo punto di una pagina, nello stesso modo in cui si realizzano i cartoni animati. La funzione setinterval( codice JS, tempo ) esegue ripetutamente il codice JavaScript passato come primo parametro ad intervalli temporali di ampiezza pari al parametro tempo (inteso in millisecondi). 7.1 Funzioni setinterval() e clearinterval() Useremo la funzione setinterval() per iterare il procedimento di sostituzione di un immagine con un altra e creare così un animazione, e.g. l istruzione var begin=setinterval( cambiaimmagine(), 2000) esegue il metodo cambiaimmagine() ogni 2000 msec = 2 sec. La funzione setinterval() restituisce anche un valore che viene assegnato alla variabile begin che può essere impiegata per fermare l esecuzione della funzione setinterval() e quindi bloccare l esecuzione ripetuta del metodo cambiaimmagine. Ciò è possibile chiamando il metodo clearinterval() applicato alla variabile begin : clearinterval(begin) 7

8 7.2 Funzioni settimeout() e cleartimeout() La funzione settimeout( codice JS, tempo ); esegue il codice JavaScript passato come primo parametro dopo che sia trascorso un intervallo di tempo (timeout), espresso in millisecondi, dal parametro tempo. Ad esempio, l istruzione var begin=settimeout( cambiaimmagine(), 2000) attende 2 secondi prima di eseguire il metodo cambiaimmagine(). La funzione settimeout() restituisce anche un valore che viene assegnato alla variabile begin che può essere impiegata per prevenire l esecuzione del metodo cambiaimmagine() invocando il metodo cleartimeout(begin) prima che sia scaduto il timeout. 8 Tipi di dati Un tipo di dato è un insieme di valori dotato di operazioni. JS dispone dei seguenti tipi di dati primitivi (predefiniti) : numeri interi e reali (entrambi rappresentati in virgola mobile a 64 bit secondo lo standard IEEE 754) ; valori booleani (true, false) ; stringhe ( questa e una stringa, ecco una seconda stringa ) ; il valore null (significa nessun valore), unico valore del tipo di dati null. Rappresenta anche l oggetto nessun oggetto. Una variabile non inizializzata ha valore undefined. JS è un linguaggio non tipato: a una variabile si possono assegnare (in tempi diversi) valori di tipo diverso. Ad es. le istruzioni seguenti variabilechecambia = ciao a tutti ; variabilechecambia = 3; variabilechecambia = 5.27 ; variabilechecambia = true; variabilechecambia = null; possono occorrere (non necessariamente in sequenza) all interno di uno script JavaScript. La funzione typeof (argomento) restituisce una stringa che rappresenta il tipo del valore dell argomento: number, string, boolean se il tipo di valore dell argomento è rispettivamente, un numero (intero o reale), una stringa o un valore booleano, object se il tipo di valore dell argomento è un oggetto, un array o il valore null, undefined se l argomento è indefinito. 8.1 Numeri I numeri, sia interi che reali sono rappresentati in virgola mobile a 64 bit secondo lo standard IEEE 754. Le costanti intere si rappresentano in notazione decimale: 234, -35, le costanti reali si rappresentano sia in virgola fissa 3.457, che con mantissa ed esponente: e-3 = I valori maggiori del massimo valore rappresentabile si rappresentano con il valore speciale Infinity mentre i valori inferiori al minimo valore rappresentabile si rappresentano con il valore speciale -Infinity 8

9 8.2 Operazioni aritmetiche Le principali operazioni su numeri sono: Ecco alcuni esempi: x = y*27 ; z=5%2 ; //z=1 u =4.3 %2.1 ; // u =0.1 altri operatori sono: Ecco alcuni esempi: y =x++; // y =x ;x =x+1 y =++x ; //x =x+1 ;y =x addizione sottrazione moltiplicazione divisione resto + - * / % incremento decremento negazione ++ - L operatore di assegnamento e addizione: se x e y sono due numeri, l istruzione x += y è equivalente all assegnamento a x della somma di x ed y x =x+y 8.3 Stringhe Una stringa è una sequenza di caratteri tra apici o doppi apici. All interno di stringhe delimitate da apici si possono scrivere doppi apici e viceversa, e.g. collaudo, 3.14, nome= mio modulo Attenzione: la tastiera italiana non distingue tra apostrofo e apice. In tal caso conviene scrivere \ per distinguere l apostrofo dall apice di fine stringa. Sequenze di escape: sono sequenze di caratteri che rappresentano caratteri speciali all interno di una stringa. La seguente tabella mostra alcune sequenze di escape. backspace \b avanzamento pagina \f avanzamento riga (new line) \n ritorno a capo \r tabulatore \t apice \ doppio apice \ backslash \\ Ad esempio, il cap della mia citta\ e\ 2010 è una stringa corretta, i miei files si trovano nella cartella C:\\PagineWeb\\FileJS è una stringa corretta, i miei files si trovano nella cartella C:\PagineWeb\FileJS non è una stringa corretta. Nelle stringhe si possono inserire anche dei tag HTML: il comando document.write( <i>questa riga e in corsivo</i> ) 9

10 stampa la riga: questa riga e in corsivo questo vale anche per gli altri marcatori. IL simbolo + rappresenta anche la concatenazione (giustapposizione) di stringhe: x = prima e + dopo ; // x = prima e dopo operatore di assegnamento e concatenazione: se x e y sono due stringhe, l istruzione x += y è equivalente all assegnamento a x della concatenazione di x ed y x =x+y La funzione eval(espressione) restituisce il valore dell espressione passata come stringa: e.g., eval( 3+5 ) restituisce come valore il numero Valori booleani Detti anche valori di verità. Costituiscono un insieme di due soli valori: true (vero) e false (falso). Le principali operazioni su valori booleani sono: && (congiunzione, and), (disgiunzione, or),! (negazione, not), Esempi: x=y&&z; // x=true sse y e z sono true x=y z ; // x = true sse y oppure z è true x=!y ; //x =true sse y èfalse 8.5 Operatori di confronto Sono operatori binari che restituiscono un valore booleano. Gli operatori di confronto sono: uguale == diverso!= maggiore > maggiore o uguale >= minore < minore o uguale <= Gli argomenti dei primi due operatori possono essere di tipo qualsiasi, mentre gli argomenti degli altri operatori sono numeri o stringhe (nel caso di stringhe si considera l ordinamento lessicografico). Esempi: x=(y ==z); // x=true sse y è uguale a z x=(y!=z); // x=true sse y è diverso da z 8.6 Array Un Array è una sequenza di variabili, ognuna delle quali può essere acceduta tramite un valore intero detto indice. Gli array sono oggetti e pertanto vanno istanziati con l istruzione new: la riga di programma lista_animali = new Array(5) ; crea un array di 5 elementi, chiamato lista_animali. I suoi elementi sono: lista_animali[0], lista_animali[1], lista_animali[2], lista_animali[3], lista_animali[4]. Ciascun elemento può essere usato come una variabile qualsiasi: 10

11 lista_animali[3] = gatto ; document.write(lista_animali[2] ); Gli array si istanziano anche nei 2 modi seguenti: lista_animali = new Array() ; lista_animali[4] = gatto ; La prima istruzione crea un array senza elementi, la seconda aggiunge 5 elementi e inizializza il quinto elemento. Altrimenti, si crea un array e lo si inizializza contemporaneamente lista_animali = new Array( gatto, cane, topo, gallo, capra ) ; dove la lista di valori tra parentesi tonde sono i valori degli elementi lista_animali[0], lista_animali[1], lista_animali[2], lista_animali[3], lista_animali[4]. 11