Tecnologie Web Lezione 1

Questions and Answers

Quale protocollo consente ai client di fare domande ai server nel World Wide Web?

HTML

HTTP (correct)

TCP

Il protocollo HTTP tiene traccia delle richieste fatte in passato dai client.

False

Le risorse nel World Wide Web sono identificate tramite degli ____. (parola mancante)

URLs

Cosa significano le sigle HTML e CSS?

HTML: Hypertext Markup Language; CSS: Cascading Style Sheets Signup and view all the answers

Quanti step compongono il ciclo di vita di una variabile?

3 Signup and view all the answers

Le variabili in JavaScript sono accessibili soltanto prima della linea in cui sono state dichiarate.

False Signup and view all the answers

Cos'è l'Hoisting in JavaScript?

Il comportamento secondo il quale la dichiarazione delle variabili o delle funzioni viene spostata all’inizio del loro scope. Signup and view all the answers

Prima di ECMAScript 6 (2015) le variabili venivano dichiarate con la parola chiave ____, che effettuava l’hoisting di queste alla funzione più vicina.

var Signup and view all the answers

Abbina i seguenti operatori di uguaglianza alla loro descrizione:

== = Confronta se due operandi sono uguali di valore, anche se di tipo diverso === = Confronta il tipo degli operandi oltre al valore !== = Confronta se due operandi sono diversi in valore e tipo Signup and view all the answers

Cosa restituisce il metodo fetch() in JavaScript moderno?

Una promessa Signup and view all the answers

Cosa contiene l'oggetto Response restituito dal metodo fetch()?

Diversi metodi per accedere al body in formati diversi, ma solo uno per risposta. Signup and view all the answers

Node.JS è un ambiente di esecuzione per codice JavaScript e utilizza un modello sincrono di default.

False Signup and view all the answers

Qual è il comando per installare Node con nvs?

nvs install packageName Signup and view all the answers

Cosa seleziona l'elemento :checked?

elementi di una checkbox o di un radio button che sono stati selezionati dall'utente Signup and view all the answers

Quali sono gli pseudo-elementi elencati nel documento?

::first-line Signup and view all the answers

La proprietà float può essere utilizzata per posizionare elementi nella direzione desiderata.

True Signup and view all the answers

Quali sono i valori possibili della proprietà 'position'? La proprietà __________ di default posiziona l'elemento esattamente dove dovrebbe essere secondo il normale flow del documento.

static Signup and view all the answers

Abbinare i seguenti layout CSS con la loro descrizione:

Fixed-width layouts = Dimensione fissa, adatta soprattutto a dispositivi con le stesse dimensioni dello schermo. Liquid (Fluid) layouts = Dimensione dinamica basata sulla larghezza delle colonne impostate in percentuale rispetto allo schermo. Adaptive layouts = Utilizzano media queries per scegliere quale layout fisso visualizzare basandosi sulla dimensione del dispositivo. Responsive layouts = Contenitori e media fluidi, utilizzo di media queries per una visualizzazione ottimale su ogni dispositivo. Signup and view all the answers

Cosa succede quando si verifica l'evento 'data'?

Le nuove informazioni vengono pushate nel body. Signup and view all the answers

Cosa succede quando si verifica l'evento 'end'?

Si leggono tutti i dati che erano stati accumulati nel body e si fa il parsing. Signup and view all the answers

Qual è uno dei principali problemi di HTTP che il session tracking cerca di superare?

Stateless Signup and view all the answers

I cookies possono essere manipolati dal server.

False Signup and view all the answers

Cosa sono i metodi ___ di Express?

middleware Signup and view all the answers

Cosa fa il middleware 'express.static' di Express?

Gestisce automaticamente le richieste per file statici. Signup and view all the answers

Quanti tipi di nodi diversi identifica il DOM?

12 Signup and view all the answers

Qual è il tipo di nodo che rappresenta la radice del DOM?

document Signup and view all the answers

Come si chiama il metodo che ritorna il primo elemento che fa match con il selettore passato in input?

document.querySelector Signup and view all the answers

La proprietà 'target' consente di determinare quale sia stato l'elemento a scaturire l'evento.

True Signup and view all the answers

Come si genera un evento customizzato?

tramite il metodo dispatchEvent(eventName) Signup and view all the answers

Quale attributo può essere aggiunto alla dichiarazione di script esterni per modificare l'ordine di esecuzione?

both Signup and view all the answers

Cos'è il LocalStorage?

consente di salvare coppie chiave-valore Signup and view all the answers

Le promesse sono una sorta di collegamento tra codice produttore e codice consumatore.

True Signup and view all the answers

Cos'è il metodo 'then' delle promesse?

prende in ingresso due callback Signup and view all the answers

Cosa ottieni applicando una funzione di hashing alla stringa ottenuta concatenando header, payload e una chiave segreta?

