// Dichiarazione e utilizzo di una variabile let contatore = 0; contatore = contatore + 1; console.log(contatore); // Output: 1

// Dichiarazione di una costante const PI = 3.14159; console.log("Area del cerchio: " + PI * 5 * 5); // Output: Area del cerchio: 78.53975

// Esempio di operazioni aritmetiche let a = 10; let b = 3; console.log("Somma:", a + b); // 13 console.log("Sottrazione:", a - b); // 7 console.log("Moltiplicazione:", a * b); // 30 console.log("Divisione:", a / b); // 3.3333... console.log("Modulo:", a % b); // 1

// Esempio di operatori di confronto let x = 5; let y = 10; console.log("x === y:", x === y); // false console.log("x !== y:", x !== y); // true console.log("x > y:", x > y); // false console.log("x < y:", x < y); // true console.log("x >= y:", x >= y); // false console.log("x <= y:", x <= y); // true

// Esempio di operatori logici let attivo = true; let autorizzato = false; console.log("AND:", attivo && autorizzato); // false console.log("OR:", attivo || autorizzato); // true console.log("NOT:", !attivo); // false // Esempio pratico if (attivo && autorizzato) { console.log("Utente attivo e autorizzato"); } else if (attivo || autorizzato) { console.log("Utente attivo o autorizzato"); } else { console.log("Utente non attivo e non autorizzato"); } // Output: Utente attivo o autorizzato

// Esempio di struttura if-else if-else let punteggio = 85; if (punteggio >= 90) { console.log("Voto: A"); } else if (punteggio >= 80) { console.log("Voto: B"); } else if (punteggio >= 70) { console.log("Voto: C"); } else if (punteggio >= 60) { console.log("Voto: D"); } else { console.log("Voto: F"); } // Output: Voto: B

// Esempio di switch let giorno = 3; let nomeGiorno; switch (giorno) { case 1: nomeGiorno = "Lunedì"; break; case 2: nomeGiorno = "Martedì"; break; case 3: nomeGiorno = "Mercoledì"; break; case 4: nomeGiorno = "Giovedì"; break; case 5: nomeGiorno = "Venerdì"; break; case 6: case 7: nomeGiorno = "Weekend"; break; default: nomeGiorno = "Giorno non valido"; } console.log("Oggi è", nomeGiorno); // Output: Oggi è Mercoledì

// Esempio di ciclo for let somma = 0; for (let i = 1; i <= 5; i++) { somma += i; console.log(`Passo ${i}: somma parziale = ${somma}`); } console.log(`Somma totale: ${somma}`); // Output: // Passo 1: somma parziale = 1 // Passo 2: somma parziale = 3 // Passo 3: somma parziale = 6 // Passo 4: somma parziale = 10 // Passo 5: somma parziale = 15 // Somma totale: 15

// Esempio di funzione function calcolaArea(larghezza, altezza) { return larghezza * altezza; } let area = calcolaArea(5, 3); console.log("L'area è:", area); // Output: L'area è: 15 // Funzione con valori predefiniti function saluta(nome = "Utente") { return `Ciao, ${nome}!`; } console.log(saluta("Mario")); // Ciao, Mario! console.log(saluta()); // Ciao, Utente!

// Esempio di arrow function const somma = (a, b) => a + b; console.log("Somma:", somma(5, 3)); // Somma: 8 // Arrow function con blocco const quadrato = x => { const risultato = x * x; return risultato; }; console.log("Quadrato di 4:", quadrato(4)); // Quadrato di 4: 16 // Arrow function con array const numeri = [1, 2, 3, 4, 5]; const quadrati = numeri.map(x => x * x); console.log("Numeri al quadrato:", quadrati); // Output: Numeri al quadrato: [1, 4, 9, 16, 25]

// Esempio di manipolazione array let frutta = ["mela", "banana"]; console.log("Array iniziale:", frutta); // push - aggiunge alla fine frutta.push("arancia"); console.log("Dopo push:", frutta); // pop - rimuove dall'ultimo let ultimo = frutta.pop(); console.log("Elemento rimosso con pop:", ultimo); console.log("Dopo pop:", frutta); // unshift - aggiunge all'inizio frutta.unshift("fragola"); console.log("Dopo unshift:", frutta); // shift - rimuove dal primo let primo = frutta.shift(); console.log("Elemento rimosso con shift:", primo); console.log("Dopo shift:", frutta); // slice - crea una copia di una porzione let numeri = [1, 2, 3, 4, 5]; let porzione = numeri.slice(1, 4); console.log("Array originale:", numeri); console.log("Porzione (slice):", porzione); // splice - modifica l'array originale let rimossi = numeri.splice(1, 2, 6, 7); console.log("Elementi rimossi con splice:", rimossi); console.log("Dopo splice:", numeri);

