1. Introduction to Client-Side Web Development Introduction to Client-Side programming using JavaScript JavaScript; application examples 10 th February 2005 Bogdan L. Vrusias b.vrusias@surrey.ac.uk

2. Introduction to Client-Side Web Development 10 th February 2005Bogdan L. Vrusias © 20052 Contents Validating form data Cookies Image rollovers Hiding and showing elements DEMO

3. Introduction to Client-Side Web Development 10 th February 2005Bogdan L. Vrusias © 20053 Applications: Validating Form Data Validation is the process of making sure that the data entered by the user is complying to the expected format and rules of your application. Validation is a key part of the Web application, and one of the most important uses of JavaScript. Validating the data on the client-side could save a lot of hassle. Data can be validated in three basic ways: –Validate the data at the Web server. –Validate as each value is added or modified (field-level validation). –Validate all fields on the form before the user submits the data to the Web server (form-level validation). Form-level validation is the most common way of validating the data. Common types of validation include: numeric, required, range, or a specific format (such as email, zip code, etc.)

4. Introduction to Client-Side Web Development 10 th February 2005Bogdan L. Vrusias © 20054 Applications: Validating Data Example func tion isNumeric(e) { if (e.value=="") { return true; } var v = parseFloat(e.value); if (isNaN(v)) { alert("The entry in " + e.name + " must be numeric"); return false; } else { return true; } } function isAllNumeric(e) { if (e.value=="") { return true; } var numericExp=/^\d+$/; if (numericExp.test(e.value)) { return true; } else{ alert("The entry in " + e.name + " must be numeric"); return false; }

5. Introduction to Client-Side Web Development 10 th February 2005Bogdan L. Vrusias © 20055 Applications: Cookies Cookies are the mechanism provided by the browser that allow storage and retrieval of information on the computer. Usually the cookies are used to store information about the user and information about settings and preferences. The basic information you can get from a cookie is its name, its domain and path, its value, its security, and its expiration date. For security reasons the cookie is only accessible by Web pages within the same directory (or subdirectory), or in the same domain. The cookie property is accessed from the document object.

6. Introduction to Client-Side Web Development 10 th February 2005Bogdan L. Vrusias © 20056 Applications: Cookies Security Security issues concerns: –A cookie is a simple text file, it is not executed, therefore it cannot be a virus. –A cookie cannot steal personal information from your machine, or even interact with any other data stored. –A cookie cannot interact with other cookies of even read information from those. Making it safer any way? Then: –Don't store private information in a cookie. –If possible, kill the cookie as soon as you have finished with it. –Provide a privacy policy. –Use alternatives, if appropriate, such as HTML hidden fields, appending information to the URI, using a database, or the server.

7. Introduction to Client-Side Web Development 10 th February 2005Bogdan L. Vrusias © 20057 Applications: Cookie Example function setCookie(sName, sValue) { var expireDate = new Date; expireDate.setYear(expireDate.getFullYear() + 1); document.cookie = sName + "=" + escape(sValue) + ";expires=" + expireDate.toGMTString(); } function getCookie(sName) { var arrCookies = document.cookie.split("; "); for(var i = 0; i < arrCookies.length; i++) { if(sName == arrCookies[i].split("=")[0]) { return unescape(arrCookies[i].split("=")[1]); } return ""; }

8. Introduction to Client-Side Web Development 10 th February 2005Bogdan L. Vrusias © 20058 Applications: Image Rollovers Consider the scenario where you want to be able to dynamically update an image when the mouse is over it. This method is useful to create buttons that get activated when the mouse goes over them. To make the rollover effect more efficient you should preload all the images (even those that are not displayed yet) on the clients side. First check if the browser supports images. The code is as follows: if (document.images) { btn_on = new Image(60, 20); btn_on.src = "btn_on.gif"; // highlighted btn_off = new Image(60, 20); btn_off.src = "btn_off.gif"; // normal } …

9. Introduction to Client-Side Web Development 10 th February 2005Bogdan L. Vrusias © 20059 Applications: Hiding & Showing Elements Consider the scenario where you want to be able to dynamically hide or show a particular HTML element (such as a text filed). var advertVisible = false; function showAdvert() { if (advertVisible == true) { document.getElementById("adv").style.display= "block"; advertVisible = false; } else { document.getElementById("adv").style.display= "none"; advertVisible = true; } … The annoying advert.

10. Introduction to Client-Side Web Development 10 th February 2005Bogdan L. Vrusias © 200510 DEMO Follow the examples demonstrated from the book: –JavaScript Unleashed (4 th Ed), by W. Gilliam – SAMS pub, ISBN 0672324318 –Source code URL: www.samspublishing.com

11. Introduction to Client-Side Web Development 10 th February 2005Bogdan L. Vrusias © 200511 Closing Questions??? Remarks??? Comments!!! Evaluation!