Programmare in javaScript
←
→
Trascrizione del contenuto della pagina
Se il tuo browser non visualizza correttamente la pagina, ti preghiamo di leggere il contenuto della pagina quaggiù
Programmare in javaScript
JavaScript è linguaggio di scripting orientato ad oggetti è un tipo di codice che viene interpretato
dai browser. Questo linguaggio viene definito appunto un linguaggio lato client, perchè viene
scaricato ed avviato direttamente sul browser che interpreta il linguaggio, questo è un vantaggio
perchè evita al server di fare del lavoro in più. Per inserire javascript in una pagina html si devono
usare i tag , li si possono posizionare in qualsiasi punto della pagina sia dentro che
dentro , comunque è sempre meglio inserire javascript nella in un file esterno.
Esempio di dichiarazione:
istruzione1;
istruzione2;
//questo è un commento quando finisce questa riga finisce anche il commento
/* anche questo è un commento ma non finisce a fine riga,
ma solo alla chiusare dei simboli alla mia destra */
Per indicare la fine di ogni istruzione si usa il punto virgola ";". Come abbiamo appena visto si
possono richiamare file javascript esterni, questo ci permette di prendere del codice scritto da altri
ed usarlo come preferiamo. Così alcuni si sono occupati di creare delle librerie o anche dette
framework javascript che contengono degli script già pronti all'uso, man mano in questa guida
offriremo alcuni esempi utili:
1. jQuery
2. Prototype
3. script.aculo.us
4. Dojo
5. MooTools
6. YUI Library
Variabili
Una variabile si definisce con la parola riservata var. Una volta definita la si può richiamare
semplicemente utilizzando il nome della variabile.
Clicca Qui per eseguire il codice.
var nome = 'matteo';
alert(nome);
Nell'esempio precedente abbiamo usato una funzione nativa di javaScript, che usava la variabile
nome come argomento. L'argomento serve per passare dati ad una funzione, in questo caso il popup
che apre, contiene i dati della variabile passati nell'argomento.
Le variabili in javascript possono contenere differenti tipi di dati:
1. Numeri
2. Stringhe
3. Valori booleani
4. Array
5. Oggetti
Numeri
JavaScript può memorizzare numeri interi, decimali che siano sia positivi che negativi, è scontato
dire inoltre che javaScript può usare gli operatori matematichi (+,-,*,/)
1. Numeri
var intero = 3;
var decimale = 3.1454521;
var intNegativo = -3;
var floatNegativo = -3.1454521;
var operazioniMatematiche = (4 + 2) * 6 / 10;
Una comoda funzionalità di javaScript è la possibilità di usare il valore corrente di una variabile per
descrivere il nuovo valore da asseganre alla variabile.
Clicca Qui per eseguire il codice.
var anni = 20;
anni = anni + 3;
Incrementare una variabile è un azione comune in javaScript, infatti il codice precedente può essere
abbreviato in questa maniera:
Clicca Qui per eseguire il codice.
var anni = 20;
anni += 3;
Mnetre se si deve incrementare di un'unità ci viene in aiuto un'altra forma:
Clicca Qui per eseguire il codice.
var anni = 20;
anni++;
L'operatore speciale ++, chiede al programma di incrementare di un'unità il valore della variabile e
poi di assegnare il risultato al calcolo sempre alla stessa variabile. Nell'esempio seguente vedremo
che in questo caso sarebbe meglio usare un'altra abbreviazione, ovvero var anniCopia = ++anni;
se avviamo il codice vedremo come il risultato che esce è 26 e non 27, questo succede perchè la
lettura viene fatta prima dell'incremento, per sviare questo problema bisogna appunto incrementare
prima con ++anni, è buona norma però dividere questi due processi, scrivendo prima un'istruzione
di incremento anni++; e poi assegnare il valore alla variabile var anniCopia = anni;.
Clicca Qui per eseguire il codice.var anni = 26;
var anniCopia = anni++;
javaScript mette a disposizione alcune funzioni native come alert, ce ne sono alcune che lavorano
sui dati numerici vediamole in ordine: parseInt(string, radix) analizza una stringa restituendo un
numero intero senza stringhe e lo visualizza ignorando le parti decimali e l'eventuale virgola, è
possibile aggiungere anche un secondo argomento facoltativo che può fare da base numerica.
parseFloat(string) fa lo stesso lavoro di parseInt solo che conserva la virgola e i numeri decimali.
La funzione is Not a Number, isNaN(string) restituisce un valore boleano a seconda della stringa
che viene passata come argomento. Se il dato passato può essere elaborato restituisce false se è un
dato che non può essere rielaborato come numero esce true.
Clicca Qui per eseguire il codice.
var pi = parseInt("111.5545word");
var pf = parseFloat("111.5545word");
var isN = isNaN("111.5545word");
Le stringhe
Le stringhe sono dati costituiti da caratteri di qualsiasi lunghezza e possono essere lettere, numeri,
simboli, segni di punteggiatura o spazi, per devinirne una basta inserire i caratteri all'interno delle
virgolette e possono essere sia doppie "" che semplici ''.
2. Stringhe
var semplici = 'Solo apici semplici';
var doppi = "Solo apici doppi";
var numeriFolli = "18 num3r1 f0ll1";
var stranaPunteggiatura = '$7r@n@ pun7&99!@tur#@'
Le virgolette fungono da delimitatori, infatti non verranno utilizzate come dato, se vogliamo invece
includerle si può ricorrere alla tecnica chiamata escape che consiste nel far precedere alle virgolette
un segno di backslash / vediamo un esempio:
Clicca Qui per eseguire il codice.
var anni = 'le virgolette ai lati non si vedono ma quelle con \"l\'escape\" sì';
Valori booleani
I valori booleani comprendono solo due parole riservate che sono: true e false. Questo tipo di dato
viene utilizzato principalmente per prendere decisioni.
3. Valori booleani
var bugiardo = true;
var sincero = false;
Array
I numeri, le stringhe e i valori booleani sono utili per memorizzare singoli frammenti di dati, gli
array si occupano di gestire questi dati, dandone un ordine preciso in modod che siano facilmente
recuperabili. Un array è come una specie di casellario e per definirlo usaimo le parentesi quadre.4. Array var casellario = []; casellario[0] = "Primo"; casellario[1] = "Secondo"; Nell'esempio precedente abbiamo definito un array. Nela prima riga viene definito un array vuoto, in quelle successive vengono inserite degli elementi all'array "casellario", ogni posizione dell'array come si può vedere gli viene attribuito un indice, utile per poter recuperare i dati. Infatti è possibile aprire una finestra di dialogo in questo modo: Clicca Qui per eseguire il codice. var casellario = []; casellario[0] = "Primo"; casellario[1] = "Secondo"; alert(casellario[1]); Un'array lo si può definire anche inserendo subito gli elementi nella dichiarazione, inoltre possono contenere qualsiasi tipo di dato, stringhe, numeri, misti e pure altri array: Array tipi di dati contenuti var arrayDiStringhe = ["Primo", "Secondo", "Terzo", "Quarto"]; var arrayNumerico = [1, 2, 3, 4, 5]; var arrayMisto = ["via", "garibaldi", 12] var subArray1 = ["Parigi","Lione","Nizza"]; var subArray2 = ["Amstardam","Rotterdam","Utrecht"]; var subArray3 = ["Madrid","Barcellona","Siviglia"]; var superArray = [subArray1, subArray2, subArray3]; Per prendere un elemento in array multi-dimensionale bisogna scrivere due indici il primo indice prende l'array che ci interessa, il secondo, l'elemento con l'indice contenuto nell'array scelto. Clicca Qui per eseguire il codice. var subArray1 = ["Parigi","Lione","Nizza"]; var subArray2 = ["Amstardam","Rotterdam","Utrecht"]; var subArray3 = ["Madrid","Barcellona","Siviglia"]; var superArray = [subArray1, subArray2, subArray3]; var luogo = superArray[0][2]; Una proprietà che vi tornerà utile per questi tipi di elementi è la proprietà .length che definisce la lunghezza, per esempio se vogliamo sapere quanti elementi contiene un array con questa proprietà è possibile scoprirlo: Clicca Qui per eseguire il codice. var subArray1 = ["Parigi","Lione","Nizza", "Quarto"]; var subArray2 = ["Amstardam","Rotterdam","Utrecht"]; var subArray3 = ["Madrid","Barcellona","Siviglia"]; var superArray = [subArray1, subArray2, subArray3]; var numeroElementi = superArray[0].length; Uno degl'ultimi tipi di Array è l'array associativo, quello che cambia dagl'altri è l'indice, che viene sostituito da una stringa che può essere utile per esempio per memorizzare i codici postali:
Clicca Qui per eseguire il codice.
var codAvvPost = [];
codAvvPost["Armadale"] = 3143;
codAvvPost["North Melbourne"] = 3051;
codAvvPost["Camperdown"] = 2050;
codAvvPost["Annandale"] = 2038;
alert("codice postale Armadale: " + codAvvPost["Armadale"]);
Prima di affrontare gli "oggetti" dobbiamo imparare ancora strutture di javaScript se no non
riusciremmo a comprendere il significato di quest'ultimo.
Condizioni cicliche: controllare il flusso del programma
Per prendere decisioni occorre utilizzare particolari strutture chiamate condizioni e cicli che aiutano
a controllare le parti di un programma. La prima istruzione condizionale che andremo a trattare si
chiama if per definirla serve inserire una condizione ed un codice che verrrà utilizzato nel caso la
condizione è vera, la sintassi che si utilizza è la seguente:
Istruzione if
Istruzione if
if (condizione) {
codice condizionale;
}
Nel caso la condizione è falsa il programma va avanti ignorando il codice condizionale. Ora
analizziamo le condizioni che si possono utilizzare, quelle che vengono più spesso utilizzate sono
quelle di confronto, che utilizzano i seguenti operatori:
Operatore Esempio Risultato
> A>B true se A è maggiore di B
>= A >= B true se A è maggiore o uguale di B
< Aproponendo un codice condizionale nel caso la condizione non sia vera
if e else
if (condizione) {
codice condizionale;
}
else {
codice condizionale alternativo;
}
In questo modo abbiamo un codice sia per quando è vera sia per quando è falsa. Ma se vogliamo
aggiungere un'altra condizione ad applicargli un'altro codice da eseguire useremo un'altro sistema
ovvero else if. Come si può vedere questa istruzione può avere delle parentesi tonde dove si
devinisce una nuova condizione e si possono creare tante else if quante se ne vogliono sempre
lasciandole tra l'istruzione "if" e l'istruzione "else"
else if
if (condizione) {
codice condizionale;
}
else if (condizione) {
codice condizionale alternativo;
}
else {
codice condizionale alternativo;
}
Cicli while
I cicli sono istruzioni che ripetono il codice fintanto che la loro condizione è vera, while si comparta
in questo modo
ciclo while
while (condizione) {
codice condizionale;
}
I cicli sono utili quando si vogliono eseminare tutti gli elementi di un array e si vogliono applicare
delle modifiche, usando una variabile che farà da contatore, ad ogni ciclo dell'istruzione si
incrementerà quella variabile fino a quando la condizione resistuirà false, proprio perchè la
condizione impostata definisce che la condizione è vera finchè il numero contatore è minore al
numero degli elementi nell'array.
ciclo while
var numeri = [1, 2, 3, 4, 5];
var contatore = 0;
while (contatore < numeri.length) {
numeri[contatore] *= 2;
contatore++;
}
Cicli do-while
Un ciclo do-while si comporta in modo simile al ciclo while, l'unica differenza sta nell'eseguire
prima il codice condizionale e dopo controllare la condizione, questo permette di eseguire almeno
una volta il codice anche se la condizione risulta falsaciclo do-while
do {
codice condizionale;
}
while (condizionale)
Cicli for
I cicli for permettono di realizzare costrutti molto compatti. Prendiamo ad esempio un ciclio while,
il ciclo for rende più sintetico due aspetti, la dichiarazione della variabile contatore (var i = 0;) e
l'incremento della variabile contatore (i++). Nel ciclo for vengono devinite contemporaneamente tre
istruzionioltre alle due già citate c'è anche la condizione che ci permette di uscire dal ciclo quando
la condizione viene restituita come falsa.
confronto ciclo do-while con ciclo for
//Array
var numeri = [1, 2, 3, 4, 5];
//ciclo do-while
var i = 0;
while (i < numeri.length) {
numeri[i] *= 2;
i++;
}
//ciclo for
for(var i = 0; i < numeri.length; i++) {
numeri[i] *= 2;
}
Switch
L'istruzione switch è come una combinazione di tante if. Si inserisce nella parentesi condizionale
una variabile, che può avere diversi valori, mentre nelle graffe si distinguono i vari casi con
l'istruzione case ed infine si definisce default che è paragonabile all'istruzione else.
Scrivi e per eseguire il codice.
var value = form1.text.value;
switch (value){
case "a":
alert("hai inserito a");
break
case "b":
alert("hai inserito b");
break
case "c":
alert("hai inserito c");
break
default:
alert("non hai inserito ne a, ne b, ne c");
break
}Espressioni regolari
Le espressioni regolari sono un potente strumento di analisi delle stringhe, si compongono di
semplici caratteri come questo /abc/ o in combinazione a semplici e speciali caratteri come questi
/ab*c/ o /Chapter(\d+)\.\d*/. Questo linguaggio è possibile utilizzarlo in combinazione con altre
funzioni come split(), replace(), search() e match() rispettivamente si occupano di dividere,
sostituire, trovare la posizione e memorizzare. Un metodo molto comune è anche la funzione test()
utilizzata spesso nelle istruzioni condizionali. Ci sono due modi per creare un espressione regolare
il primo utilizzando l'oggetto RegExp l'altro è utilizzare il simbolo slash "/" per racchiudere
l'espressione.
Espressione regolare
var pattern1 = new RegExp ("Espressione regolare", "parametri");
var pattern2 = /Espressione regolare/parametri;
La parte dove c'è scritto parametri è un parte opzionale dove è possibile inserire alcune lettere:
Pattern Modifiers
Carattere Descrizione
indica un abbinamento globale (ovvero verranno abbinate tutte le istanze che
g
corrispondono all'espressione regolare e non solo la prima).
la ricerca diventa case-insensitive, cioè maiuscole e minuscole vengono considerate
i
uguali.
le ricerca verrà considerate "per riga", cioè le ancore tipo "^" e "$" verranno applicate
m
per ogni riga di testo.
il testo viene considerato un'unica riga e "." ora identifica anche i caratteri di fine riga,
s
che normalmente non troverebbe.
u vengono abilitati i caratteri Unicode estes, come \x{10FFFFF}.
attiva l'opzione ungreedy (Quasi tutti inciampano prima o poi in questo problema: se
utilizzo una espressione del tipo /".*"/ troverò tutte le parole racchiuse tra doppi apici?
U
Purtroppo no! Questo perché i quantificatori normali sono "golosi" (in inglese greedy),
cioè cercano l'occorrenza il più grande possibile.) a tutti i quantificatori.
Ora però passiamo alla sintassi, come dicevamo l'espressione regolare è uno strumento usato per le
stringhe si potrebbe creare una espressione regolare senza alcun carattere speciale come
/javascript/ però il suo uso sarebbe parecchio limitato perchè abbinerà solo le stringhe "javascript".
Per rendere più intelligente la ricerca utilizziamo dei caratteri che rendono la ricerca più
intelligente. I primi caratteri che presenteremo sono quelli di ripetizione, si occupano di quante
volte si ripete il termine che li precede:
Quantifiers
Carattere Descrizione Esempio
* 0 o più /s*/ sssstringa osso o osso sssstringa
+ 1 o più /s+/ sssstringa osso o osso sssstringa
? 0o1 /s?/ sssstringa osso o osso sssstringa
{3} esattamente 3 /s{3}/ sssstringa osso o osso sssstringa
{3,} 3 o più /s{3,}/ sssstringa osso o osso sssstringa
{1,3} 1, 2 o 3 /s{1,3}/ sssstringa osso o osso sssstringa
*? 0 o più, ungreedy /s*?/ sssstringa osso o osso sssstringaCarattere Descrizione Esempio
+? 1 o più, ungreedy /s+?/ sssstringa osso o osso sssstringa
?? 0 o 1, ungreedy /s??/ sssstringa osso o osso sssstringa
{3,5}? 3, 4 o 5, ungreedy /s{3,5}?/ sssstringa osso o osso sssstringa
I prossimi che presenteremo si chiamano caratteri di posizione o anche chiamate Anchors, che non
specificano un particolare tipo di caratteri, bensì una particolare posizione nella stringa:
Anchors
Carattere Descrizione Esempio
^ Inizio linea /^str/ stringa
$ Fine linea /nga$/ stringa
\A Inizio della stringa /\Astr/ stringa
\Z Fine della stringa /nga\Z/ stringa
\b confine di parola /\bs/ volpe stringa osso
\B non confine di parola /\B/s/ volpe stringa osso
\< inizio parola /\ fine parola /\>/ N.D.
Ora vedremo le classi di caratteri, che definiscono gruppi di tipi come le lettere, le cifre gli spazi.
Character Classes
Carattere Descrizione Esempio
\c control character /\cstr/ stringa
\s spazio /nga\s/ stringa
\S nessuno spazi /\Sstr/ stringa
\d cifre /nga\d/ stringa
\D nessuna cifra /\Ds/ volpe stringa osso
\w lettere /\B/s/ volpe stringa osso
\W Nessuna lettera (non abbina a, 1, _ ) /\W/ volpe stringa osso?
\xhh carattere esadecimale hh /\xhh/ N.D.
\Oxxx carattere ottale xxx /\Oxxx/ N.D.
I caratteri speciali sono tutti quei segni come il tab, il ritorno a capo ecc.
Special Characters
Carattere Descrizione Esempio
\ Escape Character /\\/ strin\ga
\n nuova linea /\n/ N.D.
\r ritorno a capo /\A/ N.D.
\t tab /\r/ N.D.
\v tab verticale /\v/ N.D.
\f form feed /\f/ N.D.
\a alarm /\a/ N.D.
[\b] backspace /[\b]/ N.D.
\e escape /\e/ N.D.Carattere Descrizione Esempio
\N{name} nome carattere /\N{name}/ N.D.
Classe dei caratteri Posix definiscono altri tipi di caratteri alcuni sono complementari alle classi di
caratteri visti precedentemente.
Posix Character Classes
Carattere Descrizione Esempio
[:upper:] lettere maiuscole /[:upper:]/ N.D.
[:lower:] lettere minuscole /[:lower:]/ N.D.
[:alpha:] tutte le lettere /[:alpha:]/ N.D.
[:alnum:] caratteri alfanumerici /[:alnum:]/ N.D.
[:digit:] caratteri numerici /[:digit:]/ N.D.
[:xdigit:] cifre esadecimali /[:xdigit:]/ N.D.
[:punct:] punteggiatura /[:punct:]/ N.D.
[:blank:] spazi e tab /[:blank:]/ N.D.
[:cntrl:] control character /[:cntrl:]/ N.D.
[:graph:] printed characters /[:graph:]/ N.D.
[:word:] cifre, lettere ed underscore /[:word:]/ N.D.
I caratteri Range sono utilizzati per raggruppano o escludere gruppi di caratteri.
Range
Carattere Descrizione Esempio
. qualsiasi carattere eccetto le rughe nuove (\n) /./ N.D.
(a|b) a oppure b /(a|b)/ N.D.
(...) le parentesi tonde identificano dei gruppi di caratteri /(...)/ N.D.
[abc] raggruppa i termini che si possono accettare /[abc]/ N.D.
[^abc] raggruppa i termini che non si possono accettare /[^abc]/ N.D.
[a-q] raggruppa i termini che si possono accettare dalla a alla q /[a-q]/ N.D.
raggruppa i termini maiuscoli che si possono accettare dalla A alla
[A-Q] /[A-Q]/ N.D.
Q
[0-7] spazi e tab /[0-7]/ N.D.
\n nth group/subpattern /\n/ N.D.
Stringhe di sostituzione
String Replacement (Backreferences)
Carattere Descrizione Esempio
$n nth non-passive group /$n/ N.D.
$2 "xyz" in /^(abc(xyz))$/ /$2/ N.D.
"xyz" in /^(?:abc)(xyz)
$1 /$1/ N.D.
$/
$ Before matched string /$/ N.D.Carattere Descrizione Esempio
$' After matched string /$'/ N.D.
$+ Last matched string /$+/ N.D.
$& Entire matched string /$&/ N.D.
$_ Entire input string /$/ N.D.
$$ Literal "$" /$$/ N.D.
Un'asserzione è un predicato presente in un programma che indica che il predicato sia sempre vero.
Assertions
Carattere Descrizione Esempio
?= lookahead assertion /?=/ N.D.
?! Negative lookahead /?!/ N.D.
?sostituito alla parola "testo", la parola in questo caso "testo" è fondamentale perchè se non si
definisce la possibilità di passare un argomento, non li si può utilizzare. Prima di passare al
prossimo argomento bisogna mostrare una versiona alternativa della definizione delle funzioni, in
questo caso la dichiarazione assomiglia molto all'assegnamento di valore di una variabile;
importante ricordarsi di mettere il punto e virgola quando finisce la funzione, cosa che non è
richiesta nel primo caso. Questi due stili di codici presentano anche un importante differenza, la
prima forma sintattica può essere utilizzata in tutto il codice presente nel file, anche in quello
che si trova prima della dichiarazione della funzione. Una funzione dichiarata con la seconda
sintassi può essere utilizzata solo dal codice che viene eseguito dopo l'istruzione di
assegnamento che dichiara la funzione. Se il codice è ben strutturato questa differenza non si
dovrebbe notare:
Clicca Qui per eseguire il codice.
//definire una funzione
var attenzione = function(testo) {
testo += ' e poi viene aggiunto altro testo.';
alert(testo);
};
//richiamare una funzione
attenzione("viene passato l'argomento");
Array Arguments
è possibile trattare gli argomenti di una funzione come fossero degli elementi di un array, nel
prossimo esempio vediamo come con la parola riservata arguments e l'indice [0] possiamo
accedere agli argomenti che vengono passati alla funzione.
Clicca Qui per eseguire il codice.
function dibattito() {
var primoArgomento = arguments[0];
var secondoArgomento = arguments[1];
alert("arguments: (\"" + primoArgomento + ", " + secondoArgomento + "\")");
}
dibattito("affermativo", "negativo");
L'istruzione Return
Fino adesso abbiamo usato le funzioni per far comparire subito il nostro risultato, una finestra con
dentro l'elaborazioni delle nostre istruzioni. Ma di solito un programma utilizza più funzioni, le
quali svolgono ognuna un compito preciso, quindi per esempio potremmo avere la funzione che
calcola le mele, una le pere ed un'altra che gestisce al suo interno queste due funzioni ottenendo il
totale dei prodotti in magazzino. Le funzioni purtroppo gestiscono i loro dati solo all'interno della
funzione quindi per far passare dei dati ad altre funzioni si utilizza l'istruzione return vediamo in
che modo:
Clicca Qui per eseguire il codice.
function mele () {
var meleGialle = 5;
var meleRosse = 5;
return meleGialle + meleRosse;
}
function pere () {var pereScure = 10;
var pereChiare = 10;
return pereScure + pereChiare;
}
function totale() {
var totaleMagazzino = mele() + pere();
alert("totale delle merci: " + totaleMagazzino);
}
totale();
Come avete potuto notare vengono definite tre fuzioni ed infine viene avviata la funzione totale che
si occupa di gestire i totali di mele e pere, quando sono state inserite le funzioni sono diventate
accessibili i risultati delle funzioni mele e pere, questo grazie all'istruzione return, inoltre bisogna
sapere che tutto quello che si trova dopo return non viene considerato dalla funzione.
La visibilità
Fino adesso abbiamo definito le variabili sul piano più esterno, esse ottengono una visibilità
globale, questo significa che possono essere utilizzate da tutto il codice javaScript. Questo può
essere fastidioso quando abbiamo una variabile esterna uguale ad una variabile definta all'interno di
una funzione, per evitare che la variabile presente nella funzione vada a modificare la variabile
globale basta aggiungere la parola riservata var in modo da farla esistere localmente solo dentro alla
funzione. Nel prossimo esempio dimostriamo che senza la parola var alla variabile dichiarata nella
funzione si va a modificare il valore della variabile presente all'esterno della funzione.
Clicca Qui per eseguire il codice.
var a = 100;
var b = 100;
function fnA() {
var a = 200;
b = 200; //modifica la variabile globale
alert("function a: " + a + "\nfunction b: " + b);
}
fnA();
alert("global a: " + a + "\n gloabal b: " + b);
Gli oggetti
Dopo aver parlato meglio di variabili e di funzioni, possiamo passare agli oggetti che non sono
nient'altro che elementi "amorfi". Gli oggetti offrono un meccanismo di raggruppamento che
contiene proprietà e metodi. Le proprietà sono variabili accessibili solo attraverso l'oggetto, mentre
i metodi sono funzioni accessibili solo attraverso l'oggetto. Il prossimo esempio mostra come
definirli, si inizia con la prima riga "var Robot = new Object();" dove creiamo un nuovo oggetto
vuoto, in alternativa a questa dichiarazione si può usare anche la versione più compatta var Robot
= {}; che ha la stesso valenza del primo. Con questo metodo non siamo rinchiusi all'interno delle
parentesi graffe e così possiamo assegnare un metodo o una proprietà dell'oggetto in qualsiasi
posizione a patto che si trovi dopo la dichiarazione dell'oggetto. Nella seconda riga vediamo
l'operazione di assegnazione di una proprietà, per farlo basta scrivere il nome dell'oggetto seguito da
un punto e dal nome della proprietà Robot.metallo = "Titanio";. Anche l'assegnamento di un
metodo presenta una forma analoga alle proprietà Robot.sterminaUmani = function(argomento)
{alert(argomento);};. Probabilmente l'avrete già notato, ma abbiamo usato una dichiarazione della
funzione/metodo diversa dalla forma classica che abbiamo utilizzato fino adesso functionsterminaUmani(argomento) {alert(argomento);}; purtroppo tutto questo è necessario, perchè
altrimenti non sarebbe possibile assegnarla come metodo dell'oggetto "Robot" infatti assegnare un
metodo in questa maniera non è sintatticamente corretto function
Robot.sterminaUmani(argomento) {alert(argomento);};
Clicca Qui per eseguire il codice.
var Robot = new Object(); //oppure si può definire l'oggetto così var Robot =
{};
Robot.metallo = "Titanio";
Robot.sterminaUmani = function(argomento) {
alert(argomento);
};
Robot.sterminaUmani(Robot.metallo);
Una variante della definizione dell'oggetto consiste nel definire subito tutti i metodi e le proprietà
all'interno della dichiarazione (nelle graffe). I vantaggi di questa sintassi sono nella compattezza del
codice, infatti definendole all'interno non è più necessario scrivere prima di ogni proprietà o metodo
il nome dell'oggetto al quale li associamo, questo succede perchè è scontato che li si assegnino
all'oggetto al quale sono "ospiti". Non è l'unico cambiamento però, oltre alla definizione delle
funzioni cambiano anche i segni usati per l'assegnamento ora si devono utilizzare i due punti al
posto dell'uguale, mentre per far finire un assegnamento bisogna utilizzare la virgola al posto del
punto e virgola:
Clicca Qui per eseguire il codice.
var Robot = {
metallo: "Titanio",
sterminaUmani: function(argomento) {
alert(argomento);
}
};
Robot.sterminaUmani(Robot.metallo);
Come potete vedere il risultato non cambia.
Funzioni native
Ne abbiamo viste già alcune in questo capitolo come alert, parseInt ecc, in questa guida ne vedremo
molte altre e normalmente saranno accompagnate dall'argomento. Tutte quelle senza argomento
saranno presentate qua. La funziones eval(string) utilizza la stringa racchiusa tra parentesi come
delle isruzioni JavaScript. L'operatore typeof invece restituisce il tipo di dato della variabile che
analizza. I valori restituiti possono essere: string, boolean, number, function.
Clicca Qui per eseguire il codice.
//eval
var part1 = "nome = \"matteo\";";
var part2 = "cognome = \"gilardoni\";";
var part0 = "var resultEval = nome + \" \" + cognome;";
eval(part1 + part2 + part0);
//typeof
var booleano = true;
var prova = new Function();
var numero = 1;
var carattere = "Salve";var resulType = "Booleano: " + typeof booleano +"\n" + "prova: " + typeof prova
+ "\n" + "numero: " + typeof numero + "\n" + "carattere: " + typeof carattere +
"\n";
alert("EVAL \n" + resultEval +"\n\n"+ "TYPEOF: \n" + resulType);
Avviare javaScript al momento giusto
Il primo problema che troverete con javaScript sarà quello di aspettare che la pagina abbia
caricato tutti gli oggetti del Dom (Document Object Model). Perchè senza di quelli javascript non
può manipolarli, questo problema deriva dal fatto che la dichiarazione viene fatta nel tag head e
quindi il parser quando analizza riga per riga la pagina analizza javascript e lo avvia, ma non
avendo analizzato tutta la pagina javascript non ha gli elementi che la maggiorparte delle volte deve
manipolare. Per aspettare che il dom sia completo ci sono alcune soluzioni, la prima è utilizzare
l'oggetto wondow e l'evento onload:
windows.onload
window.onload = function() {
//qui inseriamo tutte le nostre funzioni
document.getElementById('google').onclick = function(){alert('Google');};
document.getElementById('yahoo').onclick = function(){alert('Yahoo!');};
}
Questo sistema attende che l'oggetto window che rappresenta la finestra del browser carichi tutta la
pagina che contiene. Questo può creare un'altro handicap perchè non attende soltanto che il dom
venga caricato ma anche tutti i file multimediali ad esso associati creando un ritardato maggiore
all'esecuzione dei nostri script. Per risolvere quest'ultimo problema ci viene in aiuto una delle
librerie che abbiamo introdotto ad inizio capitolo, la libreria jQuery, con la sua funzione .ready()
$(document).ready(function(){//function});
$(document).ready(function(){
//qui inseriamo tutte le nostre funzioni
document.getElementById('google').onclick = function(){alert('Google');};
document.getElementById('yahoo').onclick = function(){alert('Yahoo!');};
});
Anche Prototype offre un metodo simile a quello di jQuery, che risolse i problemi presentati
precedentemente.
document.observe("dom:loaded", function() {//function});
document.observe("dom:loaded", function() {
//qui inseriamo tutte le nostre funzioni
document.getElementById('google').onclick = function(){alert('Google');};
document.getElementById('yahoo').onclick = function(){alert('Yahoo!');};
});Accesso al Browser Object Model
Per poter andare a modificare la nostra pagina web bisogna conoscerne la struttura, per poter sapere
quali elementi poter andare a manipolare. Il BOM è una struttura gerarchica che contiene tutti gli
elementi del browser, nell'immagine seguente vediamo i più importanti. Il nodo più alto è window
che rappresenta la finestra del browser, poi sotto abbiamo:
1. navigator (il browser)
2. screen (lo schermo)
3. location (l'indirizzo)
4. history (la cronologia)
5. document (il documento html)
Sempre su questo livello troviamo anche l'oggetto status e i frames, usati sempre meno.
Funzioni dell'oggetto window
Ora vediamo quali funzioni native sono disponibili per gli elementi appena citati. alert(), confirm()
e prompt() tutti questi sono metodi dell'elemento window e si richiamano in questa maniera
window.alert() se avrete fatto attenzione però alert() come le altre tre funzioni non necessitano per
forza della dichiarazione dell'oggetto window. Tutti e tre i metodi aprono un finistra, alert() apre una
finestra implicita ed il testo che usa è quello definto nell'argomento, confirm() apre una finestra
modale significa che permette di scegliere tra due possibilità che restituiranno al programma true o
false, nell'esempio abbiamo usato questa caratteristica per sfruttare il comportamento delle
condizioni, cliccando sul pulsante ok che equivale a true si attiverà il codice condizionale, infine
troviamo prompt() che è una finestra di dialogo, questo tipo di metodo apre un finestra dove potete
inserire del testo. Nell'esempio si è sfruttata la caratteristica di prompt di restituire il testo che viene
inserito per aprire un finistra implicita con il vostro nome (almeno se non avete fatto i furbi ;)).
Clicca Qui per eseguire il codice.
window.alert("finestra implicita");
if (window.confirm("finestra modale")){
alert("hai scelto ok");
};
var nome = window.prompt("Come ti chiami?","Scrivi qui il tuo nome");
alert("Ciao " + nome);
I metodi blur() e focus() si occupano focalizzare un elemento in una pagina, quando clicchiamo per
esempio su un campo di testo, oppure usiamo il tasto tab, si dice che il focus, si è spostato. Questi
metodi si occupano così di toglierlo tramite blur() e di metterlo con focus(), ecco un esempio su
come spostare il focus su un elemento document.getElementById('main').focus();. I prossimi metodiche spiegheremo presentano tutti due varianti, una che accetta dei valori assoluti e l'altra dei valori
relativi. Iniziamo con il primo resizeTo() e resizeBy() queste due funzioni si occupano di
ridimensionare la finestra del browser, moveTo() e moveBy() spostano la finestra a seconda dei
valori inseriti, scrollTo() e scrollBy() si occupa di spostare la scroll bar della pagina. Se avete uno
dei browser usciti recentemente vi accorgerete che il prossimo esempio non funziona. Questo non è
dovuto a qualche errore nel codice ma è una nuova modifica che hanno adottato alcuni dei più
recenti browser come Chrome, Opera e Firefox. I metodi apparte (scrollTo e scrollBy) funzionano
solo se si utilizzati insieme al metodo open(). Infatti si sconsiglia l'uso di questi metodi se non nel
caso di dover aprire una nuova finestra.
Clicca Qui per eseguire il codice.
alert("ridimensiona in modo assoluto e relativo");
window.resizeTo(900,800);
window.resizeBy(-100,-100);
alert("muovi la pagina in modo assoluto e relativo");
window.moveTo(100,200);
window.moveBy(100,200);
alert("scrolla in modo assoluto e relativo");
window.scrollTo(0,400);
window.scrollBy(0,-100);
Siccome ne abbiamo parlato, ora vediamo la funzione open("url", "titolo",
"parametro1=valore1, parametro2=valore2"), questo metodo si occupa di aprire una nuova
pagina, e gli si possono inviare parecchi argomenti, il primo argomento si occupa di decidere l'url
ovvero la pagina che vogliamo aprire, il secondo si occupa di dargli un titolo, mentre gli altri sono
tutti parametri che si possono passare usando la forma parametro=valore ogni parametro deve
essere diviso da una virgola. Di seguito vediamo i parametri che è possibile inserire:
Possibili
Nome parametro Descrizione
valori
Copia o meno la cronologia della finestra padre nella finestra
copyhistory yes, no
figlia
width, height, top, Indicano rispettivamente le dimensioni e la posizione sullo
numero intero
left schermo della finestra
location yes, no Indica se mostrare la barra dell'indirizzo
menubar yes, no Indica se mostrare la barra dei menu
resizable yes, no Abilita il ridimensionamento della finestra
scrollbars yes, no Mostra/nasconde le barre di scorrimento laterali
status yes, no Mostra la barra di stato
toolbar yes, no Mostra la barra degli strumenti
Insieme alla funzione open() esiste anche la funzione close() che si occupa di chiudere una finestra
del browser. Quando ci si occupa di creare una nuova finestra è importante creare un riferimento
alla finestra che si vuole aprire. Questo permette di avere il controllo sulla finestra appena creata e
l'accesso alle sue proprietà ed ai suoi metodi. Nel prossimo esempio l'oggetto di riferimento è la
variabile windowObjectReference.
Clicca Qui per eseguire il codice.
var windowObjectReference; //creiamo l'oggetto che conterrà la nostra referenza
function openRequestedPopup(){
windowObjectReference =window.open("capitolo1.html","DescriptiveWindowName","resizable=yes,scrollbars=y
es,status=yes");
}
function closeRequestedPopup(){
windowObjectReference.close();
}
openRequestedPopup();
closeRequestedPopup();
alert("ho aperto e subito chiuso la finestra");
Navigator
Restituisce un riferimento all'oggetto navigator che può essere richiesto per informazioni sulle
applicazioni in esecuzione.
Clicca Qui per eseguire il codice.
alert("You're using " + navigator.appName);
Stan
Proprietà Descrizione Esempio
dard
Restituisce il nome
intero del nome del
alert("You're using " +
"codice" del browser
navigator.appCodeName No corrente. Non fare Esegui navigator.appCodeName);
affidamento su questa
proprietà per avere un
valore corretto.
Restituisce il nome
alert("You're using " +
uffiaciale del browser.
navigator.appName Si Non fare affidamento su Esegui navigator.appName);
questa proprietà per
avere un valore corretto.
Restituisce la versione
del browser in una
stringa. Non fare alert(navigator.appVersion);
navigator.appName Si Esegui
affidamento su questa
proprietà per avere un
valore corretto.
Restituisce il build
identifier del browser undefined
navigator.buildID No Esegui
(esempio
"2006090803").
Fornisce informazioni undefined
navigator.connection Si sulla connessione alla Esegui
rete del dispositivo.
Restituisce un valore
booleano che indica se i undefined
navigator.cookieEnabled Si Esegui
cookie sono abilitati nel
browser oppure no.
navigator.doNotTrack No Riporta il valore della Esegui undefined
preferenza do-not-trackStan
Proprietà Descrizione Esempio
dard
dell'utente. Quando
questo valore è "Si , il
tuo sito o applicazione
non deve monitorare
l'utente.
Returns the id object
which you can use to undefined
navigator.id No add support for Esegui
BrowserID to your web
site.
Restituisce una stringa
che rappresenta la alert(navigator.language);
navigator.language Si Esegui
versione della lingua del
browser.
Restituisce una lista di alert(navigator.mimeTypes);
navigator.mimeTypes Si tipi MIME supportati dal Esegui
browser.
Restituisce un ogggetto alert(navigator.mimeTypes);
navigator.mozApps No Apps che puoi installare, Esegui
manipolare e controllare.
Returns a battery object
you can use to get undefined
navigator.mozBattery No Esegui
information about the
battery charging status.
Returns a notification
navigator.mozNotificatio
object you can use to
ne undefined
No deliver notifications to Esegui
navigator.webkitNotificat
the user from your web
ion
application.
Returns a SmsManager
object you can use to undefined
navigator.mozSms No Esegui
manage SMS messaging
in your web application.
Returns a Telephony
object you can use to undefined
navigator.mozTelephony No Esegui
create and manage
telephone calls.
Restituisce un valore alert(navigator.onLine);
navigator.onLine Si booleano se il browser Esegui
sta lavorando online.
Restituisce una stringa undefined
navigator.oscpu Si che rappresenta il Esegui
sistema operativo.
Restituisce una stringa alert(navigator.platform);
navigator.platform Si che rappresenta la Esegui
piattaforma del browser.
navigator.plugins Si Restituisce una array dei Esegui alert(navigator.plugins);Stan
Proprietà Descrizione Esempio
dard
plug-in installti nel
browser.
Restituisce il nome del alert(navigator.product);
navigator.product No Esegui
prodotto del browser.
Restituisce il numero di alert(navigator.productSub);
navigator.productSub No Esegui
produzione del browser.
Restituisce una stringa
vuota. In Netscape 4.7x, undefined
navigator.securitypolicy No restituisce "US & CA Esegui
domestic policy" o
"Export policy".
Returns the user agent alert(navigator.userAgent);
navigator.userAgent Si string for the current Esegui
browser.
Restituisce il nome del alert(navigator.vendor);
navigator.vendor No Esegui
fornitore del browser.
Restituisce il numero alert(navigator.vendorSub);
navigator.vendorSub No della versione del Esegui
fornitore del browser.
Restituisce un oggetto undefined
navigator.webkitPointer No PointerLock per il Esegui
mouse API Lock.
Ora vedremo i metodi che ci vengono concessi:
Stan
Metodo Descrizione Esempio
dard
Indica se il
browser host ha alert(navigator.javaEnabled);
navigator.javaEnabled Si Esegui
Java abilitato o
no.
Consente al
codice di vedere
se il documento
determinato undefined
navigator.mozIsLocallyAvailable No Esegui
dall'URI è
disponibile
senza l'uso della
rete.
Permette ai siti
di registrarsi undefined
navigator.registerContentHandler Si come possibile Esegui
gestore con un
tipo di MIME.
Permette ai siti
web di undefined
navigator.registerProtocolHandler Si Esegui
registrarsi come
un possibileStan
Metodo Descrizione Esempio
dard
gestore con un
determinato
protocollo.
Provoca la
vibrazione sui undefined
navigator.vibrate() Si Esegui
dispositivi che la
supportano.
Screen
L'oggetto screen restituisce i riferimenti dello schermo è un oggetto speciale perchè ispeziona le
proprietà dello schermo corrente e viene eseguito il rendering. Ora vediamo le seguenti proprietà
supportate:
Proprietà Descrizione Esempio
Specifica la coordinata y del primo pixel che alert(screen.availTop);
availTop non è assegnato alle permanenti o Esegui
semipermanenti interfaccie utente.
Specifica il primo pixel disponibile a alert(screen.availLeft);
availLeft Esegui
sinistra.
alert(screen.availHeight);
availHeight Specifica l'altezza dello schermo. Esegui
alert(screen.availWidth);
availWidth Specifica la larghezza dello schermo. Esegui
Specifica la profondità del colore dello alert(screen.colorDepth);
colorDepth Esegui
schermo.
alert(screen.height);
height Restituisce l'altezza dello schermo in pixel. Esegui
Restituisce la distanza dei pixel dal lato undefined
left sinistro dello schermo principale al lato Esegui
sinistro dello schermo corrente.
alert(screen.pixelDepth);
pixelDepth Prende i bit di profondità dello schermo. Esegui
Restituisce la distanza dei pixel Returns the undefined
top distance in pixels from the top side of the Esegui
current screen.
alert(screen.width);
width Restituisce la larghezza dello schermo. Esegui
Location
L'oggetto Location contiene informazioni sull'url del documento e fornisce anche dei metodi per
cambiarlo. Nel prossimo esempio mostriamo come cambiare l'url del browser in modo da cambiare
pagine:
Clicca Qui
window.location = "capitolo1.html";
Come possiamo vedere l'oggetto location contiene tutta la stringa dell'url, associandogli un valore
diverso, come nell'esempio precedente il browser seguirà quel l'url.Clicca Qui
alert(window.location);
Ora invece nella tabella seguente vedremo le proprietà che si posso associare all'oggetto location,
ogni proprietà permette di selezionare una parte dell'url: http://[www.example.com]:80/search?
q=devmo#test
Proprietà Descrizione Esempio
La parte dell'url che segue dopo il simbolo #,
hash #test
includendo il simbolo stesso.
host Il nome dell'host e il numero della porta. [www.example.com]:80
hostname Il nome dell'host senza il numero della porta. www.example.com
http://[www.example.com]:80/search?
href L'intero URL.
q=devmo#test
pathname il percorso (relativo all'host). /search
port Il numero della porta. 80
protocol Il protocollo dell'url. http:
La parte dell'url che segue dopo il simbolo ?,
search ?q=devmo
includendo il simbolo stesso.
Clicca Qui
alert(window.location.protocol);
Con queste proprietà possiamo assegnare valori specifici per ogni parte dell'url. Ora vedremo i
metodi che ci vengono concessi:
Metodo Descrizione
assign(url) Carica il documento attraverso l'url fornito dall'argomento.
Ricarica il documento corrente. Forceget è un valore booleano che quando è vero,
reload(forc
ricarica sempre la pagina dal server. Se è false o non specificato il browser ricaricherà
eget)
la pagina attraverso le cache.
Sostituisce il documento corrente con l'url fornito. La differenza con il metodo assign()
replace(url)
è che dopo aver usato replace() la pagina corrente non sarà salvata nella cronologia.
toString() Restituisce la rappresentazionr in formato stringa del l'url dell'oggetto location.
il metodo toString() converte un oggetto in in una stringa. Questo metodo serve se si vuole lavorare
sull'url come fosse una stringa, per poter usare altri metodi come charAt() che permette di sapere
quale carattere c'è nell'url in una determinata posizione.
Clicca Qui
alert("url completo: \n" + window.location + "\n \n" + "quindicesimo
carattere: \n" + window.location.toString().charAt(15));
History
Il BOW prevede l'accesso alla cronologia del browser tramite l'oggetto history. Con questo oggetto
puoi disporre dei metodi e delle proprietà che ti lasciano andare avanti e indietro nella cronologia
dell'utente. Vediamo le prime tre funzioni dell'oggetto history, il metodo back() fa andare alla
pagina visitata precedentemente, forward() si occupa di fare l'opposto del metodo back.
Clicca Qui per eseguire back(), clicca Qui per eseguire forward().window.history.back();
window.history.forward();
Con la funzione go() possiamo andare nel punto della cronologia che vogliamo.
Clicca Qui per eseguire il codice.
window.history.go(-1); //è come usare back()
window.history.go(1); //è come usare forward()
Possiamo anche recuperare quante pagine abbiamo visto.
Clicca Qui per eseguire il codice.
var numberPageVisited = window.history.length;
alert(numberPageVisited);
Document
L'elemento document contiene tutti gli elementi dell'html e presenta al suo interno un'altra
sottoFunzioni dell'oggetto window
Ora vediamo quali funzioni native sono disponibili per gli elementi appena citati. alert(), confirm()
e prompt() tutti questi sono metodi dell'elemento window e si richiamano in questa maniera
window.alert() se avrete fatto attenzione però alert() come le altre tre funzioni non necessitano per
forza della dichiarazione dell'oggetto window. Tutti e tre i metodi aprono un finistra, alert() apre una
finestra implicita ed il testo che usa è quello definto nell'argomento, confirm() apre una finestra
modale significa che permette di scegliere tra due possibilità che restituiranno al programma true o
false, nell'esempio abbiamo usato questa caratteristica per sfruttare il comportamento delle
condizioni, cliccando sul pulsante ok che equivale a true si attiverà il codice condizionale, infine
troviamo prompt() che è una finestra di dialogo, questo tipo di metodo apre un finestra dove potete
inserire del testo. Nell'esempio si è sfruttata la caratteristica di prompt di restituire il testo che viene
inserito per aprire un finistra implicita con il vostro nome (almeno se non avete fatto i furbi ;)).
Clicca Qui per eseguire il codice.
window.alert("finestra implicita");
if (window.confirm("finestra modale")){
alert("hai scelto ok");
};
var nome = window.prompt("Come ti chiami?","Scrivi qui il tuo nome");
alert("Ciao " + nome);
I metodi blur() e focus() si occupano focalizzare un elemento in una pagina, quando clicchiamo per
esempio su un campo di testo, oppure usiamo il tasto tab, si dice che il focus, si è spostato. Questi
metodi si occupano così di toglierlo tramite blur() e di metterlo con focus(), ecco un esempio su
come spostare il focus su un elemento document.getElementById('main').focus();. I prossimi metodi
che spiegheremo presentano tutti due varianti, una che accetta dei valori assoluti e l'altra dei valori
relativi. Iniziamo con il primo resizeTo() e resizeBy() queste due funzioni si occupano di
ridimensionare la finestra del browser, moveTo() e moveBy() spostano la finestra a seconda dei
valori inseriti, scrollTo() e scrollBy() si occupa di spostare la scroll bar della pagina. Se avete uno
dei browser usciti recentemente vi accorgerete che il prossimo esempio non funziona. Questo non è
dovuto a qualche errore nel codice ma è una nuova modifica che hanno adottato alcuni dei più
recenti browser come Chrome, Opera e Firefox. I metodi apparte (scrollTo e scrollBy) funzionano
solo se si utilizzati insieme al metodo open(). Infatti si sconsiglia l'uso di questi metodi se non nel
caso di dover aprire una nuova finestra.Clicca Qui per eseguire il codice.
alert("ridimensiona in modo assoluto e relativo");
window.resizeTo(900,800);
window.resizeBy(-100,-100);
alert("muovi la pagina in modo assoluto e relativo");
window.moveTo(100,200);
window.moveBy(100,200);
alert("scrolla in modo assoluto e relativo");
window.scrollTo(0,400);
window.scrollBy(0,-100);
Siccome ne abbiamo parlato, ora vediamo la funzione open("url", "titolo",
"parametro1=valore1, parametro2=valore2"), questo metodo si occupa di aprire una nuova
pagina, e gli si possono inviare parecchi argomenti, il primo argomento si occupa di decidere l'url
ovvero la pagina che vogliamo aprire, il secondo si occupa di dargli un titolo, mentre gli altri sono
tutti parametri che si possono passare usando la forma parametro=valore ogni parametro deve
essere diviso da una virgola. Di seguito vediamo i parametri che è possibile inserire:
Possibili
Nome parametro Descrizione
valori
Copia o meno la cronologia della finestra padre nella finestra
copyhistory yes, no
figlia
width, height, top, Indicano rispettivamente le dimensioni e la posizione sullo
numero intero
left schermo della finestra
location yes, no Indica se mostrare la barra dell'indirizzo
menubar yes, no Indica se mostrare la barra dei menu
resizable yes, no Abilita il ridimensionamento della finestra
scrollbars yes, no Mostra/nasconde le barre di scorrimento laterali
status yes, no Mostra la barra di stato
toolbar yes, no Mostra la barra degli strumenti
Insieme alla funzione open() esiste anche la funzione close() che si occupa di chiudere una finestra
del browser. Quando ci si occupa di creare una nuova finestra è importante creare un riferimento
alla finestra che si vuole aprire. Questo permette di avere il controllo sulla finestra appena creata e
l'accesso alle sue proprietà ed ai suoi metodi. Nel prossimo esempio l'oggetto di riferimento è la
variabile windowObjectReference.
Clicca Qui per eseguire il codice.
var windowObjectReference; //creiamo l'oggetto che conterrà la nostra referenza
function openRequestedPopup(){
windowObjectReference =
window.open("capitolo1.html","DescriptiveWindowName","resizable=yes,scrollbars=y
es,status=yes");
}
function closeRequestedPopup(){
windowObjectReference.close();
}
openRequestedPopup();
closeRequestedPopup();
alert("ho aperto e subito chiuso la finestra");Navigator
Restituisce un riferimento all'oggetto navigator che può essere richiesto per informazioni sulle
applicazioni in esecuzione.
Clicca Qui per eseguire il codice.
alert("You're using " + navigator.appName);
Stan
Proprietà Descrizione Esempio
dard
Restituisce il nome
intero del nome del
"codice" del
alert("You're using " +
browser corrente.
navigator.appCodeName No Non fare Esegui navigator.appCodeName);
affidamento su
questa proprietà per
avere un valore
corretto.
Restituisce il nome
uffiaciale del
alert("You're using " +
browser. Non fare
navigator.appName Si affidamento su Esegui navigator.appName);
questa proprietà per
avere un valore
corretto.
Restituisce la
versione del
browser in una
stringa. Non fare alert(navigator.appVersion);
navigator.appName Si Esegui
affidamento su
questa proprietà per
avere un valore
corretto.
Restituisce il build
identifier del undefined
navigator.buildID No Esegui
browser (esempio
"2006090803").
Fornisce
informazioni sulla undefined
navigator.connection Si Esegui
connessione alla
rete del dispositivo.
Restituisce un
valore booleano che undefined
navigator.cookieEnabled Si indica se i cookie Esegui
sono abilitati nel
browser oppure no.
Riporta il valore
della preferenza do- undefined
navigator.doNotTrack No Esegui
not-track
dell'utente. QuandoStan
Proprietà Descrizione Esempio
dard
questo valore è "Si ,
il tuo sito o
applicazione non
deve monitorare
l'utente.
Returns the id
object which you
can use to add undefined
navigator.id No Esegui
support for
BrowserID to your
web site.
Restituisce una
stringa che alert(navigator.language);
navigator.language Si rappresenta la Esegui
versione della
lingua del browser.
Restituisce una lista
di tipi MIME alert(navigator.mimeTypes);
navigator.mimeTypes Si Esegui
supportati dal
browser.
Restituisce un
ogggetto Apps che alert(navigator.mimeTypes);
navigator.mozApps No puoi installare, Esegui
manipolare e
controllare.
Returns a battery
object you can use undefined
navigator.mozBattery No to get information Esegui
about the battery
charging status.
Returns a
notification object
you can use to
navigator.mozNotification e undefined
No deliver notifications Esegui
navigator.webkitNotification
to the user from
your web
application.
Returns a
SmsManager object
you can use to undefined
navigator.mozSms No Esegui
manage SMS
messaging in your
web application.
Returns a
Telephony object undefined
navigator.mozTelephony No you can use to Esegui
create and manage
telephone calls.Stan
Proprietà Descrizione Esempio
dard
Restituisce un
valore booleano se alert(navigator.onLine);
navigator.onLine Si Esegui
il browser sta
lavorando online.
Restituisce una
stringa che undefined
navigator.oscpu Si Esegui
rappresenta il
sistema operativo.
Restituisce una
stringa che alert(navigator.platform);
navigator.platform Si rappresenta la Esegui
piattaforma del
browser.
Restituisce una alert(navigator.plugins);
navigator.plugins Si array dei plug-in Esegui
installti nel browser.
Restituisce il nome alert(navigator.product);
navigator.product No del prodotto del Esegui
browser.
Restituisce il
numero di alert(navigator.productSub);
navigator.productSub No Esegui
produzione del
browser.
Restituisce una
stringa vuota. In
Netscape 4.7x, undefined
navigator.securitypolicy No restituisce "US & Esegui
CA domestic
policy" o "Export
policy".
Returns the user alert(navigator.userAgent);
navigator.userAgent Si agent string for the Esegui
current browser.
Restituisce il nome alert(navigator.vendor);
navigator.vendor No del fornitore del Esegui
browser.
Restituisce il
numero della alert(navigator.vendorSub);
navigator.vendorSub No versione del Esegui
fornitore del
browser.
Restituisce un
oggetto undefined
navigator.webkitPointer No Esegui
PointerLock per il
mouse API Lock.
Ora vedremo i metodi che ci vengono concessi:Puoi anche leggere
