PROGRAMMIAMO
JS - Interfaccia e codice
Struttura generale di un programma: interfaccia e codice

In generale un programma per un computer, qualunque programma (da Internet Explorer a Angry Birds), può essere pensato come costituito da due parti ben distinte:

  1. un'interfaccia
  2. il codice del programma

L'interfaccia è quella parte del programma con cui l'utente interagisce direttamente. Potremmo paragonarla al pannello di controllo di un macchinario. Usando l'interfaccia (tipicamente attraverso la tastiera e il mouse) l'utente può inserire dati, scegliere opzioni, ricevere risultati eccetera.

Il codice è invece la parte nascosta del programma, quella che si occupa di eseguire i comandi forniti attraverso l'interfaccia. Possiamo paragonarla al motore di una macchina. Senza il codice nessun programma può funzionare, ma senza un'interfaccia un programma non può comunicare con l'esterno.

Interfaccia e codice di un programma

Interfaccia e codice nei programmi in JS

Quando si scrivono dei programmi in JavaScript, l'interfaccia è tipicamente costituita da una pagina html. L'utente interagisce con gli elementi della pagina stessa (immagini, div, paragrafi etc.) e il codice risponde a sua volta modificando tali elementi.

Un semplice esempio è quello del programma di animazione visto nella lezione precedente. In questo caso l'interfaccia era costituita da una pagina con un'immagine di un omino stilizzato. L'utente interagisce con l'interfaccia cliccando col mouse sull'immagine e il codice risponde modificando l'immagine stessa.

Il codice nascosto è la funzione JS di nome muovi che si occupa appunto di animare l'immagine. 

Sebbene, come vedremo più avanti, esistano anche altri modi per inserire in una pagina il codice JS, per adesso consideriamo questa sola possibilità: il codice va inserito all'interno di una funzione (function) con nome scelto a piacere dal programmatore. La funzione si trova nell'head (più avanti rimuoveremo anche questa limitazione) e rispetta la seguente struttura generale:

<script>

function nome_della_funzione()
    {
      ....
    }

</script>

Si osservi nuovamente che la function dev'essere chiusa in un elemento <script>. Si notino le parentesi tonde (aperta e chiusa) che seguono obbligatoriamente il nome della funzione e la coppia di graffe (aperta e chiusa) che racchiudono il codice della funzione. Più avanti studieremo meglio nel dettaglio il funzionamento di questo meccanismo e il suo significato. Per adesso non preoccupiamocene troppo.

Sebbene qualsiasi elemento html (img, a, div etc.) si presti a essere utilizzato per realizzare un'interfaccia, uno degli elementi sicuramente più utili è il form. Mediante un form si può infatti realizzare facilmente un'interfaccia dotata di caselle di testo, pulsanti, etc. Si consideri a titolo di esempio la seguente calcolatrice realizzata in JS:






Senza preoccuparci troppo per ora dei dettagli del suo funzionamento, diamo un'occhiata a come è stata realizzata l'interfaccia:

<form name="calc">
<table border="4" align="center">
<tr>
<td>
<input type="text" name="numero" size="16">
<br>
</td>
</tr>
<tr>
<td>
<input type="button" name="one" value=" 1 " onclick="calc.numero.value += '1'">
<input type="button" name="two" value=" 2 " onclick="calc.numero.value += '2'">
<input type="button" name="three" value=" 3 " onclick="calc.numero.value += '3'">
<input type="button" name="plus" value=" + " onclick="calc.numero.value += ' + '">
<br>
<input type="button" name="four" value=" 4 " onclick="calc.numero.value += '4'">
<input type="button" name="five" value=" 5 " onclick="calc.numero.value += '5'">
<input type="button" name="six" value=" 6 " onclick="calc.numero.value += '6'">
<input type="button" name="minus" value=" - " onclick="calc.numero.value += ' - '">
<br>
<input type="button" name="seven" value=" 7 " onclick="calc.numero.value += '7'">
<input type="button" name="eight" value=" 8 " onclick="calc.numero.value += '8'">
<input type="button" name="nine" value=" 9 " onclick="calc.numero.value += '9'">
<input type="button" name="times" value=" x " onclick="calc.numero.value += ' * '">
<br>
<input type="button" name="clear" value=" c " onclick="calc.numero.value = ''">
<input type="button" name="zero" value=" 0 " onclick="calc.numero.value += '0'">
<input type="button" name="doit" value=" = " onclick="calc.numero.value = eval(calc.numero.value)">
<input type="button" name="div" value=" / " onclick="calc.numero.value += ' / '">
<br>
</td>
</tr>
</table>
</form>

Si osservi come sia stato appunto usato un form. Un elemento input di tipo text è stato usato per la casella di inserimento dati e una serie di bottoni (button) sono stati usati per realizzare i tasti della calcolatrice. Notiamo di passaggio che in questo esempio il codice JS non è contenuto in una funzione: vedremo più avanti meglio questi casi particolari.

 

precedente - successiva

Sito realizzato in base al template offerto da

http://www.graphixmania.it