PowerPoint Presentation

Rich Ajax Web Interfaces

ALBERTO BUSCHETTU

SUMMARY

Javascript: breve introduzione;

Ajax: la svolta del web 2.0;

Jquery: introduzione;

Jquery: operazioni pi comuni e utili;

UI Jquery;

Casi d'uso e dettagli;

Jquery e Struts;

Guide, books e link utili.

JAVASCRIPT: BREVE INTRODUZIONE

Basato sullo standard ECMAScript (ECMA-262) ed stato creato da Brendan Eich of Netscape;

Loosely typed, prototype based ed interpretato dal browser;

E' un linguaggio funzionale: tratta le funzioni come oggetti;

CODICE JS

JavaScript! ////]]>

DOM (1)

Utilizza il DOM (Document Object Model): rappresentazione dei documenti strutturati come modello orientato ad oggetti;

DOM (2)

Costituito da nodi. I tipi di nodi pi interessanti:Element: elemento dentro una pagina (contiene altri nodi);

Text: il testo dentro un element;

Document: la root della gerarchia DOM (es.: tag html);

Attualmente si usa il livello 2 del DOM;

Il DOM cambia a seconda del layout-engine usato dal browser: Firefox,Camino, Flock, SeaMonkey,.., usano Gecko ;

IE usa Trident;

Safari, Chrome, Konqueror usano WebKit;

http://it.wikipedia.org/wiki/Document_Object_ModelAnche i blank sono dei nodi del DOM (BrowserOM);

My Document

Header

Paragraph

DOM in Html

OGGETTI DI JS

Hanno propriet, eseguono metodi e reagiscono ad eventi;

Window: la finestra del browser, oggetto di default di JS;Document: oggetto document;Location: url della pagina corrente;Navigator: info sul browser;History: oggetto della cronologia;

Forms, Ancors, Links: oggetti html del documento;

Array: var myArray = new Array(4);

String: var myString = "mio nome";

Date: var Data = new Date();

Math: Math.acos(x);

Object, Function, Boolean, RegExp.ps. Undefined, Null, Boolean, Number, and String sono primitive

Quelli definiti dall'utente

OGGETTI definiti dall'utente: Creazione

Notazione compatta

// Literal (curly braces):
var Fish = { name: "",

description :"",

showDescription: function(){alert (this.name.toUpperCase() + " is a tropical fish!");} }var MyFish = Object.create(Fish);MyFish.name="guppy";MyFish.descrizione="Pesce tropicale ....."Uso del costruttore Object (utile se necessita una sola istanza)

// Using the Object constructor:
var profile = new Object();
profile.name = 'Bob';
profile.age = 99;
profile.job = 'Freelance Hitman

Con definizione del costruttore

// costruttore, senza dichiarare un return in modo da restituire l'oggetto appena creato.
function MyObject(parameter1, parameter2)
{
this.property1 = parameter1
this.property2 = parameter2
}
// creazione di un oggetto var myobj = new MyObject('franco', 77)

Funzioni

Le funzioni sono istanze del tipo base Function;

Non necessario scrivere tutti i parametri (arguments[i]) function name(argumentlist) block;

Function statement: var name= function name(argumentlist) block

Function operator: function name(argumentlist) block -->crea un oggetto di tipo Function. Senza nome crea funzione anonima

Function constructor: new Function(strings...)--> corpo della funzione come stringa come parametro (deprecata)

Estendere un oggetto

var Fish = function (name, description) {this.name=name;this.description=description;var peso=0; //propriet privata!};
Fish.prototype.showDescription = function(){$('div.descr').append("Nome:" +this.name + " " + Descrizione:" +this.description+"); }Il prototype una base reference dell'oggetto che serve per tutte le copie figlie dell'oggetto parent; Creo delle propriet pubbliche. In sostanza f l'ereditariet estendendo l'oggetto base;

Sintassi Javascript e Java a confronto

JavaScript

function Impiegato () { this.nome = ""; this.dipartimento = "generale";}Java

public class Impiegato { public String nome; public String dipartimento; public Impiegato () { this.nome = ""; this.dipartimento = "generale"; }}

function Manager () { this.reports = [];}Manager.prototype = new Impiegato;

function Progettista () { this.progetti = [];}Progettista.prototype = new Impiegato;public class Manager extends Impiegato { public String[] reports; public Manager () { this.reports = new String[0]; }}

public class Progettista extends Impiegato { public String[] progetti; public Progettista () { this.progettista = new String[0]; }}

DOM TRAVERSING

Traversing DOM: getter //referenziare un elemento DOM

var myParagraph = document.getElementById('myid');

var content = myParagraph.firstChild.data;

Traversing DOM: settervar newEl = document.createElement(tagname); // tagname: a for