Introduzione a JavaScript e jQuery (2/2)

1. Esercitazioni di Sistemi Distribuiti
2014/2015
Javascript e jQuery 2
Giuseppe Vizzari

2. Outline
• Ancora jQuery
– Approfondimento sulla gestione di eventi
– Validazione di form
– Ulteriori esempi di interfacce dinamiche
– Ajax di base
• Un esempio articolato
A.A. 2014/2015 Esercitazioni di Sistemi Distribuiti 2

3. Outline
• Ancora jQuery
– Approfondimento sulla gestione di eventi
– Validazione di form
– Ulteriori esempi di interfacce dinamiche
– Ajax di base
• Un esempio articolato
A.A. 2014/2015 Esercitazioni di Sistemi Distribuiti 3

4. Gestione eventi generalizzata (1)
A.A. 2014/2015 Esercitazioni di Sistemi Distribuiti 4

5. Gestione eventi generalizzata (2)
[...]
<div class="main">
<h1>Introducing Events</h1>
<p><a href="#">A Link</a></p>
<form action="#" method="get">
<fieldset>
<legend>A Form</legend>
<p><input name="button" type="button" id="button" value="A Button"></p>
<p><input name="textfield" id="textfield" type="text"></p></fieldset>
</form>
</div>
[...]
A.A. 2014/2015 Esercitazioni di Sistemi Distribuiti 5

6. Gestione eventi generalizzata (3)
• All’atto del caricamento...
$(document).ready( function() {
[...]
});
• Aggiungiamo alcune reazioni a eventi:
– Cambiamo il “valore” del bottone quando viene effettuato un clic
$('#button').click(function() {
$(this).val("Stop that!");
});
– Cambiamo il colore di sfondo della casella di testo quando viene ‘focalizzata’
$('#textfield').focus(function() {
$(this).css('background-color','red');
});
– Facciamo una alert quando di fa doppio clic ovunque nel documento
$('html').dblclick(function() {
alert('ouch');
});
– Aggiungiamo una riga di testo ogni volta che si passa con il mouse sul link
$('a').mouseover(function() {
var message = "<p>You moused over a link</p>”;
$('.main').append(message);
});
A.A. 2014/2015 Esercitazioni di Sistemi Distribuiti 6

7. Outline
• Ancora jQuery
– Approfondimento sulla gestione di eventi
– Validazione di form
– Ulteriori esempi di interfacce dinamiche
– Ajax di base
• Un esempio articolato
A.A. 2014/2015 Esercitazioni di Sistemi Distribuiti 7

8. Form adattivi (1)
A.A. 2014/2015 Esercitazioni di Sistemi Distribuiti 8

9. Form adattivi (2)
A.A. 2014/2015 Esercitazioni di Sistemi Distribuiti 9
• All’atto del caricamento voglio che il cursore sia posizionato
nella prima text area di input
• Due forme di adattività:
– Se si seleziona il metodo di pagamento PayPal deve essere inibito
il blocco per l’inserimento di dati sulla carta di credito; se per
qualche motivo si cambia idea, però, questi campi devono essere di
nuovo accessibili;
– Se si indica che l’indirizzo si invio è lo stesso rispetto a quello di
fatturazione deve essere semplicemente nascosta l’intero div
shipping

