Creating Active Web Pages

Chapter 8

Learn how to…

• List the primary scripting languages and describe JavaScript.

• Understand the purpose of the Document Object Model (DOM).

• Use cookies.• Use cascading style sheets.• Use Dynamic HTML to create animated

Web pages.• Understand XML, XSL, XSLT, XHTML,

and SMIL.

Introduction to Scripting

Scripting

• Scripting is the act of writing little computer programs that can enhance the appearance and functionality of a Web page.

Scripting Languages

• JavaScript runs client-side in the browser without requiring any server-side processing.

• Server-side scripting languages include:– VBScript and JScript– Microsoft’s Active Server Page (ASP) languages– C# (pronounced C-sharp)– Java– J# (Microsoft’s version of Java – pronounced J-sharp)

Where Do Scripts Go?

• You can put JavaScript in the head or in the body section of a Web page.

• Scripts can also reside in a separate file called an include file, which gets included in the page at runtime.

• A function is a named procedure you can call upon by name any time you need to execute the code in the function.

Where Do Scripts Run?

• Scripts run either on the client (or browser) or on the server that hosts the Web site.– JavaScript runs on the client.

• Use whenever the process you are handling can be accomplished by the browser without requiring any programming on the server side.

– ASP scripts run on the server.

Hello World!

Code Analysis

• The <script> start and </script> stop tags mark the beginning and ending of a script on a Web page.

• The language attribute defines the language as JavaScript.

• The document object is one of the JavaScript objects.• The write() method causes a string of characters to

be written onscreen.

Variables and Strings

• A variable is a place in the computer’s RAM that remembers, or stores, the value of something changeable.

• A string is a sequence of one or more alphanumeric characters.

• A string variable is a place in the computer memory that remembers, or stores, the alphanumeric characters in a string.

Variables

• A numeric variable is a place in the computer memory that remembers, or stores, a number point.

• A floating point number has a decimal point with one or more numbers after the decimal point.

Variable Names

• A variable name is the identifier used to refer to, or call upon, a place in the computer memory that stores the value of a variable.

• Follow a naming convention whereby integers begin with the letter i, strings begin with the letter s, and floating point numbers begin with the letter f.

Operators

• An operator is a symbol that causes a script to perform some kind of action on a variable or value.

• The assignment operator assigns values to variables.

Example

• Comment statements begin with the special symbol //.

Code Analysis

Concatenating Strings

• To concatenate means to join strings together via the concatenation operator.– In JavaScript, the concatenation operator is

the + sign.

Example

Numeric Variables

Displaying Strings

The <strong> and </strong> tags will make the person’s age and weight appear bold.

JavaScript uses the special symbol " \" to denote a quote sign inside a string. The code to display the string Santa sang "Jingle Bells" as he drove the sleigh is given below.

Objects and Methods

• An object is a self-contained entity consisting of properties and methods enabling you to do something programmatically.

• A method is a little computer program built into an object to enable the object to do something.

Properties

• A property is an attribute of an object that has a value.– Properties can be used to check whether a

user typed in his e-mail address properly.

Events

• An event is an action that provides an opportunity to trigger a script that can use objects to inspect properties and execute methods that make things happen onscreen or keep records behind the scenes.

Most Common Events

• Mouseover

• Mouse click

• Double-click

• Page load

JavaScript Clock Project

Customizing Date and Time

Example

Document Object Model(DOM)

DOM

• The document object model (DOM) is the official W3C structural definition of the objects, methods, and properties that comprise documents on the World Wide Web.– Visit www.w3.org/DOM for more information.

DOM Objects

DOM Objects

Intrinsic Events

Dot Notation

Title Bar Clock Example

This script will display the current time in the title bar.

Title Bar Clock Example

Arrays

• An array is a named table of memory locations in which values can be stored.

– Defines an array with 7 slots (0 through 6).

– Assigns values to the array slots.

DOM Objects by Arrays

• When a Web page loads, the browser creates arrays for the images, forms, links, anchors, and all the other elements onscreen. As the browser encounters objects on the page, it places them into these arrays. The arrays are indexed sequentially, beginning with zero.– For example, the first image on the page goes into the

images array slot 0 referred to as document.images[0]– In this example, the third button on the first form of a

Web page would be referred to as document.forms[0].elements[2]

DOM Objects by Name

• Use the name and id attributes to give the element a unique identifier.– Older versions of HTML use name.– New versions of HTML use id.

Example

The following script provides three buttons that allow users to make an image smaller or larger.

Alert Boxes

• To aid in troubleshooting, insert an alert box at the point in the script at which you want to inspect the value of the variable.

• An alert box is a window that a script creates by executing the alert() method of the JavaScript window object.– Insert the string of characters and variables you want

displayed between the ( ) in the alert() method.

Inspecting a Variable

• The code to inspect the value of a variable using an alert box to troubleshoot is given below:

JavaScript Code Sources

Rollover Effects

• The following script causes the photo to change when you rollover it with the mouse:

Rollover Effects

• The following script causes the picture to change from a dimly colored photo to full color in Internet Explorer:

Maintaining State in Cookies

Cookies

• A cookie is a place in the computer’s memory where browsers can store information about the user.– persistent cookies are stored in small text files

on the user’s hard disk.– per-session cookies are stored in RAM.

• Cookies can be used to keep track of what you do on Web sites – that is, to maintain state.

Reading and Writing Cookies

Code Analysis

• To make the cookie persistent for 1 minute:

Code Analysis

