JavaScript: Client-
Side Scripting
Chapter 6
Randy Connolly
Randy Connolly and
and Ricardo
Ricardo Hoar
Hoar Fundamentals of Web
Fundamentals Development
of Web
Development Textbook to be published by Pearson©
Ed2015 Pearson
in early 2014
Randy Connolly and Ricardo Hoar Fundamentals of Web [Link]
[Link]
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
• 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
Randy Connolly and Ricardo Fundamentals of Web
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 interpreted 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 Fundamentals of Web
Client-Side Scripting
Let the client compute
Randy Connolly and Ricardo Fundamentals of Web
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 Fundamentals of Web
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 Fundamentals of Web
Client-Side Flash
JavaScript is not the only type of client-side scripting.
• Browser Plug-ins
• Flash
Randy Connolly and Ricardo Fundamentals of Web
Client-Side Applets
Java Applets
Java applets are written in and are separate objects
included within an HTML document via the <applet>
tag
Randy Connolly and Ricardo Fundamentals of Web
JavaScript History
• JavaScript was introduced by Netscape in their
Navigator browser back in 1996.
• JavaScript is in fact an implementation of a
standardized scripting language called ECMAScript
• JavaScript was only slightly useful to many users
Randy Connolly and Ricardo Fundamentals of Web
HTTP request-reponse loop
Without JavaScript
Randy Connolly and Ricardo Fundamentals of Web
JavaScript in Modern Times
AJAX
JavaScript became a much more important part of
web development in the mid 2000s with AJAX.
AJAX is both an acronym as well as a general
term.
• As an acronym it means Asynchronous JavaScript And
XML.
• The most important feature of AJAX sites is the
asynchronous data requests.
Randy Connolly and Ricardo Fundamentals of Web
Asynchronous data requests
The better AJAX way
Randy Connolly and Ricardo Fundamentals of Web
Section 2 of 8
JAVASCRIPT DESIGN PRINCIPLES
Randy Connolly and Ricardo Fundamentals of Web
Layers
They help organize
When designing software to solve a problem, it is
often helpful to abstract the solution a little bit to help
build a cognitive model in your mind that you can then
implement.
Perhaps the most common way of articulating such a
cognitive model is via the term layer.
In object-oriented programming, a software layer is a
way of conceptually grouping programming classes
that have similar functionality and dependencies.
Randy Connolly and Ricardo Fundamentals of Web
Layers
Common Layers
• Presentation layer. Classes focused on the user
interface.
• Business layer. Classes that model real-world
entities, such as customers, products, and sales.
• Data layer. Classes that handle the interaction with
the data sources.
Randy Connolly and Ricardo Fundamentals of Web
Layers
Just a conceptual idea
Randy Connolly and Ricardo Fundamentals of Web
Section 3 of 8
WHERE DOES JAVASCRIPT GO?
Randy Connolly and Ricardo Fundamentals of Web
Where does JavaScript go?
JavaScript can be linked to an HTML page in a number
of ways.
• Inline
• Embedded
• External
Randy Connolly and Ricardo Fundamentals of Web
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 Fundamentals of Web
Embedded JavaScript
Better
Embedded JavaScript refers to the practice of placing
JavaScript code within a <script> element
Randy Connolly and Ricardo Fundamentals of Web
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 Fundamentals of Web
Section 4 of 8
SYNTAX
Randy Connolly and Ricardo Fundamentals of Web
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 Fundamentals of Web
Variables
Assignment
Randy Connolly and Ricardo Fundamentals of Web
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 Fundamentals of Web
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 Fundamentals of Web
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 Fundamentals of Web
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 Fundamentals of Web
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 Fundamentals of Web
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:
[Link]("Put Messages Here");
And then use the debugger to access those logs.
Randy Connolly and Ricardo Fundamentals of Web
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 block
Randy Connolly and Ricardo Fundamentals of Web
Throw your own
Exceptions that is.
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
Randy Connolly and Ricardo Fundamentals of Web
Section 5 of 8
JAVASCRIPT OBJECTS
Randy Connolly and Ricardo Fundamentals of Web
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 Fundamentals of Web
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 Fundamentals of Web
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 Fundamentals of Web
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 where a dot between the instance name and
the property references that property.
//show [Link] to the user
alert([Link]);
Randy Connolly and Ricardo Fundamentals of Web
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.
[Link]();
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 Fundamentals of Web
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 Fundamentals of Web
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 Fundamentals of Web
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 Fundamentals of Web
Section 6 of 8
THE DOCUMENT
OBJECT MODEL (DOM)
Randy Connolly and Ricardo Fundamentals of Web
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 Fundamentals of Web
The DOM
Seems familiar, because it is!
We already know all about the DOM, but by another
name. The tree structure from Chapter 2 (HTML) is
formally called the DOM Tree with the root, or
topmost object called the Document Root.
Randy Connolly and Ricardo Fundamentals of Web
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 Fundamentals of Web
DOM Nodes
Element, text and attribute nodes
Randy Connolly and Ricardo Fundamentals of Web
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 Fundamentals of Web
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 = [Link];
// specify the page encoding, for example ISO-8859-1
var b = [Link];
Randy Connolly and Ricardo Fundamentals of Web
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 Fundamentals of Web
Accessing nodes
getElementById(), getElementsByTagName()
Randy Connolly and Ricardo Fundamentals of Web
Modifying a DOM element
The [Link]() 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 Fundamentals of Web
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 Fundamentals of Web
Section 7 of 8
JAVASCRIPT EVENTS
Randy Connolly and Ricardo Fundamentals of Web
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 Fundamentals of Web
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 Fundamentals of Web
JavaScript Events
Two approaches
Randy Connolly and Ricardo Fundamentals of Web
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 Fundamentals of Web
Listener Approach
Two ways to set up listeners
Randy Connolly and Ricardo Fundamentals of Web
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 Fundamentals of Web
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 Fundamentals of Web
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 Fundamentals of Web
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 Fundamentals of Web
Event Object
Prevent the default behaviour
Randy Connolly and Ricardo Fundamentals of Web
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 Fundamentals of Web
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 Fundamentals of Web
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 Fundamentals of Web
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 Fundamentals of Web
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 Fundamentals of Web
Form Events
Example
Randy Connolly and Ricardo Fundamentals of Web
Section 8 of 8
FORMS
Randy Connolly and Ricardo Fundamentals of Web
Validating Forms
You mean pre-validating right?
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 Fundamentals of Web
Validating Forms
Empty field
Randy Connolly and Ricardo Fundamentals of Web
Validating Forms
Empty field
If you want to ensure a checkbox is ticked, use code like
that below.
var inputField=[Link]("license");
if ([Link]=="checkbox"){
if ([Link])
//Now we know the box is checked
Randy Connolly and Ricardo Fundamentals of Web
Validating Forms
Number Validation
Randy Connolly and Ricardo Fundamentals of Web
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 = [Link]("loginForm");
[Link]();
This is often done in conjunction with calling preventDefault()
on the onsubmit event.
Randy Connolly and Ricardo Fundamentals of Web