Javascript

JAVASCRIPT
DEFINIZIONE
JavaScript è un linguaggio di programmazione per le pagine web (non solo) che consente agli utenti di interagire con
esse. Il codice viene eseguito nel lato client, cioè se stiamo in un pagina che usa javascript, il browser scarica la pagina e
il codice sul nostro computer e lo esegue.
Vantaggi: applicazioni interattive che rispondono in modo rapido.
Svantaggi: accesso ai dati, il codice è visibile e per questo non si possono implementare sistemi di sicurezza.
STORIA
Javascript è stato sviluppato da Brendan Eich, membro di Netscape, nel 1995 con il nome iniziale di Mocha che
successivamente perse il nome di Javascript. Questo generò inizialmente molta confusione, poiché si pensava era una
estensione del linguaggio Java, ma il javascript è un linguaggio totalmente differente.
Nacque per la necessità di una maggiore interazione tra la pagina web e l’utente.
METODI DI ESECUZIONE DI JAVASCRIPT

Esistono quattro modi di eseguire codice javascript in una pagina web HTML:
- Direttamente nel file HTML: questo viene chiamata programmazione in linea, si scrive il codice tra il tag:
<script> codice javascript </script>
È possibile inserire quanti script si vogliono in una pagina html, essi possono essere inseriti sia nell’<head> che nel
<body>. L’interpretazione degli script rallenta la velocità di visualizzazione della pagina, questa può essere migliorata
posizionando gli script nella parte inferiore del body.
Il tag <noscript>. . . </noscript> definisce un contenuto alternativo per gli utenti che hanno script disabilitati nel proprio
browser o hanno un browser che non supporta lo script.
- In un file esterno con estensione .js che conterrà tutte le function e che verrà chiamato dall’HTML, nell’head, con:
<script type=”text/javascript” src=”file.js”></script>
Questo modo è più lento ma consigliato sia per il posizionamento web, sia per una programmazione più pulita e ordinata
e fornisce una maggiore praticità in quanto lo stesso codice può essere chiamato in più pagine web.
- In un evento in HTML. Nella maggior parte dei casi il javascript viene eseguito quando si verificano eventi, che
vengono gestiti attraverso attributi html che hanno come valore il nome della function javascript (chiamata alla function),
piuttosto che l’intero codice.
- In un link con <a href=”Javascript: function”>
BASI DEL LINGUAGGIO

Javascript è un linguaggio che, come per l’HTML, non necessita di nessuno strumento specifico e possiamo creare il
codice con qualsiasi editor di testo o software che ci facilita il lavoro.
È un linguaggio interpretato dal browser che legge la pagina web e quando passa per uno script: se non trova errori lo
interpreta e continua leggendo il resto della pagina, altrimenti se c’è un errore possono succedere due cose:
1) un loop infinito e con questo la pagina non caricherà nulla;
2) un errore in cui la pagina si caricherà ma lo script non funzionerà.
Javascript principalmente consente di:
- modificare il contenuto Html;
- cambiare il valore degli attributi Html;
- cambiare gli stili CSS;
- nascondere e mostrare elementi Html.
Usa il set di caratteri UTF-8.
ISTRUZIONI
Un programma è un elenco di istruzioni che vengono eseguite dal computer, una per una nello stesso ordine in cui
vengono scritte. I programmi, o meglio gli script, javascript, come abbiamo detto, vengono eseguiti dal browser.
Principalmente le istruzioni sono composte da: parole chiave, valori, espressioni e operatori.
Spesso iniziano con una parola chiave, parole che appartengono al linguaggio di programmazione, per identificare
l’azione da eseguire. Non possono essere usate per dare nomi a variabil, function, object, proprietà e metodi.
Le istruzione possono essere raggruppate in blocchi di codice all’interno di parentesi graffe {…}, per definire le
istruzioni da eseguire insieme per calcolare o risolvere un determinato problema.
Javascript definisce due tipi di valori: literal (valori fissi) e variabili (possono variare durante l’esecuzione del codice).
Si dice espressione una combinazione di variabili, valori e operatori che calcolano (valutano) un valore.
COMMENTI
Non tutte le istruzioni vengono eseguite, i commenti sono testi che il browser non interpreta. Sono molto utili e consigliati
per rendere il codice più semplice e leggibile. Si possono usare due tipi di commenti:
- su una linea con //commento su una linea
- su più linee con /*commento
su più linee*/
Come utilità possono essere usati per disattivare, evitare momentaneamente che una riga di codice venga eseguita.
Non è più in uso, ma in pagine web possiamo trovare codice javascript in:

questo per evitare che browser vecchi che non interpretano javascript non mostrino il codice nel HTML.
CARATTERISTICHE DEL CODICE JS

Il linguaggio ha una serie di caratteristiche importanti che influiscono sul modo di programmare:
Spazi bianchi: javascript ignora gli spazi bianchi, se si incontra una linea o uno spazio bianco, questi non vengono
considerati. Possono essere usati per scrivere il codice in modo più pulito e leggibile, ad esempio è consigliato:
- mettere spazi prima e dopo gli operatori.
- evitare di scrivere righe di codice troppo lunghe, nel caso andare a capo dopo un operatore.
Uso di virgolette: tutti i testi e caratteri che si usano dentro il codice vanno tra virgolette “...” o apici singoli ‘...’ .
Punto e virgola: ogni istruzione deve terminare con un ; .
Case Sensitive: si fa distinzione tra lettere maiuscole e minuscole.
VARIABILI
Come tutti gli altri linguaggi di programmazione, Javascript usa le variabili per controllare valori e gestire le operazioni,
rendendo più semplice la programmazione.
Le variabili possono essere pensate come scatole con un nome che il computer usa per memorizzare un valore in
memoria, il nome non cambia, mentre il valore può cambiare durante l’esecuzione del programma.
È un dato che si immagazzina in memoria in cui è possibile accedere per modificarlo o cancellarlo.
La creazione di una variabile si effettua in due fasi:
1) Dichiarazione
Una variabile si dichiara con la parola chiave var, seguita dal nome della variabile e deve terminare con ;
var nome_variabile;
Una variabile definita in questo modo, senza nessun valore, si dice indefinita (tecnicamente ha il valore undefined).
Si possono definire più variabili in una sola dichiarazione separando i nomi con virgole.
Le variabili possono essere dichiarate in qualsiasi parte nel codice, anche dopo che viene utilizzata, questo perché, per
default javascript solleva automaticamente tutte le dichiarazioni nella parte superiore degli script e delle function.
2) Inizializzazione
Una volta dichiarata, se a una variabile viene assegnato un valore, si dice inizializzata.
Per assegnare un valore ad una variabile si usa l’operatore = seguito dal valore:
var nome = valore;
Le inizializzazioni non vengono sollevate, quindi se una variabile viene dichiarata e inizializzata dopo che viene
utilizzata, si solleva solo la dichiarazione e la variabile sarà di tipo undefined, questo può portare errori.
Quindi nonostante JS ci fornisce il sollevamento, è consigliato sempre dichiarare e inizializzare le variabili all’inizio di
uno script o di una function.
IDENTIFICATORI
I nomi che si danno alle variabili (e function) vengono chiamati identificatori.
Hanno importanti regole da rispettare:
1) Possiamo dare qualsiasi nome ad una variabile, ma è consigliato che rispecchi il più fedelmente possibile il valore che
va a contenere.
2) Devono essere univoci, non possono essere dichiarate più variabili con lo stesso nome.
3) Le parole chiave non possono essere usate come identificatori.
4) Sono Case Sensitive.
5) Possono contenere lettere, numeri e i segni “_” e “$”, ma devono sempre iniziare con una lettera.
6) Possono essere composti da più di una parola, ma devono risultare in un unico termine, per separarle:
- non sono ammessi spazi bianchi e il carattere “-” (riservato per la sottrazione).
- può essere usato il carattere “_” ( var nome_variabile).
- camelCase (consigliato) consiste: la prima lettera della prima parola in minuscolo e le successive parole con la prima
lettera in maiuscolo (var nomeVariabile).
VARIABILI LOCALI E VARIABILI GLOBALI
Le variabili si distinguono in ambito locale e globale, questo ne determina la visibilità e l’accessibilità.
Ogni function crea un proprio ambito e quindi le variabili definite al loro interno sono variabili locali e non sono
accessibili all’esterno, solo nella function. Questo consente di poter dichiarare variabili con lo stesso nome in diverse
function.
Le variabili locali vengono create all’avvio di una function e vengono eliminate quando la function è stata eseguita.
Una variabile dichiarata all’esterno di una function è una variabile globale e tutti gli script e le function di una pagina
possono accedervi.
Una variabile che non viene dichiarata con var, sarà automaticamente una variabile globale.
Le variabili globali vengono eliminate quando si chiude la finestra del browser, ma rimangono disponibili per le pagine
aperte nella stessa finestra.
TIPI DI DATI
I tipi di dati sono fondamentali in quanto consentono di operare con le variabili.
Il tipo di valore che conterrà la variabile, verrà assegnato nel momento in cui diamo ad essa il primo valore.
In javascript i tipi di dati sono dinamici, cioè una stessa variabile può essere usata per contenere, durante l’esecuzione del
programma, tipi diversi.
Si distinguono in dati primitivi: valore semplice senza proprietà e metodi aggiuntivi che sono:
number: js ha solo questo tipo di dato numerico sia per gli interi che per i numeri con la virgola.
Per i numeri con la virgola si usa il punto “.”.
Numeri molto grandi o molto piccoli possono essere scritti con l’esponente: var x = num e esp.
I numeri interi sono precisi fino a 15 cifre, mentre il numero massimo di cifre dopo la virgola è 17.
NaN (Not a Number) è una parola chiave che indica un valore che non è un numero legale, ad esempio si
. verifica cercando di fare operazioni tra numeri e stringhe, eccetto se la stringa contiene un valore numerico,
. verrà convertito in numero e il risultato sarà un numero.
Se in una operazione c’è il NaN il risultato sarà NaN.
Se si calcola un numero maggiore del numero più grande possibile, js restituisce il valore Infinity o -Infinity, si
. ottiene anche con la divisione per 0.
string: usate per manipolare i testi, devono essere sempre inclusi in apici o virgolette.
Una stringa vuota (var testo = “”;) non è undefined, ha un valore e un tipo (string).
Se ci troviamo a dover spezzare una stringa per andare a capo, possiamo dividerla con l’operatore +.
boolean: dati in cui il valore può essere true o false, si scrivono senza apici o virgolette.
Principalmente sono usati nei test condizionali e di confronto.
Valore boolean di 0, -0, “”, undefined, null, NaN è false.
Il valore boolean di un solo valore di qualsiasi tipo è true.
undefined: è una variabile dichiarata senza valore, indefinita e quindi non viene assegnato un tipo(var variabile;).
Questo valore può essere usato per “svuotare” una variabile (var variabile = undefined;).
Dati complessi:
function: blocco di codice che esegue un determinato compito.
object: si tratta di un insieme di variabili e funzioni definiti tra parentesi graffe {…}.
Il valore null è di tipo object, dovrebbe rappresentare qualcosa che non esiste, è come undefined ma tipo diverso
Molto utile è l’operatore typeof che, messo prima di una variabile, ritorna il tipo di dato.
CARATTERI SPECIALI
Quando nel codice si usano i testi, ci sono alcuni caratteri che non si ottengono normalmente inserendoli da tastiera:
Carattere Codice
Andare a capo \n
Barra inversa \ \\
Apice ‘ \’
Virgolette “ \”
Salto di linea \r
OPERATORI
Gli operatori sono una serie di simboli per lavorare con differenti valori. Essi possono essere divisi in cinque tipi:
OPERATORE DI ASSEGNAZIONE =
In javascript, e in molti altri linguaggi di programmazione, il simbolo = non rappresenta l’uguaglianza ma l’assegnazione:
permette di assegnare un valore, o il risultato di una espressione, a una variabile, passare un valore da una variabile a
un’altra, ecc.
L’istruzione: var x = z +5; calcola prima il valore dell’espressione a destra e poi lo assegna alla variabile a sinistra.
OPERATORI ARITMETICI
Modificano o generano un nuovo valore, si dividono in due tipi:
1) Unari: riguardano un solo operando e ne modificano il valore, essi sono:

- Incremento (++): aumenta di una unità il valore a cui viene applicato (x++ è uguale a x = x + 1).
- Decremento (--): diminuisce di una unità il valore a cui viene applicato (x-- è uguale a x = x - 1).
- Meno (-): posto prima di un valore lo converte in negativo, se il valore è negativo diventa positivo.
Gli operatori di incremento e decremento possono essere posizionati prima o dopo una variabile e questo cambia il
risultato (++a) o (a++):
In espressioni semplici come a++ o++a hanno lo stesso significato,
Nei casi in cui viene utilizzato il risultato dell'operazione nella valutazione di un'altra espressione essi assumono un
significato diverso:
- se l'operatore viene usato prima(++a) il valore della variabile viene incrementato prima della valutazione
dell'espressione e quindi l'espressione viene valutata usando il valore incrementato;
B = 3;
A = ++B;
// A è 4, B è 4
- se l'operatore di incremento viene usato dopo(a++) il valore della variabile viene incrementato dopo la valutazione
dell'espressione e quindi l'espressione viene valutata usando il valore non incrementato.
B = 3;
A = B++;
// A è 3, B è 4
2) Binari: riguardano due operandi, non modificano il valore, ma generano un terzo valore risultato degli operandi, essi
sono:
- Somma (+) : somma due valori;
- Sottrazione (-) : sottrae due valori;
- Moltiplicazione (*) : moltiplica due valori;
- Divisione (/) : divide il primo valore per il secondo.
- Modulo o resto (%): ritorna il resto di una divisione.
- Esponenziale (**): eleva a potenza il primo valore per il secondo.
Il risultato di queste operazioni deve essere assegnato ad una variabile e se capita che uno dei due operandi è proprio la
variabile, si può usare la forma compatta degli operatori: (+=), (-=), (*=), (/=), (%=):
variabile = variabile * 8; si può scrivere variabile *= 8;
In una espressione aritmetica, come nella matematica tradizionale, le operazioni di moltiplicazione e divisione vengono
eseguite prima rispetto a quelle di addizione e sottrazione, hanno una precedenza più alta. La precedenza, comunque, può
essere gestita grazie alle parentesi, che anch’essi hanno precedenza nell’ordine (), [], {}.
OPERATORI RELAZIONALI O DI CONFRONTO