Firma digitale Signup and view all the answers

Cosa significa l'acronimo API?

Interfaccia di programmazione delle applicazioni Signup and view all the answers

Quale linguaggio è noto per essere dinamicamente e debolmente tipato? ______, essendo dinamicamente e debolmente tipato, è un linguaggio molto pratico per la manipolazione di semplici pagine web.

JavaScript Signup and view all the answers

Abbina il tool di OpenAPI con la sua funzione:

Swagger Editor = Rende visibile specifiche e documentazione Swagger Codegen = Consente la generazione automatica di codice server-side e client-side Swagger UI = Interfaccia rapida ed intuitiva per la visualizzazione delle richieste HTTP Signup and view all the answers

TypeScript è un linguaggio invertibile.

False Signup and view all the answers

Quali sono le due sintassi supportate da Sass?

SCSS e CSS Signup and view all the answers

Cosa sono le variabili in Sass?

Le variabili in Sass sono modi di riutilizzare valori all'interno dei fogli di stile; quando un file Sass viene compilato, le variabili vengono sostituite con il loro valore. Signup and view all the answers

Cosa permette il concetto di nesting in Sass?

Rendere il codice più leggibile Signup and view all the answers

I mixins in Sass servono per riutilizzare un gruppo di dichiarazioni in CSS/Sass.

True Signup and view all the answers

I moduli in Sass sono file SASS da importare all'interno di altri file tramite l'uso della regola _____ .

@use Signup and view all the answers

Che cosa fa il middleware Connect-Flash?

Mostra messaggi flash all'interno della pagina dopo aver settato i messaggi flash e reindirizzato su una pagina specifica. Signup and view all the answers

Qual è il vantaggio principale dell'utilizzo di un ORM come Sequelize?

Portabilità e astrazione Signup and view all the answers

Un ORM come Sequelize può essere utilizzato solo con database relazionali.

False Signup and view all the answers

Come vengono definite le associazioni in Sequelize?

Attraverso metodi come hasOne, belongsTo, hasMany e belongsToMany. Signup and view all the answers

Quale delle seguenti affermazioni è vera su REST?

È uno schema architetturale Signup and view all the answers

Che cosa è JSON Web Token (JWT)?

Uno standard che rende sicura la comunicazione tra due parti utilizzando una stringa composta da header, payload e signature. Signup and view all the answers

Study Notes

Applicazioni Web: pila completa

Il World Wide Web è un sistema di documenti ipertestuali interconnessi tramite hyperlinks.
Le componenti principali del WWW sono HTTP (Hypertext Transfer Protocol) e HTML (Hypertext Markup Language).

HTTP

HTTP è un protocollo al livello di applicazione costruito sulla base del TCP/IP.
I Client effettuano domande ai Server, i quali rispondono.
Le risorse sono identificate tramite degli URL.
Tipologie di richieste HTTP:
- GET: Recupera (la rappresentazione di) una risorsa.
- POST: Carica nuovi dati alla risorsa specificata.
- PUT: Sostituisce la risorsa corrente col carico inviato.
- DELETE: Elimina la risorsa specificata.
Uno dei modi per passare informazioni aggiuntive attraverso richieste e risposte HTTP è quello degli Headers: un insieme di coppie chiave-valore.
Le risposte sono correlate da uno Status Code.

HTML

HTML è un linguaggio di annotazione per ipertesti.
I documenti definiti using HTML possono essere correlati di informazioni aggiuntive che ne permettono la modifica e la personalizzazione.
Tags HTML:
- ``: rappresenta l'intero documento.
- ``: contiene i metadati del documento.
- ``: rappresenta il contenuto effettivo della pagina.
- -: sono headings, atti a rappresentare titoli e sottotitoli.
- : rappresenta un paragrafo.
- <a>: definisce un hyperlink.
- ``: inserisce un'immagine nel documento.
Attributi Globali:
- id: specifica un identificativo univoco per un elemento.
- lang: specifica la lingua del contenuto del documento.
- style, class: per modificare lo stile del documento.

Form

``: serve per raccogliere gli input dell'utente.
action: specifica l'URL del form handler.
method: specifica il metodo della richiesta ( GET di default).
Gli input sono rappresentati come una serie di coppie chiave-valore.

Organizzare il contenuto del documento

Il contenuto di una pagina web può essere raggruppato in parti attraverso delle divisions o dei tag semantici.
Tag semantici:
- ``: contiene hyperlink per la navigazione.
- ``: indica il contenuto principale.
- ``: utilizzato per contenuti autonomi ed indipendenti.
- ``: per elementi legati in maniera tangenziale.
- ``: indica il piè di pagina.

Browser Dev Tools

