Client-
side
Scripting
using
UECS2094
WEB APPLICATION DEVELOPMENT
JavaScript
JavaScript is one of the 3 languages all web developers must learn:
HTML to define the content of web pages
CSS to specify the layout of web pages
JavaScript to program the behavior of web pages
2
Introduction
A programming language designed for Web pages
• Enhances Web pages with dynamic and interactive features
• Runs in client software
• Programming code that can be inserted into HTML pages
• can be executed by all modern web browsers
• Validate data
• Creates cookies
• Read / write /modify HTML element
One of many JavaScript HTML methods is getElementById().
3
Example
This example uses the method to "find" an HTML element (with id="demo")
and changes the element content (innerHTML) to "Hello JavaScript":
document.getElementById("demo").innerHTML = "Hello
JavaScript";
OR
document.getElementById('demo').innerHTML = 'Hello
JavaScript';
* JavaScript accepts both double and single quotes
4
Where To
In HTML, JavaScript code must be inserted between <script> and </script> tags.
1 <head>
2 <body>
3 External JavaScript file extension .js.
4 External References <script
src="myScript1.js"></script>
<script>
document.getElementById("demo").innerHTML =
"My First JavaScript";
</script>
5
Where To
1. Inline scripting: You can insert JavaScript directly into an HTML element
using the onclick, onload, or other event attributes. For example:
<button onclick="alert('Hello, world!')">Click me!
</button>
2. Internal scripting: You can also embed JavaScript code within an HTML
document using the <script> tag. You can place the <script> tag anywhere
within the <head> or <body> sections of the HTML document.
<head>
<title>My Page</title>
<script>
function sayHello() {
alert('Hello, world!');
}
</script>
</head>
<body>
<button onclick="sayHello()">Click me!</button>
</body>
6
Where To
3. External scripting: You can also include JavaScript code in an external file,
and then link to that file from the HTML document using the <script> tag.
<html>
<head>
<title>My Page</title>
<script src="myscript.js"></script>
</head>
<body>
<button onclick="sayHello()">Click me!</button>
</body>
</html>
7
Outpu
t
document.getElementById(id) document.write() window.alert()
* testing purposes only
8
Object
▪ actions that can be performed on objects.
1 Properties
▪ stored in properties as function definitions.
Example:
var person = {firstName:“Alex",
lastName:“Smith", age:25,
eyeColor:“hazel"};
2 Methods (functions) ▪ Function that is called from an object
▪ The name: values pairs (in JavaScript objects)
document.write("Hello, world!");
Example:
window.open("https://example.com");
history.go(-1);
9
Array
s
▪ a data structure that can hold multiple values of any data type, including
other arrays or objects.
• Arrays are created using square brackets ([]) and their elements are
separated by commas.
• Each element in an array is assigned an index, starting with 0 for the first
element, 1 for the second element, and so on..
const numbers = [1, 2, 3, 4, 5];//numbers
const names = ["John", "Jane", "Bob"];//string
const mixed = [1, "hello", true, [6, 7, 8]];//mixed
// JavaScript has 8 Datatypes
//String, Number, Bigint, Boolean, Undefined, Null,
Symbol, Object
10
Arrays (continued)
▪ Arrays in JavaScript have several built-in methods that can be used to manipulate
their contents, such as push, pop, shift, unshift, splice, slice, concat, and join.
▪ Example:
const numbers = [1, 2, 3];
numbers.push(4); // Add an element to the end of the array
console.log(numbers); // Output: [1, 2, 3, 4]
numbers.pop(); // Remove the last element from the array
console.log(numbers); // Output: [1, 2, 3]
numbers.splice(1, 1, 5, 6);
// Remove the second element and insert two new elements
console.log(numbers); // Output: [1, 5, 6, 3]
11
Object and Array
▪ Structure: Objects are collections of key-value pairs, where each key is a string (or
symbol) that maps to a value, whereas arrays are ordered collections of values, each of
which is assigned an index.
▪ Usage: Objects are typically used to represent entities or concepts that have a set of
properties or attributes, such as a person with a name, age, and address. Arrays are
typically used to represent lists of related items, such as a list of numbers, names, or
objects.
▪ Accessing values: In objects, values can be accessed using the key or property name,
whereas in arrays, values can be accessed using the index.
▪ Methods: Arrays have a number of built-in methods for manipulating their contents,
such as push, pop, slice, and sort, whereas objects have fewer built-in methods and rely
more on accessing and setting values directly.
12
Event
s
▪ an event is a signal that indicates that something has happened in the
browser.
▪ Here are some examples of events:
✓ a user clicking on a button,
✓ typing in a text field,
✓ the page finishing loading.
• JavaScript can be used to listen for events on elements in the page and
respond to them in various ways
• HTML allows event handler attributes, with JavaScript code, to be added to
HTML elements.
<element event='some JavaScript’>
//For example
//Event on clicking button
<p id=‘demo’>
<button onclick="document.getElementById('demo').innerHTML =
Date()">The time is?</button>
13
Events (continued)
▪ More example:
<html>
<head>
<title>Button Click Example</title>
</head>
<body>
<button id="myButton">Click me</button>
<script>
const button = document.getElementById("myButton");
button.addEventListener("click", function(event) {
alert("The button was clicked!");
});
</script>
</body>
</html>
14
JSO
N
JavaScript Object Notation
▪ lightweight data interchange format that is used to transmit data between different
systems.
▪ JSON uses a syntax that is similar to JavaScript object literals, with key-value pairs
separated by colons and enclosed in curly braces.
{ "name": "John",
"age": 30,
"city": "New York"}
// the JSON object has three key-value pairs, with
the keys being strings and the values being either
strings or numbers.
* The JSON syntax is derived from JavaScript object notation syntax, but the
JSON format is text only. Code for reading and generating JSON data can be
written in any programming language
15
HTML DOM (Document Object
Model)
▪ The HTML DOM defines the way that HTML elements are presented as
objects in a document, allowing programmers to manipulate the content,
structure, and style of a web page through scripting languages such as
JavaScript.
JavaScript can change all the HTML
elements, attributes, CSS styles in the
page.
➢ JavaScript can remove existing, add new, create
new HTML elements and attributes
➢ JavaScript can react to all existing HTML events in
the page
The HTML DOM Tree of Objects
16
HTML
DOM
▪ a standard object model and programming interface for HTML. It defines:
• The HTML elements as objects
• The properties of all HTML elements
• The methods to access all HTML elements
• The events for all HTML elements
▪ HTML DOM methods are actions you can perform (on HTML Elements).
▪ HTML DOM properties are values (of HTML Elements) that you can set or
change.
17
HTML DOM
Elements
▪ HTML DOM elements are the building blocks of web pages. They are the
individual components that make up the content and structure of a web page,
such as headings, paragraphs, images, links, forms, tables, and lists.
▪ Each HTML element is represented as an object in DOM of a web page, with its
own set of properties, methods, and events that can be accessed and
manipulated using scripting languages like JavaScript.
18
HTML DOM – Manipulate Elements
▪ to manipulate HTML elements:
1. Access the elements by:
✓ id
✓ tag name
✓ class name
19
HTML DOM - Changing
HTML
2. to change the content of HTML elements:
✓ Change the inner HTML of an
element.innerHTML = new html content
element
✓ Change the attribute value of an
HTML element element.attribute = new value
✓ Change the attribute value of an
element.setAttribute(attribute, value)
HTML element
✓ Change the style of an HTML
element.style.property = new style
element
20
HTML DOM - Changing
CSS
3.change the style of CSS
document.getElementById(id).style.property = new style
Example
21
HTML DOM – Add or remove
element
▪ To add a new element to the DOM, you can use the appendChild() method, which
adds the new element as a child of an existing element.
const newElement = document.createElement("p");
newElement.textContent = "Hello world";
//to add the new p element created to the body of
the document
const body = document.body;
body.appendChild(newElement);
▪ To remove an element from the DOM, you can use the remove() method, which
removes the element from the document.
newElement.remove();
22
Changing HTML with event
▪ allows you to execute code when an event occurs
▪ Events are generated by the browser when "things happen" to HTML
elements:
✓ An element is clicked on
✓ The page has loaded
✓ Input fields are changed
Example
23
HTML DOM
Events
▪ allows JavaScript to react to HTML events:
Mouse Over Click
▪ E.g., to execute code when a user clicks on an element, add JavaScript
code to an HTML event attribute:
onclick=JavaScript
▪ Examples of HTML events:
When a user clicks the mouse ✓ When the mouse moves over
When a web page has loaded an element
✓When an input field is changed
When an image has been
✓When an HTML form is submitted
loaded ✓When a user strokes a key
24
HTML DOM Events -
continues
Example
2
HTML DOM Events -
continues
▪ To assign events to HTML elements you can use event attributes.
Example
26
HTML DOM EventListener
▪ Add an event listener that fires when a user clicks a button:
document.getElementById("myBtn").addEventListener("click",
displayDate);
Example
27
HTML DOM EventListener
• Alert "Hello World!" when the user clicks on an element:
element.addEventListener("click", function(){ alert("Hello
World!"); });
Example
28
Add Many Event Handlers to the Same
Element
▪ The addEventListener() method allows you to add many events to the
same element, without overwriting existing events:
element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);
Example
29
30
