In questa lezione vi parlo di come JavaScript può memorizzare valori numerici all’interno delle variabili, considerando la presenza di cifre dopo la virgola.
Numeri interi e numeri decimali
Quando creiamo una variabile contenente un numero, es:
var n = 10;
JavaScript memorizza tale valore come numero a 64bit in floating point, quindi si riserva comunque dello spazio per conservare eventuali cifre decimali.
Se però stampo un numero senza cifre decimali, come nel caso precedente, oppure con cifre decimali nulle, come nell’esempio di seguito:
var n = 10.0;
JavaScript mostrerà in fase di output soltanto la parte intera.
Ovviamente, la presenza di decimali o no riguarda anche il risultato di eventuali operazioni.
Se una variabile viene usata per memorizzare il risultato di una operazione aritmetica tra variabili che non hanno decimali, tale risultato potrebbe averle: pertanto queste saranno visibili nella stampa:
var a = 1;
var risultato = a / 2;
La variabile risultato conterrà quindi il valore 0.5
In questa lezione vi darò qualche informazione aggiuntiva sulla dichiarazione di variabili.
Nome della variabile
Assegnate alle variabili il nome che volete, purché non cominci con un numero, non sia una parola riservata dal linguaggio JavaScript o non contenga spazi.
Ovviamente il mio consiglio è quello di creare variabili con dei nomi sensati.
Ad esempio, se dovete monitorare delle temperature, potete scegliere 2 variabili con questo nome:
var t1;
var t2;
ma capirete anche voi che il nome è piuttosto confusionario, perché non trasmette affatto il tipo di valore che andrà a contenere.
E’ preferibile usare dei nomi che diano una indicazione sul campo di applicazione della variabile, ad esempio:
var temperaturaMassima;
var temperaturaMinima;
queste sono delle variabili senz’altro molto più esplicative rispetto a t1 e t2, tuttavia hanno un nome piuttosto lungo, che le rende poi scomode da usare.
A livelo di comodità, sarebbe preferibile a questo punto una soluzione del genere:
var tempMax;
var tempMin;
Notare che nelle parole composte è buona prassi usare la notazione “camel-case” (a cammello), ovvero con le iniziali maiuscole, per rendere più leggibile il nome.
La prima lettera della variabile, tuttavia, rimane sempre minuscola.
Case sensitive
Occhio che il linguaggio JavaScript è case-sensitive, cioè fa differenza tra maiuscole e minuscole!
Questo codice:
var numeromax;
è diverso da:
var numeroMax;
Dichiarazione multipla
Potete dichiarare diverse variabili usando una sola volta la parola chiave var, separando le variabili con una virgola.
Ad esempio questo codice:
var codice;
var nome = "Mario";
var cognome = "Rossi";
var anni = "30";
si può anche scrivere così:
var codice, nome = "Mario", cognome = "Rossi", anni = "30";
In questa lezione vediamo come si usano le variabili in JavaScript, in particolare:
dichiarazione
assegnazione
lettura
Dichiarazione
Per poter usare una variabile, dobbiamo prima di tutto crearla: questa fase si chiama dichiarazione.
La dichiarazione avviene con la parola chiave “var” seguita dal nome della variabile:
var numero;
Per mezzo di questa procedura, alla variabile viene assegnato un nome, che rimarrà tale per tutto il programma.
Il punto e virgola alla fine indica il termine dell’istruzione.
Mentre in altri linguaggi di programmazione è necessario specificare anche il tipo di dati che dovranno immagazzinare le variabili, in JavaScript è sufficiente inserire solo il nome.
Assegnazione
Ora che la variabile esiste, possiamo riempirla con qualcosa: le informazioni da memorizzare.
Per assegnare un valore ad una variabile, usiamo il simbolo “=”, chiamato appunto “operatore di assegnazione”:
numero = 10;
In questo caso, abbiamo assegnato il valore numerico 10 alla variabile di nome “numero”.
Notare che non è più necessario usare la parola “var”, in quanto ormai la variabile numero esiste già:
var numero;
numero = 10;
Il codice che vi ho scritto qui sopra può essere abbreviato in:
var numero = 10;
In quest’ultimo caso ho assegnato il valore 10 alla variabile già in fase di dichiarazione: potete usare entrambe le procedure.
Una volta che avete inserito un valore nella variabile, potete poi modificarlo nel tempo ripetendo il processo di assegnazione:
var numero;
numero = 10;
numero = -34;
Nonostante il valore iniziale della variabile sia 10, il valore viene successivamente modificato con “-34”: questo numero rappresenta il suo valore finale.
Lettura
A cosa serve un valore memorizzato se poi non andiamo a leggerlo?
Ogni variabile può essere letta in un determinato modo, basta semplicemente scrivere il nome della variabile e JavaScript al suo posto intenderà il valore che essa contiene.
Per esempio, se per stampare un testo a video abbiamo visto che si usa:
document.write("messaggio da visualizzare");
Ora possiamo usare:
document.write( nomevariabile );
e JS visualizzerà non il nome della variabile ma il suo contenuto.
In questa lezione vi parlo delle variabili, spiegandovi cosa sono e perché si usano in JavaScript.
In tutti i linguaggi di programmazione, le variabili sono indispensabili per conservare le informazioni nel tempo.
Per noi umani è facile memorizzare un paio di indirizzi o numeri di telefono, ma non 100 o 1000 di questi: ecco perché ci vengono in aiuto i computer.
Spesso nel web è utile memorizzare temporaneamente delle informazioni (numeri, date, parole, punteggi, ecc): tali dati vengono memorizzati usando degli speciali contenitori detti variabili.
Ciascun contenitore (variabile) ha un nome, in modo da poterlo individuare tra altri, e permette di memorizzare un valore che può variare nel tempo (ecco perché si chiama “variabile”).
JavaScript memorizza i dati in modo temporaneo: di norma questi dati rimangono nella memoria del computer fin quando rimanete su una determinata pagina web, in modo da poterli usare durante la vostra permanenza nella pagina.
La variabile viene creata con un procedimento chiamato dichiarazione, a cui seguirà una fase detta di assegnazione, dove la variabile verrà riempita con un suo valore iniziale.
Da qui in poi, il valore contenuto nella variabile può essere letto o modificato a seconda del programma.
Nelle prossime lezioni vi spiegherò come creare, modificare e leggere le variabili usando il codice JavaScript.
L’unica differenza è che nel primo caso il secondo paragrafo è stato “inserito” nella pagina usando JavaScript, mentre nel secondo è stato creato usando soltanto codice HTML.
Il metodo document.write() crea quindi un contenuto che farà parte del codice finale della pagina, contenuto che può anche prevedere tag HTML: nel caso precedente conteneva i tag per aprire e chiudere un paragrafo, creandolo proprio nella pagina.
Un risultato analogo può essere ottenuto con questo codice:
In questo caso, document.write() viene usato solo per inserire il testo del paragrafo, mentre i tag di apertura e chiusura sono già stati creati da HTML.
In questa lezione vi parlo di come possiamo inserire i commenti nel codice JS.
Commenti
Come forse saprete, un commento è un testo che fa parte del codice della pagina, un testo che è invisibile all’utente finale che visualizza tale pagina sul browser.
I commenti vengono largamente usati per inserire un promemoria all’interno del codice della pagina, in maniera da facilitarne la comprensione da parte chi ci lavora o ci lavorerà su.
Per inserire un commento in JS, dovete essere all’interno di un tag <script> oppure all’interno di un file JS esterno.
Commento a riga singola
Se il vostro commento deve occupare un’unica riga, potete farlo cominciare con //, come nell’esempio seguente:
<script>
// il codice seguente stampa a video qualcosa
document.write("Operazione uno");
</script>
Commento multi linea
Se avete bisogno di un commento più lungo, che occupa cioè più di una riga, dovrete usare /* per aprire il commento e la sequenza contraria */ per chiuderlo:
<script>
/*
Andrea Rizzieri
Marzo 2015
Programma per l'e-commerce
*/
</script>
Vediamo come generare un output sulla pagina, usando il codice JS.
Output
Un’azione di output prevede di far comparire qualcosa (ad esempio un messaggio o un oggetto) all’interno della pagina web.
JavaScript è in grado di produrre un output in vari modi, oggi vediamo:
la generazione di elementi HTML sulla pagina;
la generazione di un messaggio in una finestra di dialogo;
la modifica di un elemento (a livello di nodo) della pagina web;
l’invio di un messaggio alla console di debug del browser.
document.write()
Il primo output che vediamo consiste nell’invocare il metodo write() sull’oggetto document.
Quando una pagina web (un file HTML) viene caricata in un browser, viene generato un oggetto document.
L’oggetto document ha diverse proprietà e metodi (comportamenti) a sua disposizione.
Tra i suoi metodi troviamo write() che permette di “riempire” il documento con un contenuto di tipo HTML, passato come argomento (all’interno delle parentesi).
Tale codice, all’interno di una pagina web, inserisce un contenuto HTML nel punto in cui viene collocato lo script.
Cosa si intende per “contenuto HTML”?
Esattamente quello che voi potete scrivere nel Body di una pagina web:
testo;
paragrafi;
immagini;
tabelle;
ecc.
Per esempio, se voi scrivete nel body:
<body>
Rosso di sera, bel tempo si spera.
</body>
avete inserito un contenuto HTML all’interno della pagina.
In questo esempio, il contenuto è dato da un testo semplicissimo, senza cioè tag per la formattazione o la definizione di oggetti specifici.
Quello che avete scritto si può realizzare in JS usando la seguente sintassi:
<body>
<script>
document.write("Rosso di sera, bel tempo si spera.");
</script>
</body>
Notate che il testo è stato inserito tra doppi apici in quanto si tratta di una stringa, ovvero una sequenza di caratteri alfanumerici.
Se invece del testo semplice volevate inserire un paragrafo, sostituite il contenuto tra le parentesi con un nuovo contenuto che comprenda i tag del paragrafo:
<body>
<script>
document.write("<p>Rosso di sera, bel tempo si spera.</p>");
</script>
</body>
Anche in questo caso è stato inserito tutto il contenuto tra doppi apici, compresi i tag dell’HTML, in quanto anche loro comprendono caratteri alfanumerici.
Quando lo script JS con document.write() viene inserito assieme all’HTML, ovvero viene eseguito mentre il browser carica gli elementi della pagina, l’output generato dal JS si mischia con quello in HTML della pagina web.
Se invece il metodo write() viene invocato quando gli elementi della pagina web sono ormai stati caricati (magari richiamandolo con un pulsante) la pagina verrà sovrascritta da ciò che passerete al metodo tra le sue parentesi.
Per questo motivo, il metodo write() viene spesso usato con scopi di testing, in quanto sono disponibili soluzioni più precise e sicure (ad esempio il metodo innerHTML, descritto di seguito) per le modifiche di una pagina che ha già del contenuto.
alert()
Un altro modo per generare un output è quello di sfruttare una finestra di dialogo.
Una finestra di dialogo (ne parleremo verso la fine di questo corso JS livello Base) è una finestrella che appare per avvisare l’utente della pagina o per chiedergli qualcosa.
Un esempio di questa finestra è dato da alert():
<script>
alert("CIAO CIAO");
</script>
Alert genera una finestra molto semplice, costituita da un messaggio e da un pulsante che permette di chiuderla.
Il messaggio corrisponde a ciò che voi indicherete nelle parentesi tonde, sempre tra doppi apici.
Esempio di risultato finale:
Ci sono vari tipi di finestre di dialogo, ne parlerò nelle ultime lezioni al termine di questo corso.
innerHTML
Un modo “intelligente” per inserire un contenuto HTML in un punto preciso della pagina è dato da innerHTML.
Essendo questo uno dei primi capitoli di un corso base, non voglio ancora trattare concetti complicati ma vi farò una piccola introduzione ad un argomento interessante.
Secondo il DOM (Document Object Model), la pagina web viene vista come una struttura ad albero, caratterizzata da elementi genitori e sotto-elementi figli.
Ciascuno di questi elementi è detto nodo e rappresenta un oggetto della pagina web.
L’oggetto di livello superiore, quello in cima alla gerarchia è document: tutti gli altri nodi sono suoi figli.
Con JS è possibile manipolare i singoli nodi figli del document ma, per farlo, è necessario prima selezionarli.
Per selezionare i nodi possiamo usare diversi metodi ma oggi vediamo (occhio alle maiuscole!):
document.getElementById()
Tale metodo è in grado di selezionare un determinato nodo in base al valore del suo attributo Id.
In questa lezione vi spiego dove posizionare il codice JavaScript nella pagina (o fuori da essa).
Come per i fogli di stile CSS, il codice JavaScript può essere inserito all’interno della pagina oppure può essere collocato in un file esterno, opportunamente collegato.
Se il codice JS è interno alla pagina, dovrà essere posizionato nell’head o nel body, purché racchiuso nel tag <script>.
Codice nell’head
Posizionando il codice nell’head, questo verrà letto al caricamento della pagina, prima del caricamento degli oggetti che poi compongono la pagina da visualizzare (quelli interni al body).
In questo caso la scritta “Bla bla bla” verrà visualizzata tra il paragrafo 1 ed il paragrafo 2, in quanto lo script viene eseguito in mezzo ai tag dei due paragrafi.
A cosa serve questa distinzione? Perché scegliere di inserire un codice prima, in mezzo o addirittura dopo il codice HTML degli elementi della pagina?
Se inserite un codice nell’head, potete scegliere di farlo eseguire subito (prima di caricare il resto della pagina) oppure di renderlo “innocuo” fino a quando non decidete voi di eseguirlo: in questo caso si parla di funzioni, ovvero blocchi di codice che si possono richiamare al momento del bisogno.
Il codice può anche essere inserito al fondo della pagina, di solito prima della chiusura del body, perché in questo modo il browser ha già letto tutto il contenuto della pagina e sarà in grado di trovare nello script i riferimenti agli oggetti in essa contenuti.
In questo corso di base sul linguaggio JavaScript, viene trattato principalmente il codice eseguito tra gli elementi HTML, ma nei corsi successivi vedrete come si usano gli script caricati prima o dopo la pagina, e imparerete ad utilizzare le funzioni.
Codice esterno
Un codice JS esterno, viene inserito in un file di testo semplice, di solito contrassegnato con un nome ed una estensione .JS:
nomefile.js
Il file esterno viene poi collegato alle pagine con il tag <script> e l’attributo src, che indica il percorso del file JS:
In questa lezione vediamo la sintassi del linguaggio JavaScript, ovvero come scrivere correttamente il codice.
Programmi e istruzioni
Un programma è una sequenza di comandi o istruzioni che, se eseguiti nel giusto ordine, portano a risolvere un compito specifico.
Ad esempio, se dovete far bollire dell’acqua in una pentola, dovrete eseguire i seguenti passaggi:
prendere una pentola;
riempirla d’acqua;
mettere la pentola sul fornello;
accendere il fuoco;
attendere finché l’acqua bolle.
Se eseguite tutti questi 5 passaggi nel giusto ordine (così come li ho scritti) in pochi minuti avrete acqua bollente. Se però invertite dei passaggi o ne saltate qualcuno, ad esempio se non riempite d’acqua la pentola, non otterrete nulla se non una pentola bruciata!
Ognuno di questi passaggi rappresenta un’azione che fa parte dell’operazione di far bollire l’acqua.
Nei linguaggi di programmazione i singoli passaggi o compiti vengono detti istruzioni o comandi.
Anche JavaScript è basato su un certo numero di istruzioni che, se posizionate in determinate posizioni nel codice HTML, producono un risultato finale ben specifico.
Come in tutti i linguaggi di programmazione, il JavaScript richiede che le istruzioni (o comandi) che lo compongono siano scritte in maniera corretta.
Sintassi JavaScript
Il codice, salvo alcune eccezioni, viene eseguito nell’ordine in cui questo viene scritto.
Pensiamo a questo esempio:
Istruzione 1;
Istruzione 2;
Istruzione 3;
L’istruzione 2, essendo prima della 3 e dopo la 1, verrà eseguita per seconda.
Il punto e virgola ( ; ) serve per separare una istruzione dall’altra:
Istruzione 1; Istruzione 2; Istruzione 3;
In questo modo, anche se scrivo tutto su un’unica riga, l’esecuzione del codice non cambia.
Il singolo comando, vedrete nelle lezioni successive, andrà scritto nella maniera corretta, senza introdurre spazi aggiuntivi e stando attenti con le lettere maiuscole e minuscole (il JS è case-sensitive).
Alcune istruzioni vengono poi racchiuse in gruppi, in questo caso si racchiudono tra parentesi graffe:
{
istruzione1;
istruzione2;
}
La parentesi viene aperta prima delle istruzioni e chiusa quando queste finiscono: questo garantisce l’esecuzione dell’intero blocco di comandi.
