Javascript

Gregorio Piccoli
Zucchetti spa
Padova, 21 Novembre 2013
Agenda
Javascript è un linguaggio spesso sottovalutato, che nasconde una gande potenza. Contiene concetti fortemente originali, difficile da comprendere con gli occhi di chi è abtuato a linguaggi tradizionali. Lo esploreremo con il seguente percorso:

Le basi
Javascript presenta i tradizionali costrutti di programmazione con una sintassi ispirata al C.
  var i=100,j;
  
  if (i==100) {
    j=200;
  } else {
    s="pippo"
  }  
  for (i=0;i<10;i++)
    j=i*2
  while (i>0) {
    --i
  }    
  
Le basi
Le variabili non hanno tipo. Dichiarando la variabile si definisce a quale scopo appartiene, la dichiarazione è facoltativa.
  var i,j,k;
  var s1,s2;
  i=100
  j=200
  s1="alfa"
  
Le variabili possono cambiare tipo durante la loro vita.
  i=s1+"beto"
  
Le basi
Il linguaggio applica la "type coercion" permettendo in modo molto liberale di mescolare oggetti di tipi diversi.
  var i=100;
  var s;
  s="alfa"+i
  
Se da un lato è molto comodo, errori molto subdoli possono nascondersi in questa possibilità.
  b="true" && false
  
La variabile b sarà una stringa o un booleano?
Le basi
Le funzioni sono un costrutto fondamentale di Javascript.
  var i=100;
  
  function doppio(x){
    var res
    res = x+x
    return res
  }
  
  doppio(2+i)
  doppio("pippo")
  
La mancanza di tipizzazione rende le funzioni molto liberali!
Le basi
Javascript gestisce gli array.
  var a=new Array()
  a.push("alfa")
  a.push("beta")
  if (a[0]=="alfa") 
    for(i=0;i<a.length;i++)
      j=i
  a[2]="gamma"
  a["alfa"]=100
  a["beta"]=200
  
L' indice di un array non è necessariamente un numero, quindi gli array sono anche tabelle di hash.
In Javascript ci sono gli oggetti.
  var o=new Object()
  o.nome="Greg"
  o.cognome="Piccoli"
  o.data=new Date("1961.05.16")
  
In Javascript tutto è un oggetto!
  var o={a:100,b:200}
  o.f=function(x){
    return this.a+x;
  }
  var f=function(x,y){
    return x+y;
  }
  
In Javascript tutto è un oggetto!
  var o={a:100,b:200}
  
La variabile "o" viene creata di tipo oggetto dalla costante in notazione JSON.
In Javascript tutto è un oggetto!
  o.f=function(x){
    return this.a+x;
  }
  
All' istanza di "o" viene aggiunta una funzione.
In Javascript tutto è un oggetto!
  var f=function(x,y){
    return x+y;
  }
  
Alla variabile "f" viene assegnata una funzione anonima.
Funzioni assegnate a variabili e funzioni dichiarate sono la stessa cosa.
  function f1(x,y){
    return x+y;
  }
  var f2=function(x,y){
    return x+y;
  }
  
Chiamata diretta di una funzione anonima con assegnazione del risultato ad una variabile.
  var i=(function(x,y){
    return x+y;
  }(1,2))
  
Nelle funzioni di un oggetto con "this" accedo alle proprietà dell' oggetto stesso.
  var o={
    a:100,
    f:function(x){
      return x+this.a;
    }
  }
  
Una funzione può diventare un costruttore.
  function Persona(n,c){
    this.nome=n
    this.cognome=c
    this.nomecognome=function(){
      return this.nome+" "
         +this.cognome;
  }}
  
Creazione di un oggetto con la funzione costruttore.
  var o
  o=new Persona("Greg","Pic")
  o.nomecognome()
  
Il prototipo e la catena di ereditarietà.
  function Animal(n) {this.n=n}
  Animal.prototype.walk=function(){
    return true;
  }
  function Dog(n){this.n=n}
  Dog.prototype=new Animal()
  
I metodi vegono cercati risalendo la catena dei prototipi.
  o=new Dog('Toby')
  o.walk()
  
In questo modo si ottiene l' ereditarietà.
La ricerca nella catena dei prototipi può essere lenta: per ogni passo della catena viene eseguita una scansione di tutte le proprietà dell' oggetto.
 
  
Referenziare una variabile fuori dallo scopo crea una "closure".
  var x=100;
  function cl(y){
    return function(){
      return x+y
  }}    
  var c=cl(10)
  c()
  
Prototype based
Javascript è un linguaggio basato su prototipi, un "calcolo" che è alla base anche dei sistemi basati su classi: più semplice, più immediato e più potente!
Quello che conta non è la classe ma l' istanza: un oggetto contiene le sue proprietà, i suoi metodi e il riferimento ai suoi prototipi.
Document Object Model
Javascript interagisce con la pagina contenuta nel browser attraverso il modello a oggetti del documento.
  document.body.style.color="red"
  document.getElementById("test")
  document.
    getElementsByTagName("table")
  
Browser Object Model
Javascript interagisce con il browser attraverso il modello a oggetti del browser.
  window.onclick=function(){
    alert('click')
  }
  window.location.href=
    "www.repubblica.it"
  

JavaScript

uno dei migliori
linguaggi di
programmazione
questa presentazione è stata realizzata in javascript