Fanno un confronto tra due valori e ritornano sempre un valore boolean true o false, determinano l’uguaglianza o la
differenza tra variabili o valori.
Essi sono:
- Maggiore (>): ritorna true se il valore a sinistra è maggiore di quello a destra, altrimenti false.
- Minore (<) : ritorna true se il valore a sinistra è minore di quello a destra, altrimenti false.
- Maggiore o uguale (>=) : ritorna true se il valore a sinistra è maggiore o uguale a quello a destra, altrimenti false.
- Minore o uguale (<=) : ritorna true se il valore a sinistra è minore o uguale a quello a destra, altrimenti false.
- Uguale (==): uguaglianza, ritorna true se entrambi i valori sono uguali, altrimenti false.
- Diverso (!=): ritorna true se i due valori sono diversi, altrimenti false.
OPERATORI LOGICI
Questi operatori permettono di concatenare più operazioni. I principali operatori logici sono:
- AND (&&): verifica se sia la condizione di sinistra che quella di destra siano vere, ovvero restituisce true se entrambe le
condizioni sono vere, altrimenti false.
- OR (||): verifica se o la condizione di sinistra o quella di destra sono vere, ovvero restituisce true se almeno una o
entrambi le condizioni sono vere, altrimenti false.
- NOT(!): inverte il valore di una condizione.
x y x && y x || y !x
true true true true false
true false false true false
false true false true true
false false false false true
OPERATORI DI STRINGHE
Sono operatori che si possono applicare alle stringhe e sono:
- Concatenazione (+): unisce due stringhe in un’unica stringa.
- Aggiunta (+=): aggiunge una stringa ad una già esistente.
- Uguaglianza (==): confronta due stringhe e restituisce true se sono uguali, altrimenti false.
- Disuguaglianza (!=): confronta due stringhe e restituisce true se sono diverse, altrimenti false.
STRUTTURE CONDIZIONALI
Consentono di eseguire istruzioni in base alla valutazione di determinate condizioni che possono essere semplici o
multiple con gli operatori logici.
IF
Si usa per eseguire un blocco di codice solo dopo aver valutato se una determinata condizione è vera.
if(condizione) {
… istruzioni …
}
IF/ELSE
In questo caso si ha una alternativa, si valuta la condizione, se restituisce true si eseguono date istruzioni 1, altrimenti se
la condizione restituisce false si eseguono differenti istruzioni 2. else specifica un blocco di codice da eseguire se una
condizione è falsa.
if(condizione) {
… istruzioni 1…
} else {
… istruzioni 2 …
}
if(condizione == true) → if(condizione)
if(condizione == false) → if(!condizione)
IF ANNIDATI
Si valuta la prima condizione1, se restituisce true si eseguono le istruzioni 1 e verrà saltato il resto della struttura,
altrimenti se la condizione1 restituisce false verrà valutata una seconda condizione2 e cosi via per le eventuali condizioni.
Else if specifica una nuova condizione da valutare se la prima è falsa.
if(condizione1) {
… istruzioni 1…
} else if(condizione2) {
… istruzioni 2 …
} else …
IF ABBREVIATO ? :
È una forma dell’ if/else che, oltre a confrontare due valori, assegna un valore ad una variabile. Valuta la condizione, se
restituisce true assegna alla variabile valor1, altrimenti se false assegnerà valor2.
variabile = (condizione) ? valor1 : valor2

SWITCH
Consente di valutare una condizione data e confrontarla con con determinati valori, se coincide con un valore verrà
eseguito il codice associato a quel valore. Possono essere inseriti quanti valori si vogliono (case) da confrontare con la
condizione e dopo ogni blocco di codice deve essere inserita la parola chiave break che fa si che, una volta eseguito il
codice, si esca dallo switch senza confrontare gli altri valori. Se la condizione non coinciderà con nessun valore, verrà
eseguito il codice di default (non è obbligatorio).
switch(condizione) {
case valor1:
...codice…
break;
case valor1:
...codice…
break;
...
default:
...codice…
break;
}
Se break viene omesso, prima di un successivo case, verrà eseguito anche il codice relativo a quel case ignorandone la
valutazione. Questo ci consente anche di valutare case multipli che eseguono lo stesso codice:
case valor1:
case valor2:
…
...codice…
break;
CICLO FOR
È un blocco di codice un certo numero di volte, finché la condizione data restituisca false, si esce dal ciclo. È costituito da
un valore iniziale da cui partire, la condizione che determina le ripetizioni e l’uscita dal loop e, l’incremento per
raggiungere la condizione. Praticamente si valuta il valore iniziale con la condizione, se restituisce true, il valore iniziale
viene aggiornato con l’incremento e cosi via finché la condizione restituisce false.
for(valore iniziale; condizione; incremento) {

...codice...
}
CICLO DO...WHILE
Esegue un blocco di codice finché una condizione rimane vera. La differenza con il for è che, qualunque sia la
condizione, il codice verrà eseguito almeno una volta. Questo perché la condizione viene valutata dopo che il codice
viene eseguito: se restituisce true si ritorna a rieseguire il codice. Bisogna fare attenzione ad inserire ed in modo corretto,
all’interno del codice, l’istruzione di incremento che permetterà alla condizione di raggiungere il valore false, altrimenti
si avrà un loop infinito.
do{
...codice…
} while(condizione);
CICLO WHILE
È simile al loop precedente con la differenza che in questo caso la condizione viene valutata prima che il codice venga
eseguito. La differenza con il ciclo for è che si usa il while quando non si conosce il numero di ripetizioni da eseguire.
while(condizione) {
...codice…
}
FOR … IN
Consente di scorrere gli elementi, proprietà di un oggetto che può trattarsi di un oggetto creato dall’utente, un array o un
oggetto di html.
var vector = new Array();
for(x in vector) {
...codice…
}
l’indice x deve essere una variabile presente solo in questo loop che la dichiara e inizializza automaticamente.
BREAK E CONTINUE
La parola chiave break può essere usata in un ciclo per terminarne l’esecuzione, va inserito nel codice di una condizione
che se si verifica fa terminare e uscire dal loop.
La parola chiave continue può essere usata in un ciclo per saltare l’iterazione attuale senza uscire dal ciclo, ve inserito in
una condizione che se si verifica la salta eseguendo il il resto del ciclo.
LE FUNCTION
La programmazione Javascript si basa nell’uso di function per controllare gli eventi, manipolare dati, ritornare risultati,
cambiare elementi html, dare dinamismo al design della pagina web. Una function è un blocco di istruzioni raggruppate
sotto un unico nome e potrà essere chiamata da qualsiasi parte del codice. Sono utili perchè consentono di avere un codice
sorgente molto più chiaro e pulito e un’altra caratteristica è la riusabilità in quanto il codice di una function può essere
utilizzato più volte ma viene scritto soltanto una volta.
DICHIARAZIONE DI FUNCTION
Una function per essere utilizzata deve prima essere dichiarata. La dichiarazione di una function si effettua con la parola
chiave function, seguita dal nome della function, parentesi tonde () che possono racchiudere eventuali parametri e
parentesi graffe {} che racchiudono il blocco di istruzioni da eseguire:
function nome(parametri) {
...istruzioni…
}
I nomi delle function hanno le stesse regole di quelli delle variabili

Se la function calcola un valore che deve ritornare, si usa, alla fine, l’istruzione return seguita dal valore da ritornare.
Le variabili dichiarate all’interno di una function sono variabili locali.
Una function può essere definita anche usando una espressione di function che può essere memorizzata in una variabile:
var x = function(a, b) { return a * b};
Dopo la variabile può essere utilizzata come function:

var z = x(4, 3);
Notiamo che una espressione di function è una function anonima in quanto non hanno bisogno di un nome poiché
vengono chiamati usando il nome della variabile.
PARAMETRI DELLA FUNCTION

Le function, per svolgere le loro attività, possono ricevere valori nella definizione che vengono detti parametri separati
da virgole. I parametri vengono usati dentro la function, attraverso i loro nomi definiti.
In Javascript, nella dichiarazione, non vengono specificati i tipi di dati per i parametri.
Nel programma, i valori che vengono passati alla function, nella chiamata, vengono detti argomenti.
Javascript consente di definire le function con un numero variabile di parametri, cioè una stessa function può essere
invocata ricevendo un numero di parametri differente. Questo perché le function permettono di accedere ai parametri
come se si trattasse di un array. Internamente le function guardano i parametri ricevuti in un array chiamato arguments[i]
e si può accedere ad ogni suo elemento grazie all’indice i.
alert("Somma = " + somma(6, 2, 3, 10));

function somma() {
var sum = 0;
for (var i = 0; i < arguments.length; i++)
sum = sum + arguments[i];
return sum;
}
PASSAGGIO DI PARAMETRI
A differenza degli oggetti che sono passati per riferimento, nelle function gli argomenti vengono passati per valore e le
modifiche e le operazioni su di essi sono locali, ovvero la function conosce il valore degli argomenti, ma non le loro
posizioni in memoria, per questo se una function modifica il valore di un argomento, questo non viene applicato allo
stesso al di fuori della function.
Una function può accedere a tutte le variabili definite al suo interno (locali), ma anche a quelle al di fuori di essa (globali).
Una variabile locale non può essere usata all’esterno della function, ma se si dichiara una variabile senza la parola chiave
var, anche dentro una function, questa diventa globale.
CHIAMATA DI UNA FUNCTION
Una function viene eseguita quando viene chiamata o invocata e una volta definita la si può chiamare in qualsiasi punto
del codice: dal codice sorgente JS, dentro altre function, da un evento HTML, da un link HTML e dalla stessa function
(function ricorsiva).
La chiamata di una function deve essere effettuata dopo la dichiarazione della stessa e può essere usata nel programma
nello stesso modo delle variabili: in formule, calcoli e espressioni.
Anche se, come per le variabili, vale il sollevamento e quindi le dichiarazioni vengono spostate nella parte superiore del
codice, tranne per le espressioni di function.
Chiamando una function senza le () restituisce la completa definizione della stessa anziché il risultato.
Se una function viene chiamata passando argomenti mancanti , questi vengono considerati non definiti.
FUNCTION ANNIDATE
È possibile definire una function all’interno di un’altra function.
La function definita all’interno di un’altra function viene detta function annidata, mentre la function che la ospita viene
detta function genitore.
Le function annidate hanno accesso a tutte le variabili della function genitore.
PAROLA CHIAVE LET

Abbiamo visto due tipi di ambito: globale e locale. La parola chiave let fornisce variabili di ambito di blocco.
Le variabili dichiarate con var non hanno ambito di blocco, ovvero se dichiarate all’interno di un blocco {}, esse sono
accessibili all’esterno del blocco:
{
var x = 2;
}
// x può essere usata all’esterno
Le variabili dichiarate con let hanno ambito di blocco, cioè non è possibile accedere ad esse all’esterno del blocco:
{
let x = 2;
}
// x NON può essere usata all’esterno
La parola chiave let consente anche di dichiarare, all’interno di un blocco o di un ciclo, una variabile con uno stesso
identificatore di una variabile già definita all’esterno, senza intaccare quest’ultima.
var x = 10; var x = 10;

// x è 10 //x è 10
{ {
var x = 2; let x = 2;
// x è 2 // x è 2
} }
// x è 2 //x è 10
Ma non è possibile dichiarare, nello stesso ambito, una stessa variabile sia con var che con let:
{
var x = 5; // OK
let x = 2; //errore
}
PAROLA CHIAVE CONST

Le variabili definite con la parola chiave const, diventano costanti, ha le stesse caratteristiche di let, eccetto che non
possono essere riassegnate e modificate:
const x = 5;
x = 8; //errore
Invece gli oggetti dichiarati const non possono essere riassegnati, ma possono essere modificati (proprietà).
Quando si dichiara una variabile con const deve sempre essere assegnato un valore.
PROGRAMMAZIONE ORIENTATA A OGGETTI
La programmazione ad oggetti è una programmazione non lineare, si basa sugli oggetti come unità principali. Un oggetto
è una struttura definita che contiene proprietà (variabili) e metodi (function) che manipolano le proprietà. Sono variabili
che possono contenere molti e differenti valori.
La programmazione a oggetti si basa su due concetti: classi e istanze.
Una classe è una astrazione, un concetto generale di un insieme di oggetti che condividono le stesse caratteristiche e
funzionalità.
Un oggetto è un istanza, ovvero una creazione fisica di una classe.
Però javasctript ha una programmazione ad oggetti semplificata in cui non esistono le classi ma solo gli oggetti.
Possono essere oggetti: i numeri, le stringhe, i boolean( se definiti con la parola chiave new), gli array, Date, Math, le
espressioni regolari, le function e gli oggetti stessi. I valori primitivi non sono oggetti, sono valori che non hanno
proprietà e metodi. Si dicono tipi di dato primitivi quelli che hanno un valore primitivo e sono: string, number, boolean,
null, undefined, e sono immutabili, non possono essere modificati.
Gli oggetti sono mutabili, questo perché sono indicizzati per riferimento e non per valore, quindi non non verrà creata
una copia di essi, ma si va a modificare l’oggetto originale nella sua posizione di memoria.
PROPRIETÀ DI UN OGGETTO
Le proprietà sono i valori associati a un oggetto, possono essere: valori primitivi, function (metodi), o altri oggetti.
Le proprietà sono definite nella forma:
proprietà : valore,
sono separate da virgole.
È possibile accedere alle proprietà in due modi, con:
Oggetto.proprietà
Gli oggetti, in Javascript, possono essere trattati come vettori ed accedere ai dati con
Oggetto[proprietà]
con il nome della proprietà come indice.
Javascript, nella definizione degli oggetti e le sue proprietà, distingue le maiuscole e minuscole, quindi bisogna fare
attenzione.
Un oggetto può contenere tutte le proprietà di cui necessita e si usa l’operatore di assegnazione(=) per assegnarne valori.
Esiste la possibilità di eliminare proprietà con la parola chiave delete, che elimina sia la proprietà che il suo valore:
delete oggetto.proprietà;
CREAZIONE DI OGGETTI
In Javascript, ci sono tre modi per creare oggetti:
1) Oggetto letterale : questa forma non è quella standard che si usa negli altri linguaggi OOP, però è abbastanza semplice
e rapida in caso di oggetti semplici. La sintassi è:
var oggetto = {
proprietà1:valor1,
proprietà2:valor2,
...
}
Vediamo che con questo sistema si definiscono direttamente le istanze degli oggetti, cioè non si definisce un oggetto
generale dalla quale creare istanze.
Con questo sistema si può creare un oggetto che contenga un altro oggetto, sostituendo il valore della proprietà con la
definizione di oggetto:
proprietà:{proprietà1:valor1, proprietà2:valor2, ….}
2) Con la parola chiave new: questo è equivalente a quello precedente, lo stesso oggetto può essere creato con:
var oggetto = new Object();
oggetto.proprietà1 = “valor1”;
oggetto.proprietà2 = “valor2”;
...
3) Function costruttore: in questo caso si crea un oggetto generico con una function costruttore che verrà invocata ogni
volta che si vuole creare una istanza di questo oggetto.
Nella function costruttore vanno definiti le proprietà e i metodi che avrà l’oggetto e verranno assegnati a questi i valori
passati come parametri.
Per creare le istanze degli oggetti dalla function costruttore, si usa la parola chiave new, in modo da creare l’oggetto e
passare i valori che la function riceve come parametri:
Objecto = new FunctionC(valori);
Come al modo precedente, un oggetto può avere come proprietà un altro oggetto: basta creare prima l’oggetto da usare
come proprietà, creare sue istanze e passarle come parametro alla function costruttore che lo accetta come proprietà. Per
accedere alle proprietà degli oggetti interni, bisogna considerare il livello:
oggetto1.oggetto2.proprietà
PAROLA CHIAVE THIS

this fa riferimento all’oggetto a cui appartiene (sostituisce il nome dell’oggetto).
In un metodo fa riferimento all’oggetto proprietario del metodo, per accedere a proprietà dall’oggetto stesso.
Se usato da solo (var x = this) si riferisce all’oggetto globale, che in un browser è [object Window].
In una function si riferisce al proprietario della function.
Negli eventi HTML fa riferimento all’elemento HTML che contiene l’evento.
I METODI DI UN OGGETTO
Un metodo è un azione che compie l’oggetto sui suoi dati, si definisce con la stessa sintassi delle function, è una proprietà
che contiene una function.
Per inserire un metodo in un’oggetto letterale, si usa la sintassi:
nomeMetodo : function() {...}
Una volta creata, la function, si assegna all’oggetto dentro al costruttore in modo che lo tengano tutte le istanze, con:
this.metodo = metodo;
Per eseguire un metodo di un oggetto, bisogna invocarlo con:
oggetto.metodo();
se non vengono specificate le () si accede alla proprietà dell’oggetto, non al metodo, che ritorna la definizione della
function.
SET E GET
Sono metodi che possono essere usati in un costruttore per impostare (set) e ritornare (get) proprieta.
set nome(value){ get nome() {
this.proprietà = value; return this.proprietà;
} }
OGGETTO PREDEFINITO STRING

Normalmente le stringhe sono valori primitivi, ma possono essere anche definite come oggetti:
var stringa = new String(“Ciao a tutti”);
Non è consigliato, però, definire stringhe come oggetti, la parola chiave new complica il codice, rallenta la velocità di
esecuzione.
L’oggetto String ha proprietà e metodi utili che possono essere usati per lavorare con le stringhe, sulle variabili o
direttamente sulla stringa.
txt = “Ciao a tutti”;
Esso ha una sola proprietà:
- length: restituisce la lunghezza di una stringa, ovvero il numero di caratteri.
numCaratteri = txt.length; → 12
Ma ha diversi metodi, questi restituiscono una nuova stringa, non modificano quella originale:
- big(): restituisce la stringa con una dimensione maggiore.
txt.big() → Ciao a tutti
- bold(): restituisce la stringa in grassetto.

txt.bold() →Ciao a tutti
- italics(): restituisce la stringa in corsivo.

txt.italics() →Ciao a tutti
- small(): restituisce la stringa con una dimensione minore.
txt.small() →Ciao a tutti
- strike(): restituisce la stringa sbarrata.

txt.strike() →Ciao a tutti
- sub(): restituisce la stringa come pedice.

txt.sub() →Ciao a tutti
- sup(): restituisce la stringa come apice.

txt.sup() →Ciao a tutti
- charAt(): ritorna il carattere della stringa nella posizione specificata dall’indice passato per parametro (inizia da 0).
txt.charAt(3) → o
- charCodeAt(): ritorna il carattere della stringa in Unicode (intero univoco tra 0 e 65535 assegnato ai caratteri ),
contenuto nella posizione specificata dall’indice passato per parametro (inizia da 0).
txt.charCodeAt(3) → 111
- indexOf(): parte da 0, ritorna la posizione del primo carattere o parola (passato per parametro) che si incontra nella
stringa, può ricevere un secondo parametro che indica la posizione di inizio della ricerca.
Ritorna -1 se il testo non viene trovato.
txt.indexOf(“a”); → 2
- lastIndexOf(): parte da 0, ritorna la posizione dell’ ultimo carattere o parola (passato per parametro) che si incontra
nella stringa, può ricevere un secondo parametro che indica la posizione di inizio della ricerca.
Ritorna -1 se il testo non viene trovato.
txt.lastIndexOf(“a”); → 5
- link(): crea un link Html sulla stringa che punterà all’indirizzo passato come parametro.
- concat(): ritorna una stringa in cui verranno aggiunte le stringhe passate come parametri. Può sostituire l’operatore di
concatenazione +.
- fromCharCode(): ritorna una stringa creata da caratteri unicode passati come parametri.
- split(): Taglia la stringa in un vettore nel punto dove incontra un separatore indicato come parametro.
Può essere usato per convertire una stringa in una matrice.
- slice(start, end): estrae una parte di una stringa e la ritorna in una nuova stringa. Riceve due parametri: la posizione
iniziale e finale (non inclusa). Se un parametro è negativo, la posizione si inizia a contare dalla fine della stringa.
Se si omette il secondo parametro, verrà restituita la stringa fino alla fine.
- substring(): è simile a slice(), la differenza e che non accetta valori negativi.
- substr(): è simile a slice(), la differenza è che il secondo parametro specifica la lunghezza (numero di caratteri) della
parte da estrarre.
- replace(): riceve due parametri e ritorna una nuova stringa in cui viene sostituito il valore del primo parametro con
quello del secondo. Sostituisce la prima corrispondenza ed è case sensitive (questo può essere disattivato inserendo la
parte di stringa da sostituire in /.../i.
txt.replace(“Ciao”, “Salve”) → Salve a tutti
- search(): ritorna la posizione nella stringa del valore passato per parametro. Funziona allo stesso modo di indexOf(),
accetta e ritorna gli stessi valori, le differenze sono che search() non accetta il secondo parametro, ma può ricevere
espressioni regolari.
- toLowerCase(): ritorna la stessa stringa ma con i caratteri in minuscolo.
- toUpperCase(): ritorna la stessa stringa ma con i caratteri in maiuscolo.
- trim(): rimuove gli spazi bianchi da entrambi i lati di una stringa.
OGGETTO PREDEFINITO NUMBER

Normalmente i numeri sono valori primitivi, ma possono essere anche definiti come oggetti:
var num = new Number(10);
Non è consigliato, però, definire numeri come oggetti, la parola chiave new complica il codice, rallenta la velocità di
esecuzione. Questo oggetto ha proprietà che sono costanti numeriche, non possono essere modificati, è solo permesso di
accedere e conoscerne i valori:
- MAX_VALUE: ritorna il valore numerico più grande possibile in Javascript.
- MIN_VALUE: ritorna il valore numerico più piccolo possibile in Javascript.
- NaN: indica che non si tratta di un numero.
- NEGATIVE_INFINITY: ritorna -INFINITY, ovvero il valore a partire dal quale si ha un overflow in negativo.
- POSITIVE_INFINITY: ritorna INFINITY, ovvero il valore a partire dal quale si ha un overflow in positivo.
Queste proprietà non possono essere usate su variabili di tipo numerico, ma appartengono solo all’oggetto Number e
quindi sono accessibili solo con Number.proprietà.
L’oggetto Number ha vari metodi alla quale possiamo accedere:

- toExponential(): ritorna come stringa il numero arrotondato scritto con notazione esponenziale. Può ricevere un
parametro che definisce il numero di caratteri da mostrare.
- toFixed(): ritorna una stringa che rappresenta il numero, con parametro il numero di cifre decimali.
- toPrecision(): ritorna la stringa che rappresenta il numero arrotondato con il numero di cifre indicato come parametro.
- toString(): ritorna un numero come stringa.
- valueOf(): ritorna il valore primitivo dell’oggetto specificato.
OGGETTO PREDEFINITO MATH

L’oggetto Math ha una serie di proprietà e metodi per l’uso di costanti e funzioni matematiche che permettono di eseguire
operazioni matematiche sui numeri.
Le costanti Math sono:

- Math.PI: ritorna il valore di P greco.
- Math.E: ritorna il valore della costante di Eulero.
- Math.LN2: ritorna il valore del logaritmo naturale di 2.
- Math.LOG2E: ritorna il valore del logaritmo in base 2 di E.
- Math.LN10: ritorna il valore del logaritmo naturale di 10.
- Math.LOG10E: ritorna il valore del logaritmo in base 10 di E.
- Math.SQRT2: ritorna il valore della radice quadrata di 2.
- Math.SQRT12: ritorna il valore della radice quadrata di ½ .
Tutti i metodi ricevono parametri, i metodi Math sono:

- Math.abs(x): ritorna il valore assoluto del numero.
- Math.min(x,y): ritorna il numero più piccolo tra i due numeri passati per parametri.
- Math.max(x,y): ritorna il numero più grande tra i due numeri passati per parametri.
- Math.sin(x): ritorna il seno dell’angolo passato per parametro.
- Math.cos(x): ritorna il coseno dell’angolo passato per parametro.
- Math.tan(x): ritorna la tangente dell’angolo passato per parametro.
- Math.asin(x): ritorna l’arcoseno dell’angolo passato per parametro.
- Math.acos(x): ritorna l’arcocoseno dell’angolo passato per parametro.
- Math.atan(x): ritorna l’arcotangente dell’angolo passato per parametro.
- Math.sqrt(x): ritorna la radice quadrata del numero passato per parametro.
- Math.ceil(x) : ritorna il valore di x arrotondato all’intero superiore.
- Math.floor(x): ritorna il valore di x arrotondato all’intero inferiore.
- Math.round(x): ritorna il valore di x arrotondato all’intero più vicino.
- Math.exp(x): ritorna il risultato del numero E elevato all’esponente indicato come parametro.
- Math.log(x): ritorna il logaritmo naturale del numero passato per parametro.
- Math.pow(base, exp): ritorna il risultato della potenza baseexp.
- Math.random(): ritorna un numero tra 0 e 1(escluso) .
NUMERI CASUALI RANDOM

Abbiamo visto che il metodo Math.random() ritorna un numero da 0 a 1, che ovviamente si tratta di un valore con la
virgola. Questo metodo usato nel metodo Math.floor():
Math.floor(Math.random() * n);
ritorna un numero intero compreso tra 0 e n-1.
È utile, però, avere una function generale come:
function getRandom(min, max) {
return Math.floor(Math.random() * (max – min + 1) ) + min;
}
che restituisce sempre un numero casuale tra min e max entrambi inclusi.
OGGETTO PREDEFINITO DATE

Questo oggetto ci consente di lavorare con le data.
Si può creare un oggetto Date vuoto o specifico passandole parametri, si dichiara con:
var data = new Date();
In questo caso l’oggetto data ritorna i valori della data corrente dal browser: giorno della settimana, mese, giorno, anno,
ora:minuti:secondi, fuso orario.
Thu Mar 21 2019 17:48:46 GMT+0100 (Ora standard dell’Europa centrale)
Se invece si vuole creare un oggetto Date specifico, si possono passare fino a 7 valori che specificano in questo ordine:
anno, mese, giorno, ora, minuto, secondo e millisecondo:
var data = new Date(anno, mese, giorno, ora, minuto, secondo, millisecondo);
I metodi Date che consentono di utilizzare i dati della data e lavorare con essi sono:
- getDate(): ritorna il giorno del mese attuale tra 1 e 31.
- getDay(): ritorna il giorno della settimana attuale tra 0 (domenica) e 6 (sabato).
- getHours(): ritorna l’ora attuale tra 0 e 23.
- getMinutes(): ritorna i minuti dell’ora attuale tra 0 e 59.
- getSeconds(): ritorna i secondi del minuto attuale tra 0 e 59.
- getMonth(): ritorna il mese attuale tra 0 (gennaio) e 11 (dicembre).
- getTime(): ritorna il tempo in millisecondi dal 1 Gennaio 1970.
- getYear(): ritorna l’anno attuale.
- setDate(giorno): imposta il giorno passato per parametro come giorno dell’oggetto Date.
- setDay(giorno settimana): imposta il giorno della settimana passato per parametro come giorno dell’oggetto Date.
- setHours(ora): imposta l’ora dell’oggetto Date a quella indicata dal parametro passato.
- setMinutes(minuti): imposta i minuti dell’oggetto Date a quelli indicati dal parametro passato.
- setSeconds(secondi): imposta i secondi dell’oggetto Date a quelli indicati dal parametro passato.
- setMonth(mese): imposta il mese passato per parametro come mese dell’oggetto Date.
- setYear(): imposta l’anno passato per parametro come anno dell’oggetto Date.
- setFullYear(anno, mese, giorno): imposta l’anno di un oggetto data e facoltativamente anche mese e giorno.
VETTORI E MATRICI (ARRAY)

Un array è un tipo di dato, con un nome e un indice, che contiene un insieme ordinato di valori dello stesso tipo. Serve per
memorizzare più valori in una singo In Javascript un array è un oggetto, si usa l’oggetto predefinito Array.
Un vettore si definisce con:
var vettore = new Array();
Tra parentesi si può specificare il numero di elementi che l’array va a contenere, ma questo non è obbligatorio, o
direttamente i valori che esso va a contenere.
Ogni elemento è una variabile ordinata con indici i (da 0) che contiene un valore:
vettore[0] = ‘valore1’;
vettore[1] = ‘valore2’;
...
Quando possibile è consigliato non dichiarare l’array con la parola chiave new, può essere definito con:
var vector = [];
Per definire una matrice, in javascript non esiste una struttura predefinita, basta definire in ogni elemento di una normale
array, una variabile di tipo array:
var matrice = new Array();
var elem1 = new Array(3);
e definire gli elementi
matrice[0] = elem1;
matrice[1] = elem2;
matrice[2] = elem3;
In questo modo otteniamo una matrice 3x3 di 3 righe e 3 colonne.
Gli elementi di un array possono essere oggetti.
L’oggetto Array ha la proprietà:
- length che restituisce la lunghezza dell’array, ovvero il numero di elementi che esso contiene.
Vediamo i metodi che permettono di lavorare con un oggetto Array, dato un vettore:
var vector = new Array(5, 2, 1, 4, 3);
- concat(): unisce due array in un nuovo array.

vector = vector.concat(6, 7); //vector sarà 5 2 1 4 3 6 7
- join(): unisce gli elementi di un vettore in una stringa separandoli dal separatore passato per parametro.
sep = vector.join(“-”); //vector sarà 5-2-1-4-3
- pop(): elimina l’ultimo valore del vettore e lo assegna.

elem = vector.pop(); //ultimo valore 3 sarà eliminato da vector e assegnato a elem
- push(): aggiunge elementi alla fine del vettore.
vector.push(8) //vector sarà 5 2 1 4 3 8
- reverse(): inverte l’ordine degli elementi del vettore.

vector.reverse() //vector sarà 3 4 1 2 5
- shift(): elimina il primo valore del vettore e lo assegna, spostando tutti gli elementi all’indice che lo precede.
var elem = vector.shift(); //primo valore 5 sarà eliminato da vector e assegnato a elem
- slice(): riceve due parametri: di inizio e fine (non incluso) per estrarre una parte dell’array.
vector.slice(2,4) //vector sarà 1 4
- splice(): riceve come parametri rispettivamente: la posizione in cui devono essere aggiunti nuovi elementi, quanti
elementi devono essere eliminati, i nuovi elementi da aggiungere.
- sort(): ordina gli elementi di un vettore, in ordine alfabetico per le stringhe.

vector.sort() //vector sarà 1 2 3 4 5
- isArray(): permette di riconoscere se una variabile passata per parametro è un array. Restituisce true o false.
- map(): crea un nuovo array eseguendo una function su ogni elemento, non modifica la matrice originale.
function doppio(value, index, array) { return value * 2;}
var vector2 = vector.map(doppio); //vector2 sarà 10 4 2 8 6
la function accetta tre parametri che se non usati possono essere omessi (la function doppio necessita solo di value).
- filter(): crea un nuovo array con i valori di un array che superano una determinata condizione o test.
function over3(value, index, array) { return value > 3;}
var vector2 = vector.filter(over3); //vector2 sarà 4 5
- every(): controlla se tutti i valori di un array superano una determinata condizione o test. Ritorna un valore boolean.
var control = vector.every(over3); //control sarà false
- some(): controlla se alcuni dei valori di un array superano una determinata condizione o test. Ritorna un valore boolean.
var control = vector.some(over3); //control sarà true
- indexOf(): cerca nell’array il valore passato per parametro e ritorna la sua posizione. Ritorna -1 se non è presente.
var posizione = vector.indexOf(3); //ritorna 4
- find(): ritorna il primo valore dell’array che supera una determinata condizione o test.
var mag3 = vector.find(over3); //control sarà 5
- findIndex(): ritorna l’indice del primo valore dell’array che supera una determinata condizione o test.
var mag3 = vector.findIndexover3); //control sarà 0
METODI PREDEFINITI
Esistono una serie di metodi Javascript globali:
- parseInt() : riceve una stringa numerica come parametro e ritorna il valore numerico intero, converte la stringa in intero
troncando, se necessario, la parte frazionaria.
parseInt(“37,15”) → 37
Analizza la stringa e:
- se il primo carattere non è numerico restituisce NaN: parseInt(“ciao 25”) → NaN
- se il primo carattere è numerico lo analizza e lo restituisce ignorando quelli successivi: parseInt("18.25 ciao") → 18
Può essere usato anche per convertire un numero in una data base in decimale, passando come argomenti il numero e la
base in cui convertito
parseInt(101011, 2) → 43
- parseFloat() : riceve una stringa numerica come parametro e ritorna il valore numerico inclusa la parte frazionaria.
ParseFloat(“37,15”) → 37,15
Valgono le stesse proprietà di parseInt().
- isNaN() : riceve un parametro e valuta se è NaN:

