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 del linguaggio
- Linguaggio non tipizzato
- Array e oggetti
- JSON
- Prototipi
- DOM e BOM
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