Linguaggi di Programmazione Web

Report 5000 ufficiale: architettura client-server e HTTP, HTML5, CSS3, JavaScript e DOM, fondamenti dei linguaggi (esecuzione/tipi/paradigmi), front-end e SPA, back-end e API REST, sicurezza OWASP + 25 numeri chiave + 15 trabocchetti.

1 Architettura del web: client-server e HTTP

Il web è un'applicazione client-server distribuita: il client (browser) invia una richiesta, il server elabora e restituisce una risposta (modello request-response, senza stato → stateless).

Protocollo HTTP (HyperText Transfer Protocol, livello applicativo)

porta 80 (HTTP) e 443 (HTTPS, cifrato con TLS);
HTTP/1.1 (1997), HTTP/2 (2015, multiplexing), HTTP/3 (su QUIC/UDP, 2022);
ogni risorsa è individuata da una URL (Uniform Resource Locator).

Metodi HTTP principali

Metodo	Uso	Idempotente
GET	legge una risorsa	sì
POST	crea una risorsa / invia dati	no
PUT	sostituisce una risorsa	sì
PATCH	modifica parziale	no
DELETE	elimina una risorsa	sì
HEAD	come GET ma solo header	sì

Codici di stato HTTP

Classe	Significato	Esempi
1xx	informativi	100 Continue
2xx	successo	200 OK, 201 Created, 204 No Content
3xx	redirezione	301 Moved Permanently, 302 Found, 304 Not Modified
4xx	errore client	400 Bad Request, 401 Unauthorized, 403 Forbidden, 404 Not Found
5xx	errore server	500 Internal Server Error, 502 Bad Gateway, 503 Service Unavailable

2 HTML5 — struttura e semantica

HTML (HyperText Markup Language) è il linguaggio di marcatura che struttura il contenuto di una pagina. Non è un linguaggio di programmazione (non ha logica): descrive cosa è il contenuto tramite tag (<tag>…</tag>) ed attributi.

HTML5 è oggi un living standard mantenuto dal WHATWG (in passato W3C).
Struttura minima: <!DOCTYPE html> → <html> → <head> (metadati) + <body> (contenuto visibile).
Tag semantici (HTML5): <header>, <nav>, <main>, <section>, <article>, <aside>, <footer> → migliorano accessibilità e SEO rispetto ai vecchi <div> generici.
Elementi chiave: <a> (link), <img>, <ul>/<ol>/<li>, <table>, <form> con <input>, tag multimediali <video>/<audio>/<canvas>.
DOM (Document Object Model): rappresentazione ad albero della pagina generata dal browser, manipolabile via JavaScript.

3 CSS3 — presentazione e layout

CSS (Cascading Style Sheets) separa la presentazione (colori, font, layout) dalla struttura HTML. Una regola ha la forma selettore { proprietà: valore; }.

