2. SERVER web page repository WEB PAGE instructions stores information and instructions BROWSER retrieves web page and follows instructions Server Web Server Pages Client Browser 1 3 2

3.  Browser-based language for creating dynamic pages  Functions › simple programming tool › dynamic text › react to events › read and write HTML elements › validate data › detect the browser › create cookies  Significant differences between browsers › More than HTML and CSS › Why no such problems with PHP?  w3schools

4. HTML Content CSS Presentation JavaScript Behavior

5. JavaScript Writes Text { document.write (‘ Hello World! '); }

6. My Page My Page <a href="myfile.html" onMouseover="window.alert('Hello');"> My Page

7.  JavaScript is very good at processing user input in the web browser  HTML elements receive input  Forms and form elements have unique names › Each unique element can be identified

8. Name: Phone: Email:

9. General structure: document.formname.elementname.value Specifically: document.addressform.yourname.value

10. Personalising an alert box Enter your name:

11.  When there is too much to do, put it in a separate location  Two options › In the section › In a separate.js file

13.  A chunk of code that you can imbed in an existing environment  Differences › Resides: desktop or web › Embedding: any page or application or limited › Runs: your machine or server  Let’s add some to a web page

14.  Resources › http://www.widgipedia.com/widgets/search/Web+Widgets http://www.widgipedia.com/widgets/search/Web+Widgets › http://www.widgetbox.com http://www.widgetbox.com  Let’s add some to a web page

16.  Send me an email  Reference Reference  Danger: spam

18.  Customizable homepage of gadgets › Gadgets = widgets › Specific to iGoogle  If it has what you want…

19.  Visible aggregation: access to multiple web sites or functions  Collection of individual pieces  Tools exist but often “roll your own”

20.  Aggregation of information presented cohesively  Dynamic information  Should not be able to tell that it is a mashup!  http://www.programmableweb.com/mashups http://www.programmableweb.com/mashups