Anteprima
Se HTML e CSS si occupano rispettivamente di struttura e aspetto di una pagina web, è JavaScript che le dà vita. Con un compilatore JavaScript online puoi scrivere il tuo codice, eseguirlo immediatamente e vedere i risultati nell'anteprima, tutto nello stesso posto, senza installare nulla e senza configurare alcun ambiente di sviluppo.
L'editor JavaScript di Biadets è gratuito e pensato per funzionare in modo fluido sia per chi muove i primissimi passi nella programmazione, sia per chi ha già esperienza e vuole uno strumento rapido per testare un'idea o isolare un problema.
JavaScript è il linguaggio di programmazione del web. A differenza di HTML e CSS, che descrivono rispettivamente la struttura e l'aspetto di una pagina, JavaScript introduce la logica: gestisce le interazioni dell'utente, modifica il contenuto della pagina in tempo reale, comunica con server esterni e controlla il comportamento di ogni elemento visibile e non.
Ogni volta che compili un modulo e vedi un messaggio di errore senza ricaricare la pagina, o che un menu si apre con un'animazione al click, o che una lista di risultati si aggiorna mentre digiti in una barra di ricerca, c'è JavaScript dietro. È il linguaggio che ha reso possibile il web moderno così come lo conosciamo oggi.
Una cosa che lo distingue dagli altri linguaggi è che viene eseguito direttamente nel browser, senza bisogno di un server o di una fase di compilazione separata. Scrivi il codice JavaScript, il browser lo interpreta e lo esegue: il ciclo è immediato, il che lo rende uno dei linguaggi più adatti per imparare a programmare in modo pratico e visivo.
L'interfaccia è organizzata con l'editor a sinistra e l'anteprima della pagina a destra. In cima trovi le tre tab del progetto: index.html, style.css e script.js. Cliccando su script.js accedi all'editor JavaScript, dove puoi scrivere tutto il codice che vuoi.
Il file HTML include già un riferimento al file JavaScript tramite il tag <script src="script.js"></script>, che significa che il codice che scrivi nella tab JavaScript viene caricato ed eseguito automaticamente nella pagina. Puoi interagire con gli elementi HTML, modificarne il contenuto, rispondere ai click dei pulsanti e molto altro, esattamente come in un progetto reale.
In basso è presente la Console, che in questo editor è particolarmente preziosa. Ogni volta che usi console.log() nel tuo codice JavaScript, il risultato compare proprio lì, senza dover aprire gli strumenti per sviluppatori del browser. È il modo più rapido per capire cosa sta succedendo all'interno del tuo codice durante l'esecuzione.
JavaScript è un linguaggio che si impara bene per gradi. Ci sono alcuni concetti di base che devi padroneggiare prima di tutto il resto, perché tutto il codice che scriverai in seguito si appoggerà su di loro.
Il punto di partenza sono le variabili: contenitori con un nome che servono a memorizzare valori. In JavaScript moderno si dichiarano principalmente con let e const. La prima è per valori che possono cambiare nel tempo, la seconda per valori che restano fissi.
let nome = "Mario";
const annoNascita = 1995;
let eta = 2025 - annoNascita;Il corso di Biadets dedica spazio a tutti e tre i modi per dichiarare una variabile, incluso il vecchio var, nella lezione sui 3 modi per dichiarare una variabile, e approfondisce poi separatamente let e const.
In JavaScript ogni valore ha un tipo. I più comuni sono le stringhe (testo), i numeri, i booleani (vero o falso) e il valore null o undefined per indicare l'assenza di un valore. La lezione sulle tipologie di dati in JavaScript le descrive tutte con esempi concreti.
Le stringhe sono sequenze di testo racchiuse tra virgolette singole, doppie o backtick. I backtick permettono di inserire variabili direttamente nel testo con una sintassi molto comoda:
let saluto = "Ciao";
let nome = "Laura";
let messaggio = `${saluto}, ${nome}!`; // "Ciao, Laura!"JavaScript mette a disposizione decine di metodi per manipolare le stringhe: convertirle in maiuscolo o minuscolo, cercare una sottostringa, sostituire una parte del testo, dividerle in array. Sono strumenti che userai continuamente.
I numeri in JavaScript non distinguono tra interi e decimali: sono tutti dello stesso tipo. Puoi fare qualsiasi operazione matematica con gli operatori standard, e per le operazioni più avanzate, radici quadrate, arrotondamenti, numeri casuali, esiste l'oggetto Math con i suoi metodi dedicati.
Quando hai bisogno di gestire più valori insieme, le variabili singole non bastano più. È qui che entrano in gioco gli array e gli oggetti.
Un array è una lista ordinata di valori, accessibili tramite il loro indice numerico (che parte da zero):
let colori = ["rosso", "verde", "blu"];
console.log(colori[0]); // "rosso"Gli array hanno molti metodi utili per aggiungere o rimuovere elementi, filtrare i valori, trasformare la lista o cercare al suo interno. Sono tra le strutture più usate in qualsiasi programma JavaScript.
Un oggetto è invece una raccolta di proprietà, ognuna identificata da un nome (chiave) e associata a un valore. È il modo naturale per rappresentare entità del mondo reale, un utente, un prodotto, un articolo:
let utente = {
nome: "Marco",
eta: 28,
citta: "Milano"
};
console.log(utente.nome); // "Marco"Il corso approfondisce sia gli oggetti che i loro metodi, fino ad arrivare ai costruttori e al prototype, che sono il fondamento della programmazione orientata agli oggetti in JavaScript.
Ogni programma ha bisogno di prendere decisioni e di ripetere operazioni. In JavaScript questo si fa con le condizioni e i cicli.
Le condizioni permettono di eseguire blocchi di codice diversi a seconda che una certa espressione sia vera o falsa. La struttura base è if / else:
let ora = 14;
if (ora < 12) {
console.log("Buongiorno!");
} else if (ora < 18) {
console.log("Buon pomeriggio!");
} else {
console.log("Buonasera!");
}La lezione sulle condizioni if, else e else if spiega come usare questa struttura in modo efficace, anche in combinazione con gli operatori di comparazione.
I cicli servono invece a ripetere un blocco di istruzioni più volte. Il ciclo più comune è il for, ma JavaScript ne offre diversi a seconda del contesto:
for (let i = 0; i < 5; i++) {
console.log("Iterazione numero " + i);
}Oltre al classico ciclo for, esistono il ciclo for in per iterare sulle proprietà di un oggetto e il ciclo while per ripetere un blocco finché una condizione resta vera. Le istruzioni break e continue permettono di controllare il flusso del ciclo con maggiore precisione.
Le funzioni sono uno dei concetti più importanti di qualsiasi linguaggio di programmazione, e JavaScript non fa eccezione. Una funzione è un blocco di codice con un nome, che puoi richiamare ogni volta che ne hai bisogno senza dover riscrivere lo stesso codice da capo.
function saluta(nome) {
return "Ciao, " + nome + "!";
}
console.log(saluta("Anna")); // "Ciao, Anna!"Le funzioni possono accettare parametri in ingresso e restituire valori in uscita con return. La lezione sulle funzioni in JavaScript e quella su return e variabili coprono tutto quello che ti serve per usarle correttamente.
Un uso molto pratico delle funzioni in combinazione con il tempo sono setTimeout() e setInterval(): il primo esegue una funzione dopo un certo ritardo, il secondo la ripete a intervalli regolari. Sono strumenti fondamentali per gestire animazioni, aggiornamenti automatici e qualsiasi comportamento legato al tempo. La lezione su setInterval() e setTimeout() spiega come usarli in modo corretto e sicuro.
Fin qui abbiamo parlato di JavaScript come linguaggio. Ma il suo vero potere nel contesto web emerge quando inizia a interagire con la pagina HTML. Questo avviene tramite il DOM, acronimo di Document Object Model.
Il DOM è una rappresentazione strutturata della pagina HTML sotto forma di albero di oggetti. Ogni tag HTML diventa un nodo di questo albero, e JavaScript può accedervi, modificarlo, aggiungerne di nuovi o eliminarne di esistenti, tutto in tempo reale, senza ricaricare la pagina.
Per esempio, per cambiare il testo di un elemento con id titolo basta una sola riga:
document.getElementById("titolo").textContent = "Nuovo titolo!";Questo è esattamente il meccanismo che vedi nell'editor di esempio: il pulsante "Cliccami" viene intercettato da JavaScript, che al click modifica il titolo della pagina. Il corso dedica un'intera sezione a questo argomento, a partire dalla introduzione al DOM, per poi coprire i metodi di accesso, la navigazione tra nodi, la gestione di attributi e contenuti, fino agli eventi HTML e alle animazioni gestite via DOM.
Uno dei pilastri del JavaScript interattivo è la gestione degli eventi. Un evento è qualsiasi cosa accada nella pagina: un click su un pulsante, il movimento del mouse, la pressione di un tasto, il caricamento di un'immagine, la modifica di un campo di testo.
JavaScript ti permette di "ascoltare" questi eventi e di eseguire una funzione in risposta, con il metodo addEventListener():
document.getElementById("btnDemo").addEventListener("click", function() {
document.querySelector("h1").textContent = "Hai cliccato il pulsante!";
});Questo pattern, seleziona un elemento, aggiungi un listener, esegui una funzione, è alla base di praticamente ogni interazione che trovi in una pagina web moderna. Puoi anche interagire con i form HTML, leggere i valori inseriti dall'utente e validarli prima dell'invio, oppure modificare gli stili CSS degli elementi direttamente da JavaScript.
JavaScript non opera solo sulla pagina: ha accesso anche al browser come ambiente. Tramite l'oggetto window puoi interagire con la cronologia di navigazione, reindirizzare l'utente verso un altro URL, conoscere le dimensioni della finestra e molto altro.
La lezione sulle interazioni con il browser introduce questo mondo, mentre lezioni specifiche coprono window.location per gestire pagine e reindirizzamenti, e window.history per navigare nella cronologia del browser.
Un capitolo a parte merita la Fetch API, che permette al codice JavaScript di comunicare con server esterni per richiedere o inviare dati in modo asincrono. È lo strumento alla base di tutte le applicazioni web che si aggiornano senza ricaricare la pagina, dai social network alle mappe interattive, dalle chat ai feed di notizie. La lezione dedicata alla Fetch API spiega come funziona e come usarla nei tuoi progetti.
Come tutti gli strumenti di Biadets, l'editor JavaScript non costa nulla. Nessuna registrazione, nessun piano premium, nessun limite nascosto. Puoi usarlo tutte le volte che vuoi, per qualsiasi scopo: studiare, sperimentare, testare un componente, prototipare un'idea.
È uno strumento pensato per abbattere ogni barriera tra te e il codice. Non devi preoccuparti di configurare Node.js, di gestire file locali o di aprire un terminale. Ti siedi, apri l'editor e inizi a scrivere codice JavaScript. Il feedback è immediato, la Console è lì per aiutarti a capire cosa succede e l'anteprima mostra in tempo reale il risultato del tuo lavoro.
Se vuoi andare oltre la sperimentazione libera e costruire una conoscenza solida del linguaggio, il corso JavaScript di Biadets copre tutto in modo progressivo: si parte dall'introduzione a JavaScript e da dove inserire il codice nella pagina, per arrivare passo dopo passo a temi avanzati come il DOM, gli eventi e la Fetch API.
Ogni lezione è accompagnata da esempi di codice JavaScript pronti da copiare e incollare nell'editor, così puoi vedere immediatamente come funzionano nella pratica. Questo collegamento diretto tra teoria e pratica è il modo più efficace per imparare a programmare: non basta leggere, bisogna scrivere, modificare, rompere le cose e capire perché si rompono.
L'editor JavaScript di Biadets è lo spazio in cui fare tutto questo, liberamente, gratuitamente, senza limiti.