Web Page Behavior

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