Web Page Behavior IS 373—Web Standards Todd Will

CIS Web Standards-JavaScript 2 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 Web Standards-JavaScript 3 of 20 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 Presentation Behavior Structure

CIS Web Standards-JavaScript 4 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 Web Standards-JavaScript 5 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 Web Standards-JavaScript 6 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 Web Standards-JavaScript 7 of 20 JavaScript 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

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

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

CIS Web Standards-JavaScript 10 of 20 Applets/ActiveX Strengths –Powerful Weaknesses –Support –Blocked by default in some browsers

CIS Web Standards-JavaScript 11 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 Web Standards-JavaScript 12 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 Web Standards-JavaScript 13 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(" " + name + " ") 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 Web Standards-JavaScript 14 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 Web Standards-JavaScript 15 of 20 Putting JavaScript into HTML – –document.write("Hello World!") – This would result in the following being displayed: –Hello World!

CIS Web Standards-JavaScript 16 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: – 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 Web Standards-JavaScript 17 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 Web Standards-JavaScript 18 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 address? –has the user entered a valid date? –has the user entered text in a numeric field?

CIS Web Standards-JavaScript 19 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 Web Standards-JavaScript 20 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!