12.6 Scripting Styles

Search in book...
Toggle Font Controls
Create new playlist

Name your new playlist

Playlist description (optional)
Sign In

Email address

Password

Forgot Password?

or

Continue with Facebook

Continue with Google
Sign Up

Full Name

Email address

Confirm Email Address

Password

or

Continue with Facebook

Continue with Google

The ﬁrst part of the onload event handler simply deﬁn es the updateCoun ter()

function, which is registered as a callback in the last line of the handler. Note that

setInterval() must b e called a fter the updateCounter() deﬁn ition or else you

will be registering an undef ined reference. Remember that function expressions are

not hoisted.

If yo u now load this page, you get the running countdown to the Summer Olympics,

which u pdates every 1000 milliseconds as speciﬁed by the seco nd argument of the

setInterval() function.

12.6 Scripting Styles

Professor: In the same way as HTML, it is, of course, possible to dynamically change

the document styling as well. You might have guessed that Element objects also have

the style property. We’re not going to use that prop erty, though, because it doesn’t

allow for separa ting the necessary CSS code fr om JavaScript. A much better approach

is to deﬁne all the CSS rules that you nee d in a separate CSS ﬁle and then only switch

between relevant class names in order to obtain the desired eﬀect. Incidentally, be-

cause class is a reserved word in JavaScript, the JavaScript property name reﬂecting

the class HTML attribute is classN ame instead.

I would now like to take you to Kubla Khan’s summer garden at Xan adu, which vividly

rises be fore us in Samu el Taylor Coleridge’s poem, “Kubla Khan.” The p oem is so

powerful that I didn’t have the nerve to shor te n it for the p urposes of the next example.

Nevertheless, we are g oing to use JavaScript and CSS to h ide part of the p oem and

make it available on demand by clicking a text, “Read the whole poem.” This is the

HTML part of the example:

<!DOCTYPE html>

<head>

<title>Kubla Khan</title>

</head>

<body>

<h1>Kubla Khan</h1>

<h2>By Samuel Taylor Coleridge</h2>

In Xanadu did Kubla Khan

A stately pleasure-dome decree:

Where Alph, the sacred river, ran

Through caverns measureless to man

Down to a sunless sea.

So twice five miles of fertile ground

With walls and towers were girdled round;

And there were gardens bright with sinuous rills,

238 Meeting 12. Using JavaScript to Control the Browser

Where blossomed many an incense-bearing tree;

And here were forests ancient as the hills,

Enfolding sunny spots of greenery.

But oh! that deep romantic chasm which slanted

Down the green hill athwart a cedarn cover!

A savage place! as holy and enchanted

As e’er beneath a waning moon was haunted

By woman wailing for her demon-lover!

And from this chasm, with ceaseless turmoil seething,

As if this earth in fast thick pants were breathing,

A mighty fountain momently was forced:

Amid whose swift half-intermitted burst

Huge fragments vaulted like rebounding hail,

Or chaffy grain beneath the thresher’s flail:

And mid these dancing rocks at once and ever

It flung up momently the sacred river.

Five miles meandering with a mazy motion

Through wood and dale the sacred river ran,

Then reached the caverns measureless to man,

And sank in tumult to a lifeless ocean;

And ’mid this tumult Kubla heard from far

Ancestral voices prophesying war!

The shadow of the dome of pleasure

Floated midway on the waves;

Where was heard the mingled measure

From the fountain and the caves.

It was a miracle of rare device,

A sunny pleasure-dome with caves of ice!

A damsel with a dulcimer

In a vision once I saw:

It was an Abyssinian maid

And on her dulcimer she played,

Singing of Mount Abora.

Could I revive within me

Her symphony and song,

To such a deep delight ’twould win me,

That with music loud and long,

I would build that dome in air,

That sunny dome! those caves of ice!

And all who heard should see them there,

And all should cry, Beware! Beware!

His flashing eyes, his floating hair!

Weave a circle round him thrice,

And close your eyes with holy dread

For he on honey-dew hath fed,

