Appunti su JavaScript e jQuery

Applicazioni informatiche per il multimediale

Fabio Catalano

Appunti sul JavaScript e jQuery – Basato su dispense

Appunti applicazioni informatiche per il multimediale

Introduzione alla programmazione

Concetti fondamentali di programmazione

I calcolatori hanno la caratteristica di essere programmati. Sono in grado di svolgere compiti diversi forniti dall'utente mediante un programma. Tuttavia una programmazione diretta nella macchina hardware creerebbe serie difficoltà. Grazie alla definizione di macchine virtuali (software) sopra la macchina hardware l'utente riesce a interagire con la macchina fisica dando un opportuno linguaggio di comandi.

Il software moderno è organizzato secondo una gerarchia di macchine virtuali. Il primo strato di macchina virtuale con cui noi interagiamo è rappresentato dall'insieme di programmi che costituiscono il sistema operativo. Concetto di gerarchia di macchine virtuali possibilità di definire nuove funzioni astratte che verranno tradotte per i livelli sottostanti.

Programmare = definire un nuovo insieme di aperte "comandi virtuali" che consistono in una sequenza di istruzioni che devono essere. Per scrivere un programma ho bisogno di linguaggi di programmazione "ad alto livello" cioè che mi permette di definire funzioni (comandi) virtuali in cima alla gerarchia. Per eseguire un programma (scritto in un linguaggio di programmazione ad alto livello) devo tradurlo nel linguaggio della macchina virtuale sottostante fino ad arrivare la traduzione del linguaggio macchina.

Per eseguire un programma ho quindi bisogno di:

• Sistema operativo: insieme di programmi per la gestione dell'elaboratore.
• Interpreti e compilatori: programmi che traducono le funzioni dei linguaggi ad alto livello in funzioni appartenenti ai linguaggi sottostanti… fino a linguaggio macchina.

Programma scritto dal programmatore: insieme di istruzioni scritte in un linguaggio di programmazione ad alto livello = codice sorgente (Generalmente contenuto in un file con estensione che indica il linguaggio usato).

Linguaggio

• Alfabeto: insieme di simboli con cui si possono costruire i termini del linguaggio (Lessico).
• Sintassi: definita da una grammatica che fornisce le regole di composizione dei termini in frasi ben formate del linguaggio.
• Semantica: definisce il significato delle frasi ben formate del linguaggio.

Analizzatore sintattico (parser)

Analizzare la frase e decide se sono frasi ben formate del linguaggio o no.

Sintassi

• Articoli (Indicati con ART)
• Nomi (Indicati con N)
• Aggettivi (indicati con A)
• Verbi (indicati con V)
• Sintagma nominale (indicato con SN)
• Sintagma verbale (Indicato con SV)
• Frase (indicata con F)

Codice

• Frase (Indicata con F) SN SV
• Sintagma verbale (Indicato con SV) V SN
• Sintagma nominale (indicato SN) ART N

Sintassi

Il cane mangia una mela

Il cane mangia il cane

Mentre saranno scorrette frasi del tipo

Il cane il mela

Mangia il cane la mela

Semantica

La ragazza mangia un pollo corretto

Un pollo mangia la ragazza scorretto

Linguaggio di programmazione

Frasi ben formate = codice del programma

Semantica = esecuzione del programma

Occorre tradurre il programma (scritto in un linguaggio ad alto livello) in istruzioni in linguaggio macchina. Durante questa traduzione viene anche effettuato il controllo sintattico!

Due tecniche per effettuare questa traduzione:

• Compilazione
• Interpretazione

Compilare un programma

Tradurre il programma P nel linguaggio macchina della macchina M Pc eseguire Pc sulla macchina M. La traduzione viene eseguita da un compilatore.

• > compila file_sorgente.src file_eseguibile.exe
• > esegui file_eseguibile.exe

Pro: La compilazione è più efficiente, perché l'esecuzione del programma compilato, cioè tradotto in linguaggio macchina (il cosiddetto "eseguibile") è molto veloce.

Contro: Per eseguire il programma su macchine diverse occorre ri-compilare i sorgenti!

Interpretare un programma

Richiedere l'esecuzione del programma P sulla macchina M. Ogni istruzione di P viene tradotta (interpretata) in un insieme di istruzioni nel linguaggio macchina di M. Pi l'insieme di istruzioni Pi viene eseguito sulla macchina M. La traduzione viene eseguita da un interprete.

