Progettare e Programmare Vol2 Cap9

capitolo 9 – Il linguaggio JavaScript
1. Caratteristiche generali di JavaScript
I
2. Gli elementi di base di JavaScript
LL
3. Oggetti ed eventi
E
CH
4. I moduli nelle pagine web
NI
ZA
Tibone, Progettare e programmare Vol 2 © Zanichelli editore 2019 1
Copia riservata all'insegnante Saverio Manglaviti - 5798018

9.1 Caratteristiche generali di JavaScript Indice
JavaScript è un linguaggio di scripting lato client, a eventi e a oggetti.
Un evento è una qualsiasi interazione tramite l’interfaccia grafica del browser:

per esempio il passaggio del mouse o clic su un oggetto, il trascorrere di un
I
dato tempo o anche la semplice apertura di una pagina web.
LL
Esempio: far apparire all’apertura della pagina un messaggio di benvenuto.
E
CH
NI
ZA
la funzione è eseguita al verificarsi
dell’evento onload, ossia quando
viene caricato il tag <BODY>
la funzione saluto() definita dallo script
usa il metodo alert()gestito dal browser

Altro esempio: rendere un testo sensibile al passaggio del mouse.
I
LL
le funzioni sopra() e fuori() cambiano
la scritta presente nell’oggetto HTML che
viene loro passato (obj.innerHTML)
E
CH
NI
ZA
l’oggetto qui è il paragrafo <P>, che richiama le funzioni

in base agli eventi onmouseover («quando il mouse è
sopra») e onmouseout («quando il mouse è fuori»)

Altro esempio: rendere un testo sensibile al passaggio del mouse.
I
E LL
CH
NI
ZA
la parola-chiave this («questo») indica l’oggetto in cui la si usa, qui il tag <P>;
è utile come abbreviazione o per copiare-e-incollare il codice in oggetti diversi

Il DOM è un modello standard a oggetti della struttura delle pagine HTML.
JavaScript opera sugli oggetti definiti dal DOM (Document Object Model)
dell’HTML, che è uno standard stabilito dal consorzio W3C.
I
E LL
un esempio di
CH
gerarchia del DOM
per una pagina HTML
NI
ZA

I
E LL
Ogni pagina web è considerata un oggetto document, cioè un documento,
CH
che è origine e contenitore di ogni altro oggetto del DOM.
NI
Per riferirsi a un oggetto specifico, in JavaScript si usa la parola-chiave
document seguita dall’operatore punto. Per esempio, l’espressione:
ZA
document.getElementById(nome_id)
invoca il metodo getElementById («trova l’elemento in base al suo id»)
dell’oggetto document, passando come parametro l’id del tag su cui agire.

I
LL
Esempio: usare getElementById per inserire un paragrafo nella pagina.
E
CH
al secondo paragrafo è associato l’identificatore
prova, senza specificare alcun contenuto
NI
ZA
il testo del secondo paragrafo è specificato mediante uno script: il metodo

getElementById individua il tag tramite l’id e gli assegna il testo tra doppi apici

Il BOM è un modello non standard a oggetti dell’interfaccia di un browser.
L’oggetto principale nella gerarchia BOM è window, cioè la finestra del browser.
I
LL
Il BOM è di livello superiore rispetto al DOM: include anche l’oggetto document,
E
giacché una pagina HTML esiste soltanto all’interno della finestra di un browser.
CH
Purtroppo però il BOM non è uno standard W3C. Ogni produttore di browser ha
NI
sviluppato il proprio modello BOM; questo può causare incompatibilità quando si
cerca di sfruttare con JavaScript oggetti e metodi resi disponibili dai diversi BOM.
ZA

Il BOM è un modello non standard a oggetti dell’interfaccia di un browser.
L’oggetto principale nella gerarchia BOM è window, cioè la finestra del browser.
I
LL
Esempio: usare il BOM per misurare la finestra del browser.
E
innerWidth e innerHeight sono proprietà
CH
del BOM che lo script usa per inizializzare w e h
NI
ZA
la terza variabile x, definita tramite l’id dimensioni, è il tag paragrafo su

cui si vuole agire; il testo concatena stringhe e variabili con l’operatore +