- restituisce true se il parametro non è un numero;
- restituisce false se il parametro è un numero.
- isFinite() : riceve un parametro e ritorna true se è un numero finito, altrimenti false se è un numero infinito o NaN.
- Number(): riceve un oggetto e restituisce un numero. Può essere usato per convertire le variabili in numeri. Se il
numero non può essere convertito viene restituito NaN.
- String(): riceve un oggetto e restituisce una stringa.
- call(): può essere usato per chiamare un metodo di un oggetto da un altro oggetto passato come parametro.
Consente quindi che un oggetto può usare un metodo che appartiene ad un altro oggetto:
oggetto1.metodo1.call(oggetto2);
Il metodo call() può ricevere altri argomenti, oltre all’oggetto, se il metodo ha più parametri.
- apply(): è simile a call(), la differenza è che call() riceve gli argomenti come elenco, separati da virgole, mentre apply()
riceve gli argomenti in un array.
PROTOTYPE
Tutti gli oggetti JavaScript ereditano proprietà e metodi da un prototipo. Abbiamo anche appreso che è possibile non
aggiungere una nuova proprietà a un costruttore di oggetto esistente se non direttamente nella definizione.
Tutti gli oggetti JavaScript ereditano proprietà e metodi da un prototipo:
- gli oggetti Date ereditano da Date.prototype
- gli oggetti Array ereditano da Array.prototype
In cima alla catena di prototipi di ereditarietà c’è Object.prototype tutti gli oggetti ereditano da esso.
Una volta creato un oggetto non è un elemento statico. Spesso si vogliono aggiungere nuove proprietà o metodi a tutti gli
oggetti già generati di un determinato tipo o a un costruttore di oggetti. Questo ce lo consente la proprietà prototype che
consente di aggiungere proprietà con la sintassi:
oggetto.prototype.proprietà = valore;
di default, si assegna il valore null in modo che tutte le istanze abbiano il valore null. Una volta creata la nuova proprietà
è possibile assegnargli i valori alle istanze.
FORMULARI E JAVASCRIPT
Abbiamo visto che i formulari sono lo strumento principale che consente di interagire con gli utenti. Vediamo ora come
possiamo con javascript: controllarli, validarli e crearlo in modo dinamico.
In HTML un formulario è un elemento tra il tag <form></form> usato per raccogliere dati dagli utenti.
Esso ha una serie di attributi come: name, action, method e target.
Dentro di esso si possono inserire vari elementi come: text, password, textarea, radio, checkbox, option, file, submit,
reset, button e image.
CAMPI DI TESTO E JAVASCRIPT

I campi di tipo testo sono: text, password, textarea hanno una serie di attributi hai quali è possibile accedere da
Javascript per generare una serie di eventi, essi sono:
- name: deve essere unico nel formulario.
- value: valore del campo, non è obbligatorio.
- disabled: consente di bloccare un campo con il valori true (di default è false).
- ReadOnly: non permette di modificare il contenuto di un campo con il valore true (false di default).
- size: è la dimensione di larghezza del campo, non limita il numero di caratteri.
- length: memorizza il numero di caratteri di un campo.
- maxlength: specifica la quantità massima di caratteri in un campo.
Dato il formulario:
<form name="pruebas" method="post" action="" />
<input type="text" name="nombre" id="testo" value="nombre por defecto" />
</form>
Per accedere a queste proprietà da Javascript ci sono due modi:
1) con gli attributi name del formulario e del campo:
nameform.namecampo.proprietà
<script type="text/javascript">
alert(pruebas.nombre.value);
</script>
2) con l’id dell’elemento che si vuole modificare (consigliato):

document.getElementById(“id”).proprietà
alert(document.getElementById("testo").value);
</script>
Dall’altro lato, i metodi dei campi di testo a cui è possibile accedere da javascript sono:
- focus(): pone il cursore nel campo.
- select(): seleziona il contenuto del campo.
- toUpperCase(): converte il testo del campo in maiuscolo.
- toLowerCase(): converte il testo del campo in minuscolo.
Per accedere a questi metodi si usa la stessa sintassi delle proprietà:
document.getElementById(“id”).focus();
Gli eventi che mediante javascript permettono di accedere a questi campi di testo sono:
- onFocus - onBlur – onSelect – onKeyUp – onKeyDown – onKeyPress – onClick – onChange – onMouseOver -
onMouseOut
In questi eventi l’azione da lanciare, quando vengono chiamati, sta definita in Javascript.
Vediamo un esempio di come con l’evento onKeyUp chiama una function che blocca il campo 2 finché non viene
riempito il campo 1.
function block() {
if (document.getElementById("campo1").value == "") {
document.getElementById("campo2").disabled = true;
} else {
document.getElementById("campo2").disabled = false;
}
}
CHECKBOX, RADIO BUTTONS E JAVASCRIPT

Abbiamo visto che la differenza sostanziale tra checkbox e radio è che il primo consente di selezionare più valori, mentre
il secondo solo uno deselezionando gli altri.
Le proprietà accessibili da Javascript per questi elementi sono:

- name: identifica un checkbox o un gruppo di radio.
- value: valore associato all’elemento.
- disabled: blocca l’elemento.
- checked: indica se un valore sta selezionato (true) o no (false).
- length: si usa solo in radio buttons, ritorna la quantità di valori che contiene nello stesso gruppo.
- index : si usa solo in radio buttons, è un array numerico che contiene i valori di radio dello stesso gruppo.
Gli eventi che mediante javascript permettono di accedere agli elementi checkbox e radio sono:
- onFocus – onBlur – onClick – onChange
SELECT/OPTION E JAVASCRIPT
Rappresentano una lista a tendina di valori che possono essere selezionati. Select è l’elemento contenitore, mentre option
sono le varie opzioni che conterrà.
Le proprietà accessibili da JavaScript per select sono:
- name: nome dell’elemento.
- size: numero di elementi option visibili.
- option: permette di accedere ad ogni figlio option che contiene.
- disabled: per bloccare l’elemento.
- multiple: consente di selezionare più di un elemento option.
Le proprietà accessibili da JavaScript per option sono:

- value: valore associato all’option.
- text: testo che viene mostrato.
- selected: indica se un elemento sta selezionato.
- selectedIndex: indica qual è la option selezionata.
- index: valore che permette di accedere ai dati di un select in formato array.
- length: quantità di option dentro un select.
Non esistono metodi accessibili da javascript per option, mentre per select sono il metodo focus().
Non esistono nemmeno eventi associati a option, mentre per select sono: onfocus – onblur – onchange.
VALIDAZIONE DI UN FORMULARIO
La validazione di un formulario migliora l’efficienza di un formulario: consente di controllare che dati si introducono e se
sono corretti oppure no.
Per prima cosa si crea un controllo, per esso usiamo un metodo che valida i dati prima di inviare il formulario.
Si sostituisce il bottone di invio, submit, con un normale button che non invia il formulario, ma genera un evento onClick
che chiama la function di validazione.
<input type="button" name="invio" value="Invio" onclick="validar(this.form)>
La function si definisce con una variabile (valido) che ha il controllo se il formulario sia valido o no e un if...else che
consente di inviare il formulario o mostrare un messaggio di errore.
funcion validar(formulario) {
var valido = “s”;
var messaggio = “”;
...codice…
if(valido == “s”) {
formulario.submit();
} else {
alert(messaggio);
}
}
VALIDAZIONE CAMPO VUOTO

Abbiamo un formulario con un campo che deve essere compilato altrimenti il formulario non può essere inviato, per farlo
nella funcion di validazione, al posto di ...codice…, inseriamo:
if (document.getElementById("campo").value == "") {
valido = "n";
messaggio = messaggio + "Compilare campi vuoti";
}
VERIFICA INSERIMENTO DI NUMERI

Per validare che vengano inseriti correttamente in un campo numerico valori numerici, si usano le function isNaN e
ParseInt:
numero = parseInt(document.getElementById("campo").value);
if(isNaN(numero)) {
valido = "n";
messaggio = messaggio + "Non è un numero";
}
ESPRESSIONI REGOLARI
Le espressioni regolari sono uno strumento che consentono di definire espressioni per verificare se una stringa ha un
formato che soddisfa o no i requisiti indicati.
Si scrivono tra /.../.
JavaScript ha un supporto nativo per le espressioni regolari basato sull’oggetto RegExp. Un’espressione regolare in
JavaScript quindi è un oggetto, con delle proprietà e metodi che consentono di gestire testi, individuare ed eventualmente
sostituire stringhe all’interno di altre stringhe.
Ci sono due approcci per creare un’espressione regolare:
- facendo riferimento all’oggetto RegExp :
var x = new RegExp("abc");
- (consigliato)con una notazione letterale:
var y = /abc/;
Entrambe le istruzioni ottengono lo stesso risultato: la ricerca di istanze “abc” all’interno di altre stringhe.
Possiamo dire che una espressione regolare è uno schema di stringa (pattern) composto da una sequenza di caratteri
alfanumerici e di eventuali caratteri speciali.
Un’espressione di soli caratteri alfanumerici indica direttamente la stringa da ricercare all’interno di un’altra stringa,
l’espressione regolare /abc/ può essere utilizzata per ricercare o sostituire la sottostringa abc all’interno di una stringa.
Normalmente la ricerca di pattern all’interno di una stringa avviene tenendo conto della distinzione tra maiuscole e
minuscole e la ricerca o sostituzione termina non appena viene individuata un’occorrenza.
È possibile modificare questo comportamento tramite i seguenti modificatori:
i esegue una ricerca ignorando la distinzione tra maiuscole e minuscole
g esegue una ricerca globale, cioè individua tutte le occorrenza di un pattern
m esegue una ricerca su stringhe multilinea
I modificatori vengono specificati in maniera diversa a seconda dell’approccio utilizzato per definire l’espressione
regolare. Nel caso di utilizzo di un letterale vengono specificati subito dopo il letterale stesso, mentre in caso di utilizzo
dell’oggetto RegExp essi vengono indicati come parametro aggiuntivo.
I caratteri speciali consentono di creare pattern che individuano una o insiemi di stringhe.
\ Indica un carattere speciale che deve essere cercato nella stringa (\@ e \. nelle email)
^ Corrisponde all’inizio di una stringa o di una riga (^x stringa o riga che iniziano per x)
[^] Trova ogni singolo carattere non incluso nelle parentesi. [^abc] trova ogni carattere diverso da a, b, c.
$ Corrisponde alla fine di una stringa o di una riga ($e righe che terminano per e)
| Indica alternative (/(L|f|b)ocal/ cerca Local,focal e bocal)
() Definisce un raggruppamento di caratteri o sottoespressioni
Trova un singolo carattere contenuto nelle parentesi ([abc] trova o "a", "b", o "c"). consente di
[]
specificare un intervallo di caratteri indicando l’elemento iniziale e quello finale, come [a-z] e [0-9].
Abbiamo poi i metacaratteri, cioè di caratteri che ne indicano altri.
. Indica un singolo carattere
\w Indica un carattere alfanumerico ((/[A-Z]\w → A4 → ok))
\W Indica un carattere NON alfanumerico (/[A-Z]\D → A% → ok)
\d Indica una cifra numerica (/[A-Z]\d → A4 → ok)
\D Indica una cifra NON numerica (/[A-Z]\D→ A4 → errore)
\b Esegue una ricerca all’inizio (messo prima) o alla fine (messo dopo) di una parola in una stringa
\B Esegue una ricerca nel mezzo di una parola
\s Indica un carattere di spazio bianco
\S Indica tutti i caratteri tranne gli spazi bianchi
Per evitare che questi caratteri siano interpretati come i caratteri alfabetici si usa l’ escaping \.
Esempi:
".atto" trova ogni stringa di cinque caratteri come gatto, matto o patto
"[gm]atto" trova gatto e matto
"[^p]atto" trova tutte le combinazioni dell'espressione ".atto" tranne patto
"^[gm]atto" trova gatto e matto ma solo all'inizio di una riga
"[gm]atto$" trova gatto e matto ma solo alla fine di una riga
La seguente espressione regolare individua le stringhe che iniziano con un numero a due cifre, sono seguiti dalla stringa
aa, da un carattere qualsiasi e terminano con due caratteri alfanumerici:
var y = /\d\daa.\w\w/i;
Un’altra importante categoria di caratteri speciali è quella dei quantificatori, cioè di caratteri che indicano quante volte
un carattere può comparire in una stringa. Vediamone alcuni:
+ messo dopo un carattere o un insieme di caratteri, ripete 1 o più volte quel carattere o l’insieme
* messo dopo un carattere o un insieme di caratteri, ripete 0 o più volte quel carattere o l’insieme
? messo dopo un carattere o un insieme di caratteri, ripete 0 o 1 volta quel carattere o l’insieme
{n} Indica il carattere o l’insieme esattamente n volte
{m,n} Indica il carattere o l’insieme tra m e n volte
La seguente espressione regolare individua nomi validi per le variabili in JavaScript, cioè sequenze di caratteri
alfanumerici di lunghezza variabile che iniziano con un carattere alfabetico:
var y = /[a-z]+\w*/i;
Per fare un altro esempio concreto di espressione regolare, quella che segue individua lo schema di un codice fiscale:
var codiceFiscale = /[a-z]{6}\d{2}[abcdehlmprst]\d{2}[a-z]\d{3}[a-z]/i;
Metodi e proprietà
Una volta creata l’istanza di un’espressione regolare in JavaScript possiamo sfruttarne le proprietà e i metodi.
Le proprietà global, ignorecase e multiline indicano se per l’espressione corrente sono stati specificati i rispettivi
modificatori i, g, m.
var y = /[a-z]+\w*/ig;
le proprietà y.global e y.ignorecase valgono true, y.multiline sarà false.
Il metodo test() consente di verificare se una stringa, individuata dall’espressione regolare, è contenuta nella stringa
passata come argomento. Ad esempio:
var y = /\d/;
y.test("str1nga"); //true
y.test("stringa"); //false
Il metodo exec() restituisce un array con la sottostringa individuata o il valore null in caso di esito negativo:
var y = /\d/;
y.exec("str1nga"); //["1"]
y.exec("stringa"); //null
L’esecuzione dei metodi test() ed exec() su un’espressione regolare con modificatore global g aggiorna la proprietà
lastIndex dell’oggetto RegExp, proprietà che contiene l’indice della stringa da cui partire per la ricerca. Dopo l’eventuale
individuazione di una sottostringa questa proprietà viene aggiornata con l’indice che punta al resto della stringa. Questo
comporta che l’eventuale riesecuzione di test() o exec() sulla stessa espressione regolare permette di individuare eventuali
successive occorrenze di sottostringhe.
var y = /\d/g;
y.exec("str1ng4"); //["1"]
y.exec("str1ng4"); //["4"]
y.exec("str1ng4"); //null
Alcuni metodi dell’oggetto String accettano espressioni regolari come argomento.
Il metodo search() restituisce l’indice della prima occorrenza di una stringa individuata tramite l’espressione regolare
passata come argomento, -1 se non trovata:
var x = "str1nga".search(/\d/); //x = 3
Il metodo split(), genera un array a partire da una stringa, con espressioni regolari come input:
var x = "str1nga".split(/\d/); //["str", "nga"]
Il metodo replace() consente di sostituire una o più occorrenze di una stringa, individuata da un’espressione regolare, con
un’altra stringa:
var x = "str1ng4".replace(/\d/g, "numero"); //"strnumerongnumero"
Il metodo match() consente di ottenere un array con le sottostringhe individuate da un’espressione regolare:
var x = "str1ng4".match(/\d/g); //["1", "4"]
Esempi comuni di espressioni regolari

