Javascript – esempio 1

Esempio 1

Tanto per iniziare con qualcosa di consolidato, vediamo subito come utilizzare Javascript perrealizzare quello che è un classico dei primi algoritmi che si studiano a scuola: la somma di due numeri:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=windows-1250">
    <title>calcolo del totale</title>
    <script language="JavaScript" >
        function esegui() {
            var n1 = parseInt(document.getElementById("n1").value);
            var n2 = parseInt(document.getElementById("n2").value);
            document.getElementById("tot").value =n1 + n2;
            return 0;
        }
    </script>
    </head>
<body>
<p>Questo programma &egrave; il primo classico esempio con cui, dopo il classico "ciao mondo", iniziano i corsi di programmazione.
<br />Inserire due numeri e calcolare la somma</p>
<p><form>
inserisci il primo numero: <INPUT type="text" name="num1" value="0" size="5" maxlength="10" alt="inserire il primo numero" id="n1"><br />
inserisci il secondo numero <INPUT type="text" name="num2" value="0" size="5" maxlength="10" alt="inserire l'altro numero" id="n2"><br />
<input type="button" name="calcola" value="calcola" id="go" onclick="esegui()" /><br />
<input type="text" name="totale" value="0" size="10" maxlength="10" readonly="true" id="tot" />
</form></p></body></html>

Il codice appena visto contiene in sé molti elementi importanti

  1. Innanzitutto si vede come organizzare un modello standard per i nostri esercizi, da adattare di volta in volta alle situazioni che tratteremo con gli studenti:
  2. Si vede poi il particolare modo di richiamare gli oggetti:
    getElementById( )

    ci sono tanti altri metodi, e in molti casi sono i più indicati, questo tuttavia è generalmente una buona scelta, soprattutto didatticamente. Abitua i nostri studenti a separare logicamente l’interfaccia utente (che in questo caso è la parte contenuta nel <body> della pagina) dal codice, e impone che ogni oggetto istanziato sia identificato da un suo “id”, e questo venga utilizzato per riferirvicisi. Non ricorda un po’ gli ambienti visual a cui molti di noi sono abituati? però qui bisogna scrivere “a manina”!!!!

  3. Si vede subito il legame oggetto->evento->funzione, e questo ci fa partire subito con una sana impostazione di programmazione “event-driven”
  4. Si capisce anche che sarà nelle funzioni il posto dove scateneremo la nostra fantasia e riproporremo i classici algoritmi che spieghiamo alla lavagna!

Avviso importante!!!!

E’ meglio dirlo subito, prima che si cominci a piangere…….. funzioni, names, id e via discorrendo sono tutti nomi in uno stesso spazio, pertanto NON USATE MAI LO STESSO NOME PER UNA FUNZIONE, UN ID E UN NAME anche se si tratta dello stesso oggetto!!!! Se infatti notate l’esempio vedrete che gli oggetti hanno “name” ed “id” diversi, e così vale anche per il “bottone”

Annunci

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...