• > interpreta&esegui file_sorgente.src

Pro: L'interpretazione è più flessibile, perché posso eseguire il programma su macchine diverse.

Contro: È meno efficiente (perché ogni volta, prima di eseguire, ritraduce).

Approccio misto (per es. Java)

Tradurre il programma in un linguaggio intermedio (bytecode), indipendente dalla macchina. Pb eseguire Pb. Il primo passo viene eseguito da un compilatore, il secondo da un interprete.

• > compile file_sorgente.src file_intermedio.obj
• > interpreta&esegui file_intermedio.obj

Somma i vantaggi dei due approcci: È efficiente (perché il linguaggio intermedio è "molto vicino" al linguaggio macchina e la sua interpretazione - ed esecuzione - è veloce). È flessibile (perché posso eseguire il programma compilato su macchine diverse).

Il file sorgente, contenente un programma Java (file.java), viene prima compilato, generando un file in ByteCode (file.claa). Il file in ByteCode è un file in linguaggio macchina per una macchina non esistente, detta macchina virtuale o Java Virtual Machine. Il ByteCode viene quindi interpretato (e può essere fatto su ogni piattaforma). In questo modo il file sorgente non viene distribuito, mentre il file ByteCode distribuito è il medesimo per tutte le piattaforme.

Linguaggi ad alto livello

Linguaggi imperativi

Basati sul concetto di assegnamento: le istruzioni sono sostanzialmente operazioni di modifica delle strutture dati [es: Fortran, Cobol (non strutturati); Pascal, C (strutturati)].

Linguaggi funzionali

Basati sul concetto di funzione: le istruzioni sono funzioni che vengono valutate [es: Lisp].

Linguaggi dichiarativi

Descrivono che cosa deve essere risolto, il problema, e non cosa si deve fare per risolverlo [es: Prolog, SQL].

Linguaggi ad oggetti

Basati sul concetto di dato come oggetto attivo, in grado di ricevere e inviare messaggi [es: Smalltalk, C++, CLOS, Java].

Linguaggi di scripting

Linguaggi di programmazione interpretati che sono destinati in genere a compiti di automazione del sistema o delle applicazioni (macro), o ad essere usato all'interno delle pagine web. [es: Javascript, Php, Asp, Jsp, Python]

Scopo di un programma

Lo scopo di un programma è quello di risolvere un problema (un insieme di problemi). Bisogna analizzare il problema ed identificare una procedura di soluzione, ovvero un algoritmo. Un algoritmo è insieme ordinato di passi che descrivono i dati che devono essere utilizzati e determinano la sequenza di azioni elementari che devono essere svolte per risolvere un problema (un insieme di problemi).

Bisogna poi tradurre l'algoritmo in un insieme di istruzioni per eseguire quelle azioni sui dati = programma. Se il problema è complesso (es: gestione automatizzata di conti correnti bancari) occorre un sistema software (= insieme di programmi).

Tecniche di programmazione

Nello sviluppo del software, la fase di analisi e progettazione è importantissima. Si parte dall'analisi del problema e dalla progettazione dell'architettura del sistema (attraverso tecniche di programmazione diverse). Si passa poi alla realizzazione delle diverse componenti dell'architettura.

Programmazione non strutturata

Il programma è costituito da un unico blocco di codice detto "main" dentro il quale vengono manipolati i dati in maniera totalmente sequenziale. Fortemente limitato e pieno di svantaggi (molte istruzioni vengono ripetute!).

Programmazione procedurale/funzionale (metodo classico)

Il concetto base è quello di raggruppare i pezzi di programma ripetuti in porzioni di codice utilizzabili e richiamabili ogni volta che se ne presenti l'esigenza (procedure/funzioni). Ogni procedura può essere vista come un sottoprogramma che svolge una ben determinata funzione e che può utilizzare uno o più parametri (duttilità). Il main continua ad esistere ma al suo interno appaiono soltanto le invocazioni alle procedure definite nel programma. Vantaggio principale è il sostanziale abbattimento del numero di errori.

Programmazione modulare

Prevede di raggruppare le procedure aventi un dominio comune (ad esempio, procedure che eseguono operazioni matematiche) in moduli separati (le cosiddette librerie). In questo modo le procedure possono essere riutilizzate anche da programmi diversi. Un singolo programma non è più costituito da un solo file, ma da diversi moduli.

Programmazione orientata agli oggetti

