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.
Ragazzini così ne esistono pochi, ed è molto probabile che a scuola arrivino dei 14enni cresciuti all’ombra della playstation, sul divano, la cui intelligenza è stata forgiata da programmi come “il grande fratello” e roba del genere. Costoro probabilmente sanno tutto dell’uso di Facebook o dell’ultimo modello di telefonino, per loro i programmi sono qualcosa di magico che si genera automaticamente dentro l’hardware acquistato al supermercato e se non funzionano la soluzione è semplice: formattare e reinstallare Windows.
E’ evidente che io, pur essendo nato e cresciuto con la programmazione a linea di comando, pur considerando il C come la vera lingua universale parlata dall’uomo moderno, mi sono dovuto ben presto rassegnare al fatto che non potevo far avvicinare i miei studenti allo sviluppo del software per mezzo di un tradizionale compilatore a linea di comando e metterli davanti ad uno schermo nero che dice “ciao mondo – premere un tasto per continuare”.
Se è vero, come è vero, che i risultati che un docente riesce a perseguire dipendono non solo dalla sua preparazione nello specifico disciplinare, cosa che, vorrei ben sperare, possiamo dare per scontata, ma dipendono soprattutto dalla capacità che ha di motivare ed appassionare gli studenti, mi sono subito posto una domanda: come faccio a motivare i ragazzi a scrivere a mano del codice, spingerli a cercare gli errori, e farli esultare per i risultati raggiunti?
Alcuni vincoli me li sono posti, ovviamente:

  • restare nell’ambito dell’utilizzo di linguaggi che in qualche modo potessero ricondurmi prima o poi all’insegnare il C e tutti i suoi vari figli e figliastri e comunque nell’ambito di tecnologie dotate di una loro importanza palesemente riconosciuta e nel campo dell’informatica
  • evitare ambienti totalmente visuali che, oltre ad essere troppo dispersivi per un neofita, hanno altresì lo svantaggio di abituarlo a pensare che programmare voglia dire “seleziona il controllo desiderato e trascinalo sulla form”
  • poter raggiungere un risultato che gratifichi gli studenti dello sforzo fatto e che li possa rendere orgogliosi. Quando uno studente va da un suo amico e gli dice, tutto trionfante “guarda, l’ho fatto io”, allora la scommessa è vinta: quello studente andrà lontano.
  • Fargli capire che l’informatica non è solo Microsoft e che si può programmare per tanti sistemi diversi
  • Disporre di strumenti di sviluppo e debugging che consentano di lavorare efficientemente (e in ciò editor a sintassi evidenziata e strumenti di debugging come FireBug o quelli contenuti in Chrome sono più che sufficienti)

Dopo alcuni esperimenti sono approdato ad una conclusione (valida come sicuramente molte altre, ma questa è quella che io ho trovato efficace): si inizia a programmare dalla pagina web che, lato client, diventa un vero e proprio ambiente grafico di programmazione, svincolato dalla piattaforma (si possono fare pagine anche per telefonini o smartphone, oltre che per tutti i sistemi operativi).
Questa affermazione è piuttosto forte: quando la pronuncio, istintivamente, apro subito l’ombrello per proteggermi dai pomodori che molti colleghi mi lanciano dietro.
Vediamo di argomentarla:

  • Lo schema concettuale è il seguente: Le pagine web funzionano all’interno di un browser. Il browser si comporta quindi come un vero interprete. Mi ricordo ancora quando quasi trenta anni fa (1984) mi trovai di fronte all’XT “bifloppy” al quale avevo dimenticato di dare in pasto il dischetto del DOS: mi si avviò con il BasicA contenuto nella ROM, pronto ad eseguire qualsiasi programma gli avessi voluto scrivere….. istruzione per istruzione!!!! Per chi inizia a programmare risulta comodo non doversi preoccupare troppo di dettagli tecnologici e avere qualcosa che gli consente subito di scrivere il programma e provarlo. Un browser è proprio questo.
  • Ogni linguaggio di programmazione ha una suo meccanismo di input-output.
    1. Il C da linea di comando usa le varie printf, scanf, getchar, e via discorrendo. L’output è su un triste sfondo nero…..Per far qualcosa di grafico con il C occorre utilizzare tutta una serie di librerie e programmare con finestre e quant’altro. Difficilissimo, tant’è che i professionisti utilizzano, giustamente, ambienti visuali.
    2. I linguaggi di programmazione visuale hanno meccanismi di I/O molto diversi: si basano su oggetti che raccolgono, tramite alcune loro proprietà, l’input dell’utente e altri oggetti che, sempre tramite proprietà, mostrano all’utente l’output. E’ vero che alla fine gli oggetti sono comunque qualcosa di scritto in un file (era molto bello il Borland Delphi, che ti mostrava sempre tutto il codice che di fatto andavi a scrivere quando programmavi in modo visuale: adesso lo fanno anche gli altri, Delphi lo faceva già nel secolo scorso) ma i nostri studenti questo non lo vedono se iniziano da subito a giocare con VisualBasic.
    3. In una pagina web gli oggetti per l’Input-output ci sono….. tutto il DOM è una grande collezione di oggetti, e alcuni sono veramente facili da utilizzare.
      Ad esempio, una casella di testo utilizzata in un FORM è un vero oggetto, caratterizzato dall’avere la proprietà VALUE, alla quale si può accedere sia in scrittura che in lettura, tante altre proprietà relative ad effetti grafici, di posizionamento. Inoltre, in perfetta coerenza con la programmazione per interfacce grafiche, la casella di testo è sensibile ad eventi (variazione del contenuto, focus, carattere digitato, etc etc….). Agli eventi si possono ovviamente associare dei “gestori di evento”, cioè delle “function”. Il Javascript è il linguaggio per poter sfruttare appieno queste caratteristiche della pagina html. I due aspetti interessanti sono che
      1. anche stupidi programmini iniziali come la somma di due numeri possono trarre beneficio dall’essere inseriti in un contesto graficamente intrigante e “vicino” ai nostri studenti come può essere una pagina html quando è elaborata adeguatamente
      2. non ci sono ambienti visuali per programmare Javascript: il codice che serve bisogna scriverselo a manina!!!!! E questo per chi deve imparare a programmare non è certo un lato negativo.
      3. si possono fare cose carine anche con ragazzi che hanno appena iniziato a programmare, come nei primi due esempi, o ragazzi con un anno di corso alle spalle, come per il memory
        1. calcolo combinatorio
        2. una calcolatrice
        3. una slot machine
        4. il gioco del black jack
        5. il memory
  • Javascript e tutto quello che ci gira intorno non consente di lavorare con i file, e quindi dobbiamo essere consapevoli che prima o poi, quando i nostri studenti avranno ben imparato le tecniche fondamentali della programmazione dovremo fornirgli altri strumenti. Tuttavia Javascript è un linguaggio potente: basti solo pensare alle Google Application, realizzate con tecnologia AJAX, cioè massiccio uso di Javascript. Quindi le cose che si possono fare non sono affatto poche, e sono limitate solo dalla nostra fantasia e conoscenza di questo strumento. Inoltre è una tecnologia che rappresenta un pilastro per l’informatica legata al web, così come lo è il PHP per la parte lato server. Lo studente che impara a padroneggiare queste tecnologie si trova la strada aperta per una carriera nell’ambito della programmazione per il web
  • HTML e CSS rappresentano la cornice in cui si svolge la programmazione Javascript: servono agli studenti sia per avvicinarli al concetto di “scrittura manuale di un codice” che per rendere belle e accattivanti le pagine che contengono i loro programmini Javascript: lo stesso “ciao mondo” fatto da due studenti diversi potrà avere aspetto e impatto grafico differente, e questo aiuta molto nella genesi della “motivazione”.

