Lezione 1 – JavaScript

Cos’è JavaScript e Setup Ambiente

Scopri cos’è JavaScript, dove si usa e come configurare il tuo ambiente di sviluppo

🌟 Cos’è JavaScript?

JavaScript è un linguaggio di programmazione che funziona sia
lato client (nel browser) che lato server (con Node.js).
È il linguaggio principale per rendere interattive le pagine web e creare applicazioni dinamiche.

💡 Perché JavaScript è Così Importante?

JavaScript è l’unico linguaggio di programmazione che funziona nativamente
in tutti i browser moderni. Insieme a HTML e CSS, forma la triade fondamentale
dello sviluppo web. Ma non solo: con Node.js puoi usarlo anche per creare server, API,
applicazioni desktop e mobile!

🎯 La Triade del Web

HTML

Struttura della pagina
(lo scheletro)

CSS

Stile e design
(il vestito)

JavaScript

Interattività e logica
(il cervello)

🚀 Principali Ambiti di Utilizzo

Sviluppo Web Frontend

Crea siti web dinamici e interattivi che rispondono alle azioni dell’utente.

Esempio: Messaggio Semplice

// Mostra un messaggio nella console
console.log("Benvenuto nel mio sito!");

// Mostra un numero
console.log(42);

🌐 Framework Popolari

React – Libreria di Facebook per UI
Vue.js – Framework progressivo e facile
Angular – Framework completo di Google

Applicazioni Mobile

Sviluppa app mobile ibride per iOS e Android con un solo codice.

📱 Framework Mobile

React Native – App native con React
Ionic – App ibride con web tech
NativeScript – App native con JS/TS

Applicazioni Desktop

Crea app desktop cross-platform con Electron.

💡 App Famose con Electron

Visual Studio Code, Slack, Discord,
Spotify (client desktop) sono tutte costruite con Electron,
che usa JavaScript, HTML e CSS!

Backend e Server

Con Node.js puoi anche creare server e API, ma questo è un argomento avanzato che vedremo più avanti nel corso!

✨ Riepilogo: JavaScript È Ovunque!

✅ Browser: Siti web interattivi
✅ Server: Backend con Node.js
✅ Mobile: App iOS e Android
✅ Desktop: App Windows, Mac, Linux
✅ IoT: Dispositivi connessi
✅ Game Dev: Giochi 2D/3D con librerie

⚙️ Setup Ambiente di Sviluppo

Per iniziare a programmare in JavaScript, hai bisogno di pochissimo:
un browser e un editor di testo!
Opzionalmente, installa Node.js per eseguire JavaScript fuori dal browser.

1️⃣ Installazione Node.js (Opzionale ma Consigliato)

💡 Cos’è Node.js?

Node.js permette di eseguire JavaScript anche fuori dal browser.
Per questo corso useremo principalmente il browser, ma è utile installarlo
perché alcuni strumenti di sviluppo lo richiedono. L’installazione è veloce e semplice!

Download Node.js

Scarica la versione LTS (Long Term Support) consigliata.

Link Download

🔗 Visita: https://nodejs.org

Scarica la versione LTS (esempio: v20.11.0 LTS)
Non la versione "Current" (per sviluppatori esperti)

Installazione

Segui la procedura guidata (Next, Next, Finish).

✅ Opzioni da Spuntare

✅ Automatically install necessary tools (consigliato)
✅ Add to PATH (fondamentale!)

Verifica Installazione

Apri il terminale e verifica che Node.js sia installato correttamente.

Comandi Verifica

# Verifica versione Node.js
node -v
# Output: v20.11.0 (o simile)

# Verifica versione npm (Node Package Manager)
npm -v
# Output: 10.2.4 (o simile)

✅ Se vedi i numeri di versione → Installazione riuscita!

Se ricevi errore “comando non trovato”, riavvia il terminale o il computer.

2️⃣ Scegli un Editor di Testo

Un buon editor rende la programmazione più facile con auto-completamento,
evidenziazione sintassi e debug integrato.

👨‍💻 Visual Studio Code (Consigliato)

Gratuito e open-source
Leggero e veloce
Migliaia di estensioni
Integrazione Git
Debug integrato

🔗 Download: https://code.visualstudio.com

🚀 WebStorm (Professionale)

IDE completo per JavaScript
Refactoring avanzato
Supporto TypeScript
Framework integration
A pagamento (free per studenti)

🔗 Download: https://www.jetbrains.com/webstorm

💡 Consiglio per Principianti