un loro classico utilizzo è quello della validazione dell’input dell’utente.
Le seguenti espressioni rappresentano alcuni pattern di validazione molto comuni:
/\w+@\w+\.\w{2,4}/i email
/\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}/ indirizzo IP
/<div\b[^>]*>(.*?)<\/div>/i elemento HTML <div>
(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w\.-]*)*\/? un URL
Principalmente le validazioni con un espressioni regolari si effettuano con il metodo test() e il seguente codice:
var esp = / espressione regolare /;

if(!esp.test(campoformulario) {
valido = “n”;
messaggio = messaggio + “…..”;
}
VALIDAZIONE DI DATE
Vediamo una function che riceve una data introdotta dall’utente e ritorna se essa è valida o no.
function validData(data) {
var Data = new String(data);
var realData = new Date();
var anno = new String(Data.substring(Data.lastIndexOf("-") + 1, Data.length));
var mese = new String(Data.substring(Data.indexOf("-") + 1, Data.lastIndexOf("-")));
var giorno = new String(Data.substring(0, Data.indexOf("-")));
if(isNaN(anno) || anno.length < 4 || parseFloat(anno) < 1900) {
return false;
}
if(isNaN(mese) || parseFloat(mese) < 1 || parseFloat(mese) > 12) {
return false;
}
if(isNaN(giorno) || parseInt(giorno) < 1 || parseInt(giorno) > 31) {
return false;
}
if(mese == 4 || mese == 6 || mese == 9 || mese == 11 || mese == 2) {
if (mese == 2 && giorno > 28 || giorno > 30) {
return false;
}
}
return true;
}
Una volta che abbiamo questa function, per chiamarla, si inserisce nella function principale di validazione il codice:
if (!validData(document.getElementById("nascita").value)) {
valido = "n";
messaggio = messaggio + "Data di nascita non valida\n";
}
MODALITÀ RIGOROSA USE STRICT

La direttiva "use strict"; è una espressione letterale che definisce che il codice JavaScript deve essere eseguito in
"modalità rigorosa" che aiuta a scrivere codice più pulito.
La modalità rigorosa viene dichiarata aggiungendo "use strict"; all'inizio di uno script o di una funzione, avrà un ambito
globale.
La modalità rigorosa rende la scrittura di JavaScript "sicura":
- non è possibile, ad esempio, utilizzare variabili non dichiarate.
- non consente l’eliminazione di una variabile, di un oggetto, di una function.
- non consente di usare stessi nomi per i parametri.
- non consente la scrittura su una proprietà di sola lettura.
- modifica la "sintassi errata" ,ad esempio,l 'errata digitazione di un nome di variabile crea una nuova variabile globale. In
modalità rigorosa, questo genera un errore, rendendo impossibile creare accidentalmente una variabile globale.
- qualsiasi assegnazione a una proprietà non scrivibile, una proprietà getter-only, una proprietà non esistente, una variabile
inesistente o un oggetto non esistente genererà un errore.
DOM (DOCUMENT OBJECT MODEL)

Quando una pagina Web viene caricata, il browser crea un DOM della pagina.
Il DOM è uno standard W3C che definisce uno standard per l'accesso ai documenti, è un'interfaccia che consente a
programmi e script di accedere e aggiornare dinamicamente il contenuto, la struttura e lo stile di un documento.
Lo standard DOM W3C è suddiviso in 3 parti differenti:
- Core DOM : modello standard per tutti i tipi di documento;
- DOM XML: modello standard per documenti XML;
- HTML DOM : modello standard per documenti HTML;
Il DOM HTML è un modello di oggetto standard e un'interfaccia di programmazione per HTML, in altre parole è uno
standard su come ottenere, modificare, aggiungere o eliminare elementi HTML.
Definisce:
- Gli elementi HTML come oggetti.
- Le proprietà di tutti gli elementi HTML
- I metodi per accedere a tutti gli elementi HTML
- Gli eventi per tutti gli elementi HTML
Il modello DOM HTML è costruito come un albero di oggetti:
Con esso, JavaScript ottiene ciò di cui ha bisogno per creare HTML dinamico:
- può cambiare tutti gli elementi HTML nella pagina
- può cambiare tutti gli attributi HTML nella pagina
- può cambiare tutti gli stili CSS nella pagina
- può rimuovere elementi e attributi HTML esistenti
- può aggiungere nuovi elementi e attributi HTML
- può reagire a tutti gli eventi HTML esistenti nella pagina
- può creare nuovi eventi HTML nella pagina.
NODI DOM HTML

Abbiamo detto che il modello DOM HTML è costruito come un albero, ogni elemento è detto nodo.
Secondo lo standard DOM HTML W3C, tutto in un documento HTML è un nodo:
- L'intero documento è un nodo del documento
- Ogni elemento HTML è un nodo elemento
- Il testo all'interno degli elementi HTML sono nodi di testo
- Ogni attributo HTML è un nodo attributo (deprecato)
- Tutti i commenti sono nodi di commento
Tutti i nodi nella struttura dei nodi sono accessibili da JavaScript: è possibile creare nuovi nodi e tutti i nodi possono
essere modificati o eliminati.
I nodi nell'albero hanno una relazione gerarchica tra loro descritta dai termini: genitore, figlio e fratello.
- In un albero il nodo superiore è chiamato root (o root node)
- Ogni nodo ha esattamente un genitore, tranne la radice
- Un nodo può avere un numero di figli
- I fratelli sono nodi con lo stesso genitore
Dall'HTML si ha:
- <html> è il nodo radice
- <html> non ha genitori
- <html>è il genitore di <head>e<body>
- <head> è il primo figlio di <html>
- <body> è l'ultimo figlio di <html>
NAVIGAZIONE TRA I NODI

Usando le relazioni del nodo è possibile navigare tra i nodi di un albero con JavaScript attraverso alcune proprietà.
Dato che tutto in un documento html è un nodo, precisiamo ancora che se abbiamo:
<title id=”tit”> TITOLO </title>
il nodo title non contiene un testo, ma un nodo di testo con il valore “TITOLO”.
Detto questo, è possibile accedere al valore di un nodo con la proprietà innerHTML:
var myTitle = document.getElementById(“tit”).innerHTML;
Di solito, e per semplicità, si usa questa proprietà per recuperare il contenuto di un elemento HTML, ma ci sono altre
proprietà che è utile imparare per comprendere la struttura ad albero e la navigazione del DOM.
In modo equivalente possiamo accedere al valore di un nodo con:
var myTitle = document.getElementById(“tit”).firstChild.nodeValue;
dove con:
- firstChild: si accede al primo figlio di un nodo;
- nodeValue: si accede al valore del nodo, per i nodi elemento è null, per i nodi di testo è il testo stesso, per i nodi di
attributo è il valore dell'attributo.
Ed infine equivalentemente con:
var myTitle = document.getElementById(“tit”).childNodes[0].nodeValue;
Esistono due proprietà speciali che consentono l'accesso al documento completo:

- document.body: Il corpo del documento
- document.documentElement: Il documento completo
La proprietà nodeName specifica il nome di un nodo,contiene il nome del tag in maiuscolo di un elemento HTML.
parentNode: ritorna il padre o l’elemento precedente all’oggetto indicato, l’elemento genitore che contiene l’elemento di
riferimento.
PROPAGAZIONE DEGLI EVENTI BUBBLING E CAPTURE
La propagazione degli eventi è un modo di definire l'ordine degli elementi quando si verifica un evento.
Se si dispone di un elemento <p> all'interno di un elemento <div> e l'utente fa clic sull'elemento <p>, l'evento di "clic" di
quale elemento deve essere gestito per primo?
Esistono due modi di propagazione degli eventi nel DOM HTML, bubbling e capture.
In bubbling, l'evento dell'elemento più interno viene gestito per primo e poi l'esterno: l'evento click dell'elemento <p>
viene gestito per primo, quindi l'evento click dell'elemento <div>.
Nel capture l'evento dell'elemento più esterno viene gestito prima e poi l'interno: l'evento click dell'elemento <div> verrà
gestito per primo, quindi l'evento click dell'elemento <p>.
Il valore predefinito è false, che utilizzerà la propagazione bubbling.
OGGETTO DOCUMENT
L'oggetto documento rappresenta la pagina web è il proprietario di tutti gli altri oggetti nella pagina web, contiene tutti
gli elementi della pagina.
Se si desidera accedere a qualsiasi elemento in una pagina HTML, si inizia sempre con l'accesso all'oggetto documento.
Nel DOM, tutti gli elementi HTML sono definiti come oggetti.
PROPRIETÀ DELL’OGGETTO DOCUMENT

Le proprietà DOM HTML sono valori di elementi HTML che è possibile impostare o modificare.
Con le proprietà di questo oggetto è possibile fare cambi dinamici nel sito.
Le proprietà più usate sono:
- anchors: è un array che contiene i link interni presenti nel documento.
- all: (in disuso) è un array che contiene tutti gli elementi,di qualsiasi tipo, dentro del documento.
- applets: (in disuso) è un array che che contiene le applets create nel sito.
- images: è un array che contiene le immagini del sito.
- forms: è un array che che contiene i formulari creati nel sito.
- links: è un array che contiene i link esterni del sito.
- bgColor: (in disuso) contiene il colore di fondo del documento.
- cookie: è un valore in string che contiene i valori dei cookies che ha il documento separati da “;”
- domain: salva il nome del server dove alloggia il sito.
- alinkColor: contiene il colore che si usa per i link attivi.
- location: stringa che contiene la posizione del sito.
- referrer: stringa che contiene la URL che ha caricato il documento corrente.
- body: si usa per riferimento al corpo del sito, tutto il contenuto nei tags HTML, solo in lettura.
- lastModified: contiene la data di modifica del documento.
- readyState: stato dell’oggetto, ha 4 possibili valori: senza caricare, in caricamento, senza terminare la carica me
interattivo, carica completa.
- height: contiene l’altezza del documento attuale, può cambiare.
- width: contiene la larghezza del documento attuale, può cambiare.
- styleSheets: ritorna una lista dei fogli di stile CSS usati nel documento.
METODI DELL’OGGETTO DOCUMENT

I metodi DOM HTML sono azioni che possono essere eseguite su elementi HTML.
Vediamo i più importanti:
- document.getElementById(“id”): (consigliato) è una delle function più utilizzate, consente di far riferimento a un
elemento direttamente tramite il suo id e accedere a tutti i suoi attributi e stili.
Con questo metodo è possibile usare proprietà come:
- innerHTML: per modificare in modo semplice il contenuto di un elemento HTML.
- attributo: si intende il metodo seguito da un qualsiasi attributo per modificarne il valore:
document.getElementById("myImage").src = "image.jpg";
- document.getElementByName(“name”): ritorna una lista di elementi che hanno il nome indicato come parametro. La
lista viene ritornata come un array di n elementi con lo stesso name.
La sintassi è:
var array = document.getElementsByName(“nome”);
- document.write(“...”): consente di scrivere una stringa di testo nel documento.

Il contenuto può essere un testo indicato tra ‘’ o una variabile.
In base alla posizione in cui viene inserito avrà un effetto differente, se viene inserito in una function, quando questa verrà
invocata, il testo sostituirà tutto il contenuto Html presente nella pagina.
- document.writeln(“...”): è simile a quella precedente, la differenza è che alla fine del testo inserito va a capo, aggiunge
un salto di linea.
- document.createTextNode(“...”): consente di inserire testo dentro un elemento già creato.

Questa si appoggia ad una altra function, appendChild(), che consente di inserire elementi creati dentro altri elementi.
Se già esiste un paragrafo con del testo, si crea altro testo con document.createTextNode(“”) e lo si aggiunge con
appenChild(). La sintassi è:
var paragrafo = document.getElementById(“idParag”);
var variabile = document.createTextNode(“Nuovo testo da inserire”);
paragrafo.appendChild(variabile);
- document.createElement(“elem”): consente di creare elementi nell’Html, è uno strumento utile per poter creare in
dinamico il contenuto di una pagina web.
La sintassi è:
var nuovoElem = document.createElement(“elem”);
- insertBefore(nuovo, riferimento): consente di inserire un elemento prima di un altro già definito.

Riceve due parametri: il primo è il nuovo elemento da inserire, il secondo è il riferimento all’ elemento già definito.
La sintassi è:
[elementoPadre].insertBefore(nuovoElem, riferimentoElemDef);
Dove elementoPadre è l’elemento che contiene l’elemento di riferimento.
Esempio:
<div>
<span id="elemento">elemento definito</span>
</div>
var nuovo = document.createElement("span"); //crea nuovo elemento span
var testo = document.createTextNode("nuovo testo"); // crea nuovo testo
nuovo.appendChild(testo); //inserisce testo nel nuovo elemento span
var elemDefinito = document.getElementById("elemento");
var elementoPadre = elemDefinito.parentNode;
elemPadre.insertBefore(nuovo, elemDefinito);
</script>
- document.createAttribute(“...”) e setAttributeNode(): consentono di creare attributi agli elementi, non definiti

nell’Html. È possibile creare attributi reali degli elementi, come un id di un div, o creare nuovi attributi.
La sintassi :
var attributo = document.createAttribute(nome);

elemento.setAttribute(attributo);
per conoscere i valori degli attributi si usa la function “getAttribute”.

Si usa la proprietà nodeValue per assegnare il valore all’attributo.
Esempio
<head>
function creaAttributo() {
var elemento = document.getElementById("elem"); //riferimento a elemento a cui aggiungere nuovo attributo
var attributo = document.createAttribute("nuovoAttributo"); //creazione nuovo attributo
attributo.nodeValue = "valore del nuovo attributo"; //assegnazione valore al nuovo attributo
elemento.setAttributeNode(attributo); //si imposta il nuovo attributo all'elemento
alert(elemento.getAttribute("nuovoAttributo")); //mostra il valore dell'attributo
}
</script>
</head>
<body onload="creaAttributo()">
<div id="elem"></div>
</body>
- parent.removeChild(child): consente di rimuovere elementi HTML esistenti. Si deve conoscere l’elemento genitore
dell’elemento da rimuovere.
<div id="div1">
<p id="p1">This is a paragraph.</p>
</div>
<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
</script>
- document.addEventListener(“evento”, function, bubbling): consente di aggiungere più di un evento ad uno stesso

elemento specificato, senza sovrascrivere quelli già esistenti, ad esempio due eventi clic. Definisce azioni che verranno
eseguite nel fare determinate azioni su un elemento. Nello stesso modo di onClick, si può usare questo metodo per
associare chiamate a funcion a eventi negli elementi.
La sintassi è:
elem.addEventListener(“evento”, function, bubbling);
Il metodo riceve tre parametri:
1) il tipo di evento (click, mouseOver, mouseOut…);
2) la function che deve essere eseguita quando si lancia l’evento.
3) Opzionale. Un valore booleano che specifica se il gestore eventi deve essere eseguito nella fase di capture (true) o nella
fase di bubbling (false, predefinito).
- document.removeEventListener(“evento”, function, boolean): consente di eliminare un evento che creato con il

metodo precedente. La sintassi:
elem.removeEventListener(“evento”, function, bubbling);
- document.createEvent(“...”): consente di generare eventi dinamicamente, o simulare qualsiasi evento.

