JavaScript: Client-

Side Scripting

Chapter 6

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

Textbook to be published by Pearson ©
Ed2015
in early
Pearson
2014
Randy Connolly and Ricardo Hoar Fundamentals of Web Development
http://www.funwebdev.com
 Section 1 of 8

WHAT IS JAVASCRIPT
Randy Connolly and Ricardo Hoar Fundamentals of Web Development
 What is JavaScript?
 JavaScript is the Programming Language for the Web.
 JavaScript can update and change both HTML and CSS.
 JavaScript can calculate, manipulate and validate data.
 JavaScript contains a standard library of objects, like Array, Date,
and Math, and a core set of language elements like operators
, control structures, and statements.

What JavaScript can do?

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 What is JavaScript

• JavaScript runs right inside the browser

• JavaScript is dynamically typed
• JavaScript is object oriented in that almost everything in the
language is an object
• the objects in JavaScript are prototype-based rather than class-
based, which means that while JavaScript shares some syntactic
features of PHP, Java or C#, it is also quite different from those
languages

Syntax of Javascript:
<script>
// JavaScript Code
</script>

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 What isn’t JavaScript
It’s not Java

Although it contains the word Java, JavaScript and Java

are vastly different programming languages with
different uses. Java is a full-fledged compiled, object-
oriented language, popular for its ability to run on any
platform with a JVM installed.
Conversely, JavaScript is one of the world’s most
popular languages, with fewer of the object-oriented
features of Java, and runs directly inside the browser,
without the need for the JVM.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

Client-side Scripting
 Client-side scripting simply means running scripts, such as
JavaScript, on the client device, usually within a browser.

 All kinds of scripts can run on the client side if they are written in
JavaScript, because JavaScript is universally supported.
 In web development, 'client side' refers to everything in a web
application that is displayed or takes place on the client (end user
device).

 This includes what the user sees, such as text, images, and the rest
of the UI, along with any actions that an application performs within
the user's browser.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 The idea of client-side scripting is an important one in web
development.

 It refers to the client machine (i.e., the browser) running code locally
rather than relying on the server to execute code and return the
result.

 There are many client-side languages that have come into use over
the past decade including Flash, VBScript, Java, and JavaScript.

 Some of these technologies only work in certain browsers, while

others require plug-ins to function.

 Lets focus on JavaScript due to its browser interoperability (that is, its
ability to work/operate on most browsers).

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Client-Side Scripting
Let the client compute

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Client-Side Scripting
It’s good

There are many advantages of client-side scripting:

• Processing can be offloaded from the server to
client machines, thereby reducing the load on the
server.
• The browser can respond more rapidly to user
events than a request to a remote server ever
could, which improves the user experience.
• JavaScript can interact with the downloaded HTML
in a way that the server cannot, creating a user
experience more like desktop software than simple
HTML ever could.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Client-Side Scripting
There are challenges

The disadvantages of client-side scripting are mostly

related to how programmers use JavaScript in their
applications.
• There is no guarantee that the client has JavaScript
enabled
• The idiosyncrasies between various browsers and
operating systems make it difficult to test for all
potential client configurations. What works in one
browser, may generate an error in another.
• JavaScript-heavy web applications can be
complicated to debug and maintain.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

JavaScript’s History and Uses

 It was created in 1995 by Brendan Eich while he was an engineer

at Netscape.
 It was originally going to be named LiveScript but was renamed.
Unlike most programming languages, JavaScript language has no
concept of input or output.
 It is designed to run as a scripting language in a host environment,
and it is up to the host environment to provide mechanisms for
communicating with the outside world.
 The most common host environment is the browser.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

Applications of JavaScript

 Web Development
 Web Applications
 Server Applications
 Games
 Smart Watches
 Art
 Machine Learning
 Mobile Applications

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Section 3 of 8
WHERE DOES JAVASCRIPT GO?

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Where does JavaScript go?

JavaScript can be linked to an HTML page in a number

of ways.
• Inline
• Embedded
• External

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Inline JavaScript
Mash it in