Inizia con Visual Studio Code: è gratuito, popolarissimo e ha tutto
ciò che serve. Installa queste estensioni utili:

✅ ESLint – Trova errori nel codice
✅ Prettier – Formatta il codice automaticamente
✅ Live Server – Server locale per test HTML
✅ JavaScript (ES6) code snippets – Velocizza scrittura

3️⃣ Browser con Developer Tools

Qualsiasi browser moderno va bene, ma alcuni hanno tools migliori per sviluppatori.

Browser	Vantaggi	DevTools
Google Chrome	Standard de facto, veloce, molte estensioni	⭐⭐⭐⭐⭐ Eccellenti
Firefox Developer Edition	Focalizzato su sviluppatori, privacy-friendly	⭐⭐⭐⭐⭐ Ottimi
Microsoft Edge	Basato su Chromium, integrato Windows	⭐⭐⭐⭐ Molto buoni

🔧 Come Aprire Developer Tools

Windows/Linux: Premi F12 o Ctrl + Shift + I
Mac: Premi Cmd + Option + I
Alternativa: Click destro → “Ispeziona” o “Inspect”

🎉 Il Tuo Primo Script JavaScript!

Esistono 3 modi principali per eseguire codice JavaScript nel browser. Vediamoli tutti!

Metodo 1: Console del Browser

Il modo più veloce per testare JavaScript! Perfetto per esperimenti.

Usa la Console del Browser

1. Apri il browser (Chrome, Firefox, Edge)
2. Premi F12 per aprire Developer Tools
3. Vai alla tab "Console"
4. Scrivi questo codice e premi INVIO:

console.log("Ciao Mondo!");

5. Vedrai il messaggio apparire nella console!

Prova Questi Comandi Base

// Mostra un messaggio
console.log("Ciao Mondo!");

// Mostra un numero
console.log(42);

// Mostra il risultato di un calcolo
console.log(5 + 3);

// Mostra più cose insieme
console.log("Il risultato è:", 10);

💡 Cos’è console.log?

console.log() è il comando più usato in JavaScript!
Serve per mostrare messaggi, numeri e risultati nella console del browser.
È utilissimo per capire cosa sta facendo il tuo programma.

alert() – Mostra Popup

// Mostra un popup con un messaggio
alert("Benvenuto!");

// Mostra un numero in un popup
alert(100);

// Mostra il risultato di un calcolo
alert(5 + 3);

// Messaggi diversi
alert("Ciao!");
alert("Questo è JavaScript!");
alert("Funziona!");

🔔 Differenza tra console.log() e alert()

console.log() mostra messaggi nella console (F12) – utile per sviluppatori.
alert() mostra un popup che blocca la pagina – utile per messaggi importanti all’utente.

Consiglio: Usa console.log() per vedere cosa fa il codice durante lo sviluppo,
e alert() quando vuoi mostrare qualcosa direttamente all’utente (es. “Benvenuto!”, “Errore!”, ecc.).

Metodo 2: Script in Pagina HTML

Crea un file HTML e includi JavaScript inline.

index.html – JavaScript Inline

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <title>Il Mio Primo JavaScript</title>
</head>
<body>
    <h1>Benvenuto!</h1>
    
    <!-- JavaScript inline -->
    <script>
        // Mostra messaggi nella console
        console.log("Ciao Mondo!");
        console.log("JavaScript funziona!");
        
        // Mostra popup di benvenuto
        alert("Benvenuto nel mio sito!");
        alert("Questa è la tua prima pagina JavaScript!");
        
        // Mostra risultati di calcoli in popup
        alert("5 + 3 = " + (5 + 3));
        
        // Calcoli nella console
        console.log("5 + 3 =", 5 + 3);
        console.log("10 - 4 =", 10 - 4);
    </script>
</body>
</html>

🔍 Come Testare

Crea un file index.html
Copia il codice sopra
Apri il file con il browser (doppio click)
Premi F12 → Console per vedere i messaggi

Metodo 3: File JavaScript Separato (Best Practice)

Separa HTML e JavaScript per codice più pulito e riutilizzabile.

index.html

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Esterno</title>
</head>
<body>
    <h1>Il Mio Sito</h1>
    
    <!-- Collega file JavaScript esterno -->
    <script src="script.js"></script>
</body>
</html>

script.js

// Il classico "Ciao Mondo!"
console.log("Ciao Mondo!");

// Popup di benvenuto
alert("Ciao! Benvenuto!");
alert("Questo è JavaScript!");

