Diapositiva 1 - Dipartimento di Scienze Ambientali, Informatica e

Transcript

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.
Jav aScript
PHP Page
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.
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.
Esempio di albero DOM
DOM
Jav aScript
JavaScript - Esempio
•
Il WebBrowser mette a disposzione dello script alcuni metodi e
alcuni oggetti di default con cui interagire.
<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>
Visualizza nel browser
•
L’oggetto document rappresenta il body della pagina HTML.
•
La funzione alert fa apparire un popup di avviso
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:
<html>
<head>
…
<script type="text/javascript" src="scripts/myLibrary.js"></script>
</head>
<body>
<script type="text/javascript">myfunction("mondo!");</script>
</body>
</html>
myScript.js
function myfunction(testo)
{
alert("Ciao "+testo);
}
ATTENZIONE: all’interno del file .js non va usato il tag <SCRIPT>
•
Esistono diverse librerie per JavaScript (e.g. jQuery)
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)
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 []
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>
Output:
undefined - undefined - undefined - undefined - undefined undefined - undefined - undefined - 6 [object HTMLDocument]1 - ciao1 - 6 - 1 -
JavaScript – Operatori e controllo del flusso
Operatori e istruzioni di controllo e condizionali sono quelle
standard di c++/Java:
•Operatori sui numeri: +, -, *, /, ++, --, +=, …
•Concatenazione stringhe: +
•Comparazione: ==, !=, <, >, <=, >=, ===, !== (valore e tipo)
•Logici: &&, ||, !
• Condizionali e cicli:
– if(condition) {…}
var i=0;
document.write("<table>");
else {…}
while(i++ < 10)
– cond?valtrue:valfalse
{
document.write("<tr>");
– while(condition){…}
for(var j=1; j<=10; j++)
if(i!=1 && j!=1)
– do {…} while (condition)
document.write("<td class='",
– for(i=0; i<n; i++) {…}
i==j?"red":"","'>",i*j,"</td>");
else
document.write("<td class='bold'>",i*j,"</td>");
document.write("</tr>");
}
Visualizza nel
document.write("</table>");
</script>
browser
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));
• 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
2+3=5
2+3=23
undefined
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.
function test1(val)
{
x = 10 + val;
return x;
}
function test2(val)
{
var x = 10 + val;
return x;
}
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
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/
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'], "=>" ,
document.write("<ul>");
for(child in node.childNodes)
exploreDOM(node.childNodes[child]);
document.write("</ul></li>");
node.attributes[i]['value'], ", ");
}
}
document.write("<ul>");
exploreDOM(document.getElementsByTagName("body")[0]);
document.write("</ul>");
</script>
</body>
•BODYDIV id=>el1,
Output
•
IMG src=>noimg.png, alt=>Nessuna Immagine,
•DIV id=>el2,
•BR
•SCRIPT type=>text/javascript,
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
<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>
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.
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>
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.
Visualizza
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>
•
nel browser
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.
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).
<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
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.
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.
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>
ATTENZIONE: per motivi di sicurezza il browser potrebbe impedire di effettuare una
richiesta al di fuori del dominio corrente
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)
<?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>
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>
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)
function processJSON(jsonDoc)
{
{
users:
[ {"name": "Luca", surname: "Cosmo", email: "[email protected]" },
var users = eval(jsonDoc);
{"name": "Renzo", surname: "Orsini", email: "[email protected]" }
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);
}
}
• La funzione eval serve ad eseguire come script JavaScript una
qualsiasi stringa
• Valutare un file Json significa costruirne l’oggetto corrispondente
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

Diapositiva 1 - Dipartimento di Scienze Ambientali, Informatica e

Transcript

Documenti analoghi

Reindirizzamento di Url

Verifica HTML-Javascript

Lezione I Lezione II Lezioni III Lezioni IV Lezione V Lezione VI

Integrazione FastBooking Hotel

Pagina 1 di 1 JavaScript Utility Software Suite informatore: Ultima

Esercitazione Calcolo numerico - n. 1 Javascript - Octave

Terza Stefano - itis magistri cumacini

javascript area del triangolo

Test sulle conoscenze in JAVASCRIPT

WebDesign Javascript - Dipartimento Politecnico di Ingegneria e