What Was Covered in Part I & What to Expect in Part II
In this example, we change the self-portrait of Rembrandt with that of Cardinal Wolsey. If anything, it demonstrates that there is really no "magic" involved. We locate the new picture by invoking the getElementById() method and the subtitution is performed by doing the assignment to the src property. In this example we avoid distortion because the original Rembrandt image was 439px by 599px while the Cardinal is 444px by 599px. If the images sizes were much different you would really want to change the width and height craracteristics as well.
The following snapshot illustrates changing multiple properties. My using the inspect element for the unchanged, identical heading we see the attributes taken on and those overridden specific to the h2 element defaults.
Changing HTML Content When An Event Occur
This is where we see pages change dynamically, when an event occurs. The types of events which can occur (and what follows is just a sampling) are:
onchange - a user changes the content of an input field
onfocus - an input field gets focus
onkeydown - a user is pressing/holding down a key
onkeyup - the user releases a key
onreset - a user clicks the reset button
onselect - input text is selected
onsubmit - a user clicks the submit button
onmousedown/onmouseup - pressing/releasing a mouse button
onmousemove/onmouseout - moving the mouse pointer over/out of an element
onclick - button is clicked on
dblclick - a text is double-clicked
onerror - an error occurs when loading an image
onload - the page/image has been loaded
onresize - the browser window is resized
onunload - the browser closes the document
A Click Event: When an "onclick" Event Occurs
The following snapshot shows a change in the CSS style for the header element whwn the button is clicked. The coloris changed from the defualt color black to blue.
An onclick Example
This is another onclick example. It differs from the first in that instead of invoking the getElementById() method directly in the statement, we invoke a function which does the processing. This can sometimes make your code look a little less "busy". For example, if we were changing an image here with multiple parameters of src,width, and height is cleaner, clearer (and less error prone) to read multiple statements in a function rather than an elongated string following the onclick=.
Displaying Day and Time by Invoking a Built-In Function
An onload Example
In this example, we check to see if cookies are enabled in the browser. This example illustrates something more and something we have been taking for granted.
When we perform a document.write("Something"); What are we really doing? In terms of the OOP model, document is really an object and it is the entire writable area of the screen or web page. write is a method associated with the object.
Now, notice carefully at the current example, we have never seen the object "navigator" before. That is because it is not part of the HTML DOM but rather is a part of the BOM, Browser Object Model which we will be discussing in the next tutorial.
A mouse Event Handler Example
In this example we look at the two events which occur. When we mouse over the rectangle the code changes. Then when we leave the rectangle it changes back to the original text. This is the general case for "mousing"
A mouseover/mouseout Example
The HTML DOM is a Hierachy
Wrap Up and What's Next
In this tutorial we looked at modifying the HTML DOM when an event occurs. The code which makes the change is called an event handler. Anything that you could possibly do in interacting with a web page could probably result in some coding for the event. We indicated that there are four types of events: when pages are loaded and unloaded, when there is a mouse action, when an input value is entered to changed, and when a button is clicked.
We alluded to the Browser Object Model (BOM) in this tutorial in that we used it to determine wheteher cookies were enabled. Unfortunately the BOM is not like the DOM. There is no uniform adopted standard. So, it must be used with care. Many of the methods which can be used in the BOM have been adopted by the major browsers (e.g. Chrome, Internet Explorer, Safari, Opera, etc.) but more on this subject in the next installment.
Till then experiment with the enevnts we didn't get to illustrate. The list in this tutorial is a good place to start ferreting out information.