Per procedere operativamente, e considerando il tempo scuola che ci viene proposto dalla riforma attuale degli Istituti tecnici ad indirizzo informatico, vediamo come può inserirsi tutto questo nell’arco del quinquennio. Qui propongo lo schema che utilizzo io (mi soffermo solo sulla parte “programmazione”), e ovviamente non è una ricetta obbligatoria, però a me funziona e gli effetti sui miei studenti sono positivi.

  • Biennio: primi passi nella programmazione
    • Classe prima
      • Algoritmi: diagrammi a blocchi o linguaggio di progetto, anche se con i ragazzini funzionano meglio i diagrammi a blocchi, purchè stiamo attenti a non insegnare la “GOTO-programming”
      • HTML e CSS: quanto basta per metterli in grado di creare due o tre pagine carine, linkate insieme e in grado di ospitare le loro funzioni Javascript
      • Javascript: e con questo ci facciamo dapprima una programmazione “quasi imperativa”, per poi arrivare ad una visione più ampia del DOM (o addirittura del BOM se qualcuno vuole divertirsi a giocare con il Browser). Possiamo fare i classici programmini su vettori, matrici, ricerche, ordinamenti, usare le funzioni, parlare di visibilità delle variabili, tipi di dati, librerie…..
    • Classe seconda
      • Primi passi per una programmazione orientata agli oggetti. Pur non essendo un vero linguaggio totalmente ad oggetti, consente di crearsi delle classi e di usare sia i propri oggetti che quelli predefiniti o definiti in librerie esterne. C’è molto più di quanto si riesca realisticamente a fare in un corso iniziale di programmazione.
      • Utilizzo più sofisticato degli eventi e accesso anche agli altri oggetti presenti nel DOM. In questo caso diventa utilissima l’interazione fra CSS e DOM che consente, ad esempio di ottenere effetti su titoli, coordinate del mouse ed altre cose del genere
  • Triennio: completare la conoscenza nella programmazione, sia ad oggetti che imperativa, acquisendo una solida conoscenza di C, come base generale nella formazione di uno studente (ad esempio io utilizzo tantissimo il C per insegnare ad usare i file e per la gestione della memoria dinamica, ma anche, quando insegno Sistemi, per la programmazione dei microcontrollori) e poi completare la conoscenza dei linguaggi per il web introducendo il PHP per realizzare applicazioni client-server con uso di dbms.

Come si continua? Intenderei presentare dapprima (nelle prossime puntate) una scansione settimanale degli argomenti che dovremmo insegnare nel bennio, per concentrarmi poi su una sequenza di esercizi didattici, graduati, abbinati ad una ideale scaletta di lezione, in mod da far vedere come si possano raggiungere gli obiettivi previsti nelle linee guida della recente riforma.

Faccio tutto questo con la speranza che altri colleghi commentino quanto proposto in modo da arricchire con altri consigli ed esperienze questo materiale. Dalla condivisione delle nostre professionalità può sicuramente venirne fuori qualcosa di buono. Per evitare “casini” i commenti su questo sito devono essere (solo in occasione del primo commento proposto, poi non c’è n’è più bisogno) prima approvati da me, cosa che farò senza alcun indugio quando mi renderò conto di trovarmi di fronte a colleghi o persone che vogliono proporre consigli e critiche con spirito collaborativo. Insulti e amenità del genere non sono gradite.

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