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>

Unità 5) Settimane n° 12 – 15: Internet: la struttura del web e i linguaggi di scritpting -3

Per questa unità disponiamo di 12 ore. Quattro settimane non sono tantissime, ma se abbiamo lavorato bene fino ad oggi i nostri studenti dovrebbero essere in grado di:

  1. saper utilizzare un editor per realizzare pagine web e saper utilizzare un browser per visualizzarle
  2. avere chiaro che il codice va scritto a “manina” e che la sintassi corretta va cercata su Internet
  3. è possibile assegnare nomi univoci a determinati elementi presenti in una pagina web
  4. gli elementi delle pagine web hanno delle proprietà e con i CSS dovrebbero aver imparato che queste possono essere modificate
Con queste premesse, e ricollegandoci a quanto fatto ad inizio anno, nelle unità 1 e 2, quelle relative ai diagrammi a blocchi e agli algoritmi, adesso dobbiamo loro insegnare a programmare, in modo elementare, con un linguaggio object based: Javascript

Lezione 1

Primo approccio a Javascript: lezione frontale con videoproiettore dove viene presentato il linguaggio. Attenzione, questa è una lezione delicata e va progettata bene. Ci troviamo di fronte a ragazzi di 14 anni, e non è il caso di cominciare a parlare di oggetti, DOM, BOM….. Lo scopo è quello di fornire loro degli strumenti per iniziare a fare semplici programmini e quindi muovere i primi passi. Avranno modo durante il terzo anno di affrontare seriamente la metodologia a oggetti.

Io ho condotto la lezione dicendo pressappoco così:

  • fino ad oggi le pagine che abbiamo realizzato erano prive di vita, solo html e css, adesso è venuto il momento di farli fare qualcosa
  • mettiamo insieme gli algoritmi, con i loro concetti di input-elaborazione-output, e le pagine web: anche queste ci mettono a disposizione degli elementi per fare input e output (qui il riferimento è agli elementi dei form, che sono la cosa più facile da usare)
  • ricordandoci che con l’ID possiamo dare un nome a ciascun elemento presente nella pagina, ecco allora che introduciamo il javascript come linguaggio per poter lavorare sugli elementi presenti nella pagina, la cosa importante è trovare un sistema per poter richiamare gli elementi che vogliamo utilizzare: getElementById !!
  • gli elementi presenti nella pagina sono caratterizzati dall’avere delle proprietà, che possiamo vedere o modificare, dalla possibilità di compiere azioni (i metodi) e di essere sensibili al verificarsi di eventi (mouse o tastiera o altro….)
  • Per spiegare questi concetti ho fatto l’esempio della somma di due numeri, e l’ho utilizzato per illustrare i tre punti fondamentali: proprietà (value, in questo caso), evento (onClick, in questo caso) e una funzione definita dall’utente come gestore d’evento.
  • E’ interessante notare che, facendo qualche esempio, ho subito introdotto l’oggetto Math come (testualmente) “un arnese, diciamo pure un oggetto, che ci fornisce diversi strumenti, chiamati metodi, utili ogni volta che dobbiamo eseguire operazioni matematiche complesse come arrotondamenti, potenze, radici e così via…. Noi chiamiamo Math specificando quale fra i suoi metodi vogliamo utilizzare e lui ci da il risultato”. Forse non sarà un linguaggio rigoroso, ma vi assicuro che quasi tutti i miei studenti hanno pienamente compreso
Questa è stata la prima ora di lezione, ovviamente ho dato loro alcuni riferimenti per approfondire:

Lezione 2-3

Prime due ore di programmazione in laboratorio. Questa lezione serve per far loro muovere i primi passi. Per prima cosa occorre fornire degli strumenti di lavoro. Al tradizionale editor a sintassi evidenziata (io utilizzo Geany) si possono affiancare gli strumenti per gli sviluppatori di Google Chrome, per consentire loro di eseguire il debugging passo passo di uno script, e quindi, ripartendo dall’esempio della somma di due numeri, utilizzare breakpoint e step into.

