Ancora una lightbox??? Ma basta!!!!!

e invece no! Ecco ancora un’altro script per la realizzazione dell’effetto lightbox nelle pagine web.

Perchè? Semplice: ne volevo uno leggerissimo, facilissimo da capire in quanto mi serviva per spiegare il meccanismo ai miei studenti, e soprattutto che contenesse istruzioni molto elementari (ovviamente nei limiti consentiti da uno script che comunque aggiunge oggetti al DOM e ne setta le proprietà ed i metodi). Continua a leggere “Ancora una lightbox??? Ma basta!!!!!”

What is “this”

Il famigerato “This”.

Non appena cominciamo ad utilizzare il Javascript, alcuni studenti mi chiedono subito “ma prof., cosa significa quel ‘this’ che vediamo da più parti?”

Ovviamente avendo a che fare con ragazzi alle prime armi nel campo della programmazione, diventa diffcile e troppo astratto dare definizioni come “è il puntatore all’oggetto corrente. Continua a leggere “What is “this””

Javascript – esempio 4

Esempio 4:

Calcolare l’importo di un prezzo con IVA inclusa dando l’imponibile. In questo caso si vede come si la proprietà “value” del radiobutton cliccato venga passata direttamente come parametro alla funzione.

Cambia il modo di chiamare la funzione nel FORM:

seleziona l'aliquota IVA<br />
4% <input type="radio" name="aliquota" alt="iva al 4%" onclick="calcolaiva(this.value)" id="aliq4" value="4"/><br />
10% <input type="radio" name="aliquota" alt="iva al 10%" onclick="calcolaiva(this.value)" id="aliq10" value="10"/><br />

e la funzione che viene chiamata:

function calcolaiva(ali) {
 var imponibile = document.getElementById("impo").value;
 var aliquota = 0;
 if (ali == "4") aliquota = 4;
 if (ali == "10") aliquota = 10;
 if (ali == "20") aliquota = 20;
document.getElementById("tot").value =Math.floor( imponibile *( 1 + aliquota/100));
 return 0;
}

Javascript – esempio 3

Esempio 3:

Calcolare l’importo di un prezzo con IVA inclusa dando l’imponibile. In questo esempio viene evidenziato come sia possibile usare il gestore di eventi anche sui singoli radiobutton e non necessariamente sul tradizionale “button”

Rispetto all’esempio precedente, qui cambia solo il FORM:

<form>
inserisci l'imponibile: <INPUT type="text" name="imponibile" value="0" size="10" maxlength="10" alt="inserire l'imponibile su cui calcolare l'IVA" id="impo">
<br />
seleziona l'aliquota IVA<br />
4% <input type="radio" name="aliquota" alt="iva al 4%" onclick="calcolaiva()" id="aliq4" value="4"/><br />
10% <input type="radio" name="aliquota" alt="iva al 10%" onclick="calcolaiva()" id="aliq10" value="10"/><br />
20% <input type="radio" name="aliquota" alt="iva al 20%" onclick="calcolaiva()" id="aliq20" value="20"/><br />
<input type="text" name="totale" value="0" size="10" maxlength="10" readonly="true" id="tot" />
</form>

Javascript – esempio 2

Esempio 2:

Calcolare l’importo di un prezzo con IVA inclusa dando l’imponibile. In questo caso si utilizza l’IF. Questo esempio sarà la base per i successivi:

<!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 dell'IVA</title>
 <script language="JavaScript" >
function calcolaiva() {
 var imponibile = document.getElementById("impo").value;
 var aliquota = 0;
 if (document.getElementById("aliq4").checked == true) aliquota = 4;
 if (document.getElementById("aliq10").checked == true) aliquota = 10;
 if (document.getElementById("aliq20").checked == true) aliquota = 20;
document.getElementById("tot").value =Math.floor( imponibile *( 1 + aliquota/100)); 
return 0;
}
 </script>
 </head>
 <body><form>inserisci l'imponibile: 
<INPUT type="text" name="imponibile" value="0" size="10" maxlength="10" alt="inserire l'imponibile su cui calcolare l'IVA" id="impo">
<br />
seleziona l'aliquota IVA<br />
4% <input type="radio" name="aliquota" alt="iva al 4%" id="aliq4" value="4"/><br />
10% <input type="radio" name="aliquota" alt="iva al 10%" id="aliq10" value="10"/><br />
20% <input type="radio" name="aliquota" alt="iva al 20%" id="aliq20" value="20"/><br />
<input type="text" name="totale" value="0" size="10" maxlength="10" readonly="true" id="tot" />
<input type="button" name="calcola" value="calcola" id="go" onclick="calcolaiva()" />
</form>
</body>
</html>

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”