Prof. Pagani Corrado JAVASCRIPT · 2015 Migliorata gestione delle classi, ... inserire blocchi di...

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.

Prof. Pagani Corrado JAVASCRIPT · 2015 Migliorata gestione delle classi, ... inserire blocchi di...

Documents

Transcript of Prof. Pagani Corrado JAVASCRIPT · 2015 Migliorata gestione delle classi, ... inserire blocchi di...