Una volta fatto questo, provare a dare loro un problema appena appena più complesso della somma di due numeri, che rientri sempre nel caso di elaborazione con la sola struttura sequenziale, fategli scrivere la pagina ed eseguire il tracing.

Infine, per fare un passo in avanti, richiamare il concetto di struttura selezione, studiato nella unità relativa agli algoritmi, e far vedere come l’IF() ELSE possa essere utilizzato in javascript per implementarlo praticamente, e quindi proporgli un esempio, da far fare a loro (!). Ad esempio potrebbe andar bene il confronto fra due numeri per trovare il maggiore.

Lezione 4

Solo un’ora di lezione, quindi conviene presentare con il video proiettore tutto quanto ci serve per poter fare qualche programmino più sofisticato, ovviamente corredandolo di esempi:

  • while, do, for
  • oggetti String, Date e Math
  • metodi fondamentali appartenenti all’oggetto document (ad esempio parseFloat e robe del genere)
  • come utilizzare altri eventi e altre proprietà per poter sfruttare appieno gli elementi dei Form (checked, select, change……)
Si possono utilizzare semplici algoritmi, variando di volta in volta gli esercizi già proposti come ad esempio:

Lezione 5-6

Lezione 7

Lezione 8-9

Lezione 10

Lezione 11-12

Unità 4) Settimane n° 9 – 11: Internet: la struttura del web e i linguaggi di scritpting -2

Per questa unità disponiamo di 9 ore

Lezione 1

Lezione frontale, con videoproiettore. Presentare agli studenti esempi di utilizzo dei CSS, facendo vedere come appare un sito attivando e disattivando i CSS. Molto comodo risulta utilizzare la barra “Web Developer” (o simili) di Frirefox, che consente di attivare e disattivare i CSS per siti esistenti. L’importante è che gli studenti capiscano che il CSS è “l’abito” del sito e come tale può essere modificato senza variarne il contenuto

Contenuti:

  1. differenza fra contenuto e presentazione
  2. diversi modi di utilizzare i CSS (preferire di gran lunga gli esterni, per abituarli sin da ora a programmare con richiami a risorse esterne)
  3. sintassi di base per inserire i CSS e per definire delle regole per i tag
  4. Proporre risorse sulla rete dove reperire esempi

Lezione 2-3

Laboratorio: spiegazione applicata. Presentare agli studenti esempi e farli applicare autonomamente, magari alle stesse pagine realizzate nelle lezioni precedenti. Gli esempi possono essere molto semplici, purchè comprendano molti aspetti della presentazione di una pagina: colori, margini, riempimenti, font, stile, allineamento…..

Lezione 4

Fare un passo in avanti e introdurre i concetti di ID e classe. Non è il caso in questa fase di introdurre selettori particolari, piuttosto è importante far capire quando si usa ID e quando una classe. Esempi possibili possono essere:

  • righe a colori alternati per una TABLE
  • paragrafi <p> formattati in modo differente a seconda della classe di appartenenza
  • <IMG> con allineamento a destra, sinistra e centro, gestito con tre classi diverse
  • uso di ID per posizionare in modo preciso determinati elementi (molto utile per introdure il layout a colonne)

Lezione 5-6

In laboratorio, lezione dimostrazione e applicazione autonoma dei singoli concetti. Usare i CSS per abbellire decisamente la pagina. Si possono realizzare effetti come:

  • link con effetto “pulsante” utilizzando le pseudo-classi hover, active……
  • Capolettera elegante, con “first-letter”
  • testi che appaiono e scompaiono al passaggio del mouse con “display”
Inoltre va introdotto il concetto di layout complesso, introducendo il DIV. A seconda di come reagisce la classe si possono proporre semplici layout a due colonne di dimensione esplicitamente fissata oppure layout più articolati e fluidi.

Lezione 7

