JavaScript è uno dei tre pilastri fondamentali del web assieme ad HTML e CSS, a cui quasi una decina di anni fa si è aggiunto un quarto incomodo che è il linguaggio XML. Quest’ultimo assieme a JavaScript ha dato vita al cosidetto Web 2.0, ovvero l’implementazione di quello che è chiamato in modo decisamente ampio “AJAX” le cui lettere significano Asynchronous JavaScript and XML.
Pertanto Javascript è una parte fondante di praticamente quasi tutte le pagine web e nei tre pilastri si può descriverlo come il braccio, poiché i CSS sono il vestito e HTML il corpo. Infatti il campo d’azione più utilizzato è l’iterazione con chi guarda la pagina e a volte aiutare i CSS ad essere più interessanti.
Questa Guida parte quasi da zero, infatti si presuppone che un sottostrato di conoscenza di una pagina web ce l’abbiate già. Infatti il codice Javascript vero e proprio si inserisce tra i tag HTML <head> e </head> , in genere vicino al tag di chiusura. Altre parti poi possono essere integrate nel codice HTML o PHP. Negli esempi di seguito si farà riferimento esclusivamente al primo caso.
Vediamo un primo esempio.
<script type="text/javascript">
window.alert ("Ciao Belli!");
</script>L’esempio qui sopra genera una popup all’apertura della pagina con la scritta “Ciao Belli!”. Il codice va sempre inquadrato dai tag <script> </script> e nel caso precedente essendo una sola istruzione è stato scritto direttamente dentro il file HTML. In genere però le istruzioni sono molteplici e più di una, spesso si appoggiano a delle librerie esistenti. In questo caso il codice non è conveniente scriverlo nella pagina ma creare un link ad un file nel proprio server o addirittura in uno remoto.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>In questo caso abbiamo caricato una libreria relativa a Jquery ospitata nei server di Google. I file Javascript hanno come estensione appunto .js e nel caso precedente quel file poteva benissimo essere ospitato nel medesimo server dove risiede la pagina. Infatti la parte interpretativa, come per HTML e CSS avviene nel Browser dell’utente che visita la pagina.
I file js caricati possono essere molteplici:
<script type="text/javascript" src="/js/libreria.js"></script>
<script type="text/javascript" src="/js/personlizzato.js"></script>
<script type="text/javascript" src="/js/makeup.js"></script>Va da se che più Javascript e Librerie caricate, più la pagina andrà ad appesantirsi in termini di prestazione. Una perché deve scaricare il file js, due perché poi il javascript dovrà essere interpretato ed eseguito.
I commenti sono importanti.
Come per PHP o HTML e CSS, i commenti sono importanti. Nel caso di Javascript solitamente un po’ meno poiché si cercherà di curare al massimo la pulizia del codice per una maggiore snellezza anche solo dovuta al fatto di caricare il file. Tuttavia il sistema di commento è importante per se stessi e per gli altri. Il sistema è uguale a quello utilizzato da PHP. Ovvero la doppia slash per la linea singola, oppure la classica slash asterisco aperta/chiusa per intere sezioni
// sono un commento in linea singola
/* sono un
commento con più
righe */Le Variabili, come si utilizzano.
Le variabili possono immagazzinare dei valori alfanumerici o frammenti di dati che si possono poi riutilizzare e/o sovrascrivere. Javascript dichiara la variabile con la parola riservata var seguita dal nome della stessa e chiusa con ;
var colore;
colore = "blu";Nel caso precedente abbiamo creato una variabile chiamata colore a cui nella riga due viene assegnato il valore “blu”. Come abbiamo già accennato in Javascript la pulizia e l’abbreviazione è la regola, per cui l’esempio precedente è riassumibile in:
var colore = "blu";il risultato sarà il medesimo del primo caso, ma abbiamo risparmiato una linea di codice! Ma Javascript fa ancora di più, ovvero per una determinata parola se non è già stata dichiarata e si tenta di assegnarla ad un valore, questa verrà dichiarata variabile in automatico.
colore = "blu";Il mio consiglio è comunque quello di utilizzare il secondo esempio, specie per chi viene come me da PHP, potrebbe trovarsi spiazzato nel leggere il codice, almeno finché non ha preso confidenza.
Ora vediamo come attuare questa variabile. Il primo esempio che abbiamo visto era un alert box, in questo caso la riutilizziamo in un file javascript con l’ausilio della variabile.
var colore ="blu";
window.alert(colore);Convenzioni
Infine per chiudere l’esposizione, avrete notato che ogni riga si chiude con un ; ma questa è una convenzione. A differenza di PHP che il tag di chiusura è obbligatorio, qui il punto e virgola è una convenzione non scritta. In genere si cerca di utilizzarlo sempre, se si è partiti a scriverlo, o a non utilizzarlo proprio. Dipende un po’ dai gusti. Diciamo che inizialmente viene bene scriverlo poiché si riesce a dare una sorta di chiusura visiva e mentale a ciò che scriviamo.
Una seconda convenzione non scritta è la notazione camel case, cioè a gobba di cammello. Quando dichiariamo variabili o anche funzioni, le scriveremo cercando di essere parlanti e descrittive, ad esempio “cambio-colore-colonna”. Tuttavia non si tende ad usare – o peggio underscore _ ma si scrive la variabile o funzione utilizzando la prima parola in minuscolo e quelle a seguire con la prima lettera maiuscola. Ovvero avremo “cambioColoreColonna”. Come vedete è molto più leggibile. Questo sistema è una convenzione non scritta, o meglio potreste anche non utilizzarla, ma è fortemente consigliato farlo visto e considerato che anche alcuni metodi di Javascript ne fanno uso.
Conclusioni
Abbiamo preso il primo contatto con Javascript, ovvero come inserire un file js all’interno di una pagina web e preso visione di come si dichiara una variabile. Nel prossimo capitolo vedremo i tipi di variabili e la gestione dei dati.