10. Form adattivi (3)
A.A. 2014/2015 Esercitazioni di Sistemi Distribuiti 10
• All’atto del caricamento voglio che il cursore sia posizionato
nella prima text area di input
$(document).ready(function() {
$(':text:first').focus();
}

11. Form adattivi (4)
A.A. 2014/2015 Esercitazioni di Sistemi Distribuiti 11
• Se si seleziona il metodo di pagamento PayPal deve essere inibito
il blocco per l’inserimento di dati sulla carta di credito; se per
qualche motivo si cambia idea, però, questi campi devono essere di
nuovo accessibili
$(document).ready(function() {
// Disable credit card info when PayPal is clicked
$('#paypal').click(function() {
$('#creditCard input').attr('disabled', true);
$('#creditCard input').css('backgroundColor','#CCC');
$('#creditCard label').css('color','#BBB');
}); // end click()
//enable credit card info when Visa/Mscrd is clicked
$('#visa, #mastercard').click(function() {
$('#creditCard input').attr('disabled’, false);
$('#creditCard input').css('backgroundColor','');
$('#creditCard label').css('color','');
$('#cardNumber').focus();
}); // end click()
}

12. Form adattivi (5)
A.A. 2014/2015 Esercitazioni di Sistemi Distribuiti 12
• Se si indica che l’indirizzo si invio è lo stesso rispetto a quello di
fatturazione deve essere semplicemente nascosta l’intero div
shipping
$(document).ready(function() {
//hide shipping info
$('#hideShip').click(function() {
//check to make sure field is checked
if ($(this).attr('checked')) {
$('#shipping').slideUp('fast');
} else {
$('#shipping').slideDown('fast');
}
}); // end click()
}

13. Validazione dati da form con il plugin
validate (1)
A.A. 2014/2015 Esercitazioni di Sistemi Distribuiti 13

14. Validazione dati da form con il plugin
validate (2)
A.A. 2014/2015 Esercitazioni di Sistemi Distribuiti 14
http://plugins.jquery.com/

15. Validazione dati da form con il plugin
validate (3)
A.A. 2014/2015 Esercitazioni di Sistemi Distribuiti 15
<style>
#signup .indent label.error {
margin-left: 0;
}
#signup label.error {
font-size: 0.8em;
color: #F00;
font-weight: bold;
display: block;
margin-left: 215px;
}
#signup input.error, #signup select.error {
background: #FFA9B8;
border: 1px solid red;
}
</style>
<script src="../_js/jquery-1.7.2.min.js"></script>
<script src="../_js/jquery.validate.min.js"></script>

16. Validazione dati da form con il plugin
validate (4)
A.A. 2014/2015 Esercitazioni di Sistemi Distribuiti 16
• Controlli da realizzare:
– email necessaria (e strutturalmente corretta...);
– password necessaria, tra gli 8 e 16 caratteri;
– le password inserite nei due campi devono essere identiche
– la data dev’essere espressa in un formato MM/DD/YYYY
(attenzione, formato americano...)

17. Validazione dati da form con il plugin
validate (5)
A.A. 2014/2015 Esercitazioni di Sistemi Distribuiti 17
• Al solito, quando la pagina è ‘ready’, diciamo che bisogna
aggiungere una funzione validate alla form
$(document).ready(function() {
$('#signup').validate({
[...]
}); // end validate
}); // end ready
• All’interno del blocco della validate è possibile specificare, in
aggiunta a regole di default (il formato di input di tipo data, per
fare un esempio) particolari regole specifiche per il form

18. Validazione dati da form con il plugin
validate (6)
A.A. 2014/2015 Esercitazioni di Sistemi Distribuiti 18
• Regole speciali da inserire nel blocco dopo validate:
rules: {
email: {
required: true,
email: true
},
password: {
required: true,
rangelength:[8,16]
},
confirm_password: {equalTo:'#password’}
}, //end rules
messages: {
email: {
required: "Please supply an e-mail address.",
email: "This is not a valid email address.”
},
password: {
required: 'Please type a password',
rangelength: 'Password must be between 8 and 16 characters long.’
},
confirm_password: {
equalTo: 'The two passwords do not match.’
}
}, // end messages

19. Validazione dati da form con il plugin
validate (7)
A.A. 2014/2015 Esercitazioni di Sistemi Distribuiti 19
• Ultima nota, posizionamento dei messaggi di errore:
rules: {
[...]
}, //end rules
messages: {
[...]
}, // end messages
errorPlacement: function(error, element) {
if ( element.is(":radio") || element.is(":checkbox")) {
error.appendTo( element.parent());
} else {
error.insertAfter(element);
}
}

20. Outline
• Ancora jQuery
– Approfondimento sulla gestione di eventi
– Validazione di form
– Ulteriori esempi di interfacce dinamiche
– Ajax di base
• Un esempio articolato
A.A. 2014/2015 Esercitazioni di Sistemi Distribuiti 20

21. Tooltip
A.A. 2014/2015 Esercitazioni di Sistemi Distribuiti 21

22. Gallery
A.A. 2014/2015 Esercitazioni di Sistemi Distribuiti 22

23. Gallery con il plugin FancyBox
A.A. 2014/2015 Esercitazioni di Sistemi Distribuiti 23

24. Gallery con il plugin AnythingSlider
A.A. 2014/2015 Esercitazioni di Sistemi Distribuiti 24

25. Menu con il plugin Navigation
A.A. 2014/2015 Esercitazioni di Sistemi Distribuiti 25

26. Outline
• Ancora jQuery
– Approfondimento sulla gestione di eventi
– Validazione di form
– Ulteriori esempi di interfacce dinamiche
– Ajax di base
• Un esempio articolato
A.A. 2014/2015 Esercitazioni di Sistemi Distribuiti 26

27. Ajax di base – caricare dati da una
pagina (1)
A.A. 2014/2015 Esercitazioni di Sistemi Distribuiti 27

28. Ajax di base – caricare dati da una
pagina (2)
A.A. 2014/2015 Esercitazioni di Sistemi Distribuiti 28
<body>
<div class="wrapper">
<div class="header”> [..] </div>
<div class="content">
<div class="main">
<h1>News Headlines</h1>
<ul id="newslinks">
<li><a href="today.html">Today&#8217;s News</a></li>
<li><a href="yesterday.html">Yesterday&#8217;s News</a></li>
<li><a href="lastweek.html">Last Week&#8217;s News</a></li>
</ul>
<div id="headlines"></div>
</div>
</div>
<div class="footer”> [...] </div>
</div>
</body>

29. Ajax di base – caricare dati da una
pagina (3)
A.A. 2014/2015 Esercitazioni di Sistemi Distribuiti 29
<style>
#newslinks li {
display: inline-block;
margin-right: 20px;
}
#newslinks li a {
padding: 5px 10px;
background-color: white;
color: black !important;
text-decoration: none;
}
#newslinks li a:hover {
background-color: rgb(110,138,195);
color: white !important;
}
#headlines #newsItem {
margin-top: 10px;
padding: 20px;
border: 1px solid white;
}
</style>

