internet communications l.
Skip this Video
Loading SlideShow in 5 Seconds..
Internet & Communications PowerPoint Presentation
Download Presentation
Internet & Communications

Loading in 2 Seconds...

play fullscreen
1 / 23

Internet & Communications - PowerPoint PPT Presentation

  • Uploaded on

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.

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
internet communications

Internet & Communications

  • Client-side programming for
  • the WWW (lecture 4)
  • Reacting to Events
  • Cookies
  • 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
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”


Note: if onsubmit method returns false it won’t submit.

event handlers4
Event Handlers
  • Each type of document object has a set of possible event handlers which can be defined. E.g., button has "onclick"


<script type="text/javascript">

function dontclickme() {

alert("I told you not to click me") }




<form action="">

<input type="button" value="Don't do it!"



Try it

Play with it

form validation
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 validation6
Form validation

<script language=“JavaScript”>

function check() {

if(document.f1.yourname.value=“”) {

alert(“Enter your name”);



else return(true);



In head

<form id=“f1” onsubmit=“return check()”;>

<input type=“text” name=“yourname”>

In body


Play with it

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


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


#mybit {color: blue; position: relative:

pixelLeft: 50}


View it

Play with it

making it move
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()” = 300; = “red”;

function jump() { += 20;


jump example
Jump Example


function jump() { += 10;



<div id=“mybit”>

<h1> Hello </h1>



<input type=“button” value=“Jump”



In head

In body

moving across the screen
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( < 300)

{ +=5;

setTimeout(“move()”, 50);


Play with it

View it

summary dhtml
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 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.
  • You will have a cookie file (stored somewhere) holding everything any site has recorded about you.
  • Typical line:
  • has recorded that your username is alison. It also records when this data should expire.
  • Try looking in ~/.netscape/cookies FALSE /~alison 1027069996

username alison

cookies in javascript
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”

} …. name alison

cookies in javascript18
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
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
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
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.
  • 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
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.