Inline JavaScript refers to the practice of including

JavaScript code directly within certain HTML attributes

Inline JavaScript is a real maintenance nightmare

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Embedded JavaScript
Better

Embedded JavaScript refers to the practice of placing

JavaScript code within a <script> element

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 External JavaScript
Better

JavaScript supports this separation by allowing links to

an external file that contains the JavaScript.

By convention, JavaScript external files have the

extension .js.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Section 4 of 8

SYNTAX
Randy Connolly and Ricardo Hoar Fundamentals of Web Development
 JavaScript Syntax

We will briefly cover the fundamental syntax for the

most common programming constructs including
• variables,
• assignment,
• conditionals,
• loops, and
• arrays
before moving on to advanced topics such as events
and classes.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 JavaScript’s Reputation
Precedes it?

JavaScript’s reputation for being quirky not only stems from its strange way
of implementing object-oriented principles but also from some odd
syntactic gotchas:
• Everything is type sensitive, including function, class, and variable
names.
• The scope of variables in blocks is not supported. This means variables
declared inside a loop may be accessible outside of the loop, counter to
what one would expect.
• There is a === operator, which tests not only for equality but type
equivalence.
• Null and undefined are two distinctly different states for a variable.
• Semicolons are not required, but are permitted (and encouraged).
• There is no integer type, only number, which means floating-point
rounding errors are prevalent even with values intended to be integers.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Variables
var

Variables in JavaScript are dynamically typed, meaning a

variable can be an integer, and then later a string, then
later an object, if so desired.
{Note: The type of the variable is determined by the value
assigned to it}
‘let’ keyword can also be used to declare the variables.
This simplifies variable declarations, so that we do not
require the familiar type fields like int, char, and String.
Instead we use var
Assignment can happen at declaration-time by appending
the value to the declaration, or at run time with a simple
right-to-left assignment

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Variables
Assignment

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Comparison Operators
True or not True

Operator Description Matches (x=9)

== Equals (x==9) is true
(x=="9") is true

=== Exactly equals, including type (x==="9") is false

(x===9) is true

<,> Less than, Greater Than (x<5) is false

<= , >= Less than or equal, greater than or equal (x<=9) is true

!= Not equal (4!=x) is true

!== Not equal in either value or type (x!=="9") is true

(x!==9) is false

Note: In javascript, ‘===‘ is a strict equality operator which checks whether its two
operands are equal in terms of both value and data type. It considers operands of
different types to be different.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Logical Operators

The Boolean operators AND, OR, and NOT and their

truth tables are listed in Table 6.2. Syntactically they
are represented with && (and), || (or), and ! (not).

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Conditionals
If, else if, …, else

JavaScript’s syntax is almost identical to that of PHP,

Java, or C when it comes to conditional structures such
as if and if else statements. In this syntax the condition
to test is contained within ( ) brackets with the body
contained in { } blocks.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Loops
Round and round we go

Like conditionals, loops use the ( ) and { } blocks to

define the condition and the body of the loop.
You will encounter the while and for loops
While loops normally initialize a loop control variable
before the loop, use it in the condition, and modify it
within the loop.
var i=0; // initialise the Loop Control Variable
while(i < 10){ //test the loop control variable
i++; //increment the loop control variable
}

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 For Loops
Counted loops

A for loop combines the common components of a

loop: initialization, condition, and post-loop operation
into one statement.
This statement begins with the for keyword and has
the components placed between ( ) brackets,
semicolon (;) separated as shown

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Functions
Functions are the building block for modular code in
JavaScript, and are even used to build pseudo-classes,
which you will learn about later.
They are defined by using the reserved word function
and then the function name and (optional)
parameters.
Since JavaScript is dynamically typed, functions do not
require a return type, nor do the parameters require
type.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Functions
Example

Therefore a function to raise x to the yth power might be

defined as:
function power(x,y){
var pow=1;
for (var i=0;i<y;i++){
pow = pow*x;
}
return pow;
}
And called as
power(2,10);

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Alert
Not really used anymore, console instead

