Programmare lato client: Javascript e Typescript nell'ambiente browser

Programmare lato client: Javascript e Typescript

Javascript: Caratteristiche Base del Linguaggio

3 - Programmare lato client: Javascript e Typescript nell'ambiente browser Tecnologie Web MFN0634 - @ 2024 Claudia Picardi Javascript caratteristiche base del linguaggio I È un linguaggio interpretato Necessita di un motore di esecuzione (o interprete). È un linguaggio imperativo e strutturato I programmi sono costituiti di istruzioni che impartiscono un ordine all'agente di calcolo. Le istruzioni possono essere organizzate in blocchi e la logica del flusso di esecuzione dei programmi è espressa tramite istruzioni condizionali e cicli. È debolmente tipato I dati possono essere convertiti automaticamente da un tipo all'altro se il calcolo di un'espressione lo richiede: il numero 35 può diventare la stringa «35», il valore booleano false può diventare il numero 1, e così via. È dinamicamente tipato Il tipo di un'espressione viene stabilito solo a run time; non va dichiarato in anticipo quale tipo di dato sarà contenuto in una variabile o in un parametro, né che tipo di dato è restituito da una funzione. ... e non si chiama Javascript bensì ECMAScript, in breve ES. Tecnologie Web MFN0634 - @ 2024 Claudia Picardi

Javascript: Oggetti e Funzioni

2Javascript oggetti e funzioni ..... è un linguaggio object-oriented basato su prototipi In Javascript gli oggetti non hanno bisogno di classi per essere creati.

• un oggetto è una collezione di coppie proprietà/valore e può essere costruito semplicemente elencando tali coppie
• un oggetto può fare da prototipo ad un altro: il secondo oggetto erediterà le proprietà del primo, pur avendone di proprie
• esistono comunque le classi, per semplificare la creazione e l'inizializzazione di oggetti con le medesime proprietà e il medesimo prototipo

supporta alcuni aspetti di programmazione dichiarativa funzionale In Javascript le funzioni sono tipi di dati: le funzioni ...

• possono essere create dinamicamente
• memorizzate in variabili
• passate come parametri ad altre funzioni
• assegnate come valori a proprietà di un oggetto

Tecnologie Web MFN0634 - @ 2024 Claudia Picardi

Javascript o ECMAScript?

3 Javascript o ECMAScript? Javascript nasce come linguaggio di scripting per il web. Dopo un periodo selvaggio, in cui ogni browser dava la sua «interpretazione» di questo linguaggio, si è imposta la standardizzazione chiamata ECMAScript.

• ECMAScript è la specifica ufficiale del linguaggio ed è costantemente in evoluzione. Non tutte le caratteristiche più recenti sono tuttavia supportate da ogni browser. Le caratteristiche che vengono man mano aggiunte nelle specifiche ES servono a permettere una programmazione più concisa, leggibile, corretta, semplice, efficiente, manutenibile ... raramente esse introducono costrutti non replicabili, seppur in modo contorto, nelle versioni precedenti. L'ultima edizione che ha veramente modificato in modo sostanziale il linguaggio è stata la ES2015 (ES6) e ormai tutti i motori di esecuzione hanno recepito tali modifiche. Ne consegue che un programma scritto per una versione più recente di ECMAScript può essere tradotto in modo automatico in un programma valido per una versione precedente. Questo tipo di traduzione, detta «transpilazione», è piuttosto diffusa, per permettere ai programmi di girare anche su browser meno aggiornati, consentendo al tempo stesso ai programmatori di usare le feature più recenti del linguaggio.
• Javascript è l'implementazione di tale specifica realizzata dalla Mozilla Developer Network, che produce il browser FireFox
• Ormai tutti i browser implementano correttamente la specifica ECMAScript, pena l'esclusione dal mercato. Qualche differenza la si può riscontrare rispetto alle ultimissime feature del linguaggio ma sono problemi che si risolvono con il suddetto meccanismo della «transpilazione» e d'altra parte anche i programmatori non sono sempre aggiornatissimi sulle ultime feature del linguaggio! In questo corso non useremo nulla di posteriore alla specifica ES2020 (ES11)

Tecnologie Web MFN0634 - @ 2024 Claudia Picardi

Javascript: Un Linguaggio Interpretato - I

4Javascript: un linguaggio interpretato - I Le istruzioni di un linguaggio di programmazione vengono eseguite da un agente di calcolo. È l'agente di calcolo a decidere qual è il set di istruzioni valide e qual è il loro significato. L'agente di calcolo di base di tutti i dispositivi digitali è il processore, che comprende solo il linguaggio macchina. Il linguaggio macchina è però un linguaggio di bassisimo livello, sostanzialmente incomprensibile agli umani, ed è impossibile usarlo direttamente per scrivere programmi complessi. Per questa ragione sono stati introdotti i linguaggi di alto livello, che si dividono in due grandi famiglie: i linguaggi compilati e quelli interpretati. Con un linguaggio compilato, come ad esempio il C, il programmatore scrive il programma nel linguaggio in questione, per poi farlo tradurre una volta per tutte in linguaggio macchina da un tool detto compilatore. Il risultato di questo processo è un eseguibile ed è specifico per la famiglia di processori per i quali è stato realizzato. I linguaggi interpretati invece utilizzano un agente di calcolo di livello più alto del processore. Questo agente di calcolo, detto anche interprete o motore di esecuzione (lui sì compilato in linguaggio macchina) è in grado di eseguire direttamente le istruzioni di livello più alto perché esso stesso è stato programmato per farlo. L'agente di calcolo di livello più alto realizza una cosiddetta macchina virtuale: non c'è davvero una macchina fisica in grado di eseguire quelle istruzioni, ma agli occhi di chi realizza i programmi è come se ci fosse. Tecnologie Web MFN0634 - @ 2024 Claudia Picardi

