UNIT 4: JAVASCRIPT PART II
PREPARED BY: DR. ALIMATU - SAADIA YUSSIFF 1
UNIT 4: JAVASCRIPT PART II
Session 1: Object Orientation with JavaScript
Session 2: Functions and Constructors
Session 3: Methods of the DOM
Session 4: Events
Session 5: Client-Side Form Validation and Adding Constraints
Session 6: Implementing Interactivity for Web Content
PREPARED BY: DR. ALIMATU - SAADIA YUSSIFF 2
Objectives
By the end of the session, you should be able to:
[Link] knowledge of Objects;
[Link] knowledge of functions and constructors;
[Link] knowledge of the DOM;
[Link] knowledge of events;
[Link] form inputs; and
[Link] interactivities and dynamism for the web.
PREPARED BY: DR. ALIMATU - SAADIA YUSSIFF 3
Session 1
Objects in JavaScript
PREPARED BY: DR. ALIMATU - SAADIA YUSSIFF 4
Objects
Objects in JavaScript are a collection of
properties, each of which can contain a value.
Each value stored in the properties can be a
value, another object, or even a function.
define your own objects, or use the several
built-in objects.
PREPARED BY: DR. ALIMATU - SAADIA YUSSIFF 5
‘Instances’
All instances of an object are objects
of an Object
themselves!
PREPARED BY: DR. ALIMATU - SAADIA YUSSIFF 6
‘Property’ Values of the Instances May Differ
PREPARED BY: DR. ALIMATU - SAADIA YUSSIFF 7
Three Ways To Create An Object
Objects are created with curly braces,
Syntax: var myObject = {};
1. You can use an object literal:
var course = { Course_Code: " INF313 ", teacher: " Dr. Halima " }
var car = { "identifier": "1", "name": “vw saloon" }
2. You can use new to create a “blank” object, and add fields to it later:
var course = new Object();
[Link] = “INF313";
[Link] = "Dr. Halima";
3. You can write and use a constructor:
function Course(n, t) { // best placed in <head>
[Link] = n; // keyword "this" is required, not optional
[Link] = t;}
var course = new Course(“INF313", " Dr. Halima ");
PREPARED BY: DR. ALIMATU - SAADIA YUSSIFF 8
Object literals
Object Literal Syntax
A JavaScript object literal is a comma- ◦ A colon separates property
separated list of name-value pairs name[1] from value.
wrapped in curly braces. ◦ A comma separates each name-
value pair from the next.
◦ A comma after the last name-
value pair is optional.
JavaScript has object literals, written with this
syntax: Example:
{ name1 : value1 , ... , nameN : valueN }
var myObject = {
sProp: 'some string value',
Object literal property values can be of any
data type, including array literals, numProp: 2,
functions, and nested object literals. bProp: false
};
PREPARED BY: DR. ALIMATU - SAADIA YUSSIFF 9
Arrays and objects
Arrays are objects
car = { myCar: "Saturn", 7: "Mazda" }
◦ car[7] is the same as car.7
◦ [Link] is the same as car["myCar"]
If you know the name of a property, you can use dot notation:
[Link]
If you don’t know the name of a property, but you have it in a
variable (or can compute it), you must use array notation:
car["my" + "Car"]
PREPARED BY: DR. ALIMATU - SAADIA YUSSIFF 10
Session 2
Functions & Constructors
PREPARED BY: DR. ALIMATU - SAADIA YUSSIFF 11
Functions
Functions are groups of JavaScript statements that have
been combined under a single name.
The true power of functions is to execute several
statements at once.
◦ Several built-in functions, such as [Link]();
◦ defined function in the <head> of an HTML page, to
ensure that they are loaded first.
◦ You can also define your own functions.
parameters are passed by value,
Objects are passed by reference
PREPARED BY: DR. ALIMATU - SAADIA YUSSIFF 12
Defining and Calling Functions (Cont.)
Use the function keyword. Example:
The syntax: function Linebreak( ) {
function name(arg1, …, argN) [Link](“<br />”);
}
{ statements }
◦ The function may contain return value; statements
◦ Any variables declared within the function are local to it
The syntax for calling a function is,
name(arg1, …, argN)
example:
Linebreak();
13
PREPARED BY: DR. ALIMATU - SAADIA YUSSIFF
Defining and Calling Functions (Cont.)
<html>
<head>
<script language="javascript">
function calculate()
{
var X = 5;
var Y = 4;
var Z= X*Y;
var xval="X has the value: ";
var yval=" Y has the value: ";
[Link](""+xval+""+""+X+""+","+""+yval+""+""+Y+""+","+" X*Y is equal "+""+Z+"");
}
</script>
</head>
<body>
<script language="javascript">
calculate();
</script>
</body>
</html>
PREPARED BY: DR. ALIMATU - SAADIA YUSSIFF 14
Parsing Functions
parseInt-- returns the first integer in the string.
Syntax: parseInt(string, radix)
◦ The radix argument specifies the base in which the number is represented in the string,
e.g., 16 (hexadecimal), 10 (decimal), or 2 (binary).
Example:
parseInt("313 Gilbreath", 10);
would return 313
If the first character is not a number, then the function returns "NaN" indicating
the value is not a number.
PREPARED BY: DR. ALIMATU - SAADIA YUSSIFF 15
Parsing Functions (continued)
parseFloat – returns the first floating point number in the string.
Syntax: parseFloat(string)
Example:
parseFloat("2.98% of students");
would return 2.98
If the first character is not a number, then the function returns "NaN" indicating
the value is not a number. This includes characters such as $ or #.
PREPARED BY: DR. ALIMATU - SAADIA YUSSIFF 16
isNaN()
isNaN(value) – returns a true or false based on whether value represents a number
or not.
◦ "value" can be a string containing a number.
◦ Helpful with validation of forms.
Examples:
◦ isNaN("David Tarnoff") would return true
◦ isNaN(4*5) would return false
◦ isNaN("315") would return false
PREPARED BY: DR. ALIMATU - SAADIA YUSSIFF 17
unescape()
unescape(encodedstring) Example:
◦ goes through a string replacing
escape characters with original
characters.
[Link](
In some cases, strings are
encountered that have certain unescape("My%20e-
characters replaced with escape mail%20is%3A%20tarnoff%40
characters. [Link]%21"));
◦ example, a URL often replaces spaces
with %20 and the '@' symbol with %40
would output as:
My e-mail is: tarnoff@[Link]!
PREPARED BY: DR. ALIMATU - SAADIA YUSSIFF 18
Using Built-in Functions
<html>
<head>
<title> JavaScript 1 </title>
<script language="JavaScript">
<!--
var rawDate = Date();
var mon = [Link](4,3);
[Link]("The month is ");
[Link](mon);
//-->
</script> </head>
<body>
<br>
This is the rest of the page.
</body>
</html>
PREPARED BY: DR. ALIMATU - SAADIA YUSSIFF 19
Constructor Function
In JavaScript, a constructor function is used to create and initialize the
properties of newly created objects.
Example:
// constructor function
function Person () { JavaScript this Keyword
[Link] = "John", In JavaScript, when this keyword is used in
[Link] = 23 a constructor function, this refers to the
} specific object in which it is created.
// create an object
const person = new Person();
// print object attributes
[Link]([Link]);
[Link]([Link]);
PREPARED BY: DR. ALIMATU - SAADIA YUSSIFF 20
Creating Multiple Objects with
Constructor Function
function Person () {
[Link] = "John",
[Link] = 23, Note:
Constructor Function vs. Object Literal
[Link] = function () { • Constructor functions can create
[Link]("hello"); multiple objects.
} • Object literals are used to create a
} single object.
// create objects • Each object created from a constructor
const person1 = new Person(); function is unique.
const person2 = new Person();
// access properties
[Link]([Link]); // John
[Link]([Link]); // John
PREPARED BY: DR. ALIMATU - SAADIA YUSSIFF 21
Creating a constructor
function with parameters
// constructor function with parameters
function Person (person_name, person_age, person_gender) {
// assign parameter values to the calling object
[Link] = person_name,
[Link] = person_age,
[Link] = person_gender,
[Link] = function () {
return (`Hi ${[Link]}`);
}
}
// create objects and pass arguments
const person1 = new Person("John", 23, "male");
const person2 = new Person("Sam", 25, "female");
// access properties
[Link]([Link]); // John
PREPARED BY: DR. ALIMATU - SAADIA YUSSIFF 22
JavaScript Built-In Constructors
Constructor Description
Object() Creates a new object with properties and methods.
String() Constructs a string object for manipulating and representing textual data.
Number() Constructs a number object for handling data and operations.
Boolean() Constructs a boolean object representing true or false values for logical operations.
PREPARED BY: DR. ALIMATU - SAADIA YUSSIFF 23
JavaScript Built-In Constructors
// use Object() constructor to create object
const person = new Object({ name: "John", age: 30 });
// use String() constructor to create string object
const name = new String ("John");
// use Number() constructor to create number object
const number = new Number (57);
// use Boolean() constructor to create boolean object
const count = new Boolean(true);
[Link](person);
[Link](name);
[Link](number);
[Link](count);
PREPARED BY: DR. ALIMATU - SAADIA YUSSIFF 24
Adding properties and methods to a
constructor function using a prototype.
For example,
// constructor function
function Person () {
[Link] = "John",
[Link] = 23
}
// create objects
let person1 = new Person();
let person2 = new Person();
// add a new property to the constructor function
[Link] = "Male";
[Link]([Link]); // Male
[Link]([Link]); // Male
PREPARED BY: DR. ALIMATU - SAADIA YUSSIFF 25
Example1: Using built-in functions, variables
<html>
<head>
<title> JavaScript 1 </title>
<script language="JavaScript">
[Link]("<h1>The date is. </h1>");
[Link]( Date() );
</script>
</head>
<body>
This is the rest of the page.
</body>
</html>
26
PREPARED BY: DR. ALIMATU - SAADIA YUSSIFF
Example2: Using built-in functions, variables
<html> <head> <title> JavaScript 1 </title>
<script language="JavaScript">
<!--
Variable set to what
var rawDate = Date(); Date() returns.
var mon = [Link](4,3);
[Link]("The month is "); Extract the
month.
[Link](mon);
//-->
</script> </head>
<body>
<br />
This is the rest of the page.
</body> </html>
27
PREPARED BY: DR. ALIMATU - SAADIA YUSSIFF
SESSION 3
METHODS OF THE DOM
PREPARED BY: DR. ALIMATU - SAADIA YUSSIFF 28
Document Object Model (DOM)
The HTML DOM (Document Object Model) is a
programming interface that represents the structure of a
web page in a way that programming languages like
JavaScript can understand and manipulate.
each part of your HTML document (elements, attributes,
text) is represented as a node, allowing you to dynamically
change or interact with the content and structure of the
page.
PREPARED BY: DR. ALIMATU - SAADIA YUSSIFF 29
Document Object Model (DOM)
With the DOM, JavaScript gets all the power it needs to create
dynamic HTML:
JavaScript can change all the HTML elements in the page
JavaScript can change all the HTML attributes in the page
JavaScript can change all the CSS styles in the page
JavaScript can remove existing HTML elements and attributes
JavaScript can add new HTML elements and attributes
JavaScript can react to all existing HTML events in the page
JavaScript can create new HTML events in the page
PREPARED BY: DR. ALIMATU - SAADIA YUSSIFF 30
What Does the HTML DOM Look Like?
PREPARED BY: DR. ALIMATU - SAADIA YUSSIFF 31
How the DOM Works?
The DOM connects your webpage to JavaScript,
allowing you to:
Access elements (like finding an <h1> tag).
Modify content (like changing the text of a <p> tag).
React to events (like a button click).
Create or remove elements dynamically.
PREPARED BY: DR. ALIMATU - SAADIA YUSSIFF 32
Properties of the DOM
Node-Based: Everything in the DOM is represented as a node (e.g.,
element nodes, text nodes, attribute nodes).
Hierarchical: The DOM has a parent-child relationship, forming a tree
structure.
Live: Changes made to the DOM using JavaScript are immediately
reflected on the web page.
Platform-Independent: It works across different platforms, browsers,
and programming languages.
PREPARED BY: DR. ALIMATU - SAADIA YUSSIFF 33
Why is DOM Required?
The DOM is essential because
Dynamic Content Updates: Without reloading the page, the DOM
allows content updates (e.g., form validation, AJAX responses).
User Interaction: It makes your webpage interactive (e.g., responding to
button clicks, form submissions).
Flexibility: Developers can add, modify, or remove elements and styles
in real-time.
Cross-Platform Compatibility: It provides a standard way for scripts to
interact with web documents, ensuring browser compatibility.
PREPARED BY: DR. ALIMATU - SAADIA YUSSIFF 34
Commonly Used DOM Methods
Methods Description
getElementById(id) Selects an element by its ID.
getElementsByClassName(class) Selects all elements with a given class.
querySelector(selector) Selects the first matching element.
querySelectorAll(selector) Selects all matching elements.
createElement(tag) Creates a new HTML element.
appendChild(node) Adds a child node to an element.
remove() Removes an element from the DOM.
addEventListener(event, fn) Attaches an event handler to an element.
PREPARED BY: DR. ALIMATU - SAADIA YUSSIFF 35
Example1 DOM
<html>
<body>
<h2>DOM Example</h2>
<!-- Finding the HTML Elements by their Id in DOM -->
<p id="intro">
A Computer Science portal for Programmers.
</p>
<p>
This example illustrates the <b>getElementById</b> method.
</p>
<p id="demo"></p>
<script>
const element = [Link]("intro");
[Link]("demo").innerHTML =
"DOM is very useful concept in: " + [Link];
</script>
</body>
</html>
PREPARED BY: DR. ALIMATU - SAADIA YUSSIFF 36
Example2 DOM
<html>
<head></head>
<body>
<form><label>Enter Value 1: </label>
<input type="text" id="val1" /> <br /> <br />
<label>Enter Value 2: </label>
<input type=".text" id="val2" /> <br />
<button onclick="getAdd()">Click To Add</button> </form>
<p id="result"></p>
<script type="text/javascript">
function getAdd() {
// Fetch the value of input with id val1
const num1 = Number([Link]("val1").value);
// Fetch the value of input with id val2
const num2 = Number([Link]("val2").value);
const add = num1 + num2;
[Link](add);
// Displays the result in paragraph using dom
[Link]("result").innerHTML = "Addition : " + add;
// Changes the color of paragraph tag with red
[Link]("result").[Link] = "red";
}
</script>
</body>
</html>
PREPARED BY: DR. ALIMATU - SAADIA YUSSIFF 37
SESSION 4
Events
PREPARED BY: DR. ALIMATU - SAADIA YUSSIFF 38
JavaScript Events
Events are things that happen to an object or in the browser
Events are actions that can be detected by JavaScript.
◦ Every element on a web page has certain events which can trigger
JavaScript functions.
Often placed within the HTML tag
◦ <tag attribute1 attribute2 onEventName="javascript
code;">
◦ <a href="" onMouseOver="popupFunc();">
39
PREPARED BY: DR. ALIMATU - SAADIA YUSSIFF
JavaScript Events (Cont.)
◦Example, assume we have an object "person".
◦An event might be that their eyes become dry. What
would they do? Blink!
[Link] = blink();
◦The object in this example is "person".
◦method or function is "blink()".
◦The event is "onDryEyes".
PREPARED BY: DR. ALIMATU - SAADIA YUSSIFF 40
JavaScript Events
At times, you won’t even need to use the <script> tag to include
JavaScript in a document.
Instead, you can use event handlers (These are special attributes for
HTML tags, and can be used to respond to events). E.g.
Examples of event handlers for your HTML pages include:
◦ onLoad
◦ onClick
◦ onMouseOver
◦ onMouseOut
Events handlers must be placed in a tag.
Example:
<a href="[Link]" onClick = "javascript:function();">link
text</a>
<a href=“[Link]” onMouseOver=“alert(‘hello!’);”>
PREPARED BY: DR. ALIMATU - SAADIA YUSSIFF 41
Common JavaScript Event Handlers
Event Occurs when... Event Handler
click User clicks on form element or link onClick
change User changes value of text, textarea, or select element onChange
focus User gives form element input focus onFocus
blur User removes input focus from form element onBlur
mouseover User moves mouse pointer over a link or anchor onMouseOver
mouseout User moves mouse pointer off of link or anchor onMouseOut
select User selects form element's input field onSelect
submit User submits a form onSubmit
resize User resizes the browser window onResize
load User loads the page in the Navigator onLoad
42
unload User exits the PREPARED
page BY: DR. ALIMATU - SAADIA YUSSIFF onUnload
SESSION 5: CLIENT-SIDE FORM
VALIDATION AND ADDING
CONSTRAINTS
PREPARED BY: DR. ALIMATU - SAADIA YUSSIFF 43
JavaScript form validation
JavaScript form validation checks user input before submitting the form
to ensure it’s correct. It helps catch errors and improves the user
experience.
Two Different types of client-side validation
HTML form validation HTML form attributes can define which form controls
are required and which format the user-entered data must be in to be valid.
JavaScript form validation JavaScript is generally included to enhance or
customize HTML form validation.
PREPARED BY: DR. ALIMATU - SAADIA YUSSIFF 44
Regular expressions
Regular expressions (Regex) are a way of describing patterns in a
string of data, which allows you to search for data strings, like
email addresses or passwords, that match that pattern.
Syntax: /pattern/modifiers;
Example: /w3schools/i;
/w3schools/i is a regular expression.
w3schools is a pattern (to be used in a search).
i is a modifier (modifies the search to be case-insensitive).
45
PREPARED BY: DR. ALIMATU - SAADIA YUSSIFF
Regular expressions
A regular expression can be written in either of two ways:
◦ Within slashes, such as re = /ab+c/
◦ With a constructor, such as re = new RegExp("ab+c")
How to Create a Regular Expression in JavaScript
Example. var regexConst = new RegExp('abc'); ...
Regex Literal Example. var regexLiteral = /abc/; ...
Character Set [xyz] ...
Negated Character Set [^xyz] ...
Ranges [a-z] ...
Quantifiers.
◦ Read More at:
◦ [Link]
46
PREPARED BY: DR. ALIMATU - SAADIA YUSSIFF
Using built-in form validation
This is done by using validation attributes on form elements.
required: Specifies whether a form field needs to be filled in before the form
can be submitted.
minlength and maxlength: Specifies the minimum and maximum length of
textual data (strings).
min, max, and step: Specifies the minimum and maximum values of
numerical input types, and the increment, or step, for values, starting from
the minimum.
type: Specifies whether the data needs to be a number, an email address, or
some other specific preset type.
pattern: Specifies a regular expression that defines a pattern the entered data
needs to follow.
PREPARED BY: DR. ALIMATU - SAADIA YUSSIFF 47
Using built-in form validation - Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Validation</h2>
<form action="" method="post">
<input type="text" name="fname" required>
<input type="submit" value="Submit">
</form>
<p>If you click submit, without filling out the text field,
your browser will display an error message.</p>
</body>
</html>
PREPARED BY: DR. ALIMATU - SAADIA YUSSIFF 48
Example1: JAVASCRIPT FORM VALIDATION
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
let x = [Link]["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}
</script>
</head>
<body>
<h2>JavaScript Validation</h2>
<form name="myForm" action="" onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
</body>
</html>
PREPARED BY: DR. ALIMATU - SAADIA YUSSIFF 49
Example2: JavaScript Form Validation
<html>
<head><title>Form example </title>
<script language="JavaScript">
function verify(f)
{
if ([Link] == null || [Link] == null)
{ alert("Form needs a last name and an address");
return false;
}
if ([Link] == "" || [Link] == "")
{ alert("Form needs a last name and an address");
return false;
}
return true;
}
</script>
50
</head> PREPARED BY: DR. ALIMATU - SAADIA YUSSIFF
Example2: Form Validation (Continue)
<body>
<h1> Address Information </h1> <br>
<form method=post enctype="text/plain" action="[Link]
onSubmit="return verify(this);">
avaScript First Name: <input type="text" name="fname"> <br>
Event Last Name: <input type="text" name="lname"> <br>
Street Address: <input type="text" name="address" size=30> <br>
Town/City: <input type="text" name="city"> <br>
State: <select name="state" size=1> <br>
<option value="NY" selected> Utah
<option value="NY" selected> Idaho
<option value="NY" selected> New York
<option value="NJ"> New Jersey
<option value="CT"> Connecticut
<option value="PA"> Pennsylvania
</select> <br>
Status: <input type="radio" name="status" value="R"> Returning client
<input type="radio" name="status" value="N"> New client
<hr> Thank you <p>
<input type="submit" value="Send information">
51
</form> </body> </html> PREPARED BY: DR. ALIMATU - SAADIA YUSSIFF
Session 6: Using any of the above topics:
Implementing Events
Interactivity Dom
for Web Validation
Content Etc.
PREPARED BY: DR. ALIMATU - SAADIA YUSSIFF 52
ASSIGNMENT 1
PREPARED BY: DR. ALIMATU - SAADIA YUSSIFF 53
Assignment 1a
Due Date:
Develop a Web page that prompts the user for 10
words, and then displays them in the form of a list
in two different ways:
1. In the order in which the words were entered
2. In a sorted order
PREPARED BY: DR. ALIMATU - SAADIA YUSSIFF 54
PREPARED BY: DR. ALIMATU - SAADIA YUSSIFF 55
PREPARED BY: DR. ALIMATU - SAADIA YUSSIFF 56
Pseudo Code
1. Declare the array that will be used for storing the words
2. Prompt the user and read the user input into the elements of the
array
3. Now write the array to the document
4. Sort the array
5. Write the sorted array to the document
PREPARED BY: DR. ALIMATU - SAADIA YUSSIFF 57
<HTML>
<HEAD>
<TITLE>Sort Ten Words</TITLE>
<SCRIPT>
words = new Array ( 10 ) ;
for ( k = 0 ; k < [Link] ; k = k + 1 ) {
words[ k ] = [Link]( "Enter word # " + k, "" ) ;
}
[Link]( "UNSORTED WORDS:" + "<BR>" ) ;
for ( k = 0 ; k < [Link] ; k = k + 1 ) {
[Link]( words[ k ] + "<BR>" ) ;
}
[Link]( ) ;
[Link]( "SORTED WORDS:" + "<BR>" ) ;
for ( k = 0 ; k < [Link] ; k = k + 1 ) {
[Link]( words[ k ] + "<BR>" ) ;
}
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
PREPARED BY: DR. ALIMATU - SAADIA YUSSIFF 58
Pseudo Code
1. Declare the array that will be used for storing the words
2. Prompt the user and read the user input into the elements of the
array
3. Now write the array to the document
4. Sort the array
5. Write the sorted array to the document
PREPARED BY: DR. ALIMATU - SAADIA YUSSIFF 59
words = new Array ( 10 ) ;
for ( k = 0 ; k < [Link] ; k = k + 1 ) {
words[ k ] = [Link]("Enter word # " + k, "" ) ;
}
This method is used for
collecting data from the
user. It can display a
message and provides a
field in which the user
can enter data
PREPARED BY: DR. ALIMATU - SAADIA YUSSIFF 60
Pseudo Code
1. Declare the array that will be used for storing the words
2. Prompt the user and read the user input into the elements of the
array
3. Now write the array to the document
4. Sort the array
5. Write the sorted array to the document
PREPARED BY: DR. ALIMATU - SAADIA YUSSIFF 61
[Link]( "Unsorted Words:" + "<BR>" ) ;
for ( k = 0 ; k < [Link] ; k = k + 1 ) {
[Link]( words[ k ] + "<BR>" ) ;
}
PREPARED BY: DR. ALIMATU - SAADIA YUSSIFF 62
Pseudo Code
1. Declare the array that will be used for storing the words
2. Prompt the user and read the user input into the elements of the
array
3. Now write the array to the document
4. Sort the array
5. Write the sorted array to the document
PREPARED BY: DR. ALIMATU - SAADIA YUSSIFF 63
[Link]( ) ;
[Link]( "Sorted Words:" + "<BR>" ) ;
for ( k = 0 ; k < [Link] ; k = k + 1 ) {
[Link]( words[ k ] + "<BR>" ) ;
}
PREPARED BY: DR. ALIMATU - SAADIA YUSSIFF 64
Assignment 1b
Build a Web page that implements the Bubble Sort algorithm
The numbers to be sorted will be created by you and should be hard
coded in the JavaScript code.
Your page should display a button labeled “Display Numbers”. When
that button is clicked, the page should display the unsorted list of
numbers
Your page should display a second button labeled “Run Bubble Sort”.
When that button is clicked, the page should display the sorted list of
numbers
PREPARED BY: DR. ALIMATU - SAADIA YUSSIFF 65