"Cascade": le regole si applicano per specificità e ordine; ereditarietà dai contenitori.
Box model: ogni elemento è una scatola con content → padding → border → margin.
Selettori: per tag (p), per classe (.classe), per id (#id), discendenti, pseudo-classi (:hover, :focus).
Layout moderni: Flexbox (monodimensionale) e Grid (bidimensionale) sostituiscono float/tabelle.
Responsive design: @media query + unità relative (%, rem, vw/vh) per adattarsi a ogni schermo (approccio mobile-first).
Preprocessori (Sass/SCSS, LESS): aggiungono variabili, nesting e funzioni, poi compilati in CSS.

4 JavaScript — il linguaggio del web

JavaScript (JS) è il linguaggio di programmazione lato client eseguito dal browser; aggiunge comportamento e interattività alla pagina.

Standardizzato come ECMAScript; svolta con ES6 (ES2015): let/const, arrow function, classi, Promise, moduli.
Interpretato, tipizzazione dinamica e debole (coercizioni implicite), multiparadigma (imperativo, OOP a prototipi, funzionale).
Manipolazione del DOM: document.querySelector, gestione eventi (addEventListener) → aggiornamento dinamico della pagina.
Asincronia: event loop a thread singolo, callback → Promise → async/await; fetch() per chiamate HTTP.
JSON (JavaScript Object Notation): formato dati testuale leggero, standard per lo scambio client-server.
Oltre il browser: Node.js porta JS lato server (motore V8).

5 Fondamenti dei linguaggi applicati al web

I linguaggi web ereditano i concetti generali dei linguaggi di programmazione (utile per i quesiti teorici).

Meccanismi di esecuzione

Compilazione pura (es. C): tutto tradotto in linguaggio macchina → efficiente, poco portabile.
Interpretazione pura: il sorgente è eseguito passo-passo → flessibile, meno efficiente (è il caso "storico" di JS).
Implementazione mista (Java, Python, JS moderno): sorgente → bytecode eseguito da una macchina astratta (JVM, CPython, motore V8) con compilatore JIT che ottimizza a runtime le parti più usate.

Sistemi di tipi

statica (verifica a compilazione, efficiente) vs dinamica (a runtime, flessibile — JS, Python); forte (no operazioni tra tipi incompatibili) vs debole (coercizioni implicite — JS).

Paradigmi utili nel web

OOP: incapsulamento, ereditarietà, polimorfismo, astrazione tramite interfacce.
Funzionale: funzioni pure (senza effetti collaterali), immutabilità, funzioni di ordine superiore (map, filter, reduce) — molto usate in JS e nei framework React.

TypeScript è un superset di JavaScript che aggiunge la tipizzazione statica, compilato (transpilato) in JS.

6 Front-end: framework e SPA

Oltre a HTML/CSS/JS "puri", il front-end moderno usa framework/librerie che gestiscono lo stato e il rendering dinamico:

Strumento	Tipo	Caratteristica
React	libreria (Meta)	componenti + Virtual DOM, JSX
Vue.js	framework	reattività dichiarativa, curva dolce
Angular	framework (Google)	completo, basato su TypeScript
Svelte	compilatore	niente Virtual DOM, output ottimizzato

SPA (Single Page Application): una sola pagina HTML, i contenuti si aggiornano via JS senza ricaricare → esperienza fluida, logica sul client.
MPA (Multi Page Application): navigazione classica, ogni pagina è servita dal server.
SSR (Server-Side Rendering, es. Next.js/Nuxt): la pagina è pre-renderizzata sul server → migliori SEO e primo caricamento.

7 Back-end: linguaggi e API REST

Il back-end gestisce logica applicativa, persistenza (database) e sicurezza. Linguaggi/ambienti server diffusi:

Linguaggio/ambiente	Ecosistema tipico
Node.js (JavaScript)	Express, NestJS
PHP	Laravel, WordPress
Python	Django, Flask, FastAPI
Java	Spring / Jakarta EE
C#	ASP.NET
Ruby	Ruby on Rails

API REST (Representational State Transfer)

Stile architetturale per esporre risorse via HTTP:

ogni risorsa ha una URL; le operazioni usano i metodi HTTP;
comunicazione stateless, formato dati tipicamente JSON;
corrispondenza con le operazioni CRUD.

CRUD	SQL	HTTP
Create	INSERT	POST
Read	SELECT	GET
Update	UPDATE	PUT/PATCH
Delete	DELETE	DELETE

Alternative a REST: GraphQL (query flessibili su un unico endpoint), gRPC (RPC binario ad alte prestazioni).

8 Sicurezza delle applicazioni web (OWASP)

Le applicazioni web sono esposte in rete: la sicurezza è parte del programma d'esame. Vulnerabilità classiche (OWASP Top 10):

Vulnerabilità	Descrizione	Difesa
SQL Injection	input malevolo iniettato in query SQL	prepared statement / query parametrizzate
XSS (Cross-Site Scripting)	script iniettato ed eseguito nel browser della vittima	escaping/sanitizzazione dell'output
CSRF (Cross-Site Request Forgery)	richiesta forgiata sfruttando la sessione dell'utente	token anti-CSRF, `SameSite` cookie
Broken Authentication	gestione debole di credenziali/sessioni	hashing password (bcrypt), MFA
Security Misconfiguration	configurazioni di default insicure	hardening, patching

HTTPS/TLS cifra il traffico (porta 443) garantendo riservatezza e integrità.
Principio del minimo privilegio e validazione lato server (mai fidarsi solo del client).

Nota di memory safety: oltre il 70% delle vulnerabilità sfruttabili nei linguaggi di sistema (C/C++) deriva dalla gestione non sicura della memoria; per i servizi web si preferiscono linguaggi memory-safe (Java, JS, Python).

9 25 numeri e fatti chiave

#	Dato	Valore
1	Porta HTTP	80
2	Porta HTTPS	443
3	Modello del web	client-server, stateless
4	HTTP/2	2015 (multiplexing)
5	HTTP/3	su QUIC/UDP (2022)
6	200	OK (successo)
7	201	Created
8	301	Moved Permanently
9	404	Not Found
10	500	Internal Server Error
11	HTML	linguaggio di marcatura, non di programmazione
12	Standard HTML5	mantenuto dal WHATWG
13	DOM	rappresentazione ad albero della pagina
14	CSS box model	content → padding → border → margin
15	Layout CSS moderni	Flexbox (1D) e Grid (2D)
16	Standard di JavaScript	ECMAScript (svolta ES6/2015)
17	Tipizzazione JS	dinamica e debole
18	Asincronia JS	event loop, callback→Promise→async/await
19	JSON	formato standard di scambio dati
20	JS lato server	Node.js (motore V8)
21	SPA	Single Page Application
22	React	Virtual DOM + JSX (Meta)
23	REST	risorse via HTTP, stateless, JSON
24	CRUD ↔ HTTP	Create=POST, Read=GET, Update=PUT, Delete=DELETE
25	TypeScript	superset di JS con tipi statici

10 15 trabocchetti d'esame

#	Trabocchetto	Risposta corretta
1	"HTML è un linguaggio di programmazione"	FALSO — è un linguaggio di marcatura, senza logica
2	"HTTP mantiene lo stato tra le richieste"	FALSO — HTTP è stateless
3	"GET serve a creare risorse"	FALSO — GET legge; POST crea
4	"404 è un errore del server"	FALSO — è un errore client (4xx); 5xx è server
5	"200 significa errore"	FALSO — 200 OK è successo
6	"CSS aggiunge la logica alla pagina"	FALSO — CSS gestisce la presentazione; la logica è JS
7	"JavaScript e Java sono lo stesso linguaggio"	FALSO — linguaggi diversi, solo nome simile
8	"JS ha tipizzazione statica e forte"	FALSO — è dinamica e debole
9	"Node.js gira nel browser"	FALSO — porta JS lato server (V8)
10	"Una SPA ricarica la pagina a ogni click"	FALSO — aggiorna il contenuto via JS senza ricaricare
11	"REST è un protocollo"	FALSO — è uno stile architetturale su HTTP
12	"Nel CRUD, Update corrisponde a POST"	FALSO — Update = PUT/PATCH; POST = Create
13	"Flexbox è per layout bidimensionali"	FALSO — Flexbox è 1D; Grid è 2D
14	"L'SQL injection si previene lato client"	FALSO — con query parametrizzate lato server
15	"HTTPS usa la porta 80"	FALSO — HTTPS usa la 443 (80 è HTTP)