giovedì 2 ottobre 2025

Corso di JavaScript & Programmazione Web: 1 – Introduzione a JavaScript

1. Introduzione a JavaScript

1 — Cos’è JavaScript e dove si usa

JavaScript è il linguaggio di programmazione che gira nei browser e rende le pagine web interattive: rispondere a click, modificare contenuti, chiamare servizi remoti, animare elementi. Oggi si usa anche lato server (Node.js), in app mobile / desktop (Electron, React Native) e in ambienti IoT, ma qui ci concentriamo sull’uso nel browser.

Punti chiave:

Linguaggio interpretato dal browser (Chrome, Firefox, Safari, Edge).
Manipola il DOM (Document Object Model) per cambiare la pagina al volo.
Asincrono per natura (callback, Promise, async/await).
Standard attuale: ES6+ (let/const, arrow functions, modules).

2 — Come inserire JavaScript in una pagina HTML

Esistono tre modalità principali:

A — Inline (NON consigliato per codice esteso)

<!doctype html>
<html>
  <body>
    <button onclick="alert('Ciao!')">Click</button>
  </body>
</html>

Pratico per test, poco manutenibile.

B — Internal (all'interno di nella pagina)

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Internal JS</title>
  </head>
  <body>
    <script>
      console.log('Script eseguito dall\'internal <script>');
    </script>
  </body>
</html>

C — External (file .js separato — miglior pratica)

index.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>External JS</title>
  </head>
  <body>
    <script src="app.js" defer></script>
  </body>
</html>

app.js

console.log('Script esterno con defer');

Nota su defer: con defer lo script viene scaricato subito ma eseguito dopo che il DOM è pronto — comodo e sicuro. In alternativa puoi mettere lo script prima di </body>.

3 — Console del browser e strumenti di sviluppo (DevTools)

Come aprire la console

Chrome / Edge: Ctrl+Shift+I (Windows) o Cmd+Opt+I (Mac), poi tab Console. Oppure F12.
Firefox: Ctrl+Shift+K / Cmd+Opt+K.
Safari: attiva gli strumenti in Preferences → Advanced → Show Develop menu, poi Cmd+Opt+C.

Cose utili da DevTools

Console: vedi console.log, errori JS, esegui espressioni live.
Elements / DOM: ispeziona struttura HTML, modifica al volo.
Sources: vedi file JS, imposta breakpoint (debugger).
Network: verifica richieste HTTP e tempi.
Performance & Memory: profiling avanzato.

Metodi della console utili

console.log('info');
console.info('info');
console.warn('attenzione');
console.error('errore');
console.table([{name:'Anna', age:20},{name:'Luca', age:30}]);
console.dir(document.body); // esplora oggetto come oggetto

4 — Esercizio pratico: stampare un messaggio nella console e sulla pagina

Ti do tre soluzioni: la più semplice (inline), quella raccomandata (external + defer), e una che usa DOMContentLoaded (per sicurezza).

4.1 Esempio rapido — Inline (solo per prova)

Crea inline.html e aprilo nel browser:

<!doctype html>
<html>
  <head><meta charset="utf-8"/><title>Inline JS</title></head>
  <body>
    <h1 id="titolo">Titolo pagina</h1>
    <script>
      console.log('Ciao console! (inline)');
      document.getElementById('titolo').textContent = 'Ciao dalla pagina (inline)';
    </script>
  </body>
</html>

Apri DevTools → Console: vedrai il messaggio. La pagina mostra testo modificato.

4.2 Esempio raccomandato — External + defer

Crea index.html:

<!doctype html>
<html>
  <head><meta charset="utf-8"/><title>External JS</title></head>
  <body>
    <h1 id="titolo">Titolo originale</h1>
    <button id="btn">Cliccami</button>
    <script src="app.js" defer></script>
  </body>
</html>

Crea app.js nello stesso folder:

console.log('App.js caricato con defer');
const el = document.getElementById('titolo');
el.textContent = 'Messaggio stampato sulla pagina da app.js';
const btn = document.getElementById('btn');
btn.addEventListener('click', () => {
  console.log('Hai cliccato il bottone!');
  alert('Ciao! Hai cliccato il bottone.');
});

Apri index.html nel browser. Risultati:

Console: App.js caricato con defer
Pagina: titolo aggiornato
Clic sul bottone: log in console + alert

4.3 Esempio con `DOMContentLoaded` (quando non usi `defer`)

index-no-defer.html

<!doctype html>
<html>
  <head><meta charset="utf-8"/><title>No Defer</title></head>
  <body>
    <h1 id="titolo">Titolo orig</h1>
    <script>
      document.addEventListener('DOMContentLoaded', () => {
        console.log('DOM pronto (DOMContentLoaded)');
        document.getElementById('titolo').textContent = 'Aggiornato dopo DOMContentLoaded';
      });
    </script>
  </body>
</html>

Questo assicura che il DOM sia pronto prima di accedere agli elementi.

5 — Spiegazioni pratiche veloci (concetti essenziali)

Variabili

var a = 1;      // vecchio, evita per nuovi progetti
let b = 2;      // variabile mutabile (scope di blocco)
const c = 3;    // costante (non riassegnabile)

Tipi comuni

number, string, boolean, null, undefined, object, array (Array), function.

Funzioni

function saluta(name) {
  return `Ciao ${name}!`;
}
const saluta2 = (name) => `Ciao ${name}!`; // arrow function

Manipolazione semplice del DOM

const p = document.createElement('p');
p.textContent = 'Paragrafo aggiunto dinamicamente';
document.body.appendChild(p);

Debugging veloce

Se nulla accade: apri Console → vedi errori (red).
Tipico errore: document.getElementById(...) is null → script eseguito prima che l’elemento esista → usa defer o DOMContentLoaded.
Errori di sintassi (typos): la console indicherà riga e file.

6 — Best practices minime (per partire bene)

Metti il codice JS in file separati (.js) e usa defer o module quando appropriato.
Preferisci let e const a var.
Evita document.write() (non adatto a pagine moderne).
Usa console.* per debug; rimuovi i log inutili in produzione o usa livelli di log.
Organizza codice in funzioni piccole e nominative.
Se lavori con moduli, type="module" abilita import/export e script sono in strict mode di default.

7 — Esercizi pratici con soluzioni (da svolgere in laboratorio)

Esercizio 1 — Console + Page (base)

Obiettivo: stampare “Benvenuto, [tuo nome]” in console e inserire lo stesso messaggio in un elemento <div id="welcome">...</div>.

Istruzioni:

Crea welcome.html con <div id="welcome"></div> e importa welcome.js con defer.
In welcome.js, definisci const name = 'TuoNome' e stampa console.log.
Imposta document.getElementById('welcome').textContent = ....

Soluzione (welcome.js):

const name = 'Marco';
const msg = `Benvenuto, ${name}!`;
console.log(msg);
document.getElementById('welcome').textContent = msg;

Esercizio 2 — Interattività (intermedio)

Obiettivo: costruire una piccola app che chiede il nome via prompt, mostra il saluto nella pagina e aggiunge in console la lunghezza del nome.

Soluzione rapida:

const name = prompt('Come ti chiami?') || 'amico';
const el = document.getElementById('greeting');
el.textContent = `Ciao ${name}, piacere!`;
console.log('Lunghezza nome:', name.length);

Esercizio 3 — Bottone e listener (avanzato)

Obiettivo: crea un bottone che al click cambia il colore di sfondo della pagina e registra l’evento con console.table (timestamp, colore).

Soluzione rapida:

const btn = document.getElementById('colorBtn');
btn.addEventListener('click', () => {
  const color = '#' + Math.floor(Math.random()*16777215).toString(16);
  document.body.style.backgroundColor = color;
  console.table([{time: new Date().toISOString(), color}]);
});

8 — Test di autovalutazione (con risposte)

Come stampi un messaggio nella console del browser?
Risposta: console.log('test');
Quale attributo aggiungi al tag <script> per essere sicuro che il DOM sia caricato prima dell'esecuzione?
Risposta: defer (oppure usare DOMContentLoaded).
Come cambio il contenuto testuale di un elemento con id titolo?
Risposta: document.getElementById('titolo').textContent = 'Nuovo testo';
Perché è meglio mettere il codice JS in file esterni?
Risposta: migliore manutenibilità, caching del browser, separazione contenuto/logica (best practice).
Come apri gli strumenti di sviluppo in Chrome?
Risposta: Ctrl+Shift+I o F12 (Windows), Cmd+Opt+I (Mac).

9 — Errori comuni e come risolverli (pratico)

Uncaught TypeError: Cannot read property 'textContent' of null → elemento non trovato: controlla id, ordina script con defer o usa DOMContentLoaded.
ReferenceError: x is not defined → variabile non dichiarata o errore di scope; controlla nomi.
Nessun messaggio in console → verifica che il file .js sia collegato correttamente (path relativo) e apri DevTools → Network per vedere se file caricato.
SyntaxError (riga X) → errore di sintassi (virgole, parentesi, template string backticks).

10 — Piccola checklist "prima di eseguire"

index.html e app.js nello stesso folder (o path corretti).
<script src="app.js" defer></script> presente.
Apri la pagina con un browser moderno (Chrome/Firefox).
Apri DevTools → Console per vedere messaggi ed errori.
Se non funziona, controlla Network → 404 sul file .js → path sbagliato.

11 — Risorse consigliate per continuare

MDN Web Docs — JavaScript: https://developer.mozilla.org/ (ottimo per esempi e reference).
“Eloquent JavaScript” di Marijn Haverbeke (gratuito online).
Console API: https://developer.mozilla.org/en-US/docs/Web/API/Console

Conclusione motivante 🎯

In questo modulo hai imparato le basi pratiche per mettere JavaScript in esecuzione sul tuo browser: come inserirlo, come vedere cosa succede nella console, come manipolare il contenuto della pagina e come creare interazioni semplici. Hai gli strumenti per passare dal “funziona” al “funziona bene”: codice esterno, defer, gestione del DOM e debugging con DevTools. Ora prova gli esercizi, rompi qualcosa (tranquillo: fa parte del gioco) e risolvi gli errori: è così che si impara davvero. Vuoi che ti prepari i file index.html + app.js già pronti da scaricare ed eseguire?

SILICIO E NUVOLE

giovedì 2 ottobre 2025

Corso di JavaScript & Programmazione Web: 1 – Introduzione a JavaScript

1. Introduzione a JavaScript

1 — Cos’è JavaScript e dove si usa

2 — Come inserire JavaScript in una pagina HTML

A — Inline (NON consigliato per codice esteso)

B — Internal (all'interno di nella pagina)

C — External (file .js separato — miglior pratica)

3 — Console del browser e strumenti di sviluppo (DevTools)

Come aprire la console

Cose utili da DevTools

Metodi della console utili

4 — Esercizio pratico: stampare un messaggio nella console e sulla pagina

4.1 Esempio rapido — Inline (solo per prova)

4.2 Esempio raccomandato — External + defer

4.3 Esempio con `DOMContentLoaded` (quando non usi `defer`)

5 — Spiegazioni pratiche veloci (concetti essenziali)

Variabili

Tipi comuni

Funzioni

Manipolazione semplice del DOM

Debugging veloce

6 — Best practices minime (per partire bene)

7 — Esercizi pratici con soluzioni (da svolgere in laboratorio)

Esercizio 1 — Console + Page (base)

Esercizio 2 — Interattività (intermedio)

Esercizio 3 — Bottone e listener (avanzato)

8 — Test di autovalutazione (con risposte)

9 — Errori comuni e come risolverli (pratico)

10 — Piccola checklist "prima di eseguire"

11 — Risorse consigliate per continuare

Conclusione motivante 🎯

Nessun commento:

Posta un commento

Corso Fondamenti di Informatica e Reti: 6 Reti di computer e Internet

Segnala una violazione

Etichette

giovedì 2 ottobre 2025

Corso di JavaScript & Programmazione Web: 1 – Introduzione a JavaScript

1. Introduzione a JavaScript

1 — Cos’è JavaScript e dove si usa

2 — Come inserire JavaScript in una pagina HTML

A — Inline (NON consigliato per codice esteso)

B — Internal (all'interno di nella pagina)

C — External (file .js separato — miglior pratica)

3 — Console del browser e strumenti di sviluppo (DevTools)

Come aprire la console

Cose utili da DevTools

Metodi della console utili

4 — Esercizio pratico: stampare un messaggio nella console e sulla pagina

4.1 Esempio rapido — Inline (solo per prova)

4.2 Esempio raccomandato — External + defer

4.3 Esempio con DOMContentLoaded (quando non usi defer)

5 — Spiegazioni pratiche veloci (concetti essenziali)

Variabili

Tipi comuni

Funzioni

Manipolazione semplice del DOM

Debugging veloce

6 — Best practices minime (per partire bene)

7 — Esercizi pratici con soluzioni (da svolgere in laboratorio)

Esercizio 1 — Console + Page (base)

Esercizio 2 — Interattività (intermedio)

Esercizio 3 — Bottone e listener (avanzato)

8 — Test di autovalutazione (con risposte)

9 — Errori comuni e come risolverli (pratico)

10 — Piccola checklist "prima di eseguire"

11 — Risorse consigliate per continuare

Conclusione motivante 🎯

Nessun commento:

Posta un commento

Corso Fondamenti di Informatica e Reti: 6 Reti di computer e Internet

4.3 Esempio con `DOMContentLoaded` (quando non usi `defer`)