JAVASCRIPT Prof. Pagani Corrado - Soul Software
←
→
Trascrizione del contenuto della pagina
Se il tuo browser non visualizza correttamente la pagina, ti preghiamo di leggere il contenuto della pagina quaggiù
Prof. Pagani Corrado JAVASCRIPT
STORIA DEL LINGUAGGIO JAVASCRIPT
JavaScript è stato ideato nel 1995 da Netscape e
rilasciato con la versione 2.0 del suo browser, Netscape
Navigator.
JavaScript aggiunse alle pagine HTML la possibilità di
essere modificate in modo dinamico, in base
all’interazione dell’utente con il browser (lato client).
Sulla base della prima versione di Javascript, nel 1997,
nacque lo standard ECMA-262 che rappresentava le
specifiche del linguaggio ECMAScript. Tale standard
sarà il punto di riferimento non solo per JavaScript, ma
anche per altri linguaggi lato client quali ActionScript,
WMLScript e QtScript.
Javascript è un linguaggio INTERPRETATOCONCORRENZA A JAVASCRIPT L’esigenza di rendere il Web sempre più interattivo e dinamico favorì la nascita di tecnologie concorrenti come Flash, ActiveX e gli Applet Java. Queste tecnologie fornivano la possibilità di realizzare funzionalità ed effetti grafici di maggior impatto, ma richiedevano specifici runtime (non sempre compatibili con tutti i browser) La concorrenza tra componenti esterni e JavaScript è durata diversi anni e vide Flash predominante a discapito di JavaScript, che sembrava essere destinato ad un lento declino.
L’AFFERMAZIONE DI JAVASCRIPT
Fu l’avvento della tecnologia Ajax (dal 2005 in poi),
ossia la possibilità di comunicare in modo
asincrono col server, a rivalutare JavaScript
Il rinnovato interesse verso il linguaggio ha fatto
fiorire numerose librerie con lo scopo di
semplificare alcune delle attività più comuni e
favorendo una programmazione unificata e più
rapida
Come conseguenza si sono anche ampliate le
possibilità applicative del linguaggio, anche al di
fuori del semplice Web browser
JavaScript può essere utilizzato anche lato server, in
applicazioni desktop e mobile.EVOLUZIONE DELLE VERSIONI JAVASCRIPT
Versione Anno Descrizione
1 1997 Prima versione del linguaggio
2 1998 Allineamento del documento di specifica in modo da
allinearlo alle caratteristiche dello standard ISO/IEC 16262
3 Miglioramenti sulla gestione dell’output, degli errori e delle
espressioni regolari
4 Versione abbandonata
5 2009 Supporto a JSON, miglioramenti sulla gestione degli oggetti
6 2015 Migliorata gestione delle classi, nuovi iteratori, introduzione
ECMASCript 2015 nuove librerie ….
7 2016 Migliore incapsulamento delle parti di codice, e supporto
ECMASCript 2016 alla creazione di librerie esterne
8 2017 Migliorata gestione della concorrenza, funzioni asincrone,
ECMASCript 2017 ulteriori miglioramenti sulle librerieSTRUMENTI DI LAVORO
Editor di testo
Notepad++, sublimeText, ma anche ambienti di
sviluppo completi (Visual Studio, Eclipse …)
Interprete
Qualsiasi browser
Interpreti dedicati
I browser più recenti hanno spesso un debugger
integratoJAVASCRIPT E HTML
JavaScript (JS) è nato ed rimasto un importante
supporto ad HTML, specie con l’avvento dello
standard HTML5.
Per questo l’aspetto di programmazione lato client
sul browser rimane l’ambiente d’uso privilegiato.
Esistono tre modi per inserire il codice JS nella
pagina HTML (allo stesso modo della gestione
delle specifiche css):
inserire codice inline;
scrivere blocchi di codice nella pagina;
importare file con codice JavaScript esterno.INSERIMENTO DI CODICE JS INLINE
consiste nell’inserire direttamente istruzioni JS
nel codice di un elemento HTML, assegnandolo
ad un attributo che rappresenta un evento.
Cliccami
Attributo che permette di Codice JS: visualizza un box
gestire l’evento di click sul pop up con il testo indicato
pulsante
Versione analoga per
Cliccami
i linkBLOCCHI DI CODICE JS
La soluzione inline risulta scomoda quando il codice da
eseguire è complesso o abbiamo necessità di definire
variabili e funzioni.
In questi casi possiamo ricorrere al tag per
inserire blocchi di codice in una pagina HTML
Possiamo inserire blocchi di codice (e i relativi
tag ) nella sezione (più
frequentemente) o nella sezione della pagina
HTML.
Il codice JS è
interpretato ed
alert('Cadel Evans campione!') eseguito nell’esatto
momento in cui il
parser html lo incontraJS SU FILE ESTERNO
L’approccio più consigliato è però quello che
consiste nel collegare alla pagina HTML,
codice JavaScript presente in un file esterno (con
estensione .js).
Questa tencica permette di agganciare script e
librerie in modo non intrusivo, con il vantaggio di
una separazione netta tra la struttura del
documento e il codice di programmazione, come
accade per i fogli di stile CSS, che separano
struttura e presentazione.
Riferimento relativo
Riferimento assolutoJS SU FILE ESTERNO: GESTIONE EVENTI
Per eseguire istruzioni JavaScript codificate su un
file esterno (.js) è necessario organizzarle in
funzioni che possono essere richiamate tramite il
loro nome univoco all’interno dell’attributo onclick
dei button (o attributi analoghi di altri tag)
function cadelFunction() {
alert('Cadel Evans GO GO!') Definizione di funzione su file esterno
}
Cliccami
CliccamiINTRODUZIONE ALLA SINTASSI JS
JS è case sensitive
Terminatore di una istruzione → ;
Commenti
commento a singola riga
// Questo è un commento
commento multiriga
/* Questo è un commento sulla prima riga
Questo è un commento sulla seconda riga
Questa è l'ultima riga del commento */TIPI DI DATI JS
JavaScript è un linguaggio a tipizzazione debole o
dinamica. Quando dichiariamo una variabile, non ne
specifichiamo il tipo di dato e il tipo di dato stesso può
cambiare durante l’esecuzione dello script.
Per definire una variabile utilizziamo la parola chiave var
ASSEGNAMENTO → l’operatore = ci consente di
assegnare il valore di un’espressione ad una variabile
var miaVariabile;
miaVariabile = 1;
miaVariabile = null;
miaVariabile = "uno";
miaVariabile = true;TIPI DI DATI JS JavaScript prevede cinque tipi di dato primitivi, numeri, stringhe, booleani, null e undefined: Stringhe → sequenza di caratteri delimitata da doppi o singoli apici (il delimitatore finale deve essere uguale al delimitatore iniziale) Numeri → JS ha un unico tipo di dato numerico senza distinzione tra intero e decimale Booleano → prevede due soli valori: true (vero) e false (falso). null e undefined sono rispettivamente i valori che non rientrano nel linguaggio e il valore di una variabile non inizializzata
DICHIARAZIONE IMPLICITA ED ESPLICITA
Il nome delle variabili segue le regole standard dei linguaggi:
non deve coincidere con una parola chiave del linguaggio;
non può iniziare con un numero;
non può contenere caratteri speciali
Sono però ammessi $ e _
JavaScript non prevede la dichiarazione obbligatoria delle variabili →
l’utilizzo di un nuovo identificatore indica all’engine di creare implicitamente
la variabile.
Questa pratica è sconsigliata perché può favorire errori ed ambiguità.
Se vogliamo che l’engine ci segnali l’utilizzo di una variabile NON
dichiarata dovremo lavorare in STRICT MODE inserendo il comando "use
strict“; all’inizio del nostro file
A partire dalla versione 6 dello standard si possono dichiarare costanti
tramite la parola chiave const:
const PIGRECO = 3.14;OPERATORI ARITMETICI
Operatore Nome
+ addizione
- sottrazione
/ divisione
* moltiplicazione
% modulo o resto
Operatore Nome
- Negazione (valore negativo di un numero)
++ incremento
-- decrementoOPERATORI RELAZIONALIE LOGICI
Operatore Nome
< minore
maggiore
>= maggiore o uguale
== uguale
!= diverso
=== strettamente uguale (non esegue conversione)
!== strettamente diverso (non esegue conversione)
Operatore Nome
&& and
|| or
! notOPERATORE CONDIZIONALE ‘?’ E
ASSEGNAMENTO COMPOSTO
Operatore condizionale → se condizione è vera viene
restituito valore1, altrimenti valore2.
var x = condizione ? valore1 : valore 2
var testo = ( x%2 == 0 ? "pari" : "dispari“ )
Operatori di assegnamento composti
Forma compatta Scrittura equivalente
x += y x=x+y
x -= y x=x-y
x *= y x=x*y
x /= y x=x/y
x %= y x=x%yCONVERSIONI IMPLICITE
Conversione in valore booleano Conversione in valore numerico
Tipo Valore booleano Tipo Valore numerico
undefined false undefined NaN → valore NotANumber
null false null 0
numero false se 0 o NaN, true in tutti gli altri casi booleano 1 se true, 0 se false
stringa false se stringa vuota, true negli altri casi stringa intero, decimale, zero o NaN a seconda della stringa
Conversione in stringa
Tipo Valore numerico
undefined “undefined”
null “null”
booleano “true” se true – “false” se false
“NaN” se NaN, “Infinity” se Infinity - la stringa che rappresenta
numero
il numero negli altri casiCONVERSIONI ESPLICITE
la funzione parseInt() converte una stringa in un
valore intero
La funzione parseFloat() restituisce un valore
numerico considerando l’eventuale virgola
parseInt("12") // 12
parseInt("12abc") // 12
parseInt("a12bc") // NaN
parseInt("12.5") // 12
parseFloat("12.5") //12.5
Si noti come la presenza di caratteri non numerici
in coda alla stringa venga ignorata, mentre
impedisce di fatto la conversione se questi si
trovano all’inizioALTRI OPERATORI
Concatenazione tra stringhe → +
In assenza di una conversione esplicita gli operatori
polimorfi useranno le loro regole
operatore + → se almeno uno dei due operandi è una
stringa, allora viene effettuata una concatenazione di
stringhe, altrimenti viene eseguita una addizione
var x = "12"; var x = 12;
var y = x + 13; // valore assunto 1213 var y = x + 13; // valore assunto 25
E’ sempre possibile verificare il tipo della variabile
(o di un valore) tramite l’operatore typeofARRAY
Gli elementi di un array possono essere di
qualsiasi tipo di dato previsto da JS → possiamo
anche avere array con elementi di diverso tipo.
var myArray1= [];
var myArray2= [1,2,3];
var myArray3= [“a”,”b”,“c"];
var myArray = [123, "stringa", true, null];
In questo caso un
var myArray = [123, "stringa", ["a", "b", 50]]; elemento è lui stesso
un array
Una volta definito possiamo accedere agli elementi utilizzando il
nome della variabile e l’indice corrispondente, ricordandoci che
la numerazione degli indici parte da zero
var myNum = myArray2[0];
var cinquanta = myArray[2][2];ARRAY MULTIDIMENSIONALI
E’ possibile definire anche array multidimensionali (matrici).
var matrice = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]
var quattro = matrice[1][0];
E’ possibile definire anche array tramite costruttore e
popolare successivamente gli elementi
var mio_array = new Array();
mio_array[0] = new Array();
mio_array[1] = new Array();
mio_array[0][0] = "Primo array, prima voce.";
mio_array[0][1] = "Primo array, seconda voce.";
…
mio_array[1][2] = "Secondo array, terza voce.";ISTRUZIONE CONDIZIONALE IF
Il costrutto if esegue un blocco di codice solo se una
condizione è vera.
if (condizione)
{
// istruzioni
}
Si può utilizzare anche la parola chiave else
if (condizione)
{
// istruzioni1
}
else
{
//istruzioni2
}SELEZIONE MULTIPLA SWITCH
switch (espressione)
{
case espressione1:
blocco istruzioni1;
break;
case espressione2:
blocco istruzioni2;
break;
// ...
default:
blocco istruzioniN;
break;
}ITERAZIONE WHILE
Ciclo precondizionale
while (condizione)
{
// istruzioni
}
Ciclo postcondizionale
do
{
// istruzioni
}
while (condizione)CICLO FOR
for (inizializzazione; condizione; modifica)
{
// istruzioni
}
Esempio
var x = 1;
var i;
for (i = 1; iFOR-IN E FOR-OF
for (indice in mioArray) { for (valore of mioArray) {
// istruzioni // istruzioni
} }
JavaScript rileva che la variabile mioArray è un array ed assegna ad
ogni iterazione
[FOR-IN] → alla variabile indice il valore dell’indice corrente
[FOR-OF] → alla variabile valore il valore dellelemento corrente
per un numero di volte pari alla lunghezza dell’array
var mioArray = [1, 2, 4, 8, 16]; var mioArray = [1, 2, 4, 8, 16];
var totale = 0; var totale = 0;
var indice; var valore;
for (indice in mioArray ) for (valore of mioArray )
{ {
totale = totale + mioArray[indice]; totale = totale + valore;
} }FUNZIONI
La definizione di funzioni segue la filosofia del
linguaggio di tipizzazione debole
function nome(argomenti)
{
// istruzioni
}
Nel corpo della funzione può essere presente l’istruzione
return che consente di terminare e restituire un valore al
codice che l’ha chiamata.
function hello_world() function somma(x, y)
{ {
return “hello world”; return x + y;
} }VISIBILITÀ DELLE VARIABILI
Le variabili dichiarate fuori da qualsiasi funzione sono
dette globali e sono accessibili da qualsiasi punto dello
script, anche all’interno di funzioni
Come nella maggior parte dei linguaggi la variabile
locale nasconde la variabile globale nel caso di identico
nome
indipendentemente dal punto in cui viene dichiarata
una variabile, essa esiste in tutto lo scope a cui
appartiene (anche prima della sua dichiarazione)
L’utilizzo della parola chiave let (usata al posto di var)
nel definire una variabile, ne limita lo scope solo
all’interno del blocco in cui è definita (altrimenti
potrebbe essere visibile anche esternamente)FUNZIONI PREDEFINITE isNaN() isFinite() encodeURI() decodeURI() eval()
OGGETTI
Tramite la notazione letterale definiamo e istanziamo un
oggetto racchiudendo tra parentesi graffe proprietà e metodi.
Gli oggetti JavaScript non necessitano di classi !!
I doppi apici per i nomi delle proprietà sono obbligatori solo
quando i nomi delle proprietà NON RISPETTANO le regole sui
nomi (ossia contengono spazi o altri caratteri speciali)
var persona = { "nome": “Cadel", "cognome": “Evans"};
Accedere alle proprietà:
var nome = persona.nome;
var nome = persona["nome"];OGGETTI: DEFINIZIONE INCREMENTALE
In JavaScript gli oggeti sono entità dinamiche, nel
senso che la loro struttura è molto flessibile e può
essere modificata dinamicamente anche durante
l’esecuzione di uno script.
E’ possibile assegnare (definendole al tempo
stesso) nuove proprietà legate all’oggetto
precedentemente definito in maniera parziale
var persona = {};
persona.nome = “Cadel";
persona.cognome = “Evans";
persona.indirizzo = {
via: "Via Garibaldi", numero: 15, CAP: "00100", citta:
"Roma" };
persona.eta = 32;METODI
A differenza delle proprietà di un oggetto che rappresentano dati, i
metodi rappresentano attività che un oggetto può compiere.
In JS la definizione di un metodo infatti non è altro che
l’assegnazione di una funzione (che è lei stessa una oggetto) ad una
proprietà (come è evidente nel terzo esempio nel seguito)
// Metodo che non accede alle proprietà dell’oggetto
persona.nomeCognomeFisso = function () { return “Cadel Evans"; }
// Metodo che accede alle proprietà dell’oggetto
persona.nomeCognome = function () { return this.nome + " " + this.cognome; }
// Definizione di un metodo in due passaggi
function visualizzaNomeCognome() { return “Roberto Visentini"; }
persona.nomeCognomeFisso_2 = visualizzaNomeCognome;OBJECT E NEW
Ogni oggetto, predefinito o meno che sia, eredita le
caratteristiche base della classe Object .
È anche possibile creare un oggetto a partire da un tipo di dato
primitivo
var numero = new Object(10);
var altroNumero = new Object(3*20);
var stringa = new Object("test");
var persona = new Object({nome: “Cadel", cognome: “Evans"});COSTRUTTORI
L’assenza di classi in JS può rivelarsi un problema
quando si vogliano istanziare più oggetti dello stesso
tipo, infatti con la notazione letterale saremmo
obbligati a ridefinire ogni volta la struttura del nostro
oggetto.
Per evitare ciò possiamo ricorrere ad un costruttore
Un costruttore è una normale funzione JS invocata tramite
l’operatore new
// instanzio 2 persone passando i parametri
function persona(nome, cognome) { var p1 = new persona(“Cadel", “Evans");
this.nome = nome; var p2 = new persona(“Enrico", “Zaina");
this.cognome = cognome; // se ho il costruttore senza parametri posso
this.indirizzo = ""; procedere così
this.mostraNomeCompleto = var p3 = new persona();
function() {...}; p3.nome = “Roberto";
} p3.cognome = “Visentini";EREDITARIETÀ
La flessibilità degli oggetti JS si esprime principalmente
nella possibilità di modificarne la struttura anche dopo la
creazione
var p1 = new persona(“Cadel", “Evans");
var p2 = new persona(“Enrico", “Zaina");
p1.telefono = “000000000"; // non influenzo la struttura degli altri oggetti persona
Se vogliamo aggiungere una proprietà a tutti gli oggetti
creati con un costruttore, possiamo sfruttare il prototype.
Tale meccanismo è alla base dell’ereditarietà nella
programmazione ad oggetti in JavaScript
persona.prototype.telefono = “0000000000";CLASSI (ECMASCRIPT 6)
Per uniformità con la maggior parte degli altri linguaggi di
programmazione, a partire da ECMASCript 6 è prevista la
possibilità di utilizzare un approccio sintattico alla
definizione di oggetti analogo alle classi
Di fatto una classe in questo modello sintattico è un modo
alternativo per la definizione di un costruttore.
class persona {
constructor(nome, cognome) {
this.nome = nome;
this.cognome = cognome;
}
metodoDiPersona() {
// istruzioni
}
}TEMPLATE STRING
var messaggio = "Attenzione!\nIl valore inserito " + valore + " non è
valido perché esso deve essere compreso tra " + valoreIniziale + " e Concatenazione
" + valoreFinale + ".\nSi prega di riprovare."; di stringhe
var messaggio = `Attenzione!
Il valore inserito ${valore} non è valido perché esso deve essere
compreso tra ${valoreIniziale} e ${valoreFinale}. Template string:
Usa la sintassi
Si prega di riprovare.`;
${espressione} e
mantiene gli “a
capo”
var somma = `La somma di ${a} e ${b} è ${a+b}`;TEST E DEBUG JAVASCRIPT
Il DEBUGGING (o semplicemente DEBUG), indica l'attività che
consiste nell'individuazione della porzione di software affetta
da errore (bug) rilevata nei software durante l’utilizzo.
L'attività di debug è una delle operazioni più importanti per la
messa a punto di un programma, spesso estremamente
difficile per la complessità dei software oggi in uso e delicata
per il pericolo di introdurre nuovi errori (effetti collaterali) o
comportamenti difformi da quelli desiderati nel tentativo di
correggere quelli per cui si è svolta l'attività di debug.
Tipicamente è facilitata dalla possibilità di:
Procedere passo – passo o fino al successivo breackpoint
Monitorare il valore delle variabili
Assegnare valore manualmente alle valibili
Fondamentale per individuare gli errori LOGICI e di RUNTIMEDEBUG CON GOOGLE CHROME
1. F12 → Aprire DevTools
2. Spostarsi sulla scheda Sources
3. Eventualmente selezionare il file desiderato tramite il
pannello file explorer
4. Inserire almeno un breakpoint nel codice js
5. Richiamare dalla pagina la funzione js nel cui codice è
inserito il breakpoint
6. Controllo dell’esecuzione del codice
Resume F8 → procede fino al termine del codice o fino al
successivo brakpoint
Step Into F11 → quando incontra una chiamata a funzione
entra nel codice sorgente della funzione chiamata
Step Over F10 → quando incontra una chiamata a funzione
NON entra nel codice sorgente della funzione chiamata → si
fermerà ugualmente se incontra un breakpointPossibilità di monitorare il
Punto di interruzione: Prossima riga
Valore delle variabili in tempo reale
breakpoint in esecuzione
File explorer
Call Stack: albero Monitoraggio delle
Possibilità di vedere a console delle chiamate variabili locali e globali
Il contenuto delle variabiliDEBUG CON VISUAL STUDIO
E’ possibile utilizzare la IDE di Visual Studio per
debuggare anche le porzioni di codice JS
Valido sia per le webForm.aspx che per le pagine html
Per far si che il debugger di chrome non si attivi
prendendo il predominio su quello di Visual Studio
occorrerà utilizzare Internet Explore come browser
di test
Se si utilizza Edge potrà essere necessario utilizzare la
funzionalità Debug → Attach to ProcessVISUAL STUDIO DEBUG ATTACH TO PORCESS
1. Settare il browser predefinito che si desidera
utilizzare tramite l’apposito menu a tendina (ad
es Edge)
2. Una volta avviato il sito web in edge, avviare la
voce di menu di Visual Studio:
1. Debug → Attach to Process.
3. In "Attach to" Selezionare la voce "Script code".
4. Tra I processi presenti in "Available Processes"
scegliere"MicrosoftEdgeCP.exe".
5. Click attach e riaggiornare la pagina in Edge.
6. Sia vvierà il debug nella IDE di Visual Studio.Puoi anche leggere
