Javascript
Obiettivo principale è esegurie codice clientside
Un pò di storia
nato all’inizio della prima guerra dei browser (da netscape, explorer è in visual basic comunque non compatibile con JS) come il fratellino di java nel senso che runnava ovunque, attualmente è ECMAScript, ed è la versione migliore. (era pensato per fare microscript!)
ECMAScript quando è nato è il nucleo a tutte le implementazioni JS eseistenti fino a quel momento (che è stato molto caotico!)
Anche l’unico linguaggio che va sul browser. Typescript sarebbe molto carino 😀.
Esecuzione di JS
Client side o Server-side
Possiamo eseguire server-side (node) per eseguire codice JS in server side, anche se non ho più questa integrazione con il client (come eventi, e simili).
Ossia l’evento triggera il codice JS corrispondente!
-
Esecuzione sincrona o asincrona
Sincrona = caricamento dello script (quando carica, il browser non fa altro! È una cosa sincrona, quindi non carica altro HTML e simili).
Asincrono su eventi DOM o callback di eventi di rete. (esempio chiamata AJAX asincrona, mentre la chiama sincrona è molto brutto perché il server è bloccatooo)
Brevi e veloci per i sincroni! No n2.
Posizionamento del codice (3)
- Si può posizionare inline come il codice css
-
Esempio 1.
- Sezione script all’inizio, come style di css
-
Esempio 2.
- File separato
-
Esempio 3.
Questi sono i metodi principali, solitamente si preferisce il terzo metodo per migliore gestione degli script.
ma col terzo metodo si deve fare molta attenzione sul tempo di caricamento dlelo script (che è sincrona!)
Cose del linguaggio
Cose come oggetti, arrays, somme, comparazioni, JSON, Dati, li hai fatti troppo dai.
Questo è tutto ecmascript, mentre se andiamo ad interagire con il browser abbiamo altri metodi!.
Interpolazione (!!)
Se esiste una variabile visibile nello scope attuale, allora lo sostituisco nella stringa. Principalmente questo. Per la prima volta l’oggetto della computazione sono frammenti di HTML, questo permette di dividere html e JS (anche se non ho capito bene come).
IIFE !
Queste sono funzioni dichiarate e subito eseguite, sono utili per avere delle variabili private. (con solamente gli oggetti infatti non è possibile definire tali variabili.
Client defined classes
Un sacco di robe, non ha senso scriverle, quindi le enumero in modo molto breve qui
Window
In pratica è il tab della pagina di questo istante (sia in lettura sia in scrittura), contiene in sé il documento.
Document
Sono la rappresentazione in memoria del documento che è mostrato (quindi ci sono tutti i nodi che ci importano!
Ajax
PROBLEMA: Ogni volta in cui devo cambiare elemento dell’interfaccia, non posso fare altro che duplicare la pagina, ossia fare una piena richiesta HTTP con le modifiche, infatti è grande cambio di informazioni, nel senso che non mi servirebbe.
Introduzione Ajax
- Slide introduzione
La cosa carina che significa anche AIACE 😀, ma non c’entra niente.
L’obiettivo è caricamenti asincroni per frammenti XML con questo aggiorno la pagina HTML, invece di cambiare da un altro URL.
Oggi XML è considerato troppo verboso, in verità andiamo a scambiare frammenti JSON di cui abbiamo parlato in Alcuni linguaggi di Markup (non impo) 🟥+, e sempre in Javascript.
Ora il formato è tipo:
- carico HTML molto vuoto
- carico applicazione JS anche complessa
- L’applicazione fa richieste e popola la pagina in modo attivo
- Utente fa altra attività , triggera altre richieste, la pagina cambia.
Ecco l’interattività !
-
Slide AJAX
-
Confronto architettura scambi HTML e AJAX
Quando faccio la richiesta, il browser è bloccato, poi quando il server finisce il browser riceve tutto, butta via vecchio e comincia a fare le cose nuove. (continuo stop and go)
Nota: browser non si blocca per l’utente (script sono molto veloci che non sembra bloccarsi!)
Un esempio di applicazione AJAX è maps.google.com, perché inizia a caricare secondo attività dell’utente, le piastrelle a un certo livello i zoom 🙂
Struttura processo ajax (4)
-
Slide processo applicazione Ajax
-
Creazione della richiesta
On Ready state change chiama la funzione ogni volta che cambia lo stato (che abbiamo detto possono essere 5 valori.
se è 4 la richiesta è tornata ed è stata elaborata →completata:D
-
Invio della richiesta (DIFFERENZA POST E GET!!!!)
-
Gestione della risposta
Vantaggi svantaggi AJAX
Importantissimo per AJAX e js!
-
Navigazione della pagina non è sincronizzato con lo scambio di dati! mentre prima sì
-
Slide vantaggi AJAX
- Usabile, interattiva, senza tempi morti
- Molto più veloce, per minore numero di pacchetti mandati
- Chiunque lo implementa :D
-
Slide svantaggi AJAX
- Devo aggiungere step di navigazione di history fittizi per poter andare avanti indietro nella storia! (non lo fa il browser ma lo fa la mia applicazione) si chiama routing
- Ajax è inerentemente non lineare perché posso cambiare contenuto ovunque, anche mentre il mio sintetizzatore sta leggendo la pagina (per accessibilità invece serve la linearità ).
- L’implementazione può cambiare da browser a browser, qualcosa potrebbe essere rotto qui e non in un altro browser.
Framework Ajax
XMLHTTPRequest
È la libreria per Ajax, ma è molto molto macchinosa! Per questo motivo utiliziamo altro, come JQuery che vedremo dopo.
jQuery
È un framework che è nato per semplificare tutta la parte macchinosa dell’applicazione AJAX, oggi non è più utilizzato perché le funzionalità sono già direttamente presenti sul browser. È più per mantenere codice vecchio. Ce ne sarebbero altre ma non le ha descritte