Ad esempio: simulare il clic del mouse su un elemento senza che questo succeda veramente, realizzare chiamate a
function in modo che si effettuino metodi su altri elementi (digitando un tasto in un campo di testo si preme il bottone di
invio), attivare un checkbox in base a determinate azioni, ecc.
Questo si ottiene mediante due function, che non sono necessarie, ma interessante conoscerle:
1) initMouseEvent() o initEvent(): crea un istanza dell’evento da lanciare: la prima lancia eventi di mouse, la seconda
eventi Html.
La sintassi è:
evento.initMouseEvent(tipo, bolla, cancellabile, vista, precisione, posizioneX, posizioneY, utenteX,
.
utenteY, tastoCtrl, tastoAlt, tastoShift, TeclaMeta, bottone, elemento);
- Tipo: il tipo di evento (click, mousedown, mouseup, mouseover, mousemove)

- Bubbling: (true o false) indica se l’evento permette l’effetto bolla, cioè, se si associa una function a vari elementi, se ha
valore true, verrà eseguita prima l’azione associata all’elemento più esterno e così via fino a quello più interno, se ha
valore false si verifica il contrario.
- Cancellabile: indica se l’evento può cancellarsi o no.
- Vista: consente passare l’oggetto “window” a cui fa riferimento.
- Precisione: un contatore di “click” del mouse.
- “posizioneX”: la coordinata nell’asse X di posizione dell’evento rispetto alla finestra intera.
- “posizioneY”: la coordinata nell’asse Y di posizione dell’evento rispetto alla finestra intera.
- “utenteX”: la coordinata nell’asse X della posizione dell’evento rispetto alla vista dell’utente e del suo browser.
- “utenteY”: la coordinata nell’asse Y della posizione dell’evento rispetto alla vista dell’utente e del suo browser.
- “tastoCtrl”: indica se il tasto CTRL della tastiera è premuto durante l’evento.
- “tastoAlt”: indica se il tasto ALT della tastiera è premuto durante l’evento.
- “tastoShift”: indica se il tasto SHIFT della tastiera è premuto durante l’evento.
- bottone: indica che tasto del mouse è premuto: 0 (sinistro), 1(centrale), 2(destro).
- elemento: usato in eventi mouseover e mouseout, indica l’elemento a cui fa riferimento, in caso contrario si mette null.
2) dispatchEvent(evento): lanciare un evento dall’elemento che si vuole. Per chiamare un metodo su un qualsiasi
elemento HTML: si definisce un nuovo evento con createEvent, si memorizza in una variabile, poi con initEvent o
initMouseEvent si definiscono le proprietà dell’evento che si vuole usare, infine con dispatchEvent su questo evento
verrà eseguita l’azione.
- document.getElementsByTagName(“nometag”): trova elementi per il nome del tag.
Restituisce un oggetto HTMLCollection che è un elenco di tipo array di elementi HTML.
var x = document.getElementsByTagName("p");
selezione tutti gli elementi <p> in un documento.
La variabile x, in questo caso, è un array che contiene gli elementi p a cui è possibile accedere con un indice i (x[i]).
La proprietà length ci consente di conoscere il numero di elementi della collection (x.length).
BOM (BROWSER OBJECT MODEL)

Il BOM consente a JavaScript di dialogare con il browser.
Non ci sono standard ufficiali per esso, ma quasi tutti i browser moderni hanno implementato gli stessi metodi e proprietà.
L’OGGETTO WINDOW
L’oggetto window rappresenta la finestra del browser.
L' oggetto window è supportato da tutti i browser.
Tutti gli oggetti JavaScript, le funzioni e le variabili globali diventano automaticamente membri dell'oggetto finestra. È
l’oggetto padre di tutti gli elementi di un sito, tutti i tag che compongono la pagina. Anche l'oggetto documento, del DOM
HTML, è una proprietà dell'oggetto window.
PROPRIETÀ DI WINDOW
Le principali proprietà dell’oggetto window sono:
- screen: contiene informazioni sullo schermo dell’utente. Puo essere scritto senza usare window (window.screen).
A sua volta ha altre proprietà:
- screen.width: restituisce la larghezza dello schermo dell’utente in px.
- screen.height: restituisce l’altezza dello schermo dell’utente in px.
- screen.availWidth: restituisce la larghezza dello schermo in px, meno le caratteristiche dell'interfaccia come la
.
barra delle applicazioni di Windows.
- screen.availHeight: restituisce l’altezza dello schermo in px, meno le caratteristiche dell'interfaccia come la
.
barra delle applicazioni di Windows.
- screen.colorDepth: restituisce il numero di bit utilizzati per visualizzare un colore. Tutti i computer moderni
utilizzano hardware a 24 o 32 bit per la risoluzione del colore:
24 bit = 16.777.216 diversi "True Colours"
32 bit = 4.294.967.296 diversi "colori profondi"
I computer più vecchi utilizzavano 16 bit: 65.536 diversi colori "Alta risoluzione".
Computer molto vecchi e vecchi telefoni cellulari utilizzavano 8 bit: 256 diversi "colori VGA".
- screen.pixelDepth: restituisce la profondità in pixel dello schermo.
Per i computer moderni, Profondità colore e Profondità pixel sono uguali.
- closed: è una proprietà di sola lettura e ritorna true se la finestra a cui si fa riferimento sta chiusa o false se sta aperta.
var staChiusa = finestra.closed;
- frames: proprietà è di sola lettura, restituisce un oggetto array, con tutti gli elementi <iframe> nella finestra corrente,
funziona anche per gli elementi <frame> che, tuttavia, non è supportato in HTML5, se presenti in una pagina web.
Di solito non è consigliato usare frame in una pagina web.
- history: ritorna l'oggetto della cronologia che contiene gli URL visitati dall'utente all'interno di una finestra del browser,
per poter interagire con esso.
Questa proprietà ha sua volta ha le seguenti function:
- history.back(): il browser va all’URL della pagina precedente visitata e salvata nella cronologia.
Simile al bottone indietro (←) del browser.
- history.forward(): il browser va all’URL della pagina successiva visitata e salvata nella cronologia.
Simile al bottone avanti (→) del browser.
- history.go(numero): carica uno specifico URL della pagina salvata nella cronologia. Richiede un numero
come parametro che indica di quante pagine si deve andare indietro (numero negativo) o
.
avanti (numero positivo) nella cronologia dalla pagina attuale.
- innerHeight: altezza in px del solo contenuto della finestra del browser, senza includere gli elementi del browser, a
parte i possibili scrolls (scorrimenti).
- innerWidth: larghezza in px del solo contenuto della finestra del browser, senza includere gli elementi del browser, a
parte i possibili scrolls.
- outherHeight: altezza in px totale del browser che include tutto: il contenuto della pagina e gli elementi del browser.
- outherWidth: larghezza in px totale del browser che include tutto: il contenuto della pagina e gli elementi del browser.
- length: numero di frame o iframe che contiene la finestra, viene spesso usata con window.frames.
- opener: Restituisce un riferimento alla finestra che ha aperto la finestra corrente. Quando una finestra viene aperta come
popup da un'altra finestra, mantiene un riferimento a quest'ultima a cui si può accedere con window.opener. Se la finestra
corrente non ha un "opener", questo metodo restituisce null.
- parent: restituisce il riferimento alla finestra genitore della finestra corrente o frame corrente. Se una pagina è inserita in
un frame, la finestra genitore sarà quella che contiene il frame.
- navigator: oggetto che contiene informazioni sul browser. Ha diverse proprietà, che sono:
- navigator.appCodeName: ritorna il nome in codice del browser. I browser moderni restituiscono
.
“Mozilla" per motivi di compatibilità.
.
- navigator.appName: ritorna il nome del browser. I browser moderni restituiscono
.
“Natscape" per motivi di compatibilità..
- navigator.appVersion: ritorna la versione del browser.
- navigator.cookieEnabled: ritorna true se il browser ha i cookies attivati.
- navigator.language: ritorna il linguaggio del browser (it, es, fr, ecc).
- navigator.onLine: ritorna “true” se il browser è online, “false” se offline.
- navigator.platform: ritorna la piattaforma (S.O) dove sta lavorando il browser.
- navigator.plugins: ritorna un array con la lista di plugins installati nel browser.
- navigator.product: ritorna il nome del motore di rendering del browser che interpreta lo stile associato ai .
. file html. Ritorna Gecko per la maggior parte dei browser.
- navigator.userAgent: ritorna il valore dell'intestazione user-agent inviata dal browser al server,
…………………………………………………………………….informazioni sul nome, la versione e la piattaforma del browser.
- navigator.vendor: ritorna il venditore, proprietario del browser. Con Chrome Google Inc.
- location: può essere utilizzato per ottenere informazioni sull’URL della pagina corrente e per reindirizzare il browser a
una nuova pagina. Ha varie proprietà:
- location.href: restituisce l’URL completo della pagina corrente.
- location.hostname: restituisce il nome di dominio dell’host web.
- location.pathname: restituisce il percorso e il nome del file della pagina corrente.
- location.protocol: restituisce il protocollo della pagina corrente.
- location.port: restituisce il numero della porta host internet della pagina corrente. La maggior parte d
ei . dei browser non visualizza i numeri di porta predefiniti (80 per http e 443 per https).
- location.assign(“url”): carica un nuovo documento usando un bottone o un elemento cliccabile. Di solito
.
è contenuto in una function che verrà chiamata da un evento. Manterrà l’url della
.
pagina precedente nella cronologia.
METODI DI WINDOW
- window.addEventListener(“evento”, function, bubbling): questo metodo può essere usato anche sull’oggetto window.
- window.removeEventListener(“evento”, function, bubbling): questo metodo può essere usato anche sull’oggetto
window.
- window.close(): consente di chiudere una finestra già aperta.
- window.open(): consente di creare e aprire una nuova finestra da quella in cui ci troviamo.
La sintassi è:
var nuovaFinestra = window.open(url, nome, proprietà) ;
La variabile nuovaFinestra contiene il riferimento alla nuova finestra creata.
Il parametro url è il percorso della pagina che si vuole aprire, se la pagina è una pagina interna al sito basta inserire il
nome di detta pagina (pagina.html), mentre se è una pagina esterna si inserisce l’URL completo.
Il secondo parametro nome è il nome simbolico che daremo alla finestra, non indica il titolo della finestra, non può
contenere spazi.
Il terzo parametro è opzionale e può includere una serie di proprietà, separate da virgole, per creare uno stile definito
della nuova finestra da aprire, le più usate sono:
- left: indica lo spazio di separazione con il margine sinistro del monior.
- top: indica lo spazio di separazione con il margine superiore del monior.
- height: indica l’altezza che avrà la nuova finestra da aprire.
- width: indica la larghezza che avrà la nuova finestra da aprire.
- menubar: se ha valore “yes” la nuova finestra avrà la barra menú del browser.
- toolbar: se ha valore “yes” la nuova finestra avrà la barra degli strumenti del browser.
- location: se ha valore “yes” la nuova finestra avrà la barra degli indirizzi.
- status: se ha valore “yes” la nuova finestra avrà la barra inferiore si stato.
- window.moveTo(X, Y): consente di muovere la finestra, quando non sta maximizzata a tutto schermo, passando per
parametri i valori delle coordinate X e Y.
- window.print(): apre la finestra di Stampa, con le opzioni di stampa, per stampare la pagina corrente.
- window.resizeTo(larghezza, altezza): consente di cambiare le dimensioni della finestra dinamicamente passando per
parametri le dimensioni di larghezza e altezza.
Nei recenti browser, per evitare situazioni scomode, questo metodo ha ricevuto alcune restrizioni come: non si possono
cambiare le dimensioni di una finestra che non è stata creata con window.open o che ha più di una scheda caricata in essa.
È consigliato usare questo metodo solo quando si modificano le proprietà di una finestra creata dal documento Web per
visualizzare le informazioni come popup.
- window.scrollTo(larghezza, altezza): consente, se esistono, muovere lo scroll dello schermo alle coordinate passate per
parametro.
JavaScript ha tre tipi di finestre popup: casella di avviso, casella di conferma e casella di richiesta.
- window.alert(“messaggio”): casella di avviso viene spesso utilizzata per assicurarsi di dare informazioni all'utente.
L’utente dovrà fare clic su "OK" per procedere.
- window.confirm(“”): crea un messaggio di conferma con il testo passato per parametro e due bottoni: “Accetta (ritorna
. true) e Annulla (ritorna false). Viene utilizzata se si desidera che l'utente verifichi o
accetti . accetti qualcosa, dovrà fare clic su "OK" o "Annulla" per procedere.
- window.promt(“messaggio”, “inputfacoltativo”): Una finestra di messaggio viene spesso utilizzata se si desidera
che . che l'utente inserisca un valore prima di caricare una pagina.
Viene visualizzata una finestra di richiesta, l'utente dovrà fare clic su "OK" o "Annulla" per procedere
. dopo aver inserito un valore di input.
TIMING
Per la gestione di intervalli di tempo, Javascript usa due function: “setTimeout” e “setInterval” che consentono di definire
un intervallo di tempo tra la loro chiamata all’esecuzione del codice. Per esempio controllare l’apparizione di elementi in
un tempo concreto.
- setTimeOut(function, tempo): consente di programmare una function in modo che si esegua automaticamente passato
un tempo esatto indicato come parametro.
Il tempo deve essere indicato in millisecondi (1s = 1000ms).
Il conto va alla rovescia e la function si esegue quando arriva a 0.
La sintassi è:
var cronometro = setTimeout(función, milisegundos);
Se si vuole eliminare un cronometro prima che la function sia stata eseguita, si usa la function “clearTimeout()”
passandole per parametro il nome della variabile:
clearTimeout(cronometro);
- setInterval(function, tempo): consente di eseguire un loop infinito della function ogni certo tempo passato come
parametro in millisecondi.
Poiché la funcion o il codice verranno eseguiti all’infinito, per fermare il loop si usa la function “clearInterval()”, che
riceverà per parametro il cronometro da eliminare.
clearInterval(cronometro);
COOKIES
I cookie consentono di memorizzare le informazioni e le preferenze dell'utente nelle pagine Web. Sono dati memorizzati
in piccoli file di testo che si salvano sul computer dell’utente.
Dopo che un server Web ha inviato una pagina Web a un browser, la connessione viene interrotta e il server dimentica
tutto riguardo all'utente. I cookie sono stati inventati appunto per ricordare le informazioni sull'utente. Quando un browser
richiede una pagina Web da un server, i cookie appartenenti alla pagina vengono aggiunti alla richiesta, si verifica se il
browser ha cookie per questa pagina e, se esiste, invia al server le intestazioni dei cookies e così ottenere i dati da essi.
Ad esempio, quando un utente visita una pagina Web, il suo nome può essere memorizzato in un cookie e la volta
successiva che l'utente visita la pagina, il cookie "ricorda" il suo nome.
Vengono salvati in coppie nome=valore.
Un cookie è composto da vari elementi:
- nome=valore: indica un nome che identifica il cookie e il valore che esso conterrà.
- expires (scadenza): indica fino a quando il cookie sarà valido. Se non viene indicata, sarà valido solo mentre il browser
resterà aperto, poi si cancellerà. La data ha un formato concreto GMT, la function toGMTString() di Date la ritorna nel
modo esatto.
var d = new Date ();
var data = d.toGMTString());
- Dominio: indica il dominio (URL) per il quale il cookie sarà valido, non sarà valido per gli altri domini dentro la pagina.
- Path: indica il percorso nel dominio della pagina dove la cookie agisce. Se non specificato, per default prende la pagina
principale che si indica con /.
JavaScript può creare, leggere ed eliminare i cookie con la proprietà document.cookie.
Creare cookie
Con JavaScript, un cookie può essere creato in questo modo:
document.cookie = “username=Niko”;
È possibile aggiungere una data di scadenza (expires=) e un parametro path, per indicare al browser a quale percorso
appartiene il cookie.
document.cookie = “nome=valore; expires = Set, Gio Mes Anno hh:mm:ss GMT; path=/”
Leggere cookie
La proprietà document.cookie restituirà tutti i cookie in una stringa simile a:
cookie1=valore; cookie2=valore; cookie3=valore;
document.cookie si presenta come una normale stringa di testo, ma non lo è. Anche se si scrive una stringa completa di
cookie su document.cookie, quando la si legge si vede solo la coppia nome-valore di essa.
Se si imposta un nuovo cookie, i cookie meno recenti non vengono sovrascritti, viene aggiunto a document.cookie.
Se si desidera trovare il valore di un cookie specificato, è necessario scrivere una funzione JavaScript che cerca il valore
del cookie nella stringa di cookie.
Per leggere un cookie bisogna ricorrere alla stringa document.cookie, cercare il cookie di cui si ha bisogno e prendere il
valore dalla stringa.
Eliminare cookie
Non si può cancellare un cookie direttamente da javascript,
Non è necessario specificare un valore del cookie, basta ricrearlo impostando il parametro expires su una data passata in
modo che il browser rileverà che è scaduto e lo cancellerà..
Devi definire il percorso del cookie per assicurarti di eliminare il cookie corretto, alcuni browser non consentono di
eliminare un cookie senza specificare il percorso.
Esempio di cookie JavaScript