Il codice JavaScript si può scrivere in un file esterno con estensione .js.
Gli script si possono scrivere:
I
LL
• all’interno di un tag <SCRIPT> nella sezione <HEAD> o nella sezione <BODY>
E
• oppure in un file esterno, che deve avere estensione .js e si richiama dalle
CH
pagine HTML inserendo nella sezione <HEAD> il tag:
<script type="text/javascript" src="percorso del file"></script>
NI
L’uso dei file esterni è sempre raccomandabile, perché rende il codice
modulare e ne facilita il riutilizzo e la manutenzione.
ZA

9.2 Gli elementi di base di JavaScript Indice
In JavaScript il tipo di dato delle variabili è interpretato dal browser a runtime.
Esempio: le variabili implicite, cioè non dichiarate, e i tipi di dato in JavaScript.
I
E LL
CH
nb: si possono concatenare anche
i tag HTML, purché tra doppi apici
NI
ZA
Andrea non è tra apici, quindi per

il JavaScript non è una stringa, né
l’operatore typeof ricava a runtime il un numero, né un valore booleano
tipo di dato dei valori che lo seguono

In JavaScript una stessa variabile può assumere tipi di dato diversi.
Una variabile in JavaScript si dichiara scrivendo la parola-chiave var:
I
var X=5;
LL
var nome="Giovanni";
var valuta=true;
E
var y=null;
CH
var Zeta; (in quest’ultimo caso il dato è undefined)
NI
La tipizzazione debole delle variabili in JavaScript permette di assegnare a una
stessa variabile – in momenti diversi di uno stesso script – tipi di dato diversi:
ZA
var x; x è undefined
x=-5; ora x è number
x="Lucia"; adesso x è diventata string

Esempio: attenzione alla tipizzazione debole delle variabili in JavaScript!
I
E LL
CH
z è diventata stringa
NI
qui z è una variabile numerica
ZA
poiché x non è più un numero, nemmeno z sarà un numero
NB: il simbolo +, che alla riga 13 era un operatore aritmetico, alla riga
17 è poi automaticamente diventato un operatore di concatenamento

Altro esempio: i pericoli insiti nell’uso delle variabili implicite di JavaScript.
I
E LL
CH
il browser identifica il primo termine
come stringa, perciò concatena
NI
anche x e y come stringhe
ZA
qui ho senza apici è una variabile undefined;
l’intera espressione allora diventa undefined,
perciò il browser non la visualizza

JavaScript ha i consueti operatori di tutti i linguaggi, più alcuni speciali.
• gli operatori aritmetici +,-,*,/,%
I
• gli operatori di incremento ++ e di decremento --
LL
• l’operatore di assegnamento = e le sue versioni composte +=,-=,*=,/=,%=
(esempio: var1 += var2 equivale a var1 = var1+var2)
E
CH
• gli operatori di confronto ==,!=,<,>,<=,>= usati nelle strutture condizionali
• gli operatori logici && (AND), || (OR) e ! (NOT)
NI
L’operatore + applicato alle stringhe diventa operatore di concatenamento.
ZA
Inoltre, poiché JavaScript non esplicita il tipo di dato delle variabili, esistono anche
gli operatori di confronto === (controlla che siano uguali sia il valore sia il tipo) e
!== (controlla che sia diverso il valore oppure il tipo).

In JavaScript gli array sono insiemi indicizzati (a partire da 0) e dinamici

che possono contenere variabili anche di tipo diverso.
I
La sintassi per dichiarare e inizializzare un array in JavaScript è:
LL
var nomeArray = [elemento0, elemento1, elemento2, …];
E
CH
NI
ZA

In JavaScript gli array sono insiemi indicizzati (a partire da 0) e dinamici

che possono contenere variabili anche di tipo diverso.
Esempio: visualizzare un array di stringhe e uno misto con numeri e stringhe.
I
E LL
CH
per visualizzare un
NI
intero array, basta
scriverne il nome
un elemento si specifica
ZA
con il valore dell’indice
tra parentesi quadre
NB: JavaScript qui elabora gli elementi

perché sa riconoscere il tipo di dato

Come tutti gli oggetti, anche gli array hanno metodi propri in JavaScript.
Esempio: alcuni metodi applicati a un array in JavaScript.
I
la proprietà .length
LL
restituisce il numero
di elementi nell’array
E
CH
il metodo .push()
aggiunge a fine array un
NI elemento, poi restituisce
la nuova dimensione
il metodo .sort()
riordina l’array
ZA
il metodo .shift() elimina il primo elemento

dell’array e restituisce l’elemento eliminato