// Esempio di metodi di iterazione array const numeri = [1, 2, 3, 4, 5]; // forEach - esegue una funzione per ogni elemento console.log("forEach:"); numeri.forEach((num, index) => { console.log(` Elemento ${index}: ${num}`); }); // map - crea un nuovo array trasformando ogni elemento const doppi = numeri.map(num => num * 2); console.log("map (doppi):", doppi); // filter - crea un nuovo array con elementi che soddisfano una condizione const pari = numeri.filter(num => num % 2 === 0); console.log("filter (pari):", pari); // find - restituisce il primo elemento che soddisfa una condizione const maggioreDiTre = numeri.find(num => num > 3); console.log("find (> 3):", maggioreDiTre); // reduce - riduce l'array a un singolo valore const somma = numeri.reduce((totale, num) => totale + num, 0); console.log("reduce (somma):", somma); // some - verifica se almeno un elemento soddisfa una condizione const hasMaggioriDiQuattro = numeri.some(num => num > 4); console.log("some (> 4):", hasMaggioriDiQuattro); // every - verifica se tutti gli elementi soddisfano una condizione const tuttiPositivi = numeri.every(num => num > 0); console.log("every (> 0):", tuttiPositivi);

// Esempio di oggetto letterale const persona = { nome: "Mario", cognome: "Rossi", età: 30, indirizzo: { via: "Via Roma", città: "Milano" }, saluta() { return `Ciao, sono ${this.nome} ${this.cognome}`; } }; console.log(persona.nome); // Mario console.log(persona.indirizzo.città); // Milano console.log(persona.saluta()); // Ciao, sono Mario Rossi // Accesso con notazione a parentesi quadre console.log(persona["cognome"]); // Rossi // Aggiungere o modificare proprietà persona.professione = "Sviluppatore"; persona.età = 31; console.log(persona);

// Esempio di classe class Persona { constructor(nome, cognome, età) { this.nome = nome; this.cognome = cognome; this.età = età; } get nomeCompleto() { return `${this.nome} ${this.cognome}`; } saluta() { return `Ciao, sono ${this.nomeCompleto}`; } static creaPersonaAnonima() { return new Persona("Anonimo", "", 0); } } const mario = new Persona("Mario", "Rossi", 30); console.log(mario.nomeCompleto); // Mario Rossi console.log(mario.saluta()); // Ciao, sono Mario Rossi const anonimo = Persona.creaPersonaAnonima(); console.log(anonimo.saluta()); // Ciao, sono Anonimo

// Esempio di selezione DOM // HTML di riferimento: // // La seguente è una simulazione per l'editor // Seleziona per ID console.log("Seleziona elementi DOM (simulato)"); console.log("Elemento con ID 'main':", {id: "main", tagName: "DIV"}); // Seleziona per classe (simulato) console.log("Numero di paragrafi:", 2); // Seleziona il primo elemento che corrisponde al selettore (simulato) console.log("Testo del titolo:", "Titolo pagina"); // Seleziona tutti gli elementi che corrispondono al selettore (simulato) console.log("Contenuto paragrafo 1:", "Paragrafo 1"); console.log("Contenuto paragrafo 2:", "Paragrafo 2");

// Esempio di manipolazione DOM // Supponiamo di avere un elemento: // Simulazione per l'editor console.log("Manipolazione DOM (simulato)"); // Creo un oggetto per simulare un elemento DOM const boxSimulato = { content: "Contenuto originale", attributes: {}, style: {}, classes: [] }; // Simula modifiche al contenuto boxSimulato.content = "Nuovo testo"; // Solo testo console.log("Nuovo contenuto:", boxSimulato.content); boxSimulato.content = "Testo in grassetto"; // HTML interpretato console.log("Nuovo HTML:", boxSimulato.content); // Simula modifiche agli attributi boxSimulato.attributes.title = "Tooltip sul box"; boxSimulato.attributes["data-id"] = "123"; console.log("Attributi:", boxSimulato.attributes); // Simula modifiche allo stile CSS boxSimulato.style.backgroundColor = "lightblue"; boxSimulato.style.padding = "10px"; boxSimulato.style.borderRadius = "5px"; console.log("Stile:", boxSimulato.style); // Simula gestione classi CSS boxSimulato.classes.push("evidenziato"); // Aggiunge una classe console.log("Classi dopo aggiunta:", boxSimulato.classes); // Rimuove una classe (simulato) boxSimulato.classes = boxSimulato.classes.filter(c => c !== "nascosto"); console.log("Classi dopo rimozione:", boxSimulato.classes); // Toggle simulato const hasClass = boxSimulato.classes.includes("selezionato"); if (!hasClass) { boxSimulato.classes.push("selezionato"); } else { boxSimulato.classes = boxSimulato.classes.filter(c => c !== "selezionato"); } console.log("Classi dopo toggle:", boxSimulato.classes);

