Capitoli di esempio - Mondadori Informatica

Transcript

Capitolo 5
Utilizzare operatori ed espressioni
Dopo avere letto questo capitolo sarete in grado di
n Capire gli operatori disponibili in JavaScript.
n Utilizzare gli operatori JavaScript per eseguire calcoli, assegnazioni, test relazionali
e test di uguaglianza.
n Utilizzate l'operatore void per aprire una nuova finestra tramite un link.
Gli operatori
Lo standard ECMA-262 definisce operatori assortiti di varie forme. Essi includono:
n Operatori di addizione
n Operatori di moltiplicazione
n Operatori bitwise
n Operatori di uguaglianza
n Operatori relazionali
n Operatori unari
n Operatori di assegnazione
Gli operatori possono essere utilizzati sia sui valori literal, come il numero 10, sia sulle variabili
e altri oggetti JavaScript.
Operatori di addizione
Il termine operatori di addizione include gli operatori sia di addizione sia di sottrazione. Anche
se potreste obiettare che il nome è fuorviante, come mi ricorderebbe mia madre insegnante, la
sottrazione non è altro che l’addizione con un numero negativo. Come potreste indovinare, gli
operatori per l’addizione e la sottrazione sono rispettivamente + e –. Ecco alcuni esempi di come
sono utilizzati:
4 + 5;
x + y;
5 - 1;
// Risultato 9.
// Somma x e y.
// Risultato 4.
L’operatore di addizione agisce in modi diversi a seconda del tipo di valore sommato. Quando si
utilizza una stringa, l’operatore di addizione concatena gli argomenti a sinistra e a destra. Potreste
ottenere strani risultati quando JavaScript converte inaspettatamente un tipo prima di eseguire
81
82
Parte I JavaCosa? Il “dove”, il “come” e il “perché” di JavaScript
un’operazione matematica. Non otterrete per esempio i risultati attesi quando pensate di avere
una variabile numerica mentre l’interprete JavaScript la tratta come una stringa. Ecco alcuni
esempi specifici:
var
var
var
var
var
var
var
aNum = 947;
aStr= "Rush";
anotherNum = 53;
aStrNum = "43";
result1 = aNum + aStr;
// result1 sarà la stringa "947Rush";
result2 = aNum + anotherNum; // result2 sarà il numero 1000;
result3 = aNum + aStrNum; // result3 sarà 94743;
Come descritto nel Capitolo 4, “Lavorare con variabili e dati”, in molti casi JavaScript vi permette
di cambiare o convertire esplicitamente un tipo in un altro. Osservate la variabile result3 dell’esempio precedente. Molto probabilmente vorrete che result3 contenga il risultato dell’espressione matematica 947 + 43. Ma poiché il secondo valore, rappresentato da aStrNum, è una stringa,
l’espressione concatena i due valori anziché sommarli matematicamente come numeri. Utilizzando la funzione Number() si converte aStrNum in un numero in modo che sia possibile impiegarlo
in un’espressione matematica come un’addizione. Ecco il codice rilevante, corretto per fare ciò
che potreste pensare debba fare:
var aNum = 947;
var aStrNum = Number("43");
var result3 = aNum + aStrNum;
// result3 sarà 990;
Operatori di moltiplicazione
Come gli operatori di addizione, gli operatori di moltiplicazione si comportano nel modo che
potreste aspettarvi: eseguono moltiplicazione e divisione. Gli operatori di moltiplicazione includono anche l’operatore modulo, %. L’operatore di moltiplicazione, *, moltiplica due numeri,
mentre l’operatore di divisione, /, divide numeri. L’operatore modulo, %, dà il resto della divisione
di due numeri. Il modulo di 4 diviso 3 è per esempio 1, come in questo esempio:
javascript:alert(4 % 3);
Il risultato è mostrato di seguito:
Capitolo 5 Utilizzare operatori ed espressioni
83
Operatori bitwise
Gli operatori bitwise includono AND, OR, XOR, NOT, SHIFT a sinistra, SHIFT a destra con segno
e SHIFT a destra con zeri di riempimento, come si vede nella Tabella 5-1.
Tabella 5-1 Gli operatori bitwise
Operatore
Funzione
&
AND
|
O
^
XOR
~
NOT
<<
SHIFT a sinistra
>>
SHIFT a destra con segno
>>>
SHIFT a destra con zeri di riempimento
Maggiori informazioni sugli operatori bitwise sono disponibili nella specifica ECMA-262. Non li
tratterò ulteriormente in questo libro.
Operatori di uguaglianza
Gli operatori di uguaglianza sono utilizzati per testare se due espressioni sono identiche. Restituiscono sempre tipi boolean: true o false. Gli operatori di uguaglianza di JavaScript sono elencati
nella Tabella 5-2.
Tabella 5-2 Operatori di uguaglianza
Operatore
Funzione
==
Testa se due espressioni sono uguali
!=
Testa se due espressioni sono diverse
===
Testa se due espressioni sono uguali utilizzando metodi più stretti
!==
Testa se due espressioni sono diverse utilizzando metodi più stretti
Come potete vedere nella Tabella 5-2, ci sono diversi modi per testare l’uguaglianza o la disuguaglianza. Questi metodi differiscono nel grado di uguaglianza che richiedono. Il più stretto dei due,
===, richiede non solo che i valori di una data espressione siano uguali ma che lo siano anche i
tipi. Quando si utilizza il test stretto, una stringa con il valore “42” non è uguale a un numero
con il valore 42, mentre il test di uguaglianza meno stretto determinerebbe che sono uguali. Un
esempio chiarisce meglio il concetto.
84
Test degli operatori di uguaglianza
1. Utilizzando Microsoft Visual Studio, Eclipse o un altro editor modificate il file equality.htm
nella cartella dei file di esempio Chapter05.
2. Nella pagina Web aggiungete il codice mostrato sotto in grassetto.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Equality</title>
<script type = "text/javascript">
var x = 42;
var y = "42";
if (x == y) {
alert("x is equal to y with a simple test.");
} else {
alert("x is not equal to y");
}
</script>
</head>
<body>
</body>
</html>
3. Accedete con il browser Web alla nuova pagina creata. Il codice è molto semplice nel suo funzionamento. Sono impostate due variabili, x e y. La variabile x è impostata al valore numerico
42, mentre y è impostata al valore stringa “42” (notate le virgolette doppie). Il test per l’uguaglianza appare di seguito ed è di tipo semplice, ovvero ==. Questo tipo di test di uguaglianza
misura soltanto i valori e ignora se i tipi di variabili sono gli stessi. A seconda del risultato
viene chiamata la funzione alert() appropriata. Dovreste ricevere un avviso come il seguente:
4. Cambiate il test di uguaglianza in modo che sia di tipo stretto. Prima di tutto cambiate il
tipo di test di uguaglianza in === e poi cambiate l’avviso in modo che compaia la parola strict
al posto di simple. Il codice completo dovrebbe presentarsi come segue (le righe modificate
sono mostrate in grassetto):
<html>
<head>
<title>Equality</title>
85
var x = 42;
var y = "42";
if (x === y) {
alert("x is equal to y with a strict test.");
} else {
alert("x is not equal to y");
}
</script>
</head>
<body>
</body>
</html>
5. Accedete ancora con il browser Web alla pagina. Il test di uguaglianza ora è di tipo stretto,
ovvero ===. Come quello meno stretto, questo test esamina i valori, ma diversamente dal test
più semplice verifica anche i tipi di variabili. Poiché la variabile x è un numero e la variabile y
è una stringa, il test di uguaglianza fallisce. A seconda del risultato viene chiamata la funzione
alert() appropriata. Questa volta l’avviso si presenta come segue:
Operatori relazionali
Gli operatori relazionali testano espressioni per scoprire se sono maggiori o minori fra loro o se
un dato valore si trova in un elenco o è un’istanza di un determinato tipo. La Tabella 5-3 elenca
gli operatori relazionali di JavaScript.
Tabella 5-3 Gli operatori relazionali
Operatore
Funzione
>
Maggiore di
<
Minore di
>=
Maggiore o uguale a
<=
Minore o uguale a
in
Testa se un valore è presente in un’espressione
instanceof
Testa se un’espressione è un’istanza di un oggetto
Avete probabilmente una certa familiarità con i primi quattro operatori relazionali della Tabella
5-3, ma ecco comunque alcuni rapidi esempi:
if (3 > 4) {
// Fare qualcosa
}
86
Ovviamente, l’integer 3 non è mai maggiore dell’integer 4, perciò questo non darà mai true; quindi il codice all’interno dell’istruzione if non sarà mia eseguito. Analogamente, il codice seguente
testa se la variabile x è minore di y:
if (x < y) {
// Fare qualcosa
}
L’operatore in
L’operatore in è utilizzato più comunemente per valutare se un dato indice è contenuto in un
oggetto. Osservate che l’operatore in cerca un indice e non un valore. Perciò, poiché c’è un indice
chiamato “star” nell’oggetto mjObj, il codice seguente funzionerà:
var myObj = { star: "Algol", constellation: "Perseus" };
if ("star" in myObj) {
// Fare qualcosa di fantasioso
}
L’operatore in si aspetta di lavorare con tipi stringa, perciò non funziona per i numeri. Un utilizzo
comune dell’operatore in è l’iterazione su un oggetto. Vedrete un esempio di questo utilizzo nel
Capitolo 8, “Gli oggetti in JavaScript”.
L’operatore instanceof
L’operatore instanceof testa se una data espressione, di solito una variabile, è un’istanza dell’oggetto
incluso come parte dell’istruzione. Sì è difficile. Passiamo subito a un esempio e poi capirete:
var myDate = new Date();
if (myDate instanceof Date) {
// Fare qualcosa
}
Poiché la variabile myDate è un’istanza dell’oggetto incorporato Date, la valutazione instanceof
restituisce true. L’operatore instanceof funziona sia sugli oggetti definiti dall’utente sia sugli oggetti
incorporati come nell’esempio precedente.
Operatori unari
Gli operatori unari hanno un singolo operando o operano con una singola espressione in JavaScript. Gli operatori unari includono quelli della Tabella 5-4.
87
Tabella 5-4 Gli operatori unari
Operatore
Funzione
delete
Rimuove una proprietà
void
Restituisce il valore indefinito
typeof
Restituisce una stringa che rappresenta il tipo di dati
++
Incrementa un numero
--
Decrementa un numero
+
Converte l’operando in un numero
-
Nega l’operando
~
NOT bitwise
!
NOT logico
Poiché l’utilizzo degli operatori unari non è necessariamente evidente come quello degli operatori
di addizione o di sottrazione, lo spiegherò un po’ più a fondo.
Incrementare e decrementare
Gli operatori ++ e -- sono utilizzati rispettivamente per incrementare e decrementare un numero.
Sono impiegati come segue:
var aNum = 4;
aNum++;
++aNum;
Il posizionamento dell’operatore in relazione all’operando a cui è applicato determina il valore
che il codice restituisce. Quando è accodato alla variabile (si dice in questo caso postfisso), come
nella seconda riga di codice dell’esempio precedente, l’operatore restituisce il valore prima che sia
incrementato (o decrementato, a seconda del caso). Quando è prefisso, come nell’ultima riga di
codice dell’esempio precedente, l’operatore restituisce il valore dopo che è stato incrementato (o
decrementato).
Ecco un paio di esempi della differenza fra prefisso e postfisso nel codice. Nel primo esempio
l’operatore è postfisso:
var aNum = 4;
var y = aNum++;
// y ha ora il valore 4
Nel secondo esempio è prefisso:
var aNum = 4;
var y = ++aNum;
// y ha ora il valore 5.
88
Nella pratica utilizzerete l’operatore di incremento postfisso più spesso dell’operatore di incremento o di decremento prefisso a causa del suo comune utilizzo nelle strutture di loop. Le strutture di loop di JavaScript sono descritte nel Capitolo 6, “Controllare il flusso con le istruzioni
condizionali e i loop”.
Convertire in un numero con il segno più
Il segno più (+) tenta di convertire un valore in un numero. Nella pratica però ho scoperto che
è piuttosto inaffidabile, o almeno non abbastanza affidabile da essere utilizzato nel codice di
produzione. Quando ho bisogno di convertire qualcosa in un numero, utilizzo la funzione Number() esplicitamente. Potete tuttavia utilizzare il segno più come operatore unario per tentare la
conversione, come segue:
var x = +"43";
Questo codice converte la stringa “43” in un numero e memorizza il valore numerico 43 nella
variabile x.
Creare un numero negativo con il segno meno
Potreste non essere sorpresi del fatto che quando utilizzate un segno meno (-) davanti a un numero, il numero è convertito nel suo negativo, come in questo codice:
var y = "754";
var negat = -y;
alert(negat);
Not bitwise e Not logico
Il carattere tilde (~) è un not bitwise mentre il punto esclamativo (!) è un not logico. Questi operatori negano le loro controparti. Nel caso del not bitwise, il suo complementare è dato, perciò
uno 0 cambia in un -1 e un -1 in uno 0. Un not logico, che è la negazione che utilizzerete più
di frequente nella programmazione in JavaScript, nega l’espressione. Se l’espressione era true,
l’operatore not logico la rende false.
L’operatore delete
L’operatore delete prende la proprietà di un oggetto o l’indice di una matrice e lo rimuove o lo
rende indefinito. Ecco un semplice esempio di utilizzo di una matrice:
var myArray = ("The RCMP", "The Police", "State Patrol");
delete myArray[0]; // myArray ha ora "The Police" e "State Patrol"
Questo codice crea una matrice chiamata myArray e quindi elimina il valore del primo indice.
L’operatore delete funziona anche con gli oggetti, come potete vedere in questo esempio successivo.
89
Utilizzare l’operatore delete con gli oggetti
1. Con Visual Studio, Eclipse o un altro editor modificate il file deleteop1.htm nella cartella dei
file di esempio Chapter05.
2. La prima operazione è creare il contenuto per una pagina base da cui utilizzerete l’operatore
delete in un passaggio successivo. Nella pagina aggiungete il codice seguente mostrato in
grassetto:
<html>
<head>
<title>The Delete Operator</title>
<script type = "text/javascript" >
var star = {};
star["Polaris"] = new Object;
star["Mizar"] = new Object;
star["Aldebaran"] = new Object;
star["Rigel"] = new Object;
star["Polaris"].constellation = "Ursa Minor";
star["Mizar"].constellation = "Ursa Major";
star["Aldebaran"].constellation = "Taurus";
star["Rigel"].constellation = "Orion";
</script>
</head>
<body id = "mainbody">
for (starName in star) {
var para = document.createElement('p');
para.id = starName;
para.appendChild(document.createTextNode(starName +
": " + star[starName].constellation));
document.getElementsByTagName("body")[0].appendChild(para);
}
</script>
</body>
</html>
3. Nella porzione <head> del codice avete creato un oggetto star vuoto e molti oggetti star
aggiuntivi, ciascuno denominato star[“starname”]. Quindi avete assegnato agli oggetti una
proprietà constellation con il valore della costellazione in cui ciascuna stella si trova. Nella
porzione <body> del codice viene eseguito un loop for per effettuare un’iterazione su ciascuno degli oggetti star. Questo codice utilizza il DOM (Document Object Model), trattato nel
Capitolo 10, “Il Document Object Model (DOM)”. Per ora non preoccupatevi troppo di cosa
90
fa il codice all’interno del loop for. Salvate il file e visualizzatelo nel browser Web. L’output è
mostrato di seguito:
4. Aggiungete ora l’operatore delete sopra il loop for nel codice per rimuovere la costellazione
da Polaris. Il codice si presenta come segue:
<html>
<head>
<title>The Delete Operator</title>
var star = {};
star["Mizar"] = new Object;
star["Aldebaran"] = new Object;
star["Rigel"] = new Object;
star["Mizar"].constellation = "Ursa Major";
star["Aldebaran"].constellation = "Taurus";
star["Rigel"].constellation = "Orion";
</script>
</head>
<body id = "mainbody">
delete(star["Polaris"].constellation);
for (starName in star) {
var para = document.createElement('p');
91
para.id = starName;
para.appendChild(document.createTextNode(starName +
": " + star[starName].constellation));
document.getElementsByTagName("body")[0].appendChild(para);
}
</script>
</body>
</html>
Notate l’aggiunta dell’operatore delete nel tag <script> della porzione <body> del documento
(mostrato in grassetto).
5. Salvate il file e visualizzatelo in un browser Web. L’output si presenta come il seguente:
6. L’utilizzo dell’operatore delete ha reso la costellazione per Polaris indefinita. Potreste anche
eliminare l’intero oggetto Polaris come segue:
delete(star["Polaris"]);
L’operatore typeof
L’operatore typeof restituisce com’è ovvio il tipo di variabile dell’operando dato. Utilizzando questo
operatore, potete determinare se una data variabile è stata creata e viene utilizzata come stringa,
numero o boolean; se quella variabile è un certo tipo di oggetto o funzione ed eseguire altre operazioni correlate. Considerate per esempio questo codice:
var star= {};
if (typeof(star) == "object") {
alert("star is an object");
}
92
L’operatore typeof restituisce “number” se si valuta un numero, “string” se si valuta un tipo stringa
e (come vedete nell’esempio) “object” se si valuta un oggetto. Quando è utilizzato con le proprietà,
JavaScript è abbastanza intelligente da sapere che volete conoscere il tipo di variabile della proprietà e non dell’oggetto. Di conseguenza viene restituito il tipo di valore. Ecco un esempio che
prende un po’ di codice da parti precedenti del capitolo:
Utilizzare l’operatore typeof
1.Con Visual Studio, Eclipse o un altro editor modificate il file typeof.htm nella cartella dei file
di esempio Chapter05.
2.Nella pagina Web aggiungete il codice seguente mostrato in grassetto:
<html>
<head>
<title>The Typeof Example</title>
var star = {};
alert(typeof star["Polaris"].constellation);
</script>
</head>
<body>
</body>
</html>
3. Il codice nei tag <script> crea un nuovo oggetto per la stella Polaris e imposta la sua proprietà
constellation alla stringa “Ursa Minor”. Una finestra di dialogo di avviso è quindi chiamata con
l’operatore typeof per mostrare che il tipo della proprietà star[“Polaris”].constellation è stringa.
Salvate il file e visualizzatelo in un browser Web. Otterrete un avviso come il seguente:
Utilizzando l’operatore typeof potete vedere la differenza fra null e indefinito.
93
L’operatore void
Se avete effettuato qualsiasi esame dietro le quinte del codice sorgente JavaScript, avete probabilmente visto l’operatore void. L’operatore void restituisce undefined dopo la valutazione del suo
argomento. Questo significa che l’operatore void permette allo sviluppatore Web di chiamare una
funzione senza che i risultati siano visualizzati nel browser.
Un utilizzo comune dell’operatore void è inviare un form o aprire una nuova finestra. L’esempio
che segue mostra l’operatore void in uso:
void(window.open());
Più comunemente il codice javascript:void sarà inserito in un link su una pagina Web per aprire
una nuova finestra, come segue:
<a href="javascript:void(window.open())">Open a new window by clicking here.</a>
Incorporiamolo ora in una pagina Web.
Utilizzare l’operatore void
1. Con Visual Studio, Eclipse o un altro editor modificate il file void.htm nella cartella dei file
di esempio Chapter05.
2. Nella pagina Web aggiungete il codice seguente mostrato in grassetto:
<html>
<head>
<title>Void</title>
</head>
<body>
<p><a href="javascript:void(window.open('http://www.braingia.org/books/
javascriptsbs/'))">
Click here to open a new window.</a></p>
</body>
</html>
94
3. Salvate questo codice e visualizzatelo nel browser Web. La pagina dovrebbe apparire come
la seguente:
4. Il codice opera nei tag <body> e crea un link Web standard, questa volta chiamando il metodo
window.open() per aprire una nuova finestra che punta al mio sito Web JavaScript Step By Step,
come segue:
Nota L’operatore void, o più precisamente l’utilizzo dello pseudoprotocollo javascript: in un
href, ha acquisito una cattiva fama in alcune comunità di Web design.
95
Operatori di assegnazione
Abbiamo già esaminato le assegnazioni in questo capitolo e ne avete viste in tutto il libro. L’operatore di assegnazione principale (o utilizzato più di frequente) è il segno uguale (=), conosciuto
anche come operatori di assegnazione singola. JavaScript possiede molti altri operatori di assegnazione, fra cui i seguenti:
*=
/=
%=
+=
-=
<<=
>>=
>>>=
&=
^=
|=
Questi altri operatori sono chiamati operatori di assegnazione composti. Gli operatori di assegnazione composti forniscono scorciatoie che permettono di risparmiare alcune digitazioni e byte, ma
non scenderò nei dettagli in quanto molti sono piuttosto specializzati e raramente utilizzati.
L’importanza di risparmiare byte
Risparmiare byte è un argomento importante per ogni programmatore JavaScript. Risparmiare byte significa programmare con scorciatoie in modo che il programma risultante in JavaScript (o qualsiasi altro linguaggio) occupi meno memoria e ampiezza di banda. Ogni volta
che il programmatore può avvantaggiarsi di funzionalità come le istruzioni di assegnazione
composta per risparmiare byte, il programma ne risulterà migliore.
Risparmiare byte quando possibile significa che l’utente avrà uno script più piccolo da scaricare. È difficile quantificare il numero di byte che potete risparmiare o quanto il risparmio
di byte vi sarà d’aiuto. Alcuni potrebbero obiettare che l’effetto è trascurabile e per gli script
più piccoli probabilmente è vero, specialmente considerando che sempre più utenti adottano la banda larga o connessioni veloci. Tuttavia l’effetto di intelligenti scorciatoie è molto
reale per gli script più grandi, specialmente quando devono essere scaricati utilizzando una
connessione lenta.
Fate però attenzione a non risparmiare troppo nei byte. Ho visto script in cui tutti i ritorni a capo e quasi tutti gli spazi sono stati rimossi. Ne risulta uno script che utilizza meno
byte ma diventa impossibile da leggere o da sottoporre a debug. I fautori del risparmio di
byte argomentano che questa è la conclusione logica dell’eseguire un programma JavaScript
ottimizzato. Io invece non condivido questa interpretazione e consiglio di non sacrificare la
leggibilità (e facilità di manutenzione) in nome di un eccessivo risparmio. Come ho affermato nel Capitolo 1, “JavaScript è più di quanto potreste pensare”, dedicherete minuti, ore
o anche giorni a scrivere il codice, comunque un tempo relativamente breve, e poi anni a
mantenerlo.
96
Esercizi
1. Utilizzate l’operatore di addizione (+) per inviare tre finestre di dialogo alert() allo schermo
(potete utilizzare tre programmi diversi). Il primo avviso dovrebbe sommare due numeri, il
secondo aggiungere un numero e una stringa e il terzo unire due stringhe. Tutto dovrebbe
essere rappresentato da variabili.
2. Utilizzate l’operatore di incremento postfisso (++) per incrementare un numero memorizzato
in una variabile. Visualizzate il valore della variabile prima, durante e dopo l’incremento.
Utilizzate l’operatore di incremento prefisso per incrementare il numero e visualizzare il suo
risultato prima, durante e dopo l’incremento utilizzando un avviso.
3. Utilizzate l’operatore typeof per controllare il tipo di variabili che avete creato nell’Esercizio 1.
4. Vero o falso: Gli operatori unari non appaiono molto spesso in JavaScript.
5. Vero o falso: È sempre meglio risparmiare byte (utilizzando scorciatoie di JavaScript quando
possibile) anziché utilizzare ritorni a capo e rientri che possono rallentare il caricamento
della pagina.

Capitoli di esempio - Mondadori Informatica

Transcript

Documenti analoghi

Adriano De Pasquale Actor

DASH KAPPEI – Gigi la trottola di Noboru Rokuda serie completa 25

TSUBASA RESERVOIR CHRONICLE di Clamp serie completa 28

Google Maps API

Lavatrice IWC 5105 B (IT)

Doc 15-05-14 VB LICEO PROGRAMMI

Testo

I lavoratori della STAR non sono un costo ma una risorsa

Star Wars Battlefront - Multiplayer Edizioni

Tecnologie Web T JavaScript Che cos`è JavaScript JavaScript è un