Oggetti JavaScript — CodingCreativo

In questa lezione parleremo degli oggetti JavaScript e di come utilizzare le proprietà e i metodi.

JavaScript è un linguaggio di programmazione basato sugli oggetti e introduce la nozione di prototipo (prototype), ovvero un oggetto utilizzato come modello da cui poi poter prendere le proprietà di base per creare un nuovo oggetto.

JavaScript possiede degli oggetti predefiniti ma consente anche agli utenti di crearne dei nuovi.

Prima di iniziare a creare i nostri oggetti personalizzati, analizziamo quanto già appreso nelle precedenti lezioni.

Da zero ad eroe

Entra nel mondo della programmazione web: variabili, funzioni, array, DOM, eventi. Con esercizi pratici e progetti coinvolgenti.

8 ore di corso registrato
Più di 50 algoritmi risolti passo passo
Livello base — da zero ad eroe
100% online, fruibile quando vuoi

Abbiamo già visto infatti come usare JavaScript con il DOM (Document Object Model) cioè gli elementi presenti in una pagina HTML e abbiamo visto che questi elementi rappresentano degli oggetti.

Proprietà e Metodi degli oggetti in JavaScript

Ogni oggetto in JavaScript ha delle caratteristiche, ovvero delle proprietà e dei metodi. Le proprietà possono essere variabili semplici, array o anche variabili oggetto mentre i metodi in definitiva sono dei blocchi di istruzione identificati in una funzione.

Proprietà

La sintassi per utilizzare una proprietà su di un oggetto è la seguente:

oggetto.proprietà

Le proprietà possono essere utilizzate sia per leggere sia per assegnare un determinato valore.

Vediamo dunque un paio di esempi che ci aiutano a comprendere meglio.

Esempio 1 sugli oggetti e proprietà in JavaScript

Sugli elementi del DOM possiamo utilizzare delle proprietà come ad esempio innerHTML.

var testo = document.getElementById('testo').innerHTML;
console.log(testo);

Nell'esempio sopra document.getElementById('testo') è l'oggetto, mentre innerHTML è la proprietà.

In questo caso stiamo leggendo il contenuto dell'elemento che contiene l'id testo e lo stiamo memorizzando in una variabile. Utilizzando poi il console.log vediamo ciò che la variabile testo contiene.

Esempio 2

Facciamo ancora un altro esempio per comprendere meglio l'utilizzo delle proprietà.

Se lato html ho questa casella di input:

 <input type="text" id="nome">

allora utilizzando la proprietà value possiamo impostare un valore che verrà visualizzato nel campo di input.

document.getElementById('nome').value = 'prova di proprietà';

In questo esempio a differenza del precedente stiamo usando una proprietà per assegnare un valore.

Metodi

La sintassi che permette di utilizzare un metodo su di un oggetto in JavaScript è la seguente:

oggetto.metodo()

Esempio 1 sugli oggetti e metodi in JavaScript

In questo esempio rimuoviamo semplice un attributo da un elemento del DOM utilizzando un metodo.

Ipotizziamo di avere nel codice HTML il seguente elemento:

<div id="testo" class="testo-descrittivo">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum architecto adipisci eaque explicabo quo culpa amet unde, laborum accusamus placeat quae nulla, omnis minima obcaecati minus asperiores ab, maiores cumque!</div>

Interveniamo adesso lato JavaScript utilizzando il metodo removeAttribute() per eliminare la classe associata a questo elemento.

document.getElementById('testo').removeAttribute('class');

In questa lezione abbiamo introdotto il concetto di oggetto in JavaScript e abbiamo fatto qualche esempio di come utilizzare proprietà e metodi, nelle prossime lezioni approfondiremo questo argomento.

Lezione precedente: gioco dei dadi

Lezione successiva: creare un oggetto in JavaScript