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
 Why JavaScript…?

.HTML
.CSS
.JavaScript

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Section 1 of 8

WHAT IS JAVASCRIPT
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

HTML + CSS + JavaScript = Real Interactivity

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

 JavaScript has 3 parts
i.core: it includes operators expressions statements
and sub programs
ii.client side: it is a collection of objects using which
one can have control over the browser and user
browser interaction is possible
iii.server side: it is a collection of objects using which
one can access the database on the server

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

Client side scripting :
• the client side scripting is a class of scripting languages
that are used on clients machine in the users web
browser.
• The client side scripting allows to change the contents
of the web page depending up on the user input.
• the client side scripting my contain instructions for the
browser to follow the response of the browser for
example on clicking the button some message should
be displayed sometimes it is not necessary that server
should respond each time some actions can be
executed as a response by the client side scripting

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Design Principles

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

Presentation Layer
• For effective web design JavaScript layer exist above
pure HTML page these layers have different
capabilities and functionalities.
• this layer is responsible for display of information
• it includes common things like creating, hiding and
showing divs using tabs to show multiple views or
having arrows to page through result sets
• This layer is most closely related to the user
experience
• it is generally most visible to the end user

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

Validation layer:
• The JavaScript is used to validate logical aspects of
user experience.
• It takes care of validating the form before submitting.
• It is normal used in conjunction with presentation

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Asynchronous layer
• Normally JavaScript operates in a synchronous
manner where a request sent to the server requires a
response before the next lines of code can be
executed during the wait between request and
response the browser stills in a loading state and only
updates upon receiving the response
• in contrast asynchronous layer can route request to
the server in the background in this model, as certain
events are triggered, the JavaScript send the http
request to the server but while waiting for the
response the rest of the application functions
normally and the browser isn’t in a loading state

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

 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.
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

 Table JavaScript reserved words

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Table Precedence and
associativity of the numeric
operators

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Table Properties of Number

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Table : String methods

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Table : Methods for the Date
object

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

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

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

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

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

 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
Index and Value

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

 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

 Section 6 of 8
THE DOCUMENT OBJECT
MODEL (DOM)
Randy Connolly and Ricardo Hoar Fundamentals of Web Development
 The DOM
Document Object Model

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
Seems familiar, because it is!

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
Creates an attribute node
createAttribute()

Creates an element node

createElement()

Create a text node

createTextNode()

getElementById(id) Returns the element node whose id attribute

matches the passed id parameter.

Returns a nodeList of elements whose tag name

getElementsByTagName(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

 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

 Section 7 of 8

JAVASCRIPT EVENTS
Randy Connolly and Ricardo Hoar Fundamentals of Web Development
 JavaScript 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.

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
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

Writing code to prevalidate 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

 Validating Forms
Empty field

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

 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

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