The alert() function makes the browser show a pop-up

to the user, with whatever is passed being the
message displayed. The following JavaScript code
displays a simple hello world message in a pop-up:
alert ( "Good Morning" );
Using alerts can get tedious fast. When using debugger
tools in your browser you can write output to a log
with:
console.log("Put Messages Here");
And then use the debugger to access those logs.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Section 5 of 8

JAVASCRIPT OBJECTS
Randy Connolly and Ricardo Hoar Fundamentals of Web Development
 JavaScript Objects
Objects not Classes

JavaScript is not a full-fledged object-oriented

programming language.
It does not have classes per se, and it does not support
many of the patterns you’d expect from an object-
oriented language like inheritance and polymorphism.
The language does, however, support objects.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 JavaScript Objects
Not full-fledged O.O.

Objects can have constructors, properties, and

methods associated with them.
There are objects that are included in the JavaScript
language; you can also define your own kind of
objects.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

Creating Objects
Objects are same as variables in JavaScript, the only difference is that an
object holds multiple values in terms of properties and methods.
In JavaScript, an object can be created in two ways:
1) using Object Literal/Initializer Syntax
2) using the Object() Constructor function with the new keyword.
Objects created using any of these methods are the same.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Above, p1 and p2 are the names of objects.

 Objects can be declared same as variables using var or let keywords.

 The p1 object is created using the object literal syntax (a short form
of creating objects) with a property named name.

 The p2 object is created by calling the Object() constructor function

with the new keyword.

 The p2.name = "Steve"; attach a property name to p2 object with

a string value "Steve".
Randy Connolly and Ricardo Hoar Fundamentals of Web Development
 Constructors

Normally to create a new object we use the new

keyword, the class name, and ( ) brackets with n
optional parameters inside, comma delimited as
follows:
var someObject = new ObjectName(p1,p2,..., pn);
For some classes, shortcut constructors are defined
var greeting = "Good Morning";
vs the formal:
var greeting = new String("Good Morning");

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Properties
Use the dot

Each object might have properties that can be

accessed, depending on its definition.
When a property exists, it can be accessed using dot
notation obj.property-name or the square bracket
obj[“property-name”] where a dot between the
instance name and the property references that
property.
//show someObject.property to the user
alert(someObject.property);

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Methods
Use the dot, with brackets

Objects can also have methods, which are functions

associated with an instance of an object. These
methods are called using the same dot notation as for
properties, but instead of accessing a variable, we are
calling a method.
someObject.doSomething();
Methods may produce different output depending on
the object they are associated with because they can
utilize the internal properties of the object.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Objects Included in JavaScript

A number of useful objects are included with

JavaScript including:
• Array
• Boolean
• Date
• Math
• String
• Dom objects

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Arrays

Arrays are one of the most used data structures. In

practice, this class is defined to behave more like a
linked list in that it can be resized dynamically, but the
implementation is browser specific, meaning the
efficiency of insert and delete operations is unknown.
The following code creates a new, empty array named
greetings:
var greetings = new Array();

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Arrays
Initialize with values

To initialize the array with values, the variable declaration would

look like the following:
var greetings = new Array("Good Morning", "Good Afternoon");
or, using the square bracket notation:
var greetings = ["Good Morning", "Good Afternoon"];

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Arrays
Access and Traverse

To access an element in the array you use the familiar square

bracket notation from Java and C-style languages, with the index
you wish to access inside the brackets.
alert ( greetings[0] );
One of the most common actions on an array is to traverse
through the items sequentially. Using the Array object’s length
property to determine the maximum valid index. We have:
for (var i = 0; i < greetings.length; i++){
alert(greetings[i]);
}

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Arrays
Index and Value

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Arrays
Modifying an array

To add an item to an existing array, you can use the

push method.
greetings.push("Good Evening");
The pop method can be used to remove an item from
the back of an array.
Additional methods: concat(), slice(), join(), reverse(),
shift(), and sort()

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