Un array può essere utile in particolare per creare e gestire liste HTML.
Esempio: creare una lista in JavaScript a partire da un array.
I
E LL
CH
alla variabile elenco è assegnato il tag
NI <ol>: sarà interpretata come stringa
ZA
il ciclo for itera sull’indice dell’array e aggiorna elenco
concatenando ogni volta un nuovo elemento della lista
a fine ciclo si concatena a elenco il tag di chiusura </ol> e si
passa la stringa al browser, che la interpreta come testo HTML

9.3 Oggetti ed eventi Indice
JavaScript non ha le classi: gli oggetti si creano definendoli nel codice.
I
Quando si vuole usare un oggetto in uno script,
LL
se ne definiscono le proprietà con questa sintassi:
var nome_oggetto={proprietà1:valore1, proprietà2:valore2, …};
E
CH
NI
ZA

JavaScript non ha le classi: gli oggetti si creano definendoli nel codice.

Esempio: la definizione delle proprietà di un oggetto e il ciclo for/in.
I
E LL
CH
definizione dell’oggetto studente
NI
ZA
con il ciclo for/in, tipico di JavaScript, si itera su tutte le proprietà

di un oggetto; qui x è il «contatore delle proprietà» di studente

Agli oggetti di JavaScript si possono associare anche metodi, cioè funzioni.
I
Queste funzioni vanno definite all’interno delle parentesi graffe nella
LL
dichiarazione dell’oggetto.
E
Per definire un metodo nome_funz si scrive, dopo l’elenco delle proprietà:
CH
nome_funz : function (argomenti) {istruzioni da eseguire;}
Il metodo poi si invoca usando l’operatore punto:

nome_oggetto.nome_funz()
NI
ZA

Agli oggetti di JavaScript si possono associare anche metodi, cioè funzioni.
Esempio: la definizione un metodo per un oggetto di JavaScript.
I
il metodo nomeAnni() non ha argomenti, perché
LL
usa soltanto informazioni già contenute nell’oggetto
E
CH
NI
ZA
nb: qui non si può usare this, perché
l’istruzione è esterna all’oggetto

Per creare più oggetti con la stessa struttura si usa un metodo costruttore
con la parola-chiave new.
Esempio: l’uso di un metodo costruttore per gli oggetti in JavaScript.
I
E LL
CH
il metodo ha come argomenti le proprietà
dell’oggetto-tipo e funge da modello per la
creazione degli oggetti che ne sono istanze
NI
ZA
qui con la parola-chiave new si creano due
diversi oggetti basati sul metodo studente()
poi si fanno visualizzare al browser alcune proprietà
dei due oggetti, concatenate con altre stringhe

Un evento è l’effetto di un’azione del browser o dell’utente.
Esempio: un evento al clic del mouse associato a un pulsante.
I
E LL
CH
NI
ZA
il tag <button> crea un pulsante, cioè un oggetto sensibile
al clic del mouse, che in HTML è l’evento onclick
quando l’evento si verifica, il codice richiama la funzione mostra_nascosto(),

che fa apparire il secondo testo, assegnandolo al tag <DIV> con id="nasc"

Altro esempio: un evento al clic che sostituisce un’immagine con un’altra.
I
LL
l’immagine visualizzata per default è sole.png
E
CH
NI
ZA
al clic su NOTTE
l’immagine è
sostituita da
luna.png
Il tag <img> è associato all’id immag, che ciascun pulsante usa nell’evento
onclick per modificare il collegamento all’immagine, tramite l’attributo src

I
Si può comunque agire su un’immagine anche senza usare
LL
pulsanti, ma sfruttando invece altri eventi legati al mouse.
Per esempio, questo tag <img>:
E
CH
<img src="immagini/sole.png"
onMouseOver="this.src='immagini/luna.png';"
onMouseOut="this.src='immagini/sole.png';">
fa cambiare l’immagine visualizzata ogni volta che si
verifica l’evento onMouseOver, cioè il passaggio del
NI
ZA
mouse sull’immagine stessa;
poi all’evento onMouseOut, cioè quando il mouse esce
dall’immagine, ricompare l’immagine di default.
Se si usassero invece gli eventi onMouseDown e onMouseUp, lo stesso

effetto si otterrebbe tenendo premuto il tasto del mouse e poi rilasciandolo.

