Beginning JavaScript Third Edition phần 7 ppt

To define the style for a particular element, use the following format: elementName { style-property-name: style property value; another-style-property: another value; } This CSS code is

Trang 1

The second problem is how to handle the event The image rollover DHTML script must retrieve the ment that the event fired upon In IE, this element is retrieved with the srcElementproperty In non-IEbrowsers, the targetproperty is the desired property Thankfully, this problem has a straightforwardsolution: branch the code according to which browser is displaying the page In Chapter 5 you learnedhow to use object detection to determine which browser the user is using Do the same thing here.Consider the following code:

ele-var elementTarget; //contains either the srcElement or the target property

if (evt.srcElement) { //The browser is IEelementTarget = evt.srcElement;

}

//more code here

The first line of this code creates a variable called elementTarget, which stores either the srcElement

or targetproperty, depending upon the browser that loaded the page The next line uses object tion to determine the browser In this case, the srcElementis checked If it exists, then the browser is IE,and you can safely use the property

detec-Next, write code for the other browsers If the srcElementproperty doesn’t exist, the browser ously isn’t IE, and you can use the targetproperty

obvi-var elementTarget; //contains either the srcElement or the target property

} else { //The browser is non-IEelementTarget = evt.target;

}

Now you can use the elementTargetvariable to access the HTML element that the event was firedupon The following example shows the only time the code branches to accommodate the differingbrowsers

Try It Out Cross-Browser Image RolloverThis example modifies the image rollover you previously wrote to work in all modern browsers

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”

Trang 2

} else { //The browser is non-IEelementTarget = evt.target;

}

