Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
SPIFFY CLIENT-SIDE APIS Going from good to great on the client • Form validation – Very simple validation – Simple jQuery validation – Slick validation with jQuery plugin • Persistence – Cookies – Local storage – Database • APIs for your creative juices – Geolocation – Canvas Form validation • Validation = checking if data values are ok • Crucial for security, reliability and usability – Prevents users from… • Putting evil data into your database • Crashing your web page (e.g., using "Bob" as an int) • Getting confused about why stuff doesn't work right Validate inputs on the client & server • Validation on the client – Help the user to find and fix mistakes fast • Validation on the server – Help protect your database and web app Web server Browser Validate Validate Ultra-simple client-side validation <script> function isValid(frm) { var str = frm.myint.value; var rv = /^\-?[0-9]+$/.test(str); if (!rv) alert("myint should be an int."); return rv; } </script> <form onsubmit="return isValid(this)"> Enter an int: <input type="text" name="myint"> <input type="submit"> </form> Simple validation with jQuery <!DOCTYPE html> <html><head><script src="jquery-1.8.2.min.js"></script></head><body> <script> function isValid(frm) { var str = frm.myint.value; var rv = /^\-?[0-9]+$/.test(str); $("#err").text(rv ? "" : "myint should be an int."); return rv; } </script> <form onsubmit="return isValid(this)"> Enter an int: <input type="text" name="myint"><span id="err"></span> <input type="submit"> </form> </body></html> Declarative validation with jQuery <!DOCTYPE html> <head> <script src="jquery-1.8.2.min.js"></script> <script src="jquery.validate.min.js"></script> <script> $(document).ready(function() { $("#frm").validate(); }); </script> </head> <body> <form id="frm"> Some text: <input class="required" name="mytext"><BR> Some email: <input class="required email" name="myemail"><BR> Some int: <input class="required digits" name="myint"><BR> <input type="submit"> </form> </body> </html> jquery.validate.js • Currently available from – http://jqueryjs.googlecode.com/svn-history/r6243/trunk/plugins/validate/jquery.validate.js • Supported validation classes – – – – – – – – – – – – – – required: This field is required remote: Please fix this field email: Please enter a valid email address url: Please enter a valid URL date: Please enter a valid date number: Please enter a valid number digits: Please enter only digits, creditcard: Please enter a valid credit card number equalTo: Please enter the same value again accept: Please enter a value with a valid extension maxlength: Max # characters allowed minlength: Min # characters allowed max: Max number value allowed min: Min number value allowed If you want to write your own jQuery validation plugin, you may need these APIs $("#elementid").val() – Retrieves the value of some HTML form element $("<span id='myspan'></span>").insertAfter("#elementid") – Creates a span and inserts it after someNode $("#elementid").bind('change', jsFunction); – Registers jsFunction to be called on a change event, such as function jsFunction() {alert($(this).text());} $("#myspan").show() and .hide() – Makes an element visible or invisible $(".myclass").each(someFunction) – Runs someFunction on each item in wrapped set $("div.myclass").get(0) – Gets the first actual DOM node (unwrapped) in the wrapped set Persistence • Data stored on the client side – Provides a means for user-customization – Eliminates the need to retrieve the data off server – Facilitates off-line mode for web sites • Options available to you – Cookies; short strings, automatically copied to server – Local storage: short strings, not automatically copied – Database: structured data, not automatically copied Persistence with cookies • You can set a string and then retrieve it again later on (e.g., when user reloads the page) – You can control when the cookie expires. • The strings will also automatically be included in messages to servers in a specified domain – That way, your server programs (e.g., PHP) also have access to this data, automatically. – Just as some browsers disallow AJAX calls to a file system, browsers may "forget" cookies that are set by HTML pages served from the file system. Cookie example (use Firefox) <!DOCTYPE html> <head> <script src="jquery-1.8.2.min.js"></script> <script src="jquery.cookie.js"></script> <script> $(document).ready(function() { var currentCount = $.cookie("countx"); var countAsNumber = parseFloat(currentCount); countAsNumber = isNaN(countAsNumber) ? 1 : countAsNumber+1; $.cookie("countx", countAsNumber, {expires: 365}); $("#counter").text(countAsNumber); }); </script> </head> <body> <div id="counter"></div> </body> </html> Persistence with local data • You can store data on the user's hard drive, then retrieve it later on. • Such data is not automatically sent to servers – Which can be very nice from a security standpoint – But note: As with cookies and client databases, all local data is stored unencrypted. localStorage example <!DOCTYPE html> <head> <script src="jquery-1.8.2.min.js"></script> <script> $(document).ready(function() { if (!window["localStorage"]) { alert("No local storage. Should use cookie instead."); } else { var currentCount = localStorage["count"]; var countAsNumber = parseFloat(currentCount); countAsNumber = isNaN(countAsNumber) ? 1 : countAsNumber+1; localStorage["count"] = countAsNumber; $("#counter").text(countAsNumber); } }); </script> </head> <body> <div id="counter"></div> </body> </html> Persistence with local database • For a while it looked like we were going to get standardized support for SQL on the client – And some versions of some browsers even had an implementation of this idea ("Web SQL") – But all of their implementations used the same library ("sqlite") – everybody liked it. – But the World Wide Web Consortium (W3C) requires at least 2 differing implementations (i.e., not ok if everybody likes same implementation?!) – So now we are left without any standard that is widely implemented Local database, example? • Haven't run across any examples yet that follow standards and work properly in multiple browsers, even from file system • So: – Stay tuned for the "indexedDB" standard – Maybe even research it and use it for your How-To APIs to get your creative juices flowing • There are literally thousands of JavaScript libraries (some standardized, some not) • Examples Geolocation Canvas Binary download Video Audio Animation Encryption Compression Drag and Drop String formatting Typography (as in fonts) XML manipulation Charting Threads ("web workers") File I/O Types (as in JS with types) Geolocation (use Firefox) <!DOCTYPE html><html><head> <script src="jquery-1.8.2.min.js"></script> <script> $(document).ready(function() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(callbackFunction); } else { alert("Not supported"); } }); function callbackFunction(pos) { $("#latlong").text("lat:"+pos.coords.latitude+";long:"+pos.coords.longitude); } </script> </head> <body><div id="latlong"></div></body> </html> Drawing pictures on canvas <!DOCTYPE html><html><head> <script src="jquery-1.8.2.min.js"></script> <script> $(function() { var myCanvas = $("#canvas1").get(0); var context = myCanvas.getContext("2d"); context.fillStyle = "#00ff00"; context.fillRect(10, 40, 100, 200); // x, y, width, height context.strokeStyle = "#ff0000"; context.moveTo(200, 300); // x, y context.lineTo(350, 350); // x, y context.stroke(); }); </script></head><body> <canvas id="canvas1" height="400" width="400" height="400"></canvas> </body></html> There's always more to learn • For your How-To, consider covering a JS API • For ideas, refer to – http://diveintohtml5.info – http://w3schools.com – http://jquery.com – http://developer.mozilla.org/ https://developer.mozilla.org/en-US/docs/JavaScript