Scribd
Upload
36 views7 pages

IT1100 IWT - Labsheet 04

This document provides instructions for a lab exercise on adding JavaScript to a web page. It includes objectives to familiarize students with basic JavaScript programming constructs and functions. The exercise asks students to: 1. Display the system date using JavaScript code in the HTML head 2. Add buttons to a page and use if/else statements in a JavaScript function to display different content depending on the button clicked 3. Use for, for-in, and while loops in JavaScript functions to loop through and display arrays of product data and prices and calculate sums based on conditionals. Patterns are also to be displayed using for loops.

Uploaded by

thedarkhell123
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
36 views7 pages

IT1100 IWT - Labsheet 04

This document provides instructions for a lab exercise on adding JavaScript to a web page. It includes objectives to familiarize students with basic JavaScript programming constructs and functions. The exercise asks students to: 1. Display the system date using JavaScript code in the HTML head 2. Add buttons to a page and use if/else statements in a JavaScript function to display different content depending on the button clicked 3. Use for, for-in, and while loops in JavaScript functions to loop through and display arrays of product data and prices and calculate sums based on conditionals. Patterns are also to be displayed using for loops.

Uploaded by

thedarkhell123
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

BSc (Hons) in Information Technology

Year 1, Semester II, 2024


IT1100 – Internet and Web Technologies

Lab Exercise 04 – Add JavaScript to a web page

Objectives
By the end of this lab session, you will familiarize with basic programming constructs and
functions in scripting languages using JavaScript (JS).

Introduction
• JavaScript is a scripting language for web-based systems.
• It can calculate, manipulate, validate data and change content in both HTML and CSS.
• There are three ways to use JS in an HTML page.
o JS in <head>
It adds JS content inside <script> tag which is in inside of the <head>.
o JS in <body>
Write functions inside body
o Using an external file (preferred)
• All JavaScript variables must be identified with unique names along with ‘var’ keyword.
Ex: var person = "John Doe"
• There are 2 basic types of JS arrays.
o Indexed Arrays – Access elements using numerical indexes.

Ex: fruits = ["Banana", "Orange", "Apple", "Mango"];

o Associative Arrays - Access elements using user given indexes.


Ex: var vehicle = [];
vehicle ["brand"] = "Honda";
vehicle ["model"] = "fit";
vehicle ["number"] = 5146;
BSc (Hons) in Information Technology
Year 1, Semester II, 2024
IT1100 – Internet and Web Technologies

Lab Exercise 04 – Add JavaScript to a web page

Exercise 1:

Following is the outcome of today’s lab session.

• Go to the IWT folder structure which you created on the first lab session.
• Create a file named “myScript.js” inside the “IWT/js” folder.
• Create a file named “news.html” and save it inside “IWT/src” folder.
• Open the “index.html” file.
• Link that file to the “NEWS” button in the index.html
BSc (Hons) in Information Technology
Year 1, Semester II, 2024
IT1100 – Internet and Web Technologies

Lab Exercise 04 – Add JavaScript to a web page

• Copy the entire code in the “index.html” file and paste it in the “news.html”.
• Delete the content between navigation bar and the footer.
• Fill the following boxes with the relevant codes for the given activities and edit the
“news.html” file.
I. Display the Date
• Display the system date as a text in the top of the web page.
• Write JS inside the <head> tag.
https://www.w3schools.com/jsref/met_doc_write.asp

II. If/else conditional statements


• Create multiple buttons (at least 3) by product names in news.html.
• Create a function named loadData() inside myScript.js. add a string
parameter into that.
Ex – loadData(data)
• Send the name of the button when clicking that button into the above created
function.
• Inside loadData(), check whether which button has clicked using if else
statement.
• And display an image and text according to the selected button.

If/else - https://www.w3schools.com/js/js_if_else.asp
String comparison - https://www.w3schools.com/js/js_comparisons.asp
Change text - https://www.w3schools.com/js/js_htmldom_html.asp
Change image - https://www.w3schools.com/jsref/prop_img_src.asp
BSc (Hons) in Information Technology
Year 1, Semester II, 2024
IT1100 – Internet and Web Technologies

Lab Exercise 04 – Add JavaScript to a web page

III. Loops
a) For Loop
• Create a button named “average Price” in news.html.
• Create a function called priceForLoop() in myScript.js.
• Create an array with product name and price in the function.
Ex – [“product X - $100”, “product Y - $200”];
Arrays - https://www.w3schools.com/js/js_arrays.asp
• Display the array elements using a for loop as shown below.
For loop - https://www.w3schools.com/js/js_loop_for.asp
BSc (Hons) in Information Technology
Year 1, Semester II, 2024
IT1100 – Internet and Web Technologies

Lab Exercise 04 – Add JavaScript to a web page

b) For In Loop
• Redo the above function using a for-in loop and name the function as
“productForInLoop()”.
• Display the data as the above given example.
https://www.w3schools.com/jsref/jsref_forin.asp
BSc (Hons) in Information Technology
Year 1, Semester II, 2024
IT1100 – Internet and Web Technologies

Lab Exercise 04 – Add JavaScript to a web page

c) For In Loop
• Create a button named “Prices higher than 1000”.
• Create a function named “priceHigher()” in the myScript.js file.
• Call that function in the button click event.
• Create an array which contains at least 5 values (at least 2 must be higher
than 1000 and 2 must be lower).
• Display the array elements which have the prices higher than 1000.

d) For In Loop
• Create a button named “Prices lower than 1000”.
• Create a function named “priceLower()” in the myScript.js file.
• Call that function when the button click event.
Copy and paste the array which has created in the above exercise.
• Display the array elements which have the prices lower than 1000.
BSc (Hons) in Information Technology
Year 1, Semester II, 2024
IT1100 – Internet and Web Technologies

Lab Exercise 04 – Add JavaScript to a web page

Exercise 2: Write a program to calculate the sum of first 10 natural numbers. (While loop)

Exercise 3: Write a for loop to display following pattern


1
2 3
4 5 6
7 8 9 10

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy