17 Javascript 1 - caprera.dia.unisa.itcaprera.dia.unisa.it/TSW/MATERIALE/ns/Javascript1.pdf ·...

Javascript – 1

Introduzione

Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 2

Javascript client-side – 1  HTML non può né gestire scelte

dell’utente, né prendere decisioni, né iterare dei task

 Gli script client-side indicano al browser la lista di azioni che deve eseguire

  Il risultato dipende dall’interprete (browser)


Javascript client-side – 2   Valida i dati dei moduli durante la loro

compilazione   Visualizza messaggi e possono richiedere

dati in apposite finestre (alert box)   Anima il contenuto della pagina (e.g.,

immagini) interagendo con l’utente (e.g., spostamenti cursore)

  Adatta le pagine ai browser che le visitano   E altro ancora… (es. menu a tendina,

messaggi sulla linea di status del browser, aprono nuove finestre,… )


Il tag SCRIPT   È il tag contenitore per inserire codice

Javascript nella pagina HTML <SCRIPT> … </SCRIPT>

  Gli attributi di SCRIPT sono: –  language –  type –  src –  defer

  I l contenuto del tag SCRIPT v iene interpretato dal browser come istruzioni in un linguaggio di scripting


Gli attributi di SCRIPT – 1   language (deprecato)

–  Indica il linguaggio di scripting utilizzato all’interno del tag SCRIPT

•  language=“Javascript” (indica la versione 1.0) •  language=“Javascript1.2”

  type (usato al posto di language) – Descrive il mime-type utilizzato all’interno

del tag SCRIPT •  type=“text/javascript”


Gli attributi di SCRIPT – 2  src

–  Indica l’url di un file contenente codice Javascript (non contiene HTML)

–  Il file in genere termina con estensione .js •  <SCRIPT type=“text/javascript”

src=“codice/menu.js”></SCRIPT>

–  Il tag di chiusura è richiesto – Tutto quello compreso tra i due tag SCRIPT

non viene interpretato (eseguito)


Gli attributi di SCRIPT – 3  defer

– Attributo booleano, indica al browser di interpretare il contenuto del tag SCRIPT solo dopo che ha terminato di caricare tutto il documento HTML

– Lo si usa quando ci sono script che non producono output (e.g., non usano document.write) o che non necessitano che tutto il documento HTML sia caricato

•  La performance del browser aumenta

Javascript e browser antiquati  Per vecchie versioni di browser che non

sono in grado di interpretare Javascript (o meglio il tag SCRIPT) si può utilizzare il seguente modello di commento

<SCRIPT TYPE=“text/javascript”>  </SCRIPT>


Il tag NOSCRIPT  Permette di specificare cosa fare

quando –  il browser non sa interpretare Javascript – Javascript è stato disabilitato dall’utente

 Dovrebbe essere usato ogni volta che si utilizza il tag SCRIPT –  Almeno la prima volta…. –  Si potrebbe redirigere il browser verso una pagina

che non contiene Javascript

<SCRIPT TYPE=“text/javascript”>  </SCRIPT> <NOSCRIPT> <H1> Questa pagina richiede Javascript</H1> </NOSCRIPT>

Al posto di <H1> si potrebbe redirezionare la pagina attraverso il tag META (SCRIPT deve essere in HEAD)


Dove posizionare il tag SCRIPT  Può andare nella sezione HEAD del

documento HTML –  In tal caso il codice contenuto viene

eseguito prima di visualizzare la pagina  Può andare nella sezione BODY del

documento HTML –  In tal caso il codice contenuto viene

eseguito quando il tag <SCRIPT> viene incontrato dal browser nel flusso normale della pagina

Migliorare la fruibilità del sito   Inserire il codice javascript alla fine del

documento HTML

  Il documento viene immediatamente visualizzato senza attendere che il codice javascript venga interpretato



Il primo script <H1>Ecco il classico</H1> <SCRIPT TYPE=“text/javascript"> document.write(“Ciao mondo”); </SCRIPT>   document si riferisce al documento html (è un oggetto

che rappresenta il documento visualizzato nella finestra del browser)

  write è un metodo di document

Codice completo <!DOCTYPE HTML > <HTML> <HEAD> <TITLE> Esempio di script </TITLE> </HEAD> <BODY> <H1>Ecco il classico </H1> <SCRIPT type="text/javascript">  </SCRIPT> </BODY> </HTML>


…tornando a NOSCRIPT <!DOCTYPE HTML> <HTML> <HEAD> <TITLE> Esempio di NOSCRIPT</TITLE> <SCRIPT TYPE="text/javascript">

alert("Bravo!\n Il tuo browser supporta JavaScript"); </SCRIPT> <NOSCRIPT> <META HTTP-EQUIV="refresh" CONTENT="7;URL=pagina.html"> </HEAD> <BODY> <h2>Per visualizzare questo sito hai bisogno di JavaScript</h2> <h2>Fra sette secondi sarai direzionato verso una versione del sito che non fa uso di JavaScript</h2> </BODY> </NOSCRIPT> </HEAD> <BODY> … </BODY> </HTML>


