Archivi tag: codice

JavaScript Base – 3.4 – Concatenare testo e variabili

In questa lezione vi spiego come concatenare il testo con le variabili.

Output

Abbiamo già detto nelle lezioni precedenti che per visualizzare del testo sulla pagina possiamo usare il metodo document.write():

document.write();

Tra le parentesi tonde andiamo ad inserire il valore da visualizzare:

document.write("Buongiorno");

Siccome è un testo, il valore è stato racchiuso tra doppi apici.

Quando invece andiamo a visualizzare un valore contenuto in una variabile, basta scrivere il nome della variabile senza doppi apici:

var nome = "Andrea";
document.write(nome);

Concatenazione

Ma che succede se volessimo stampare sia uno che l’altro?

Dobbiamo concatenare la variabile con la stringa, o viceversa, unendo i due elementi con l’operatore +:

var nome = "Andrea";
document.write("Buongiorno "+nome);

Video

JavaScript Base – 3.3 – Approfondimenti sulla dichiarazione di variabili

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";

Video

JavaScript Base – 3.2 – Dichiarazione, assegnazione e lettura di variabili

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.

Video

JavaScript Base – 3.1 – Introduzione alle variabili

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.

Video

JavaScript Base – 2.6 – JavaScript e HTML

In questa lezione vi parlo del nesso che c’è tra l’output generato da JS e il codice HTML.

Output JS

Generare un output in JS, ad esempio stampare a video un semplice testo, significa inserire del testo all’interno del codice della pagina web.

 

Come vi avevo anticipato, c’è una certa differenza tra quello che è il codice HTML e ciò che invece inserite all’interno del tag <script>.

Grazie a metodi come document.write(), possiamo creare del contenuto HTML interno alla pagina, nel punto in cui viene inserito il codice JavaScript.

Ad esempio, il seguente codice:

<body>
  <p>Paragrafo 1</p>
  <script>
    document.write("<p>Paragrafo 2</p>");
  </script>
</body>

darà lo stesso risultato a video di questo:

<body>
  <p>Paragrafo 1</p>
  <p>Paragrafo 2</p>
</body>

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:

<body>
  <p>Paragrafo 1</p>
  <p>
  <script>
    document.write("Paragrafo 2");
  </script>
  </p>
</body>

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.

Video

JavaScript Base – 2.5 – Commenti in JavaScript

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>

Video

JavaScript Base – 2.3 – Collocazione del codice

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).

<html>
 <head>
   <title>Collocazione</title>
   <script>
     document.write("bla bla bla");
   </script>
 </head>
 <body>
   <h1>Intestazione</h1>
   <p>Paragrafo 1</p>
   <p>Paragrafo 2</p>
 </body>
</html>

In questo caso la scritta “Bla bla bla” verrà visualizzata prima dei due paragrafi Pippo e Pluto.

Codice nel body

Collocandolo nel body, invece, il codice sarà letto assieme agli elementi della pagina ed eseguito mentre il browser li visualizza.

<html>
 <head>
   <title>Collocazione</title>
 </head>
 <body>
   <h1>Intestazione</h1>
   <p>Paragrafo 1</p>
   <script>
     document.write("bla bla bla");
   </script>
   <p>Paragrafo 2</p>
 </body>
</html>

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:

<html>
 <head>
   <title>Collocazione</title>
 </head>
 <body>
   <h1>Intestazione</h1>
   <p>Paragrafo 1</p>
   <p>Paragrafo 2</p>
   <script src="codice.js">
   </script>
 </body>
</html>

Nel file esterno il codice va inserito direttamente, senza quindi usare il tag script.

Video