JavaScript push() Method:
JavaScript's push() method appends an item to the end of an array.

JavaScript pop() Method:

JavaScript's pop() method removes the last item in an array.

var items = [1, 2, 3, 4]; var items = [1, 2, 3];

items.pop(); items.push(4);

console.log(items); console.log(items);
// 1, 2, 3 // [1, 2, 3, 4]

JavaScript shift() Method:

JavaScript's shift() method works similarly to pop(), however instead of removing an
item from the end of an array, the first item from the beginning of the array is
removed:
var items = [1, 2, 3, 4];

items.shift();

console.log(items);
// [2, 3, 4]
Randy Connolly and Ricardo Hoar Fundamentals of Web Development
JavaScript unshift() Method: var items = [1, 2, 3, 4];
JavaScript's unshift() method works similarly to
push(), however instead of adding an item to the items.unshift(0);
end of an array, a new item is prepended to the
beginning of the array: console.log(items);
// [0, 1, 2, 3, 4]

JavaScript slice() Method:

The slice() method allows you to create a new array by extracting a portion of an existing
array. It takes two arguments: the starting index (inclusive) and the end index of the slice
(exclusive). The original array remains unchanged.
const originalArray = [1, 2, 3, 4, 5];
const slicedArray = originalArray.slice(1, 4);
// [2, 3, 4]

JavaScript concat() Method:

The concat() method is used to merge two or more arrays. Returns a new array
containing the combined elements of the original array.

const array1 = [1, 2];

const array2 = [3, 4];
const combinedArray =
array1.concat(array2); // [1, 2, 3, 4]
Randy Connolly and Ricardo Hoar Fundamentals of Web Development
 Math

The Math class allows one to access common

mathematic functions and common values quickly in
one place.
This static class contains methods such as max(), min(),
pow(), sqrt(), and exp(), and trigonometric functions
such as sin(), cos(), and arctan().
Many mathematical constants are defined such as PI, E,
SQRT2, and some others
Math.PI; // 3.141592657
Math.sqrt(4); // square root of 4 is 2.
Math.random(); // random number between 0 and 1
Randy Connolly and Ricardo Hoar Fundamentals of Web Development
 String

The String class has already been used without us even knowing
it.
Constructor usage
var greet = new String("Good"); // long form constructor
var greet = "Good"; // shortcut constructor
Length of a string
alert (greet.length); // will display “4"

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 String
Concatenation and so much more

var str = greet.concat("Morning"); // Long form concatenation

var str = greet + "Morning"; // + operator concatenation
Many other useful methods exist within the String class, such as
• accessing a single character using charAt()
• searching for one using indexOf().
Strings allow splitting a string into an array, searching and
matching with split(), search(), and match() methods.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Date
Not that kind

The Date class is yet another helpful included object you should
be aware of. It allows you to quickly calculate the current date
or create date objects for particular dates. To display today’s
date as a string, we would simply create a new object and use
the toString() method.
var d = new Date();
// This outputs Today is Mon Nov 12 2012 15:40:19 GMT-0700
alert ("Today is "+ d.toString());

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Window

The window object in JavaScript corresponds to the browser

itself. Through it, you can access the current page’s URL, the
browser’s history, and what’s being displayed in the status bar,
as well as opening new browser windows.
In fact, the alert() function mentioned earlier is actually a
method of the window object.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

Error handling in JS
Errors Using Try and Catch

• When the browser’s JavaScript engine encounters an error, it will

throw an exception.
• These exceptions interrupt the regular, sequential execution of the
program and can stop the JavaScript engine altogether.
• However, you can optionally catch these errors preventing
disruption of the program using the try–catch blocks.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Using Throw
• Although try-catch can be used exclusively to catch built-in
JavaScript errors, it can also be used by your programs, to throw
your own messages.
• The throw keyword stops normal sequential execution, just like the
built-in exceptions.
• The general consensus in software development is that try-catch and
throw statements should be used for abnormal or exceptional cases
in your program.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Section 6 of 8
THE DOCUMENT OBJECT MODEL (DOM)

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 The DOM
Document Object Model

