Transcript Code Analysis

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 semanticallyrelated 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.