Un evento può essere associato anche alle azioni della tastiera.
Esempio: un evento che intercetta la scrittura da tastiera.
I
il tag HTML <input type="text">
LL
fa comparire sulla pagina una casella
in cui si può digitare testo;
E
l’evento onkeypress registra la
CH
pressione su un tasto della tastiera
NI
ZA
l’evento attiva la funzione mostra_Unicode() che, tramite la proprietà

charCode di JavaScript, restituisce il codice Unicode del carattere digitato

Si possono associare eventi anche agli oggetti del BOM, oltre che del DOM.
Esempio: usare l’evento onresize per misurare le dimensioni della finestra.
I
LL
quando la finestra viene ridimensionata, l’evento onresize
se ne accorge e chiama la funzione dimensioni()
E
CH
NI
ZA
la funzione visualizza sulla pagina la larghezza e l’altezza in tempo

reale, anche mentre si trascina il mouse per ridimensionare la finestra

Si possono associare eventi anche agli oggetti del BOM, oltre che del DOM.
Altro esempio: l’apertura di una pagina web mediante l’evento onclick.

questo codice fa apparire un pulsante, che al clic apre
I
l’URL specificato in una nuova finestra del browser
E LL
CH
<input type="button"> crea il pulsante in HTML
NI
ZA
l’evento onclick fa
eseguire la funzione
apriFinestra, che
usa il metodo open()
dell’oggetto window

9.4 I moduli nelle pagine web Indice
I moduli, in inglese form, sono tra gli strumenti di uso più comune nel web.
Si compila un modulo ogni volta che ci si iscrive a un nuovo servizio, per esempio
I
un social network o un sistema di pagamento online.
E LL
L’inserimento di un modulo in un sito web coinvolge quattro diverse tecnologie:
CH
• il linguaggio HTML, per la definizione della struttura del modulo;
• un linguaggio di scripting lato client, come JavaScript, per vagliare i dati inseriti;
NI
• un linguaggio di scripting lato server, come PHP, per acquisire i dati inviati;
ZA
• un database sul web server, come MySQL, per memorizzare i dati ricevuti.

In HTML5 un modulo si crea con il tag <FORM> contenente tag <FIELDSET>.
l’attributo CSS display:inline-block adatta
I
le cornici alla larghezza dei campi o dei pulsanti
E LL
il codice del modulo è racchiuso nel tag <FORM>
CH
NI
i tag <FIELDSET> suddividono
ZA
il modulo in blocchi grafici

I
LL
autofocus: all’apertura
E
della pagina il cursore
CH
sarà già in questa casella
value: la casella è
pre-compilata con
NI placeholder: mostra un
un testo di default
ZA
testo sbiadito come modello
per la compilazione

con type="email" il browser
I
controlla automaticamente la
LL
sintassi del testo digitato
E
CH
NI
ZA
required obbliga a
compilare il campo
con <INPUT type="submit">

i dati saranno inviati al server

Altro esempio: un modulo con

menu a tendina, scelta esclusiva
I
e campo commenti.
LL
<SELECT> crea un menu a tendina;
E
<OPTION> sono le possibili scelte
CH
NI type="radio" definisce
ZA
un elenco di scelte
mutuamente esclusive
<TEXTAREA> crea una casella di testo

in cui l’utente può digitare liberamente

Con JavaScript si può controllare la validità dei dati inseriti in un modulo.
I
LL
il dato di input digitato nella
casella è identificato da num
E
CH
NI
ZA
il clic sul pulsante VERIFICA esegue la funzione

verifica(), che mostra il feedback avviso

Con JavaScript si può controllare la validità dei dati inseriti in un modulo.
Altro esempio: il controllo

della compilazione di un
I
campo obbligatorio.
LL
all’inizio il cursore si trova
nel campo cognome il secondo campo, userid,
E
è definito come obbligatorio
CH
NI
ZA
quando il cursore si posiziona nel terzo campo, viene eseguita

la funzione controlla(): se si è «saltato» il secondo campo,
appare l’avviso e il cursore viene riportato nel secondo campo

Progettare e Programmare Vol2 Cap9

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Progettare e Programmare Vol2 Cap9

Caricato da

Copyright:

Formati disponibili

capitolo 9 – Il linguaggio JavaScript

1. Caratteristiche generali di JavaScript

Tibone, Progettare e programmare Vol 2 © Zanichelli editore 2019 1

Copia riservata all'insegnante Saverio Manglaviti - 5798018

