Informatica · 4a Liceo

Idee di apprendimento attivo

Introduzione allo Scripting Lato Client

JavaScript è il linguaggio che trasforma pagine statiche in applicazioni interattive. In questo modulo, gli studenti imparano a manipolare il Document Object Model (DOM), ovvero la rappresentazione ad albero della pagina HTML, per cambiare contenuti, stili e strutture in risposta alle azioni dell'utente. La gestione degli eventi (click, invio form, passaggi del mouse) è il cuore della programmazione lato client.

• Traguardi per lo Sviluppo delle Competenze
• Indicazioni Nazionali per i Licei, Informatica (Liceo Scientifico opzione Scienze Applicate), Secondo biennio: Programmazione lato client
• Indicazioni Nazionali per i Licei, Informatica (Liceo Scientifico opzione Scienze Applicate), Secondo biennio: Sviluppo di applicazioni web

• 40–90 min
• Coppie → Intera classe
• 3 attività

Attività 01

• Circolo di indagine
• 45 min · Coppie

Circolo di indagine: Il DOM Explorer

In coppie, gli studenti devono usare la console del browser per modificare 'dal vivo' un sito web esistente, cambiando testi, colori e nascondendo elementi, per capire come JavaScript vede la struttura della pagina.

Come si integra e si esegue codice JavaScript in una pagina HTML?

• Analizzare
• Valutare
• Creare
• Autogestione
• Autoconsapevolezza

Attività 02

• Simulazione
• 40 min · Intera classe

Simulazione: La catena degli eventi

Assegna a diversi studenti il ruolo di 'Elementi HTML' e a uno il ruolo di 'Event Listener'. Quando succede qualcosa (es. un tocco), l'elemento deve 'scatenare' l'evento e il listener deve eseguire un'azione predefinita, simulando il bubbling degli eventi.

Cos'è il DOM e quali metodi si usano per modificarlo dinamicamente?

• Applicare
• Analizzare
• Valutare
• Creare
• Consapevolezza Sociale
• Processo Decisionale

Attività 03

• Circolo di indagine
• 90 min · Piccoli gruppi

Circolo di indagine: Crea la tua To-Do List

I gruppi devono sviluppare una semplice lista di compiti dove l'utente può aggiungere e rimuovere elementi. Devono gestire la creazione dinamica di nodi nel DOM e l'ascolto dei click sui pulsanti di cancellazione.

Come si intercettano e si gestiscono le azioni dell'utente, come il click di un pulsante?

• Analizzare
• Valutare
• Creare
• Autogestione
• Autoconsapevolezza

Alcune note per insegnare questa unità

---

Attenzione a questi errori comuni

• Confondere Java con JavaScript.

  È l'errore più comune. Bisogna chiarire che hanno scopi, sintassi e filosofie diverse: Java è per applicazioni general-purpose e lato server, JavaScript è nato per il browser (anche se ora è ovunque).

• Pensare che JavaScript possa accedere ai file sul computer dell'utente.

  Per motivi di sicurezza, JS nel browser vive in una 'sandbox'. Attraverso esperimenti falliti di lettura file, gli studenti comprendono i limiti di sicurezza necessari per proteggere la privacy degli utenti.

---

Metodologie usate in questo brief

• Circolo di indagine
• Simulazione