1 / 23

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.

Télécharger la présentation

Internet & Communications

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.


Presentation Transcript

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

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

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

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

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

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

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

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

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

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

  11. 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; }

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

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

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

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

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

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

  18. 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; }

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

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

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

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

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

More Related