• The script stores the click counter value in a cookie called ClickCounter.

• The value is read into a variable called iClickCounter.

Code Analysis

Cascading Style Sheets

Cascading Style Sheets

• A cascading style sheet (CSS) is a set of rules that define styles to be applied to entire Web pages or individual Web page elements.– Each rule consists of a selector followed by a

set of curly braces containing the style properties and their values.

Cascading Style Sheets

Types of CSS

• An external CSS keeps all the style definitions in a separate CSS file that you include in a Web page at runtime by using the <link> tag to apply the style sheet to the page.

• An embedded CSS is a style sheet that gets copied physically into the head of the Web page and applies to the Web page as a whole.

• An inline CSS is a style sheet that applies to only one page element so it gets copied “inline” on the page with that element.

An Inline CSS

An Embedded CSS

• The embedded CSS goes into the head section of the page, and the style rules defined there apply to the whole page. Below, styles are assigned to h1 headers and paragraphs:

Inline and Embedded CSS

An External CSS

• Create a style sheet and save it with the .css extension:

In the <head> section, reference your CSS:

<span> and <div> Tags

• Use the <span> and </span> tags to stylize part, instead of all, of a Web page element. In this example, “yellow words” has its own style:– <p>Notice how <span style="color: yellow">yellow

words</span> appear onscreen.</p>

• The <div> and </div> tags create a new division or line break, but otherwise function just like the <span> tag.

Creating a Style Class

• A class is a named definition of one or more styles.– Create the class by prefixing its name with a

dot in the CSS file.

Creating a Style ID

• An ID is a unique style identifier intended to apply to one, and only one, Web page element onscreen.

Absolute Positioning

• Absolute positioning enables you to position page elements precisely onscreen based on x,y coordinates.– The upper-left corner of the browser window

is position 0,0.

– Absolute positioning allows you to position overlapping objects. The z-index can be used to tell the browser the order in which to display objects that overlap.

Z-index Example

Z-index Example

Dynamic HTML

Dynamic HTML

• Dynamic HTML is a term invented by Microsoft to refer to the animated Web pages you can create using the DOM to combine HTML with style sheets and scripts that bring Web pages to life.

Animation Effects

• You can use absolute positioning to place an object anywhere on the screen.

• JavaScript has a timer event that allows you to vary the x,y coordinates dynamically.

Animation Effects Code

Code Analysis

• The <body> start tag is programmed to fire the BeginAnimation() function when the page loads:

Code Analysis

Gradient Effects

• A gradient is a graphical effect created by colors fading gradually across or down the screen.

Dynamic Gradient Effects

• The code to create a gradient background for a Web page is given below:

– The color is formatted #AARRGGBB, where AA is the opacity ranging from 00 (transparent) to FF (full color), RR is red, GG is green, and BB is blue.

Page Transitions

• A page transition is the style or manner in which the screen changes when the browser brings up a new document and displays it onscreen.

Page Transitions

• To set the transition effect that users will see when the page comes onscreen, insert the following in the <head> section:

• To set the transition effect that users will see when the page leaves the screen:

Page Transitions

Microsoft’s Code Generator

http://msdn.microsoft.com/workshop/samples/author/dhtml/DXTidemo/DXTidemo.htm

XML and XHTML

What Is XML?

• XML (eXtensible Markup Language) is a simple, self-describing markup language that enables computers to read and understand the structure of different kinds of documents and to exchange data across different operating systems, software applications, and hardware configurations without requiring any human intervention.– Tags define the structure of the data.– Visit www.xml.org for more information.

XML Schema

• An XML schema is the structural definition of the types of elements that can appear in a document, the attributes each element may have, and the relationships among the elements.– Schema files end in XSD (XML Schema

Definition).

Sample XML Schema

Encoding XML Data

DOCTYPE Declaration

• The DOCTYPE declaration identifies the schema that defines the tag structure.– If all tags precisely follow the schema, the

document validates and is well formed.– If it does not validate, it is malformed.

XML Editor

• XML files are plain text and can be created and edited with Notepad.

• However, it is easier to use an XML editor.– Microsoft’s Visual Studio .NET is the premier

suite of tools for creating Web applications.

XSL

• eXtensible Stylesheet Language (XSL) is an XML dialect that Web designers use to specify the styling, layout, and pagination of the structured content in an XML document for some targeted presentation medium, such as a Web browser, a printer, an eBook, a screen reader, or a hand-held device.– Visit www.w3.org/TR/xsl for more information.

XSLT

• XSL Transformation (XSLT) language is an XML dialect that Web designers use to transform documents from one format into another.

XSLT Example

Loose and Strict HTML

• Loose structural rules means that the Web page is using structural elements in use today but that may fade in the future.– To declare a page using the loose definition:

– To declare a page using the strict definition:

Loose and Strict XHTML

• XHTML is a reformulation of HTML in XML.• Loose XHTML relates to the differences

between XML and SGML.– To define loose XHTML:

– To define strict XHTML:

• For more info, go to www.w3.org/TR/xhtml1

XML Module and SMIL

• An XML module is a collection of semantically- related XML elements and attributes oriented toward accomplishing a certain task or function.

• Synchronized Multimedia Implementation Language (SMIL) is an XML-based language that was created by the W3C for enabling developers to include multimedia events in Web documents.

XHTML+SMIL

• XHTML+SMIL permits the Web designer to use SMIL animations, timings, and transitions within a conventional HTML or CSS page layout.– HTML+TIME is Microsoft’s implementation

that works with IE versions 5.5 and later.