30. Ajax di base – caricare dati da una
pagina (4)
A.A. 2014/2015 Esercitazioni di Sistemi Distribuiti 30
(struttura di una pagina esterna...)
<div class="main">
<div id="newsItem">
<h2 class="shadowLine">Last week&#8217;s News</h2>
<h3>Ad minim veniam</h3>
<p>Quis nostrud exercitation ut labore et dolore magna aliqua. Sed do eiusmod tempor incididunt
cupidatat non proident, duis aute irure dolor. Consectetur adipisicing elit, velit esse cillum
dolore ut aliquip ex ea commodo consequat. Ullamco laboris nisi ut enim ad minim veniam. Ut enim ad
minim veniam, lorem ipsum dolor sit amet, ut labore et dolore magna aliqua.</p>
<h3> Duis aute irure dolor</h3>
<p> ut labore et dolore magna aliqua. Sed do eiusmod tempor incididunt cupidatat non proident, duis
aute irure dolor. Consectetur adipisicing elit, velit esse cillum dolore ut aliquip ex ea commodo
consequat. Ullamco laboris nisi ut enim ad minim veniam. Ut enim ad minim veniam, lorem ipsum dolor
sit amet, ut labore et dolore magna aliqua. ut labore et dolore magna aliqua. Sed do eiusmod tempor
incididunt cupidatat non proident, duis aute irure dolor. Consectetur adipisicing elit, velit esse
cillum dolore ut aliquip ex ea commodo consequat. Ullamco laboris nisi ut enim ad minim veniam. Ut
enim ad minim veniam, lorem ipsum dolor sit amet, ut labore et dolore magna aliqua.</p>
<p> Labore et dolore magna aliqua. Sed do eiusmod tempor incididunt cupidatat non proident, duis
aute irure dolor. Consectetur adipisicing elit, velit esse cillum dolore ut aliquip ex ea commodo
consequat. Ullamco laboris nisi ut enim ad minim veniam. Ut enim ad minim veniam, lorem ipsum dolor
sit amet, ut labore et dolore magna aliqua.</p>
</div>
</div>

31. Ajax di base – caricare dati da una
pagina (5)
A.A. 2014/2015 Esercitazioni di Sistemi Distribuiti 31
<script src="../_js/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function() {
$('#newslinks a').click(function() {
var url=$(this).attr('href');
$('#headlines').load(url + ' #newsItem');
return false;
}); //end click
}); // end ready
</script>

32. Ajax di base – setInterval (1)
A.A. 2014/2015 Esercitazioni di Sistemi Distribuiti 32

