HTML1 - Introducing Web Programming and HTML

DISCUSSION

Events

Something an object responds to

Can write code that is processed when the event occurs.

Examples...

onclick
onmouseover
onload

Functions

A set of statements that performs a task.

Define once, use many times

Preferred to use the following naming convention: start with lowerCase and make other words start with upperCase.

Example of defining a function

function myFunction() {
alert("hi from myfunction")
}

Define functions in <script></script> blocks

Generally script block is in <head> section of in an external file.

Examples of using a function

function mySecondFunction()
        {

           myFunction()  //can call a function in a function

        }

<div id = "myDiv" onclick
        = "myFunction()">hi</div>   
    

Sample Code

<html> 
        
<head> 
        
<script> 
        
   function myFunction()
            { 
        
            alert("Hi from myFunction") 
        
   } 
        
   function
            mySecondFunction() { 
        
            myFunction() 
        
   } 
        
</script> 
        
</head> 
        
            <body> 
        
<div id = "myID" onclick
            = "mySecondFunction()">Hi</div>

            </body>

            </html>

EXERCISES

1. Copy and paste the above code into Notepad and save as an .htm document.

Test the page.

Set the width of the <div> to "50" and the background color to "red".

Add an event so that the alert is displayed when the user moves the mouse over the <div>.

Add a function called changeDiv(). In the function, add code that sets the innerText of the <div> equal to the value from a prompt.

Call the function from the "onclick" event of the button.

2. Create a page with two textboxes and a button. When the user clicks the button, the contents of the textboxes should be added together and displayed. You can choose any method you want for displaying the result. Are the textboxes added as numbers or strings? Note: If you want to add the textboxes as numbers you must use the built-in parseFloat() function.

3. Modify your page in exercise 1 so that the <div> changes colors when the user moves the mouse over it and then returns to the original color when the mouse is moved off of it.

4. Create a page with an image on it. When the user moves the mouse over the image it should change to another image and when they move the mouse off of the image it should return to its original image.

5. Find an online reference that lists events for objects. Add a link to this reference on your web site.

OBJECTIVE

DISCUSSION

EXERCISES

LINKS AND HELP