JAVASCRIPT

js-logo

oggetti

keyword

metodi e proprietà

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>


Apri Google

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>

clicca qui

Bibliografia