In questo esempio creeremo un cookie che memorizza il nome di un utente che visita la pagina web. La prima volta che
un utente arriva alla pagina web, gli verrà chiesto di inserire il suo nome che verrà memorizzato in un cookie. La
prossima volta che l’utente arriva alla stessa pagina, riceverà un messaggio di benvenuto con il proprio nome.
Per farlo abbiamo bisogno di 3 funzioni JavaScript:
1. Una funzione per impostare un valore del cookie (setCookie())
La funzione riceve come parametri il nome del cookie (cname), il valore del cookie (cvalue) e il numero di giorni fino
.
alla scadenza del cookie (exdays).
Imposta un cookie aggiungendo il cookiename, il valore del cookie e la stringa expires.
2. Una funzione per ottenere un valore di cookie (getCookie())

Riceve il cookiename come parametro (cname).
Crea una variabile (name) con il testo da cercare (cname + "=").
Decodifica la stringa di cookie, per gestire i cookie con caratteri speciali, ad esempio '$'
Dividi document.cookie sul punto e virgola (;) in un array chiamato ca (ca = decodeCookie.split (';')).
Scorrere l'array ca (i = 0; i <ca.length; i ++) e leggere ogni valore c = ca [i]).
Se il cookie viene trovato (c.indexOf (name) == 0), restituisce il valore del cookie (c.substring (name.length, c.length).
Se il cookie non viene trovato, return "".
3. Una funzione per controllare un valore del cookie (checkCookie())
La funzione controlla se un cookie è impostato.
Se il cookie è impostato, verrà visualizzato un saluto.
Se il cookie non è impostato, visualizzerà una finestra di richiesta, chiedendo il nome dell'utente e memorizzerà il
il cookie nome utente per 365 giorni, chiamando la function setCookie().
<!DOCTYPE html>
<html>
<head>
<script>
function setCookie(cname,cvalue,exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires=" + d.toGMTString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
var name = cname + "=";
var decodeCookie = decodeURIComponent(document.cookie);
var ca = decodeCookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function checkCookie() {
var user=getCookie("username");
if (user != "") {
alert("Welcome again " + user);
} else {
user = prompt("Please enter your name:","");
if (user != "" && user != null) {
setCookie("username", user, 30);
}
}
}
</script>
</head>
<body onload="checkCookie()"></body>
</html>
GESTIONE DEGLI ERRORI

JavaScript essendo un linguaggio interpretato dai browser, il controllo degli errori dipende da essi. Per fortuna, la maggior
parte dei browser hanno una Console di Javascript che è possibile aprire per verificare il codice e vedere gli errori che
genera.
Per gestire questi errori esiste un evento dell’oggetto window chiamato “onerror” che si lancia ogni volta che appare un
errore e genera tre parametri: il messaggio di errore, la URL che ha generato l’errore, la linea dove si è verificato l’errore.
Avvisa gli errori in tempo di esecuzione, ma non di bug di sintassi nel codice JS e altri errori.
Generalmente, se solo si vuole consultare i messaggi di errore è più utile usare strumenti esterni di debugn come la
console di Firebug, tenendo in mente la function onerror se vogliamo realizzare determinate azioni a partire da un errore
nel codice.
Si può definire un gestore di errori per pulire il codice con:
<script>
window.onerror = gestore;
function gestore(messaggio, url, linea) {
var texto="Error:\n" + messaggio + "\n" +"(pagina: " + url + ". linea " + linea + ")";
alert(“testo”);
}
</script>
Se usiamo questo codice di gestione mentre si crea la pagina, bisogna eliminarlo una volta sistemato il codice, altrimenti,
nel caso si genereranno errori, verranno mostrati agli utenti.
Vedremo che con Ajax, è possibile aprire un canale con il server senza il bisogno di ricaricare la pagina e, grazie ad esso,
salvare un “log” di errori che noi vedremo ma gli utenti no.
Quando si esegue codice JavaScript, possono verificarsi errori diversi, possono essere errori di codifica commessi dal
programmatore, errori dovuti a input errati e altre cose imprevedibili.
Per la gestione degli errori, ci sono alcune utili istruzioni in JavaScript:
1. try...catch
L'istruzione try consente di definire un blocco di codice da testare per gli errori mentre è in esecuzione.
L'istruzione catch consente di definire un blocco di codice da eseguire, se si verifica un errore nel blocco try.
Le dichiarazioni try e catch vanno in coppia:
try {
//codice da testare
} catch(err) {
//codice da eseguire se si verifica un errore in try
}
Esempio
try {
miFuncion(valor); //genera un errore perchè la función non esiste
} catch(err) {
alert("Si è verificato un errore:" + err.description);
}
2. throw
L'istruzione throw consente di creare errori personalizzati. Tecnicamente è possibile lanciare un'eccezione che può essere
può essere un JavaScript String, un Number, un Boolean o un Object.
Se si usa insieme a try…catch è possibile controllare il flusso del programma e generare messaggi di errore personalizzati.
Esempio. Inserire un numero compreso tra 5 e 10, la function esamina l'input. Se il valore è sbagliato, viene generata
un'eccezione (err) che viene catturata dall'istruzione catch e viene visualizzato un messaggio di errore personalizzato:
<script>
function myFunction() {
var message, x;
message = document.getElementById("p01");
message.innerHTML = "";
x = document.getElementById("demo").value;
try{
if(x == "") throw "empty";
if(isNaN(x)) throw "not a number";
x = Number(x);
if(x < 5) throw "too low";
if(x > 10) throw "too high";
} catch(err) {
message.innerHTML = "Input is " + err;
}
}
</script>
3. finally
L'istruzione finally consente di eseguire codice, dopo un try...catch, indipendentemente dal risultato. Ciò che viene
definito nel blocco finally viene sempre eseguito in qualsiasi caso.
Quando si verifica un errore, JavaScript si fermerà e genererà un messaggio di errore, il termine tecnico è: JavaScript
genererà un'eccezione. JavaScript ha un oggetto errore (Error) incorporato che fornisce informazioni sugli errori quando
si verifica un errore, fornisce due proprietà utili:
- name: imposta o restituisce il nome dell’errore;
- message: imposta o restituisce un messaggio di errore.
L’oggetto Error, restituisce 5 tipi di errori che è possibile sapere con la proprietà name (err.name):
- RangeError: fuori intervallo, viene lanciato se si utilizza un numero che non rientra nell'intervallo dei valori legali.
- ReferenceError: viene lanciato se si utilizza o si fa riferimento una variabile che non è stata dichiarata.
- SyntaxError: errore di sintassi, si genera se si tenta di valutare il codice con un errore di sintassi.
- TypeError: errore di tipo, si genera se si utilizza un valore che non rientra nell'intervallo dei tipi previsti, come
convertitre un numero in maiuscolo.
- URIError: si genera se si utilizzano caratteri non validi
CAMBIO DI CSS IN DINAMICO

JavaScript è un linguaggio molto dinamico, con function che consentono di interagire in tempo reale con l’utente e gli
elementi del sito.
Abbiamo visto che le pagine web usano i fogli di stile CSS, agli elementi HTML, per ottenere uno stile, un design.
Per modificare un foglio di stile CSS dinamicamente da JavaScript: bisogna poter accedere all’elemento che carica il
foglio di stile, ovvero al link che carica il file CSS nell’HTML,
1)accedere all’elemento che carica il foglio di stile, ovvero al link che carica il file CSS nell’HTML, definire al suo
interno un id per usarlo da selettore:
<link type=”text/css” href=”file.css” rel=”stylesheet” id=”estilo”/>
2) definire un nuovo foglio di stile CSS con i cambi di stile voluti.
3) definire nell’HTML la function JS che realizza il cambio.
function cambiarEstilo(stile){
document.getElementById(‘estilo’).href = stile;
}
Con document.getElementById(“”) si fa riferimento al link del file.css e si cambia l’attributo href con il file.css che
riceve la function.
PROPRIETÀ CSS DA JAVASCRIPT

Cambiare il file CSS completo non è l’unico modo per cambiare gli stili con JavaScript.
Esiste l’attributo style che consente di accedere e cambiare lo stile degli attributi di stile CSS (color, bordes…) da
Javascript semplicemente con l’id dell’elemento da cambiare e il metodo getElementById:
document.getElementById(“caja”).style.color = “#ff0000”;
che cambia il colore del testo dell’elemento con id caja.