HTML DOM, allows JavaScript to access and modify all

the elements in an HTML document.
JavaScript is almost always used to interact with the
HTML document in which it is contained.
This is accomplished through a programming interface
(API) called the Document Object Model.
According to the W3C, the DOM is a:
Platform- and language-neutral interface that will
allow programs and scripts to dynamically access and
update the content, structure and style of documents.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

Randy Connolly and Ricardo Hoar Fundamentals of Web Development
The DOM
The Document Object Model(DOM) is the objects that make up a
web page. This tree structure is formally called the DOM Tree with
the root, or topmost object called the Document Root.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 DOM Nodes

In the DOM, each element within the HTML document

is called a node. If the DOM is a tree, then each node
is an individual branch.
There are:
• element nodes,
• text nodes, and
• attribute nodes
All nodes in the DOM share a common set of
properties and methods.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 DOM Nodes
Element, text and attribute nodes

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 DOM Nodes
Essential Node Object properties
Property Description

attributes Collection of node attributes

childNodes A NodeList of child nodes for this node

firstChild First child node of this node.

lastChild Last child of this node.

nextSibling Next sibling node for this node.

nodeName Name of the node

nodeType Type of the node

nodeValue Value of the node

parentNode Parent node for this node.

previousSibling Previous sibling node for this node.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Document Object
One root to ground them all

The DOM document object is the root JavaScript

object representing the entire HTML document.
It contains some properties and methods that we will
use extensively in our development and is globally
accessible as document.
// specify the doctype, for example html
var a = document.doctype.name;
// specify the page encoding, for example ISO-8859-1
var b = document.inputEncoding;

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Document Object
Document Object Methods
Method Description

createAttribute() Creates an attribute node

createElement() Creates an element node

createTextNode() Create a text node

getElementById(id) Returns the element node whose id attribute matches

the passed id parameter.

getElementsByTagName(name) Returns a nodeList of elements whose tag name matches

the passed name parameter.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Accessing nodes
getElementById(), getElementsByTagName()

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

getElementById():
 The getElementById() method returns an element with a specified value.

 The getElementById() method returns null if the element does not exist.

 The getElementById() method is one of the most common methods in the HTML
DOM. It is used almost every time you want to read or edit an HTML element.
<!DOCTYPE html>
<html>
<body>

<h1 id="demo">The Document Object</h1>

<h2>The getElementById() Method</h2>

<script>
const myElement =
document.getElementById("demo");
myElement.style.color = "red";
</script>

</body>
</html>
Randy Connolly and Ricardo Hoar Fundamentals of Web Development
getElementsByTagname():

 The getElementsByTagName() method returns a collection of all

elements with a specified tag name.

 The getElementsByTagName() method returns an HTMLCollection.

 The getElementsByTagName() property is read-only.

Note:
getElementsByTagName("*") returns all elements in the
document.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

<!DOCTYPE html>
<html>
<body>

<h1>The Document Object</h1>

<h2>The getElementsByTagName() Method</h2>

<p>An unordered list:</p>

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

<p>The innerHTML of the second li element is:</p>

<p id="demo"></p>

<script>
const collection = document.getElementsByTagName("li");
document.getElementById("demo").innerHTML = collection[1].innerHTML;
</script>

</body>
</html>
Randy Connolly and Ricardo Hoar Fundamentals of Web Development
Randy Connolly and Ricardo Hoar Fundamentals of Web Development
 Element node Object

The type of object returned by the method

document.getElementById() described in the previous
section is an element node object.
This represents an HTML element in the hierarchy,
contained between the opening <> and closing </>
tags for this element.
• can itself contain more elements

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Element node Object
Essential Element Node Properties

Property Description

className The current value for the class attribute of this HTML
element.

id The current value for the id of this element.

innerHTML Represents all the things inside of the tags. This can be read
or written to and is the primary way which we update
particular div's using JS.

style The style attribute of an element. We can read and modify