È possibile con linguaggi orientati agli oggetti. È basato sul fatto che esistono una serie di oggetti che interagiscono vicendevolmente, scambiandosi messaggi ma mantenendo ognuno il proprio stato ed i propri dati. Le caratteristiche di un oggetto vengono denominate proprietà e le azioni sono dette metodi. I metodi sono le funzioni, mentre le proprietà sono i dati.

Paradigma di programmazione che prevede la definizione di oggetti software che interagiscono vicendevolmente tra di loro scambiandosi messaggi ma mantenendo ognuno il proprio stato e i propri dati.

Non interessa l'implementazione interna del codice, ma le caratteristiche e azioni che l'oggetto è in grado di svolgere e espone all'esterno.

Es: Lavatrice

• Caratteristiche: Marca – Velocità – interfaccia ecc.
• Azioni: Lavaggio – Prelavaggio – Centrifuga

Nella programmazione orientata agli oggetti

• Caratteristiche: Proprietà
• Azioni: Metodi
• Classe: Raggruppamento di tutti gli oggetti che hanno le stesse proprietà e utilizzano gli stessi metodi: la classe finestra del Browser (Window).
• un oggetto è un'istanza delle sua classe di appartenenza la finestra del MIO browser.

Ingredienti per la realizzazione di un programma

Concetti fondamentali di programmazione

Astrazioni sui dati:

• Dati di base di un calcolatore: Bit – Byte – Cella Di Memoria
• Necessità di astrarre dal concetto elementare di bit/byte e definire dei tipi di informazione più vicini a quelli che servono nella definizione di problemi reali.

Due passi:

• Definizione di tipi elementari di base;
• Definizione di costruttori per aggregare in tipi di dati più complessi;

Tipi elementari di dati

Ci possono essere differenze da linguaggio a linguaggio, ma principalmente sono:

Tipi di elementi Base Operatori

• Numerici: numerici Int – Short – Long – Real – Double + - * / sqrt
• Stringhe: caratteri Char (ASCII su 8bit, e UNICODE su 16bit) – String (qualche linguaggio lo Succ, Precha come tipo base)
• Boolean: stringhe TRUE e FALSE Concact, Add, Substring
• Per le enumerazioni: booleani elenchi di costanti specificate (ES: colori: red, blue, white, black ecc.) And, Not, Or, If

Variabili, espressioni, assegnamento

Assegnamento: modo per inserire un valore dentro una variabile

• int y = x + 7
• int x dichiaro la variabile
• x = "c"
• x = 3 assegno un valore
• x = 3 + 5 scrivo un'espressione per AGGIORNARE il valore

Errore di tipo di dati

VARIABILE = ESPRESSIONE

Lato sinistro (left hand side) lato destro (right hand side) deve essere una variabile Espressione che viene valutata

La memoria principale

È formata da un insieme di celle; ogni cella ha un indirizzo e un contenuto.

Variabile

Nome Indirizzo Contenuto simbolico

Espressioni, assegnamento

Espressione: Può essere costruita usando costanti e variabili e usando gli operatori specificati per il tipo di dati costanti e variabili.

• int x
• x=2+4
• x=y+z

Costruttori per creare tipi complessi

Approccio composizionale per aggregare tipi di dati in nuovi tipi di dati più complessi. Il numero e le caratteristiche dei costruttori di tipi complessi può variare da linguaggio a linguaggio, ma i meccanismi fondamentali sono:

Tipi complessi

• Array: Struttura dati (vettore) composta da dati omogenei aventi lo stesso tipo
• Record: Prodotto cartesiano di tipi differenti. Le sue istanze sono gli elementi del prodotto cartesiano
• Set:
• File:
• Puntatori: Meccanismo per utilizzare gli indirizzi dei dati. Astrazione del concetto di indirizzo di memoria: si può definire l'indirizzo per un qualunque tipo di dati.

Array

Array di interi: Vettore composto da numeri interi:

• 23 listaDiNumeri [0] 23 Il selettore [] permette di accedere alle componenti del vettore attraverso la loro posizione.
• 9 listaDiNumeri [1] 9
• 5 listaDiNumeri [2] 5 listaDiNumeri [0]=23
• 45 listaDiNumeri [3] 45 listaDiNumeri [1]=4+5
• 78 listaDiNumeri [4] 78

Array di interi x=0;

