Web Page Behavior
IS 373—Web Standards
Todd Will
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
2 of 20
Behavior Layer
• Key Points
– Ways to Implement
Behavior
Presentation
Structure
• Javascript
• Flash
• CSS
• Applets/ActiveX
– Reasons to Implement
• Increase usability
• Increase performance
• Add bells and whistles
• Goal: Universal usability
CIS 373---Web Standards-JavaScript
3 of 20
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
4 of 20
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
5 of 20
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
6 of 20
JavaScript
• Strengths
• Weaknesses
– Powerful
– Lightweight
– Widely supported
– 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 nonvisual browsers
CIS 373---Web Standards-JavaScript
7 of 20
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-JavaScript
8 of 20
CSS
• CSS has very limited ability to
implement behaviors
• Support of features not even across
browsers
CIS 373---Web Standards-JavaScript
9 of 20
Applets/ActiveX
• Strengths
– Powerful
• Weaknesses
– Support
– Blocked by default
in some browsers
CIS 373---Web Standards-JavaScript
10 of 20
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
11 of 20
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
12 of 20
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
13 of 20
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
14 of 20
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
15 of 20
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
16 of 20
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
17 of 20
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
18 of 20
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
19 of 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
20 of 20