// Esempio di gestione eventi (simulato per editor) console.log("Gestione eventi (simulato)"); // Esempio di gestione click su bottone function gestisciClickBottone() { console.log('Bottone cliccato!'); } gestisciClickBottone(); // Simulazione // Esempio di gestione click su link con preventDefault function gestisciClickLink(event) { // event.preventDefault(); // Impedisce la navigazione console.log('Link cliccato, ma la navigazione è bloccata'); } gestisciClickLink(); // Simulazione // Esempio di gestione propagazione eventi function gestisciClickElementoEsterno() { console.log('Elemento esterno cliccato'); } function gestisciClickElementoInterno(event) { // event.stopPropagation(); // Impedisce propagazione console.log('Elemento interno cliccato (senza propagazione)'); } // Simulazione click sull'elemento interno gestisciClickElementoInterno(); // In ambiente reale, l'evento non si propagherebbe all'elemento esterno

// Esempio di utilizzo localStorage (simulato per editor) console.log("Local Storage (simulato)"); // Simula un oggetto storage const mockStorage = {}; // Simula salvataggio dati mockStorage['username'] = 'mario_rossi'; mockStorage['preferenze'] = JSON.stringify({ tema: 'scuro', notifiche: true }); console.log("Storage dopo salvataggio:", mockStorage); // Simula lettura dati const username = mockStorage['username']; console.log('Username salvato:', username); const preferenzeJSON = mockStorage['preferenze']; const preferenze = JSON.parse(preferenzeJSON); console.log('Tema preferito:', preferenze.tema); // Simula rimozione singola chiave delete mockStorage['username']; console.log("Storage dopo rimozione:", mockStorage); // Simula pulizia completa for (const key in mockStorage) { delete mockStorage[key]; } console.log("Storage dopo clear:", mockStorage);

// Esempio di utilizzo Fetch API (simulato per editor) console.log("Fetch API (simulato)"); // Funzione per simulare una GET request function simulaGetFetch() { console.log("Simulazione fetch GET"); return new Promise((resolve) => { setTimeout(() => { resolve({ ok: true, status: 200, json: () => Promise.resolve({ id: 1, title: 'Titolo post', body: 'Contenuto post' }) }); }, 100); }); } // Funzione per simulare una POST request function simulaPostFetch(data) { console.log("Simulazione fetch POST con dati:", data); return new Promise((resolve) => { setTimeout(() => { resolve({ ok: true, status: 201, json: () => Promise.resolve({ id: 101, ...JSON.parse(data) }) }); }, 100); }); } // Simulazione GET simulaGetFetch() .then(response => { console.log("Status:", response.status); return response.json(); }) .then(data => { console.log('Dati ricevuti:', data); }) .catch(error => { console.error('Errore:', error); }); // Simulazione POST const datiPost = JSON.stringify({ title: 'Nuovo Post', body: 'Contenuto del post', userId: 1 }); simulaPostFetch(datiPost) .then(response => response.json()) .then(data => { console.log('Risposta POST:', data); });

// Esempi di utilizzo della console console.log('Log standard'); console.error('Messaggio di errore'); console.warn('Avviso importante'); console.info('Informazione'); // Logging complesso console.log('Utente:', { nome: 'Mario', ruolo: 'Admin', attivo: true }); // Contatori console.log('Simulazione contatori'); for (let i = 0; i < 3; i++) { console.log(`Click #${i+1}`); } // Timing console.log('Inizio operazione'); // Simuliamo un'operazione for (let i = 0; i < 1000000; i++) { // Operazione intensiva } console.log('Fine operazione'); // Tabelle console.log('Esempio di tabella:'); const utenti = [ { nome: 'Mario', età: 30 }, { nome: 'Luigi', età: 28 }, { nome: 'Paolo', età: 35 } ]; console.log(utenti);

// Esempio di setTimeout e setInterval (simulato) console.log("Inizio script"); // Simulazione setTimeout console.log("setTimeout impostato..."); console.log("Questo messaggio apparirebbe dopo 2 secondi"); // Simulazione setInterval console.log("setInterval impostato..."); console.log("Contatore: 1"); console.log("Contatore: 2"); console.log("Contatore: 3"); console.log("Contatore: 4"); console.log("Contatore: 5"); console.log("Intervallo fermato"); console.log("Fine script (ma il codice asincrono continua in background)");