A supporto dei web developer ci sono molte feature all'interno dei Browser, accessibili premendo il tasto F12.
Tra le più importanti:
- la possibilità di ispezionare il documento HTML.
- l'analisi delle richieste/risposte HTTP coinvolte.
- la misurazione delle performance.
- il debugging.

CSS

CSS (Cascading Style Sheets) è un linguaggio dichiarativo basato su regole che specifica il modo in cui un documento deve essere presentato agli utenti.
Uno stylesheet è un insieme di regole, definite nel seguente modo:
- Un selettore che specifica su quali elementi HTML le regole saranno applicate.
- Un insieme di dichiarazioni scritte nella forma proprietà: valore che specifica lo stile da applicare agli elementi.

Selettori

Specificano a quale elemento si applica una regola CSS.
Tipologie di selettori:
- Universale (o wildcard): *.
- Di tipo: tagName.
- Di ID: #elementId.
- Di classe: .className.
- Di attributo: [attribute].
Operatori aggiuntivi che consentono il matching parziale dei valori degli attributi:
- *='value': contiene 'value'.
- ^='value': inizia con 'value'.
- $='value': termina con 'value'.

Algoritmo Cascade

Algoritmo che produce in output la risoluzione (ossia, l'ordine di esecuzione) dei conflitti dati in input (dovuti a più regole che potrebbero essere applicate agli stessi elementi).
L'algoritmo considera quattro aspetti chiave, in ordine di importanza:
- Origine ed Importanza.
- Livelli.
- Specificità.
- Posizione ed ordine di apparenza della regola.

Pseudo-Classi e Pseudo-Elementi

Pseudo-Classi:
- Iniziano per :.
- Consentono di dare uno stile ad elementi in base allo stato di questi in un determinato momento.
- Esempi: :hover, :active, :focus.
Pseudo-Elementi:
- Servono a selezionare delle parti interne ad alcuni elementi.
- La sintassi è selector::pseudo-element.
- Esempi: ::first-letter, ::first-line, ::selection, ::before, ::after.

LAYOUTS

In HTML ogni elemento è un contenitore (scatola).
Il contenuto della scatola è la zona dove vivono i figli dell'elemento.
Padding è lo spazio che separa il contenuto di una scatola dal bordo di questa.
L'elemento Border rappresenta i limiti territoriali dell'elemento.
Margin crea dello spazio intorno all'elemento.

Flex Layout

Designato per layout mono-dimensionali in orizzontale o in verticale.
Dichiarato con la proprietà display: flex.
Ci sono degli elementi a livello di blocco, che hanno dei flex item come figli.
Ogni container flex ha un'asse principale ed un'asse trasversale.
Utili proprietà applicabili sui flex-items sono flex-grow, flex-shrink e flex-wrap.### Flexbox e Grid Layout
È possibile applicare proprietà ai container flex per modificare il posizionamento del contenuto
Due proprietà importanti sono justify-content e align-content, che gestiscono lo spazio libero lungo l'asse principale e trasversale rispettivamente
Il Grid Layout è un layout bi-dimensionale con righe e colonne, dichiarato con la proprietà display: grid
I container definiscono numero e dimensione delle righe e colonne, mentre i loro figli sono detti grid items
L'unità di misura fr assegna porzioni dello spazio disponibile ai grid items

Media Queries

Le media queries iniziano con la keyword @media e consentono di applicare stili CSS solo quando il dispositivo che visualizza il contenuto possiede certe caratteristiche
Esistono 3 tipi di output per le media queries: print, screen, all
Le media queries si basano su specifiche caratteristiche del dispositivo, dette Media Features

Responsive Design

Fixed-Width Layouts: layout a dimensione fissa
Liquid (Fluid) Layouts: layout a dimensione dinamica, ma solo in base alla larghezza delle colonne
Adaptive Layouts: layout un po' più flessibili che utilizzano media queries per scegliere quale fixed layout visualizzare a seconda della dimensione dello schermo
Responsive Layouts: un mashup di media queries e liquid layouts, caratterizzati da containers fluidi, media fluidi e media queries

JavaScript

Linguaggio di programmazione per scripting, debolmente tipato
Variabili possono essere dichiarate con let e const
Funzioni possono essere dichiarate con la sintassi function funName(params) { }
Funzioni possono essere anche assegnate ad una variabile
Costruttori possono essere utilizzati per creare oggetti simili

Oggetti

Sono contenitori di coppie chiave-valore
Possono essere creati con costruttore o letterale
Proprietà possono essere aggiunte o rimossi
Proprietà hanno tre attributi speciali: Writable, Enumerable, Configurable

Ereditarietà

Implementata attraverso l'uso della prototipazione
Gli oggetti hanno una proprietà speciale [[Prototype]] che può puntare ad un altro oggetto
Operazioni di cancellazione e scrittura lavorano direttamente sull'oggetto

Strutture di dati

Array: memorizzano sequenze ordinate di valori
Iterable: oggetti iterabili su cui è possibile utilizzare metodi come il for...of
Map: insiemi iterabili di coppie chiave-valore
Set: strutture dati che consentono di salvare valori a meno di ripetizioni

Gestione degli errori

Quando si incontra un errore, l'esecuzione dello script viene terminata immediatamente
Per evitare che ciò accada si utilizza una sintassi try/catch/finally

Moduli

Consente di suddividere un programma complesso in parti indipendenti
Un modulo è un file.js, contenente classi e funzioni, creato per manutenibilità, riusabilità, e separazione degli interessi

Ambiente del Browser

L'ambiente del browser presenta un oggetto "radice" chiamato window
Il BOM (Browser Object Model) fornisce contenuti aggiuntivi per dialogare con il browser in sé
Il DOM (Document Object Model) rappresenta il contenuto del documento corrente

Eventi

Gli eventi in un browser sono il segnale che sia accaduto qualcosa
Possono essere generati dal comportamento degli utenti, dallo stato di un Form o dal documento stesso
Per reagire agli eventi, esistono delle funzioni dette handler, che vengono eseguite al momento dello scoppio di un evento### Event Bubbling e Delegation
In JavaScript, esiste il concetto di Event Bubbling, che si verifica quando un evento succede su un elemento e tutti gli handler relativi a quell'elemento vengono eseguiti, seguiti dagli handler per lo stesso evento sul padre dell'elemento e così via fino al nodo radice del DOM.
Ciò consente l'idea della Event Delegation, che consiste nell'utilizzare un singolo handler su un antenato comune di elementi che generano eventi simili.

Ordine di Eseguzione

Quando una pagina web viene caricata, gli script sono eseguiti nell'ordine in cui appaiono, mentre il parsing della pagina è in pausa.
È possibile aggiungere attributi alla dichiarazione di script esterni per modificare l'ordine di esecuzione di questi ultimi, ad esempio utilizzando gli attributi "defer" e "async".

Browser Storage APIs

I web browser moderni forniscono molte API che possono essere utilizzate tramite JavaScript per salvare e recuperare informazioni, come Cookies, Local/Session Storage e IndexedDB.
Cookies sono piccole stringhe testuali utilizzate per trovare una soluzione al problema di HTTP di essere "stateless".
LocalStorage consente di salvare coppie chiave-valore con diversi vantaggi rispetto ai cookie.
IndexedDB è un database costruito all'interno di un browser che supporta tanti tipi diversi di dati.

Asincronismo

In JavaScript, le funzioni possono essere eseguite in modo sincrono o asincrono.
Le callback sono funzioni passate come argomento ad altre funzioni, con l'assunzione che queste vengano chiamate nel momento opportuno.
Le promesse sono una sorta di collegamento tra codice produttore e codice consumatore, che si creano attraverso dei costruttori e possono essere utilizzate per gestire sequenze di funzioni asincrone in modo elegante.

Richesti Network

JavaScript consente di recuperare dati da internet tramite il metodo fetch(), che prende in input un URL ed opzionalmente un array di opzioni.

Programmazione lato Server

La programmazione lato server si basa sull'idea che un server web possa generare pagine "al volo" in base ai parametri ricevuti dalle richieste HTTP.
Esistono linguaggi di programmazione e framework che semplificano le cose, come PHP, ASP e JSP.

Node.js

Node.js è un ambiente di esecuzione per codice JavaScript open-source e cross-platform.
Segue un modello basato su eventi, asincrono di default, e con input/output non bloccanti.
La scelta della gestione multi-threaded può essere inefficace e poco scalabile, mentre Node.js utilizza un meccanismo detto "single-threaded event loop".

NPM

NPM (Node Package Manager) è un driver che contiene milioni di pacchetti che è possibile importare nei propri progetti.
Fornisce un modo per scaricare e gestire dipendenze per progetti Node.js.

Creazione di una Web App con Node.js

Node.js consente di implementare server HTTP molto semplicemente, sfruttando moduli built-in ed il single-threaded loop.
Ci sono comunque dei problemi di cui tener conto, come il routing, il templating e il parsing.
Il componente Router può essere configurato affinché recuperi file statici dal file system.
Pug è un template engine che utilizza una sintassi sensibile ad indentazione e spazi bianchi per scrivere templates che possano essere facilmente compilati in codice HTML.
Per leggere il body della richiesta, è necessario operare in maniera asincrona, sfruttando gli eventi data e end generati dall'oggetto request.

Studying That Suits You

Use AI to generate personalized quizzes and flashcards to suit your learning preferences.

Description

Appunti del corso di Tecnologie Web, anno accademico 2023/2024. La lezione 1 tratta delle applicazioni web e della pila completa. Inoltre, vengono presentati i concetti di World Wide Web e di sistema di documenti ipertestuali.