Internet & Communications

Internet & Communications • Client-side programming for • the WWW (lecture 4) • Reacting to Events • DHTML • Cookies

Events • In last lecture we looked at how JavaScript could be used to add more interactivity to page. • Looked at using dialogue boxes (e.g., prompt) for user input, and different ways to modify the page. • As well as using dialogue boxes for user input, we can detect when certain events happen, and act on these: • e.g, mouse clicks and movement, form submission, key presses

Event Handlers • You can specify what action to take if various events happen • We can add attribute to relevant HTML element specifying javascript method to call. <form id=“f1” onsubmit=“return checkme()”> .. <input type=“button” value=“press” onclick=“clickfn()”> Note: if onsubmit method returns false it won’t submit.

Event Handlers • Each type of document object has a set of possible event handlers which can be defined. E.g., button has "onclick" <head> <script type="text/javascript"> function dontclickme() { alert("I told you not to click me") } </script> </head> <body> <form action=""> <input type="button" value="Don't do it!" onclick="dontclickme()"/> </form> Try it Play with it

Form Validation • JavaScript widely used to validate and "autocomplete" forms before they are submitted. • The "onsubmit" event handler is used to validate. • We write a JavaScript function that checks the form contains all the necessary data, and prompts user for missing entries. • Function should return "false" if data is incomplete. This stops form being submitted.

Form validation <script language=“JavaScript”> function check() { if(document.f1.yourname.value=“”) { alert(“Enter your name”); return(false); } else return(true); } …. In head <form id=“f1” onsubmit=“return check()”;> <input type=“text” name=“yourname”> In body Example Play with it

DHTML • DHTML = Dynamic HTML • Use JavaScript to dynamically change objects on web page: • position of objects • content of objects • properties of objects (e.g., colour) • Will show here how it can be used to create simple animation. • This requires that we can specify, and change position of objects.

Positioning objects • Various ways to position objects in HTML - I’ll use CSS-P (CSS positioning). • We create sections (divisions) in our HTML, which will have a position and size on screen. • We use CSS to specify the position and size.

The DIV element • The DIV element is used to specify sections of HTML we want to be able to position: • We give the section an id - a bit like a name. <div id=“mybit”> <h1> My Page </h1> <img src=“alison.gif”/> <p> Isn’t it great </p> </div>

Adding style • We can specify a CSS rule for just that section, using its id: • position: relative states that it should be relative to other elements on page. • pixelLeft gives distance from left in pixels <style…> #mybit {color: blue; position: relative: pixelLeft: 50} </style> View it Play with it

Making it move • We can modify stylesheet property values from within JavaScript: • Could have a function that changed position of section: • Then could have: onclick=“jump()” mybit.style.pixelLeft = 300; mybit.style.color = “red”; function jump() { mybit.style.pixelLeft += 20; }

Jump Example <script..> function jump() { mybit.style.pixelLeft += 10; } </script> … <div id=“mybit”> <h1> Hello </h1> </div> <form> <input type=“button” value=“Jump” onClick=“jump()”> </form> In head In body

Moving across the screen • We cab keep adding a little to the positions, until it has moved enough.. • setTimeout calls function again after small time delay. function move() { if(mybit.style.pixelLeft < 300) { mybit.style.pixelLeft +=5; setTimeout(“move()”, 50); } Play with it View it

Summary: DHTML • Can manipulate position and properties of bits of HTML using JavaScript. • One way is to use CSS to specify position of section of HTML, and then change the position under JavaScript. • Note: Some of methods demonstrated are IE specific. Standard W3C DOM based methods should be considered in future.

Cookies • Cookies allow web site providers to store and retrieve small bits on information on client’s computer. • Usually used to store customer details like name, address etc. • Normally only site which wrote the cookie can read it.

Cookies • You will have a cookie file (stored somewhere) holding everything any site has recorded about you. • Typical line: • mysite.com has recorded that your username is alison. It also records when this data should expire. • Try looking in ~/.netscape/cookies www.mysite.com FALSE /~alison 1027069996 username alison

Cookies in JavaScript • Can set and read cookies using JavaScript. Example: • Browser will read this and add a cookie which includes your site name: function setCookie() { document.cookie = “name=alison” } yoursite.com …. name alison

Cookies in JavaScript • Later want to read this cookie to find user name. • Needs a bit of work getting hold of right bit of cookie: function readName() { var broken_cookie = document.cookie.split(“=“); var yourname = broken_cookie[1]; return yourname; }

Cookie Demo • In general to read/write cookies you should copy standard ReadCookie and SetCookie methods. • Simple versions are illustrated in demo linked below. View Cookie Demo

Cookie Issues • Not everyone likes cookies: privacy. • Legal issues (data protection). • Users may need reassurance data won’t be passed on. • Some users switch off cookies. • Sites using cookies should include some statement on use of personal data.

Summary: Cookies • Used to store small bits of data about user, on THEIR machine. • Fairly simple to store/read cookies using JavaScript. • But issues concerning use and storage of personal data.

Summary • JavaScript used to add interactivity to page. • Use event handlers to detect and act on standard events like button presses, form submission. • User DOM to access and modify the page. • Some variability in what different browsers support. But soon we will all be able to use W3C standards for DOM and events.

Labs etc • Assignment is now up on web site and will be marked week 4. • First stage involves HTML, CSS, simple JavaScript. • Make sure you have done the labs on these topics. • Also labs on DHTML and cookies, but less crucial.

Internet & Communications