Con questo modo è possibile accedere e cambiare stili agli elementi anche quando non ne hanno uno definito.
Ci sono cune regole da ricordare per poter cambiare gli stili di una pagina:
- è possibile inserire codice JavaScript dentro un elemento tramite un evento. In questo caso si può usare l’attributo this
che fa riferimento all’elemento dove si invoca.
<p onmouseover=”this.style.color=’#ff0000’”>cambio di colore</p>
- le proprietà CSS composte da più parole e saparate da “-”, vanno scritte in una sola parola con la seconda e successive
parole con lettera maiuscola:
font-size → fontSize background-color → backgroundColor
Per selezionare esattamente gli elementi a cui applicare gli stili CSS, si usano i metodi document:
- getElementById: seleziona l’elemento unico tramite il suo id.
- getElementByName: seleziona gli elementi che hanno lo stesso attributo name.
- getElementByTagName: seleziona tutti gli elementi in base al tag indicato come parametro.
JQUERY
LIBRERIE JAVASCRIPT
Le librerie JavaScript o framework offrono function e metodi già pronti che è possibile usare con una semplice chiamata.
Esse semplificano molto il codice, lo rendono più pulito, leggibile e ordinato, più conciso e quindi più compatibile con i
diversi browser.
Dal punto di vista della programmazione consentono di risparmiare molto tempo, evitando di riscrivere noi stessi function
e metodi già disponibili.
Le librerie, inoltre, mettono a disposizione plugin, frammenti di codici che realizzano azioni concrete, che programmatori
creano e mettono a disposizione gratuitamente per il loro utilizzo nelle nostre pagine.
È abituale e consigliato lavorare con le librerie, ne esistono diverse: Dojo, JQuery, Prototype, YUI, Mootools ecc. e la
maggior parte offre metodi simili, la decisione di scelta tra l’una o l’altra si basa sulla collezione di plugin che possiede.
LIBRERIA JQUERY
Oggigiorno la libreria più famosa e utilizzata è JQuery, nata nel 2006, è una libreria pubblica e gratuita di Javascript
creata per interagire con gli elementi HTML tramite una serie di function predefinite che permettono di generare effetti
visuali in modo rapido e semplice. JQuery è in costante evoluzione e dispone di versioni specifiche per il suo utilizzo nel
mobile, inoltre occupa poco spazio e non rallenta la carica delle pagine web.
Per usare la libreria Jquery la prima cosa da fare è scaricare l’ultima versione dalla pagina ufficiale:
www.jquery.com
una volta scaricata possiamo usarla nella nostra pagina facendo riferimento nell’head con:
<script type=”text/javascript” src=”jquery.js”></script>
Includendo questo file, abbiamo a disposizione un oggetto chiamato jQuery a cui è possibile accedere alle sue function,
ad esempio:
jQuery.now(); si ottiene l’ora attuale.
Dato che jQuery verrà usato molto nel codice, per semplificare la scrittura, la libreria offre l’alias $ al posto di jQuery:
$.now();
Vedremo che scaricando jQuery, esistono 3 versioni:
- Standard: usa diversi file JavaScript per contenere tutte le classi della libreria e con questo il browser dell’utente dovrà
caricare questi file prima di eseguire il codice.
- Minimizzata: dato che costa meno caricare un file grande che molti piccoli, questa versione contiene tutto quello della
precedente in un unico file, dove si eliminano gli spazi e rinominato le variabili per renderlo più leggero possibile, risulta
illeggibile, ma viene caricato più rapidamente.
- Compressa: nonostante impiega meno per scaricarsi dal server, ci mette più tempo per essere interpretata dal browser
dell’utente.
È consigliato lavorare con la versione standard di jQuery in fase di sviluppo della pagina e dopo, in fase di pubblicazione
della pagina sostituirla con la versione minimizzata.
Nonostante questo, jQuery può essere eseguito senza essere scaricato: Google, Microsoft e jQuery offrono una copia della
libreria nei loro server, in modo da essere utilizzata direttamente e quando un utente visita la nostra pagina, il browser
invece di cercare il file jQuery nel nostro server, lo scaricherà dal server di google. Un esempio è:
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js”></script>
Una volta incluso jQuery nella pagina è possibile utilizzarlo.
SELETTORI DI JQUERY
JQuery ci consente di selezionare elementi HTML in modo molto semplice e potente.
- $(‘#id_elem’): seleziona un elemento usando il suo id.
- $(‘#id_elem1, #id_elem2’): possono essere selezionati più di un elemento.
- $(‘elemento’): seleziona tutti gli elementi di uno stesso tipo ($(“a”) tutti i link).
- $(‘.classe’): seleziona un elemento per la sua classe.
Esistono selettori avanzati che usano le funzionalità dei CSS:
- $(‘p[a]’): seleziona tutti i paragrafi della pagina che hanno un href.
- $(‘div:hidden’): seleziona tutti i div nascosti.
- $(‘input[@type=radio][checked]’): seleziona tutti i radio buttons checked (selezionati).
- $(‘p:lt(4)’): seleziona i prima 4 paragrafi di una pagina.
- $(‘a:contains(“ciao”)’): seleziona tutti i link che contengono il testo ciao.
Tutti queste forme di selezione, si possono combinare tra loro.
Selezionato un elemento o un insieme di elementi, possono essere eseguite su di essi diverse function, aggiungendo un
punto (.) seguito dal nome della function e i suoi parametri:
$(‘elemento/i’).function(“parametro”);
FUNCTION PIÙ USATE DI JQUERY SUGLI ELEMENTI

Una volta selezionati gli elementi html, bisogna eseguire function su di essi.
La lista delle function jQuery è abbastanza grande e si può consultare in:
http://api.jquery.com/
Vediamo quelle usate più frequentemente:
.html()
senza parametro, questa function ottiene e ritorna il contenuto html dell’elemento selezionato da jquery:
$(“#elem”).html(); //ritorna il contenuto html dell’elemento con id elem
.html(“parametro”)
quando si invoca con un parametro, questa function assegna il contenuto del parametro all’Html dell’elemento selezionato
$(“#elem”).html(<p>Ciao</p>); //sostituisce il contenuto dell’elemento con id elem, con il contenuto del parametro
.val()
senza parametro, questa function e ritorna il valore (attributo value) attuale di un campo di formulario selezionato da
jQuery.
.val(“parametro”)
quando si invoca con un parametro, la function assegna o sostituisce il valore del parametro all’elemento di campo
selezionato.
.addClass(“classe”)
assegna una o più classi all’elemento o agli elementi selezionati.
Riceve un parametro che rappresenta il nome della nuova classe da assegnare:
$(‘p’).addClass(‘txtclass’) //assegna la classe txtrosso a tutti i paragrafi p.
.removeClass(“classe”)
elimina una o più classi da uno o più elementi selezionati.
Riceve come parametro il nome della classe da rimuovere.
.attr(“attributo, pfacoltativo”)
consente di leggere un attributo, passato come parametro, dell’elemento selezionato:
<a href=”www.google.com” id=”link”></a>
$(‘#link’).attr(‘href’)
si ottiene il valore dell'attributo href.
Se si aggiunge un secondo parametro, questo si va ad aggiungere, se non presente, o va a sostituire il valore dell'attributo
dell’elemento.
.removeAttr(“attributo”)
consente di eliminare un attributo, che riceve come parametro, dall’elemento selezionato.
.css(“proprietà”, valFacolt)
questa function consente di consultare e modificare le proprietà CSS, inviate come parametri, degli elementi Html
<p id=”parag” style=”text-align:center”>Testo</p>
$(‘#parag’).css(‘textAlign’);
questo ritorna il valore “center” di text-align.
Notiamo che il nome delle proprietà va scritto con una sola parola e la seconda parola si indica con lettera maiuscola.
$(‘#parag’).css(‘textAlign’, “left”);
se si aggiunge un secondo parametro (un valore della proprietà), questo va a modificare la proprietà CSS con il valore
indicato. In questo caso sarà text-align:left.
.width() .heigth()
consentono di accedere e modificar, se ricevono un parametro, i valori di width e heigth.
.hide()
consente di nascondere l’elemento o gli elementi html selezionati.
.show()
consente di mostrare uno o più elementi html nascosti selezionati.
.fadeIn()
è un effetto in cui gli elementi selezionati appaiono da invisibili a visibili graduatamente (sfocatura).
Gli elementi, inizialmente devono stare nascosti con display:none o altrimenti l’effetto non si noterà.
Può ricevere parametri opzionali come :
- La durata della transizione in millisecondi (400 millisecondi di default)
- Una function che si eseguirà quando l’elemento è apparso completamente.
.fadeOut()
è uguale alla function precedente solo che funziona al contrario, nasconde gli elementi selezionati da visibili a invisibili
un po alla volta.
.animate({proprietà})
questa function consente di realizzare animazioni più complesse sugli elementi html selezionati.
Come parametro si indicano le proprietà CSS che dovrà avere l’elemento alla fine dell’animazione.
In pratica dallo stato iniziale dell’elemento, jquery realizza i passi intermedi fino ad arrivare a quello finale definito dalle
proprietà CSS.
Al di fuori della lista di proprietà, abbiamo a disposizione altri parametri opzionali :
-durata animazione: ovvero controllare la velocità in cui l’animazione si realizzi, si indica in millisecondi (400 di default).
- function: che si esegue quando termina l’animazione.
.toggle()
consente mostrare e nascondere un elemento, quando si preme il bottone se l’elemento è visibile si nasconderà e
viceversa.
.after(elemento)
aggiunge un elemento html indicato come parametro, dopo ogni elemento selezionato.
.before(elemento)
funziona come la function precedente solo che inserirà il nuovo elemento html prima di ogni elemento selezionato.
.append(elemento)
questa function è simile a after() e before(), ma invece di inserire il nuovo elemento html prima o dopo, lo inserisce
dentro gli elementi selezionati.
.add()
consente di aggiungere elementi alla selezione, ad un insieme di elementi già selezionati. Ad esempio:
$("h1").add("p").add("span").css("background-color", "yellow");
questo consente di applicare lo stile css, oltre agli elementi h1 selezionati, anche agli elementi p e span.
ASSOCIARE CHIAMATE A FUNCTION AGLI ELEMENTI

Jquery consente di controllare l’esecuzione delle function su elementi, come invocare da qualsiasi parte del codice
l’evento associato ad un elemento (invocare eventi di altri elementi).
Fin ora abbiamo visto come associare chiamate a function che si attiveranno al eseguire una determinata azione su un
elemento, come un bottone che chiama una function ogni volta che viene premuto. È possibile poter associare queste
chiamate direttamente da altre function:
$(“p”).click(function() {codice});
questo associa il codice della function all’evento onclick dei paragrafi della pagina ma non lo esegue.
Esiste un altra sintassi per associare un evento a uno o più elementi, con la function bind(“evento”, function(){codice}).
Un caso importante dove vincolare chiamate a function a un evento è al caricamento della pagina. In molte pagine è
necessario eseguire codice JavaScript dopo che la pagina si carica completamente, per questo è possibile usare la function
onload nel body, ma questo tiene un inconveniente: il contenuto html potrebbe avere un intervallo in fase di caricamento e
non mostrarsi come vogliamo, non essendo ancora stato eseguito il javascript in attesa che si carichino tutti gli elementi.
Con jQuery è possibile usare la function ready() che permette che si esegua un codice appena sarà caricato l’html della
pagina, la sintassi è:
$(document).ready(codice)
GOOGLE MAPS
La libreria di Google Maps ci consente di integrare le mappe di Google nelle nostre pagine ed interagire con esse.
Per fare questo, bisogna:
1) fare una chiamata, in head, alla libreria che si trova nei server di Google con:
<script type="text/JavaScript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
Il parametro sensor, che riceve come valori true o false, indica se la nostra applicazione usa un sistema GPS
Questa è però una versione per sviluppatori, per utilizzare il servizio completo è necessaria una API KEY è una
chiamata alla libreria con:
<script async defer src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap"></script>
2) Creare un contenitore div con un id che conterrà la mappa.
CARICAMENTO MAPPA
Per caricare la mappa di Google nel contenitore div creato, definiamo la function, caricata dal body con onload:
function caricaMappa() {
var opzioni = {
zoom: 15, //zoom iniziale della mappa
mapTypeId: google.maps.MapTypeId.ROADMAP, //tipo di mappa
center: new google.maps.LatLng(latitud, longitud) //punto dove si centra la mappa all'inizio
}
var mapa = new google.maps.Map(document.getElementById("idDiv"), opzioni);
}
L’oggetto chiave della libreria è google.maps.Map() che crea la mappa e riceve due parametri:
1) l’id del contenitore della mappa;
2) le opzioni della mappa:
- zoom: si indica lo zoom iniziale che va a avere la mappa, quanto più alto è il valore più lo zoom è maggiore.
- mapTypeId: indica il tipo di mappa che vogliamo che appaia.
Si usa l’oggetto google.maps.MapTypeId.tipomappa.
I tipi di mappa sono, ROADMAP(standard), SATELLITE(Google Earth), HYBRID(unione
…………………………..di ROADMAP e SATELLITE), TERRAIN(rilievo).
- center: indica il punto in cui si centra la mappa quando viene caricata.
Si usa l’oggetto google.maps.LatLng() che riceve come parametri le coordinate latitudine e longitudine.
SEGNAPOSTO
Se si vuole inserire un segnaposto sulla mappa in un punto preciso inseriamo il seguente codice nella function precedente:
var segnaposto = new google.maps.Marker({

position: new google.maps.LatLng(latitud, longitud),
map: mapa,
title: "Titolo"
});
L’oggetto google.maps.Marker() consente di creare il segnaposto e riceve alcuni parametri:

- position: con google.maps.LatLng() si indicano le coordinate del punto dove posizionare il segnaposto.
- map: la variabile della mappa creata dove inserire i segnaposto.
- title: il testo che si mostrerà passando con il mouse sul segnaposto.
- icon: icona del segnaposto, se non indicata usa quella di default.
INFORMAZIONI SEGNAPOSTO
Se vogliamo che facendo clic sul segnaposto appare un piccola finestra con informazioni:
var finestra = new google.maps.InfoWindow({

content: "Informazioni segnaposto"
});
google.maps.event.addListener(segnaposto, "click", function() {
finestra.open(mapa, segnaposto)
});
1) si dichiara un oggetto google.maps.InfoWindow({content:”Informazioni}); dove nel parametro content si inserisce il
testo delle informazioni che si vuole, anche html.
2) con l’oggetto google.maps.event.addListener() si inserisce un evento al segnaposto e riceve come parametri: il
segnaposto, il tipo di evento per realizzare l’azione e una function che con il metodo open() apre e mostra la finestra.
GALLERIE LIGTHBOX
JQuery mette a disposizione plugin molto utili e potenti, uno dei più utilizzati è Ligthbox: un semplice plugin per creare
gallerie di foto rapidamente.
Bisogna scaricare sia jquery.js che jquery.ligthbox-0.5.js, inserirli tra i file del sito e,per usarli, fare riferimento
nell’head della pagina con:
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript” src=”jquery.ligthbox-0.5.js”></script>
Essendo una libreria precreata, ha uno stile e una serie di immagini di default che si possono cambiare per adattarli alla
nostra pagina.
Il metodo ligthbox() consente di indicare da Javascript a tutti i link dentro un <div>, con id, di prendere lo stile e il
modo di aprire le immagini di questa libreria.
La foto da aprire va nell’href del link.
Il valore dell’attributo title sarà l’intestazione in basso della foto.
Il codice Jquery da usare per creare la galleria è:
<script type=”text/Javascript”>
$(function() {
$(‘galleria a’).ligthBox();
});
</script>
INTEGRARE AJAX/JAVASCRIPT CON LINGUAGGI LATO SERVER

Le pagine web professionali usano oltre all’Html e JavaScript, linguaggi di programmazione dei server, come PHP, ASP,
JSP, che consentono di eseguire il codice nel server e mostrare il risultato all’utente. Questi linguaggi sono più potenti di
Javascript e con più opzioni, come leggere basi di dati, file nel server, ecc.
Quindi questi linguaggi eseguono il codice nel server e ritornano il codice HTML generato al browser dell’utente e si usa
il JavaScript per poter interagire con l’utente nella pagina. Sono linguaggi completamente diversi ed essendo compilati
nel server non possono avere accesso ai dati di JavaScript, ma in una pagina web è possibile far riferimento a una
variabile di PHP o ASP dentro il codice JavaScript: dato che questi linguaggi si eseguono nel server, quando esso arriva a
codice JavaScript che contiene una variabile PHP o ASP, interpreta il valore e lo assegna al codice.
Vediamo un esempio di una function JS che mostra l’alert della somma di due variabili PHP:
<?php
$var1 = 6;
$var2 = 4,
?>
function somma() {
alert(‘<?php echo “Somma =”.(var1 + var2)?>‘);
}
Vediamo che si possono inserire valori in JavaScript come anche qualsiasi altro codice.
L’unico modo per interagire contrariamente, cioè usare PHP per controllare JavaScript, è grazie alle condizioni dei
linguaggi server. Non si può usare una variabile di Javascript, ma si può usare un costrutto if, di PHP o ASP, per
controllare se si esegue o no uno script JS.
Lo svantaggio principale dei linguaggi server è che se si vuole eseguire codice per ritornare registri o fare qualsiasi tipo di
processo, bisogna fare una chiamata al server e ricaricare la pagina per portare i nuovi dati. Grazie ad Ajax questo non è
necessario.
Il vantaggio principale, invece, di integrare linguaggi server con JS è l’uso di Ajax che consente eseguire codice PHP o
ASP in una pagina web nell’evento Html che vogliamo senza ricaricare la pagina.
Le possibilità di combinare Javascript con i linguaggi server tramite Ajax sono infiniti, con questi linguaggi vedremo la
potenza di Ajax.
Questa tecnica è la più usata per lo sviluppo web, ci consente di realizzare pagine di risultati senza ricaricare la pagina.
Integrare Javascript con linguaggi server consente di potenziare la carica delle pagine web e facilita l’interazione con
l’utente.

Javascript

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

Javascript

Caricato da

Copyright:

Formati disponibili

JAVASCRIPT

METODI DI ESECUZIONE DI JAVASCRIPT

- In un link con <a href=”Javascript: function”>

BASI DEL LINGUAGGIO

CARATTERISTICHE DEL CODICE JS

1) Unari: riguardano un solo operando e ne modificano il valore, essi sono:

OPERATORI RELAZIONALI O DI CONFRONTO

variabile = (condizione) ? valor1 : valor2

for(valore iniziale; condizione; incremento) {

I nomi delle function hanno le stesse regole di quelli delle variabili

var x = function(a, b) { return a * b};

Dopo la variabile può essere utilizzata come function:

PARAMETRI DELLA FUNCTION

alert("Somma = " + somma(6, 2, 3, 10));

PAROLA CHIAVE LET

var x = 10; var x = 10;

PAROLA CHIAVE CONST

PAROLA CHIAVE THIS

OGGETTO PREDEFINITO STRING

- bold(): restituisce la stringa in grassetto.

- italics(): restituisce la stringa in corsivo.

- strike(): restituisce la stringa sbarrata.

- sub(): restituisce la stringa come pedice.

- sup(): restituisce la stringa come apice.

- substring(): è simile a slice(), la differenza e che non accetta valori negativi.

- toLowerCase(): ritorna la stessa stringa ma con i caratteri in minuscolo.

- toUpperCase(): ritorna la stessa stringa ma con i caratteri in maiuscolo.

- trim(): rimuove gli spazi bianchi da entrambi i lati di una stringa.

OGGETTO PREDEFINITO NUMBER

L’oggetto Number ha vari metodi alla quale possiamo accedere:

OGGETTO PREDEFINITO MATH

Le costanti Math sono:

Tutti i metodi ricevono parametri, i metodi Math sono:

NUMERI CASUALI RANDOM

OGGETTO PREDEFINITO DATE

VETTORI E MATRICI (ARRAY)

- concat(): unisce due array in un nuovo array.

- pop(): elimina l’ultimo valore del vettore e lo assegna.

- reverse(): inverte l’ordine degli elementi del vettore.

- sort(): ordina gli elementi di un vettore, in ordine alfabetico per le stringhe.

- isNaN() : riceve un parametro e valuta se è NaN:

- String(): riceve un oggetto e restituisce una stringa.

CAMPI DI TESTO E JAVASCRIPT

2) con l’id dell’elemento che si vuole modificare (consigliato):

CHECKBOX, RADIO BUTTONS E JAVASCRIPT

Le proprietà accessibili da Javascript per questi elementi sono:

Le proprietà accessibili da JavaScript per option sono:

<input type="button" name="invio" value="Invio" onclick="validar(this.form)>

VALIDAZIONE CAMPO VUOTO

VERIFICA INSERIMENTO DI NUMERI

i esegue una ricerca ignorando la distinzione tra maiuscole e minuscole

g esegue una ricerca globale, cioè individua tutte le occorrenza di un pattern

m esegue una ricerca su stringhe multilinea

| Indica alternative (/(L|f|b)ocal/ cerca Local,focal e bocal)

() Definisce un raggruppamento di caratteri o sottoespressioni

Abbiamo poi i metacaratteri, cioè di caratteri che ne indicano altri.

. Indica un singolo carattere

\w Indica un carattere alfanumerico ((/[A-Z]\w → A4 → ok))

\W Indica un carattere NON alfanumerico (/[A-Z]\D → A% → ok)

\d Indica una cifra numerica (/[A-Z]\d → A4 → ok)

\D Indica una cifra NON numerica (/[A-Z]\D→ A4 → errore)

\s Indica un carattere di spazio bianco

\S Indica tutti i caratteri tranne gli spazi bianchi

/<div\b[^>]>(.?)<\/div>/i elemento HTML <div>