Post

Visualizzazione dei post con l'etichetta Corso di JavaScript & Programmazione Web

Context engineering

Immagine
  Negli ultimi mesi, chi lavora con i modelli linguistici ha iniziato a notare uno spostamento sottile ma significativo: il problema non è più cosa scrivere nel prompt , ma cosa mettere nel contesto . È la differenza tra dare un'istruzione ben formulata e costruire l'intero ambiente informativo in cui un modello deve operare — memoria, strumenti, cronologia, vincoli, stato del sistema. Si parla ormai apertamente di context engineering come disciplina distinta dal prompt engineering, e la distinzione non è solo terminologica. 🔹 1. Il prompt come istruzione, il contesto come ambiente Un prompt ben scritto ottimizza una singola interazione. Il contesto, invece, è tutto ciò che il modello "vede" prima di rispondere: documenti recuperati, risultati di strumenti, conversazioni pregresse, regole di sistema, persino la cronologia di errori già commessi in quella sessione. Con l'adozione crescente di agenti che lavorano su compiti lunghi — scrivere codice, orchestrare...

Corso di JavaScript & Programmazione Web: 11 – Codice del sito di e-commerce

Immagine
11 – Codice del sito di e-commerce merchant-backend/ ├─ package.json ├─ .env.example └─ src/    ├─ index.js    ├─ config/    │  └─ db.js    ├─ models/    │  ├─ User.js    │  └─ Product.js    ├─ controllers/    │  ├─ authController.js    │  └─ productController.js    └─ routes/       ├─ auth.js       └─ products.js {   "name": "merchant-backend",   "version": "1.0.0",   "description": "Backend per sito commerciante con e-commerce minimale (Node/Express/MongoDB/JWT)",   "main": "src/index.js",   "scripts": {     "start": "node src/index.js",     "dev": "nodemon src/index.js",     "lint": "eslint . --ext .js"   },   "author": "Tuonome",   "license": "MIT",   "dependencies": {     "bcryptjs": "^2.4.3",     "cors": "^2.8.5",     "dotenv...

Corso di JavaScript & Programmazione Web: 10 – Progetto completo di un sito di e-commerce

Immagine
 10 – Progetto completo di un sito di e-commerce 1) Visione generale e requisito minima Obiettivo: sito commerciale per commerciante locale con catalogo, search, carrello, checkout, gestione ordini, pannello amministrativo per inventario e analisi vendite. Interazione ricca in client con JavaScript (React) e backend REST/GraphQL in Node.js. Pagamenti con Stripe Checkout (semplice e sicuro). Database: MongoDB (flessibile, JSON-like), caching Redis opzionale. Principali caratteristiche: Catalogo prodotti (categoria, tagging, filtri) Carrello persistente (localStorage + server-side per utenti loggati) Checkout con Stripe (Checkout Session + webhook per conferma ordine) Account cliente (registro, login JWT, storico ordini) Area admin (login, CRUD prodotti, gestione ordini, report) SEO friendly (SSR / pre-rendering per pagine prodotto) — usare SSG/SSR su Vercel o prerender per SEO PWA (manifest + service worker) per offline caching e push notifications opzion...

Corso di JavaScript & Programmazione Web: 9 – Animazioni e interattività avanzata

Immagine
9  Animazioni e giochi 2D con JavaScript Obiettivi didattici: Imparare a usare setInterval e setTimeout per eseguire codice in ritardo o a intervalli regolari. Animare elementi HTML in modo semplice. Introdurre l’uso di Canvas per creare giochi 2D. Creare un esercizio pratico: gioco “Indovina il numero”. 1. setTimeout e setInterval Questi metodi servono a eseguire codice dopo un certo ritardo o a intervalli regolari. Sintassi di setTimeout : setTimeout(function() { console.log("Eseguito dopo 2 secondi"); }, 2000); // 2000 millisecondi = 2 secondi Sintassi di setInterval : let timer = setInterval(function() { console.log("Questo si ripete ogni secondo"); }, 1000); // Per fermare l'intervallo: clearInterval(timer); Uso pratico: animazioni, countdown, aggiornamento dati dinamici. 2. Manipolazione animata di elementi HTML Possiamo muovere un elemento usando style e setInterval . Esempio: box che scorre a destra <div id="b...

Corso di JavaScript & Programmazione Web: 8 – LocalStorage e persistenza

Immagine
8  LocalStorage e persistenza dei dati Obiettivi didattici: Introdurre le API localStorage e sessionStorage per salvare dati lato client. Mostrare come mantenere preferenze dell’utente, come il tema dark/light, tra diverse visite al sito. Svolgere un esempio pratico di dark mode persistente . 1. Introduzione a localStorage e sessionStorage JavaScript fornisce due principali sistemi di storage locale nel browser: API Durata dati Scope Uso tipico localStorage permanente (finché l’utente non cancella) stesso dominio preferenze utente, dati persistenti sessionStorage durata sessione (chiusura tab) stesso tab dati temporanei, sessione utente Proprietà principali: Si lavora sempre con coppie chiave/valore ( key / value ) in formato stringa. Metodi principali: localStorage.setItem('chiave', 'valore'); // salva un dato localStorage.getItem('chiave'); // legge un dato localStorage.removeItem('chiave...

Corso di JavaScript & Programmazione Web: 7 – Eventi e interattività

Immagine
7 – Eventi e interattività Obiettivi Capire come funzionano gli event listeners (click, mouseover, keyup…). Imparare a validare form in tempo reale. Conoscere event bubbling e event delegation per codice più efficiente. Sviluppare un esercizio pratico: form di login con validazione in tempo reale . 1) Event listeners: concetti e API base Un evento è un’azione dell’utente o del browser (click, submit, keyup, mouseover, resize…). Aggiungere un listener: element.addEventListener('click', function(event){ // comportamento quando avviene il click }); Rimuovere un listener: element.removeEventListener('click', listenerFn); Proprietà utili nell’oggetto event: event.target (elemento che ha generato l’evento), event.currentTarget (elemento che gestisce l’evento), event.preventDefault() per bloccare il comportamento predefinito (es. submit), event.stopPropagation() per fermare la propagazione. 2) Tipi di eventi più comuni (esempi) ...

Corso di JavaScript & Programmazione Web: 6 – Il DOM: manipolazione della pagina

Immagine
6 – Il DOM: manipolazione della pagina Obiettivi Comprendere cos’è il DOM (Document Object Model) e come rappresenta la struttura di una pagina web. Selezionare e manipolare elementi HTML usando JavaScript. Modificare testo, immagini, classi e stili dinamicamente. Creare e rimuovere elementi HTML tramite script. Sviluppare un mini-progetto pratico: una to-do list interattiva. Contenuti 1️⃣ Cos’è il DOM Il DOM è una rappresentazione ad albero della pagina web. Ogni elemento HTML diventa un nodo che può essere letto e modificato con JavaScript. 2️⃣ Selezione degli elementi document.getElementById("id") → seleziona un elemento tramite l’id document.querySelector("selettore") → seleziona il primo elemento che corrisponde al selettore CSS document.querySelectorAll("selettore") → seleziona tutti gli elementi corrispondenti 3️⃣ Modifica degli elementi Testo: element.textContent = "Nuovo testo" HTML inte...

Corso di JavaScript & Programmazione Web: 5 – Oggetti e Array

Immagine
5 – Oggetti e Array Obiettivi Creare e manipolare array in JavaScript. Usare i metodi principali: push , pop , map , filter , reduce . Definire oggetti e proprietà. Convertire dati in JSON e viceversa. Realizzare una rubrica di contatti in array di oggetti. 1. Array: creazione e gestione // Creazione const a = []; // array vuoto const nums = [1, 2, 3, 4]; // array con elementi const mixed = ['ciao', 10, true]; // tipi diversi // Accesso console.log(nums[0]); // 1 console.log(nums.length); // 4 Metodi principali const nums = [1, 2, 3, 4]; // push: aggiunge in fondo nums.push(5); // [1,2,3,4,5] // pop: rimuove ultimo nums.pop(); // [1,2,3,4] // unshift: aggiunge in testa nums.unshift(0); // [0,1,2,3,4] // shift: rimuove primo nums.shift(); // [1,2,3,4] // splice: inserisce/rimuove nums.splice(2, 1); // rimuove elemento all’indice 2 → [1,2,4] nums.splice(2, 0, 2.5); // inserisce 2.5 all’indice 2 → [1,2,2.5,4] // sl...

Post popolari in questo blog

Corso di Programmazione Strutturata e OOP: 3 Ereditarietà incapsulamento polimorfismo

Corso di CSS & Web Design: 3 – Box Model e spaziature

Corso di CSS & Web Design: 7 – Responsive Design