Web Page Behavior IS 373Web Standards Todd Will

Web Page Behavior IS 373—Web Standards Todd Will Standards 101 of 20

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

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

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-Java. Script 4

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-Java. Script 5

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

Java. Script • Strengths • Weaknesses – Powerful – Lightweight – Widely supported – Not enabled in all browsers • W 3 Schools reports only 90% (Jan 2006) – Implemented functions differ across browsers and versions of browsers – May be absent in handheld and/or nonvisual browsers CIS 373 ---Web Standards-Java. Script 7

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

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

Applets/Active. X • Strengths – Powerful • Weaknesses – Support – Blocked by default in some browsers CIS 373 ---Web Standards-Java. Script 10

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

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

What can a Java. Script Do? • Java. Script gives HTML designers a programming tool – HTML authors can embed Java. Script into Web. Pages to make them dynamic – Very simple syntax • Java. Script can put dynamic text into an HTML page – A Java. Script statement like this: document. write("<h 1>" + name + "</h 1>") can write a variable text into an HTML page • Java. Script can react to events – A Java. Script 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-Java. Script 13

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

Putting Java. Script 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-Java. Script 15

Handling Browsers • Browsers that do not support Java. Script 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 Java. Script comment symbol, preventing the Java. Script compiler from compiling the line. CIS 373 ---Web Standards-Java. Script 16

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-Java. Script 17

Java. Script Validation Example • Java. Script 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-Java. Script 18

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

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-Java. Script 20