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” ‘

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 The heading above gets...

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” Some Subject or Other Blah blah blah. Another Subject Blah blah blah. A Third Subject Blah blah blah.

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

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 ( ) { } 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: and 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 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" }

Overall Document Spec. (Part I) Simple Mouse Event 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" }

Overall Document Spec. (Part II) Some Subject or Other Blah blah blah. Another Subject Blah blah blah. A Third Subject Blah blah blah.

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

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: Some Subject or Other Blah blah blah. Another Subject Blah blah blah. A Third Subject Blah blah blah.

Another example: events on headings affecting their related paragraphs Some Subject or Other Blah blah blah. Another Subject Blah blah blah. A Third Subject Blah blah blah.

Mouse on first heading

Mouse on second heading

Mouse on third heading