33. Ajax di base – setInterval (2)
<script src="../_js/jquery-1.7.2.min.js"></script>
<script>
setInterval(
function (){
var currentdate = new Date();
var datetime = "Last update: " + currentdate.getDate() + "/"
+ (currentdate.getMonth()+1) + "/"
+ currentdate.getFullYear() + " @ "
+ currentdate.getHours() + ":"
+ currentdate.getMinutes() + ":"
+ currentdate.getSeconds();
$('div.container').append('<p>'+ datetime + '</p>');
}
, 5000);
</script>
A.A. 2014/2015 Esercitazioni di Sistemi Distribuiti 33

34. Ajax di base – Google Maps (1)
A.A. 2014/2015 Esercitazioni di Sistemi Distribuiti 34

35. Ajax di base – Google Maps (2)
A.A. 2014/2015 Esercitazioni di Sistemi Distribuiti 35
<body onload="initialize()">
<div class="wrapper">
<div class="header”> [...] </div>
<div class="content">
<div class="main">
<h1>Google Maps</h1>
<div id="map"></div>
<div>
<p>Address:<br>
<input id="address" type="textbox" style="width: 755px;" value="Piazza della Scienza, 20126 Milano,
Italy"></p>
<p>Notes:<br>
<input id="note" type="textbox" style="width: 755px;" value="Piazza della Scienza, Università degli
Studi di Milano-Bicocca."></p>
<input type="button" value="Cerca" onclick="codeAddress()">
<br><br><br>
</div>
</div>
</div>
<div class="footer”> [... ] </div>
</div>
</body>

36. Ajax di base – Google Maps (3)
A.A. 2014/2015 Esercitazioni di Sistemi Distribuiti 36
<script src="../_js/jquery-1.7.2.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=MYGOOGLEMAPSKEY&sensor=false"></script>
<script>
var map;
var geocoder;
var marker = null;
var infowindow = new google.maps.InfoWindow();
function initialize() {
geocoder = new google.maps.Geocoder();
var mapOptions = {
center: new google.maps.LatLng(45.4640, 9.1916),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"),
mapOptions);
}
</script>

37. Ajax di base – Google Maps (4)
A.A. 2014/2015 Esercitazioni di Sistemi Distribuiti 37
<script>
function codeAddress() {
var address = document.getElementById("address").value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
map.setZoom(15);
if(marker === null){
marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
}
else {
marker.setPosition(results[0].geometry.location);
}
marker.setTitle(document.getElementById("note").value);
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(document.getElementById("note").value);
infowindow.open(map, marker);
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
</script>

38. Ajax di base – IMDB (1)
A.A. 2014/2015 Esercitazioni di Sistemi Distribuiti 38

39. Ajax di base – IMDB (2)
A.A. 2014/2015 Esercitazioni di Sistemi Distribuiti 39
<body>
<div class="wrapper">
<div class="header"> [...] </div>
<div class="content">
<div class="main">
<h1>IMDB Search</h1>
<div>
<p>Film title:<br>
<input id="title" type="textbox" style="width: 750px;"></p>
<input id="search" type="button" value="Search">
</div>
<h2>Title</h2>
<h3>Plot</h3>
<div class='plot'></div>
<h3>IMDb rating</h3>
<div class='rating'></div>
</div>
</div>
<div class="footer”> [...] </div>
</div>
</body>

40. Ajax di base – IMDB (3)
A.A. 2014/2015 Esercitazioni di Sistemi Distribuiti 40
<script src="../_js/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function() {
$("#search").click(function() {
var title = $("#title").val();
var URL = "http://www.omdbapi.com/";
var ajaxURL = URL + "?t=" + title;
$.getJSON(ajaxURL,function(data) {
$.each(data, function(i) {
$('h2').text(data[i].title);
$("div.plot").empty();
if(($.getJSON(ajaxURL,function(data) {
$('h2').text(data.Title);
$("div.plot").empty();
if((data.Plot !== undefined)&&(data.Plot !== null))
$("div.plot").html('<p>' + data.Plot + '</p>');
else
$("div.plot").html('<p>No plot on IMDb.</p>');
$("div.poster").empty();
if((data.Poster!==undefined)&&(data.Poster!==null))
$("div.poster").html("<img src="" + data.Poster + "" align="left"
height="300">");
$("div.rating").empty();
if((data.imdbRating !== undefined)&&(data.imdbRating !== null))
$("div.rating").html('<p>' + data.imdbRating + ' out of 10.</p>');
else
$("div.plot").html('<p>No rating on IMDb.</p>');
}); // end get JSON
}); // end click
}); // end ready

41. Ajax di base – Flickr
A.A. 2014/2015 Esercitazioni di Sistemi Distribuiti 41