PROGRAMMIAMO
JS - Oggetti
Oggetti, elementi e attributi

Il JS è un linguaggio orientato agli oggetti (Object Oriented Language), come il Visual Basic e il C++. Affronteremo più avanti in modo un po' più approfondito l'argomento programmazione ad oggetti. Per adesso ci basti sapere che un oggetto in generale può essere approssimativamente definito come qualcosa su cui è possibile eseguire delle azioni (si chiamano propriamente metodi) o di cui si possono modificare le caratteristiche (in termine tecnico proprietà).

Per fare un semplice esempio, un elemento immagine (tag <img>) su una pagina html è un oggetto. Le sue proprietà sono gli attributi (es. src, alt etc) che è possibile modificare tramite uno script in JS. Abbiamo già visto all'opera questo sistema introducendo un semplice script per animare un'immagine. In quell'esempio l'oggetto preso in considerazione era l'immagine img:

<img id="omino"  alt="animazione" src="../immagini/omino1.jpg" width="209" height="396" onclick="muovi()">

L'attributo id (lo stesso usato per il posizionamento degli elemento con i fogli stile) fornisce un nome univoco all'oggetto (nel nostro caso omino). Tale nome è scelto a piacere, con l'unica regola che dev'essere unico all'interno della pagina html.

A questo punto il JS può accedere all'oggetto attraverso la seguente sintassi generale:

 document.getElementById('nomeoggetto').attributo

Per esempio:

 document.getElementById('omino').src = '../immagini/omino2.jpg' ;

L'istruzione precedente modifica l'attributo src dell'oggetto omino cambiandone il valore.

In modo perfettamente simile, considerando ora l'esempio dello script per convertire le temperature, troviamo l'istruzione:

document.getElementById("fahreneit").value = Math.round(((document.getElementById("celsius").value) * 9/5 + 32) * 10) / 10;

Senza preoccuparci per ora delle formule e della sintassi del linguaggio, notiamo che l'oggetto fahreneit ha un attributo value modificato usando l'attributo value di un altro oggetto di nome celsius.

In pratica l'istruzione document.getElementById('nomeoggetto').attributo permette facilmente sia di modificare sia di utilizzare i valori degli attributi di un certo oggetto.

Riassumendo:

  1. tutti gli elementi html presenti su una pagina sono oggetti per il JS;
  2. gli attributi di ciascun elemento per il JS si chiamano proprietà;
  3. per modificare le proprietà (=attributi) di un oggetto (=elemento) bisogna dargli un nome univoco attraverso l'attributo universale id;
  4. una volta che l'oggetto (=elemento) ha un nome, è possibile accedere ai suoi attributi attraverso l'istruzione document.getElementById('nomeoggetto').attributo

Non è troppo difficile, vero? In realtà il JS è un linguaggio molto più potente e flessibile di quanto mostrato da questi primi semplici esempi ed esistono molti altri sistemi per accedere e per modificare le proprietà degli oggetti. Per affrontare questi argomenti però dovremmo introdurre concetti per il momento troppo complessi (il BOM e il DOM). Rimandiamo gli approfondimenti a una lezione futura e per adesso concentriamoci nell'imparare bene questo metodo semplice.

 

precedente - successiva

Sito realizzato in base al template offerto da

http://www.graphixmania.it