basi di dati jvascript, ajaxcosmo/material/javascript/javascript.pdf · jvascript, ajax luca cosmo...

Basi di Dati

Jvascript, AJAX

Luca Cosmo

[email protected]

Dipartimento di Scienze Ambientali, Informatica e Statistica

Università Ca’ Foscari di Venezia, Italia

JavaScript

• HTML: pagine statiche! L’unica azione possibile è quella di

richiedere un’altra pagina.

• Per sviluppare della pagine dinamiche/interattive è necessario

poterne programmare il comportamento.

Javascript:

• Linguaggio di scripting.

• Può essere incluso nelle pagine HTML inserendolo tra i tag:

<script type="text/javascript"> ... </script>

• Il WebBrowser al caricamento della pagina esegue il codice e

integra il risutlato dinamico dello script con il contenuto statico

della pagina HTML.

PHP PageJavaScript

JavaScript

Dynamic HTML (DHTML): Integrazione delle tecnologie HTML,

CSS, e linguaggio di scripting (JavaScript) per rendere le pagine

HTML interattive e dinamiche.

Utilizzi:

• Interazione locale con l’utente (bottoni, elementi cliccabili…)

• Validazione di Form

• Animazioni (fade-in, rollovers, …)

• AJAX - Asynchronous JavaScript and XML: permette di caricare parte

del contenuto della pagina dinamicamente.

• …

Limitazioni:

• Il codice è in chiaro, può essere facilmente modificato

• Per problemi di sicurezza l’accesso alle risorse locali è limitato

(e.g. no accesso all’HD)

• …

JavaScript - Storia

• Sviluppato originariamente da Netscape nel 1995 co il nome di

Mocha -> LiveScript -> JavaScript

• Microsof sviluppa la propria versione di JavaScript, Jscipt, nel

1996.

• Processo di standardizzazione affidato a ECMA (European

Computer Manufacturers Association ). Nel 1998 viene

rilasciata la prima versione dello standard ECMA-262

(EcmaScript).

• Tra i diversi browser (e versioni) ci sono differenze di

implementazioni e comportamento.

JavaScript – Caratteristiche

• JavaScript != Java

– Deriva da C

– Debolmente tipizzato

– Debolmente orientato agli oggetti

• Linguaggio interpretato (non viene compilato)

• Trasferito ed eseguito «client side»

• Usato come linguaggio di scripting:

– viene eseguito dentro un altro ambiente (WebBrowser, PDF, …)

– Interagisce con l’ambiente ospitante tramite alcuni API

(e.g. accesso agli elementi della pagina web)

JavaScript e i WebBrowser

• Il codice HTML ricevuto viene trasformato nella corrispondente

oggetto DOM (Document Object Model).

• DOM: rappresentazione della struttura della pagina come un

albero di oggetti, ognuno con i propri attributi e metodi.

• Il WebBrowser mette a disposizione le API per interagire con il

DOM del documento.

JavaScriptDOM

Esempio di albero DOM

JavaScript - Esempio

• Il WebBrowser mette a disposzione dello script alcuni metodi e

alcuni oggetti di default con cui interagire.

Visualizza nel browser

• L’oggetto document rappresenta il body della pagina HTML.

• La funzione alert fa apparire un popup di avviso

<html>

<head>

…

</head>

<body>

Hello

<script type="text/javascript">

//Prima di modificare il contenuto apparirà un popup di avviso

alert("Sto per modificare il contenuto!");

