1 / 20

JavaScript Fun Additions to a Web Site

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.

dinos
Download Presentation

JavaScript Fun Additions to a Web Site

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. JavaScript Fun Additions to a Web Site 15 February 2011

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

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

  4. HTML Content CSS Presentation JavaScript Behavior Three Legged Stool

  5. <body> <h1>JavaScript Writes Text</h1> <script type="text/javascript"> { document.write (‘<h1>Hello World!</h1>'); } </script> </body> HTML File with JavaScript

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

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

  8. Naming Form Elements in HTML <form name="addressform"> Name: <input name="yourname"><br /> Phone: <input name="phone"><br /> Email: <input name="email"><br /> </form>

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

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

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

  12. Widgets

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

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

  15. Mail

  16. Mailing, easy but susceptible • <a href="mailto:email_address”> Send me an email </a> • Reference • Danger: spam

  17. Other Web Concepts

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

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

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

More Related