Programmazione web lato client con JavaScript. Marco Camurri 1

Dimensione: px

Iniziare la visualizzazioe della pagina:

Download "Programmazione web lato client con JavaScript. Marco Camurri 1"

Silvana Randazzo
6 anni fa
Visualizzazioni

1 Programmazione web lato client con JavaScript Marco Camurri 1

2 JavaScript E' un LINGUAGGIO DI PROGRAMMAZIONE che consente di inserire codice in una pagina web Sintassi simile a Java (e al C), ma NON E' Java Codice inserito direttamente nella pagina HTML o in file collegati ( estensione.js ) E' un linguaggio INTERPRETATO : il browser intepreta ed esegue il codice presente nella pagina ( se abilitato... ) E' un linguaggio di programmazione web LATO CLIENT ( al contrario di PHP, che è un esempio di linguaggio LATO SERVER ) Marco Camurri 2

3 Pagina HTML dinamica con JavaScript apri esempio <html> <body> <img id="lampada" onclick="cambiaimmagine()" src="spenta.gif" > <script> function cambiaimmagine() { var imm = document.getelementbyid('lampada'); if ( imm.src.match("accesa.gif") ) { imm.src = "spenta.gif"; } else { imm.src = "accesa.gif"; } } </script> </body> </html> JavaScript può modificare gli attributi degli elementi HTML a seguito di eventi (es. click) Marco Camurri 3

4 Un esempio per iniziare <html> <head> </head> <body> <h1> PRIMO ESEMPIO </h1> <button onclick="saluta( )" > CLICCA QUI </button> <script> function saluta() { alert( " ciao! " ); } </script> </body> </html> apri esempio Marco Camurri 4

5 JavaScript esterno alla pagina E' possibile collocare il codice JavaScript in un file esterno: <html> <head> <script src="miofile.js" /> </head> <body> <h1> PRIMO ESEMPIO </h1> <button onclick="saluta( )" > CLICCA QUI </button> </body> </html> miofile.html function saluta() { alert( " ciao! " ); }... function controlla() {... } function somma(x,y) {... }... miofile.js Marco Camurri 5

Librerie JavaScript (Frameworks) Lo script

di funzioni già scritte che semplificano la

6 Librerie JavaScript (Frameworks) Lo script JavaScript esterno pò trovarsi anche su un altro server sul web Esistono diverse librerie JavaScript (frameworks): insiemi di funzioni già scritte che semplificano la creazione di applicazioni complesse Marco Camurri 6