// Alcuni messaggi nella console
console.log("JavaScript caricato correttamente!");
console.log("Benvenuto nel mio sito!");

// Mostra un calcolo in un popup
alert("Il risultato di 5 + 3 è: " + (5 + 3));

// Calcoli matematici base nella console
console.log("Addizione: 5 + 3 =", 5 + 3);
console.log("Sottrazione: 10 - 4 =", 10 - 4);
console.log("Moltiplicazione: 6 * 7 =", 6 * 7);
console.log("Divisione: 20 / 4 =", 20 / 4);

// Alert finale
alert("Script completato!");

🎯 Quale Metodo Usare?

Metodo	Quando Usarlo
Console Browser	Test veloci, esperimenti, imparare i comandi base
HTML Inline	Script molto piccoli, demo rapide, prime prove
File Esterno	Progetti reali, codice riutilizzabile ⭐ CONSIGLIATO per progetti veri

💪 Esercizio Pratico

🎯 Obiettivo: Configura Ambiente e Crea Primo Progetto

Completa questi passaggi:

Setup Ambiente

✅ Installa Node.js dal sito ufficiale
✅ Verifica installazione con node -v
✅ Installa Visual Studio Code
✅ Apri VS Code e familiarizza con l’interfaccia

Primo Progetto Web

✅ Crea cartella primo-progetto
✅ Crea file index.html
✅ Crea file script.js
✅ Collega JavaScript a HTML
✅ Usa console.log() e alert()
✅ Apri con browser e verifica funzionamento

index.html – Soluzione

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Il Mio Primo Progetto JavaScript</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 50px auto;
            padding: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }
        h1 { 
            text-align: center;
            font-size: 2.5em;
        }
        .container {
            background: white;
            color: #333;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
        }
        p {
            font-size: 1.2em;
            line-height: 1.6;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Benvenuto nel Mondo JavaScript!</h1>
        <p>Apri la console del browser (F12) per vedere i messaggi JavaScript!</p>
    </div>
    
    <!-- Collega file JavaScript -->
    <script src="script.js"></script>
</body>
</html>

script.js – Soluzione

// Messaggio di benvenuto
console.log("=== IL MIO PRIMO PROGETTO JAVASCRIPT ===");

// Alert di benvenuto
alert("Benvenuto!");
alert("Questo è il tuo primo progetto JavaScript!");

// Messaggi nella console
console.log("Ciao Mondo!");
console.log("JavaScript caricato correttamente!");

// Informazioni base
console.log("--- INFORMAZIONI ---");
console.log("Benvenuto nel mio sito!");
console.log("Questo è il mio primo script JavaScript!");

// Calcoli matematici base nella console
console.log("--- CALCOLI MATEMATICI ---");
console.log("Addizione: 5 + 3 =", 5 + 3);
console.log("Sottrazione: 10 - 4 =", 10 - 4);
console.log("Moltiplicazione: 6 * 7 =", 6 * 7);
console.log("Divisione: 20 / 4 =", 20 / 4);

// Mostra un risultato in popup
alert("Risultato: 5 + 3 = " + (5 + 3));

// Messaggio finale
console.log("--- FINE SCRIPT ---");
console.log("Complimenti! Hai eseguito il tuo primo script JavaScript!");
alert("Script completato! Controlla la console (F12) per i dettagli!");

🎯 Cosa Abbiamo Imparato

✅ Come usare console.log() per mostrare messaggi nella console
✅ Come usare alert() per mostrare popup all’utente
✅ La differenza tra console e popup
✅ Come fare operazioni matematiche base (+, -, *, /)
✅ Come collegare file JavaScript a HTML
✅ Come organizzare il codice con commenti (//)
✅ Come concatenare testo e numeri con +

🎯 Riepilogo Lezione

Cos’è JavaScript:

Linguaggio per il web
Frontend e Backend
Mobile e Desktop
Interpretato e dinamico

Setup Ambiente:

Node.js (runtime)
VS Code (editor)
Browser (Chrome/Firefox)
Developer Tools (F12)

Esecuzione Codice:

Console browser (F12)
HTML inline (<script>)
File esterno (.js)
Aprire DevTools

Concetti Base:

console.log()
alert()
Operazioni matematiche
Commenti (//)
Tag <script>

← Torna al Corso

📚 Tutte le Lezioni

Sintassi e Variabili →

Lezione 1 del Corso JavaScript Completo

📚 Corso Completo

🏠 Home