200 likes | 327 Views
JavaScript Fun Additions to a Web Site. 15 February 2011. Review: Viewing a Web Page. SERVER web page repository WEB PAGE instructions stores information and instructions BROWSER retrieves web page and follows instructions. 2. 1. 3. Server. Client. Web Server. Pages.
E N D
JavaScript Fun Additions to a Web Site 15 February 2011
Review: Viewing a Web Page SERVER web page repository WEB PAGE instructions stores information and instructions BROWSER retrieves web page and follows instructions 2 1 3 Server Client Web Server Pages Browser
What is JavaScript? • 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
HTML Content CSS Presentation JavaScript Behavior Three Legged Stool
<body> <h1>JavaScript Writes Text</h1> <script type="text/javascript"> { document.write (‘<h1>Hello World!</h1>'); } </script> </body> HTML File with JavaScript
Event Handling <html> <head><title>My Page</title></head> <body> <p> <a href="myfile.html">My Page</a> <br /> <a href="myfile.html" onMouseover="window.alert('Hello');"> My Page</A> </p> </body> </html>
HTML Forms and JavaScript • JavaScript is very good at processing user input in the web browser • HTML <form> elements receive input • Forms and form elements have unique names • Each unique element can be identified
Naming Form Elements in HTML <form name="addressform"> Name: <input name="yourname"><br /> Phone: <input name="phone"><br /> Email: <input name="email"><br /> </form>
Referencing Form Values General structure: document.formname.elementname.value Specifically: document.addressform.yourname.value
Using Form Data Personalising an alert box <form name="alertform"> Enter your name: <input type="text" name="yourname"> <input type="button" value= "Go" onClick="window.alert('Hello ' + document.alertform.yourname.value);"> </form>
Java Functions • When there is too much to do, put it in a separate location • Two options • In the <head> section • In a separate .js file
Widgets • 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
Widget Websites • Resources • http://www.widgipedia.com/widgets/search/Web+Widgets • http://www.widgetbox.com • Let’s add some to a web page
Mailing, easy but susceptible • <a href="mailto:email_address”> Send me an email </a> • Reference • Danger: spam
iGoogle • Customizable homepage of gadgets • Gadgets = widgets • Specific to iGoogle • If it has what you want…
Portals • Visible aggregation: access to multiple web sites or functions • Collection of individual pieces • Tools exist but often “roll your own”
Mashups • Aggregation of information presented cohesively • Dynamic information • Should not be able to tell that it is a mashup! • http://www.programmableweb.com/mashups