document.write(“<strong>World!</strong>");

</script>

</body>

</html>

esempio1.html

JavaScript – Librerie

Potrebbe essere utile definire un set di funzioni (libreria) usate in

più pagine in un file separato.

Possiamo importare dei file con codice JavaScript:

ATTENZIONE: all’interno del file .js non va usato il tag <SCRIPT>

• Esistono diverse librerie per JavaScript (e.g. jQuery)

<html>

<head>

…

<script type="text/javascript" src="scripts/myLibrary.js"></script>

</head>

<body>

<script type="text/javascript">myfunction("mondo!");</script>

</body>

</html>

function myfunction(testo)

{

alert("Ciao "+testo);

}

myScript.js


esempio2.html

JavaScript – Tipi e variabili

Solo tre tipi "primitivi":

• Stringhe: "foo" 'bar' "I said 'hi'" ""

• Numeri: 12 3.14159

• Booleani: true false


<html>

<head>

…

</head>

<body>


var n = 27;

x = 12.3;

s = "Numero: ";

document.write(s+12.3);

document.write("<br> Esadecimale:

"+n.toString(16));

s = false;

document.write("<br>Boolean: "+s);

var dieci = "10";

document.write("<br>Somma: "+(x-dieci));

</script>

</body>

</html>

o Per dichiarare una variabiile si scrive var nomevariabile.

o Non è necessario dichiarare

le variabili (globali).

o Le variabili non hanno tipo.

o I tipi primitivi sono convertiti

all’occorrenza in oggetti.

o Se ritenuto necessario viene

effettuata una conversione

automatica (eg. stringa <->

numero)

esempio3.html

esempio3.html

JavaScript – Array • In java gli array sono dinamici

• Gli array sono un tipo particolare di oggetto (hanno dei metodi

e attributi), per esempio: – myarray.length è una proprietà che contiene la lunghezza dell’array

– myarray.reverse() è un metodo che inverte l’ordine degli elementi

• Gli elementi non devono essere necessariamente omogenei • Un elemento di un array si accede con l’operatore []

Output:

undefined - undefined - undefined - undefined - undefined -

undefined - undefined - undefined - 6 - [object HTMLDocument]1 - ciao1 - 6 - 1 -


array1 = new Array(5);

array2 = new Array(); array2[3] = 6;

array3 = [0,5,'ciao',document]; array3.reverse();

for(i=0; i<array1.length; i++) document.write(array1[i]," - "); //<br>

for(i=0; i<array2.length; i++) document.write(array2[i]," - "); //<br>

for(i=0; i<array3.length; i++) document.write(array3[i]+1," - "); //<br>

</script>

JavaScript – Funzioni Le funzioni in JavaScipt:

• non hanno un tipo di ritorno

• i parametri in ingresso non hanno tipo

• gli argomenti sono passati o per valore (se primitivi), o per riferimento (se oggetti).

function mySumFunction(a,b)

{

return a + b;

}

function myVoidFunction(myArray)

{

myArray.push("3")

}

a = 2; b = 3;

alert(a+"+"+b+"="+mySumFunction(a,b));

alert(a+"+"+b+"="+mySumFunction(a,"3"));

myArray = [];

alert(myVoidFunction(myArray));


2+3=5

2+3=23

undefined

• Il tipo di ritorno dipende

dinamicamente dai parametri

in ingresso

• Se l’uscita da una funzione

non deriva un’istruzione return statement» il valore

ritornato è undefined

esempio7.html

JavaScript – Funzioni e Scope • Le variabili dichiarate all’interno di una funziona (con var)

sono locali.

• Le variabili dichiarate fuori da una funzione o non dichiarate

sono globali.

var x = 20;

y = test1(x);

document.write(x + " + " + 10 + " = " + y + "<br>");

var x = 20;

y = test2(x); document.write(x + " + " + 10 + " = " + y);

30 + 10 = 30

20 + 10 = 30

function test1(val)

{

x = 10 + val;

return x;

}

function test2(val)

{

var x = 10 + val;

return x;

}


esempio8.html

JavaScript – Oggetti

• Gli oggetti in JavaScript sono un tipo speciale di dato che

possiede attributi e metodi. • Per creare un nuovo oggetto si usa la keyword new:

– oggi = new Date();

– ieri = new Date(“April 22, 2013“);

– elementi = new Array();

• Possiamo accedere agli attributi

– elementi.length

• E ai metodi:

– oggi.getDate();

– ieri.setMonth(1);

• Anche i tipi «primitivi» possiedono attributi e metodi: – (9999).toPrecision(2);

– "ciao".length

• In realtà gli oggetti in JavaScript sono molto più complicati…

Ci limiteremo ad usare Classi e Oggetti messi a disposizione nativamente (eg l’oggetto document, le classi Array, Date,

Math, …). • http://dmitrysoshnikov.com/ecmascript/javascript-the-core/


http://dmitrysoshnikov.com/ecmascript/javascript-the-core/






esempio9.html

JavaScript – Navigare il Dom • È possibile navigare e selezionare gli elementi del DOM come

fosse un albero

<body>

<div id="el1"><img src="noimg.png" alt="Nessuna Immagine"></div>

<div id="el2">Ciao sono l'el2</div><br>


function exploreDOM(node)

{

if(node.tagName)

{

if(node.tagName=='UL') return;

document.write("<li>", node.tagName, " ");

for(i=0; i< node.attributes.length; i++)

document.write(node.attributes[i]['name'], "=>" , node.attributes[i]['value'], ", ");

document.write("<ul>");

for(child in node.childNodes)

exploreDOM(node.childNodes[child]);

document.write("</ul></li>");

}

}

document.write("<ul>");

exploreDOM(document.getElementsByTagName("body")[0]);

document.write("</ul>");

</script>

</body> •BODYDIV id=>el1,

• IMG src=>noimg.png, alt=>Nessuna Immagine,

•DIV id=>el2,

•BR

•SCRIPT type=>text/javascript,

Output


esempio6b.html

JavaScript – Selezionare e modificare • È possibile selezionare alcuni particolari elementi all’interno del

file HTML (o meglio alcuni oggetti del suo DOM)

• È possibile modificare il DOM inserendo, eliminando o

modificando i suoi nodi.

• Per modificare il codice HTML contenuto all’interno di un elemento possiamo accedere alla proprietà innerHTML

o getElementById(id) è un

medoto di document che

restituisce l’elemento del DOM a cui

è associato l’id passato o getElementsByTagName(tag)

di document restituisce una lista

con tuttti gli elmenti del DOM aventi

il particolare tag.

<body>

<div id="el1"></div>

<div id="el2"></div>


divs = document.getElementsByTagName("div");

for(var el in divs)

divs[el].innerHTML = "CIAO!";

var divelement =

document.getElementById("el1");

divelement.innerHTML = "Sono un " +

divelement.tagName + " e il mio id è " +

divelement.attributes['id']['value'];

divelement.innerHTML +=

"<input type='button' value='B1'>";

var btn=document.createElement("BUTTON");

var t=document.createTextNode("B2");

btn.appendChild(t);

divelement.appendChild(btn);

</script>

</body> Visualizza nel browser

esempio6a.html

JavaScript – Eventi • In JavaScript è possibile associare a degli eventi l’esecuzione

di alcune funzioni.

• Questi eventi sono predefiniti e vengono «chiamati» dal web

browser.

• Generalmente sono associati all’interazione dell’utente con gli

elementi della pagina: – onclick: viene eseguito quando un elemento viene cliccato – onmouseover, onmouseout

– onchange: viene eseguito quando il contenuto di un elemento cambia (e.g.

input) – onload: viene eseguito alla fine del caricamento di una pagina

<head>

. . .


function initialize()

{

alert("Pagina caricata");

document.getElementsByTagName("body")[0].innerHTML = "LOADED";

}

</script>

</head>

<body onLoad="initialize()">

Loading...

</body>

</html> Visualizza nel browser

esempio10.html

JavaScript – Eventi • La funzione associata ad un evento si può specificare nel

codice come attributo degli elementi HTML.

• é possibile associare una funzione ad un evento come attributo

nel DOM dell’elemento.

• ATTENZIONE: all’interno di una funzione la variabile this fa

riferimento all’oggetto chiamante. Nel caso degli eventi HTML

è l’elemento che ha generato l’evento.


function duplicate()

{

img = document.createElement('img');

img.src = "smile.jpg";

img.onmouseover = duplicate;

document.getElementsByTagName('body')[0].appendChild(img);

}

</script>

</head>

<body onLoad="">

<input type="button" value="ClickMe please!">

onclick="alert('Yesss'); this.value='Again Please!'" <br>

<img src="smile.jpg" onmouseover="duplicate()"> </body>


esempio11.html

JavaScript – Timing • window.setInterval permette di richiamare delle funzioni a

determinati intervalli: h = window.setInterval(myfunction,milliseconds);

• window.clearInterval(h) fa terminare il richiamo automatico.

• window.setTimeout permette, in modo analogo, di pianificare

l’esecuzione di una funzione tra un certo periodo di tempo (una volta sola).

• window.location.reload() ordina al browser di ricaricare la pagina corrente

• È possibile inserire direttamente dei comandi JavaScript come stringa invece di

usare una funzione come delegate.

<head>

. . .


var i=0;

function initialize() {

window.setInterval(conta,100);

window.setTimeout("window.location.reload()",2000);

}

function conta() { document.getElementById('conta').innerHTML+=i+++'<br>'; }

</script>

</head>

<body onLoad="initialize()">

<div id="conta"></div>

</body> Visualizza nel browser

esempio12.html

JavaScript – AJAX Modello classico:

Ogni volta che l’utente ha bisogno di nuovi dati:

1. le informazioni relative alla richiesta dell’utente vengono

mandate al server tramite una richiesta HTML (e.g. form per la

ricerca)

2. Il server elabora la richiesta e invia una nuova pagina HTML

contenente le informazioni richieste.

JavaScript – AJAX

Asynchronous JavaScript and XML

• Tecnica di sviluppo di pagine web

• Prevede lo scambio di dati tra pagina web dinamica e web

server in «background».

• I dati acquisiti in background vengono visualizzati nella pagina

dinamicamente, attraverso la modifica del DOM.

VANTAGGI:

+ Minor utilizzo rete ( vengono scambiati solo i dati )

+ Interazione più naturale, simile alle applicazioni classiche

JavaScript – XMLHttpRequest

La comunicazione asincrona con il Web Server avviene mediante

l’utilizzo dell’oggetto XMLHttpRequest.

ATTENZIONE: per motivi di sicurezza il browser potrebbe impedire di effettuare una

richiesta al di fuori del dominio corrente


function loadXMLDoc()

{

var xmlhttp;

// code for IE7+, Firefox, Chrome, Opera, Safari

if (window.XMLHttpRequest)

xmlhttp=new XMLHttpRequest();

else // code for IE6, IE5

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

xmlhttp.onreadystatechange=function()

{

if (xmlhttp.readyState==4 && xmlhttp.status==200)

document.write(xmlhttp.responseText);

}

xmlhttp.open("GET","hello.txt",true);

xmlhttp.send();

}

</script> Visualizza nel browser

http://www.dsi.unive.it/~cosmo/javascript/esempio13.html

JavaScript – XML L’utilizzo classico di AJAX prevede lo scambio di dati in formato XML L’attributo responseXML dell’oggetto XMLHttpRequest contiene il

DOM dell’XML restituito dal server (null se l’XML non è valido)

processXMLDOM(xmlhttp.responseXML.documentElement)

function processXMLDOM(xmlDoc)

{

var users = xmlDoc.getElementsByTagName("user");

for(var i=0; i<users.length; i++)

{

var user = users[i];

var row = document.createElement("tr");

row.innerHTML =

"<td>"+user.getElementsByTagName("name")[0].firstChild.nodeValue+

"</td><td>"+user.getElementsByTagName("surname")[0].firstChild.nodeValue+

"</td><td>"+user.getElementsByTagName("email")[0].firstChild.nodeValue+"</td>";

document.getElementById("users").appendChild(row);

}}

<table id="users">

<tr><th>Nome</th><th>Cognome</th><th>Email</th></tr>

</table>


<?xml version="1.0" encoding="ISO-8859-1"?>

<root>

<user>

<name>Luca</name>

<surname>Cosmo</surname>

<email>[email protected]</email>

</user>

<user>

<name>Renzo</name>

<surname>Orsini</surname>

<email>[email protected]</email>

</user> </root>


JavaScript – JSON Mediante un XMLHttpRequest posso trasferire file testuali di

qualsiasi formato (testo semplice, HTML, XML, ….)

JavaScript Object Notation

• I dati sono strutturati nello stesso modo in cui si creano gli

oggetti «anonimi» in JavaScript.

processJSON(xmlhttp.responseText)

• La funzione eval serve ad eseguire come script JavaScript una

qualsiasi stringa

• Valutare un file Json significa costruirne l’oggetto corrispondente

function processJSON(jsonDoc)

{

var users = eval(jsonDoc);

for(var i=0; i<users.length; i++)

{

var user = users[i];

var row = document.createElement("tr");

row.innerHTML =

"<td>"+user.name+"</td><td>"+user.surname+"</td><td>"+user.email+"</td>";

document.getElementById("users").appendChild(row);

}

} Visualizza nel browser

{

users:

[ {"name": "Luca", surname: "Cosmo", email: "[email protected]" },

{"name": "Renzo", surname: "Orsini", email: "[email protected]" }

]

};


JavaScript – jQuery

jQuery is a JavaScript Library.

jQuery greatly simplifies JavaScript programming.

jQuery is easy to learn.

LINK UTILI:

http://jquery.com/ http://www.w3schools.com/jquery/default.asp

http://jquery.com/

http://jquery.com/

http://www.w3schools.com/jquery/default.asp

basi di dati jvascript, ajaxcosmo/material/javascript/javascript.pdf · jvascript, ajax luca cosmo...

Documents