Scripting Language

Download Report

Transcript Scripting Language 

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:
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 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
Click here to add a new behavior
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
Click
on
Insert
Behaviors panel
• 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
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
• This is where you add the behavior to your <img> tag
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.
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
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 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)
6. Repeat the process for the other pages in the site.
7. Publish your chapter08 folder and email me your hyperlink for this
assignment.