Javascript da zer0, le basi.

Rispondi
Avatar utente
Utente0 Verified
Site Admin
Messaggi: 54
Iscritto il: sabato 23 novembre 2024, 22:07

Javascript da zer0, le basi.

Messaggio da Utente0 Verified »

Ecco una guida estremamente dettagliata per chi non ha mai scritto una riga di codice e vuole iniziare a imparare JavaScript da zero, anche senza alcuna conoscenza tecnica. Ti guiderò come se fosse la tua prima esperienza con la programmazione.

Che cos'è JavaScript?
JavaScript è un linguaggio che permette di aggiungere interattività alle pagine web. Ad esempio, puoi usarlo per:
Far apparire un messaggio quando clicchi un bottone.
Cambiare il colore del testo in una pagina.
Creare giochi o animazioni semplici.
Nota: Non confondere JavaScript con Java, sono due linguaggi diversi!

Cosa ti serve per iniziare?
Per cominciare a scrivere codice JavaScript ti servono:
Un browser web: Come Google Chrome, Firefox o Edge. Tutti supportano JavaScript.
Un editor di testo: Puoi iniziare con Blocco note, ma per un'esperienza migliore ti consiglio Visual Studio Code.

Come eseguire JavaScript?

Metodo 1: Direttamente nel browser
Apri il tuo browser.
Premi F12 sulla tastiera (o fai clic destro sulla pagina e seleziona "Ispeziona").
Vai alla scheda Console.
Scrivi questo comando:

Codice: Seleziona tutto

console.log("Ciao, mondo!");
Premendo Invio, vedrai apparire "Ciao, mondo!" nella console.

Metodo 2: Inserendolo in un file HTML
Crea un file sul tuo computer chiamato primo_script.html.
Aprilo con un editor di testo e incolla questo codice:

Codice: Seleziona tutto

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <title>Primo Script</title>
</head>
<body>
    <h1 id="titolo">Benvenuto al tuo primo script!</h1>
    <button onclick="saluta()">Cliccami!</button>
    <script>
        function saluta() {
            alert("Ciao! Questo è JavaScript!");
        }
    </script>
</body>
</html>
Salva il file e aprilo con il tuo browser.
Risultato: Quando clicchi il bottone, appare un messaggio di saluto.
Primi concetti fondamentali

1. Le Variabili
Le variabili servono per memorizzare informazioni che vuoi usare nel tuo programma. Pensa alle variabili come a scatole in cui puoi mettere qualsiasi cosa: numeri, parole, o liste.
Esempio:

Codice: Seleziona tutto

let nome = "Luca"; // Sto creando una variabile chiamata "nome" con il valore "Luca"
let età = 25;      // Variabile numerica
console.log(nome); // Questo comando mostrerà "Luca" nella console
Cosa significa "let"?
È una parola chiave per dire al computer: "Crea una nuova variabile".

2. Tipi di dati
JavaScript può lavorare con diversi tipi di dati. I più comuni sono:

Stringhe: Testo racchiuso tra virgolette.
Esempio: "Ciao" o 'Benvenuto'.
Numeri: Qualsiasi numero, intero o decimale.
Esempio: 42, 3.14.
Booleani: Valori logici che possono essere solo true (vero) o false (falso).
Esempio:

Codice: Seleziona tutto

let isOnline = true;
console.log(isOnline); // Mostra "true"
3. Operatori di base
Gli operatori servono per eseguire operazioni matematiche o logiche.
Operatori matematici:

Codice: Seleziona tutto

let x = 10;
let y = 5;

console.log(x + y); // 15 (somma)
console.log(x - y); // 5 (sottrazione)
console.log(x * y); // 50 (moltiplicazione)
console.log(x / y); // 2 (divisione)
Operatori di confronto:

Codice: Seleziona tutto

let a = 10;
let b = 20;

console.log(a > b);  // false (10 non è maggiore di 20)
console.log(a < b);  // true  (10 è minore di 20)
console.log(a == b); // false (10 non è uguale a 20)
4. Funzioni
Le funzioni sono blocchi di codice che puoi riutilizzare. Per esempio, se vuoi salutare più volte:

Codice: Seleziona tutto

function saluta(nome) {
    console.log("Ciao, " + nome + "!");
}

saluta("Marco"); // Mostra: "Ciao, Marco!"
saluta("Lucia"); // Mostra: "Ciao, Lucia!"
Nota: Le funzioni accettano parametri (in questo caso nome), che sono come "input" da usare nel loro interno.

5. Condizioni (if/else)
Il codice può prendere decisioni usando le condizioni.
Esempio:

Codice: Seleziona tutto

let età = 18;

if (età >= 18) {
    console.log("Sei maggiorenne.");
} else {
    console.log("Sei minorenne.");
}
6. Cicli
I cicli ti permettono di ripetere un'azione più volte.

Ciclo for:

Codice: Seleziona tutto

for (let i = 0; i < 5; i++) {
    console.log("Numero: " + i);
}
Ciclo while:

Codice: Seleziona tutto

let i = 0;
while (i < 5) {
    console.log("Numero: " + i);
    i++;
}
7. Interagire con il DOM
Il DOM è la rappresentazione della struttura HTML di una pagina. Con JavaScript puoi modificarlo!

Cambiare il contenuto di un elemento:

Codice: Seleziona tutto

<!DOCTYPE html>
<html>
<body>
    <p id="testo">Questo è un testo.</p>
    <button onclick="modificaTesto()">Clicca qui</button>
    <script>
        function modificaTesto() {
            document.getElementById("testo").innerHTML = "Testo cambiato!";
        }
    </script>
</body>
</html>
Quando clicchi il bottone, il testo del paragrafo cambia.

Esercizio pratico

Prova a creare un file HTML che:


Contiene un campo di testo e un bottone.
Quando premi il bottone, JavaScript legge il testo e lo mostra come messaggio.
Esempio:

Codice: Seleziona tutto

<!DOCTYPE html>
<html>
<body>
    <input type="text" id="input" placeholder="Scrivi qualcosa">
    <button onclick="mostraTesto()">Mostra Testo</button>
    <script>
        function mostraTesto() {
            let testo = document.getElementById("input").value;
            alert("Hai scritto: " + testo);
        }
    </script>
</body>
</html>
Conclusione

Ora hai le basi per iniziare con JavaScript! 🎉 Prova a sperimentare e risolvi piccoli problemi per migliorare. Ricorda: il segreto è la pratica costante. 🚀
Lorenzo|Utente0
Rispondi