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

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...