this property.
tagName The tag name for the element.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

Randy Connolly and Ricardo Hoar Fundamentals of Web Development
Step 1: Access an HTML element
Use JavaScript to select the HTML element you want to manipulate. You can do this using
method like document.getElementById()
<div id="myElement">Initial content</div>
let element = document.getElementById("myElement");

Step 2: Get the HTML content

If you want to retrieve the current HTML content of the element, use the innerHTML
property.
let htmlContent = element.innerHTML;
console.log(htmlContent);
// Output: Initial content
Step 3: Set the HTML content
If you want to replace or update the HTML content of the element, assign a new HTML
string to the innerHTML property.
element.innerHTML = "<b>New content</b>";
Step 4: Verify the changes(optional)
You can optionally verify that the HTML content has been updated as
expected.
console.log(element.innerHTML);
// Output: <b>New content</b>
Randy Connolly and Ricardo Hoar Fundamentals of Web Development
 Modifying a DOM element

The document.write() method is used to create output

to the HTML page from JavaScript. The modern
JavaScript programmer will want to write to the HTML
page, but in a particular location, not always at the
bottom
Using the DOM document and HTML DOM element
objects, we can do exactly that using the innerHTML
property

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Modifying a DOM element
More verbosely, and validated

Although the innerHTML technique works well (and is

very fast), there is a more verbose technique available
to us that builds output using the DOM.
DOM functions createTextNode(), removeChild(), and
appendChild() allow us to modify an element in a
more rigorous way

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Changing an element’s
style
To change the style of an HTML element, use this syntax:
document.getElementById(id).style.property = new style
We can add or remove any style using the style or className
property of the Element node.
Its usage is shown below to change a node’s background color and
add a three-pixel border.
var commentTag = document.getElementById("specificTag");
commentTag.style.backgroundColour = "#FFFF00";
commentTag.style.borderWidth="3px";

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 <!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>

<p>Changing the HTML style:</p>

<p id="p1">Hello World!</p>

<p id="p2">Hello World!</p>

<script>
document.getElementById("p2").style.color = "blue";
document.getElementById("p2").style.fontFamily = "Arial";
document.getElementById("p2").style.fontSize = "larger";
</script>

</body>
</html>

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Changing an element’s
style
With class

The className property is normally a better choice, because it

allows the styles to be created outside the code, and thus be
better accessible to designers.
var commentTag = document.getElementById("specificTag");
commentTag.className = "someClassName";
HTML5 introduces the classList element, which allows you to
add, remove, or toggle a CSS class on an element.
label.classList.addClass("someClassName");

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 More Properties
Some Specific HTML DOM Element Properties for Certain Tag Types

Property Description Tags

href The href attribute used in a tags to specify a URL to link to. a

name The name property is a bookmark to identify this tag. a, input,

Unlike id which is available to all tags, name is limited to textarea,
certain form related tags. form

src Links to an external URL that should be loaded into the img,
page (as opposed to href which is a link to follow when input,
clicked) iframe,
script

value The value is related tot he value attribute of input tags. Input,
Often the value of an input field is user defined, and we textarea,
use value to get that user input. submit

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Section 7 of 8

JAVASCRIPT EVENTS
Randy Connolly and Ricardo Hoar Fundamentals of Web Development
 JavaScript Events

HTML events are "things" that happen to HTML elements.

When JavaScript is used in HTML pages, JavaScript
can "react" on these events.
A JavaScript event is an action that can be detected by
JavaScript.
We say then that an event is triggered and then it can be
caught by JavaScript functions, which then do something
in response.
Whenever a user interacts with the page, this action is
considered an event. An example of an event can be a
click, a hover, a page load, a keypress, and many others
things.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

Randy Connolly and Ricardo Hoar Fundamentals of Web Development
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript HTML Events</h1>
<h2>The onclick Attribute</h2>

<button onclick="document.getElementById('demo').innerHTML=Date()">The time is?

</button>

<p id="demo"></p>

</body>
</html>

Before button click After button click

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

