Cos'è JavaScript e come si prepara l'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

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

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

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

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

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

2. Installazione

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

✅ Opzioni da Spuntare

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

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

🔧 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!

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

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

1. Crea un file index.html

2. Copia il codice sopra

3. Apri il file con il browser (doppio click)

4. Premi F12 → Console per vedere i messaggi

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

Esercizio Pratico

Obiettivo: Configura Ambiente e Crea Primo Progetto

Completa questi passaggi:

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

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

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

// 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!");

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