Nelle lezioni precedenti abbiamo cominciato a prendere confidenza con gli oggetti. I primi tempi è facile confondere le proprietà degli oggetti per metodi degli oggetti e viceversa. 
Abbiamo visto, ad esempio, che document.write serve per visualizzare stringhe di caratteri o di numeri, mentre document.bgColor imposta il colore dello sfondo, ebbene essi sono rispettivamente un metodo ed una proprietà dell’oggetto document.
Per essere più precisi potremmo dire che un metodo è una particolare funzione di un oggetto mentre una proprietà è una variabile collegata ad un oggetto e ne definisce un particolare attributo.

Prendiamo in considerazione il seguente form:

<form name="Modulo1">
  <input type="text" name="variabile1">
</form>
 

Nella precedente lezione abbiamo visto che la proprietà NAME identifica il nome dell’oggetto per il linguaggio Javascript e che questa viene impostata tramite il linguaggio HTML.
Nel nostro caso abbiamo un form di nome ‘Modulo1’ comprendente un oggetto di tipo testo di nome ‘variabile1’.
Di solito l’oggetto ‘text’ viene utilizzato come strumento di immissione dati, tuttavia con il linguaggio Javascript è possibile utilizzarlo anche come una casella di visualizzazione dati.

Vediamo come visualizzare il valore o il contenuto dell’oggetto in questione:

document.write(document.Modulo1.variabile1.value)

Il metodo write visualizzerà il contenuto (value) dell’Oggetto (variabile1) del Form (Modulo1) del documento (document).

Per modificare un oggetto text bisogna utilizzare, invece, la seguente riga di codice:

document.Modulo1.variabile1.value="Prova"

che assegna la stringa ‘Prova’ all’oggetto variabile1.

Nel prossimo esempio ho realizzato un form con tre oggetti ‘text’: nome, cognome e nominativo.
I due valori inseriti all’interno degli oggetti ‘nome’ e  ‘cognome’, dovranno essere concatenati da uno spazio ed inseriti nell’oggetto ‘nominativo’ alla pressione di un bottone,.
Vediamo il codice dell’esempio:

document.Modulo1.variabile1.value="Prova"
<form name="MioForm">

  Nome:<input type = "text" name = "nome">

  Cognome:
  <input type = "text" name = "cognome"><BR>

  <input type = "button" name = "Vai" value= "Concatena Nome e Cognome" onClick = "concatena()"><BR>

  Nominativo:
  <input type = "text" name = "nominativo" size = 46>

 </form>

Da notare che è stato applicato l’evento onClick all’oggetto ‘button’, il cui risultato sarà quello di invocare la funzione concatena( ) alla pressione del pulsante sinistro del mouse.
Vediamo adesso la funzione:

function concatena()
{
document.MioForm.nominativo.value= document.MioForm.nome.value+" "+ document.MioForm.cognome.value
}

Questa funzione naturalmente è da inserire nell’intestazione, il suo compito è di assegnare all’oggetto ‘nominativo’ il contenuto dell’oggetto ‘nome’ e dell’oggetto ‘cognome’  separandoli da uno spazio bianco.
Per visualizzare questo esempio Clicca qui .

Questa lezione conclude il capitolo 2,  ‘Primi programmi in Javascript’, spero che abbiate apprezzato lo sforzo di introdurre gli Oggetti, i Metodi, Le Proprietà, gli Eventi, e le Funzioni attraverso dei piccoli esempi di programmazione.
Gli argomenti trattati hanno preso in particolare considerazione le immagini ed i form, perché sono elementi basilari nella programmazione delle pagine web.
Scopriremo insieme le caratteristiche del linguaggio Javascript attraverso il capitolo 3, ‘Le basi della programmazione’.

Torna all'indice Generale del corso di Corso di JavaScript di Software Planet