JavaScript è un linguaggio informatico, originariamente sviluppato da Brendan Eich ed attualmente alla versione n. 6, che serve a rendere dinamiche le pagine web e ad interagire con l’utente, ad esempio creando o eliminando elementi html ovvero cambiando contenuto, attributi e stile agli stessi, ecc.
Si tratta di un linguaggio:
– lato client, giacché il codice è interpretato ed eseguito dal browser dell’utente e non dal server (come nel caso, ad esempio, del php); esiste tuttavia la possibilità di utilizzare JavaScript per applicazioni server-side, ad esempio attraverso il framework Node
– orientato agli oggetti (e agli eventi), che sono appunto il fulcro di questo linguaggio
– case sensitive (quindi, Var
o VAR
sono diversi da var
, e NomeVariabile è diverso da nomevariabile);
– senza indentazione del codice, la quale ha solo una funzione estetica (che aiuta la leggibilità dello stesso e non pure di sintassi, come ad esempio per Phyton).
Inoltre:
– per i commenti, prevede il doppio slash (//
) se a riga singola, oppure i simboli /*
(di apertura) e */
(di chiusura) per quelli che occupano una o anche più righe;
– interpreta i trattini (-
) sempre con il significato “meno” della sottrazione e quindi non possono essere usati per i nomi composti delle variabili (ad es., nome-variabile), per le quali deve quindi semmai optarsi per l’uso delle iniziali maiuscole (ad es., NomeVariabile) o per l’underscore (_
) anche detto CamelCase (ad es., nome_variabile).
Gli oggetti JavaScript
In JavaScript, ogni cosa è o si comporta come un oggetto, che è un’entità mutabile e manipolabile.
<script> var Persona = { nome: "Mario", cognome: "Rossi", indirizzo: { via: "Via Garibaldi", numero: 15, CAP: "00100", citta: "Roma" } }; </script>
L’oggetto JavaScript possiede:
1) proprietà, che sono i dati dell’oggetto in formato [NomeProprietà]/[ValoreProprietà] (ad es., nell’oggetto Persona di cui sopra, la proprietà cognome ha valore Rossi).
2) metodi, che sono le funzioni o funzionalità cioè le attività che un oggetto può compiere.
Le proprietà JavaScript
Generalmente, le proprietà degli oggetti possono essere lette, scritte e cancellate. L’accesso in lettura ed in scrittura alle proprietà degli oggetti avviene in due modi, con il punto (.
) oppure con le parentesi quadre ().
Lettura:
1) ValoreProprietà = NomeOggetto.NomeProprietà;
2) ValoreProprietà = NomeOggetto["NomeProprietà"];
Scrittura:
1) NomeOggetto.NomeProprietà = ValoreProprietà;
2) NomeOggetto["NomeProprietà"] = ValoreProprietà;
<script> var persona = { nome: "Mario", cognome: "Rossi", indirizzo: { via: "Via Garibaldi", numero: 15, CAP: "00100", citta: "Roma" } }; var Nome1 = persona.nome; document.write(Nome1+"<br>"); var Nome2 = persona["nome"]; document.write(Nome2+"<br>"); var Indirizzo1 = persona.indirizzo.via; document.write(Indirizzo1+"<br>"); var Indirizzo2 = persona["indirizzo"]["via"]; document.write(Indirizzo2); </script>
E’ possibile creare le proprietà degli oggetti in due modi: 1) contestualmente alla creazione dell’oggetto; 2) successivamente, definendola NomeOggetto["NomeProprietà"] = ValoreProprietà
oppure NomeOggetto.NomeProprietà = ValoreProprietà
.
<script> var persona = { nome: "Mario" }; persona.cognome = "Rossi"; persona["indirizzo"] = "Via Garibaldi"; document.write(persona.cognome +"<br>"); document.write(persona.indirizzo); </script>
È infine possibile eliminare una proprietà tramite la keyword delete (v. dettagli): delete persona.cognome;
Quanto detto vale ovviamente non solo per gli array (come negli esempi sopra fatti), ma per tutti gli oggetti JavaScript, e quindi anche per gli oggetti che si riferiscono agli elementi html, ad esempio al fine di accedere in lettura e scrittura agli attributi html degli stessi.
<script> function CambiaLink() { var LinkAttuale = document.getElementById("proprieta_link").href; alert("Il link non è più "+LinkAttuale); document.getElementById("proprieta_link").href = "https://it.yahoo.com/"; document.getElementById("proprieta_link").title= "questo link ora apre yahoo"; } </script> <a id="proprieta_link" href="https://www.google.it/" title="questo link apre Google" target="_blank">Apri Google</a> <button onclick="CambiaLink()">Cambia il link (da Google a Yahoo)</button>
Agli oggetti JavaScript, e quindi anche agli elementi html, si può accedere a cascata: ad es., l’istruzione document.forms['MioForm'].MioInput.value
significa ‘accedi al documento corrente (document
) e quindi, all’interno di questo, ai form (.forms
), e quindi al particolare form con name
“MioForm” e quindi, all’interno di questo, all’elemento con name
“MioInput”, e quindi al valore (value
) di quest’ultimo’:
<script> function AttivaFunzione1() { var ValoreCampoForm = document.forms['MioForm'].MioInput.value; alert(ValoreCampoForm); } </script> <form name="MioForm"> <input name="MioInput" value="Valore del mio campo input"> </form> <form name="AltroForm"> <input name="MioInput" value="Altro Valore del mio campo input"> </form> <button onclick="AttivaFunzione1()">Attiva Funzione</button>
E’ possibile conoscere la proprietà di ogni oggetto attraverso il metodo Object.keys()
(v . dettagli), oppure attraversando l’oggetto stesso tramite la keyword for in
(v . dettagli).
<script> for(var prop in window){ document.write(prop+"<br>"); } </script>
I metodi JavaScript
I metodi JavaScript sono funzioni, che possono essere:
– native (ad es., getElementById()
);
– definite dall’utente, che a loro volta possono essere:
— anonime (nel formato function(){[codicejavascript]}
)
— nominative (nel formato function [NomeFunzione](){[codicejavascript]}
)
<script> document.getElementById("NomeId"); function() { // codice JavaScript }; function Nome Funzione() { // codice JavaScript }; </script>
Inserimento del codice JavaScript nelle pagine web
Il codice javascript può essere inserito pagine web in tre diversi modi (tra loro complementari):
1) Codice JavaScript esterno: mediante il tag <script>
con attributo <src>
valorizzato con l’URL che punta al file (con estensione .js
) contenente il codice JavaScript (ma senza il tag <script>
). Si consiglia di inserire tale tag appena prima della chiusura del tag <body>
per non rallentare il caricamento della pagina.
<script src="mio-script1.js"></script> <script src="mio-script2.js"></script>
2) Codice JavaScript interno: mediante il tag <script>
(che non è parte del linguaggio JavaScript, ma ancora HTML), avente come oggetto ovvero contenuto il codice JavaScript. Si consiglia di inserire tale tag appena prima della chiusura del tag <body>
per non rallentare il caricamento della pagina.
<script> document.write('Testo aggiunto con javascript'); </script>
3) Codice JavaScript inline: mediante suo inserimento:
a) come valore degli attributi evento
<button onclick="alert('ciao')">clicca qui</button>
b) come valore dell’attributo href con keyword javascript:
, che precede il codice JavaScript vero e proprio
<a href="javascript:alert('ciao')">clicca qui</a>
Bibliografia
-
On line
-
Su carta
- Arcadipane Michele, Javascript Guida di riferimento
- Bochicchio Daniele – Mostarda Stefano, HTML 5 con CSS e Javascript
- Duckett Jon, Javascript & jQuery: Interactive Front-End Web Development
- Flanagn David, JavaScript: the definitive guide
- Freeman Eric T. – Robson Elisabeth, Head First JavaScript Programming
-
Video tutorial