english version
Indice dei tutorials: http://gheryd.blogspot.com/2011/06/javascript-gwt-tutorials.html
Prima di iniziare
Negli esempi che seguono, verrà spesso utilizzata l'istruzione "alert()". Questa funzione mostra una finestra con un messaggio.
Dove scrivere codice javascript.
Come gia probabilmente saprete la struttura base di una pagina HTML è la seguente:
<html>
<head>
</head>
<body>
</body>
</html>
Ci sono diversi posti dove inserire codice javascript:
1. all'interno del tag <script>:
Nella fase di caricamento della pagina, il browser interpreta ed ed esegue immediatamente il codice javascript all'interno del tag <script> appena caricato.
2. all'interno di un attributo evento:
<button onclick="alert("hello world");" >click me</button>
Il codice in questo caso viene eseguito sul click del pulsante.
3. in un file dedicato con estensione .js; in questo file non occorre racchiudere il codice nel tag <script>; per caricare il file nella pagina html aggiungere il seguente codice (preferibilmente all'interno del tag <head>:
<script src="myscript.js" type="text/javascript"></script>
nell'attributo src si specifica il nome del file con eventuale percorso (es: /js/myscript.js)
4. all'interno dell'attributo href del tag <a>:
<a href="javascript:alert(\"hell world\")">my link</a>
aggiungendo quindi il prefisso "javascript:". Il codice viene eseguito sul click del link.
Nota
Nella barra degli indirizzi è possibile scrivere codice javascript (per esempio per fare un debug), basta aggiungere il prefisso "javascript:" come per l'attributo href.
Sintassi di base
Le istruzioni javascript sono separatate dal punto e virgola ";". E' possible inserire più istruzioni su una riga, purchè separate da ";":
istruzione1; istruzione2;
Con le parentesi graffe si definiscono un gruppo di istruzioni (usate per cicli funzioni):
{
Le parentesi graffe si utilizzano anche per definire proprietà e metodi di un oggetto:
{
prop1: 10,
prop2: 20,
method1: function() { istruzioni }
}
Per inserire commenti su una sola riga si usa il il doppio slash (//)
Variabili e assegnazione
In javascript le variabili si dichiarano con "var":
var a;
Per assegnare un valore si usa "=";
a = 5;
finché non assegniamo un valore alla nostra variabile, essa è undefined.
Questo non significa che la variabile non è definita, ma che il suo valore non è definito.
Per chiarire questo concetto pensiamo ad una variabile come ad una scatola.
Quando dichiariamo una variabile, predisponiamo una scatola vuota con su stampato il suo nome (es.'a').
Se non la dichiariamo e la usiamo nel codice, questo genera un errore perché il browser non trova la scatola nel magazzino delle variabili (tecnicamente nella memoria del computer).
Assegnando un valore alla variabile, la "scatola" viene riempita con qualcosa. Con l'istruzione a = 5 abbiamo riempito la scatola con un numero intero. Possiamo successivamente riempirla con qualcos'altro, per esempio con una stringa (sequenza di caratteri): a = "ciao";
Questo ci fa capire che la stessa scatola può contenere qualsiasi cosa sia definibile in javascript come numeri, stringhe, funzioni e oggetti. L'oggetto è una specie di set di scatole, quindi la nostra variabile "scatola" può contenere a sua volta altre scatole.
Con la parola chiave "undefined", il browser ci comunica che la scatola è vuota, non contiene niente. Però occupa spazio nel nostro magazzino. Sarà bene riempirla per non sprecare spazio e quindi rendere più efficiente il notro codice.
Possiamo svuotare la "scatola" in questo modo:
a = undefined;
Possiamo dichiarare una variabile e assegnargli un valore in un'unica istruzione:
var a = 5;
possiamo dichiarare più variabili separandole con la virgola:
var a,b;
e pure inizializzarle:
var a = 5, b = "ciao", c;
Anche se può sembrare senza senso, in certi casi dichiarare una seconda volta la variabile ha lo scopo di assicurarci l'esistenza della "scatola" nel magazzino delle variabili. Sarà più chiaro più avanti.
Con "var" non possiamo definirne il tipo (javascript non è un linguaggio tipizzato); il tipo dipende dal valore che le è stato assegnato (la scatola può essere riempita con vari tipi di cose):
var myString = "Hello world"; // string
var myString2 = new String("Hello world 2"); / / string
var n = 0; //number
var status = true //boolean
var arr = [1, 4, 4]; //array
var myDate = new Date(); //object
Stringhe
Una sequenza di caratteri che definisce una stringa, può essere delimitata da doppie virgolette o singoli apici:
Operazioni
Abbiamo visto in precedenza l'operatore di assegnamento "=". Ne esistono altri:
+= concatena/somma al valore attuale
-= sottrai al valore attuale
/= dividi al valore attuale
*= moltiplica al valore attuale
Esempi:
var c = 10
c += 5; // c = 15
c -= 2; // c = 13
I simboli degli operatori aritmetici sono:
+ addizione
- sottrazione
* moltiplicazione
% modulo
Quindi possiamo assegnare ad una variabile il risultato di un'operazione matematica:
var a = 5;
var b = 10;
var c = a * b;
Le parentesi tonde sono utilizzate per raggruppare operazioni da eseguire in ordine prioritario:
var c = a * b * (a + b);
Il simbolo % calcola il resto di una divisione tra due numeri. Esempio:
var c = 10 % 5; // c =0
var c = 10 % 3; // c = 1
Per concatenare più stringhe si utilizza sempre il simbolo "+":
var s = "Hello"
var s2 = s+" world!";
Usando l'operatore "+" tra stringhe e numeri, otteniamo sempre una stringa, il numero viene convertito in stringa e poi concatenato:
var n = 10;
var s = "il numero è ";
var message = s+n; // = "il numero è 10"
In javascript i tipi sono automaticamente convertiti nel tipo più adatto:
var s = "10"; // string
var n = s * 5; // n = 50
la variabile stringa "s" viene convertita in un numero, perché in una moltiplicazione il simbolo di moltiplicazione può essere usato solo tra numeri.
Se la stringa non rappresenta un numero, il risultato aritmetico è "NaN" (è una parola chiave che significa Not a Number, non è un numero):
var s = "text";
var n = 10 * s; // n = NaN
il valore di "s", non essendo convertibile in numero, moltiplicato per un numero genera un valore di tipo numero non rappresentabile. Sulla scatola c'è stampato oltre al nome "n", anche il tipo "number", ma la scatola è vuota. Un modo javascript di comunicare che c'è stato un errore dell'operazione, senza sollevare errori.
Come già visto, il simbolo "+" può concatenare stringhe o sommare numeri. Se uno dei valori è una stringa, l'operazione effettuata è quella di concatenazione, anche se simbolicamente la variabile di tipo stringa contiene un numero:
var s = "10";
var n = s + 5; // s = 105
Come nel linguaggio "c" o "java", è possibile utilizzare gli operatori di incremento:
++ incrementa di 1
-- decrementa di 1
Esempi:
var a = 10;
a += 3; // a = 13
a -= 5; // a = 8;
var s = "Hello";
s += " World"; // s = "Hello World"
var m = 5;
var n = m++; // n = 5, m = 6
m = 5;
var n = ++m // n = 6, m = 6
Funzioni matematiche
Oltre alle operazioni aritmentiche, in javascript è possibile effettuare operazioni trigonometriche, logaritmiche, etc utilizzando l'oggetto Math. L'elenco dell'operazioni è elencato nella seconda parte di questo tutorial:
http://gheryd.blogspot.com/2011/07/javascript-le-basi-2a-parte.html
Infinito
Come si è gia accennato in precedenza, javascript gestisce certe anomalie usando parole chiavi.
Abbiamo visto "NaN" (Not a Number).
Un altro valore particolare è Infinity (infinito). Javascript è in grado di riempire una scatola di "infinito", cioè un valore così grande da non poter essere rappresentato.
Questo ci suggerisce che Infinity per javascript viene considerato un numero a tutti gli effetti che può essere utilizzato nelle normali operazioni matematiche.
Questo valore viene assegnato quando il valore numerico oltrepassa i seguenti limiti:
Infinity > 1.7976931348623157E+10308
-Infinity < -1.7976931348623157E+10308
quindi, la differenza con il concetto matematico a cui si attribuisce il numero infinito come un numero maggiore di qualsiasi numero finito, sta proprio nel limite massimo fisico previsto per i valori numerici finiti in javascript oltre il quale appunto i numeri non sono rappresentabili.
Quindi, se dividiamo un numero per zero, javascript non solleva un errore come in altri linguaggi, ma restituisce il valore di tipo numero "Infinity":
var n = 10 / 0; // n = Infinity
Ecco cosa succede operando con questo valore:
var n = Infinity - Infinity; // n = NaN
var n = 19 / Infinity; // n = 0
Incrementando, dividendo, moltiplicando o dividendo Infinity per qualsiasi numero otteniamo sempre un valore Infinity:
var n = 23 + Infinity; // n = Infinity
Valori speciali
Esistono tre valori particolari da tenere in considerazione:
- undefined
- NaN (Not a Number)
- null
Precedentemente abbiamo visto il valore "undefined", che come è stato gia detto, è il valore di default assegnato ad una variabile:
var a;
alert( typeof(a) ); // show "undefined"
Ma se ci riferiamo ad una variabile mai dichiarata, otteniamo un errore javascript:
alert( typeof(b) ); // questo genera un errore javascript perchè la variabile non è mai stata dichiarata
In sostanza se dichiariamo una variabile senza inizializzarla, il suo valore di default è "undefined", quindi l'istruzione:
var a;
è equivalente alla seguente assegnazione :
var a = undefined;
Il valore di una variabile può essere NaN (Not a Number) se il tipo della variabile è "number". Abbiamo già accennato precedentemente ad alcuni casi in cui si ottiene NaN.
Ecco altri casi in cui una variabile può essere NaN:
var a;
a++;
alert( typeof(a) ); //show "number"
alert( a ); //show NaN
qualsiasi operazione matematica con un NaN restituisce sempre un NaN.
var a;
var b = 0;
var c = a + b // c = NaN
Esistono delle funzione javascript che restituiscono NaN, per esempio la funzione parseInt:
var n1 = parseInt("22"); // n1 = 22;
var n2 = parseInt("Hello world"); // n2 = NaN;
nota: parseInt è una funzione javascript che 'tenta' di convertire una valore in un un intero (vedi la seconda parte del tutorial).
Per verificare se un valore non è numero si utilizza la funzione isNaN:
var checkNumber = isNaN(n1); // checkNumber = false, è un numero
checkNumber = isNaN(n2); // checkNumber = true, non è un numero
La funzione isNaN restituisce true anche se la variabile non è un numero:
var checkNumber = isNaN("testo qualsiasi"); // =true
Ma se la stringa contiene un numero:
var checkNumber = isNaN("10"); // =false
Quindi la funzione isNaN() verifica che il valore, anche se non di tipo numero, sia "usabile" come numero nelle operazioni aritmetiche.
La funzione isNaN è equivalente alla seguente operazione:
var checkNumber = (v*1)===NaN;
la moltiplicazione ci assicura un valore numerico., se, per esempio, v contenesse la stringa "10", il valore verrebbe correttamente convertito nel numero 10, altrimenti verrebbe restituito NaN.
Infine il valore "null" è un possibile valore per variabili di tipo oggetto:
var a = null;
alert( typeof(a) ); // show "object"
alert( a ); // show "null"
Questo valore può essere restituito da una funzione che dovrebbe restituire un oggetto. Per es:
var el = document.getElementById("myElement");
se non esiste nella pagina un elemento con id="myElement", il valore di 'el' sarà 'null' (vedi il tutorial sul DOM per interagire con la pagina HTML tramite javascript)
Esempio:
a = b + (c==2 || c==4 ? 4 : 8);
quindi alla variabile "b" verrà sommato il valore 4 se "c" è uguale a 2 o 4, altrimenti verrà sommato il valore 8.
Possiamo utilizzare l'espressione condizionale concatenando stringhe:
var s = "sesso: "+(gender=="m"?"maschio":"femmina");
Verificare undefined, NaN, null, false
In javascript una condizione non è verificata se il valore di una variabile è null, undefined, NaN o false. Per esempio:
if(b) {
alert("good value");
}else {
alert("b is null, false, undefined or false");
}
Se b=infinity, l'espressione è verificata.
Nota
ho sperimentato che nel caso "b" = undefined come nell'esempio seguente:
var b = undefined;
if(b!=null){
alert("b is not null");
}else {
alert("b is null");
}
la condizione non viene comunque verificata, come se null fosse equivalente al valore undefined.
Per verificare correttamente il valore null dovremmo anche controllare il tipo della variabile:
Senza un confronto del tipo, undefined è equivalente a null come a NaN.
Ecco un altro esempio:
var a = "10";
if( a==10 ) alert("equals 10");
La condizione è verificata perchè javascript converte la variabile "a" nel tipo "number".
Per verificare anche che il tipo:
var a = "10";
if( a===10 ) alert("equals 10");
la condizione non è quindi verificata.
Con l'operatore OR, oltre ai valori "speciali", possiamo assicurarci se una variabile ha una valore "valido:
var a = a || 0;
Normalmente si utilizza questo tipo di verifica in due casi:
1. variabile dichiarata in un altro file script; è sempre buona abitudine in questi casi effettuare una verifica perchè per qualche motivo il caricamento dello script è saltato; possiamo verificare l'esistenza di una variaibile con questo controllo:
try {a;}catch(ex){ alert("a not exists") }
2. variabile è un argomento in una funzione:
function(a) {
a = a ||0;
....
}
Attenzione: se non dichiariamo la variabile "a" e la utilizziamo come nella seguente espressione, viene sollevato un errore:
var b = (a||0) +1; // javascript error!
Ora vediamo il caso con l'operatore AND:
var c = a && b;
se solo una della due variabili non è mai stata dichiarata, si genera un errore javacript.
Se una delle due variabili "a" o "b" è null (o undefined, false, NaN), c sarà null (o undefined, false, NaN).
Esempio:
var c = null && false; // c=null
Se invece valori verificati sono"validi", allora "c" avrà il valore dell'ultima variabile, come nel seguente esempio;
Questo operatore restituisce true se il valore è null, undefined, NaN o false:
var a = null;
var b = !a; // b = true
var a; // oppure a = undefined
var b = !a; // b = true
a = NaN;
var b = !a; // b = true
a = true;
var b = !a; // b = true
Negando due volte "a" viene restituito true se il valore è "valido":
var b = !!a;
equivalente a:
var b = a ? true : false;
Come è noto, senza il break, verrebbero eseguire le istruzioni del blocco "case" successivo.
Funzioni
Le funzioni si definiscono nella seguente maniera:
function doSomething(param1, param2){
istruzioni
}
La funzione si chiama doSomething e accetta due parametri in ingresso. Tra parentesi graffe si inserisce quindi il codice da eseguire quando la funzione viene invocata.
Per invocare la funzione precedentemente definita basta scrivere:
doSomething("helloworld",5);
I parametri di una funzione non sono obbligatori, infatti la funzione può essere invocata senza passare argomenti:
doSomething();
spetta alle istruzioni della funzione verificare se un certo parametro è stato passato o meno.
function doSomething(param1, param2) {
if( !param1 ) {
param1 = 0;
}
...
}
oppure, come abbiamo visto in precedenza:
Ora proviamo un esempio completo:
<html>
<head>
<script type="text/javascript">
var clickCount = 0;
function showClickCount(){
clickCount++;
alert(clickCount);
}
</script>
</head>
<body>
<button onclick="showClickCount();">click me</button>
</body>
</html>
La funzione showClickCount incrementa di 1 la variabile clickCount (inizializzata a 0) e la mostra in una finestra tramite l'istruzione alert.
Ogni volta che viene premuto il pulsante "click me", viene quindi invocata la funzione.
Indice dei tutorials: http://gheryd.blogspot.com/2011/06/javascript-gwt-tutorials.html
Prima di iniziare
Negli esempi che seguono, verrà spesso utilizzata l'istruzione "alert()". Questa funzione mostra una finestra con un messaggio.
Dove scrivere codice javascript.
Come gia probabilmente saprete la struttura base di una pagina HTML è la seguente:
<html>
<head>
</head>
<body>
</body>
</html>
Ci sono diversi posti dove inserire codice javascript:
1. all'interno del tag <script>:
<script type="text/javascript">
...
</script>
Normalmente si inseririsce il tag <script> all'interno del <head>, ma è possibile inserirlo anche all'interno del <body>.Nella fase di caricamento della pagina, il browser interpreta ed ed esegue immediatamente il codice javascript all'interno del tag <script> appena caricato.
2. all'interno di un attributo evento:
<button onclick="alert("hello world");" >click me</button>
Il codice in questo caso viene eseguito sul click del pulsante.
3. in un file dedicato con estensione .js; in questo file non occorre racchiudere il codice nel tag <script>; per caricare il file nella pagina html aggiungere il seguente codice (preferibilmente all'interno del tag <head>:
<script src="myscript.js" type="text/javascript"></script>
nell'attributo src si specifica il nome del file con eventuale percorso (es: /js/myscript.js)
4. all'interno dell'attributo href del tag <a>:
<a href="javascript:alert(\"hell world\")">my link</a>
aggiungendo quindi il prefisso "javascript:". Il codice viene eseguito sul click del link.
Nota
Nella barra degli indirizzi è possibile scrivere codice javascript (per esempio per fare un debug), basta aggiungere il prefisso "javascript:" come per l'attributo href.
Sintassi di base
Le istruzioni javascript sono separatate dal punto e virgola ";". E' possible inserire più istruzioni su una riga, purchè separate da ";":
istruzione1; istruzione2;
Con le parentesi graffe si definiscono un gruppo di istruzioni (usate per cicli funzioni):
{
istruzione1;
istruzione2;
}Le parentesi graffe si utilizzano anche per definire proprietà e metodi di un oggetto:
{
prop1: 10,
prop2: 20,
method1: function() { istruzioni }
}
Per inserire commenti su una sola riga si usa il il doppio slash (//)
// my comment
E' possibile inserire un commento sulla stessa riga dopo un istruzione:
istruzione1; //comment
I commenti su più righe si riacchiudono tra i caratteri di apertura /* e di chiusura */:
istruzione1; //comment
I commenti su più righe si riacchiudono tra i caratteri di apertura /* e di chiusura */:
/*
my comment
...
*/
Variabili e assegnazione
In javascript le variabili si dichiarano con "var":
var a;
Per assegnare un valore si usa "=";
a = 5;
finché non assegniamo un valore alla nostra variabile, essa è undefined.
Questo non significa che la variabile non è definita, ma che il suo valore non è definito.
Per chiarire questo concetto pensiamo ad una variabile come ad una scatola.
Quando dichiariamo una variabile, predisponiamo una scatola vuota con su stampato il suo nome (es.'a').
Se non la dichiariamo e la usiamo nel codice, questo genera un errore perché il browser non trova la scatola nel magazzino delle variabili (tecnicamente nella memoria del computer).
Assegnando un valore alla variabile, la "scatola" viene riempita con qualcosa. Con l'istruzione a = 5 abbiamo riempito la scatola con un numero intero. Possiamo successivamente riempirla con qualcos'altro, per esempio con una stringa (sequenza di caratteri): a = "ciao";
Questo ci fa capire che la stessa scatola può contenere qualsiasi cosa sia definibile in javascript come numeri, stringhe, funzioni e oggetti. L'oggetto è una specie di set di scatole, quindi la nostra variabile "scatola" può contenere a sua volta altre scatole.
Con la parola chiave "undefined", il browser ci comunica che la scatola è vuota, non contiene niente. Però occupa spazio nel nostro magazzino. Sarà bene riempirla per non sprecare spazio e quindi rendere più efficiente il notro codice.
Possiamo svuotare la "scatola" in questo modo:
a = undefined;
Possiamo dichiarare una variabile e assegnargli un valore in un'unica istruzione:
var a = 5;
possiamo dichiarare più variabili separandole con la virgola:
var a,b;
e pure inizializzarle:
var a = 5, b = "ciao", c;
Non viene sollevato errore javascript se dichiariamo più volte la stessa variabile:
var a = 5;
var a = "Hello world";
Se una variabile viene dichiarata una seconda volta senza assegnarne un valore, non perde il suo valore precedente:
var a = 5;
var a; // a = 5
Con "var" non possiamo definirne il tipo (javascript non è un linguaggio tipizzato); il tipo dipende dal valore che le è stato assegnato (la scatola può essere riempita con vari tipi di cose):
var myString = "Hello world"; // string
var myString2 = new String("Hello world 2"); / / string
var n = 0; //number
var status = true //boolean
var arr = [1, 4, 4]; //array
var myDate = new Date(); //object
Stringhe
Una sequenza di caratteri che definisce una stringa, può essere delimitata da doppie virgolette o singoli apici:
var s = "Hello World";
var s2 = 'Hello world 2';
Possiamo inserire apici delimitati da doppie virgolette o viceversa:
var s1 = " Hello ' World ' ";
var s2 = ' Hello " World " ';
Esistono caratteri speciali che possono essere inseriti tramite il carattere backslash:
var s = " doppie virgolette: \" backslash: \\ ritorno a capo \n tabulazione: \t";
Array
Gli array sono una lista di cose come numeri,stringhe,etc.
Un array è come una scatola che contiene al suo interno varie scatole numerate a partire da zero "'0".
Per definire un array si usano le parentesi quadre:
var a = [];
Questo è un array vuoto. Si riempe con questa sintassi:
a[0] = "ciao";
a[1] = 10;
a[2] = 21.43;
Oppure:
var a = ["ciao", 10, 21.43];
Come potete constatare, i vari elementi dell'array sono eterogenei, cioè non devono essere necessariamente dello stesso tipo. Nell'esempio ll primo elemento è una stringa (elemento 0), il secondo un numero (elemento 1).
Si può accendere quindi al valore di uno degli elementi tramite l'indice numerico:
var b = a[1];
Attenzione, se usate un indice superiore alla dimensione dell'array, viene generato un errore javascript.
Per sapere quanti elementi ha un array, si usa la proprietà "length":
var lunghezzaArray = a.length;
Avendo il primo elemento indice 0, per accedere all'ultimo elemento:
var b = a[a.length-1];
L'array che abbiamo creato in linguaggio matematico sarebbe definito "vettore", cioè è un array monodimensionale. Ogni elemento è uno scalare.
E' possibile creare array multidimensionali (matrici):
var m = [ ];
m[0] = [255,"hello"]; // prima riga
m[1] = ["ciao", 10.23]; // seconda riga
Questa è una matrice bidimensionale 2x2, ogni riga è un vettore.
Per accedere ad uno degli elementi di questa matrice:
var b = m[1,0]; //seconda riga, prima colonna "ciao"
Per saperne di più, date un'occhiata al tutorial: http://gheryd.blogspot.com/2011/07/javascript-le-basi-2a-parte.html
Oggetti
Nella nostra analogia con le scatole, abbiamo descritto gli oggetti come un set di scatole che a loro volta possono contenere altre cose tipo numeri, stringhe, funzioni, array e altri oggetti.
Quindi è molto simile ad un array, ma con la differenza che le scatole che contiene, non sono numerate, ma etichettate con dei nomi come negli array associativi di certi linguaggi.
Un oggetto può essere creato in questa maniera:
var a = {saluto: "ciao", numero:10 };
Per accedere alle variabili dell'oggetto (il nome tecnico è proprietà), si usa il carattere punto ".":
alert( a.saluto );
Alternativamente si può accedere alla proprietà di un oggetto tramite le parentesi quadre:
alert( a["saluto"] );
Per saperne di più date un occhiata al seguente tutorial:
http://gheryd.blogspot.com/2011/06/javascript-programmazione-ad-oggetti.html
vi consiglio però di finire di leggere questo tutorial.
var s1 = " Hello ' World ' ";
var s2 = ' Hello " World " ';
Esistono caratteri speciali che possono essere inseriti tramite il carattere backslash:
var s = " doppie virgolette: \" backslash: \\ ritorno a capo \n tabulazione: \t";
Array
Gli array sono una lista di cose come numeri,stringhe,etc.
Un array è come una scatola che contiene al suo interno varie scatole numerate a partire da zero "'0".
Per definire un array si usano le parentesi quadre:
var a = [];
Questo è un array vuoto. Si riempe con questa sintassi:
a[0] = "ciao";
a[1] = 10;
a[2] = 21.43;
Oppure:
var a = ["ciao", 10, 21.43];
Come potete constatare, i vari elementi dell'array sono eterogenei, cioè non devono essere necessariamente dello stesso tipo. Nell'esempio ll primo elemento è una stringa (elemento 0), il secondo un numero (elemento 1).
Si può accendere quindi al valore di uno degli elementi tramite l'indice numerico:
var b = a[1];
Attenzione, se usate un indice superiore alla dimensione dell'array, viene generato un errore javascript.
Per sapere quanti elementi ha un array, si usa la proprietà "length":
var lunghezzaArray = a.length;
Avendo il primo elemento indice 0, per accedere all'ultimo elemento:
var b = a[a.length-1];
L'array che abbiamo creato in linguaggio matematico sarebbe definito "vettore", cioè è un array monodimensionale. Ogni elemento è uno scalare.
E' possibile creare array multidimensionali (matrici):
var m = [ ];
m[0] = [255,"hello"]; // prima riga
m[1] = ["ciao", 10.23]; // seconda riga
Questa è una matrice bidimensionale 2x2, ogni riga è un vettore.
Per accedere ad uno degli elementi di questa matrice:
var b = m[1,0]; //seconda riga, prima colonna "ciao"
Per saperne di più, date un'occhiata al tutorial: http://gheryd.blogspot.com/2011/07/javascript-le-basi-2a-parte.html
Oggetti
Nella nostra analogia con le scatole, abbiamo descritto gli oggetti come un set di scatole che a loro volta possono contenere altre cose tipo numeri, stringhe, funzioni, array e altri oggetti.
Quindi è molto simile ad un array, ma con la differenza che le scatole che contiene, non sono numerate, ma etichettate con dei nomi come negli array associativi di certi linguaggi.
Un oggetto può essere creato in questa maniera:
var a = {saluto: "ciao", numero:10 };
Per accedere alle variabili dell'oggetto (il nome tecnico è proprietà), si usa il carattere punto ".":
alert( a.saluto );
Alternativamente si può accedere alla proprietà di un oggetto tramite le parentesi quadre:
alert( a["saluto"] );
Per saperne di più date un occhiata al seguente tutorial:
http://gheryd.blogspot.com/2011/06/javascript-programmazione-ad-oggetti.html
vi consiglio però di finire di leggere questo tutorial.
Typeof
E' possible verificare il tipo di un valore di una variabile tramite la funzione typeof:
var type = typeof(a);
i valori possibili restituiti sono le seguenti stringhe:
- "number"
- "string"
- "boolean"
- "object"
- "function"
- "undefined"
Una sintassi alternativa di typeof è:
var type = typeof myVar;
Quindi questa istruzione non dice cosa contiene la nostra scatola, ma di che tipo è (un numero, una stringa, etc).
Notate che il tipo "number" indica sia numeri interi (integer) che numeri con la virgola (float).
Notate che il tipo "number" indica sia numeri interi (integer) che numeri con la virgola (float).
Abbiamo visto in precedenza l'operatore di assegnamento "=". Ne esistono altri:
+= concatena/somma al valore attuale
-= sottrai al valore attuale
/= dividi al valore attuale
*= moltiplica al valore attuale
Esempi:
var c = 10
c += 5; // c = 15
c -= 2; // c = 13
I simboli degli operatori aritmetici sono:
+ addizione
- sottrazione
* moltiplicazione
% modulo
Quindi possiamo assegnare ad una variabile il risultato di un'operazione matematica:
var a = 5;
var b = 10;
var c = a * b;
Le parentesi tonde sono utilizzate per raggruppare operazioni da eseguire in ordine prioritario:
var c = a * b * (a + b);
Il simbolo % calcola il resto di una divisione tra due numeri. Esempio:
var c = 10 % 5; // c =0
var c = 10 % 3; // c = 1
Per concatenare più stringhe si utilizza sempre il simbolo "+":
var s = "Hello"
var s2 = s+" world!";
Usando l'operatore "+" tra stringhe e numeri, otteniamo sempre una stringa, il numero viene convertito in stringa e poi concatenato:
var n = 10;
var s = "il numero è ";
var message = s+n; // = "il numero è 10"
In javascript i tipi sono automaticamente convertiti nel tipo più adatto:
var s = "10"; // string
var n = s * 5; // n = 50
la variabile stringa "s" viene convertita in un numero, perché in una moltiplicazione il simbolo di moltiplicazione può essere usato solo tra numeri.
La stringa vuota viene convertita in 0:
var s = "";
var n = 10 *s; // n = 0;
Anche i valori null (un parola chiave spiegata più avanti) e undefined sono convertiti nel valore numerico zero.
Se la stringa non rappresenta un numero, il risultato aritmetico è "NaN" (è una parola chiave che significa Not a Number, non è un numero):
var s = "text";
var n = 10 * s; // n = NaN
il valore di "s", non essendo convertibile in numero, moltiplicato per un numero genera un valore di tipo numero non rappresentabile. Sulla scatola c'è stampato oltre al nome "n", anche il tipo "number", ma la scatola è vuota. Un modo javascript di comunicare che c'è stato un errore dell'operazione, senza sollevare errori.
Come già visto, il simbolo "+" può concatenare stringhe o sommare numeri. Se uno dei valori è una stringa, l'operazione effettuata è quella di concatenazione, anche se simbolicamente la variabile di tipo stringa contiene un numero:
var s = "10";
var n = s + 5; // s = 105
Come nel linguaggio "c" o "java", è possibile utilizzare gli operatori di incremento:
++ incrementa di 1
-- decrementa di 1
Esempi:
var a = 10;
a += 3; // a = 13
a -= 5; // a = 8;
var s = "Hello";
s += " World"; // s = "Hello World"
var m = 5;
var n = m++; // n = 5, m = 6
m = 5;
var n = ++m // n = 6, m = 6
Funzioni matematiche
Oltre alle operazioni aritmentiche, in javascript è possibile effettuare operazioni trigonometriche, logaritmiche, etc utilizzando l'oggetto Math. L'elenco dell'operazioni è elencato nella seconda parte di questo tutorial:
http://gheryd.blogspot.com/2011/07/javascript-le-basi-2a-parte.html
Infinito
Come si è gia accennato in precedenza, javascript gestisce certe anomalie usando parole chiavi.
Abbiamo visto "NaN" (Not a Number).
Un altro valore particolare è Infinity (infinito). Javascript è in grado di riempire una scatola di "infinito", cioè un valore così grande da non poter essere rappresentato.
Questo ci suggerisce che Infinity per javascript viene considerato un numero a tutti gli effetti che può essere utilizzato nelle normali operazioni matematiche.
Questo valore viene assegnato quando il valore numerico oltrepassa i seguenti limiti:
Infinity > 1.7976931348623157E+10308
-Infinity < -1.7976931348623157E+10308
quindi, la differenza con il concetto matematico a cui si attribuisce il numero infinito come un numero maggiore di qualsiasi numero finito, sta proprio nel limite massimo fisico previsto per i valori numerici finiti in javascript oltre il quale appunto i numeri non sono rappresentabili.
Quindi, se dividiamo un numero per zero, javascript non solleva un errore come in altri linguaggi, ma restituisce il valore di tipo numero "Infinity":
var n = 10 / 0; // n = Infinity
Ecco cosa succede operando con questo valore:
var n = Infinity - Infinity; // n = NaN
var n = 19 / Infinity; // n = 0
Incrementando, dividendo, moltiplicando o dividendo Infinity per qualsiasi numero otteniamo sempre un valore Infinity:
var n = 23 + Infinity; // n = Infinity
Valori speciali
Esistono tre valori particolari da tenere in considerazione:
- undefined
- NaN (Not a Number)
- null
Precedentemente abbiamo visto il valore "undefined", che come è stato gia detto, è il valore di default assegnato ad una variabile:
var a;
alert( typeof(a) ); // show "undefined"
Ma se ci riferiamo ad una variabile mai dichiarata, otteniamo un errore javascript:
alert( typeof(b) ); // questo genera un errore javascript perchè la variabile non è mai stata dichiarata
In sostanza se dichiariamo una variabile senza inizializzarla, il suo valore di default è "undefined", quindi l'istruzione:
var a;
è equivalente alla seguente assegnazione :
var a = undefined;
Il valore di una variabile può essere NaN (Not a Number) se il tipo della variabile è "number". Abbiamo già accennato precedentemente ad alcuni casi in cui si ottiene NaN.
Ecco altri casi in cui una variabile può essere NaN:
var a;
a++;
alert( typeof(a) ); //show "number"
alert( a ); //show NaN
qualsiasi operazione matematica con un NaN restituisce sempre un NaN.
var a;
var b = 0;
var c = a + b // c = NaN
Esistono delle funzione javascript che restituiscono NaN, per esempio la funzione parseInt:
var n1 = parseInt("22"); // n1 = 22;
var n2 = parseInt("Hello world"); // n2 = NaN;
nota: parseInt è una funzione javascript che 'tenta' di convertire una valore in un un intero (vedi la seconda parte del tutorial).
Per verificare se un valore non è numero si utilizza la funzione isNaN:
var checkNumber = isNaN(n1); // checkNumber = false, è un numero
checkNumber = isNaN(n2); // checkNumber = true, non è un numero
La funzione isNaN restituisce true anche se la variabile non è un numero:
var checkNumber = isNaN("testo qualsiasi"); // =true
Ma se la stringa contiene un numero:
var checkNumber = isNaN("10"); // =false
Quindi la funzione isNaN() verifica che il valore, anche se non di tipo numero, sia "usabile" come numero nelle operazioni aritmetiche.
La funzione isNaN è equivalente alla seguente operazione:
var checkNumber = (v*1)===NaN;
la moltiplicazione ci assicura un valore numerico., se, per esempio, v contenesse la stringa "10", il valore verrebbe correttamente convertito nel numero 10, altrimenti verrebbe restituito NaN.
Infine il valore "null" è un possibile valore per variabili di tipo oggetto:
var a = null;
alert( typeof(a) ); // show "object"
alert( a ); // show "null"
Questo valore può essere restituito da una funzione che dovrebbe restituire un oggetto. Per es:
var el = document.getElementById("myElement");
se non esiste nella pagina un elemento con id="myElement", il valore di 'el' sarà 'null' (vedi il tutorial sul DOM per interagire con la pagina HTML tramite javascript)
Espressioni condizionali
Le espressioni condizionali come in tutti i linguaggi più diffusi si verificano con l'operatore if:
if(condition) {
istruzioni
}
If(condition) {
...
}else {
istruzioni
}
if(condition) {
istruzioni
}else if(condition2) {
istruzioni
}else {
istruzioni
}
In javascript un espressione condizionale non restituisce solo true o false, ma anche un valore che può essere null, undefined o NaN (Not a Number).
La condizione è quindi verificata se non restituisce i seguenti valori:
- false
- undefined
- null
- NaN
Ecco un esempio:
var a = "ciao";
if( a=="ciao" ) {
alert("è un saluto");
}
L'espressione a=="ciao" restituisce true (cioè è vera), per cui viene eseguita l'istruzione alert che visualizza il messaggio "è un saluto".
Operatori di confronto e operatori logici
Gli operatori di confronto restituiscono sempre un valore booleano true (vero) o false (falso), mentre, come vedremo in seguito, gli operatori logici in javascript hanno un comportamento differente nel senso che se applicati a valori booleani, restituiscono valori booleani, altrimenti possono restituire valori di altro tipo come stringhe, numeri, undefined, null, eccetera.
Segue la lista di questi operatori:
In javascript un espressione condizionale non restituisce solo true o false, ma anche un valore che può essere null, undefined o NaN (Not a Number).
La condizione è quindi verificata se non restituisce i seguenti valori:
- false
- undefined
- null
- NaN
Ecco un esempio:
var a = "ciao";
if( a=="ciao" ) {
alert("è un saluto");
}
L'espressione a=="ciao" restituisce true (cioè è vera), per cui viene eseguita l'istruzione alert che visualizza il messaggio "è un saluto".
Operatori di confronto e operatori logici
Gli operatori di confronto restituiscono sempre un valore booleano true (vero) o false (falso), mentre, come vedremo in seguito, gli operatori logici in javascript hanno un comportamento differente nel senso che se applicati a valori booleani, restituiscono valori booleani, altrimenti possono restituire valori di altro tipo come stringhe, numeri, undefined, null, eccetera.
Segue la lista di questi operatori:
!= not equals: (confronto)
|| or (logico)
&& and (logico)
! not (logico)
== equals (confronto)
> greater (confronto)
>= greater or equals (confronto)
< less (confronto)
<= less or equals (confronto)
Esempio:
if( a<10 || a>20 ) {
istruzioni
}else if( b>10 && b<=20 ) {
//istruzioni
}
E' possibile assegnare il risultato di un'espressione di questo tipo ad una variabile:
var result = a<10;
Il valore della variabile result sarà quindi true o false.
E' possibile assegnare il risultato di un'espressione di questo tipo ad una variabile:
var result = a<10;
Il valore della variabile result sarà quindi true o false.
Assegnazioni condizionali (operatore condizionale ternario)
E' possibile scrivere una condizione direttamente su un'assegnazione:
E' possibile scrivere una condizione direttamente su un'assegnazione:
a = b ==1 ? "text1" : "text2";
quindi se "b" è uguale a 1, viene assegnato ad "a" la stringa "text1" altrimenti "text2".
nota: l'espressione precedente è equivalente a: a = b ==1 && "text1" || "text2";
La condizione è il termine prima del punto di domanda e i due valori in caso rispettivamente di true e false sono separati dal caratteri due punti .
La condizione è il termine prima del punto di domanda e i due valori in caso rispettivamente di true e false sono separati dal caratteri due punti .
expr ? value1 : value2
Possiamo inserire questo tipo di condizioni all'interno di una operazione:a = b + (c==2 || c==4 ? 4 : 8);
quindi alla variabile "b" verrà sommato il valore 4 se "c" è uguale a 2 o 4, altrimenti verrà sommato il valore 8.
Possiamo utilizzare l'espressione condizionale concatenando stringhe:
var s = "sesso: "+(gender=="m"?"maschio":"femmina");
Verificare undefined, NaN, null, false
In javascript una condizione non è verificata se il valore di una variabile è null, undefined, NaN o false. Per esempio:
if(b) {
alert("good value");
}else {
alert("b is null, false, undefined or false");
}
Se b=infinity, l'espressione è verificata.
Nota
ho sperimentato che nel caso "b" = undefined come nell'esempio seguente:
var b = undefined;
if(b!=null){
alert("b is not null");
}else {
alert("b is null");
}
la condizione non viene comunque verificata, come se null fosse equivalente al valore undefined.
Per verificare correttamente il valore null dovremmo anche controllare il tipo della variabile:
if(b!==null){
alert("b is not null");
}else {
alert("b is null");
}
Il simboli "===" e "!==" verificano anche il type della variabile. Nel nostro caso viene verificato anche che b sia di tipo "object".}
Senza un confronto del tipo, undefined è equivalente a null come a NaN.
Ecco un altro esempio:
var a = "10";
if( a==10 ) alert("equals 10");
La condizione è verificata perchè javascript converte la variabile "a" nel tipo "number".
Per verificare anche che il tipo:
var a = "10";
if( a===10 ) alert("equals 10");
la condizione non è quindi verificata.
Con l'operatore OR, oltre ai valori "speciali", possiamo assicurarci se una variabile ha una valore "valido:
var a = a || 0;
Normalmente si utilizza questo tipo di verifica in due casi:
1. variabile dichiarata in un altro file script; è sempre buona abitudine in questi casi effettuare una verifica perchè per qualche motivo il caricamento dello script è saltato; possiamo verificare l'esistenza di una variaibile con questo controllo:
try {a;}catch(ex){ alert("a not exists") }
2. variabile è un argomento in una funzione:
function(a) {
a = a ||0;
....
}
Attenzione: se non dichiariamo la variabile "a" e la utilizziamo come nella seguente espressione, viene sollevato un errore:
var b = (a||0) +1; // javascript error!
Ora vediamo il caso con l'operatore AND:
var c = a && b;
se solo una della due variabili non è mai stata dichiarata, si genera un errore javacript.
Se una delle due variabili "a" o "b" è null (o undefined, false, NaN), c sarà null (o undefined, false, NaN).
Esempio:
var c = null && false; // c=null
Se invece valori verificati sono"validi", allora "c" avrà il valore dell'ultima variabile, come nel seguente esempio;
var c = 5 && 16; // c = 16
Concludiamo con l'operatore NOT.Questo operatore restituisce true se il valore è null, undefined, NaN o false:
var a = null;
var b = !a; // b = true
var a; // oppure a = undefined
var b = !a; // b = true
a = NaN;
var b = !a; // b = true
a = true;
var b = !a; // b = true
Negando due volte "a" viene restituito true se il valore è "valido":
var b = !!a;
equivalente a:
var b = a ? true : false;
Switch
Al posto di una serie di if/else, può essere più comodo (e forse più chiaro) usare switch per eseguire una serie di istruzioni in base al valore di una certa variabile:
switch(param){
case a:
istruzioni
break;
case b: case c;
istruzioni
break;
default:
istruzioni
}
Loop (cicli)
Ciclo for:
for(var i=0; i<10; i++) {
istruzioni
}
all'interno delle parentesi del for, vengono specificati tre argomenti separati da ";", il primo inizializza la variabile contatore, il secondo specifica la condizione che deve essere verificata per eseguire il blocco di istruzioni, il terzo modifica il valore del contatore ad ogni ciclo (es. i++, i--, i+5, i*2, etc).
Si utilizza "break" per interrompere l'esecuzione del ciclo for e "continue" per passare al ciclo successivo senza quindi eseguire le istruzioni successive nel blocco.
Ecco un esempio che cerca i primi 10 numeri pari in un array:
var arr = [5,8,10,20,23,37,93,102,243,332,372, 423, 444, 523, 593, 700];
var evenNumbers = "";
var sep = "";
for(var i=0; i<arr.length; i++) {
if( i==10 ) break; //esce dal loop se abbiamo ciclato gia 10 numeri
var v = arr[i];
if( v%2!=0 ) continue; // se è un numero dispari, passo al ciclo successivo
eventNumbers += sep + v;
sep = ",";
}
alert(eventNumbers);
Ciclo for per oggetti:
Si utilizza "break" per interrompere l'esecuzione del ciclo for e "continue" per passare al ciclo successivo senza quindi eseguire le istruzioni successive nel blocco.
Ecco un esempio che cerca i primi 10 numeri pari in un array:
var arr = [5,8,10,20,23,37,93,102,243,332,372, 423, 444, 523, 593, 700];
var evenNumbers = "";
var sep = "";
for(var i=0; i<arr.length; i++) {
if( i==10 ) break; //esce dal loop se abbiamo ciclato gia 10 numeri
var v = arr[i];
if( v%2!=0 ) continue; // se è un numero dispari, passo al ciclo successivo
eventNumbers += sep + v;
sep = ",";
}
alert(eventNumbers);
Ciclo for per oggetti:
for(var property in obj) {
var value = obj[property];
var value = obj[property];
...
}
Ciclo while (a condizione iniziale):
while(condition) {
istruzioni
}
Ciclo do/while (a condizione finale, il blocco di istruzione viene eseguito almeno una volta):
do{
istruzioni
}while(condition);
Le funzioni si definiscono nella seguente maniera:
function doSomething(param1, param2){
istruzioni
}
La funzione si chiama doSomething e accetta due parametri in ingresso. Tra parentesi graffe si inserisce quindi il codice da eseguire quando la funzione viene invocata.
Per invocare la funzione precedentemente definita basta scrivere:
doSomething("helloworld",5);
I parametri di una funzione non sono obbligatori, infatti la funzione può essere invocata senza passare argomenti:
doSomething();
spetta alle istruzioni della funzione verificare se un certo parametro è stato passato o meno.
function doSomething(param1, param2) {
if( !param1 ) {
param1 = 0;
}
...
}
oppure, come abbiamo visto in precedenza:
function doSomething(param1, param2) {
param1 = param1 || 0;
...
}
E buona abitudine assegnare dei valori dei default ai parametri in ingresso ad una funzione.
Per maggiori dettagli sulle funzioni vedere il tutorial:
Ora proviamo un esempio completo:
<html>
<head>
<script type="text/javascript">
var clickCount = 0;
function showClickCount(){
clickCount++;
alert(clickCount);
}
</script>
</head>
<body>
<button onclick="showClickCount();">click me</button>
</body>
</html>
La funzione showClickCount incrementa di 1 la variabile clickCount (inizializzata a 0) e la mostra in una finestra tramite l'istruzione alert.
Ogni volta che viene premuto il pulsante "click me", viene quindi invocata la funzione.
Strumenti
Ormai ogni moderno browser è dotato di uno strumento per effettuare debugging su codice javascript.
- Firefox: installare il plugin Firebug
- Internet Explorer (IE8/IE9): cercare nel menu strumenti per developer, da questo strumento è possibile verificare la compatibilità fino alla versione IE7
- Chrome: cercare nel menu strumenti per sviluppatori
- Opera: se non ricordo male il tool si chiama "drangonfly"
Safari: cito le indicazioni dal sito ufficiale "enable the Develop menu in Safari's Advanced preferences.", il tool sembra lo stesso di Chrome.
Questi strumenti oltre ad una console javascript, consentono di analizzare il contenuto html e gli stili applicati. Consentono anche di editare i contenuti.
Alcuni permettono anche di accedere alle nuove funzionalità HTML5 come il local db sqlite su cui si possono effettuare query sql (chrome e safari).
E interessante la funzionalità "profiler" che consente di misurare i tempi di esecuzione del nostro codice javascript.
Imparare ad utilizzare questi strumenti è importante per creare codice javascript solido e performante. Inoltre ci consente di individuare gli errori più velocemente.
Ogni nuovo browser supporta l'oggetto "console" che consente di loggare nel nostro codice javascript:
console.log("a="+a);
il messaggio viene stampato sulla console javascript.
ok!! :D
RispondiElimina