if (evt.type == “mouseover”) { //The mouse rolled over the image

elementTarget.src = “o.gif”; //So change the image’s src property.}

if (evt.type == “mouseout”) { //The mouse moved out

elementTarget.src = “x.gif”; //So change it back to the original.}

Trang 3

Move the mouse pointer over the image, and it changes to an O (see Figure 12-6).

In the script block, the image_eventHandler()function is defined

function image_eventHandler(evt) {var elementTarget;

//more code here}

Trang 4

It accepts an event object as an argument, and the first line creates a variable called elementTarget.Next, the code branches to accommodate the different browsers:

This code consolidates the differing event object implementations into one usable variable:

elementTarget To do this, use object detection to determine the browser and assign the appropriateproperty to the elementTargetvariable

Since this function handles two events, it needs to determine which event called the function As youalready know, the typeproperty contains this information First check to see if the event was caused bythe mouse pointer moving over the image element:

if (evt.type == “mouseover”) { //The mouse rolled over the image

elementTarget.src = “o.gif”; //So change the image’s src property

Trang 5

elementTarget.src = “o.gif”; //So change the image’s src property.

}

if (evt.type == “mouseout”) { //The mouse moved out

elementTarget.src = “x.gif”; //So change it back to the original

}}

This code compares the type property to the string mouseoutand changes the image’s srcpropertyback to x.gifif this event was fired And with these final few lines of code, your first cross-browserDHTML script is complete!

These examples have focused on using the event handler attributes of HTML elements The next sectionfocuses on using event handlers that are assigned through JavaScript

Event Handlers as Properties Revisited

There is one glaring difference between assigning event handlers with HTML attributes and assigningthem with JavaScript With the HTML attributes, you were able to pass arguments to the function han-dling the event (for example, the eventobject) When using properties, though, you cannot pass anyarguments to the function when assigning the event handler:

document.images[0].onmouseover = image_eventHandler(event); //This is wrong!

document.images[0].onmouseover = image_eventHandler; //This is correct

This isn’t really a problem for IE, as the eventobject is a part of the window object, which is global Fornon-IE browsers, the browser automatically passes the event object to the event handler when the event

fires So handling events in this fashion is almost identical to handling them as you did in the previous

Trang 6

elementTarget = evt.target;

eventType = evt.type;

}

if (eventType == “mouseover”) { //The mouse rolled over the image

elementTarget.src = “o.gif”; //So change the image’s src property.}

if (eventType == “mouseout”) { //The mouse moved out

}}

You can’t access an HTML element in JavaScript if it hasn’t been loaded by the browser.

The first thing in the script block is the image_eventHandler()function It is essentially the same as inthe prior sections, but this iteration contains a few changes The first is the addition of the eventTypevariable This variable will contain the value of the typeproperty of the event object

Trang 7

This happens because IE does not pass a value to event handlers when the event fires So when ing the code to assign elementTarget, you must also assign the eventTypevariable its value, like this:function image_eventHandler(evt) {

if (eventType == “mouseover”) { //The mouse rolled over the image

elementTarget.src = “o.gif”; //So change the image’s src property

}

Trang 8

if (eventType == “mouseout”) { //The mouse moved out.

}}

This code hasn’t changed from the previous examples: It determines what event called the function andchanges the srcproperty accordingly Now all that is left is to wire up the events Do so by using theonmouseoverand onmouseoutproperties of the image element

The first problem with this approach is that you need to wrap the content with these formatting tags,and styling different pieces of content the same way requires repeated tag use This results in extra workfor web page authors Also, changing an existing style (say blue underlined text)to a new style (redboldface text), requires the change of every <font>and <u>tag throughout the document

To add to this problem, you may want to set a very specific size for the text of the <h1>tags The sizesoffered by the font are very limited, and those few sizes enable you to specify only whether the fontshould be larger or smaller than normal The font sizes are relative to the font size the user has set in herbrowser This makes it possible for text to be rendered in an unreadable size

HTML also does not give you control over where elements appear in the page The browser displays HTMLelements according to where the tags appear in the source code Therefore, the following HTML will alwaysdisplay Helloon the first line and Worldon the second line:

<p>Hello</p>

<p>World</p>

This is what is referred to as the document flow — how the browser naturally displays the web page.

Without CSS, it is not possible to change the document flow You can use formatting tags for differenttypes of positioning (like lists or tables), but you can’t specify an exact position

Trang 9

CSS solves each of these problems It enables you to specify certain styles that can be used throughoutthe entire web page easily and efficiently It also gives you more control over how the web page looks,thereby giving you more power to make the page look the way you first envisioned it.

Adding Some Style to HTML

You can add style to an HTML page by creating style sheets within the <style>tag or by specifyingstyleattributes in an element’s opening tag There are a number of ways to define style, but this primercovers only three of them:

❑ Defining a style for certain HTML elements, for example a style for all paragraph elements

❑ Creating a style class You then specify in the class attribute of a tag the name of the style class

to be applied

❑ Specifying style for just one element

The <style> Tag

You can use the first two ways of adding style mentioned in the previous list — defining a style for atype of tag and defining a style class — by creating a <style/>element inside the <head/>element

To define the style for a particular element, use the following format:

elementName { style-property-name: style property value;

another-style-property: another value;

}

This CSS code is referred to as a CSS rule A rule consists first of a selector A selector selects the HTML

element to which the style rule will be applied In the previous example, elementNameis the selector.Any HTML element name can be used as a selector; just remember to take out the angle brackets (< and >).For example, to define a selector for all <p>tags, you would use an elementNameof p

After the selector comes a set of style declarations inside the curly braces A declaration consists of a

prop-erty name, a colon (instead of an equals sign), and then the propprop-erty’s value Style declarations are rated by semicolons For example, let’s say you want all <p>tags to be blue, in the Arial font, and 10points in size First create a rule to select the <p>tags Then add the declarations by specifying the font-family, font-size, and colorproperties The following code does this:

sepa-<html>

<head>

<style>

p { font-family: arial;

Trang 10

<p>Some blue arial 10 point text</p>

<p>Also blue arial 10 point text</p>

</body>

</html>

The first property specified is font-family, which is assigned the value arial This is followed by asemicolon to mark the end of that style declaration Next the font-sizeproperty is defined and itsvalue set to 10pt Finally you specify the colorproperty and its value of blue Both the paragraphsdefined in the page will have the same font, font size, and color

If you want to define similar properties for the <td>tags, add a rule inside the <style>tag

<style>

p {font-family: arial;

font-size: 10pt;

color: blue;

}

td {font-family: arial;

CSS is not limited to this basic functionality, however You can define what are called classes: CSS rules

that can be applied to a variety of elements In fact, with CSS classes, you can make any element emulatealmost any other

A class’s selector is a custom name that you define Classes are distinguished by a dot in front of theirnames The following code defines a class called heading1:

<style>

font-size: 10pt;

color: blue;

}

.heading1 {font-size: 24pt;

color: orange;

}

</style>

Trang 11

The heading1class’s style declarations specify that the font-sizeshould be 24ptand that the colorshould be orange Applying this class to an HTML element requires the use of the classattribute Allelements within the <body/>element can be classed The following code modifies the previous HTMLexample The first of the two paragraphs is classed as heading1.

<html>

<head>

<style>

font-size: 10pt;

color: blue;

}

.heading1 {font-size: 24pt;

<p class=”heading1”>A Heading in orange arial 24 point text</p>

<p>Some blue arial 10 point text</p>

</body>

</html>

Now the first paragraph has the heading1class of style applied Therefore, it is rendered as orange point text in the Arial font The heading1class does not declare a font face property; it inherits the fontface from the prule The style defined in the prule is applied to all <p/>elements So the first <p/>ele-ment has both the prule and the heading1rule applied to it If the same style declarations are defined

24-in both rules, the declarations 24-in the class rule take precedence Therefore the first paragraph has theArial font applied from the <p/>definition, but the sizeand colorstyle declarations of the heading1class override those defined in the prule

The style Attribute

The third way of defining styles uses the styleattribute, which most HTML elements support Forexample, if you wanted just one paragraph to be in green italics you could change the HTML tag defini-tion like this:

Some green arial 10 point text

</p>

Define the style declarations inside the styleattribute of the tag, just as you did previously when it wasinside the <style>tag First set the font-styleattribute to italic; then, after a semicolon, set thecolorto green As before, the setting of the colorproperty here overrides the setting in the style sheetdefinition for all <p/>elements However, the paragraph will still use the font-familyand font-sizeproperties set in the <style/>tag

Trang 12

Cascading Style Sheets

The style declarations defined for one element may cascade down to the elements contained within thatelement; hence the name Cascading Style Sheets In other words, some style declarations of a parent ele-ment cascade down to the child elements inside For example, in the following code no rules are definedfor the two paragraph elements Instead a rule for <div/>elements is created, and one such elementcontains a sole <p/>element The paragraph outside the <div/>has no style applied to it, yet the <p/>inside the <div/>inherits the style set for the <div/>tag

<html>

<head>

<style>

div {font-family: arial;

Properties are essentially broken up into distinct groups Although it is outside the scope of this primer

to cover all properties, there are quite a few to discuss

Colors and Background

Probably the simplest styles you can apply to a web page are colors You can change the color of text(foreground color), as well as the color of the background You are not limited to using a color for yourbackground; you may also choose to use an image

Foreground Color

Changing the foreground color is quite simple, and you have seen examples of it in this chapter The CSSproperty that controls this color is the colorproperty, and you have a variety of ways to assign itsvalue This little section will show you the many ways you can assign the color red to your text

The first method of assigning color is the use of a color keyword

color: red;

Trang 13

Using this approach ensures that your CSS is quite readable; however, you are limiting yourself whenusing keywords The CSS specification defines 17 color keywords that every browser should implement:aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white,and yellow Some browsers implement many more colors, while others do not You can easily avoid anyproblems caused by this discrepancy by using either the previously listed names or one of the othercolor values.

The second approach enables you to assign the specific red, green, and blue values of a color by usingrgb()notation This notation allows two types of values: integer values that range form 0–255, and per-centage values from 0%–100% You assign a value for red, green, and blue

color: rgb(255, 0, 0);

color: rgb(100%, 0%, 0%);

Whether you use plain integers or percentages, the result of the preceding CSS will be the same

Lastly, you can use hexadecimal values to assign colors In order to do this, you must prepend the adecimal number with a pound sign (#) Hexadecimal numbers in CSS typically consist of three pairs ofnumbers

back-Backgrounds and Color

In order to assign a color to an element’s background, you must use the background-colorproperty:background-color: gray;

color: red;

The first line sets the background color of the element to gray, and the text assumes the color red Asmentioned earlier, the preceding color principles apply to background colors as well You can use colornames, hexadecimal numbers, or rgb()notation to assign a background color

Sometimes all you want is a little color, but other times you want to spruce up your web site with more —like an image Through CSS, it’s possible to enable an element to display an image in its background To

do this, you use the background-imageproperty:

Trang 14

The first thing you may notice is the use of the url()notation This specific example shows the use of arelative URI, meaning that myImage.gifis located in the same directory as this style sheet You can alsouse an absolute URI like the following:

Both ways are correct Remember that you can use both background-colorand background-image;you’re not limited to using just one or the other

It is also possible to use single quotes (‘) or double quotes(“) in url()notation like this:

Mac browsers For compatibility reasons, it is best to leave quotes out.

Fonts and Text

Text is the most important aspect of any web site Ninety-nine percent of the time, a visitor comes toread what you have to say Therefore, it’s important to learn how to style your text You’ve alreadylearned how to set the color of text; now take a look at how you can set the type of font, as well as itssize, weight, and decoration

The font-familyproperty, as its name suggests, sets the font for the text You have a variety of fontsinstalled on your computer at your disposal; you can also use generic fonts in the event that a viewer’scomputer lacks the font (or fonts) you specify:

font-family: arial, verdana, sans-serif;

In this CSS, the font-familyproperty is set to three values: arial, verdana, and sans-serif If theviewer’s computer does not have the Arial font installed, the browser attempts to use Verdana If neitherArial nor Verdana is installed, the browser uses the generic sans-serif font Using a generic font, even if it

is the “last resort” font, is encouraged, as it tells the browser what type of font to use if none of your ferred fonts are available Following is the list of generic fonts:

font-size: 12px;

Trang 15

When the browser renders text with this style, the font is set to 12 pixels in height There is also no limit

to the size you can use; however, you’ll want to use something that is easy to read

When you want to emphasize a certain part of the text, you have several options First, you can boldyour text with the font-weightproperty:

font: font-style font-weight font-size font-family;

For example, if you wanted to set the font contained in an element to be 12-point bold text and to use theVerdana font face, your CSS would look like this:

font: bold 12pt verdana;

You don’t have to specify each value of each property, only the ones you desire However, it is important

to keep them in the order listed earlier Take the following example:

font: bold italic verdana 12pt; /* Wrong Format */

This CSS is not in the correct format, because font-styleshould come before font-weight, andfont-sizeshould come before font-family Some browsers may display the text with the desiredstyle; however, other browsers may not — so it is best to keep to the standard order

Lastly, you can underline text by using the text-decorationproperty:

text-decoration: underline;

This property is not related to the font properties discussed earlier Therefore, you cannot add underline

to the fontproperty

Links, by default, are underlined You can change this by setting text-decorationtonone.

The presentation of your text plays an important role in the way users perceive your web site Make surethat it is easy to read: the proper size, color, and emphasis will make your visitors happy

Showing and Hiding Elements

All elements are shown by default; however, you may wish to hide (or show) content based upon anaction the user takes For example, you can show an element that contains information on a specific linkwhen the user moves her mouse over the link, or you can cause an element to pop up in order to displayinformation about a certain form element that the user is currently typing in

Trang 16

But how do you show and hide elements? With the visibilityproperty:

visibility: hidden;

Setting this property to hiddenhides the element Using this property, however, has a side effect.Hiding an element does not remove it from the document’s flow; instead you see the area in which theelement is located, yet the element’s contents are hidden In other words, you end up with a blank areawhen an element is hidden

To show a hidden element, set the visibilityproperty to visible:

display: none;

The displayproperty can accept other values, which cause the element to be displayed again For plicity’s sake, we’ll cover two here The first is the value block Setting the displayproperty to blocktells the browser to render the element as a block, much as it displays paragraphs

sim-display: block;

The second value is inline This property displays the element not as a block, but as a line Many ments have an inline display by default, like <span/>elements and <a/>elements

ele-display: inline;

It is important to note that the visibility and display properties are two different properties and should

be treated as such The displayproperty has the ability to remove an element visually from the HTMLpage, and the visibilityproperty simply hides or shows an element

It’s All About Position

HTML content normally flows from the top to the bottom of a page, the position of the output beingbased on where the tag is defined in the page Consider the following HTML:

Trang 17

However, it is possible to position content with style sheets You can do it in many ways, but this primer

only covers two With absolute positioning the positioned element is removed from the document’s flow and can be placed anywhere in the browser’s viewport With relative positioning the element is calculated

according to the normal flow, but it can be shifted relative to its original position You can specifywhether an element is positioned relatively or absolutely by using the positionstyle attribute, whichtakes the values relativeand absolute

The keys to positioning an element are the CSS properties leftand top You can use a number of ent units for these values, but for simplicity’s sake we’ll stick here with those most commonly used: pix-els and percentages Let’s start with pixels

differ-When you set your computer screen’s display resolution, you can choose values like 800 * 600or 1024

* 768, and so on These values are actually pixels, so 800 * 600means that your screen will be treated asbeing 800 pixels wide by 600 pixels high These values are independent of your actual physical monitorsize; they determine the maximum sizes of the browser window If the user has an 800-by-600 screen andyou set a <div/>element to appear 1,000 pixels from the top, the element will be offscreen You need toalso keep in mind that the user can resize the browser window and that screen resolution is a theoreticalmaximum Also, the browser toolbars and frame take up some space

As far as absolute positioning is concerned, the top left-hand corner of the browser window is 0,0andthe bottom right-hand corner will be at the upper limit of the values that determine screen resolution Sofor 800 * 600resolutions, the bottom right-hand corner is at the coordinates 800,600, whereas for 1024

* 768resolutions, it’s 1024,768, as shown in Figure 12-7

Figure 12-7

If you specified that a <div/>element’s leftstyle attribute be set to 400 pixels and its topstyleattribute to 300 pixels, the element’s top left-hand corner would be near the middle of a browser win-dow on an 800 * 600resolution display If the display were set to 1024 * 768, the top left-hand cornerwould be about two-fifths across the browser window by about two-fifths down This position has beenmarked approximately on the diagram in Figure 12-7

Let’s look at an example Imagine you have an absolutely positioned <div/>element at a position left

of 200and topof 100, and with other style attributes specifying it should be 200 pixels wide by 200 els deep and have a background color of blue Your browser window would look something like what

pix-is shown in Figure 12-8

0,0

800,600

1024,768400,300

Trang 18

Figure 12-8

Now how can you position a paragraph contained within the <div/>element relative to that <div/>element? If you think of the <div/>element as a sort of screen within a screen, in this case a screen ofresolution 200 * 200, relative positioning is easier to understand

If you think of the <div/>element as a browser window itself, the top left-hand corner of the <div/>element is 0,0and the bottom right-hand corner is 200,200— that is, the <div/>element’s width andheight — in this case If you then specify that the <p/>element should be at the relative position leftof

100and topof 100, that would leave the top left-hand corner of the <p/>element in exactly the middle

of the <div/>element in which it is contained

What if you relatively position a tag that is not inside another tag? Well, in that case it’ll be relative to the

<body/>element, which is the whole page itself Essentially this is the same as absolute positioning ifthe whole page fills the screen

Let’s see the HTML for a page with the <div/>and <p/>elements at the positions we’re discussing

<html>

<head>

<style>

.divStyle1 {background-color: blue;

position : absolute;

width: 200px; height: 200px;

}

.pStyle1 {color: white;

<p class=”pStyle1” style=”left: 100px; top: 100px”>My Paragraph</p>

Trang 19

Type this into a text editor and save it as relativepos.htm.

In the <style/>element, you create two style classes: divStyle1and pStyle1 Within these, you ify the style declarations previously discussed In divStyle1you specify a blue background, that thepositioning should be absolute, and the width and height in pixels pStyle1specifies only the color ofthe text and that it should be positioned relatively

spec-Then, in the <div/>element, the CSS class divStyle1is assigned by using the classattribute, and thestyleattribute specifies the leftand toppositions of the tag Because the divStyle1class’s specifiedpositioning should be absolute, the values 200and 200will be absolute screen values

In the <p/>element, you apply the pStyle1class and then specify the position of the element as 100pxand 100px This time the element is placed relative to its position in the document flow, with 0,0as thetop left-hand corner of the <div/>and 200,200as the bottom right-hand corner

Most modern browsers require you to specify the measuring unit when assigning values for top, left,

height, and width As with the font-sizeproperty we looked at earlier, you simply add pxto the end of the numerical value.

On a screen with a resolution of 800 * 600and the browser window maximized, the example shouldlook like what is shown in Figure 12-9

Figure 12-9

Remember that the leftand topstyle properties apply to the left and top of the element, respectively,putting the top left of the letter M at position 100, 100within the <div/>element

<DIV> top left at 200, 200 based on screen

<P> top left at 100, 100 based on <DIV>’s top left corner

Trang 20

In addition to specifying position properties as pixels, you can use percentages To do this you simplyput %at the end of the value instead of px For example, to position the <div/>and <p/>elements sothat the top left of the <div/>appears in the middle of the browser window and the top left of the <p/>element appears in the middle of the <div/>, regardless of screen resolution, you’d write the followingcode:

<p class=”pStyle1” style=”left: 50%;top: 50%”>My Paragraph</p>

</div>

Dynamic HTML

You might be wondering why you have this introduction to style sheets in a book about JavaScript.Remember, DHTML is the manipulation of an HTML document after it is loaded into the browser, andthe most common way to manipulate the document is by changing the way HTML elements look Inorder to do this, you need to go over a few topics First, you’ll take a look at how to find an element inthe document Second, you’ll look at how you can change an element’s style programmatically

Accessing Elements

The Document Object Model (DOM) holds the ability you need to find and access HTML elements; theDOM is a hierarchical tree, and you can certainly climb it, inspect every branch and leaf, and find whatyou’re looking for However, the DOM provides a much easier way to find specific elements

The DOM exposes a method called getElementById(), which is used to find, in a web page, specificHTML elements whose idattributes match that of the argument passed to the method Consider the fol-lowing HTML as an example:

<div id=”divAdvert”>Here is an advertisement</div>

This HTML creates a <div/>element, and the idattribute is assigned divAdvert With this tion, you can easily retrieve this element by using getElementById()

informa-var divAdvert = document.getElementById(“divAdvert”);

This JavaScript code retrieves the <div/>element created earlier, and you can use the divAdvertable to programmatically manipulate it There are a variety of ways to change HTML elements; the mostcommon, though, are changing the way an element looks and changing an element’s position

vari-Changing Appearances

Probably the most common use for DHTML is to change the way an element looks Such a change cancreate an interactive experience for visitors to your web site, and can even be used to alert them toimportant information or that an action is required by them Changing the way an element looks con-sists almost exclusively of changing CSS properties for an HTML element You can do this two waysthrough JavaScript: You can change each CSS property, or you can change the value of the element’sclassattribute

Trang 21

Using the style Property

In order to change specific CSS properties, you must look, once again, to the DOM All modern browsersimplement the styleobject, which maps directly to the element’s styleattribute This object containsCSS properties, and by using it you can change any CSS property that the browser supports Use thestyle property like this:

oHtmlElement.style.cssProperty = value;

The CSS property names generally match those used in a CSS file; therefore, changing the text color of

an element requires the use of the colorproperty, like this:

var divAdvert = document.getElementById(“divAdvert”); //Get the desired element

divAdvert.style.color = “blue”; //Change the text color to blue

There are some cases, however, in which the property name is a little different from the one seen in aCSS file CSS properties that contain a hyphen (-) are a perfect example of this exception In the case ofthese properties, you remove the hyphen and capitalize the first letter of the word that follows thehyphen The following code shows the incorrect and correct ways to do this:

divAdvert.style.background-color = “gray”; //Wrong

divAdvert.style.backgroundColor = “gray”; //Correct

You can also use the styleobject to retrieve styles that have previously been declared However, if thestyleproperty you try to retrieve has not been set with the styleattribute (inline styles) or with thestyleobject, you will not retrieve the property’s value Consider the following style sheet which setsthe style for the element with divAdvertas its id:

<style>

#divAdvert {background-color: gray;

}

</style>

First, a new concept is present in this CSS Look at the selector, and how it is preceded by a pound sign(#) In CSS, this symbol is an ID selector, and it selects an HTML element whose ID attribute matches theselector name (without the pound sign) Therefore, this style rule is applied to the <div/>elementdefined earlier in the section In this CSS, you set the element to have a background color of gray Also,the HTML element has changed to include the use of the styleattribute:

<div id=”divAdvert” style=”color: green”>I am an advertisement.</div>

When the browser renders this element, it will have green text on a gray background If you had usedthe styleobject to retrieve the value of both the background-colorand colorproperties, you’d getmixed results:

var divAdvert = document.getElementById(“divAdvert”); //Get the desired element

alert(divAdvert.style.backgroundColor); //Alerts an empty string

alert(divAdvert.style.color); //Alerts green

Trang 22

You get these results because the styleobject accesses the styleattribute of the element If the styledeclaration is set in the <style/>block, you cannot retrieve that property’s value with the styleobject.

Try It Out Using the style Object

Let’s look at a simple example of changing the appearance of some text by using the styleobject

}

</style>

function divAdvert_onMouseOver() {//Get the element

var divAdvert = document.getElementById(“divAdvert”);

//Italicize the textdivAdvert.style.fontStyle = “italic”;

//Underline the textdivAdvert.style.textDecoration = “underline”;

}

function divAdvert_onMouseOut() {//Get the element

//Set the font-style to normaldivAdvert.style.fontStyle = “normal”;

//Remove the underlinedivAdvert.style.textDecoration = “none”;

Trang 23

Figure 12-10

Roll your mouse over the text, and you’ll see it become italicized and underlined (see Figure 12-11)

Trang 24

When the mouse pointer enters the <div/>element, the divAdvert_onMouseOver()function is called.The following shows the function declaration and the first line:

Trang 25

//more code here}

Next, underline the text by using the textDecorationproperty:

//Underline the textdivAdvert.style.textDecoration = “underline”;

//Set the font-style to normaldivAdvert.style.fontStyle = “normal”;

//Remove the underlinedivAdvert.style.textDecoration = “none”;

}

The code for this function somewhat resembles that for the divAdvert_onMouseOver()function First,you retrieve the divAdvertelement; next, set the fontStyleproperty to normal, thus removing theitalics Lastly, set the textDecorationto none, which removes the underline from the text

Changing the class Attribute

As you learned earlier, you can assign a CSS class to elements by using the element’s classattribute.This attribute is exposed in the DOM by the classNameproperty and can be changed throughJavaScript to associate a different style rule with the element

oHtmlElement.className = sNewClassName;

Trang 26

Using the classNameproperty to change an element’s style is advantageous in two ways First, itreduces the amount of JavaScript you have to write, which no one is likely to complain about Second, itkeeps style information out of the JavaScript file and puts it into the CSS file where it belongs Makingany type of changes to the style rules is easier because you do not have to have several files open inorder to change them.

Try It Out Using the className Property

Let’s revisit the code from style_object.htmfrom the previous section, but with a few revisions

text-decoration: none;

}

.newStyle {font: italic 12pt arial;

//Change the classNamedivAdvert.className = “newStyle”;

}

function divAdvert_onMouseOut() {//Get the element

//Change the classNamedivAdvert.className = “defaultStyle”;

Trang 27

Save this file as className_property.htm This page behaves in the exact same manner asstyle_object.htm When you place your mouse pointer over the text, the text becomes italicized andunderlined; when you move your pointer off of the text, it changes back to normal.

How It Works

There are a few key differences between this HTML page and the one created using the styleobject Forstarters, the #divAdvertstyle rule is removed and replaced with two CSS classes:

.defaultStyle {font: normal 12pt arial;

text-decoration: none;

}

.newStyle {font: italic 12pt arial;

text-decoration: underline;

}

The first class, called defaultStyle, is the rule first applied to the <div/>element It declares a normal12-point Arial font with no underlining Next, another class called newStyleis created This new rulecontains style declarations to specify 12-point italic Arial that is underlined With these changes, the

<div/>element definition is changed to use the defaultStyleCSS class:

<div id=”divAdvert” class=”defaultStyle” onmouseover=”divAdvert_onMouseOver()”onmouseout=”divAdvert_onMouseOut()”>Here is an advertisement.</div>

Notice that the idattribute is the same: JavaScript still needs to access the element in order to change itsclassNameproperty The onmouseoverand onmouseoutevent handlers remain the same, as you needthe same functionality that style_object.htmhas

The last change is in the JavaScript itself When the mouseoverevent fires on the element, the associateddivAdvert_onMouseOver()function is called This function consists of two lines of code as opposed tothe three lines you used for the styleobject

//Change the classNamedivAdvert.className = “newStyle”;

}

The first statement retrieves the <div/>element by using the getElementById()method The functiongoes on to change the classNameproperty to the value newStyle With this line, the divAdvertele-ment takes on a new style rule and the browser changes the way it looks

When you move your mouse pointer off of the text, the mouseoutevent fires and divAdvert_

onMouseOut()executes This function is almost identical to divAdvert_onMouseOver(), except thatthe classNameis set back to its original value:

Trang 28

Positioning and Moving Content

Changing the appearance of an element is an important pattern in DHTML, and it finds its place inmany DHTML scripts However, there is more to DHTML than just changing the way content appears

on the page; you can also change the position of an element with JavaScript

Earlier in the chapter you learned about the positionCSS property, where you can specify an element

to be absolutely or relatively positioned You also learned about the topand leftproperties, whichenable you to position the elements where you desire You can do the same thing with JavaScript bychanging the values of these properties

Just Move It Over There

Moving content with JavaScript is just as easy as using the styleobject You use the positionproperty

to change the type of position desired, and by using the leftand topproperties, you can position theelement

divAdvert.style.left = “100px”; //Set the left position

divAdvert.style.top = “100px”; //Set the right position

This code first retrieves the divAdvertelement Then it sets the element 100 pixels from the left and topedges Notice the addition of pxto the value assigned to the positions Many browsers require you tospecify a unit when assigning a positional value; otherwise, the browser will not position the element

Try It Out Moving an Element Around

Moving an element around on the page, as you’ve seen, is quite similar to changing other styles with thestyle object However, the ability to move an element on the page is one that is used quite often, and youwill definitely see it later in the chapter Therefore, you are going to build a page that enables you tospecify the location of an element through form fields

Trang 29

}

</style>

function moveBox() {var divBox = document.getElementById(“divBox”);

var inputLeft = document.getElementById(“inputLeft”);

var inputTop = document.getElementById(“inputTop”);

Trang 30

Figure 12-12

When you enter numerical values in the text fields and press the button, the box will move to the nates you specified Figure 12-13 shows the box moved to 100,100

Trang 31

</form>

</div>

Trang 32

When you click the Submit button, the browser fires the submitevent for the form When a submit ton is pressed, the browser attempts to send data to the web server This attempt at communicationcauses the browser to reload the page, making any change you made through DHTML reset itself.Therefore, you must force the browser to not reload the page You do this by setting the submitevent toreturn a value of false.

but-<div id=”divBox”>

</form>

</div>

Now, when you click the Submit button, it appears that nothing happens This is the desired result

In order for the <div/>element to be moved around on the page, it needs to be positioned This ple positions the element absolutely, although it would be possible to position it relatively as well

width: 100px;

}

By setting the <input/>tags to be 100 pixels wide, you can fit everything nicely into the box So at thispoint, the HTML is primarily finished and it’s styled All that remains is to write the JavaScript toretrieve the values from the form fields and move the box to the coordinates provided by the form.The function responsible for this is called moveBox(), and it is the only function on this page

function moveBox() {

var divBox = document.getElementById(“divBox”); //Get the boxvar inputLeft = document.getElementById(“inputLeft”); //Get one form fieldvar inputTop = document.getElementById(“inputTop”); //Get the other one

//more code here}

The function starts by retrieving the HTML elements needed to move the box First it gets the <div/>element itself, followed by the text boxes for the left and top positions, and stores them in the

inputLeftand inputTopvariables, respectively With the needed elements selected, you can nowmove the box

Trang 33

function moveBox() {var divBox = document.getElementById(“divBox”);

var inputLeft = document.getElementById(“inputLeft”);

var inputTop = document.getElementById(“inputTop”);

One last thing: Currently, nothing happens when you click the submit button You’re using the form’ssubmitevent to suppress the page from attempting to send data to the server Add in a call tomoveBox()there, too You need only to separate the statements with a semicolon

</form>

</div>

And with that addition, the box moves to the location specified by the numbers input by the user

Example: Animated Advertisement

Changing the appearance and position of an element are important patterns in DHTML, and they findtheir places in many DHTML scripts Perhaps the most creative use of DHTML is in animating content

on the page You can perform a variety of animations with DHTML You can fade text elements orimages in and out, give them a swipe animation (making it look like as if they are wiped onto the page),and animate them to move around on the page

Animation can give important information the flair it needs to be easily recognized by your reader, aswell as adding a “that’s cool” factor Performing animation with DHTML follows the same principles ofany other type of animation: You make seemingly insignificant changes one at a time in a sequentialorder until you reach the end of the animation Essentially, with any animation you have the followingrequisites:

1. The starting state

2. The movement towards the final goal

3. The end state; stopping the animationMoving an absolutely positioned element, as we’re going to do in this section, is no different First, withCSS, position the element at the start location Then perform the animation up until you reach the endpoint, which signals the end of the animation

Trang 34

In this section you’ll learn how to animate content to bounce back and forth between two points To dothis you need one important piece of information: the content’s current location.

Are We There Yet?

The DOM in modern browsers exposes the offsetTopand offsetLeftproperties of an HTML ment object These two properties return the calculated position relative to the element’s parent element:offsetToptells you the toplocation, and offsetLefttells you the leftposition The values returned

ele-by these properties are numerical values, so you can easily check to see where your element currently is

in the animation For example:

var endPointX = 394;

if (oElement.offsetLeft < endPointX) {

//Continue animation}

The preceding code specifies the end point — in this case, 394— and assigns it to the endPointXable You can then check to see if the element’s offsetLeftvalue is currently less than that of the endpoint If it is, you can continue the animation This example brings us to the next topic in content move-ment: performing the animation

vari-Get ‘Er Done

In order to perform an animation, you need to modify the topand leftproperties of the styleobjectincrementally and quickly In DHTML, you do this with periodic function execution until it’s time to endthe animation To do this, use one of two methods of the windowobject: setTimeout()or

setInterval() This example uses the setInterval()method to periodically move an element

Try It Out Animating Content

The following HTML page moves an element across the page from right to left:

Trang 35

var newLocation; //Will store the new location

if (switchDirection == false) { newLocation = currentLeft + 2; //Move the text 2 pixels to the right

if (currentLeft >= 400) { //We’ve reached our destinationswitchDirection = true; //So let’s turn around}

} else {newLocation = currentLeft - 2; //Move the text 2 pixels to the left

if (currentLeft <= 0) { //We’ve reached our destinationswitchDirection = false; //So let’s turn around}

How It Works

Inside the body of the page is a <div/>element This element has an idof divAdvertso that you canretrieve it with JavaScript, as this is the tag you want to animate

<div id=”divAdvert”>Here is an advertisement.</div>

There are no styleattributes in this tag, as all the style information is inside the style sheet In the stylesheet, you define a starting point for this <div/> You want the animation to go first from left to right,and you want it to start at the left edge of the browser

#divAdvert {position: absolute;

divAdvertalong the left edge of the viewport with the leftproperty

Trang 36

Within the script block is a global variable called switchDirection.

var switchDirection = false; //To keep track of which way we’re going

This variable keeps track of the direction in which the content is currently going If switchDirectionisfalse, then the content is moving from left to right, which is the default If switchDirectionis true,then the content is moving from right to left

Next in the script block you find the doAnimation()function, which performs the animation

function doAnimation() {

var divAdvert = document.getElementById(“divAdvert”); //Get the elementvar currentLeft = divAdvert.offsetLeft; //Get the current left positionvar newLocation; //Will store the new location

// more code here}

First you retrieve the divAdvertelement with the getElementById()method; you also retrieve theoffsetLeftproperty and assign its value to the currentLeftvariable You use this variable to checkthe content’s current position Next you create a variable called newLocation This variable will containthe new leftposition, but before you assign its value you need to know the direction in which the con-tent is moving

var divAdvert = document.getElementById(“divAdvert”); //Get the elementvar currentLeft = divAdvert.offsetLeft; //Get the current left positionvar newLocation; //Will store the new location

ani-You then need to check if the content has reached the leftposition of 400 pixels If it has, then you need

to switch the direction of the animation, and you do this by changing switchDirectionto true So thenext time doAnimation()runs, it will begin to move the content from right to left

The code for this new direction is similar to the previous code, except for a few key differences

var divAdvert = document.getElementById(“divAdvert”); //Get the elementvar currentLeft = divAdvert.offsetLeft; //Get the current left position

Trang 37

var newLocation; //Will store the new location

}

else {newLocation = currentLeft - 2; //Move the text 2 pixels to the left

Finally, set the new position of the content

function doAnimation() {var divAdvert = document.getElementById(“divAdvert”); //Get the elementvar currentLeft = divAdvert.offsetLeft; //Get the current left positionvar newLocation; //Will store the new location

}

else {newLocation = currentLeft - 2; //Move the text 2 pixels to the left

Trang 38

To run the animation, use the onloadevent handler in the <body/>element, and use the

window.setInterval()method to continuously execute doAnimation() The following code runsdoAnimation()every 10 milliseconds:

❑ Despite leaps and bounds by browser makers, some discrepancies still exist You learned how tocope with two different event objects by branching your code to consolidate two different APIsinto one

❑ Style sheets can be used to set the style for various types of tags, or for individual tags You canalso define classes that you can apply to certain tags using the classattribute Styles includethe font, color, and position of a tag

❑ DHTML enables you to change a page after it is loaded into the browser, and you can perform avariety of user interface tricks to add some flair to your page

❑ You learned how to change a tag’s style by using the styleand classNameproperties

❑ You also learned the basics of animation in DHTML, and made text bounce back and fourthbetween two points

Question 2

Create a <div/>element that floats around the page Use the edges of the browser’s viewport as aboundary

Trang 39

object-based programming language By everything, we mean everything You can change the

graphics, tables, forms, and even text itself by altering a relevant DOM property with JavaScript.The DOM should not be confused with the Browser Object Model (BOM) that was introduced inChapter 5 You’ll see the differences between the two in detail shortly For now, though, think ofthe BOM as a browser-dependent representation of every feature of the browser, from the browserbuttons, URL address line, and title bar to the browser window controls, as well as parts of theweb page, too The DOM, however, deals only with the contents of the browser window or webpage — in other words, the HTML document It makes the document available in such a way thatany browser can use exactly the same code to access and manipulate the content of the document

To summarize, the BOM gives you access to the browser and some of the document, whereas the

DOM gives you access to all of the document, but only the document.

The great thing about the DOM is that it is browser- and platform-independent This means thatdevelopers can finally consider the possibility of writing a piece of JavaScript code that dynami-cally updates the page, as you saw in the last chapter, and that will work on any DOM-compliantbrowser without any tweaking You should not need to code for different browsers or take exces-sive care when coding

The DOM achieves this independence by representing the contents of the page as a generic treestructure Whereas in the BOM you might expect to access something by looking up a property relevant to that part of the browser and adjusting it, the DOM requires navigation through its

Định dạng
Số trang	79
Dung lượng	1,36 MB