internet communications l.
Download
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


  • 204 Views
  • 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.

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

PowerPoint Slideshow about 'Internet & Communications' - jaden


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
  • DHTML
  • Cookies
events
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
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 handlers4
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
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”);

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

</div>

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

<style…>

#mybit {color: blue; position: relative:

pixelLeft: 50}

</style>

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()”

mybit.style.pixelLeft = 300;

mybit.style.color = “red”;

function jump() {

mybit.style.pixelLeft += 20;

}

jump example
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
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
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
  • 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.
cookies16
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
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 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.
summary
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
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.