Chapter 08: Adding Adding Interactivity Interactivity With With Behaviors 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 clients 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 – Doesnt 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 section of an HTML page... function showMessage() { window.alert(Hello World); }... Then triggered by events added inside of HTML tags

Scripting Basics Behaviors consist of two components: 1.Events Some activity that occurs on a Web page, like a user moves a mouse over a button or clicks on an image 2.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 Use Expression Webs Behaviors panel to add a behavior to your HTML page Adding an Expression Web behavior writes the code for the JavaScript function in your documents section and places the chosen Event type inside of the selected HTML element Click here to add a new behavior Behaviors currently applied to selected tag Selected tag

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

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

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

End of Chapter Exercise 1.Copy each page you created in Chapter07 (Home, About Us, Solutions, Support, and Contact Us) and the styles.css file to your Chapter08 folder. 2.In the Chapter08 folder open the default.htm file 3.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). 4.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. 5.Select each image individually and attach the Swap Image behavior. Set the source of each images Swap Image URL to the second image provided (nav_home2.png, nav_aboutus2.png, nav_oursolutions2.png, nav_support2.png, nav_contactus2.png) 6.Repeat the process for the other pages in the site. 7.Publish your chapter08 folder and me your hyperlink for this assignment.