Randy Connolly and Ricardo Hoar Fundamentals of Web Development
Randy Connolly and Ricardo Hoar Fundamentals of Web Development
 JavaScript Events
A brave new world

In the original JavaScript world, events could be

specified right in the HTML markup with hooks to the
JavaScript code (and still can).
As more powerful frameworks were developed, and
website design and best practices were refined, this
original mechanism was supplanted by the listener
approach.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 JavaScript Events
Two approaches

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Inline Event Handler Approach

For example, if you wanted an alert to pop-up when clicking a <div>

you might program:
<div id="example1" onclick="alert('hello')">Click for pop-up</div>
The problem with this type of programming is that the HTML markup
and the corresponding JavaScript logic are woven together. It does not
make use of layers; that is, it does not separate content from behavior.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Listener Approach
Two ways to set up listeners

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Listener Approach
Using functions

What if we wanted to do something more elaborate when

an event is triggered? In such a case, the behavior would
have to be encapsulated within a function, as shown in
Listing 6.12.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Listener Approach
Anonymous functions

An alternative to that shown in Listing 6.12 is to use

an anonymous function (that is, one without a
name), as shown in Listing 6.13.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Event Object

No matter which type of event we encounter, they

are all DOM event objects and the event handlers
associated with them can access and manipulate
them. Typically we see the events passed to the
function handler as a parameter named e.

function someHandler(e) {
// e is the event that triggered this handler.
}

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Event Object
Several Options

• Bubbles. If an event’s bubbles property is set to

true then there must be an event handler in place
to handle the event or it will bubble up to its
parent and trigger an event handler there.
• Cancelable. The Cancelable property is also a
Boolean value that indicates whether or not the
event can be cancelled.
• preventDefault. A cancelable default action for an
event can be stopped using the preventDefault()
method in the next slide

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Event Object
Prevent the default behaviour

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Event Types

There are several classes of event, with several types of

event within each class specified by the W3C:
• mouse events
• keyboard events
• form events
• frame events

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Mouse events
Event Description

onclick The mouse was clicked on an element

ondblclick The mouse was double clicked on an element

onmousedown The mouse was pressed down over an element

onmouseup The mouse was released over an element

onmouseover The mouse was moved (not clicked) over an element

onmouseout The mouse was moved off of an element

onmousemove The mouse was moved while over an element

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Keyboard events
Event Description

onkeydown The user is pressing a key (this happens first)

onkeypress The user presses a key (this happens after onkeydown)

onkeyup The user releases a key that was down (this happens last)

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Keyboard events
Example

<input type="text" id="keyExample">

The input box above, for example, could be listened to
and each key pressed echoed back to the user as an
alert as shown in Listing 6.15.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Form Events

JavaScript Form events are those events that get

