Tecnologie Web Lezione 1
49 Questions
0 Views

Choose a study mode

Play Quiz
Study Flashcards
Spaced Repetition
Chat to lesson

Podcast

Play an AI-generated podcast conversation about this lesson

Questions and Answers

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

  • HTML
  • HTTP (correct)
  • IP
  • 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?

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

    Quanti step compongono il ciclo di vita di una variabile?

    <p>3</p> Signup and view all the answers

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

    <p>False</p> Signup and view all the answers

    Cos'è l'Hoisting in JavaScript?

    <p>Il comportamento secondo il quale la dichiarazione delle variabili o delle funzioni viene spostata all’inizio del loro scope.</p> 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.

    <p>var</p> Signup and view all the answers

    Abbina i seguenti operatori di uguaglianza alla loro descrizione:

    <p>== = 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</p> Signup and view all the answers

    Cosa restituisce il metodo fetch() in JavaScript moderno?

    <p>Una promessa</p> Signup and view all the answers

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

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

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

    <p>False</p> Signup and view all the answers

    Qual è il comando per installare Node con nvs?

    <p>nvs install packageName</p> Signup and view all the answers

    Cosa seleziona l'elemento :checked?

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

    Quali sono gli pseudo-elementi elencati nel documento?

    <p>::first-line</p> Signup and view all the answers

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

    <p>True</p> 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.

    <p>static</p> Signup and view all the answers

    Abbinare i seguenti layout CSS con la loro descrizione:

    <p>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.</p> Signup and view all the answers

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

    <p>Le nuove informazioni vengono pushate nel body.</p> Signup and view all the answers

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

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

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

    <p>Stateless</p> Signup and view all the answers

    I cookies possono essere manipolati dal server.

    <p>False</p> Signup and view all the answers

    Cosa sono i metodi ___ di Express?

    <p>middleware</p> Signup and view all the answers

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

    <p>Gestisce automaticamente le richieste per file statici.</p> Signup and view all the answers

    Quanti tipi di nodi diversi identifica il DOM?

    <p>12</p> Signup and view all the answers

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

    <p>document</p> 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?

    <p>document.querySelector</p> Signup and view all the answers

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

    <p>True</p> Signup and view all the answers

    Come si genera un evento customizzato?

    <p>tramite il metodo dispatchEvent(eventName)</p> Signup and view all the answers

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

    <p>both</p> Signup and view all the answers

    Cos'è il LocalStorage?

    <p>consente di salvare coppie chiave-valore</p> Signup and view all the answers

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

    <p>True</p> Signup and view all the answers

    Cos'è il metodo 'then' delle promesse?

    <p>prende in ingresso due callback</p> Signup and view all the answers

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

    <p>Firma digitale</p> Signup and view all the answers

    Cosa significa l'acronimo API?

    <p>Interfaccia di programmazione delle applicazioni</p> 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.

    <p>JavaScript</p> Signup and view all the answers

    Abbina il tool di OpenAPI con la sua funzione:

    <p>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</p> Signup and view all the answers

    TypeScript è un linguaggio invertibile.

    <p>False</p> Signup and view all the answers

    Quali sono le due sintassi supportate da Sass?

    <p>SCSS e CSS</p> Signup and view all the answers

    Cosa sono le variabili in Sass?

    <p>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.</p> Signup and view all the answers

    Cosa permette il concetto di nesting in Sass?

    <p>Rendere il codice più leggibile</p> Signup and view all the answers

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

    <p>True</p> 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 _____ .

    <p>@use</p> Signup and view all the answers

    Che cosa fa il middleware Connect-Flash?

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

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

    <p>Portabilità e astrazione</p> Signup and view all the answers

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

    <p>False</p> Signup and view all the answers

    Come vengono definite le associazioni in Sequelize?

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

    Quale delle seguenti affermazioni è vera su REST?

    <p>È uno schema architetturale</p> Signup and view all the answers

    Che cosa è JSON Web Token (JWT)?

    <p>Uno standard che rende sicura la comunicazione tra due parti utilizzando una stringa composta da header, payload e signature.</p> 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.
      • <p>: 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.

    Quiz Team

    Related Documents

    Riassunti Tecnologie Web PDF

    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.

    More Like This

    Computer Science Chapter: Understanding the Web
    28 questions

    Computer Science Chapter: Understanding the Web

    WorthwhileSupernova avatar
    WorthwhileSupernova
    Web Application Development
    8 questions

    Web Application Development

    FascinatingBigfoot avatar
    FascinatingBigfoot
    Responsive Design in Web Development
    5 questions

    Responsive Design in Web Development

    EducatedOrbit avatar
    EducatedOrbit
    Web Development Internet Programming
    10 questions

    Web Development Internet Programming

    SpiritualSerpentine4060 avatar
    SpiritualSerpentine4060
    Use Quizgecko on...
    Browser
    Open
    Browser
    Browser