![Page 1: 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](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d795503460f94a5c20d/html5/thumbnails/1.jpg)
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 style-property settings in one event handler:
onmouseover=‘this.style.color=“red”;
this.style.fontSize=“50” ‘
onmouseout= ‘this.style.color=“blue”;
this.style.fontSize=“20” ‘
![Page 2: 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](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d795503460f94a5c20d/html5/thumbnails/2.jpg)
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
![Page 3: 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](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d795503460f94a5c20d/html5/thumbnails/3.jpg)
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 infontSize, which corresponds to font-size
borderLeftWidth, which corresponds to border-left-width
![Page 4: 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](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d795503460f94a5c20d/html5/thumbnails/4.jpg)
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
![Page 5: 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](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d795503460f94a5c20d/html5/thumbnails/5.jpg)
Mouse not on heading
![Page 6: 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](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d795503460f94a5c20d/html5/thumbnails/6.jpg)
Mouse is on heading
![Page 7: 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](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d795503460f94a5c20d/html5/thumbnails/7.jpg)
Mouse moves off heading again
![Page 8: 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](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d795503460f94a5c20d/html5/thumbnails/8.jpg)
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>
![Page 9: 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](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d795503460f94a5c20d/html5/thumbnails/9.jpg)
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
![Page 10: 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](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d795503460f94a5c20d/html5/thumbnails/10.jpg)
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
![Page 11: 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](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d795503460f94a5c20d/html5/thumbnails/11.jpg)
Before we move mouse over anything
![Page 12: 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](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d795503460f94a5c20d/html5/thumbnails/12.jpg)
When mouse is over 1st heading
![Page 13: 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](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d795503460f94a5c20d/html5/thumbnails/13.jpg)
After mouse is moved away
![Page 14: 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](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d795503460f94a5c20d/html5/thumbnails/14.jpg)
When mouse is over 2nd heading
![Page 15: 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](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d795503460f94a5c20d/html5/thumbnails/15.jpg)
After mouse has moved out
![Page 16: 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](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d795503460f94a5c20d/html5/thumbnails/16.jpg)
When mouse is on 3rd heading
![Page 17: 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](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d795503460f94a5c20d/html5/thumbnails/17.jpg)
How this can be done economically:
• We must define some new JavaScript functions
![Page 18: 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](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d795503460f94a5c20d/html5/thumbnails/18.jpg)
Using the new functions
<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>
![Page 19: 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](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d795503460f94a5c20d/html5/thumbnails/19.jpg)
The new functions
• We have used two new functions:– highlight– restore
• Each time one of these functions is used, it is given one argument: the word this, which refers to the element in question
<h1 onmouseover=’highlight(this)' onmouseout=’restore(this)'>
![Page 20: 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](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d795503460f94a5c20d/html5/thumbnails/20.jpg)
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 you to have verbs in the names of function which “do” something
![Page 21: 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](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d795503460f94a5c20d/html5/thumbnails/21.jpg)
Formal versus Actual arguments• In the function definitionfunction changeStyleOf(someThing)
{ someThing.style.color=“red”;
someThing.style.fontSize=“20” }
the word someThing is a formal argument
• In the event-handleronmouseover=‘changeStyleOf(this)’
the word this is an actual argument
![Page 22: 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](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d795503460f94a5c20d/html5/thumbnails/22.jpg)
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
![Page 23: 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](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d795503460f94a5c20d/html5/thumbnails/23.jpg)
Defining the functions 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>
![Page 24: 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](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d795503460f94a5c20d/html5/thumbnails/24.jpg)
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>
![Page 25: 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](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d795503460f94a5c20d/html5/thumbnails/25.jpg)
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>
![Page 26: 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](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d795503460f94a5c20d/html5/thumbnails/26.jpg)
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 event-handlers attached to three headings but they all affect only the display of the first paragraph
![Page 27: 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](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d795503460f94a5c20d/html5/thumbnails/27.jpg)
Appearance when mouse is not on any heading
![Page 28: 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](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d795503460f94a5c20d/html5/thumbnails/28.jpg)
Appearance when mouse is on first heading
![Page 29: 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](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d795503460f94a5c20d/html5/thumbnails/29.jpg)
Appearance when mouse is on second heading
![Page 30: 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](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d795503460f94a5c20d/html5/thumbnails/30.jpg)
Appearance when mouse is on third heading
![Page 31: 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](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d795503460f94a5c20d/html5/thumbnails/31.jpg)
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 functions
![Page 32: 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](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d795503460f94a5c20d/html5/thumbnails/32.jpg)
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>
![Page 33: 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](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d795503460f94a5c20d/html5/thumbnails/33.jpg)
A better way of using id attributes
![Page 34: 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](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d795503460f94a5c20d/html5/thumbnails/34.jpg)
• The usage of the id attribute that we have just seen was introduced in the late 1990s by Microsoft
• It still works in many browsers
• But, to future-proof your programs, you should conform to the W3C standard,– which is a little verbose
![Page 35: 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](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d795503460f94a5c20d/html5/thumbnails/35.jpg)
The body of this W3C-compatible 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>
![Page 36: 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](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d795503460f94a5c20d/html5/thumbnails/36.jpg)
The head of this W3C-compatible document:<html><head><title> Simple Mouse Event </title><script language=“JavaScript”>function highlight(someString) {var someThing=document.getElementById(someString); someThing.style.borderStyle="solid"; someThing.style.borderColor="blue"; someThing.style.borderLeftWidth="50"; someThing.style.backgroundColor="black"; someThing.style.color="white" }function restore(someString) {var someThing=document.getElementById(someString); someThing.style.borderStyle="none"; someThing.style.backgroundColor="white"; someThing.style.color="black" }</script></head>
![Page 37: 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](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d795503460f94a5c20d/html5/thumbnails/37.jpg)
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>
![Page 38: 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](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d795503460f94a5c20d/html5/thumbnails/38.jpg)
Mouse on first heading
![Page 39: 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](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d795503460f94a5c20d/html5/thumbnails/39.jpg)
Mouse on second heading
![Page 40: 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](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d795503460f94a5c20d/html5/thumbnails/40.jpg)
Mouse on third heading