Javascript: Un Linguaggio Interpretato - II

5 Javascript: un linguaggio interpretato - II Alcuni linguaggi, come Java, sono considerati ibridi perché il programmatore scrive in Java, quindi compila il programma in un linguaggio «intermedio» (Java ByteCode) il quale viene a sua volta interpretato da un motore di esecuzione (Java Virtual Machine). Lo schema non deve poi per forza essere a due livelli. Ad esempio io potrei inventare un linguaggio di programmazione «VoiceScript» che capisce le istruzioni espresse a voce in linguaggio naturale, e scrivere per esso un motore di esecuzione «VSmachine» usando JavaScript. Le istruzioni scritte in VoiceScript verrebbero interpretate da VSMachine, che le eseguirebbe una ad una invocando opportune funzioni Javascript. Per farlo avrebbe bisogno a sua volta di un motore di esecuzione per Javascript, il quale esegue le istruzioni Javascript invocando le opportune istruzioni in linguaggio macchina. Tecnologie Web MFN0634 - @ 2024 Claudia Picardi

Eseguire Javascript nel Browser: Motore e Ambiente di Esecuzione

6Eseguire Javascript nel browser: motore di esecuzione e ambiente di esecuzione Il motore di esecuzione realizza un ambiente di esecuzione costituito da «programma in esecuzione» + «memoria di esecuzione». È un ambiente vivo, in cui vengono costantemente aggiunti e tolti oggetti e variabili, o gli oggetti presenti cambiano stato. Un ambiente di esecuzione può inoltre essere corredato di API che mettono a disposizione del programmatore costrutti (classi, oggetti, funzioni) per interagire in modo specifico con quell'ambiente. In questa parte del corso, il motore di esecuzione e l'ambiente di esecuzione saranno interni al browser. Come già detto, il motore di esecuzione crea un ambiente di esecuzione separato («sandbox») per ogni pagina web caricata nel browser; al ricaricamento della pagina esso viene resettato. L'ambiente di esecuzione del browser contiene al suo interno l'oggetto document, accessibile ai programmi Javascript: esso è il DOM (Document Object Model) della pagina Web che è stata caricata. Inoltre, l'ambiente browser mette a disposizione una API (un insieme di classi, metodi e funzioni) chiamata DOM API per consultare e modificare l'oggetto document, intervenendo così sull'aspetto della pagina. Il browser mette anche a disposizione una API (fetch API) per effettuare richieste HTTP. Tecnologie Web MFN0634 - @ 2024 Claudia Picardi

Eseguire Javascript nel Browser: Associare Codice Javascript a una Pagina HTML - I

7 Eseguire Javascript nel browser: associare codice Javascript a una pagina HTML - I Per collegare uno script Javascript (estensione .js) ad una pagina HTML usiamo il tag SCRIPT: <script type="application/javascript" src="path/to/myscript.js"></script> Tipicamente SCRIPT viene inserito nella sezione HEAD della pagina. Lo script viene così eseguito immediatamente, senza aspettare che la pagina venga caricata. Questo può portare dei problemi se nello script vogliamo interagire con l'oggetto document, in quanto esso potrebbe essere ancora vuoto. Tecnologie Web MFN0634 - @ 2024 Claudia Picardi

Eseguire Javascript nel Browser: Associare Codice Javascript a una Pagina HTML - II

8Eseguire Javascript nel browser: associare codice Javascript a una pagina HTML - II Per rimandare l'esecuzione dello script a dopo che la pagina è stata caricata, ci sono tre modi: Spostare l'elemento SCRIPT al fondo della pagina, dopo la chiusura del BODY ma prima della chiusura dell'elemento HTML </body> <script type="application/javascript" src="path/to/myscript.js" ></script> </html>

• Usare l'attributo defer <script type="application/javascript" src="path/to/myscript.js" defer></script> . Oppure, dichiarare il type dello script come «module» <script type="module" src="path/to/myscript.js" ></script> Quest'ultima soluzione indica al browser che il file .js non è un programma a sé, bensì il «punto d'ingresso» di un'applicazione strutturata su più file o moduli. Per questa ragione è la soluzione più comunemente utilizzata.

9 Tecnologie Web MFN0634 - @ 2024 Claudia Picardi

I Tipi in Javascript - I

I tipi in Javascript - I I tipi base in Javascript sono: number, boolean, string, object, undefined, null, bigint, symbol (array e funzioni sono oggetti). Non c'è distinzione fra numeri interi e decimali (sono tutti number, rappresentati come floating point a 64 bit, come i double di Java), però esiste il tipo bigint per trattare numeri interi particolarmente grandi. I boolean sono true e false (sorprendente, vero?), e le stringhe sono ciò che ci si aspetta, ossia sequenze di caratteri (la codifica è UTF-16). Per definire una stringa in Javascript si possono usare sia le tradizionali virgolette ("), sia gli apici ('), sia il backtick o apice rovesciato ('). Virgolette e apici sono sostanzialmente equivalenti, tranne per il fatto che in una stringa definita con gli apici posso usare le virgolette senza necessità di sequenze di escape, e viceversa. Le stringhe definite con i backtick invece si comportano in modo un po' diverso: sono dette template literal e la loro caratteristica è che tutti i caratteri compresi fra il backtick iniziale e quello finale sono considerati parte della stringa, inclusi gli spazi, le tabulazioni, ecc. Degli oggetti (object) avremo modo di parlare in seguito e del tipo symbol non parleremo proprio perché la sua utilità esula un po' dagli obiettivi di questo corso. Tecnologie Web MFN0634 - @ 2024 Claudia Picardi