Guida Javascript
Introduzione a Javascript
Javascript (spesso abbreviato come JS) è il linguaggio di scripting più diffuso sul Web. Chi affronta per la prima volta questo argomento, almeno in questa sede, dovrebbe sapere che a differenza di HTML, che è un linguaggio di markup, Javascript è un vero e proprio linguaggio di programmazione (o di scripting che dir si voglia) orientato agli oggetti (seppur...
Implementare il codice Javascript all’interno di una pagina HTML
Come già detto, il codice Javascript viene implementato direttamente all'interno delle pagine HTML, frequentemente all'interno della sezione <head>, con l'utilizzo dei tag <script> e </script>.
In realtà, è bene precisarlo, codice Javascript può essere inserito in qualsiasi punto del documento HTML, sia nell'<head> che nel <body> della pagina. La scelta di "dove" implementare il codice dipende da una pluralità di...
I commenti in Javascript
E' buona norma di programmazione commentare il codice, cioè aggiungere, all'interno del codice sorgente dello script, annotazioni ed appunti. Si tratta, in pratica, di inserire porzioni di codice che non dovranno essere interpretate dal browser come comandi Javascript, ne dovranno essere stampate a video. I commenti Javascript al codice, infatti, sono "ad uso e consumo" dello sviluppatore e servono...
Variabili e tipi di dato in Javascript
In un qualsiasi linguaggio di programmazione un ruolo indispensabile e di primo piano è occupato dal concetto di variabile. Col termine "variabile" s'intende una porzione di memoria (del client) all'interno della quale vengono conservate alcune informazioni necessarie per lo svolgimento delle operazioni del programma.
L'assegnazione di un valore ad una variabile in Javascript è molto semplice:
var nomeVariabile;
nomeVariabile = "contenuto";
Oppure:
var nomeVariabile...
Strict mode in Javascript: la dichiarazione "use strict"
Nella precedente lezione della nostra guida, abbiamo visto che Javascript non "obbliga" lo sviluppatore a dichiarare le variabili. In altre parole, la dichiarazione della variabile mediante la clausola var può essere considerata una buona abitudine di programmazione, ma non indispensabile ai fini del corretto funzionamento degli script.
In altre parola, Javascript consente di utilizzare nel codice anche variabili mai dichiarate...
Le costanti in Javascript
Le costanti, come lascia intuire il nome, servono a memorizzare dei valori che non possono cambiare durante l'esecuzione dello script. Javascript, storicamente, non ha mai supportato le costanti. Da un punto di vista prettamente convenzionale, molti sviluppatori Javascript sono soliti definire i valori costanti all'interno di comuni variabili caratterizzate da un nome in maiuscolo.
var miavariabile = 123;
var MIACOSTANTE =...
Gli operatori di Javascript
In una precedente lezione abbiamo visto come defininire e valorizzare delle variabili in Javascript ed abbiamo visto che queste possono assumere diversi valori corrispondenti a diversi tipi di dato (stringa, numerico, booleano, ecc.). Se è vero che le variabili svolgono un ruolo da primo iano in un qualsiasi programma, è altrettanto vero che lo è altrettanto saper svolgere su...
Strutture condizionali in Javascript: if, else if e else
Da questa lezione, sulla scorta delle nozioni apprese finora, inizieremo finalmente a scrivere qualche programmino degno di nota, per farlo dobbiamo, prima di tutto, prendere confidenza con le cosiddette strutture di controllo del flusso di programma o, più banalmente, le condizioni.
Come in ogni linguaggio di programmazione che si rispetti, anche in Javascript, infatti, è possibile definire delle condizioni al...
Javascript Switch
Nella precedente lezione abbiamo visto come creare una struttura condizionale utilizzando le clausole if, else if e else. In realtà questo costrutto non è l'unico tipo di struttura di controllo disponibile in Javascript. In questa lezione, infatti, vedremo come orientare il flusso di programma attraverso l'utilizzo del costrutto switch.
Attraverso lo switch viene presa in esame una data variabile e...
L’operatore ternario di Javascript
Oltre ai costrutti if ... else if ... else ... e switch esiste anche una terza sintassi Javascript attraverso la quale è possibile incanalare il flusso di programma a seconda che una data condizione si verifichi oppure no. Questa sintassi è nota come operatore ternario e consiste in un modo "compatto" attraverso il quale scrivere un'istruzione condizionale.
E' bene precisare...
I cicli in Javascript: for, while e do-while
Per una serie di motivi che scopriremo nel corso di questa lezione, nonchè nelle successive, può nascere l'esigenza di dover ripetere una serie di istruzioni un determinato numero di volte, o finchè non si verifichi una data condizione. In tali circostanze è necessario ricorrere alle iterazioni o, più comunemente, ai cicli.
Javascript supporta diverse strutture iterative. Vediamole una ad una...
Javascript break e continue
In tema di cicli è importante citare due fondamentali comandi del Javascript, ovvero break e continue. In questa lezione della nostra Guida Javascript li analizzeremo nel dettaglio.
break
Il comando break lo abbiamo già visto quando abbiamo analizzato la struttura di controllo switch; in realtà i suoi ambiti di impiego non si esauriscono li, in quanto break può essere utilizzato anche...
Gli eventi in Javascript
Perchè accada un qualcosa, sia nella vita che in programmazione, c'è bisogno che "questo qualcosa" sia scatenato da un evento: nella vita, ad esempio, un incontro può far accadere qualcosa di piacevole (si spera!), in programmazione il click del mouse, la pressione di un pulsante, il resize della finestra, ecc. su possono scatenare una determinata routine.
In poche parole possiamo...
Creare funzioni in Javascript
Uno degli elementi chiave di un programma, in questo caso di un programma Javascript, sono la funzioni.
Una funzione raccoglie in se tutte le istruzioni per assolvere ad un determinato compito all'interno di un programma. Una funzione, quindi, è una parte (relativamente) autonoma di un programma in quanto assolve ad un compito specifico che può essere ripetuto più volte in...
Oggetti nativi di javascript (metodi e proprietà)
Come detto nella lezione introduttiva, Javascript è un linguaggio orientato agli oggetti, questo significa che allo sviluppatore è consentito creare degli oggetti personalizzati (come vedremo in una delle lezioni conclusive di questa guida) e che nelle stesse API del linguaggio sono già presenti degli oggetti nativi che vengono messi a disposizione dello sviluppatore.
In quest'ultima accezione possiamo, dunque, definire un...
L’oggetto this di Javascript
Una parola molto importante nella programmazione Javascript è this, grazie a questo particolare identificatore, infatti, è possibile far riferimento "a se stesso" (in inglese "this" vuol dire letteralmente "questo").
L'utilizzo di this in Javascript differisce rispetto ad altri linguaggi orientati agli oggetti. Come detto, infatti, Javascript non conosce il concetto di classe e pertanto non è sempre facile identificare l'oggetto...
L’oggetto window di Javascript
E' l'oggetto principale di Javascript ed è rappresentato dall'intera "finestra" del browser. Se la finestra è composta da una pluralità di frames (ad esempio perchè nella pagina sono presenti degli <iframe>) il browser creerà un'oggetto window per la finestra e tanti altri oggetti window per quanti sono i frame attivi nella pagina.
L'oggetto window è ricco di proprietà e metodi,...
Gestire finestre pop-up con Javascript
In questa lezione approfondiremo la tematica legata all'oggetto window, in particolare vedremo come creare e gestire finestre pop-up. Con questo termine si intende una finestra del browser aperta attraverso un comando Javascript. Tali finestre possono, inoltre, avere un aspetto particolare in quanto, con Javascript, è possibile personalizzare alcune caratteristiche della finestra come le dimensioni, la presenza o meno della...
Finestre di dialogo Javascript (alert, confirm e prompt)
Nelle precedenti lezioni della nostra guida Javascript abbiamo presentato l'oggeto window di Javascript ed il fondamentale metodo open(); in questa lezione proseguiremo il nostro approfondimento su questo fondamentale oggetto approfondendo altri tre metodi davvero importanti attraverso i quali gli sviluppatori possono creare delle finestre di dialogo con le quali interagire con gli utenti.
Il metodo alert()
Attraverso il metodo alert è...
L’oggetto history di Javascript
L'oggetto history fa parte dell'oggetto window e contiene informazioni relative alla cronologia delle URL visitate all'interno della finestra corrente.
Proprietà dell'oggetto history
Questo oggetto dispone della sola proprietà lenght che restituisce il numero delle URL presenti nella cronologia.
Metodi dell'oggetto location
I metodi supportati dall'oggetto history sono tre:
back() - carica la URL precedente a quella corrente (corrisponde cliccare il tasto back del browser);
forward()...
L’oggetto location di Javascript
Attraverso l'oggetto location è possibile accedere ad informazioni relativamente alla URL corrente, cioè la URL attualmente caricata nella finestra del browser.
L'oggetto location, come history, è figlio dell'oggetto window da cui discende direttamente.
Proprietà dell'oggetto location
Di seguito un elenco delle principali proprietà supportate dall'oggetto location:
hash - (GET/SET) restituisce o setta eventuale ancora (#) presente nella URL;
hostname - (GET/SET) restituisce o setta...
L’oggetto navigator di Javascript
Attraverso l'oggetto navigator è possibile accedere ad una serie di informazioni sul browser utilizzato dall'utente.
Proprietà dell'oggetto navigator
Di seguito un elenco delle principali proprietà supportate dall'oggetto navigator:
appVersion - (GET) restituisce informazioni complete sulla versione del browser in uso;
cookieEmanbled - (GET) determina se il browser accetta o meno i cookie;
geolocation - (GET) restituisce un oggetto geolocation che può essere utilizzato per...
L’oggetto screen di Javascript
L'oggetto screen contiene una serie di informazioni relative allo schermo del device utilizzato dall'utente.
Questo oggetto ha la particolarità di disporre solo di proprietà e di nessun metodo.
Proprietà dell'oggetto screen
availWidth e availHeight - (GET) restituisce le dimensioni dello schermo esclusa la taskbar;
colorDepth - (GET) restituisce la profondità del colore (bits x pixel);
pixelDepth - (GET) restituisce la risoluzione colore dello schermo...
L’oggetto document di Javascript e l’interazione col DOM
Il Document Object Model (o, più brevemente, DOM) è uno standard ufficiale del W3C attraverso il quale la struttura di un documento (come ad esempio una pagina HTML) è rappresentata sotto forma di un modello orientato agli oggetti.
In pratica ogni elemento della struttura del documento è rappresentato sotto forma di nodo di un elemento padre creando una sorta di...
Javascript Date – gestire e manipolare date e orari
Javascript, grazie all'oggetto Date() offre una serie di potenti e preziosi strumenti per manipolare date e orari.In questa lezione della nostra guida a Javascript vedremo come manipolare le date attraverso l'oggeto nativo Date() ed anche attraverso alcune librerie appositamente pensate per semplificare la manipolazione di date e orari all'interno di applicativi basati su Javascript.
Premessa
Prima di addentrarci nell'analisi dei vari...
Operazioni matematiche con Javascript
Eseguire le più comuni operazioni matematiche in Javascript è molto semplice e intuitivo. Abbiamo già visto, in una precedente lezioni della nostra guida, quali sono e come funzionano gli operatori matematici ma volendo fare un breve ripasso vediamo alcuni esempi di semplici calcoli effettuati su due variabili numeriche:
var a = 12;
var b = 3;
// somma
var somma = (a...
Array Javascript
Gli Array(), come le variabili, sono una porzione di memoria all'interno delle quali vengono immagazzinati dei dati. Se nella variabile viene immagazzinata una specifica informazione (ad esempio un numero, una stringa, un valore booleano, ecc.) nell'array possono essere incapsulati una pluralità di informazioni all'interno di una sorta griglia astratta. Javascript, come tutti i linguaggi di programmazione che si rispettino,...
Gestire le stringhe con Javascript
In occasione della lezione dedicata alle variabili, abbiamo già visto cosa sono le stringhe e come si definisce una variabile di tipo stringa in Javascript. Nel corso di questa lezione vedremo come manipolare la strighe attraverso le proprietà ed i metodi che Javascript mette a disposizione degli sviluppatori.
E' bene ricordare, infatti, che l'interprete Javascript, quando ha a che fare...
RegExp: le espressioni regolari in Javascript
In questa lezione della nostra guida Javascript affronteremo un argomento molto importante ovvero come utilizzare le espressioni regolari all'interno delle nostre applicazioni. La padronanza dei costrutti delle RegExp è un requisito fondamentale per il "buon sviluppatore" Javascript in quanto consente, tra le altre cose, di creare strumenti di validazione efficaci con cui verificare la correttezza dei dati passati in...
Creare, leggere e cancellare un cookie con Javascript
Più volte su queste pagine abbiamo affrontato l'argomento della gestione dei cookie generalmente facendo riferimento a linguaggi di scripting lato server come ad esempio PHP. E' bene ricordare, invece, che è possibile manipolare i cookie validamente anche attraverso istruzioni lato client. In questa lezione della nostra guida, infatti, ci occuperemo di introdurre il lettore alla possibilità di gestire e...
Gestire gli oggetti con Javascript
In questa parte finale della nostra guida a Javascript ritengo opportuno affrontare alcuni concetti avanzati, come ad esempio la gestione degli oggetti e, conseguentemente, accennare alla cosiddetta programmazione orientata agli oggetti.
Prima di poter parlare di OOP, ovviamente, è necessario introdurre il concetto di oggetto. In realtà, nel corso di questa guida, abbiamo già avuto modo di avere a che...
Programmazione ad oggetti (OOP) con Javascript
Javascript è un linguaggio di sviluppo molto potente ed avanzato grazie al quale gli sviluppatori possono realizzare applicativi di ogni livello di complessità. Nell'era del web 2.0 l'importanza di Javascript è andata via via crescendo, essendosi moltiplicate le interfacce utente realizzate con un massiccio ricorso alle tecniche di scripting client side al fine di automatizzare i processi e migliorare...
Parsing JSON con Javascript: e la funzione JSON.parse()
JSON è un formato standard per lo scambio di dati tra piattaforme informatiche che nasce e si basa sul linguaggio Javascript (JSON, infatti, è l'acronimo di JavaScript Object Notation).
E' bene precisare che, nonostante nasca da Javascript, JSON è un formato testuale completamente indipendente dal linguaggio, in quanto può essere utilizzato ed interpretato correttamente anche da altri linguaggi com, ad...