CSIT128: Introduction to Web

Technology
JavaScript

Lab 4 – Week 5

Contents
Instructions ...................................................................................................................................................3
Learning Outcomes ....................................................................................................................................... 3
Marking Criteria ............................................................................................................................................3
Objectives .....................................................................................................................................................3
Task 1 ............................................................................................................................................................4
Task 2 ............................................................................................................................................................7
Submission Instructions ................................................................................................................................8

Page | 2
Instructions

Lab Instructions:
* In this lab, the students are required to work individually.
* Please show your work to the tutor present in the lab before submitting it.
Submission Due: End of laboratory class, submit the file on Moodle at least 10 minutes before
the end of laboratory class.

Total Marks = 1.5 marks

Learning Outcomes

LO5 Design, build and implement simple Web-based applications using mark-up languages
and scripting, with an emphasis on client-side scripting.

Marking Criteria

Task No. Marks

Objectives
● Practice writing code in a clear and succinct way.
● Develop websites using HTML and JavaScript.

Page | 3
Task 1
You are provided with a file Lab_3_Task_1.html in your lab material. In this file, there is an
HTML page that contains buttons to perform addition, multiplication, division, and subtraction
operations on the numeric values already hardcoded in JavaScript code. You have to modify the
code in this file such that it fulfills the following requirements:

1. In the script tag, the JavaScript code is incomplete, you need to complete it by performing
the required operations (addition, multiplication, division, and subtraction) using
appropriate operators as specified in the comments in the script. See the screenshot below:

2. After completing the script, you have to complete the missing section in the HTML body.
The buttons in the HTML are not working as of now except for the addition button. You
have to modify the HTML code for the button elements such that now each button
element displays the result of each operation in the respective paragraph elements (<p>
tags) on the page i.e. id = addition, id =multiplication, id=division, and id =
subtraction elements. In this case, you have to use
“[Link]("").innerHTML” property with the onClick element
of the button. One operation (addition) is done for you as an example, you have to modify
the remaining buttons. The following screenshot displays where you have to modify the
code in the provided file (Lab_3_Task_1.html):

Page | 4
Initially, once the page loads, the following web page shown in Figure 1 will be displayed to the
user, and once the user clicks on all the buttons, the results of the mathematical operations will be
displayed on the screen as shown in Figure 2 below.

Figure 1- The initial web page of Task 1

Page | 5
Figure 2 – The web page after clicking on all the buttons

Page | 6
Task 2
You are provided with a file Lab3_Task_2.html in your lab material on Moodle. In this file, there
is an HTML page that displays the student introduction (First Names, Last Names, IDs, Genders,
Ages, and Programs). Initially, once the page loads, the following web page (Figure 3) will be
displayed to the user:

Figure 3- The initial web page of Task 2

Once the user clicks on the button “Display Students' Info Using Different Heading Sizes” the
student’s info will be displayed under the buttons as shown in Figure 4 below. Each piece
of information of the students will be displayed using different HTML heading sizes. Those
students’ information should be displayed by calling a function called get_students_info().
Whereas, once the user clicks on the “Hide Students’ info” button it should call the
function hide_students_info(). This function will clear the text displayed under the buttons and the
web page will return to the initial display of the web page as shown in Figure 3 above.

Complete the code provided in Lab_3_Task_2.html to add the JavaScript code in the Header part
of the HTML page which includes two functions, get_students_info(), and hide_students_info().
In the get_students_info() function, you should use a loop and the two HTML elements provided
already to you, including the paragraph <p> with id named paragraph_2, and division <div> with
id named all_demos to dynamically populate the different heading sizes of the students’ info. You
have to replace the sample of the students’ info provided in the HTML file with your info which is
the students’ info of the two students who are working on this lab assignment. Whereas, in the
hide_students_info() function, you have to clear the values of the two elements, including the
paragraph <p> with id named paragraph_2, and division <div> with id named all_demos.

Page | 7
Figure 4 – The web page after clicking on the Display Students’ Info Using Different Heading
Sizes button

Submission Instructions
1. Submit your solution in a compressed file (zip file) which contains your HTML codes,
including, Lab_3_Task_1.html, and Lab_3_Task_2.html.
2. Use the following name format for your compressed file “CSIT128_lab3_lab
time_instructor name_Student IDs”. ( Example
CSIT128_lab3_Thur_8_30_Shahrul_5555555)

END OF LABORATORY

Page | 8