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
-
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"
Commenti
Posta un commento