JavaScript è un linguaggio di scripting lato client, a eventi e a oggetti.

Un evento è una qualsiasi interazione tramite l’interfaccia grafica del browser:

Copia riservata all'insegnante Saverio Manglaviti - 5798018

JavaScript è un linguaggio di scripting lato client, a eventi e a oggetti.

Altro esempio: rendere un testo sensibile al passaggio del mouse.

l’oggetto qui è il paragrafo <P>, che richiama le funzioni

Copia riservata all'insegnante Saverio Manglaviti - 5798018

JavaScript è un linguaggio di scripting lato client, a eventi e a oggetti.

Altro esempio: rendere un testo sensibile al passaggio del mouse.

Tibone, Progettare e programmare Vol 2 © Zanichelli editore 2019 4

Copia riservata all'insegnante Saverio Manglaviti - 5798018

Il DOM è un modello standard a oggetti della struttura delle pagine HTML.

Tibone, Progettare e programmare Vol 2 © Zanichelli editore 2019 5

Copia riservata all'insegnante Saverio Manglaviti - 5798018

Il DOM è un modello standard a oggetti della struttura delle pagine HTML.

Tibone, Progettare e programmare Vol 2 © Zanichelli editore 2019 6

Copia riservata all'insegnante Saverio Manglaviti - 5798018

Il DOM è un modello standard a oggetti della struttura delle pagine HTML.

il testo del secondo paragrafo è specificato mediante uno script: il metodo

Copia riservata all'insegnante Saverio Manglaviti - 5798018

Il BOM è un modello non standard a oggetti dell’interfaccia di un browser.

Tibone, Progettare e programmare Vol 2 © Zanichelli editore 2019 8

Copia riservata all'insegnante Saverio Manglaviti - 5798018

Il BOM è un modello non standard a oggetti dell’interfaccia di un browser.

la terza variabile x, definita tramite l’id dimensioni, è il tag paragrafo su

Tibone, Progettare e programmare Vol 2 © Zanichelli editore 2019 9

Copia riservata all'insegnante Saverio Manglaviti - 5798018

Il codice JavaScript si può scrivere in un file esterno con estensione .js.

Gli script si possono scrivere:

Tibone, Progettare e programmare Vol 2 © Zanichelli editore 2019 10

Copia riservata all'insegnante Saverio Manglaviti - 5798018

In JavaScript il tipo di dato delle variabili è interpretato dal browser a runtime.

Esempio: le variabili implicite, cioè non dichiarate, e i tipi di dato in JavaScript.

Andrea non è tra apici, quindi per

Copia riservata all'insegnante Saverio Manglaviti - 5798018

In JavaScript una stessa variabile può assumere tipi di dato diversi.

Una variabile in JavaScript si dichiara scrivendo la parola-chiave var:

Tibone, Progettare e programmare Vol 2 © Zanichelli editore 2019 12

Copia riservata all'insegnante Saverio Manglaviti - 5798018

In JavaScript una stessa variabile può assumere tipi di dato diversi.

Esempio: attenzione alla tipizzazione debole delle variabili in JavaScript!

Copia riservata all'insegnante Saverio Manglaviti - 5798018

In JavaScript una stessa variabile può assumere tipi di dato diversi.

Altro esempio: i pericoli insiti nell’uso delle variabili implicite di JavaScript.

Tibone, Progettare e programmare Vol 2 © Zanichelli editore 2019 14

Copia riservata all'insegnante Saverio Manglaviti - 5798018

JavaScript ha i consueti operatori di tutti i linguaggi, più alcuni speciali.

• gli operatori aritmetici +,-,*,/,%

Tibone, Progettare e programmare Vol 2 © Zanichelli editore 2019 15

Copia riservata all'insegnante Saverio Manglaviti - 5798018

In JavaScript gli array sono insiemi indicizzati (a partire da 0) e dinamici

Tibone, Progettare e programmare Vol 2 © Zanichelli editore 2019 16

Copia riservata all'insegnante Saverio Manglaviti - 5798018

In JavaScript gli array sono insiemi indicizzati (a partire da 0) e dinamici

Esempio: visualizzare un array di stringhe e uno misto con numeri e stringhe.

NB: JavaScript qui elabora gli elementi

Copia riservata all'insegnante Saverio Manglaviti - 5798018

Esempio: alcuni metodi applicati a un array in JavaScript.

il metodo .shift() elimina il primo elemento