english version
Indice dei tutorials: http://gheryd.blogspot.com/2011/06/javascript-gwt-tutorials.html
Indice:
String
Come abbiamo visto nella prima parte, possiamo creare una stringa in questa maniera:
var s = "Hello world";
in alternativa è possible creare una stringa istanziando un oggetto String:
var s = new String("Hello world");
Questo ci ricorda che una stringa è un oggetto che possiede metodi e proprietà.
Ad esempio, per sapere quanti caratteri ci sono in una stringa:
var l = s.length;
Per verificare se una stringa è vuota si può verificare in questo modo:
if( s.length==0 ) {
alert("String is void");
}
equivalente a:
if( s=="" ) {
alert("String is void");
}
ma il primo modo dovrebbe essere più veloce perchè viene verificato un numero, il secondo richiede un confronto tra stringhe che è un pochino più lento.
L'oggetto String offre diversi utili metodi che spiego in seguito.
Dato un carattere separatore, è possibile ottenere un array di stringhe:
var words = "Hello world!".split(" "); // words = ["Hello", "world"];
Posso limitare i valori della lista specificando nel secondo argomento il numero massimo di stringhe da restituire:
var s = "uno,due, tre,quattro,cinque";
var list = s.split(",", 3); // list = ["uno", "due", "tre"];
Per ottenere una porzione di una string si possono utilizzare due metodi:
- substr(startpos, length)
- slice(startpos, endpos)
Indice dei tutorials: http://gheryd.blogspot.com/2011/06/javascript-gwt-tutorials.html
Indice:
- operazioni matematiche
- string
- array
- date
- funzione void
- funzioni timer
- funzioni globali di javascript
Operazioni matematiche
Oltre alle operazioni aritmentiche, in javascript è possibile effettuare operazioni trigonometriche, logaritmiche, etc utilizzando l'oggetto Math:
Math.abs(a) // the absolute value of a
Math.acos(a) // arc cosine of a
Math.asin(a) // arc sine of a
Math.atan(a) // arc tangent of a
Math.atan2(a,b) // arc tangent of a/b
Math.ceil(a) // integer closest to a and not less than a
Math.cos(a) // cosine of a
Math.exp(a) // exponent of a
Math.floor(a) // integer closest to a, not greater than a
Math.log(a) // log of a base e
Math.max(a,b) // the maximum of a and b
Math.min(a,b) // the minimum of a and b
Math.pow(a,b) // a to the power b
Math.random() // pseudorandom number 0 to 1
Math.round(a) // integer closest to a
Math.sin(a) // sine of a
Math.sqrt(a) // square root of a
Math.tan(a) // tangent of a
String
Come abbiamo visto nella prima parte, possiamo creare una stringa in questa maniera:
var s = "Hello world";
in alternativa è possible creare una stringa istanziando un oggetto String:
var s = new String("Hello world");
Questo ci ricorda che una stringa è un oggetto che possiede metodi e proprietà.
Ad esempio, per sapere quanti caratteri ci sono in una stringa:
var l = s.length;
Per verificare se una stringa è vuota si può verificare in questo modo:
if( s.length==0 ) {
alert("String is void");
}
equivalente a:
if( s=="" ) {
alert("String is void");
}
ma il primo modo dovrebbe essere più veloce perchè viene verificato un numero, il secondo richiede un confronto tra stringhe che è un pochino più lento.
L'oggetto String offre diversi utili metodi che spiego in seguito.
Dato un carattere separatore, è possibile ottenere un array di stringhe:
var words = "Hello world!".split(" "); // words = ["Hello", "world"];
Posso limitare i valori della lista specificando nel secondo argomento il numero massimo di stringhe da restituire:
var s = "uno,due, tre,quattro,cinque";
var list = s.split(",", 3); // list = ["uno", "due", "tre"];
Per ottenere una porzione di una string si possono utilizzare due metodi:
- substr(startpos, length)
- slice(startpos, endpos)
Ecco degli esempi:
var s = "Javascript is good!";
var s2 = s.substr(11, 2); //s2 = "is";
le posizioni partono da 0.
Passando solo il primo parametro viene estratta una stringa fino alla fine:
var s2 = s.substr(11); //s2 = "is good!";
Il metodo splice è simile a substr, ma come secondo argomento non si specifica la lunghezza, ma la posizione finale:
var s2 = s.slice(11, 13); //s2 = "is";
Senza il secondo argomento, si comporta come substr
var s2 = s.slice(11); //s2 = "is good!";
Se viene specificato un valore negativo, la posizione si intende relativa rispetto la fine della stringa:
var s2 = s.slice(-6); //s2 = "good!";
cioè sono estratti gli ultimi 5 caratteri.
Conversione lettere maiuscole, minuscole:
var s = "HelloWorld!";
var s1 = s.toUpperCase(); // s1 = "HELLO WORLD!"
var s2 = s.toLowerCase(); // s2 = "hello world!"
Ricercare una porzione di stringa
- indexOf(String)
- lastIndexOf(String)
- search(regular expression)
- march(regular expression)
Esempi:
var s = "ABABABAB";
var s2 = s.replace(/A/g, "C"); // s2 = "CBCBCBCB"
per la sostituzione multipla è stato utilizzata un'espressione regolare, il termine "g" alla fine dell'espressione effettua la selezione multipla. In generale è possibile utilizzare questa semplice espressione in questo modo
var newString = s.replace(/oldString/g, "newString");
in cui al posto di "oldString" verrà inserito il termine da rimpiazzare.
Segue un altro esempio in cui sono sostituiti gli spazi con i trattini:
var s = "Questo è un test";
var s2 = s.replace(/\s+/g, "-"); // s2 = "Questo-è-un-test";
Il termine "\s+" indica uno o più spazi nelle regular expression.
In alternativa si sarebbe potuto scrivere:
var s2 = s.split(" ").join("-"); // s2 = "Questo-è-un-test";
"join" è un metodo dell'oggetto array e serve a unire in una stringa tutti i suoi elementi(vedi sezione array).
Trim:
l'oggetto String non prevede la funzione "trim" (la rimozione di spazi all'inizio e alla fine di una stringa); con la seguente istruzione risolvete il problema:
var s = " Hello! ";
s = s.replace(/^\s+|\s+$/g, ""); // s = "Hello!"
Informazioni sui caratteri
var s = "Javascript is good!";
var c = s.charAt(11); // c = "i";
var unicode = s.charCodeAt(11) // unicode = 105, codice unicode per il carattere "i"
var c = String.fromCharCode(105); // c = "i"
Array
Definire un array:
var arr = [10, "test", false];
oppure
var arr = new Array(10, "test", false);
Valore di un elemento:
var item = arr[2];
Lunghezza dell'array:
var len = arr.length;
Ciclare un array;
for(var i=0; i<arr.length; i++) {
var v = arr[i];
...
}
Unire due array:
var arr = [10, "test", false];
var arr2 = [2, true, "test2"];
arr.concat( arr2 ); // arr = [10, "test", false, 2, true, "test2"]
Trasformare un array in una stringa:
var s = arr.join(","); // s = "10,test,false";
Rimuovere l'ultimo elemento:
arr.pop(); // arr = [10,"test"]
Aggiungere un nuovo elemento:
arr.push("new item");
Invertire l'ordine degli elementi
arr.reverse(); // arr = [true, "test", 10]
Rimuovere il primo elemento:
arr.shift() ; // arr = ["test", 10]
Per aggiungere un elemento all'inizio:
Ottenere una parte di array:
var arr2 = arr.slice(0,1); // arr2 = [10, "test"]
Ordinare un array:
var a = ["b", "c", "d", "a"]
a.sort(); // a = ["a", "b", "c", "d"]
Ordimento personalizzato:
var a = ["b", "c", "d", "a"]
a.sort(function(val1, val2) {
if( myCondition ) {
return true;
}else {
return false;
}
});
Inserire un nuovo elemento:
var a = ["b", "c", "d", "a"];
a.splice(1,0, "new Item") ; // a = ["b", "new Item", "c", "d", "a"]
il primo argomento indica la posizione, il secondo indica quanti evetuali elementi sostituire, il terzo indica il valore dell'elemento da inserire/sostituire.
Si possono specificare più valori:
var a = ["a", "b", "c", "d"];
a.splice( 1,0 "1","2","3"); // a = ["a", "1", "2", "3", "b", "c", "d"]
Sostituire un elemento:
var a = ["a", "b", "c", "d"]
a.splice(1,1, "new Item") ; // a = ["a", "new Item", "c", "d"]
Questa funzione è utile anche per rimuovere un valore in una data posizione, è sufficiente non specificare il terzo argomento:
var a = ["a", "b", "c", "d"]
a.splice(1,1) ; // a = ["a", "c", "d"]
Per rimuovere un elemento in base al suo valore occorre ciclare l'array:
var itemToRemove = "b";
var a = ["a", "b", "c", "d"]
for(var i=0;i<a.length;i++){
if( a[i]==itemToRemove )
a.splice(i,1);
}
Date
L'oggetto "date" viene così creato:
var d = new Date();
l'oggetto che abbiamo creato si riferisce alla data corrente.
Per creare un oggetto che si riferisca ad una determinata data passiamo anno, mese e giorno nel costruttore:
var d = new Date(1973,8,20);
la data si riferisce al giorno 20 settembre 1973 (il mese può essere un valore compreso tra 0, gennaio, e 11, dicembre).
Ovviamente possiamo specificare anche ora e minuti.
Se nel costruttore specifichiamo un solo argomento, viene interpretato come millisencondi a partire dal 1 gennaio 1970.
Gli oggetti "date" possono essere confrontati per esempio per determinare se una data è maggiore di un'altra:
var d1 = new Date(); // now
var d2 = new Date(2011,0,20); // 20 gennaio 2011
if(d2>d1){
//...
}
Tuttavia non possiamo verificare direttamente se due date sono uguali:
var d1 = new Date(2011,0,20);
var d2 = new Date(2011,0,20);
if(d1==d2){ ... }else{ ...} // NON FUNZIONA!
Occorre utilizzare il metodo "getTime()" (restituisce la data in millisecondi):
if( d1.getTime()==d2.getTime() )...
E' possibile effettuare operazioni come per esempio la differenza tra due date:
var diff = d1-d2;
il risultato è un numero che rappresenta la differenza in millisecondi da cui possiamo ricavarci l'equivalente in altre unità di misura:
var seconds = diff / 1000; // differenza in secondi
var minutes = seconds / 60; //differenza in minuti
var hours = minutes / 60; //differenza in ore
L'oggetto date è fornito di diversi metodi per ottenere (metodi get) o assegnare (metodi set) elementi della data:
giorno del mese (1-31): getDate() setDate()
giorno della settimana (0-6): getDay()
mese (0-11): getMonth(), setMonth()
anno (4 cifre): getFullYear(), setFullYear();
ore (0-23): getHours(), setHours()
minuti(0-59): getMinutes(), setMinutes();
secondi (0-59): getSeconds(), setSeconds();
millisecondi (0-999): getMilliseconds(), setMilliseconds();
data in millisecondi (a partire da 1/1/1970): getTime(), setTime()
Se assegniamo a più variabili lo stesso oggetto data:
var d1 = new Date(2011,8,20); // 20 settembre 2011
var d2 = d1; // 20 settembre 2011
var d3 = d1; // 20 settembre 2011
stiamo passando il riferimento di uno stesso oggetto data, quindi se modifichiamo uno dei valori, come risultato otterremo una modifica su tutte le variabili:
d3.setFullYear(1973); //20 settembre 1973
//d2 -> 20 settembre 1973
//d1 -> 20 settembre 1973
Per duplicare (clonare) una data occorre istanziare un nuovo oggetto date:
var d1 = new Date(2011,8,20); // 20 settembre 2011
var d2 = new Date( d1.getTime() );
var d3 = new Date( d1.getTime() );
Esempio: calcolo dell'età in anni in base alla sua data di nascita
var birthDate = new Date(1973, 8, 20); // 20 settembre 1973
var today = new Date();
var age = today.getFullYear() - birthDate.getFullYear();
if( birthDate.getMonth()>today.getMonth() || (birthDate.getMonth()==today.getMonth() && birthDate.getDate()>today. getDate () )){
age--;
}
Esempio: fare il parsing di una stringa e creare il relativo oggetto date:
var regExp = /^(\d{2})\/(\d{2})\/(\d{4})$/ ;
var s = prompt("inserisci la tua data di nascita (dd/mm/yyyy)");
var parsedDate = s.match(regExp);
if(parsedDate) {
var day = parsedDate[1], month=parsedDate[2], year=parsedDate[3]
var birthDate = new Date(year,month,day);
}else {
alert("formato data invalido");
}
var s = "Javascript is good!";
var s2 = s.substr(11, 2); //s2 = "is";
le posizioni partono da 0.
Passando solo il primo parametro viene estratta una stringa fino alla fine:
var s2 = s.substr(11); //s2 = "is good!";
Il metodo splice è simile a substr, ma come secondo argomento non si specifica la lunghezza, ma la posizione finale:
var s2 = s.slice(11, 13); //s2 = "is";
Senza il secondo argomento, si comporta come substr
var s2 = s.slice(11); //s2 = "is good!";
Se viene specificato un valore negativo, la posizione si intende relativa rispetto la fine della stringa:
var s2 = s.slice(-6); //s2 = "good!";
cioè sono estratti gli ultimi 5 caratteri.
Conversione lettere maiuscole, minuscole:
var s = "HelloWorld!";
var s1 = s.toUpperCase(); // s1 = "HELLO WORLD!"
var s2 = s.toLowerCase(); // s2 = "hello world!"
Ricercare una porzione di stringa
- indexOf(String)
- lastIndexOf(String)
- search(regular expression)
- march(regular expression)
Esempi:
var s = "Javascript is good!";
var pos = s.search("is"); //pos = 11
var s = "uno due tre"
Sostituzione:
var s = "Javascript is good!";
var s2 = s.replace("Javascript", "Java"); // s2 = "Java is good!"
Sostituzione multipla:var s = "ABABABAB";
var s2 = s.replace(/A/g, "C"); // s2 = "CBCBCBCB"
per la sostituzione multipla è stato utilizzata un'espressione regolare, il termine "g" alla fine dell'espressione effettua la selezione multipla. In generale è possibile utilizzare questa semplice espressione in questo modo
var newString = s.replace(/oldString/g, "newString");
in cui al posto di "oldString" verrà inserito il termine da rimpiazzare.
Segue un altro esempio in cui sono sostituiti gli spazi con i trattini:
var s = "Questo è un test";
var s2 = s.replace(/\s+/g, "-"); // s2 = "Questo-è-un-test";
Il termine "\s+" indica uno o più spazi nelle regular expression.
In alternativa si sarebbe potuto scrivere:
var s2 = s.split(" ").join("-"); // s2 = "Questo-è-un-test";
"join" è un metodo dell'oggetto array e serve a unire in una stringa tutti i suoi elementi(vedi sezione array).
Trim:
l'oggetto String non prevede la funzione "trim" (la rimozione di spazi all'inizio e alla fine di una stringa); con la seguente istruzione risolvete il problema:
var s = " Hello! ";
s = s.replace(/^\s+|\s+$/g, ""); // s = "Hello!"
Informazioni sui caratteri
var s = "Javascript is good!";
var c = s.charAt(11); // c = "i";
var unicode = s.charCodeAt(11) // unicode = 105, codice unicode per il carattere "i"
var c = String.fromCharCode(105); // c = "i"
Array
Definire un array:
var arr = [10, "test", false];
oppure
var arr = new Array(10, "test", false);
Valore di un elemento:
var item = arr[2];
Lunghezza dell'array:
var len = arr.length;
Ciclare un array;
for(var i=0; i<arr.length; i++) {
var v = arr[i];
...
}
Unire due array:
var arr = [10, "test", false];
var arr2 = [2, true, "test2"];
arr.concat( arr2 ); // arr = [10, "test", false, 2, true, "test2"]
Trasformare un array in una stringa:
var s = arr.join(","); // s = "10,test,false";
Rimuovere l'ultimo elemento:
arr.pop(); // arr = [10,"test"]
Aggiungere un nuovo elemento:
arr.push("new item");
Invertire l'ordine degli elementi
arr.reverse(); // arr = [true, "test", 10]
Rimuovere il primo elemento:
arr.shift() ; // arr = ["test", 10]
Per aggiungere un elemento all'inizio:
var a = ["a", "b", "c", "d"]
a.unshift("new item"); // a = ["new item", "a", "b", "c", "d"]
Ottenere una parte di array:
var arr2 = arr.slice(0,1); // arr2 = [10, "test"]
Ordinare un array:
var a = ["b", "c", "d", "a"]
a.sort(); // a = ["a", "b", "c", "d"]
Ordimento personalizzato:
var a = ["b", "c", "d", "a"]
a.sort(function(val1, val2) {
if( myCondition ) {
return true;
}else {
return false;
}
});
Inserire un nuovo elemento:
var a = ["b", "c", "d", "a"];
a.splice(1,0, "new Item") ; // a = ["b", "new Item", "c", "d", "a"]
il primo argomento indica la posizione, il secondo indica quanti evetuali elementi sostituire, il terzo indica il valore dell'elemento da inserire/sostituire.
Si possono specificare più valori:
var a = ["a", "b", "c", "d"];
a.splice( 1,0 "1","2","3"); // a = ["a", "1", "2", "3", "b", "c", "d"]
Sostituire un elemento:
var a = ["a", "b", "c", "d"]
a.splice(1,1, "new Item") ; // a = ["a", "new Item", "c", "d"]
Questa funzione è utile anche per rimuovere un valore in una data posizione, è sufficiente non specificare il terzo argomento:
var a = ["a", "b", "c", "d"]
a.splice(1,1) ; // a = ["a", "c", "d"]
Per rimuovere un elemento in base al suo valore occorre ciclare l'array:
var itemToRemove = "b";
var a = ["a", "b", "c", "d"]
for(var i=0;i<a.length;i++){
if( a[i]==itemToRemove )
a.splice(i,1);
}
Date
L'oggetto "date" viene così creato:
var d = new Date();
l'oggetto che abbiamo creato si riferisce alla data corrente.
Per creare un oggetto che si riferisca ad una determinata data passiamo anno, mese e giorno nel costruttore:
var d = new Date(1973,8,20);
la data si riferisce al giorno 20 settembre 1973 (il mese può essere un valore compreso tra 0, gennaio, e 11, dicembre).
Ovviamente possiamo specificare anche ora e minuti.
Se nel costruttore specifichiamo un solo argomento, viene interpretato come millisencondi a partire dal 1 gennaio 1970.
Gli oggetti "date" possono essere confrontati per esempio per determinare se una data è maggiore di un'altra:
var d1 = new Date(); // now
var d2 = new Date(2011,0,20); // 20 gennaio 2011
if(d2>d1){
//...
}
Tuttavia non possiamo verificare direttamente se due date sono uguali:
var d1 = new Date(2011,0,20);
var d2 = new Date(2011,0,20);
if(d1==d2){ ... }else{ ...} // NON FUNZIONA!
Occorre utilizzare il metodo "getTime()" (restituisce la data in millisecondi):
if( d1.getTime()==d2.getTime() )...
E' possibile effettuare operazioni come per esempio la differenza tra due date:
var diff = d1-d2;
il risultato è un numero che rappresenta la differenza in millisecondi da cui possiamo ricavarci l'equivalente in altre unità di misura:
var seconds = diff / 1000; // differenza in secondi
var minutes = seconds / 60; //differenza in minuti
var hours = minutes / 60; //differenza in ore
L'oggetto date è fornito di diversi metodi per ottenere (metodi get) o assegnare (metodi set) elementi della data:
giorno del mese (1-31): getDate() setDate()
giorno della settimana (0-6): getDay()
mese (0-11): getMonth(), setMonth()
anno (4 cifre): getFullYear(), setFullYear();
ore (0-23): getHours(), setHours()
minuti(0-59): getMinutes(), setMinutes();
secondi (0-59): getSeconds(), setSeconds();
millisecondi (0-999): getMilliseconds(), setMilliseconds();
data in millisecondi (a partire da 1/1/1970): getTime(), setTime()
Se assegniamo a più variabili lo stesso oggetto data:
var d1 = new Date(2011,8,20); // 20 settembre 2011
var d2 = d1; // 20 settembre 2011
var d3 = d1; // 20 settembre 2011
stiamo passando il riferimento di uno stesso oggetto data, quindi se modifichiamo uno dei valori, come risultato otterremo una modifica su tutte le variabili:
d3.setFullYear(1973); //20 settembre 1973
//d2 -> 20 settembre 1973
//d1 -> 20 settembre 1973
Per duplicare (clonare) una data occorre istanziare un nuovo oggetto date:
var d1 = new Date(2011,8,20); // 20 settembre 2011
var d2 = new Date( d1.getTime() );
var d3 = new Date( d1.getTime() );
Esempio: calcolo dell'età in anni in base alla sua data di nascita
var birthDate = new Date(1973, 8, 20); // 20 settembre 1973
var today = new Date();
var age = today.getFullYear() - birthDate.getFullYear();
if( birthDate.getMonth()>today.getMonth() || (birthDate.getMonth()==today.getMonth() && birthDate.getDate()>today. getDate () )){
age--;
}
Esempio: fare il parsing di una stringa e creare il relativo oggetto date:
var regExp = /^(\d{2})\/(\d{2})\/(\d{4})$/ ;
var s = prompt("inserisci la tua data di nascita (dd/mm/yyyy)");
var parsedDate = s.match(regExp);
if(parsedDate) {
var day = parsedDate[1], month=parsedDate[2], year=parsedDate[3]
var birthDate = new Date(year,month,day);
}else {
alert("formato data invalido");
}
Funzione void
La funzione void è una funzione che restituisce undefined.
Se per esempio definiamo una funzione:
function doFoo() {
alert("foo");
return false;
}
var a = void( doFoo() );
il valore di "a" sarà undefined.
Tipicamente si utilizza questa funzione sul tag HTML <a>.
Questo tag normalmente viene utilizzato per caricare una pagina o andare su un determinato punto della pagina.
Per evitare il ricaricamento della pagina si utilizzata la funzione void nell'attributo "href":
<a href="javascript:void(0)" onclick="alert('clicked')" >click me</a>
equivalente a :
<a href="#" onclick="alert('clicked');return false;" >click me</a>
Funzioni Timer
Javascript consente di eseguire delle instruzioni in maniera "temporizzata" tramite delle funzioni dell'oggetto "window".
Le funzioni che permettono di fare questo sono:
setTimeout (esegue una funzione dopo un tempo specificato e restituisce un id di riferimento)
setInterval (esegue una funzione a intervalli di tempo regolari e restituisce un id di riferimento)
(nota: sono metodi dell'oggetto window: window.setTimeout e window.setInterval)
e i rispettivi metodi che ne bloccano l'esecuzione:
clearTimeout()
cleartInterval()
Nel esempio seguente viene mostrato un un messaggio dopo un secondo (l'intervallo specificando è un millisecondi):
setTimeout(function(){
alert("Hello");
}, 1000);
oppure:
function alertHello(){
alert("Hello");
}
setTimeout(alertHello, 1000);
In questo altro esempio invece visualizziamo un semplice cronometro (si presuppone l'esistenza nella pagina di un div con id = "cron" e di pulsanti "button" start, stop, reset):
<div id="cron"></div>
<button onclick="startCron()">start</button>
<button onclick="stopCron()">stop</button>
<button onclick="resetCron()">reset</button>
<script>
var cron = 0, t = null, cronEl = document.getElementById("cron");
function startCron(){
if(t!=null) stopCron();
t = setInterval( function(){
cronEl .innerHTML = ++cron;
}, 100); //0.1 sec
}
function stopCron(){
if(t) {
clearInterval(t);
t = null;
}
}
function resetCron(){
cron = 0;
cronEl .innerHTML = cron;
}
</script>
Funzioni globali di javascript
In questo e nel precedente tutorial sono stati già utilizzate alcune funzioni come "alert", "isNaN", "setTimout".
Alcune di queste appartengono all'oggetto window (es."alert" che può essere invocando scrivendo "window.alert"), altre invece sono funzioni globali.
Seguono le altre funzioni globali:
parteInt, parseFloat
La funzione "parseInt" cerca di estrarre da una stringa un numero intero. Prevede due argomenti: la stringa da parsare e la base numerica (opzionale, ma consiglio sempre di specificarla, normalmente si specifica 10).
esempio:
var n = parseInt("09",10); //n=9
Se dalla stringa non è possibile estrarre un numero, viene restituito NaN (Not a number).
var n = parseInt("sdfsdfs"); //n=NaN
Una stringa può anche contenere solo nella parte iniziale un numero:
var n = parseInt(" 10 oggetti "); //n = 10
La funzione "parseFloat" rispetto a "parseInt" cerca di estrarre un numero con virgola (il punto viene riconosciuto come separatore decimale).
escape, unescape
Queste funzioni rispettivamente codificano e decodificano i caratteri speciali:
Esempio:
var escaped = escape("test*?&"); //escaped="test*%3F%26"
var unescaped = unescape(escaped); //unescaped="test*?&"
Funzioni Timer
Javascript consente di eseguire delle instruzioni in maniera "temporizzata" tramite delle funzioni dell'oggetto "window".
Le funzioni che permettono di fare questo sono:
setTimeout (esegue una funzione dopo un tempo specificato e restituisce un id di riferimento)
setInterval (esegue una funzione a intervalli di tempo regolari e restituisce un id di riferimento)
(nota: sono metodi dell'oggetto window: window.setTimeout e window.setInterval)
e i rispettivi metodi che ne bloccano l'esecuzione:
clearTimeout()
cleartInterval()
Nel esempio seguente viene mostrato un un messaggio dopo un secondo (l'intervallo specificando è un millisecondi):
setTimeout(function(){
alert("Hello");
}, 1000);
oppure:
function alertHello(){
alert("Hello");
}
setTimeout(alertHello, 1000);
In questo altro esempio invece visualizziamo un semplice cronometro (si presuppone l'esistenza nella pagina di un div con id = "cron" e di pulsanti "button" start, stop, reset):
<div id="cron"></div>
<button onclick="startCron()">start</button>
<button onclick="stopCron()">stop</button>
<button onclick="resetCron()">reset</button>
<script>
var cron = 0, t = null, cronEl = document.getElementById("cron");
function startCron(){
if(t!=null) stopCron();
t = setInterval( function(){
cronEl .innerHTML = ++cron;
}, 100); //0.1 sec
}
function stopCron(){
if(t) {
clearInterval(t);
t = null;
}
}
function resetCron(){
cron = 0;
cronEl .innerHTML = cron;
}
</script>
Funzioni globali di javascript
In questo e nel precedente tutorial sono stati già utilizzate alcune funzioni come "alert", "isNaN", "setTimout".
Alcune di queste appartengono all'oggetto window (es."alert" che può essere invocando scrivendo "window.alert"), altre invece sono funzioni globali.
Seguono le altre funzioni globali:
parteInt, parseFloat
La funzione "parseInt" cerca di estrarre da una stringa un numero intero. Prevede due argomenti: la stringa da parsare e la base numerica (opzionale, ma consiglio sempre di specificarla, normalmente si specifica 10).
esempio:
var n = parseInt("09",10); //n=9
Se dalla stringa non è possibile estrarre un numero, viene restituito NaN (Not a number).
var n = parseInt("sdfsdfs"); //n=NaN
Una stringa può anche contenere solo nella parte iniziale un numero:
var n = parseInt(" 10 oggetti "); //n = 10
La funzione "parseFloat" rispetto a "parseInt" cerca di estrarre un numero con virgola (il punto viene riconosciuto come separatore decimale).
escape, unescape
Queste funzioni rispettivamente codificano e decodificano i caratteri speciali:
Esempio:
var escaped = escape("test*?&"); //escaped="test*%3F%26"
var unescaped = unescape(escaped); //unescaped="test*?&"
eval
Questa funzione legge il contenuto di una stringa e li interpreta come codice javascript:
Per esempio:
eval("alert('test')");
l'effetto di questa istruzione quindi sarà quello di mostrare una finestra di alert.
L'uso di questa funzione è sconsigliato, in quanto esegue codice a runtime, cioè senza precompilazione da parte del browser. Quindi il risultato sarebbe un peggioramento delle prestazioni di esecuzione ed eventualmente una maggiore difficoltà di individuare errori in fase di debugging.
Normalmente viene utilizzata per "parsare" il contenuto json di una risposta ajax:
var json = "{'prop1':44,'prop2' : 'test'}";
var obj = eval( "(" + json + ")" );
alert( obj.prop1 );
alert( obj.prop2 );
Nessun commento:
Posta un commento