genarof
Uploaded by
20 SLIDES
222 VUES
200LIKES

Web Page Behavior

DESCRIPTION

Learn about the power of JavaScript for web development, from increasing usability and performance to adding special effects. Explore its strengths, weaknesses, and practical applications.

1 / 20

Télécharger la présentation

Web Page Behavior

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. Web Page Behavior IS 373—Web Standards Todd Will

  2. Topics • Introduction • Comparison of different Scripting technologies • Example language (Javascript) • Demo of a registration page that has scripting • For Next Week – MIDTERM! CIS 373---Web Standards-JavaScript

  3. Behavior Presentation Structure Behavior Layer • Key Points • Ways to Implement • Javascript • Flash • CSS • Applets/ActiveX • Reasons to Implement • Increase usability • Increase performance • Add bells and whistles • Goal: Universal usability CIS 373---Web Standards-JavaScript

  4. Increasing Usability • Behavior can be used to: • Hide/show content dynamically, e.g. dropdown menus • Auto-complete form fields • Error-check form field values • Support stylesheet switching • Interface hints, e.g. rollover changes CIS 373---Web Standards-JavaScript

  5. Increasing Performance • Behavior can be used to: • Preload images needed for rollovers • Get/refresh data in the background • AJAX can be used to approach desktop app interactivity in web-based apps CIS 373---Web Standards-JavaScript

  6. Adding Bells and Whistles • Behavior can be used to: • Wow site visitors with animations, sounds, or other slick presentation of site content • Just make sure you don’t overdo it • The “wow” factor in these types of sites is undeniable, but this comes at a price CIS 373---Web Standards-JavaScript

  7. Strengths Powerful Lightweight Widely supported Weaknesses Not enabled in all browsers W3Schools reports only 90% (Jan 2006) Implemented functions differ across browsers and versions of browsers May be absent in handheld and/or non-visual browsers JavaScript CIS 373---Web Standards-JavaScript

  8. Strengths Extremely powerful Widely supported Very portable Professional look Weaknesses Learning curve Accessibility issues Usability issues Search engine support Cost Flash CIS 373---Web Standards-JavaScript

  9. CSS • CSS has very limited ability to implement behaviors • Support of features not even across browsers CIS 373---Web Standards-JavaScript

  10. Strengths Powerful Weaknesses Support Blocked by default in some browsers Applets/ActiveX CIS 373---Web Standards-JavaScript

  11. Things to Keep in Mind • Behaviors should be used to enhance a website’s: • Usability • Performance • “Wow” factor • BUT Critical functionality should not be entrusted to the behavior layer • Moving on to a sample CIS 373---Web Standards-JavaScript

  12. JavaScript Language • What is JavaScript? • JavaScript was designed to add interactivity to HTML pages • JavaScript is a scripting language (a scripting language is a lightweight programming language) • A JavaScript consists of lines of executable computer code • A JavaScript is usually embedded directly into HTML pages • JavaScript is an interpreted language (means that scripts execute without preliminary compilation) • Everyone can use JavaScript without purchasing a license • NOTE: You do not need to know how to program in JavaScript, just know what it is and when to use it CIS 373---Web Standards-JavaScript

  13. What can a JavaScript Do? • JavaScript gives HTML designers a programming tool • HTML authors can embed JavaScript into WebPages to make them dynamic • Very simple syntax • JavaScript can put dynamic text into an HTML page • A JavaScript statement like this: document.write("<h1>" + name + "</h1>") can write a variable text into an HTML page • JavaScript can react to events • A JavaScript can be set to execute when something happens, like when a page has finished loading or when a user clicks on an HTML element CIS 373---Web Standards-JavaScript

  14. What can JavaScript do? • JavaScript can read and write HTML elements • A JavaScript can read and change the content of an HTML element • JavaScript can be used to validate data • A JavaScript can be used to validate form data before it is submitted to a server. This saves the server from extra processing • JavaScript can be used to detect the visitor's browser • A JavaScript can be used to detect the visitor's browser, and - depending on the browser - load another page specifically designed for that browser • JavaScript can be used to create cookies • A JavaScript can be used to store and retrieve information on the visitor's computer CIS 373---Web Standards-JavaScript

  15. Putting JavaScript into HTML • <html> • <body> • <script type="text/javascript"> • document.write("Hello World!") • </script> • </body> • </html> • This would result in the following being displayed: • Hello World! CIS 373---Web Standards-JavaScript

  16. Handling Browsers • Browsers that do not support JavaScript will display the script as page content • To prevent them from doing this, use the HTML comment tag: • <script type="text/javascript"> • <!-- document.write("Hello World!") //--> </script> • NOTE: The two forward slashes at the end of comment line (//) are a JavaScript comment symbol, preventing the JavaScript compiler from compiling the line. CIS 373---Web Standards-JavaScript

  17. Where to put scripts • Header section • Put the script here if you want it to be loaded when the user requests it • Carried out when the user selects a particular action • Body Section • Put the script here when you want it to run when the page loads CIS 373---Web Standards-JavaScript

  18. JavaScript Validation Example • JavaScript can be used to validate forms before they are submitted • Form data that typically that could be checked include: • has the user left required fields empty? • has the user entered a valid e-mail address? • has the user entered a valid date? • has the user entered text in a numeric field? CIS 373---Web Standards-JavaScript

  19. Scripting Demos • Links to demos are on course website • Flash • Applets • JavaScript • Just to give you an idea of what they can do! CIS 373---Web Standards-JavaScript

  20. For Next Week • Midterm • All questions will come from the slides, but you can add information from the book as well • Study hard! CIS 373---Web Standards-JavaScript

More Related