Introduzione a JavaScript e jQuery (2/2)

Esercitazioni di Sistemi Distribuiti2014/2015

Javascript e jQuery 2

Giuseppe Vizzari

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





Gestione eventi generalizzata (1)


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>[...]


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);

});






Form adattivi (1)


Form adattivi (2)


• 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

Form adattivi (3)


• All’atto del caricamento voglio che il cursore sia posizionato nella prima text area di input

$(document).ready(function() {$(':text:first').focus();

}

Form adattivi (4)


• 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()

}

Form adattivi (5)


• 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()

}

Validazione dati da form con il plugin validate (1)




http://plugins.jquery.com/

http://plugins.jquery.com/



<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>



• 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...)



• 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



• 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 rulesmessages: {

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



• Ultima nota, posizionamento dei messaggi di errore:rules: {

[...]}, //end rules

messages: {[...]

}, // end messageserrorPlacement: function(error, element) {

if ( element.is(":radio") || element.is(":checkbox")) {error.appendTo( element.parent());

} else {error.insertAfter(element);

}}





Tooltip


Gallery


Gallery con il plugin FancyBox


Gallery con il plugin AnythingSlider


Menu con il plugin Navigation






Ajax di base – caricare dati da una pagina (1)




<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’s News</a></li><li><a href="yesterday.html">Yesterday’s News</a></li><li><a href="lastweek.html">Last Week’s News</a></li></ul><div id="headlines"></div></div></div><div class="footer”> [...] </div></div></body>



<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>



(struttura di una pagina esterna...)

<div class="main">

<div id="newsItem"><h2 class="shadowLine">Last week’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>



<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>

Ajax di base – setInterval (1)


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>


Ajax di base – Google Maps (1)




<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>



<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>



<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>

Ajax di base – IMDB (1)




<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>



<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

Ajax di base – Flickr


Education

Introduzione a JavaScript e jQuery (2/2)