JavaScript Introduzione Introduzione
Transcript
JavaScript Introduzione Introduzione
JavaScript Introduzione 1 Pasqualetti Veronica Introduzione 2 JavaScript è un linguaggio di scripting, ossia un linguaggio dalle funzionalità ridotte rispetto a un vero e proprio linguaggio di programmazione. 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 ti l t utile til perché hé ttutti tti i compiti iti di elaborazione l b i 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 client, 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, i i dando d d cosìì all’utente ll’ tempii di risposta i più iù b brevii e riducendo id d il traffico di rete. Introduzione 3 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. t l f Senza alcuna trasmissione in rete, uno script di questo tipo può p il testo immesso e avvertire l'utente con una finestra interpretare di messaggio appropriata. Quando un documento HTML con uno script di JavaScript è caricato in un browser che supporta questo linguaggio, linguaggio le funzioni dello script vengono calcolate, memorizzate, ed eseguite quando si verificano determinati eventi (a es. quando l'utente sposta il ouse sopra sop a u un oggetto o immette ette u un testo in u una a case casella). a). mouse Storia 4 Il primo i b browser a supportare t JJavascript i t è stato t t Netscape Navigator 2.0. Naturalmente anche le versioni successive lo supportano supportano. Anche Microsoft Internet Explorer (a partire dalla versione i 3 3.0) 0) supporta t JJavascript. i t Oggi tutti i browser supportano Javascript Dynamic y HTML ((DHTML)) 5 Una U pagina i “di “dinamica” i ” (DHTML) è una pagina i HTML contenente codice JavaScript associato a determinati eventi che implementa specifiche funzionalità Non N bi bisogna confondere f d una pagina i DHTML con una pagina generata dinamicamente dal server (asp, php, h jsp, js etc) t ) Sintassi 6 Un U programma JavaScript J S i t è composto t d da una sequenza di istruzioni terminate dal punto e virgola (;) Un insieme di istruzioni delimitate da parentesi graffe ff ({ e }) costituiscono tit i un bl blocco ECMAScript p 7 E E’ un linguaggio di script client client-side side Nato nel 1995 da Netscape con il nome di Mocha e successivamente di LiveScript Standardizzato da ECMA International (European Computer Manufacturers Association - associazione fondata nel 1961e dedicata alla standardizzazione nel settore informatico e dei sistemi di comunicazione) nel 1997 La sintassi lo rende simile a Java, Java ma sono molto diversi 7 JavaScript p e HTML 8 Per inserire codice JavaScript in un documento HTML esistono tre modi: elemento <script> contenente il codice JavaScript <script type=“text/javascript”> <![CDATA[ ... unescaped script content ... ]]> </script> inclusione di script esterni <script src= src="script script_esterno.js esterno js"></script> ></script> direttamente nel codice HTML in risposta ad eventi <input type=“button” onclick=“alert(‘Ciao!’)” …> <a href=“javascript:nome_funzione()”>Clicca qui!</a> 8 JavaScript: p Esempio p 9 <html> <head> <script type="text/javascript"> function raddoppia(n) { res = 2 * n; alert("Il doppio di " + n + " è " + res); } </script> / i </head> <body onload="raddoppia(7)"> … </body> /b d </html> 9 JavaScript p vs Java 10 JavaScript p 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 Introduzione 11 JavaScript si compone di elementi di programmazione quali: • • • • oggetti, proprietà, metodi, gestori di eventi. La sintassi di JavaScript ha due elementi fondamentali: • espressione p ((o istruzione): ) combinazione di operatori, p , variabili, letterali e parole chiave di cui si può calcolare il valore. • funzione: f i gruppo di enunciati i ti provvisto i t di un nome, che h sii può ò usare più volte semplicemente chiamandone il nome. Sintassi 12 Un U id identificatore tifi t è una sequenza di simboli i b li che h identifica un elemento all’interno del programma Un identificatore id ifi può ò essere composto d da llettere e numeri, non deve contenere elementi di punteggiatura t i t o spazii e d deve cominciare i i con una lettera Sintassi 13 Q Questi ti sono id identificatori tifi t i validi lidi Nome Codice_Fiscale C di Fi l a0 Q Questi ti sono id identificatori tifi t i non validi lidi 0a x.y Partita IVA Sintassi 14 Il li linguaggio i è case-sensitive, iti ovvero di distingue ti lle lettere maiuscole dalle minuscole I commentii sono d delimitati li i i d da /* e */ Il simbolo // indica che il testo seguente sulla medesima riga è un commento Variabili 15 Una U variabile i bil è un’area ’ di memoria i contenente t t informazioni che possono “variare” nel corso dell’esecuzione dell esecuzione del programma Una variabile è caratterizzata da un nome id tifi ti e d identificativo dall ti tipo d dell’informazione ll’i f i contenuta t t Definizione variabili 16 Prima P i di essere adoperata d t una variabile i bil d dovrebbe bb essere definita var eta; //non è obbligatorio La definizione stabilisce il nome della variabile, mentre t il ti tipo di dipende d d dall’assegnazione ll’ i eta = 35; //intero nome = “M “Mario i R Rossi”; ssi” //stringa //st i Definizione variabili 17 Il tipo ti di una variabile i bil di dipende d d dall’ultima ll’ lti assegnazione, quindi una variabile può cambiare tipo nel corso del suo ciclo di vita x = 10; //intero … x = “a”; //stringa JavaScript J S i t è un li linguaggio i “d “debolmente b l t tipato” ti t ” Tipi p dato p predefiniti 18 Number N b Boolean Null String g Date Array Tipo p Number 19 Una U variabile i bil di tipo ti Number N b assume valori l i numerici i i interi o decimali var x = 10; //valore intero var y = -5.3; //valore decimale Sono S definite d fi it le l operazioni i i aritmetiche it ti h ffondamentali d t li ed una serie di funzioni matematiche di base Tipo p Boolean 20 Una U variabile i bil di tipo ti Boolean B l assume i soli li valori l i della logica booleana vero e falso var pagato = true; //valore logico vero var consegnato = false; //valore logico falso Sono S definite d fi it lle operazioni i i logiche l i h ffondamentali d t li (AND, OR e NOT) Tipo p Null 21 Si tratta t tt di un ti tipo che h può ò assumere un unico i valore l var a = null; Serve S ad d iindicare di che h il contenuto d della ll variabile i bil è non significativo var sesso = “f” “f”; var militesente = null; Tipo p String g 22 Una U variabile i bil di tipo ti String St i contiene ti una sequenza arbitraria di caratteri Un valore l di tipo i Stringa S i è delimitato d li i d da apici i i (‘’) o doppi-apici (“”) var nome = “Mario Rossi”; var empty = “”; //Stringa vuota var empty2 t = new String(); St i () //St //Stringa i vuota t var str = ‘Anche questa è una stringa’; var str2 = new String( String(“Un’altra Un altra stringa stringa”); ); Tipo p Date 23 Una U variabile i bil di ti tipo D Date t rappresenta t un iistante t t temporale (data ed ora) var adesso d = new Date(); D t () var natale2000 = new Date(2000,11,25); var capodanno2001 = new Date( Date(“Gen Gen 1 2001 2001”); ); E’ definito l’operatore di sottrazione (-) tra due date che restituisce la differenza con segno espressa in millisecondi Tipo p Arrayy 24 Un U array è un vettore tt monodimensionale di i l di elementi l ti di tipo arbitrario var v = new Array(); A () //V //Vettore tt vuoto t var w = new Array(“Qui”, “Quo”, “Qua”); var u = new Array( Array(“Lun” Lun , “Mar” Mar , “Mer” Mer , “Gio” Gio , “Ven” Ven , “Sab” Sab , “Dom”); Non è necessario specificare la dimensione Assegnazione g 25 L’assegnazione L’ i è l’ l’operazione i fondamentale f d t l neii linguaggi di programmazione imperativa id = expr Prima viene “valutata” l’espressione expr, quindi il risultato i lt t viene i “ “assegnato” t ” alla ll variabile i bil id Assegnazione g 26 Si consideri id i il seguente t fframmento t di codice di var x = 10; var y = 7; var z = 3*(x-y); Al ttermine i d dell’esecuzione ll’ i lla variabile i bil z assume il valore 9 Espressioni p 27 U Un’espressione ’ i è composta t d da Identificatori di variabili Costanti x nome, x, nome eta , importo, importo … 10 3.14, 10, 3 14 “<HTML>” <HTML> , … Operatori Parentesi (( e )) p per alterare le regole g di p precedenza tra operatori Operatori p aritmetici 28 O Operano tra t valori l i ((costanti t ti o variabili) i bili) numerici i i Somma (1+1) Sottrazione S tt i ((3-5)) Moltiplicazione (3*4) Divisione (6/4) Modulo (6%5) Cambiamento di segno ( (-3) 3) Operatori di pre/post incremento/decremento 29 Derivano D i dal d l li linguaggio i C ((e sono presenti ti in i C C++ e Java) Alterano Al e restituiscono i i il valore l di una variabile i bil Consentono di scrivere codice compatto ed efficiente Operatori di pre/post incremento/decremento 30 var x = 10; var y = x++; //y=10 e x=11 var z = ++x; //z=12 e x=12 var w = x--;; //w=12 // e x=11 var v = --x; //v=10 e x=10 Operatori p su stringhe g 31 L’unica L’ i operazione i possibile ibil tra t stringhe t i h in i un’espressione è la concatenazione: nomeCompleto C l t = titolo tit l + “ ” + nome + “ ” + cognome indirizzo = recapito + “, ” + numCivico + “ ” + CAP + “ - ” + citta + “ ((” + prov + “)” ) Operatori p su stringhe g 32 Esiste E i t una fforma più iù compatta tt per esprimere i l’accodamento L’istruzione ’i i seguente str = str + newStr; è equivalente a str += newStr; Operatori p su vettori 33 L’operatore L’ t d definito fi it suii vettori tt i è l’ l’accesso ad d un determinato elemento dato l’indice v[3] [ ] = 10; a[i] = b[i] * c[i]; p = v[1]; Il primo elemento di un vettore ha sempre l’indice 0 (come in C/C++ e Java) Operatori p sui vettori 34 Se S sii assegna un valore l ad d un elemento l t non presente t questo viene creato var v = new Array(); A () v[0] = 1; Se S sii accede d all valore l di un elemento l t non presente t sii ottiene un valore indefinito var v = new Array(); A () var a = v[0]; Operatori p relazionali 35 Confrontano C f t d due valori l i e restituiscono tit i l’ l’esito it come valore booleano Uguaglianza U li ((==)) Disuguaglianza (!=) Minore (<) Maggiore (>) Minore o uguale (<=) Maggiore o uguale (>=) Operatori p logici g 36 O Operano tra t valori l i (costanti ( t ti o variabili) i bili) b booleani l i AND (&&) OR (||) NOT (!) Solitamente S lit t gli li operandi di sono l’ l’esito it di un confronto f t Condizioni 37 L’utilizzo L’ tili di operatori t i relazionali l i li e logici l i i consente t di formulare delle condizioni che possono essere utilizzate per controllare l’esecuzione l esecuzione del programma (metodoPagamento==“contrassegno”) (metodoPagamento== contrassegno ) &&(!residenteInItalia) Controllo dell’esecuzione 38 L’esecuzione L’ i di un programma è generalmente l t sequenziale Tuttavia i iin d determinate i ““condizioni” di i i” può ò essere necessario eseguire solo alcune istruzioni, ma non altre, lt oppure ripetere i t più iù volte lt un’operazione ’ i IF 39 L’istruzione L’i t i i t viene instr i eseguita it solo l se la l condizione cond risulta vera if(cond) instr L’istruzione instr può essere sostituita da un gruppo di istruzioni tra parentesi graffe ({ e }) IF - ELSE 40 Una U costruzione t i alternativa lt ti prevede d lla presenza di una seconda istruzione da eseguire nel caso la condizione risulti falsa if(cond) instr_then else instr_else IF – ELSE esempio p 41 if (scelta==“NO”) ( lt “NO”) { // Se la scelta è NO … } else { // Altrimenti … } SWITCH 42 Lo switch s itch è un n particolare pa ticola e caso di if particolarmente pa ticola mente ramificato, in cui viene presa in esame un'unica variabile che può assumere differenti valori. switch(<variabile i h( i bil d da valutare>) l ){ case <valore 1>: //istruzioni b k //si break; // i ferma f quii case <valore 2>: //istruzioni b k // break; //sii ferma f quii ... case <valore n>: //i t i i //istruzioni break; //si ferma qui default: //istruzioni } FOR 43 Viene Vi prima i eseguita it l’istruzione l’i t i i it quindi init, i di l’istruzione instr viene ripetuta finché la condizione cond risulta vera, vera dopo ogni ripetizione viene eseguita l’istruzione next for(init; cond; next) instr FOR esempi p 44 Inizializzare I i i li a 0 gli li n elementi l ti del d l vettore tt a for (var i=0; i 0; i<n; i++) a[i]=0; Copiare gli n elementi del vettore a nel vettore b for (var i=0; i<n; i++) b[i] [i] b[i]=a[i]; WHILE 45 L’istruzione L’i t i i t viene instr i eseguita it finché fi hé la l condizione cond risulta essere verificata while(cond) instr Un’istruzione for può essere espressa come init; while(cond) {instr; next;} DO … WHILE 46 Il do...while d hil ha h un ffunzionamento i t del d l ttutto tt analogo l al while, solo che l'istruzione viene eseguita prima che la condizione venga valutata: in questo modo si ha la certezza che l'istruzione venga eseguita almeno una volta. volta do { //istruzioni } while (<condizione>); Funzioni 47 Una U ffunzione i è un elemento l t di un programma che h calcola un valore che dipende “funzionalmente” da altri y=f(x) y log10(x) y=log10(x) L’utilizzo delle funzioni nella programmazione strutturata aumenta la modularità e favorisce il riutilizzo Definizione funzioni 48 In I JavaScript J S i t è possibile ibil d definire fi i una o più iù ffunzioni i i all’interno di un programma function name(arg0 , arg1 , …, argn-1) { istruzioni… istruzioni } La funzione definita è identificata da name e dipende dagli argomenti arg0, arg0 arg1 arg1, …, argn-1 argn 1 Funzioni esempio p 49 Somma S di due d numerii function somma(a, somma(a b) { return a+b; } La L funzione f i viene i “invocata” “i t ” all’interno ll’i t di un’espressione var s = somma(1, 2); Invocazione di funzioni 50 Quando Q d una ffunzione i viene i iinvocata t gli li argomenti ti sono inizializzati con i valori specificati Quindi Q i di sii procede d con l’ l’esecuzione i d delle ll iistruzioni i i costituenti la funzione L’istruzione return restituisce il valore calcolato al chiamante Invocazione di funzioni 51 La L chiamata hi t x = somma(1, 2) inizializza gli argomenti a e b rispettivamente ai valori 1 e 2 L’istruzione L’i t i return a+b; valuta l t l’ l’espressione s ssi e restituisce stit is il risultato is lt t (3) che viene assegnato alla variabile x Variabili locali e globali g 52 All’interno All’i t di una ffunzione i è possibile ibil d definire fi i d delle ll variabili “confinate” all’interno della funzione stessa Tali li variabili, i bili dette d “l “locali”, li” sono create all’atto ll’ dell’invocazione della funzione e sono distrutte al t termine i d dell’esecuzione ll’ i Il loro valore non è accessibile dall’esterno della f funzione i Ogni argomento di una funzione è una variabile locale definita implicitamente Variabili locali e globali g 53 Le L variabili i bili definite d fi it all’esterno ll’ t di una ffunzione i sono denominate, invece, “globali” A diff differenza delle d ll variabili i bili llocali, li lle variabili i bili globali l b li sono accessibili da qualsiasi punto del programma, anche h dall’interno d ll’i t di una ffunzione, i sempre che h iin quest’ultima non sia stata definita una variabile l l con llo st locale stesso ss nome Variabili locali e globali g 54 Si consideri id i il seguente t fframmento t di codice di function f(…) { … var x = 1; … } var x = -1; … f( ); f(…); La variabile globale x continua a valere -1 Procedure 55 Una U ffunzione i che h non restituisce tit i valori l i viene i d detta tt procedura Una procedura d agisce i iin genere su variabili i bili globali l b li (side-effect) Funzioni predefinite p 56 In I JavaScript J S i t sono presenti ti alcune l ffunzioni i i predefinite, ad esempio: iisNaN(v) N N( ) verifica ifi se v non è un numero parseFloat(str) converte str in un numero decimale parseInt(str) ( ) converte str iin un numero iintero Oggetti gg 57 JavaScript J S i t è un li linguaggio i orientato i t t agli li oggetti, tti tuttavia non possiede il costrutto di classe Molti l i tipi i i di d dato ffondamentali d li sono, iin effetti, ff i d degli li oggetti Proprietà p e metodi 58 Una U proprietà i tà di un oggetto tt è assimilabile i il bil ad d una variabile cliente nome = “Carlo cliente.nome Carlo Bianchi Bianchi”;; x = ordine.aliquotaIVA; Un U metodo, t d iinvece, è simile i il ad d una ffunzione i tot = ordine.calcolaTotale(); Proprietà p e metodi 59 Esistono E i t d due sintassi i t i alternative lt ti per accedere d alle ll proprietà degli oggetti oggetto proprieta oggetto.proprieta oggetto[“proprieta”] La L seconda d è utile til quando d il nome d della ll proprietà i tà viene determinato durante l’esecuzione del programma Oggetti gg di tipo p String g 60 P Proprietà i tà length lunghezza della stringa M Metodi di charAt(pos) carattere alla posizione pos subString(start, bS i ( end) d) sottostringa i dalla d ll posizione i i start alla ll posizione end toUpperCase()/toLowerCase() converte la stringa in maiuscolo/minuscolo indexOf(str,, p pos) p posizione della p prima occorrenza della string str cercata a partire dalla posizione pos Oggetti gg di tipo p Arrayy 61 P Proprietà i tà length lunghezza del vettore M Metodi di sort() ordina gli elementi del vettore reverse() () inverte i l’ l’ordine di d degli li elementi l id dell vettore Oggetti gg di tipo p Date 62 M Metodi t di getXXX() restituisce il valore della caratteristica XXX della data setXXX(val) imposta il valore della caratteristica XXX della data toString() restituisce la data come stringa formattata Oggetti gg di tipo p Date 63 Oggetto gg Math 64 P Proprietà i tà E costante di Eulero PI pii greco Metodi abs(val) b ( l) modulo d l ceil(val)/floor(val) troncamento exp(val) e p( al) esponenziale i l log(val) logaritmo pow(base, pow(base exp) elevamento a potenza sqrt(val) radice quadrata