7 Ora sappiamo che... il codice JS va inserito fra i tag <script> e </script> ( all'interno di head o body, ma è buona regola inserirlo SEMPRE alla fine di body per velocizzare il caricamento della pagina ) il codice JS può essere organizzato in funzioni parola chiave function nomefunz( nomepar1, nomepar2,... ) { // codice della funzione } la funzione può essere associata ad un evento: <button onclick="nomefunz()" > clicca qui </button> NON SCORDARE LE PARENTESI! Marco Camurri 7

8 Uso di variabili e commenti <html><body> <script> var x,y,z; x = 5; y = 6.5; z = x + y; alert( z ); Apri esempio le variabili si dichiarano facendo precedere il nome della variabile dalla parola chiave var In JS non si specifica il TIPO delle variabili! In C avremmo dovuto scrivere: int x,y,z; oppure float x,y,z; oppure... x = "mela"; y = 'pera' ; alert( x + y ); // alert( "fine" ); </script> </body> </html> le stringhe vanno racchiuse tra apici doppi o singoli (indifferente) il + tra stringhe effettua la concatenazione. Prova anche: alert( x + " " + y); l'istruzione alert non è eseguita poichè è all'interno di un commento. Per commenti su più righe: /* */ Marco Camurri 8

9 Tipi di dato in JavaScript number string boolean object x = 5; x = " ciao "; x = 4.5; x = true; A differenza di linguaggi come il C, in JavaScript la stessa variabile può contenere prima un numero, poi una stringa, poi un boolean, ecc... il tipo di dato non è legato alla variabile, ma al valore della variabile in un dato istante. così il programmatore non deve preoccuparsi troppo del tipo dei dati... MA... Marco Camurri 9

10 Tipi di dato (segue)... MA ATTENZIONE: il tipo di dato determina il modo in cui alcune operazioni sono effettuate! apri esempio var x = 5; var y = 6; alert(x+y); mostra: 11 var x = "5"; var y = "6"; alert(x+y); mostra: 56 var x = "5"; var y = 6; alert(x+y); mostra: 56 var x = "5"; var y = 5; if ( x == y ) alert( "vero" ); else alert( "falso" ); VERO! la "somma" tra una stringa e un numero viene interpretata come concatenazione tra stringhe. NOTA: esiste anche l'operatore === che in questo caso avrebbe restituito "falso" Marco Camurri 10

11 Confronto alfabetico e numerico var x = 100; var y = 2; if ( x < y ) alert( "vero" ); else alert( "falso" ); var x = "100"; var y = "2"; if ( x < y ) alert( "vero" ); else alert( "falso" ); ATTENZIONE!!! la stringa "100" in ordine alfabetico viene prima della stringa "2" mostra "falso" ( come ci aspettiamo) ordinamento numerico: ordinamento alfabetico: Marco Camurri 11

12 Le funzioni parseint e parsefloat la funzione parseint riceve come argomento una stringa e restituisce il numero intero corrispodente ( per numeri con virgola esiste la funzione parsefloat ). var x = "100", y = "2", a, b ; a = parseint( x ); // ora a contiene 100 b = parseint( y ); // ora b contiene 2 if ( x < y ) confronto alfabetico alert( "vero" ); else alert( "falso" ); if ( a < b ) confronto numerico alert( "vero" ); else alert( "falso" ); apri esempio Si può usare la stessa variabile come input e output di parseint: x="103"; x = parseint( x ); // ora x contiene 103 (numero) Marco Camurri 12

il valore "Not a Number" ( NaN ) var x = "ciao"; var y = parseint(x); alert( y ); apri esempio Per verificare se una variabile contiene il valore NaN occorre utilizzare la funzione isnan.

13 il valore "Not a Number" ( NaN ) var x = "ciao"; var y = parseint(x); alert( y ); apri esempio Per verificare se una variabile contiene il valore NaN occorre utilizzare la funzione isnan. if ( isnan(y) ) alert( "la variabile y non contiene un numero" ); else alert( "la variabile y contiene il numero " + y ); Attenzione: non si può utilizzare l'operatore == o === per confrontare valori NaN, poichè il confronto restituisce sempre valore falso. Esempio: la condizione ( y==nan ) è sempre falsa (anche se y contiene il valore NaN). Marco Camurri 13

14 Finestre di INPUT/OUTPUT Con JavaScript è possibile aprire finestre (box) che mostrano un messaggio all'utente o richiedono un valore all'utente. apri esempio alert confirm prompt Marco Camurri 14

15 Le funzioni alert e confirm alert: mostra un messaggio con la sola opzione OK var x=10, y=20; alert( "la somma fra " + x + " e " + y + " è " + (x+y) ); confirm: mostra un messaggio di richiesta con le opzioni OK e ANNULLA e restituisce true se l'utente ha premuto OK var risp; risp = confirm(" Procedere con il pagamento? "); if ( risp == true ) { // fai qualcosa... } else { /* fai qualcos'altro...*/ } Marco Camurri 15

16 La funzione prompt prompt: apre una finestra contenente un messaggio e un campo di testo in cui l'utente può scrivere. Se l'utente preme ok, la funzione restituisce una stringa che corrisponde al testo digitato (eventualmente "" ). Se preme ANNULLA, la funzione restituise il valore null. var nome = prompt(" Come ti chiami? "); if ( nome!= null ) alert( "ti chiami" + nome ); else alert( "hai premuto annulla" ); null è un altro valore speciale presente in JavaScript (come NaN). Il valore null indica assenza di informazione Marco Camurri 16

17 il valore undefined oltre a NaN e null, esiste un terzo valore "speciale : undefined Una variabile contiene il valore undefined quando non le è mai stato assegnato un valore. var x; alert(x); // mostra undefined perchè x non è mai // stata inizializzata Marco Camurri 17

18 Operatori Aritmetici + addizione - sottrazione * moltiplicazione / divisione % modulo Relazionali == uguale!= diverso > maggiore >= maggiore o uguale < minore <= minore o uguale Logici! NOT && AND OR Assegnamento = assegnamento += somma e assegnamento -= sottrazione e assegnamento /= divisione e assegnamento *= moltiplicazione e assegnamento Incremento / Decremento ++ incremento -- decremento Marco Camurri 18

19 Strutture di controllo if... else var punteggio; if ( punteggio == 100 ) alert( "livello superato" ); else alert( "hai perso" ); ciclo for var i; for( i=0; i<100; i++ ) { alert( "Conta: " + i ); } ciclo do-while var numero; apri esempio do { n = parseint( prompt("inserisci un numero fra 1 e 1000") ); } while( ( isnan(n) ) ( n < 0 ) ( n > 1000) ); Marco Camurri 19

Documenti analoghi

VBA Principali Comandi

VBA Principali Comandi Sintassi Significato Esempio Dim As Dichiarazione Dim x As Integer di una variabile Dim , , ,.,