Un altro esempio <SCRIPT TYPE=“text/javascript"> out= "<FONT COLOR='RED'> Questo testo ”; out=out+”è di colore rosso</FONT>“; document.write(out); </SCRIPT>   out contiene codice HTML da

mandare in output –  all’interno delle virgolette

si usano gli apici singoli (o viceversa)

HTML antiquato


Ancora un esempio <SCRIPT TYPE=“text/javascript">

str= "<FONT COLOR='RED'>\ Questo testo è di colore rosso: " for(i=1;i<=6;i++){ out = str+ i; out += "</FONT><BR>"; document.write(out);} </SCRIPT>

Serve a scrivere una stringa su più linee


Tempo di esecuzione di uno script

 Lo script viene eseguito in tempi diversi a seconda di dove è scritto il codice – È eseguito al tempo di caricamento se è

presente in HEAD senza l’attributo DEFER – È eseguito al tempo di visualizzazione

della pagina se è presente in BODY – Se invece il codice fa parte di una

funzione, allora viene eseguito solo quando la funzione viene invocata


Interazione con l’utente   Introduciamo a questo punto i metodi alert,

confirm e prompt dell’oggetto window –  Saranno utili per risolvere i primi esercizi proposti

sul sito del corso   alert serve a mostrare una finestra per

l’output da parte del codice javascript   confirm aspetta che l’utente prema OK o

Continua per continuare   prompt serve a mostrare una finestra in cui

l’utente fornisce dell’input al codice javascript   In seguito forniremo maggiori dettagli

sull’oggetto window e su i suoi metodi


alert   Mostra una finestra di dialogo contenente un

messaggio ed un bottone per chiuderla   Sintassi

–  alert(msg) •  msg è una stringa che verrà mostrata in una finestra

  Non è necessario specificare l’oggetto window –  window.alert(msg)

  Non si può usare HTML all’interno di msg per formattare il testo, ma solo caratteri ASCII e \n, \t, …

Esempio <BODY> <SCRIPT type="text/javascript"> 

</SCRIPT> </BODY>

Netscape


confirm  Mostra una f inestra d i d ia logo

contenente un messaggio e due bottoni uno per confermare l’azione l’altro per annullare l’azione

 Sintassi – confirm(msg) – Restituisce true se l’utente preme OK false

altrimenti

Esempio <SCRIPT type="text/javascript">  </SCRIPT>


prompt  Mostra una finestra di dialogo con un

messaggio, una linea testuale di input e due bottoni uno per confermare l’azione l’altro per annullare l’azione

 Sintassi – prompt(msg,default)

•  msg è il messaggio mostrato all’utente •  default è l’input di default, usare “” per creare

una linea testuale di input vuota

 Restituisce la stringa digitata dall’utente

Esempio <SCRIPT type="text/javascript">  </SCRIPT>


Input di numeri   Il valore restituito da prompt (e.g., val) è di

tipo stringa   Per convertirlo al tipo intero usiamo la

funzione parseInt(val)   Per convertirlo al tipo float usiamo la funzione

parseFloat(val)   Entrambi restituiscono la costante NaN se val

non inizia per un numero –  Per verificare se il valore restituito da parseInt o

parseFloat non è un numero si usa la funzione isNaN()


eval(str)  Riceve in input una stringa str che

rappresenta del codice JavaScript  Quando la funzione eval è invocata,

l’interprete JavaScript valuta il codice rappresentato da str e lo esegue. –  Restituisce il risultato della valutazione

Elementi del linguaggio


Cosa c’è in Javascript   Gli elementi di un programma Javascript

possono essere divisi in 5 categorie: –  variabili e valori –  espressioni ed operatori

•  per manipolare i valori

–  strutture di controllo •  per modificare l’ordine di esecuzione

–  funzioni •  per raggruppare blocchi di istruzioni

–  oggetti ed array •  raggruppamenti di dati e funzioni


Commenti in Javascript  Stessa tecnica del C++ o di Java  Commenti su di una singola linea

//

 Commenti su più linee Inizio commento /* Fine commento */


Punto e virgola opzionale  Ogni istruzione dovrebbe terminare con

il punto e virgola (;)  Può essere omesso se due istruzioni

sono separate da un invio a = 3 b = 4

 Nel seguente caso è obbligatorio a = 3; b = 4;

 Conviene sempre metterlo


Valori  Javascript riconosce i seguenti tipi di

valori –  Numeri –  Valori booleani –  Stringhe –  null //può essere assegnato ad una variabile

•  Indica un valore nullo –  undefined

•  Indica che una variabile ha un valore indefinito