• 0 listaDiNumeri [5] 0 listaDiNumeri[x]=23
• 99 listaDiNumeri [6] 99 x=x+1
• 3 listaDiNumeri [7] 3 listaDiNumeri[x]=4+5
• 52 listaDiNumeri [8] 52
• 9 listaDiNumeri [9] 9

Si possono definire vettori di qualunque tipo di dati. Le dimensioni del vettore possono essere soggette a restrizioni in alcuni linguaggi (devono essere prefissate in alcuni, non in altri). Gli indici del vettore possono essere fissi (solo numeri interi) in alcuni linguaggi, o possono essere un qualunque tipo elementare.

Record

Prodotto cartesiano di tipi differenti. Le sue istanze sono gli elementi del prodotto cartesiano.

Es: Record conto

Le istanze di questo record sono delle triple, come per esempio {contatore numero, (1, 2500, "rossi") int denaro, char[] nome}

Posso definire delle variabili per ottenere delle istanze.

Es: Conto c.c.

• numero=1
• c.denaro=2500
• c.nome="rossi"

Puntatore

Meccanismo per utilizzare gli indirizzi dei dati. Astrazione del concetto di indirizzo di memoria: si può definire l'indirizzo per qualunque tipo di dati.

Introduzione a JavaScript

Funzionalità di JavaScript

Un linguaggio di programmazione serve per eseguire autonomamente determinate operazioni:

• Elaborazioni di dati
• Gestione dell'input e dell'output di un sistema
• Gestione del file system
• ecc.

JavaScript supporta solo alcune di queste funzionalità.

Standardizzazione di JavaScript

Core JavaScript prima versione: LiveScript (Netscape), poi rinominato JavaScript per la sua somiglianza a Java. Versione proprietaria Jscript (Microsoft). Standardizzazione attuata dall'ECMA (ECMA-262, o ECMAScript) nel 1999. L'ultimo standard, di giugno 2015, è ECMA-262 edition 6. È anche uno standard ISO.

Caratteristiche di JavaScript

È un linguaggio di Scripting, debolmente orientato agli oggetti. Debolmente tipato ed interpretato. Il nucleo del linguaggio (core JavaScript) ha due estensioni: lato Client – lato Server.

Scripting

I linguaggi di Scripting non sono necessariamente semplici; hanno caratteristiche diverse (normalmente semplificate) rispetto ai normali linguaggi di programmazione. Si prestano allo sviluppo di applicazioni semplici, al contrario di progetti complessi.

Linguaggio orientato agli oggetti

Prevede la definizione di oggetti software che interagiscono vicendevolmente tra di loro scambiandosi messaggi ma mantenendo ognuno il proprio stato e i propri dati.

Nella programmazione ad oggetti

• Caratteristiche: proprietà
• Azioni: metodi
• Classe: raggruppamento di tutti gli oggetti che hanno le stesse proprietà e utilizzano gli stessi metodi le finestre del browser
• Un oggetto è un'istanza della sua classe di appartenenza la mia finestra

Core JavaScript

Sottoinsieme comune a Javascript lato client e lato server.

JavaScript lato Client

Interprete JavaScript incorporato nel browser. JavaScript interagisce con il documento HTML attraverso il document Object Model (DOM).

Interpretazione

Le istruzioni del linguaggio vengono eseguite direttamente dall'interprete; esso legge un'istruzione e effettua l'operazione corrispondente. Non ci sono passaggi intermedi (come nella compilazione). Eventuali errori vengono rilevati solo al momento dell'esecuzione (run-time).

Debugging di JavaScript

Debugging: processo di correzione degli errori in un programma; una volta scritto un programma in JavaScript, si apre con il browser il documento che lo contiene. L'interprete di JavaScript nel browser legge lo script. Gli errori di sintassi sono rilevati quando l'interprete legge lo script. Gli errori "logici" sono rilevati solo quando lo script viene eseguito.

JavaScript e l'interattività

Gli eventi corrispondono ad azioni dell'utente. I gestori di eventi permettono di associare effetti alle azioni dell'utente:

• ES: Cliccare un bottone (onClick)
• Passare il puntatore del mouse su un oggetto della pagina (onMouseOver)
• Caricare una pagina (onLoad)

Nel modello ad oggetti JavaScript lato client gli elementi HTML sono associati ai gestori di eventi. Ad elementi come un link (il tag ) può essere associato il gestore evento onClick. All'oggetto Window sono associati i gestori di eventi onLoad e onResize ecc. Tramite i gestori di eventi lo sviluppatore può associare un evento all'esecuzione di uno script.