set09

Download Report

Transcript set09 

Style changes (contd.)
• When a user event happens in the context of
some element, we may wish several aspect
of the style to change
• For example, we may wish to change both
the font size and the color
• To do this, we can have several styleproperty settings in one event handler:
ONMOUSEOVER=‘ this.style.color=“red”;
this.style.fontSize=“50” ‘
ONMOUSEOUT= ‘ this.style.color=“blue”;
this.style.fontSize=“20” ‘
Analysis of this:
ONMOUSEOVER=‘ this.style.color=“red”;
this.style.fontSize=“50” ‘
ONMOUSEOUT= ‘ this.style.color=“blue”;
this.style.fontSize=“20” ‘
• the overall event-handler is enclosed by
apostrophes
• individual style settings are separated by
semi-colons
• layout should be chosen to support human
readability of the HTML specification
Style Property Names: CSS
versus Javascript
• CSS property names can be written in upper
or lower case -- although I encourage you
to use lower-case, as in font-size
• Javascript property names do not contain
hyphens and must be written in lower-case,
except for capitals at word boundaries, as in
fontSize, which corresponds to FONT-SIZE
borderLeftWidth, which corresponds to
BORDER-LEFT-WIDTH
Example
• Consider the next three slides
– the first one shows a document before the
mouse is placed over the heading
– the second one shows what the document looks
like when the mouse is over the heading
– the third one shows what the document looks
like when the mouse is moved away again
Mouse not on heading
Mouse is on heading
Mouse moves off heading again
Event-handlers to achieve this
<H1
onMouseOver=
'this.style.borderStyle="solid";
this.style.borderColor="blue";
this.style.borderLeftWidth="50";
this.style.backgroundColor="black";
this.style.color="white"'
onMouseOut=
'this.style.borderStyle="none";
this.style.backgroundColor="white";
this.style.color="black"'
> Some Subject or Other </H1>
<P>The heading above gets ...</P>
Multiple similar event handlers:
• Handling these two events for one heading
required a lot of typing
• It would be worse if we wanted to do the
same thing for many headings
• We need some way of abbreviating event
handler specification
First, a motivating example:
• Consider the following document with
several headings
• Consider what happens when we move the
mouse over/out with respect to these
headings
Before we move mouse over
anything
When mouse is over 1st heading
After mouse is moved away
When mouse is over 2nd heading
After mouse has moved out
When mouse is on 3rd heading
How this can be done
economically:
• We must define some new “verbs”
• We use these new “verbs” in the heading
tags
Using the new “verbs”
<BODY>
<H1 onMouseOver=’highlight(this)’ onMouseOut=’restore(this)'>
Some Subject or Other </H1>
<P> Blah blah blah. </P>
<H1 onMouseOver=’highlight(this)’ onMouseOut=’restore(this)'>
Another Subject </H1>
<P> Blah blah blah. </P>
<H1 onMouseOver=’highlight(this)'
A Third Subject </H1>
<P> Blah blah blah. </P>
</BODY>
onMouseOut=’restore(this)'>
The new “verbs”
• We have used two new verbs:
– highlight
– restore
• Each time one of these verbs is used, it is
given one argument: the word this, which
refers to the element in question
<H1 onMouseOver=’highlight(this)' onMouseOut=’restore(this)'>
We must also define the “verbs”
• In JavaScript, a “verb” is called a function
• I think this is a terrible name, but it comes
from the C language which is the parent of
C++, which is the parent of Java which is
one of the parents of JavaScript
Function definition
• General form:
function <name>(<formal-argument-list>)
{ <statement-list> }
• Example:
function changeStyleOf(someThing)
{ someThing.style.color=“red”;
someThing.style.fontSize=“20” }
• I require to have function names which
contain English verbs, as “change” is above
Formal versus Actual arguments
• In the function definition
function changeStyleOf(someThing)
{ someThing.style.color=“red”;
someThing.style.fontSize=“20” }
the word someThing is what is called a
formal argument
• In the event-handler
onMouseOver=‘changeStyleOf(this)’
the word this is an actual argument
Formal vs. Actual args (contd.)
• An actual argument denotes an actual element in a
document, such as a heading, or a paragraph or …
• Thus, in an event-handler, the word this denotes the
element affected by an event
• A formal argument does not denote any particular element
at all
– it is simply used to explain the meaning of a “verb”
– in the definition of changeStyleOf, the word someThing is only
used to explain what should be done to an actual argument
• When the “verb” changeStyleOf is performed, the actions
specified in the verb’s definition are applied to the actual
argument
Where to put function definitions
• They are placed in an element called a
SCRIPT element
• Such an element is delimited by two tags:
<SCRIPT> and </SCRIPT>
• We can have lots of SCRIPT elements in a
document
• However, a script element which contains
function definitions should be placed in the
HEAD of a HTML specification
Defining the verbs used earlier
<SCRIPT LANGUAGE=“JavaScript”>
function highlight(someThing)
{someThing.style.borderStyle="solid";
someThing.style.borderColor="blue";
someThing.style.borderLeftWidth="50";
someThing.style.backgroundColor="black";
someThing.style.color="white"
}
function restore(someThing)
{someThing.style.borderStyle="none";
someThing.style.backgroundColor="white";
someThing.style.color="black"
}
</SCRIPT>
Overall Document Spec. (Part I)
<HTML>
<HEAD>
<TITLE> Simple Mouse Event </TITLE>
<SCRIPT LANGUAGE=“JavaScript”>
function highlight(someThing)
{someThing.style.borderStyle="solid";
someThing.style.borderColor="blue";
someThing.style.borderLeftWidth="50";
someThing.style.backgroundColor="black";
someThing.style.color="white"
}
function restore(someThing)
{someThing.style.borderStyle="none";
someThing.style.backgroundColor="white";
someThing.style.color="black"
}
</SCRIPT>
</HEAD>
Overall Document Spec. (Part II)
<BODY>
<H1 onMouseOver='highlight(this)' onMouseOut='restore(this)'>
Some Subject or Other </H1>
<P> Blah blah blah. </P>
<H1 onMouseOver='highlight(this)' onMouseOut='restore(this)'>
Another Subject </H1>
<P> Blah blah blah. </P>
<H1 onMouseOver='highlight(this)' onMouseOut='restore(this)'>
A Third Subject </H1>
<P> Blah blah blah. </P>
</BODY>
</HTML>
Event-handlers can have
widespread effect
• An event-handler attached to one element of
a document can affect any part of a
document
• In the next example, there are eventhandlers attached to three headings but they
all affect only the display of the first
paragraph
Appearance when mouse is not
on any heading
Appearance when mouse is on
first heading
Appearance when mouse is on
second heading
Appearance when mouse is on
third heading
How this is done:
• Only two changes from the earlier HTML
specification:
– the first paragraph is given an ID, which
happens to be “blah1”
– all the event-handlers specify that blah1 should
be highlighted or restored, as the case may be
– in other words, in every event-handler, blah1 is
the actual argument passed to the “verbs”
The body of this revised
document:
<BODY>
<H1 onMouseOver='highlight(blah1)' onMouseOut='restore(blah1)'>
Some Subject or Other</H1>
<P ID="blah1"> Blah blah blah. </P>
<H1 onMouseOver='highlight(blah1)' onMouseOut='restore(blah1)'>
Another Subject </H1>
<P> Blah blah blah. </P>
<H1 onMouseOver='highlight(blah1)' onMouseOut='restore(blah1)'>
A Third Subject </H1>
<P> Blah blah blah. </P>
</BODY>
Another example: events on
headings affecting their related
paragraphs
<BODY>
<H1 onMouseOver='highlight(blah1)' onMouseOut='restore(blah1)'>
Some Subject or Other</H1>
<P ID="blah1"> Blah blah blah. </P>
<H1 onMouseOver='highlight(blah2)' onMouseOut='restore(blah2)'>
Another Subject </H1>
<P ID=“blah2”> Blah blah blah. </P>
<H1 onMouseOver='highlight(blah3)' onMouseOut='restore(blah3)'>
A Third Subject </H1>
<P ID=“blah3”> Blah blah blah. </P>
</BODY>
Mouse on first heading
Mouse on second heading
Mouse on third heading