Quello che rende le variabili interessanti è ovviamente la possibilià di operare con esse. Non solo i tipi numerici possono essere addizionati, sottratti, moltiplicati e divisi; ma anche le stringhe possono essere manipolate in vario modo. L'operazione di somma (cioè di concatenamento) di stringhe è, ad esempio, di estrema semplicità.
Nell'esempio della lezione precedente al posto di:
document.write("Benvenuto ");
document.write(nomeUtente);
avremmo potuto scrivere:
document.write("Benvenuto "+nomeUtente+"!");
In cui si vede chiaramente che stiamo facendo un'operazione di concatenamento di questo tipo:
Stringa + variabile di tipo stringa + Stringa
Inoltre la capacità di JavaScript di convertire in automatico i tipi di dati ci aiuta enormemente nelle operazioni tra variabili. Vediamo questo esempio:
anno=2002;
scritta="Siamo nel ";
scrittaTotale= scritta+anno;
document.write(scrittaTotale);
Come si vede un tipo numerico (anno) viene convertito senza troppi problemi in una stringa e sommato a un'altra stringa.
Esaminiamo ora un esempio concreto in cui utilizziamo le operazioni tra variabili per posizionare le finestre.
Come abbiamo visto nelle lezioni precedenti, il metodo window.open() ci permette di posizionare le finestre dove vogliamo. Purtroppo basta che l'utente cambi risoluzione per avere un diverso posizionamento della finestra.
Ad esempio:
window.open("sponsor.htm","", "left=500,top=150,width=300,height=300,menubar,toolbar");
dà un diverso risultato se la risoluzione è di 800x600, o se la risoluzione è di 1024x768 (per cambiare risoluzione, utilizzare il tasto destro sul desktop e poi proprietà>schermo>impostazioni). Il problema è comunque analizzato accuratamente in un nostro articolo dedicato a come costruire un sito per diverse risoluzioni.
Noi vogliamo invece posizionare una finestra a destra del monitor e a metà dello schermo indipendentemente dalla risoluzione.
Ci viene subito in mente che per posizionare la finestra in questo modo possiamo utilizzare un po' di formule:
posizione_da_sinistra = larghezza_dello_schermo - larghezza_della_finestra
posizione_dall_alto= (altezza_dello_schermo - altezza_finestra)/2
Traduciamo queste formule in codice JavaScript. La proprietà che indica la larghezza dello schermo è screen.width, per l'altezza useremo invece screen.height.
Quindi:
/* creo una variabile contenente la larghezza della finestra */
larghFinestra=300;
/* creo una variabile contenente l'altezza della finestra */
altezFinestra=300;
/* creo una variabile e mi ricavo il valore della
posizione della finestra a sinistra dello schermo */
sinistra = screen.width-larghFinestra;
/* creo una variabile e mi ricavo il valore della
posizione della finestra dall'alto dello schermo */
alto=(screen.height-larghFinestra)/2;
Da notare le parentesi nell'ultima formula, che indicano la precedenza degli operatori: come abbiamo imparato dalle Scuole Medie in poi, se non avessi messo la parentesi la divisione sarebbe stata eseguita prima della sottrazione, dando luogo a un risultato errato.
A questo punto non ci resta che inserire le variabili che abbiamo calcolato all'interno della sintassi del window.open(). Così:
window.open("sponsor.htm","", "left="+sinistra+",top="+alto+",width="+larghFinestra+", height="+altezFinestra+",menubar,toolbar");
Se vogliamo "scostare" la finestra dal bordo destro dello schermo non abbiamo che da portare la finestra più in qua (il "left" della finestra inizierà quindi un po' prima) , così:
sinistra=screen.width-larghFinestra-20;
Vediamo l'esempio completo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Esempio</title>
</head>
<body>
<script type="text/javascript">
/* creo una variabile contenente la
larghezza della finestra*/
larghFinestra=300;
/* creo una variabile contenente
l'altezza della finestra*/
altezFinestra=300;
/*creo una variabile e mi ricavo il
valore della posizione della finestra
a sinistra dello schermo*/
sinistra=screen.width-larghFinestra+20;
/*creo una variabile e mi ricavo il
valore della posizione della finestra
dall'alto dello schermo */
alto=(screen.height-larghFinestra)/2;
window.open("sponsor.htm","", "left="+sinistra+",top="+alto+",width="+larghFinestra+", height="+altezFinestra+",menubar,toolbar");
</script>
</body>
</html>
Come si può notare nell'esempio il "+" viene usato con due valori diversi:
- quando ci troviamo ad operare con i numeri dà luogo a una somma
- quando ci troviamo ad operare con le stringhe dà luogo a un concatenamento di variabili
Per chi volesse approfondire l'argomento, nel corso di javaScript è presente una lista degli operatori Javascript che possiamo utilizzare quando manipoliamo le variabili.
Ultimi articoli JavaScript
PhantomJS, headless browser per test con JavascriptIl tool ideale per realizzare, da terminale, operazioni in remoto su... |
Creare e leggere QR Code in JavaScriptApplicazioni 'QR Code enabled' per il Web e per il mobile,... |
Jquery UI Map: web-mapping con Google Maps e jQueryUn plugin di jQuery UI per intefacciare applicaizoni Web/mobile con... |
Scrollorama e Scrolldeck, slideshow d'effetto con jQueryPlugin jQuery per ottenere Slideshow con diversi effetti di scrolling |
jCanvas, un primo semplice graficoAlla scoperta della libreria jCanvas, per semplificare il disegno e... |
Guide JavaScript
Guida Node.jsIl framework che permette di per usare V8, l'interprete JavaScript... |
Canvas, guida ai frameworkCanvas, tra gli elementi di HTML5 è forse quello di maggior impatto.... |
Guida Javascript: tecniche avanzateUna guida dal taglio pratico per approfondire la programmazione a... |
Newsletter @JavaScript
Ogni martedì, direttamente nella tua e-mail: guide, articoli, script, novità e approfondimenti tecnici su JavaScript.
Iscriviti alla newsletter
Corsi in aula
|
|
Corso Webmaster base18 Giugno 2012 a Milano |
|
|
Corso Google AdWords Base25 Giugno 2012 a Milano |
|
|
Corso JQuery e Ajax per Webmaster03 Luglio 2012 a Milano |
|
|
Corso Google AdWords Base05 Giugno 2012 a Roma |
|
|
Corso Webmaster base11 Giugno 2012 a Roma |