JAVASCRIPT
Prof. Pagani Corrado
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 INTERPRETATO
CONCORRENZA 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 ECMASCript 2015
2015 Migliorata gestione delle classi, nuovi iteratori, introduzione
nuove librerie ….
7 ECMASCript 2016
2016 Migliore incapsulamento delle parti di codice, e supporto
alla creazione di librerie esterne
8 ECMASCript 2017
2017 Migliorata gestione della concorrenza, funzioni asincrone,
ulteriori miglioramenti sulle librerie
STRUMENTI 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
integrato
JAVASCRIPT 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.
<button type="button" onclick="alert('Cadel Evans!')">Cliccami</button>
Attributo che permette di
gestire l’evento di click sul
pulsante
Codice JS: visualizza un box
pop up con il testo indicato
<a href="javascript:alert('Cadel Evans!')">Cliccami</a> Versione analoga per
i link
BLOCCHI 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 <script> per inserire blocchi di codice in una pagina HTML
Possiamo inserire blocchi di codice (e i relativi tag <script>) nella sezione <head> (più frequentemente) o nella sezione <body> della pagina HTML.
<head>
<script>alert('Cadel Evans campione!')</script>
</head>
Il codice JS è
interpretato ed
eseguito nell’esatto
momento in cui il
parser html lo incontra
JS 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.
<script src="codice.js"></script>
<script src="http://www.miositocom/codice.js"></script>
Riferimento relativo
Riferimento ssoluto
JS 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)
<button type="button" onclick="cadelFunction()">Cliccami</button>
<a href="javascript:cadelFunction()">Cliccami</a>
function cadelFunction() {
alert('Cadel Evans GO GO!')
}
Definizione di funzione su file esterno
INTRODUZIONE ALLA SINTASSI JS
JS è case sensitive
Terminatore di una istruzione ;
Commenti
commento a singola riga
commento multiriga
// Questo è un commento
/* 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
- - decremento
OPERATORI RELAZIONALIE LOGICI
Operatore Nome
< minore
<= minore o uguale
> maggiore
>= maggiore o uguale
== uguale
!= diverso
=== strettamente uguale (non esegue conversione)
!== strettamente diverso (non esegue conversione)
Operatore Nome
&& and
|| or
! not
OPERATORE 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 % y
CONVERSIONI IMPLICITE
Conversione in valore booleano
Tipo Valore booleano
undefined false
null false
numero false se 0 o NaN, true in tutti gli altri casi
stringa false se stringa vuota, true negli altri casi
Conversione in valore numerico
Tipo Valore numerico
undefined NaN valore NotANumber
null 0
booleano 1 se true, 0 se false
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
numero “NaN” se NaN, “Infinity” se Infinity - la stringa che rappresenta
il numero negli altri casi
CONVERSIONI ESPLICITE
la funzione parseInt() converte una stringa in un valore intero
La funzione parseFloat() restituisce un valore numerico considerando l’eventuale virgola
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’inizio
parseInt("12") // 12
parseInt("12abc") // 12
parseInt("a12bc") // NaN
parseInt("12.5") // 12
parseFloat("12.5") //12.5
ALTRI 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
E’ sempre possibile verificare il tipo della variabile (o di un valore) tramite l’operatore typeof
var x = "12";
var y = x + 13; // valore assunto 1213
var x = 12;
var y = x + 13; // valore assunto 25
ARRAY
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];
var myArray = [123, "stringa", ["a", "b", 50]];
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];
In questo caso un
elemento è lui stesso
un array
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];
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.";
E’ possibile definire anche array tramite costruttore e
popolare successivamente gli elementi
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
}
var x = 1;
var i;
for (i = 1; i <=5; i++) {
x += x * i;
}
Esempio
L’istruzione for è molto flessibile, infatti possiamo inserire
nelle sezioni inizializzazione e modifica anche gruppi di
istruzioni separati da virgole.
FOR-IN E FOR-OF
var mioArray = [1, 2, 4, 8, 16];
var totale = 0;
var indice;
for (indice in mioArray )
{
totale = totale + mioArray[indice];
}
for (indice in mioArray) {
// istruzioni
}
for (valore of mioArray) {
// 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 totale = 0;
var valore;
for (valore of mioArray )
{
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 somma(x, y)
{
return x + y;
}
function hello_world()
{
return “hello world”;
}
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
function persona(nome, cognome) {
this.nome = nome;
this.cognome = cognome;
this.indirizzo = "";
this.mostraNomeCompleto =
function() {...};
}
// instanzio 2 persone passando i parametri
var p1 = new persona(“Cadel", “Evans");
var p2 = new persona(“Enrico", “Zaina");
// se ho il costruttore senza parametri posso
procedere così
var p3 = new persona();
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
" + valoreFinale + ".\nSi prega di riprovare.";
var messaggio = `Attenzione!
Il valore inserito ${valore} non è valido perché esso deve essere
compreso tra ${valoreIniziale} e ${valoreFinale}.
Si prega di riprovare.`;
var somma = `La somma di ${a} e ${b} è ${a+b}`;
Concatenazione
di stringhe
Template string:
Usa la sintassi
${espressione} e
mantiene gli “a
capo”
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 RUNTIME
DEBUG 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 breakpoint
Punto di interruzione:
breakpoint
Prossima riga
in esecuzione
Possibilità di monitorare il
Valore delle variabili in tempo reale
Call Stack: albero
delle chiamate
Monitoraggio delle
variabili locali e globali Possibilità di vedere a console
Il contenuto delle variabili
File explorer
DEBUG 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 Process
VISUAL 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.
Top Related