trigerred when a user interacts with a form in a
website.
The purpose of using form events is to make form
filling process interactive and informative for the user.
These form events includes onclick, onfocus, onblur,
onreset, etc.
Optimal website interactivity creates a positive effect
on user.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Form Events
Event Description
onblur A form element has lost focus (that is, control has moved to a different element,
perhaps due to a click or Tab key press.

onchange Some <input>, <textarea> or <select> field had their value change. This could
mean the user typed something, or selected a new choice.

onfocus Complementing the onblur event, this is triggered when an element gets focus
(the user clicks in the field or tabs to it)

onreset HTML forms have the ability to be reset. This event is triggered when that
happens.
onselect When the users selects some text. This is often used to try and prevent
copy/paste.
onsubmit When the form is submitted this event is triggered. We can do some pre-
validation when the user submits the form in JavaScript before sending the data
on to the server.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Form Events
Example

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Frame Events

Frame events are the events related to the browser

frame that contains your web page.
The most important event is the onload event, which
tells us an object is loaded and therefore ready to
work with. If the code attempts to set up a listener on
this not-yet-loaded <div>, then an error will be
triggered.
window.onload= function(){
//all JavaScript initialization here.
}

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Frame Events
Table of frame events
Event Description

onabort An object was stopped from loading

onerror An object or image did not properly load

onload When a document or object has been loaded

onresize The document view was resized

onscroll The document view was scrolled

onunload The document has unloaded

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Section 8 of 8

FORMS
Randy Connolly and Ricardo Hoar Fundamentals of Web Development
 Validating Forms
You mean pre-validating right?

Form validation in JavaScript is like having a guardian

to safeguard your web forms. It’s an essential part of
modern web development to ensure the data is
accurate and nothing harmful sneaks into your system.
Writing code to pre-validate forms on the client side
will reduce the number of incorrect submissions,
thereby reducing server load.
There are a number of common validation activities
including email validation, number validation, and data
validation.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 What is Form Validation?
Form validation is a fundamental part of web and mobile app
development that ensures the user inputs are correct, safe, and meet
predefined criteria before it’s sent to a server, stored in a database, or
processed in any way.
It serves three main purposes in application development:
 Improve data quality - verifying that the information users provide
aligns with the expected format and content.
 Improve Security - Form validation functions as a defence mechanism
against potential security threats.
 Preventing errors - Form validation helps users avoid common
mistakes.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Validating Forms
Empty field

The preventDefault() method cancels the event, meaning that the

default action that belongs to the event will not occur.

For example, this can be useful when:

•Clicking on a "Submit" button, prevent it from submitting a form
•Clicking on a link, prevent the link from following the URL

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Validating Forms
Empty field

If you want to ensure a checkbox is ticked, use code

like that below.
var inputField=document.getElementByID("license");
if (inputField.type=="checkbox"){
if (inputField.checked)
//Now we know the box is checked
}

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Validating Forms
Number Validation

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Notifying the User
What’s wrong, where is it, and how to fix it.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Types of Input Validation

• Required information. Some data fields just cannot

be left empty. For instance, the principal name of
things or people is usually a required field. Other
fields such as emails, phones, or passwords are
typically required values.
• Correct data type. Some input fields must follow
the rules for its data type in order to be considered
valid.
• Correct format. Some information, such as postal
codes, credit card numbers, and social security
numbers have to follow certain pattern rules.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Types of Input Validation
Continued

• Comparison. Perhaps the most common example

of this type of validation is entering passwords:
most sites require the user to enter the password
twice to ensure the two entered values are
identical.
• Range check. Information such as numbers and
dates have infinite possible values. However, most
systems need numbers and dates to fall within
realistic ranges.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Notifying the User
We found an error, now what?

• What is the problem? Users do not want to read

lengthy messages to determine what needs to be
changed. They need to receive a visually clear and
textually concise message.
• Where is the problem? Some type of error
indication should be located near the field that
generated the problem.
• If appropriate, how do I fix it? For instance, don’t
just tell the user that a date is in the wrong format,
tell him or her what format you are expecting, such
as “The date should be in yy/mm/dd format.”

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Another illustrative examples
What’s wrong, where is it, and how to fix it.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 How to reduce validation errors
An ounce of prevention is worth a pound of cure

• Using pop-up JavaScript alert (or other popup)

messages
• Provide textual hints to the user on the form itself
• Using tool tips or pop-overs to display context-
sensitive help about the expected input
• a JavaScript-based mask

number.html empty_field.html
Password.html

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 How to reduce validation errors
An ounce of prevention is worth a pound of cure

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 How to reduce validation errors
Tool Tips and popovers

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 How to reduce validation errors
JavaScript Mask

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 How to reduce validation errors
HTML 5 input types

Many user input errors can be eliminated by choosing a

better data entry type than the standard
<input type="text">

If you need to get a date from the user, use the HTML5
<input type="date”>

If you need a number, use the HTML5

<input type="number">

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Submitting Forms

Submitting a form using JavaScript requires having a node

variable for the form element. Once the variable, say,
formExample is acquired, one can simply call the submit()
method:
var formExample = document.getElementById("loginForm");
formExample.submit();
This is often done in conjunction with calling preventDefault()
on the onsubmit event.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development