Lezione frontale con videoproiettore: far vedere come i CSS possano applicarsi “a cascata” e come possano essere controllate le proprietà di un elemento, ad esempio utilizzando browser evoluti come Firefox e Chrome. Ripasso delle lezioni precedenti per chiarire eventuali dubbi rimasti

Lezione 8-9

Verifica finale, in laboratorio: far realizzare un piccolo sito (3 o 4 paginette) che utilizzi i CSS esterni per la propria grafica. Lasciarli liberi di connettersi ad Internet per vedere la sintassi corretta, in questa verifica è importante valutare la capacità di usare consapevolmente i CSS per presentare opportunamente il contenuto del sito

Unità 3) Settimane n° 7 – 8: Internet: la struttura del web e i linguaggi di scritpting -1

Per questa unità disponiamo di 6 ore.

In questa prima parte ci si concentra sulla pagina web come contenitore strutturato per i nostri futuri programmi.

Lezione 1

Lezione frontale con videoproiettore.  Obiettivo: Imparare come è strutturata una pagina web statica

Contenuti:

  1. Cosa è una pagina web e cosa è HTML. Presentare link a siti da cui imparare (esempio: http://www.mrwebmaster.it/html/guide/guida-html/) e far vedere come si utilizza l’editor
  2. Aprire l’editor e far vedere come realizzare una semplice pagina web. Aprire la pagina con Browser e illustrare il procedimento per modificare e rivedere la pagina modificata
  3. Concetto di TAG. Uso dei tag fondamentali. Illustrare HTML, HEAD, BODY, P, Hn
  4. Approfittare del momento in cui si deve salvare la pagina sul computer per introdurre il concetto di “path”

Lezione 2

Lezione frontale con videoproiettore.  Obiettivo: Imparare come è strutturato un semplice sito statico

Contenuti:

  1. Altri tag: liste ordinate e non ordinate, B, U, I
  2. Introdurre il concetto di link. Presentare il tag A
  3. Introdurre il concetto di sito, esemplificando con tre piccole pagine create allo scopo

Lezione 3

Lezione frontale con videoproiettore.  Obiettivo: completare la pagina web introducendo le immagini
Contenuti
  1. Riprendere il concetto di percorso, introdurre la differenza fra path assoluto e path relativo, spiegare l’importanza di utilizzare path relativi
  2. Presentare il tag IMG, spiegare come fare riferimento ad immagini

Lezione 4 e 5

Lezione di laboratorio. Obiettivo: applicare i concetti appresi
Assegnare agli studenti una semplice consegna che implichi la realizzazione di tre o quattro paginette semplici, correttamente collegate fra loro, e che contengano tutti gli elementi html sin qui visti. Questa lezione rappresenta un primo momento di verifica formativa.

Lezione 6

Lezione frontale con videoproiettore. Obiettivo: arricchimento delle conoscenze

Contenuti

  1. presentare i principali attributi per i tag sin qui visti (es: immagine di background, dimensioni delle immagini, etc etc….. senza insistere eccessivamente sugli attributi di formattazione in quanto saranno sostituiti dai CSS, insistendo invece su attributi specifici, esempio ALT e TARGET nel tag A

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”

Insegnare a programmare a 14enni con il Javascript. – 1 – Premesse didattiche

Mi rivolgo ai colleghi dei bienni delle scuole superiori che insegnano informatica e i cui studenti iniziano a muovere i primi passi nel mondo della programmazione.
Tradizionalmente far avvicinare uno studente alla programmazione è una impresa che riesce facile se lo studente è molto motivato, sin da piccolo ha sempre giocato con le costruzioni o il meccano, è cresciuto in campagna ed è abituato a costruirsi i giocattoli da solo con pezzi di legno ed elastici riciclati oppure se da piccolo si faceva sempre cacciar via in malo modo perché chiedeva agli adulti il perché di ogni cosa e poi metteva in discussione la plausibilità delle risposte date. Continua a leggere “Insegnare a programmare a 14enni con il Javascript. – 1 – Premesse didattiche”