5.2.2 - Tecnologie lato client e formati di scambio dati

Obiettivi della lezione:

Comprendere le tecnologie lato client. Gli studenti impareranno a identificare e descrivere le principali tecnologie utilizzate per lo sviluppo web lato client.
Analizzare i formati di scambio dati. Gli studenti acquisiranno conoscenze sui formati di scambio dati comuni come JSON e XML, comprendendo la loro sintassi e i loro utilizzi.
Esaminare l’interazione tra client e server. Gli studenti comprenderanno come i dati vengono scambiati tra client e server utilizzando i formati di dati studiati.

Tecnologie lato client

Le tecnologie lato client sono strumenti e linguaggi utilizzati per creare l’interfaccia utente e gestire l’interazione dell’utente con l’applicazione web. Le principali tecnologie lato client includono:

HTML (HyperText Markup Language)

HTML è il linguaggio standard per creare pagine web. Esso descrive la struttura di una pagina web utilizzando una serie di elementi e tag che il browser interpreta e visualizza.

vai al corso HTML

Elementi principali: <!DOCTYPE html>, <html>, <head>, <body>, <div>, <span>, <h1>, <p>, <a>, <img>, <table>, ecc.
Struttura di base:

<!DOCTYPE html>
<html>
<head>
    <title>Titolo della pagina</title>
</head>
<body>
    <h1>Intestazione principale</h1>
    <p>Paragrafo di testo</p>
</body>
</html>

CSS (Cascading Style Sheets)

CSS è utilizzato per definire lo stile e il layout delle pagine web. Permette di separare la presentazione dal contenuto, migliorando la manutenibilità e la flessibilità del design web.

vai al corso di css

Sintassi di base:

body {
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
}

h1 {
    color: #333333;
    text-align: center;
}

JavaScript

JavaScript è un linguaggio di programmazione lato client utilizzato per creare interazioni dinamiche sulle pagine web. Permette di manipolare il DOM (Document Object Model), gestire eventi e comunicare con il server senza ricaricare la pagina.

vai al corso di javascript

Esempio di script JavaScript:

document.getElementById("myButton").addEventListener("click", function() {
    alert("Button clicked!");
});

Formati di scambio dati

I formati di scambio dati sono utilizzati per trasferire informazioni tra client e server. I formati più comuni sono JSON e XML.

JSON (JavaScript Object Notation)

JSON è un formato leggero per lo scambio di dati, facile da leggere e scrivere sia per gli esseri umani che per le macchine. È spesso utilizzato nelle comunicazioni client-server.

Sintassi di base:

{
    "name": "John Doe",
    "age": 30,
    "city": "New York"
}

Elementi principali:
- Oggetti: { "key": "value" }
- Array: [ "value1", "value2" ]
- Valori: stringhe, numeri, booleani, null

XML (eXtensible Markup Language)

XML è un formato di scambio dati che utilizza tag per definire la struttura dei dati. È più verbose di JSON ma è molto flessibile e ampiamente utilizzato.

Sintassi di base:

<person>
    <name>John Doe</name>
    <age>30</age>
    <city>New York</city>
</person>

Elementi principali:
- Tag: <tagname>content</tagname>
- Attributi: <tagname attribute="value">content</tagname>
- Prolog: <?xml version="1.0" encoding="UTF-8"?>

Interazione tra client e server

L’interazione tra client e server avviene tramite il protocollo HTTP, utilizzando formati di scambio dati come JSON e XML per trasmettere informazioni. Ecco un esempio di come avviene questo scambio:

Richiesta dal client:

fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data));

Risposta dal server:

{
    "name": "John Doe",
    "age": 30,
    "city": "New York"
}

Esercitazioni pratiche

Esercizio di creazione di pagine web:
- Creare una semplice pagina web utilizzando HTML, CSS e JavaScript. Gli studenti dovranno implementare una pagina con una struttura ben definita, stili CSS e interazioni dinamiche tramite JavaScript.
Esercizio di manipolazione dei dati JSON:
- Creare uno script JavaScript che recupera dati JSON da un server e li visualizza in una pagina web. Gli studenti dovranno utilizzare fetch per inviare richieste HTTP e gestire le risposte JSON.
Esercizio di parsing di XML:
- Creare uno script JavaScript che carica e analizza un documento XML, visualizzando i dati estratti in una pagina web. Gli studenti dovranno utilizzare il DOMParser per analizzare il documento XML.

5.2.2 – Tecnologie lato client e formati di scambio dati