rich ajax web interfaces in jquery
TRANSCRIPT
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