Numeri interi

 decimali: (compresi tra –253 e 253) – e.g., 77 – 9876453

 ottali (iniziano con zero): – e.g., 077 – 09876

 esadecimali (iniziano con 0x o 0X): – e.g., 0x77 – 0X123456789abcDEF


Numeri in virgola mobile  Notazione standard

–  1234.567 – -1.234  Notazione scientifica

–  1.2345e10 1.1234e-11 9. 87E-21  Valore massimo

±1.7976931348623157x10308  Valore minimo

±5x10-324


Costanti numeriche speciali   Number.POSITIVE_INFINITY

–  Valore speciale per rappresentare “infinito”

  Number.NEGATIVE_INFINITY –  valore speciale per rappresentare “infinito negativo”

  NaN oppure Number.NaN –  Valore speciale per rappresentare un “non-numero”

  Number.MAX_VALUE –  il più grande numero rappresentabile

  Number.MIN_VALUE –  il più piccolo numero rappresentabile


Valori booleani  Possono assumere il valore true o false  JavaScript, se è necessario, converte

true in 1 e false in 0  Utilizzo

if (a == 4) b = b + 1;

else a = a + 1;


Valori stringa  Sono letterali di zero o più caratteri

racchiusi tra virgolette doppie (") o singole (')

 Esempi "" // stringa vuota "casa" 'cassa' "1234" "una riga \n un’altra riga" 'nome= "carlo"' //stringa nome="carlo"


Caratteri speciali   Oltre ai caratteri ordinari o a quelli espressi in

UNICODE (\uXXXX, dove X è un valore esadecimale), si possono inserire nelle stringhe i seguenti caratteri speciali –  \' (apice singolo) \" (apice doppio) –  \b (backspace) \f (form feed) –  \n (interruzione di linea) \r (ritorno carrello) –  \t (tabulazione) \\ (backslash) –  \v (tab. verticale) \0 (carattere NULL)


Parole riservate – 1 o  abstract o  boolean o  break o  byte o  case o  catch o  char o  class o  const o  continue o  debugger o  default

o  delete o  do o  double o  else o  enum o  export o  extends o  false o  final o  finally o  float o  for

o  function o  goto o  if o  implements o  import o  in o  instanceof o  int o  interface o  long o  native o  new


Parole riservate – 2 o  null o  package o  private o  protected o  public o  return o  short o  static o  super o  switch o  synchronized o  this

o  throw o  throws o  transient o  true o  try o  typeof o  var o  void o  volatile o  while o  with


Variabili in Javascript   Le variabili sono nomi simbolici associati a

valori in applicazioni Javascript   I nomi delle variabili devono seguire alcune

regole –  Il primo carattere deve essere o una lettera o un

underscore (_) oppure il segno del dollaro ($) –  I caratteri seguenti possono essere lettere, cifre,

oppure il segno del dollaro (non ci possono essere spazi)

–  Non possono essere uguali a parole riservate   Javascript è case sensitive

–  Var1 ≠ var1

Tipo delle variabili   Javascript non è un linguaggio tipato

–  Alla stessa variabile possiamo assegnare valori di tipo differente senza generare errori

  Esempio <SCRIPT TYPE=“text/javascript”>  </SCRIPT>


Dichiarazione di variabili – 1

 Non è necessario dichiarare le variabili anche se è buona norma farlo sempre

 Per dichiarare una variabile possiamo semplicemente assegnarle un valore –  i=10; //a questo punto i è dichiarata –  str= "Ciao \n mondo!";


Dichiarazione di variabili – 2   Per dichiarare una variabile si usa la parola

chiave var –  var i; –  var r, d; –  var s=“ciao”;

  Possiamo dichiarare con var una variabile più di una volta senza causare errori

  Se, all’interno di una funzione, si crea una variabile senza far ricorso a var, allora si crea una variabile globale


Inizializzazione di variabili  Possiamo inizializzare una variabile

quando la dichiariamo – var i=10;

 Una variabile dichiarata ma non inizializzata (e.g., var i;) è indefinita – Se tentiamo di leggere il suo contenuto

otteniamo undefined  Se tentiamo di accedere ad una

variabile non dichiarata otteniamo un errore al runtime


Campo di visibilità di una variabile   Prima di Javascript 1.7 esistevano solo due

campi di visibilità   Locale

–  Variabili definite all’interno di una funzione attraverso la parola chiave var

  Globale –  Variabili definite in qualsiasi punto del codice

Javascript, ma al di fuori di una funzione; oppure in una funzione senza utilizzare var

  JavaScript 1.7 introduce il campo di visibilità di blocco (block scope) tramite la keyword let –  NON È COMPLETAMENTE SUPPORTATO

Keyword let  Funziona solo con Firefox indicando

<script type="application/javascript;version=1.7”> var x = 5; var y = 0; let (x = x+10, y = 12) { alert(x+y + "\n"); } alert((x + y) + "\n"); </script> Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 47

Provare con gli altri browser


Esempio function test(o){

var i=0; if(typeof o == “object) { var j=i+3; for(var k=0; k<10; k++) { document.write(k); } document.write(j); document.write(k); } document.write(i);

}

Le variabili i j e k hanno lo stesso campo di visibilità (scope), quello della funzione. Sono visibili da a non soltanto nei blocchi colorati

X La variabile j diventa gloabale


Cenni su oggetti in Javascript – 1   Un oggetto in JavaScript è una collezione di

valori con nome (named values) –  Una specie di struttura in C

  In genere si fa riferimento a questi named values con il nome di proprietà

  Per far riferimento ad una proprietà di un oggetto si fa riferimento al nome dell’oggetto seguito dal punto (.) e dal nome della proprietà –  immagine.altezza –  immagine.larghezza


Cenni su oggetti in Javascript – 2  Se un oggetto contiene una funzione,

allora la funzione prende il nome di metodo dell’oggetto ed il nome della proprietà diventa il nome del metodo

 Una variabile in uno script Javascript in esecuzione in un browser coincide con una proprietà dell’oggetto window


L’oggetto globale – 1   Quando l’interprete Javascript esegue uno

script, una delle prime cose che fa è creare un oggetto globale

  Tra le proprietà di questo oggetto globale ci sono le variabili dichiarate all’interno di script Javascript –  Quando si dichiara una variabile si sta

aggiungendo una proprietà all’oggetto globale   L’interprete Javascript inizializza questo

oggetto globale con altri valori e funzioni predefinite


L’oggetto globale – 2   Per far riferimento a questo oggetto nel

codice Javascript che non fa parte di funzioni possiamo usare la parola chiave this –  All’interno di funzioni this ha un significato

differente, dettagli in seguito   In JavaScript l’oggetto Window serve da

oggetto globale –  Per far riferimento a this possiamo usare la

proprietà auto-referenziale window dell’oggetto globale Window, oppure possiamo far riferimento direttamente alle proprietà di window (non usiamo né this né window, ma direttamente la proprietà)


Il call object

 Le variabili locali (quelle dichiarate all’interno di una funzione) sono anch’esse proprietà di un oggetto chiamato call object –  Il call object è creato quando si invoca una

funzione –  Il tempo di vita di un call object è la durata

dell’esecuzione della funzione a cui è associato


Costanti  Variabili a sola lettura  Sono create usando la parola chiave

const –  const sconto=0.1; –  const nome=“pippo”;

 Esistono in Javascript anche delle costanti predefinite che rappresentano i più comuni valori matematici (accessibili attraverso l’oggetto math)

Operatori e costrutti


Tipi di operatori  Unario

– L’operatore ha un solo operando – E.g., -3

 Binario – L’operatore ha due operandi – E.g., 3+4

 Ternario – L’operatore ha tre operandi – E.g., a < 4 ? 3 : 4;


Operatori aritmetici   x + y addizione   x – y sottrazione   x * y moltiplicazione   x / y divisione, restituisce double   ++i incremento prefisso   i++ incremento postfisso   --i decremento prefisso   i-- decremento postfisso   -i negazione   x % y modulo


Operatori relazionali  Restituiscono un valore booleano  x > y maggiore di  x >= y maggiore o uguale a  x < y minore di  x <= y minore o uguale a  a in x vero se a è una proprietà

dell’oggetto x  y istanceof x vero se y è un’istanza

del tipo di oggetto x


Esempio di in ed istanceof

var theDay=new Date(2003, 4, 29) if (theDay instanceof Date) { // istruzioni da eseguire }

var point = {x:1, y:1}; //oggetto if ("x" in point) { // istruzioni da eseguire }


Operatori di uguaglianza  a == b uguaglianza

– Restituisce vero se a e b sono uguali anche dopo conversioni di tipo

–  3 == “3” restituisce true  a === b identità

– Restituisce vero se a e b sono uguali e sono dello stesso tipo

– 3 === “3” restituisce false


Operatori di disuguaglianza  a != b disuguaglianza

– Restituisce vero se a e b sono diversi anche dopo conversioni

–  3 != “2” restituisce true

 a !== b non-identità – Restituisce vero se a e b non sono identici – 3 !== “3” restituisce true


Operatori su stringhe   Tutti gli operatori di relazione già visti   Operatore di concatenazione: +   "Ciao a voi " + 3; => "Ciao a voi 3"   L’operatore + usato con stringhe e numeri

non è associativo 1 + 2 + " gattini"; produce "3 gattini" "gattini: " + 1 + 2; produce "gattini: 12"   Per convertire un numero x nella stringa "x" è

sufficiente scrivere ""+x –  ""+3 produce "3"


Operatori logici   && AND logico

–  expr1 && expr2   || OR logico

–  expr1 || expr2   ! NOT logico

–  !expr   Le espressioni logiche vengono valutate da

sinistra verso destra; l’interpretazione si arresta appena diventa noto il valore dell’espressione –  7 < 10 || “espressione”

•  “espressione” non verrà mai valutata


Operatori bitwise   Lavorano sui bit che rappresentano i loro

operandi

  & AND bitwise   | OR bitwise   ^ XOR bitwise   ~ NOT bitwise   << shift verso sinistra (x << 3;)   >> shift verso destra (x >> 4;)   >>> shift verso destra con

riempimento di 0


Assegnamento   Il più semplice tipo di operatore

=

  Esempi –  x=3; str=“casa”;

  Assegnamento multiplo –  x = y = z = 0;

  Esistono altri operatori di assegnamento che sono la forma abbreviata di operazioni standard –  E.g., x+=3; equivalente a x=x+3;


Forma abbreviata   x += y equivale a x = x + y   x -= y equivale a x = x - y   x *= y equivale a x = x * y   x /= y equivale a x = x / y   x %= y equivale a x = x % y   x <<= y equivale a x = x << y   x >>= y equivale a x = x >> y   x >>>= y equivale a x = x >>> y   x &= y equivale a x = x & y   x ^= y equivale a x = x ^ y   x |= y equivale a x = x | y


Operatore condizionale  Unico operatore ternario in JavaScript  Sintassi

–  (condizione) ? expr1 : expr2 –  restituisce la valutazione di expr1 se

condizione è vera, altrimenti restituisce la valutazione di expr2

– expr1 e expr2 possono avere tipi diversi


Operatore typeof  L’operatore typeof restituisce una stringa

che indica il tipo dell’operando  Sintassi

–  typeof operando –  typeof (operando)

 Esempio if(typeof a == “string”) document.write(a +“ è una stringa”);


Esempi di typeof   typeof parseInt

–  restituisce la stringa “function”

  typeof undefinedVariable –  restituisce “undefined”

  typeof 33 restituisce “number”   typeof “Ciao” restituisce “string”   typeof true restituisce “boolean”   typeof null restituisce “object”


Operatore void  L’operatore void specifica

un’espressione che deve essere valutata senza restituire un valore

 Sintassi –  void espressione –  void (espressione)

 Usato in concomitanza degli eventi (onClick, onMouseOver, ….) Dettagli in seguito


Operatore virgola  Valuta il suo operando sinistro poi

quello destro e restituisce il valore del suo operando destro

 Esempio –  i=0, j=1, k=2; –  assegna 0 ad i

1 a j 2 a k restituisce il valore 2


Altri operatori  new

– Serve a creare istanze di oggetti   delete

– Serve a rimuovere proprietà di oggetti   ()

– Operatore chiamata a funzione

  [] e . – Operatori di accesso ad array ed oggetti

Istruzioni


Istruzioni JavaScript   In JavaScript la più semplice istruzione è

un’espressione che ha un effetto collaterale –  s = 4 + i; –  cont++;

  In JavaScript possiamo combinare, usando le parentesi graffe più istruzioni in una singola istruzione o istruzione blocco {

x = Math.PI; cx = Math.cos(x); alert("cos(" + x + ") = " + cx);

}


Istruzioni condizionali   Un’istruzione condizionale è un insieme di

comandi che vengono eseguiti se una condizione specificata è vera

  if –  if (espressione) istruzioni

  if else –  if (espressione) istruzioni1 else istruzioni2

  if else if –  if (espressione1) istruzioni1

else if (espressione2) istruzioni2 else istruzioni3


Istruzione switch   Un’istruzione switch permette ad un

programma di valutare un espressione e confrontare il valore dell’espressione con un’etichetta (label) case.

  Se si trova una corrispondenza, allora il programma esegue l’istruzione associata

  La labe l può essere una quals ias i espressione arbitraria, non necessariamente una costante al tempo di compilazione come accade per il C, C++ o Java


Sintassi switch (espressione){

case label1 : istruzione1; break; case label2 : istruzione2; break; ... default : istruzione-n; }

Può essere:

case 60*60*24: case Math.PI: case n+1: case a[0]:


Istruzioni di ciclo  Un ciclo è un insieme di comandi che

vengono eseguiti ripetutamente fino a quando una condizione specificata è soddisfatta

 Semplificano azioni ripetitive –  for –  while –  do while –  for in


Ciclo for  Sintassi

for(assegnamento; condizione; incremento) istruzioni

Esempi for(count = 0; count < 10; count++)

document.write(count + "<br>");

for(i = 0, j = 10 ; i < 10 ; i++, j--) sum += i * j;

opzionali


Ciclo while  Sintassi

while (condizione) { istruzioni

}

 Esempio var count = 0; while (count < 10) {

document.write(count + "<br>"); count++;

}


Ciclo do while  Sintassi

do { istruzione

} while (condizione );  Esempio var i=0; do {

i+=1; document.write(i); } while (i<5);


Ciclo for in  Sintassi

for (variable in object) statement

 Esempio for (prop in my_object) {

nome= "Nome: " + prop; valore= "Valore: " + my_object[prop]; document.write(nome + " - " +valore+ "<br>");

}


label   Con una label possiamo fornire un

identificativo ad un’istruzione. È usata in un ciclo in concomitanza con break o continue

  Sintassi label: istruzione

  Esempio markLoop:

while (theMark == true) doSomething();


break   Con break forziamo l’uscita dal ciclo più

interno che lo racchiude o da uno switch   Sintassi

break oppure break label;

  Esempio for(i = 0; i < a.length; i++) {

if (a[i] == target) break;

}


continue   È usato solo all’interno di un ciclo, interrompe il ciclo

e va a controllare la condizione   Sintassi

continue oppure continue label;

  Esempio i = 0; n = 0; while (i < 5) { i++; if (i == 3) continue; n += i; }


Esempio di continue con label checkiandj :

while (i<4) { document.write(i + "<BR>"); i+=1; checkj : while (j>4) { document.write(j + "<BR>"); j-=1; if ((j%2)==0) continue checkiandj; document.write(j + " is odd.<BR>"); } document.write("i = " + i + "<br>"); document.write("j = " + j + "<br>"); }


Istruzione with  L’istruzione with stabilisce l’oggetto

di default per un insieme di istruzioni

 L’uso di with rallenta l’esecuzione

Esempio utilizzo with

  Sintassi with (oggetto){ istruzioni

}   Per ogni identificativo

c h e c o m p a r e i n istruzioni si verifica se è una proprietà di oggetto

with(Math) { x = sin(i * PI / 20); y = cos(i * PI / 30);

}


x = Math.sin(i * Math.PI / 20); y = Math.cos(i * Math.PI / 30);

Le funzioni


Funzioni in JavaScript  Una funzione è un insieme di istruzioni

JavaScript che esegue un compito specifico

 Per usare una funzione bisogna prima definirla, poi lo script può invocarla

  In JavaScript esistono tre modi per definire una funzione – Attraverso l’istruzione function – Attraverso il costruttore Function – Attraverso una funzione letterale


L’istruzione function  Una funzione è composta da quattro

parti – La parola chiave function –  Il nome della funzione – Una lista opzionale di parametri racchiusa

da parentesi tonde –  Il corpo della funzione (serie di istruzioni

JavaScript) racchiusi da parentesi graffe  Non occorre dichiarare il tipo di ritorno

della funzione


Sintassi function nome_funzione ( argomenti ) {

istruzioni JavaScript }   I nomi delle funzioni sono degli identificatori,

quindi si applicano le stesse regole viste per i nomi da assegnare alle variabili


Esempi – 1 function quadrato(number) {

return number * number; }

function distanza(x1, y1, x2, y2) {

var dx = (x2 - x1); var dy = (y2 - y1); return Math.sqrt(dx*dx + dy*dy);

}


Esempi – 2   Il return è opzionale function print(msg) {

document.write(msg + "<BR>"); }  Dopo che una funzione è stata definita

può essere invocata attraverso l’operatore di chiamata

print("Ciao a tutti! ");


Funzioni ricorsive  È possibile definire funzioni ricorsive function fattoriale(x) {

if (x <= 1) return 1; else return x * fattoriale(x-1);

}


Argomenti di una funzione   Il passaggio avviene per valore

– Passando oggetti, possiamo modificarne le loro proprietà

 Possono essere passati un numero variabili di argomenti –  In più o in meno di quelli specificati nella

definizione della funzione – Vedremo in seguito come accedere a tutti

gli argomenti passati


Dove definire le funzioni?  Possono comparire in qualsiasi punto

del documento HTML

 È possibile definirle tutte nella sezione HEAD

•  O prima di </body> ….

 Meglio ancora, mettiamole in un file esterno con estensione .js – Le possiamo riusare facilmente…


Variabili locali e funzioni function init(a) { b = a; } function strana(s, t) { a = s; if (t) { var a; a = a+a; } return a+b; }

La funzione strana definisce una variabile locale a. Non importa che l’istruzione var compare all’interno di un’istruzione condizionale (if). L’istruzione var crea a all’inizio della funzione a prescindere dal valore di t


Funzioni annidate   In JavaScript è possibile definire funzioni

all’interno di un’altra funzione  Sono visibili solo all’interno della funzione

dove sono state definite  Non è possibile definire una funzione in

un ciclo o in un’istruzione condizionale – Questo vale solo per l’istruzione function ma

non per il costruttore Function o per le funzioni letterali


Esempio di funzione annidata function chiama(x) {

function quadrato(y) { return y*y; } return quadrato(x)+5;

} <P> Adesso invoco "chiama(6)", dovrebbe restituire 41. </P> <SCRIPT TYPE="text/javascript"> document.write("Risultato: " + chiama(6)); </SCRIPT>


Il costruttore Function()   Permette di definire delle funzioni in maniera

dinamica (simile a create_function() in PHP)   Il costruttore si aspetta un numero variabile di

argomenti di tipo stringa –  L’ultimo argomento è il corpo della funzione –

contiene istruzioni JavaScript arbitrarie separate da punto e virgola

–  Tutti gli altri argomenti specificano i nomi degli argomenti della funzione che si sta definendo

  Per definire una funzione che non prende argomenti, è sufficiente passare a Function() solo il corpo della funzione


Utilizzo del costruttore Function() var f = new Function("x", "y", "return x*y;");   Per invocare la funzione appena definita si

usa f(3,4);

var g = new Function("x", "return x*x;"); var hi = new Function("alert(‘Ciao a tutti’);");

g(3); hi();


Note sul costruttore Function()   Il corpo della funzione può essere

costruito in maniera dinamica all’interno di uno script

 Non viene specificato come argomento un nome per la funzione che si sta definendo – Le funzioni create con Function() sono

chiamate funzioni anonime – Come definire le funzioni ricorsive?

•  dettagli in seguito…


Funzioni letterali – 1  Una funzione letterale è un’espressione

che definisce una funzione senza nome  La sintassi di una funzione letterale è

molto simile a quella dell’istruzione function tranne per il fatto che: – è usata come un’espressione piuttosto che

come un’istruzione – non è necessario specificare il nome della

funzione


Funzioni letterali – 2  Funzioni definite in questo modo sono a

volte chiamate funzioni lambda in ricordo del linguaggio di programmazione LISP

 Sono utili quando devono essere usate una sola volta e non gli si deve assegnare un nome

 Possono essere memorizzate in una variabile, passate come argomento di una funzione o invocate direttamente


Esempio di funzione letterale var f1 = function(x) { return x*x; };

 Definizioni più o meno equivalenti sono:

var f2 = new Function(“x”, “return x*x;”);

function f3(x) { return x*x; }


Differenze tra f1, f2 ed f3?

 f1(x), f2(x) ed f3(x) restituiscono lo stesso risultato, ma nell’ambiente di esecuzione dove sono definite vengono defini t i t re “oggett i ” differenti


Esempi di funzioni letterali   Definizione e memorizzazione

a[0] = function(x) { return x*x; };

  Definizione di una funzione e suo passaggio ad un’altra

a.sort(function(a,b) {return a-b;} );   Definizione ed invocazione var cento = (function(x) { return x*x; }) (10);


Funzioni letterali con nome  È possibile definire una funzione

letterale assegnandole un nome – Utile per funzioni ricorsive

 Esempio

var f = function fattoriale(x) { if (x<=1) return 1; else return x*fattoriale(x-1); };


Campo di visibilità di funzioni letterali

 Le funzioni letterali possono essere rese visibili a livello globale

function xPerxPiu5(x) { quadrato=function(y) { return y*y; }; return quadrato(x)+5; }

 La funzione quadrato è visibile in qualsiasi punto del codice


Mentre, nel seguente esempio quadrato è visibile solo all’interno di xPerxPiu5

function xPerxPiu5(x) { function quadrato(y) { return y*y; } return quadrato(x)+5;

}


Funzione letterale come valore di ritorno function moltiplicatore(x) {

return function(y) { return x*y; } }

function print(msg) { document.write(msg); }

var perdue = moltiplicatore(2); var pertre = moltiplicatore(3); var persei = moltiplicatore(6); print( "Otto per due fa: " + perdue(8)+"<br>"); print("Otto per tre fa: " + pertre(8)+"<br>"); print("Otto per sei fa: " + persei(8)+"<br>");

x usato per inizializzare la funzione


Funzioni come dati

  In JavaScript le funzioni sono viste come dati, quindi possono anche essere – assegnate a variabili – memorizzate come proprietà di oggetti – memorizzate come elementi di un array – passate come argomento di una funzione –  restituite come valore di ritorno di una

funzione


Differenze tra funzioni letterali e Function()  Con Function() possiamo creare e

compilare dinamicamente al tempo di esecuzione delle funzioni.

 Le funzioni letterali sono una parte statica del programma

 Le funzioni create con Function() NON USANO lo scoping lessicale, ma sono compilate come se fossero funzioni top-level (globali)

Scoping lessicale   In JavaScript le funzioni hanno uno

scoping lessicale (statico) invece di dinamico

 Con lo scoping lessicale la funzione è in esecuzione nell’ambiente (scope) in cui è stata definita non nell’ambiente in cui è invocata – Fanno parte dello scope le variabili locali e

gli argomenti della funzione – Scope esecuzione = Scope definizione


Dinamico vs lessicale  Supponiamo che una funzione utilizzi

un simbolo non definito al suo interno  Con lo Scoping Lessicale

– La funzione usa la definizione che il simbolo ha nell'ambiente in cui la funzione è definita

 Con lo Scoping Dinamico – Usa la definizione che esso ha nell'ambiente

in cui la funzione è chiamata



var x = 10; function provaScope(y) { return y + x; } alert(provaScope(7)); // Visualizza 17 function testEnv() {// Cosa visualizza ? var x = -1; return provaScope(7); } alert(testEnv()); // Visualizza sempre 17 // con lo scoping dinamico //visualizzerebbe 6


Esempio

var y = "sono nello scope globale”; function CostruisciFunzione() {

var y = "sono in CostruisciFunzione"; return new Function("return y");

} alert(CostruisciFunzione()());

Non è un errore, rappresenta l’invocazione della funzione


<body> <p> esempio di invocazione di funzione costruita con

Function()</p> <SCRIPT TYPE="text/javascript"> document.write(CostruisciFunzione()() + "<br>"); </SCRIPT> <p> esempio di invocazione di funzione letterale </p> <SCRIPT TYPE="text/javascript"> document.write(CostruisciFunzioneLetterale()() + "<br>"); </SCRIPT> </body>

Stampa “scope globale”

Stampa “scope locale”


Ulteriore differenza  Se una funzione viene costruita

all’interno di un ciclo con Function(), allora il costruttore esamina il corpo della funzione e crea un nuovo oggetto funzione ogni volta che viene invocato

 Se la funzione è costruita con una funzione letterale, allora essa non viene creata nuovamente ogni volta che è incontrata


L’oggetto arguments – 1  Ogni volta che una funzione viene

invocata, oltre al call object viene creato l’oggetto arguments

 Contiene i parametri della funzione e il nome della funzione che è stata invocata – Valore della proprietà callee

  In questo modo si possono gestire funzioni con un numero variabili di argomenti


L’oggetto arguments – 2  Per accedere al primo parametro della

funzione si usa arguments[0]   In generale per accedere al parametro

i-esimo si usa arguments[i-1]  Per sapere quanti parametri sono stati

passati alla funzione si usa la proprietà lenght (cioè arguments.length)

  Il nome della funzione invocata è memorizzata nella proprietà callee (cioè arguments.callee)


Esempio – 1 function max() { var m = Number.NEGATIVE_INFINITY; for(var i = 0; i < arguments.length; i++)

if (arguments[i] > m) m = arguments[i];

return m; } var massimo = max(10, 32, 2, 3, 43, 4, 5, 30, 6);


Esempio – 2 function f(x, y, z) {

if (arguments.length != 3) { msg= "La funzione f è chiamata con "; msg+= arguments.length; msg+= " argomenti, ma ne aspetta 3."; alert( msg ); return null; } // esecuzione della funzione f...

}


Esempio – 3  La proprietà callee è utile per funzioni

ricorsive anonime function(x) { if (n<=1) return 1;

else return x*arguments.callee(x-1);

}


Numero di argomenti di una funzione

 Possiamo anche verificare con quanti argomenti è stata definita una funzione andando ad esaminare la proprietà length dell’oggetto funzione –  arguments.callee.length

 Questa proprietà non deve essere confusa con arguments.length


Esempio function check( param ) {

var attuali = param.length; vat attesi = param.callee.length; if (attuali != attesi) return false; else return true;

} // nel corpo della funzione che vogliamo // sia chiamata con il # di parametri esatto

if(check(arguments)) ….


Funzioni ricorsive e Function()

 Abbiamo visto che il costruttore F u n c t i o n ( ) n o n p r e v e d e c o m e parametro il nome della funzione che si sta costruendo – Come possiamo dinamicamente definire

funzioni ricorsive? – Si può utilizzare opportunamente la

proprietà callee


Esempio var func = "if (x <= 1) return 1; " func += " else return x*arguments.callee(x-1);" var f = new Function("x", func ); f(4); //restituisce 24


Definizione di proprietà di una funzione

  In JavaScript non è possibile dichiarare in una funzione una variabile static per far si che il suo valore persista attraverso invocazioni successive –  E.g., tenere traccia di quante volte una funzione

ricorsiva viene chiamata per risolvere un problema   Per ovviare al problema è possibile

aggiungere una proprietà alla funzione. Tale proprietà rappresenterà la variabile statica NomeFunzione.NomeProprietà


Esempio GeneraUnicoIntero.contatore=0;

//Non è una variabile globale function GeneraUnicoIntero() {

return GeneraUnicoIntero.contatore++; }   Le dichiarazioni di funzione sono elaborate prima che

il codice dello script venga eseguito; di conseguenza, l’assegnamento GeneraUnicoIntero.contatore=0 può comparire nello script prima della definizione della funzione

17 Javascript 1 - caprera.dia.unisa.itcaprera.dia.unisa.it/TSW/MATERIALE/ns/Javascript1.pdf ·...

Documents

Transcript of 17 Javascript 1 - caprera.dia.unisa.itcaprera.dia.unisa.it/TSW/MATERIALE/ns/Javascript1.pdf ·...