Chapter 08: Adding Interactivity With Behaviors

Chapter 08: Adding Interactivity With Behaviors By Bill Bennett Associate Professor MSJC CIS MVC

Behaviors • Definition (as it relates to Web design): • Behaviors are a collection of pre-written routines designed to provide user interaction within a Web page. • Many GUI-based Web design programs, like Expression Web, include and/or allow for the importing and creation of Behaviors that can be added to your Web pages. • Example behaviors: pop-up windows, rollover effects; button actions; changing properties of elements, styles, or objects in a Web page, and changing content in a Web page; to name a few. • Behaviors are created using a client-side scripting language like JavaScript (preferred) or VBScript

The Big Picture • HTML defines the structure of your Web pages • HTML is a “Markup” language • CSS defines the look of your Web pages • Scripting languages define the control logic of your Web pages • “Behaviors” or functions are added to a Web page by using a scripting language

Client-Side Scripting • Definition: • Client-side scripting means that the scripting code is processed by the client’s user agent (Web browser) • Popular client-side scripting languages: • JavaScript • Open Source • Works in all Web browsers • Most frequently used client-side scripting language of Web developers • VBScript • Proprietary • Works only in MS Internet Explorer

JavaScript • It IS a Scripting Language • Doesn’t need to be compiled • Runs on all operating systems • Object-based language • Web Browser must have JavaScript interpreter enabled • It is similar to, but not the same as, JAVA • It IS NOT a Programming Language • Must be compiled first • Compiled to work on a specific operating system • Object-oriented language • Has more functionality • Languages include: JAVA, C++, and C# (pronounced C-sharp)

Scripting Basics • Scripts can be: imported, linked to, or embedded in HTML pages • JavaScript IS case-sensitive! • JavaScript functions can be embedded in the <head>section of an HTML page . . . • <html> • <head> • <script type=“text/javascript”> • function showMessage() { • window.alert(“Hello World”);} • </script> • </head> • . . . Then triggered by events added inside of HTML tags • <body> • <input type=“button” value=“Click Me” onClick=“showMessage();” /> • </body> • </html>

Scripting Basics • Behaviors consist of two components: • Events • Some activity that occurs on a Web page, like a user moves a mouse over a button or clicks on an image • Actions • Are triggered by events • The activity that needs to occur • Changing a property value • Performing a mathematical calculation • Opening a new Web browser window • Etc.

Behaviors Panel Click here to add a new behavior • Use Expression Web’s Behaviors panel to add a behavior to your HTML page • Adding an Expression Web behavior writes the code for the JavaScript function in your document’s <head> section and places the chosen Event type inside of the selected HTML element Selected tag Behaviors currently applied to selected tag

Often Used Event Types • onClick • onDblClick • onMouseDown • onMouseUp • onMouseOver • onMouseOut • onFocus • onBlur • onLoad • onUnload

Expression Web Behaviors • Play Sound • Popup Message • Preload Images • Set Text • Swap Image • Swap ImageRestore • Call Script • Change Property • Change Property Restore • Go To URL • Jump Menu • Jump Menu Go • Open Browser Window Click on Insert Behaviors panel

Adding the Swap Image Behavior • Select the image you want to add the behavior to • Open the Behaviors panel from the Panels menu • Next click the Insert button located in the top left of the Behaviors panel and choose Swap Image The selected tag displays in the Behaviors panel

Swap Images Dialog Box The circle shows the other <img> elements in your document. It helps to add the ID attribute to your <img> tags to make it easier to find the right tag in this list. To do this, select the <img> tag and type a name in the ID field of the Tag Properties panel. • This is where you add the behavior to your <img> tag Selected <img> tag that behavior will be applied to. Location and name of the swap image file. Choosing this check box adds code to the <head> section and the <body> tag which loads the swap image into a Web browser ‘s memory when the page is loaded; it creates a smoother roll over effect. Adds code to restore original image on mouseout event.

End of Chapter Exercise • Copy each page you created in Chapter07 (Home, About Us, Solutions, Support, and Contact Us) and the styles.css file to your Chapter08 folder. • In the Chapter08 folder open the default.htm file • In the space where the navigation menu resides, replace each textual hyperlink with the appropriate image file (nav_home1.png, nav_aboutus1.png, nav_oursolutions1.png, nav_support1.png, nav_contactus1.png). • Make each nav image a hyperlink by right-clicking on the image, choosing Hyperlink Properties and pointing to the appropriate html file, i.e. the nav_home1.png should have an HREF=“default.htm” added to its hyperlink. • Select each image individually and attach the Swap Image behavior. Set the source of each image’s Swap Image URL to the second image provided (nav_home2.png, nav_aboutus2.png, nav_oursolutions2.png, nav_support2.png, nav_contactus2.png) • Repeat the process for the other pages in the site. • Publish your chapter08 folder and email me your hyperlink for this assignment.

Chapter 08: Adding Interactivity With Behaviors