Dynamic Web Pages

1. Dynamic Web Pages

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

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

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

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

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

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

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

9. Client-side programming with Javascript

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

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

12. User-event Handling

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

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

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

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

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

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

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

23. Analysis of extract: <p onmouseover='this.style.fontSize=32' onmouseout='this.style.fontSize=14'> • Attributes are of form: someEventName=‘someJavascript’

24. Analysis continued onmouseover='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

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

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