12.6. Scripting St yl es 239

And drunk the milk of Paradise.

</div>

</body>

</html>

Notice how I used for breaking lines. In poems you are allowed to use breaks

for this purpose beca use line break ing in poems doesn’t serve as a pure ly presenta-

tional tool. Line breaks convey some auxiliary meaning as, for example, a change of

movement or intensiﬁcation or softening of rhyme. The elements that I used

with their class attribute set to stray also act as semantic devices. Yo u know, Kubla

Khan is a dream-generated poe m and Coleridge wrote it as a transcript of his dream.

Unfortu nately, he was interrupted at doing it and a signiﬁca nt part of the p oem was

lost. Coleridge allegedly indented the lines that would be later assembled from stray

lines and verses that he somehow managed to recall after the interruption.

Mike: I suppose we will use CSS to specify h ow much those stray lines shou ld be

indented .

Professor: Yes, we’re coming to that in a mom ent. There are two more things I’d

like you to pay attention to in the above HTML: the <div > element marked by the ID

show-hide, and the <div> element marked by the ID more-less. These elements

have no immediate eﬀect but their role is to set the stag e for JavaScript to be able to

work with the poem later. This is in line with the no tion of a dyn amic document where

user experience shouldn’t be dependent on but mere ly enhanc ed by JavaScript code.

In our example, the visitor simply sees the whole poem if JavaScript is not enabled.

CSS and JavaScript, which follow, add presentation and behavior to the above HTML.

In the

styles sub-folde r of our we bsite’s root, there’s a ﬁle kublakhan.css comprising

the following styles:

hgroup h1 {

margin-bottom: 0em;

}

hgroup h2 {

margin-top: 0em;

color: gray;

}

.stray {

margin-left: 1em;

}

.hidden {

display: none;

}

.visible {

display: block;

}

240 Meeting 12. Using JavaScript to Control the Browser

#more-less {

color: blue;

cursor: pointer;

}

I think the ﬁrst three rules are obvious and need no explanation.

The key purpose of this example is to initially show the visitor just the ﬁrst stanza,

oﬀering him/h er an option to show or hide the re st of the poem. The CSS classes

hidden and visi ble will b e u sed by JavaScript to hide and show pie ces of the text,

simply by assigning them to the className pro perty of a corre sponding Element

object. This way, presentation stays separated from behavior.

The last of the above rules is her e simply to make it more obvious to a visitor tha t

the element is clickable by changing its color to blue and the mouse cursor to a hand

pointer, which are the normal attributes of a link.

The most intriguing part of our example is coded in JavaScript, which pulls everything

together. The f ollowing is the content of the

kublakhan.j s ﬁle, which shou ld be plac ed

into the

scripts sub-f older:

window.onload = function() {

var textMore = "Read the whole poem";

var textLess = "(Hide)";

var whatToHide = document.getElementById("show-hide");

var moreLess = document.getElementById("more-less");

whatToHide.className = "hidden";

moreLess.innerHTML = textMore;

moreLess.onclick = function() {

if (this.innerHTML == textMore) {

this.innerHTML = textLess;

whatToHide.className = "visible";

}

else {

this.innerHTML = textMore;

whatToHide.className = "hidden";

}

};

After specifying the text that should app ear under the co llapsed or expanded poem,

the code grabs the element whose visibility we want to control (represented by the

object whatToHide) and the element used to toggle the visibility ( represented by the

object moreLess). In th e ﬁfth line, a part of the poem is initially hidden by setting the

whatToHide object’s className property to hidden and, in the sixth line, the text

“Read the wh ole poem” is written to the toggle element so that the visitor knows what

will ha ppen when h e/she clicks th e element.

The last pa rt of the code deﬁnes the onclick handler on the moreLess Element ob-

ject. The whole handler consists of a single if/else statement, whose job is to check

12.6. Scripting St yl es 241

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.

Table of Contents for 12.6 Scripting Styles

Create new playlist

Sign In

Sign Up

Table of Contents for
12.6 Scripting Styles