Dynamic Web Pages

Static Web Pages

• The web pages that we have created so far do not change after they are loaded by a browser -- they are static

• They provide only one feature that supports interactivity -- hotlinks

• Most hotlinks impose a lot of traffic on the Internet and impose a lot of computing load on servers

Dynamic Web Pages

• Static web pages are good but good is never enough in the world of Information Technology

• As soon as static web pages were available, the desire arose for pages which were more interactive and which reduced the load on the Internet and on web servers

• People wanted more intelligence in web pages

Adding intelligence to web pages

• To add intelligence to any computer entity, we must write a program which implements that intelligence

• There are two places where the programs can be executed:– on a server– on a broswer

Server-side versus Client-side

• Choosing between server-side and client-side programming depends on several factors:– Privacy

• how private do you want your program to be

• will the program manipulate private data?

– Loading• are you concerned about overloading your server

• are you concerned about the Internet

Server-side programming

• Advantages– Programs can be kept private: users only see

the output that your program send to them– Data can be kept private– Data can be kept permanently

• Disadvantages– adds to server workload– adds to network traffic– delays response to user

Client-side programming

• Advantages– client computer does all the work– reduces traffic between server and client– enables faster response to user

• Disadvantages– users can see your program– users can see your data– programs cannot really keep permanent data

because users can throw them away

Types of client-side programs

• Applets:– can avail of full power of general programming

languages (Java is the one usually used);– can be compiled and, therefore, semi-private

• Scripts– written in simpler languages (Javascript,

VBscript) developed specifically for the task– interpreted not compiled

Client-side programming with Javascript

Don’t be caught by the name

• Javascript is NOT Java

• History of Javascript:– Netscape were already developing a scripting

language (called LiveScript, I think) when Sun proposed Java as a platform-independent general programming language

– there was a bit of mutual band-wagon jumping• some syntax blending

• change of name from LiveScript(?) to Javascript

What can Javascript programs do?

• Handle browser and/or user events

• create new browser frames and windows

• process forms

• process “cookies”

• interface with applet and server-side programs

• control multi-media objects on a web page

User-event Handling

Types of user events

• when the mouse button is clicked on an element;

• when the mouse button is double-clicked on an element;

• when the mouse button is pressed over an element;

• when the mouse button is released over an element;

• when the mouse is moved onto an element;

Types of user events (contd.)

• when the mouse is moved while over an element;

• when the mouse is moved away from an element;

• when a key is pressed and released over an element;

• when a key is pressed down over an element;

• when a key is released over an element.

Consider following web page

• It has two paragraphs of text

• While user moves mouse onto first paragraph, its font size will increase

• While user moves mouse away from second paragraph, its color will change to red

How did he do that?

• By associating two very short Javascript programs with each paragraph, each program with a different event:– First paragraph:

• one program executes when mouse enters box

• other program executes when mouse leaves box

– Second paragraph:• one program executes when mouse enters box

• other program executes when mouse leaves box

Associating programs with events

• Events happen to content elements

• So, contents elements can have attributes whose – names indicate the events we want to handle

and – whose values are the Javascript programs we

want to execute when these events occur

Names for events

• onclick, when the mouse button is clicked on an element;

• ondblclick, when the mouse button is double-clicked on an element;

• onmousedown, when the mouse button is pressed over an element;

• onmouseup, when the mouse button is released over an element;

• onmouseover, when the mouse is moved onto an element;

• onmousemove, when the mouse is moved while over an element;

• onmouseout, when the mouse is moved away from an element;

• onkeypress, when a key is pressed and released over an element;

• onkeydown, when a key is pressed down over an element;

• onkeyup, when a key is released over an element.

Extract from HTML specification

<p onmouseover='this.style.fontSize=32'

onmouseout='this.style.fontSize=14'>

Whenever you place your mouse over me, my Font Size will increase to help you read me.

</p>

Analysis of extract:

<p onmouseover='this.style.fontSize=32'

onmouseout='this.style.fontSize=14'>

• Attributes are of form:

someEventName=‘someJavascript’

Analysis continuedonmouseover='this.style.fontSize=32'

• Javascript is enclosed by apostrophes

• Case is ESSENTIAL in Javascript

• this (note all lower-case) refers to the element to which the Javascript is attached

• this.style refers to the style for this element

• this.style.fontSize refers to the font-size property of the style for this element

Another extract from HTML spec

<p onmouseover='this.style.color="red"'

onmouseout='this.style.color="black"'>

• this.style.color refers to the color property of the style for this paragraph

• the values specified for the color must be enclosed in quotes

Full HTML specification<html>

<head>

<title> Simple Mouse Event </title>

</head>

<body>

<h1> Some Subject or Other </h1>

<p onmouseover='this.style.fontSize=32’ onmouseout='this.style.fontSize=14'>

Whenever you place your mouse over me, my Font Size will increase to help you read me.

</p>

<h1> Another Subject </h1>

<p onmouseover='this.style.color="red"’ onmouseout='this.style.color="black"'>

Whenever you place your mouse over me, my color will change to help you read me.

</p>

</body>

</html>