GIFT School of Engineering and
Applied Sciences
Fall 2023
CS-143L Application of Information and
Communication Technology
Lab-14 Manual
JavaScript Events
v1
13/12/2023
Lab-14 Manual
Lab Objectives:
In this Lab Students will learn about JavaScript events:
Document Object Model (DOM)
Finding HTML elements through JavaScript:
o By id
o By tag name
o By class
Changing HTML elements:
o Inner HTML
o Attribute
o style
JavaScript Events
o onclick
o onmouseover
o onmouseout
The HTML DOM (Document Object Model)
Page 1 of 10
Lab-14 Manual
When a web page is loaded, the browser creates a Document Object Model of the
page.
The HTML DOM model is constructed as a tree of Objects:
With the HTML DOM, JavaScript can access and change all the elements of an
HTML document.
If you want to access any element in an HTML page, you always start with
accessing the document object.
Below are some examples of how you can use the document object to access and
manipulate HTML.
Finding HTML Elements
Method Description
[Link](id) Find an element by element id
Page 2 of 10
Lab-14 Manual
[Link](name) Find elements by tag name
[Link](name) Find elements by class name
Changing HTML Elements
Method Description
[Link] = new html content Change the inner HTML of an
element
[Link] = new value Change the attribute value of an
HTML element
[Link](attribute, value) Change the attribute value of an
HTML element
[Link] = new style Change the style of an HTML
element
JavaScript Events
A JavaScript can be executed when an event occurs, like when a user clicks on an
HTML element.
To execute code when a user clicks on an element, add JavaScript code to an
HTML event attribute:
onclick=JavaScript
Page 3 of 10
Lab-14 Manual
Activity 1
In this activity, we will change the text when the user clicks on it.
Open editor and create an HTML Page.
Add a Paragraph and write some text in it.
Now add onclick event and change the text written inside the paragraph.
Click the text in browser and observe the change in text.
Method 2
We can do the same thing by creating a script separately and then calling it as a
function.
Create Paragraph and write some text in it and assign it an id “p1”.
Now create a script tag and make a function in it as follows:
Page 4 of 10
Lab-14 Manual
Now call that function in event onclick.
Click the text in browser and observe the change in text.
Method 3
We can do the same thing by writing the script in a separate file and then link the
script file with HTML file.
Cut the code written in script tag and paste it in a separate file and name it
“[Link]”
Now link the file with html file as follows:
Click the text in browser and observe the same change.
Page 5 of 10
Lab-14 Manual
Activity 2
In this Activity, we will display date by clicking on a button.
Create a button and assign it an id “b1”.
Create a Paragraph and assign it id “para1” but don’t write anything inside it.
Now a function in script which will change inner HTML of paragraph and display
date in it.
Now apply the onclick event on the button created above and call the function
displayDate().
Now click the button and observe the date display on screen.
Activity 3
In this activity, we will practice onmouseover and onmouseout events.
Create a div and set its padding 20px, background-color red and color white.
Assign it id “div1”
Write your name in it.
Page 6 of 10
Lab-14 Manual
Now create two functions in script mouseover() and mouseout()
In mouseover function change the text and in mouseout function change the text
back to your name.
Now create two events in div onmouseover and onmouseout and call the
functions written in script.
Mouse over and mouse out the div in browser and observe the events applied.
Activity 4 (Game of bulb Lightening)
In this activity, we will create a game of fun. We will light up the bulb when
mouse is over the bulb and light off the bulb when mouse is out.
Download two pictures of a bulb one light off and one light on like the following:
Page 7 of 10
Lab-14 Manual
Now add image in your webpage and put bulb off there.
Now create two functions in script bulbon() and bulboff().
Inside bulbon function change src of picture to bulb on.
Inside bulboff function change src of picture to bulb off.
Page 8 of 10
Lab-14 Manual
Now call the functions in onmouseover and onmouseout events:
Now observe the bulb lightening by mouse over and on.
Activity 5
In this activity, we will learn to change style properties by javascript.
Create a paragraph and assign id “p2”.
Write your name in it.
Inside script write function changestyle()
Inside the function change the text color to red.
Now create onclick event for paragraph and call the function:
Click the paragraph in browser and observe change in style.
Task
Page 9 of 10
Lab-14 Manual
Create a game of your pictures.
Take two pictures of your own. (one of front pose and other of side pose)
Now insert your front pose picture in your webpage.
On mouse over change your pose.
On mouse out again put front pose.
The End
Page 10 of 10