CIT 218

Web Client Application

Programming (with
JavaScript & HTML5)
 Lecture 1

Topic 1: Introduction to
Web Programming,
JavaScript & HTML5
 Lecture Overview

CIT 218 Saka D. 3

 Web Programming
• Web page design (web design): Visual design
of web pages.
• Web page authoring (web authoring):
Creation and assembly of HTML tags,
attributes and data making up a web page.
• Web development (web programming):
Design and creation of software applications
that run in a website.

CIT 218 Saka D. 4

• Web Application: is a program that is
executed on a web server but accessed through
a web page loaded in a client browser.

CIT 218 Saka D. 5

 The WWW Client/Server Architecture

• Client/Server Architecture – a computer

system in which a server waits for a request
from a client computer in order to provide the
resources or services requested for.
• There are 2 types of architectures:
i. 2-tier
ii. 3-tier architecture

CIT 218 Saka D. 6

Two-Tier Client/Server System

CIT 218 Saka D. 7

• The two-tier system consists of two components
(applications):
i. a client and
ii. server.
• Server (back end) – is usually a database from
which a client requests for information.
• A server fulfills a request for information by
managing the request or serving the requested
information to the client—hence the term,
“client/server.”
• Client (front end) – the primary role is to
implement the user interface.

CIT 218 Saka D. 8

• Other roles include:
i. Gathers information from user
ii. Submits information to server
iii. Receives, formats, presents results returned
from the server
• The main responsibilities of a server are
usually data storage, management, and
communicating with external services.
• On client/server systems, heavy processing
e.g. calculations, usually takes place in the
server.
CIT 218 Saka D. 9
• However, as clients have increasingly become
powerful, many client/server systems have placed
increasing amounts of the processing
responsibilities on the client.
• In a typical client/server system, a client computer
might contain a front end that is used for
requesting information from a database on a
server.
• The server locates records that meet the client
request, performs some sort of processing, such as
calculations on the data, and then returns the
information to the client.

CIT 218 Saka D. 10

• The client computer can also perform some
processing, such as building the queries that
are sent to the server or formatting and
presenting the returned data.
• The web is built on a two-tier client/server
system, in which a web browser (the client)
requests documents from a web server.
• The web browser is the client user interface
and the web server is the repository for web
pages.

CIT 218 Saka D. 11

• The requests and responses through which a
web browser and web server communicate
occur via Hypertext Transfer Protocol (HTTP),
which is the main system used on the web for
exchanging data.
• After you start adding databases and other
types of applications to a web server, the
client/server system evolves into what is
known as a three-tier client/server
architecture.

CIT 218 Saka D. 12

Three-tier/Multitier client/Server
Architecture

CIT 218 Saka D. 13

• Also known as a multitier client/server system
or n-tier client/server system.
• It consists of three distinct pieces:
i. Client tier - implements the user interface
ii. Processing tier - handles the interaction
between the client and the data storage tier.
–It is also called the processing bridge.
iii. Data storage tier – stores data in a
database
• Note: processing can still take place in both
the client and database tiers.

CIT 218 Saka D. 14

• The three-tier architecture is more conceptual
than physical.
– Both the processing and database tiers can be
located in the same host/server computer.

CIT 218 Saka D. 15

 Static Vs Dynamic Web Pages
How Static Web Pages Are Processed

CIT 218 Saka D. 16

• Static web page: is an HTML document that's
stored on the web server and doesn't change.
• When the user requests a static web page, the
browser sends an HTTP request to the web
server.
• The web server retrieves the HTML
document/file and sends it back to the browser
as part of an HTTP response.
• When the browser receives the HTTP
response, it renders the HTML into a web page
that is displayed in the browser.

CIT 218 Saka D. 17

How Dynamic Web Pages Are Processed

CIT 218 Saka D. 18

• A dynamic web page is a page that is
generated by a program (script) running on a
web server.
• When a web server receives a request for a
dynamic web page, it looks up the extension of
the requested file to determine which
application server should process the request.
• When the application server receives a request,
it runs the specified script.

CIT 218 Saka D. 19

• Often, this script uses the query that it gets
from the web browser to get the appropriate
data from a database server. This script can
also store the data that it receives in the
database.
• When the application server finishes
processing the data, it generates the HTML
document and returns it to the web server.
• Then, the web server returns the HTML
document (web page) to the web browser as
part of an HTTP response.
CIT 218 Saka D. 20
 Client-Side Vs Server-Side Scripting

• Scripting language – a type of computer

language that is capable of programmatically
manipulate a web page.
• Client-side scripting - refers to craft
programming using a scripting language that
runs on a local browser (on the client tier)
instead of a web server.
• Examples: JavaScript, VBScript etc.

CIT 218 Saka D. 21

• Scripting engine - the part of a web browser
that translates and executes scripting language
code.
• A web browser that contains a scripting engine
is called a scripting host.
• A scripting engine is an interpreter.

CIT 218 Saka D. 22

Uses of Client-Side Scripts
i. Turn static web pages into applications such as
games or calculators.
ii. Validate user input
iii. Change the contents of a web page after a
browser has rendered it.
iv. Create visual effects such as animation.
v. Control the web browser window itself.
vi. Work with information such as device
orientation, speed, and geolocation reported by
web-connected devices

CIT 218 Saka D. 23

Server-Side Scripts
• Server-side scripting - Scripting language
executed from a web server.
• Popular languages: PHP, ASP, Python, Ruby
• Server-side scripts can be used to develop
interactive web sites to communicate with a
database.
• Server-side scripts work in the processing tier
and have the ability to handle communication
between the client tier and the data storage tier.
CIT 218 Saka D. 24
• At the processing tier, a server-side script
usually prepares and processes the data in
some way before submitting it to the data
storage tier.

CIT 218 Saka D. 25

Uses of Server-Side Scripts
i. Shopping carts
ii. Search engines
iii. Discussion and commenting systems
iv. Web-based email systems
v. Authentication and security mechanisms
vi. Blogs and content management systems
vii.Multiplayer games

CIT 218 Saka D. 26

Server-side scripting language limitations
i. Cannot access or manipulate a web browser
ii. Cannot run on a client tier

CIT 218 Saka D. 27

When to Use Client Scripts Vs Server Scripts
• Use client scripts to handle the user interface
processing and light processing e.g. data
validation.
• Use server scripts to perform intensive
calculations and data storage.
• Rule: it is important to perform as much
processing as possible on the client.

CIT 218 Saka D. 28

Advantages of Client Scripts (Apps)
1. Distributing processing among multiple
clients creates applications that are more
powerful because the processing power is not
limited to the capabilities of a single
computer.
2. Client devices—including computers, tablets,
and smartphones—become more powerful
every day. Thus, it makes sense t use a web
application to harness some of this power and
capability.
CIT 218 Saka D. 29
3. Local processing on client computers
minimizes transfer times across the Internet
and creates faster applications.
4. Performing processing on client computers
decreases the amount of server resources
needed by application providers, decreasing
costs for infrastructure and power use.

CIT 218 Saka D. 30

 Introduction to JavaScript
• JavaScript: is a client-side, interpreted,
object-oriented and event-driven scripting
language.
• It was first introduced in Netscape Navigator
and named LiveScript.
• The name changed to JavaScript 1.0 with the
release of Navigator 2.0.
• Later Microsoft released Internet Explorer 4.0
with a version of JavaScript named Jscript.
CIT 218 Saka D. 31
• The 2 versions differed so greatly that
programmers were forced to write different
applications for the 2 browsers.
• To avoid similar problems in the future, an
international standardized version of
JavaScript called ECMAScript, was created.
• Its most recent version is edition ES6.

CIT 218 Saka D. 32

 JavaScript Capabilities
i. It can turn a static web page into an application
e.g. game or calculator etc.
ii. It can change the contents of a web page after a
browser has rendered it.
iii. Create visual effects such as animation.
iv. Control the web browser window itself.
v. Work with information such as device
orientation, speed, and geolocation reported by
internet-enabled devices.

CIT 218 Saka D. 33

 JavaScript Security Issues
• For security reasons, JavaScript has several
limitations set on its operations:
1.Cannot be used outside a web browser.
2.Cannot run system commands or execute
programs on a client.
3.Can only manipulate select files associated
with the browser.

CIT 218 Saka D. 34

4. Access in the client is limited to reading and
writing cookies and a few other types of
browser storage.
5. JavaScript cannot interact directly with web
servers that operate at the processing tier.

CIT 218 Saka D. 35

 Components
of a JavaScript Application

CIT 218 Saka D. 36

1. HyperText Markup Language (HTML5): is
used to define the content and structure of a
web page.
2. Cascading Style Sheets (CSS): used to format
the appearance of different elements of a web
page by specifying the fonts, colors, borders,
spacing, and layout of the pages.
3. JavaScript – used to do the client-side
processing e.g. user input validation

CIT 218 Saka D. 37

 JavaScript Development Tools
• Aptana Studio 3 (Windows and Mac)
• Komodo Edit (Windows and Mac)
• Notepad++ (Windows)
• TextWrangler (Mac) etc.

CIT 218 Saka D. 38

 Embedding JavaScript to an HTML
Document
• JavaScript code is placed between the <script>
and </script> tags.
• Example:
<script>
document.bgColor=“red”;
</script>
• The <script> tag tells the browser that the
scripting engine must interpret the commands it
contains.

CIT 218 Saka D. 39

 JavaScript Basic Syntax
1. JavaScript Block
• A block of JavaScript Code must be enclosed
between the <script> and </script> HTML
tags.
• Example:
<script>
document.write(“Hello Africa”);
</script>
CIT 218 Saka D. 40
2. Reserved word
• JavaScript native keywords are reserved and
cannot be used for any other purpose e.g. for
variable naming.
• Examples: var, document, write, instanceof,
typeof etc.
3. Case sensitivity
• JavaScript is case sensitive
• N/B: All reserved words must be in lower case.

CIT 218 Saka D. 41

4. Identifiers
• Identifiers may be one or more characters in
the following format:
a) The first character must be a letter, an
underscore (_), or a dollar sign ($).
b) All other characters may be letters,
underscores, dollar signs, or numbers.
• By convention, identifiers use camel case:
firstName, myCar etc.

CIT 218 Saka D. 42

5. Comments
• A single-line comment begins with two
forward-slash characters:
//single line comment
• A block comment begins with a forward slash
and asterisk (/*) and ends with the opposite
(*/) e.g.:
/*
* This is a multi-line
* Comment
*/
CIT 218 Saka D. 43
6. Strict Mode
• ECMAScript 5 introduced the concept of strict
mode.
• Strict mode addresses some erratic behavior of
earlier versions and throws errors for unsafe
activities.
• To enable strict mode for an entire script,
include the following at the top: “use strict”;

CIT 218 Saka D. 44

7. Semicolons
• A JavaScript executable statement terminate
with a semicolon “;”.
example:
document.write(“Hello Africa”);
8. White space
• JavaScript ignores extra white spaces within a
statement.

CIT 218 Saka D. 45

• Example App: 01Syntax.html
<!DOCTYPE html>
<html>
<head>
<title>Ex1 JavaScript Syntax</title>
</head>
<body>
<p>This web page uses JavaScript to change page background
color to red.</p>
<script>
// code to change page background color
document.bgColor="red";
</script>
</body>
</html>

CIT 218 Saka D. 46

CIT 218 Saka D. 47
 The Document Object
• JavaScript is an object-oriented programming
language.
• As such, it treats a web page as an object –
called the document object.
• The document object provides a set of methods
and properties for manipulating a web page.
• The two vastly used methods are:
i. write() and
ii. getElementById()

CIT 218 Saka D. 48

The write() Method
• The write() method is used to add new text to
a web page dynamically (i.e. while it’s already
open).
• The method takes a literal constant as
argument.
• Example:
document.write(“Hello Africa!”);
• The literal constant specifies the text to be
output.

CIT 218 Saka D. 49

• The method can also take an HTML element
as an argument.
• Example 2:
document.write(<a href=“”>Click Me</a>);

CIT 218 Saka D. 50

• Example App:01WriteMethod.html
<!DOCTYPE html>
<html>
<head>
<title>Ex2 write Method Demo</title>
</head>
<body>
<script>
document.write("Hello Africa!");
document.write('<p><a href ="http://
www.masenouniversity.ac.ke/">Visit Maseno</a></p>');
</script>
</body>
</html>

CIT 218 Saka D. 51

CIT 218 Saka D. 52
 JavaScript Primitive Data Types
• Data type: a specific value category.
• Primitive type: data type assigned a single
value.

CIT 218 Saka D. 53

The null Data Type
• It is both a data type and a value.
• It can be assigned to a variable.
• It indicates no usable value.
• Use: it is used to ensures that a variable does
not contain any data value.

CIT 218 Saka D. 54

 JavaScript Variables
Variable Declaration
• Variable: a named storage location in the
primary memory of a computer.
• Syntax:
var variableName;
• Example:
var fName;

CIT 218 Saka D. 55

Rules for Variable Naming
1. Variable names cannot contain spaces.
2. Variable names must begin with a letter, an
underscore (_) or a dollar sign ($).
3. Variable names can only contain letters,
numbers, underscores, or dollar signs.
4. Variable names are case-sensitive

CIT 218 Saka D. 56

The Assignment Operator
• The assignment operator, “=“, is used for
assigning (copying) a value to a variable.
• Example:
var x = 5;

CIT 218 Saka D. 57

• Examples:
var stateTax;
document.write(stateTax);
stateTax = 40;
document.write(stateTax);
stateTax = null;
document.write(stateTax);

CIT 218 Saka D. 58

Undefined Variable
• Undefined Variable: a variable that has never
had a value assigned to it, has not been
declared, or does not exist.
• Undefined data indicates that the variable has
never been assigned a value: not even the null
value.
• Use: it is used to determine if a value is being
used by another part of a script.

CIT 218 Saka D. 59

Static vs Dynamic Typing
• JavaScript does not require you to declare
variable data type. Hence, its a loosely/duck
typed language.
• Loosely typed languages - Programming
languages that do not require you to declare
the data types of variables.
• A loosely typed language is also known as
dynamically typed. This is because data types
can change after they have been declared.

CIT 218 Saka D. 60

• JavaScript interpreter automatically determines
the variable data type by scanning the value
stored in the variable
• Examples:
diffTypes = "Hello World"; // String
diffTypes = 8; // Integer number
diffTypes = 5.367; // Floating-point number
diffTypes = true; // Boolean
diffTypes = null; // Null

CIT 218 Saka D. 61

• Strongly typed programming languages
require declaration of a variable’s data type.
• Strong typing is also known as static typing
• Static typing means that variable type cannot
change after it has been declared.
• Loosely typed programming languages do not
require declaration of the data types of
variables

CIT 218 Saka D. 62

Numerical Values
• JavaScript supports two numeric data types:
Integers and floating-point numbers.
• Integer: a positive or negative whole number.
• Floating-point number: a fractional number
• It can be written in exponential notation.
• Exponential notation: a scientific notation for
writing very large or very numbers.

CIT 218 Saka D. 63

• Example:
200,000,000,000 = 2.0 x 1011 = 2.0e11
• Floating-point values in JavaScript range from
approximately ±1.7976931348623157 × 10308
to ± 5 × 10−324.
• Floating-point values that exceed the largest
value of ±1.7976931348623157 × 10308 result
in a special value called, Infinity.

CIT 218 Saka D. 64

• Floating-point values that exceed the smallest
negative value of ±5 × 10−324 result in a value
called, - Infinity.

CIT 218 Saka D. 65

 JavaScript Dialog Boxes
• Dialog (popup) boxes are used to add
interactivity to a web page.
• There are 3 types dialog boxes:
i. Alert box
ii. Confirm box
iii. Prompt box

CIT 218 Saka D. 66

1. Alert Box

CIT 218 Saka D. 67

• The Alert box is used to ensure information is
passed to the user.
• It is created using the alert() function.
• Syntax:
alert("text");
• Example:
alert(“Invalid input”);
• N/B: The user must click the "OK" button to
dismiss the dialog box.

CIT 218 Saka D. 68

Example App:01AlertBox.html
<!DOCTYPE html>
<html>
<head>
<title>Alert Box</title>
<body>
<p>This web page demonstrates the use of Alert Box to
interact with a visitor.</p>
<script>
alert("Invalid input!");
</script>
</body>
</html>

CIT 218 Saka D. 69

2. Confirm Box

CIT 218 Saka D. 70

• The confirm box is used to ask the user to
verify or accept something.
• It is generated using the confirm() function.
• Syntax:
var variableName=confirm(“confirmation text");
• Example:
var reply = confirm(“Click Ok to proceed or
Cancel to stop”);
• To dismiss the dialog box, the user must click
either "OK" or "Cancel“ buttons.
CIT 218 Saka D. 71
• If the user clicks "OK” button, the dialog box
returns value true.
• If the user clicks "Cancel” button, the dialog
box returns value false.

CIT 218 Saka D. 72

Example App: 01ConfirmBox.html
<!DOCTYPE html>
<html>
<head><title>Confirm Box</title> </head>
<body>
<p>This web page demonstrates the use of Confirm Box to
interact with a visitor.</p>
<script>
var reply = confirm("Click Ok to proceed or Cancel
to stop");
document.write("<br />Your response is: ", reply);
</script>
</body>
</html>

CIT 218 Saka D. 73

3. Prompt box

CIT 218 Saka D. 74

• The prompt box is used to ask (prompt) a user
to input a value.
• It is generated using the prompt() function.
• Syntax:
variableName=prompt("sometext","defaultvalue
");
• The default value argument is optional.

CIT 218 Saka D. 75

• Example:
var name = prompt("Please enter your name");
• To dismiss the prompt box, the user must click
either "OK" or "Cancel" buttons.
• Clicking the "OK" button, the box returns the
input value.
• Clicking the "Cancel" button, the box returns
the null value.

CIT 218 Saka D. 76

Example App: 01PromptBox.html
<!DOCTYPE html>
<html>
<head><title>Prompt Box</title></head>
<body>
<p>This web page demonstrates the use of prompt box to
interact with a visitor.</p>
<script>
var name = prompt("Enter your first name:");
document.write("<br />Your name is, ", name);
</script>
</body>
</html>

CIT 218 Saka D. 77

The parseInt() & parseFloat() Methods
• Values captured using the prompt dialog box
and other HTML5 elements are string data.
• There are 2 methods used to convert string
data to numbers:
i. parseInt() and
ii. parseFloat()

CIT 218 Saka D. 78

The parseInt Method
• The method converts a string to an integer.
• If it can't convert the string to an integer, it
returns NaN (Not a Number) value.
• Example:
var num = parseInt(age);

CIT 218 Saka D. 79

The parseFloat Method
• The method converts a string to a floating
point number.
• If it can't convert the string to a fractional
value, it returns NaN (Not a Number) value.
• Example:
Var radius = parseInt(rad);
Var radius =parseFloat(prompt(“Enter radius”);

CIT 218 Saka D. 80

• Example: App to capture 2 integers and find
the sum

CIT 218 Saka D. 81

Example App: Ex6ParseInt.html
<!DOCTYPE html>
<html>
<head><title>Ex 6 parseInt Function Demo</title></head>
<body>
<h1 style=“text-align: center;”>Sum App</p>
<script>
var fnum, snum, sum;
fnum = parseInt(prompt("Enter first number:"));
snum = parseInt(prompt("Enter second number:"));
sum = fnum + snum;
document.write("<br />First number: ", fnum);
document.write("<br />Second number: ", snum);
document.write("<br />The sum is: ", sum);
</script>
</body>
</html>

CIT 218 Saka D. 82

 The getElementById() Method
• The method is used to locate and return an
element object that represents an HTML
element that matches a specified id in a web
page.
• If the document has no element with the
specified id, the method returns value null.

CIT 218 Saka D. 83

• Syntax:
var varName = document.getElementById("id");
• Example:
var fname =
document.getElementById("fname");

CIT 218 Saka D. 84

• If the element is matched, specific properties
of the element are then appended to the
element’s object reference.
• This makes it possible to retrieve information
about the element or change the values
assigned to its attributes.
• Two properties are used for this purpose:
i. innerHTML
ii. value

CIT 218 Saka D. 85

The value Property
• The value property is used to retrieve the value
of an <input type=“” value=“” /> element.
• Example:
var firstName;
firstName = document.getElementById("fname").value;
• On the other hand, the property is also used to set the
value of an <input type=“” /> element.
• Example:
var fName =
document.getElementById(“fname").value = firstName;

CIT 218 Saka D. 86

Example App: Ex7ValueProperty.html
<!DOCTYPE html>
<html>
<head><title>Ex3 value Property Demo</title></head>
<body>
<p>This App reads/sets a text field contents using the value property
<form id="regForm">
First Name<input type="text" id="fname" value="John" /><br /><br />
Second Name<input type="text" id="sname" value="" /><br /><br />
</form>
<script>
var firstName, secondName;
firstName = document.getElementById("fname").value;
document.write("<br />First Name: ", firstName);
secondName = "Kamau";
document.getElementById("sname").value = secondName;
</script>
</body>
</html>

CIT 218 Saka D. 87

CIT 218 Saka D. 88
The innerHTML Property
• The innerHTML property is used to
retrieve/set the content of all other HTML
elements other than the <input type=“”
value=“” /> element.
• Example:
<p id=“p1”>Maseno</p>
var pg1=getElementById(“p1”).innerHTML;

CIT 218 Saka D. 89

• It is also used to set/change the content of an
HTML element.
• Example:
getElementById(“p1”).innerHTML=“Kisumu”;

CIT 218 Saka D. 90

• Example App: Ex8InnerHTML.html
<!DOCTYPE html>
<html>
<head><title><head>Ex8 innerHTML Property Demo</title></head>
<body>
<p id="p1">This App reads a paragraph element content using the innerHTML
property</p>
<p id="p2">Maseno</p>
<script>
var pg2=document.getElementById("p2").innerHTML;
document.write("<br />The intial content of the second paragraph is:", pg2);
document.write("<br />The App then changes the paragraph element content using the
innerHTML property");
var response = prompt("Enter a university of choice:");
document.getElementById("p2").innerHTML = response;
pg2=document.getElementById("p2").innerHTML;
document.write("<br />The final content of the second paragraph is:", pg2);
</script>
</body>
</html>

CIT 218 Saka D. 91

 JavaScript Output Options
• JavaScript can "display" data in 4 different ways:
i. Writing into the HTML output using
document.write() method.
ii. Writing into an alert box, using window.alert()
function.
iii.Writing into an HTML element using
innerHTML property.
iv.Writing into the browser console using
console.log() method.

CIT 218 Saka D. 92

Using innerHTML() Property

CIT 218 Saka D. 93

• Example:
<p id=“p1”></p>
document.getElementById(“p1").inner
HTML = ”Hello Africa”;

CIT 218 Saka D. 94

Example App: Ex9InnerHTMLOutput.html
<!DOCTYPE html>
<html>
<head><title>Ex 9 innerHTML Output Demo
</title></head>
<body>
<p id="p1"></p>
<script>
var firstname = "John";
document.getElementById("p1").innerHTML =
"Name:" + firstname;
</script>
</body>
</html>

CIT 218 Saka D. 95

Using window.alert() Dialog Box

CIT 218 Saka D. 96

• Example App: Ex10AlertBox.html
<!DOCTYPE html>
<html>
<head><title>Ex 10 alert method Demo </title>
</head>
<body>
<p id="p1"></p>
<script>
var age=18;
window.alert("Age:" + age);
</script>
</body>
</html>
CIT 218 Saka D. 97
3. Using console.log() Method

CIT 218 Saka D. 98

• For debugging purposes, you can call the
console.log() method in the browser to display
data.
• Example:

CIT 218 Saka D. 99

Example App:Ex11LogMethod.html
<!DOCTYPE html>
<html>
<head><title>Ex 11 log method
Demo</title></head>
<body>
<script>
var total=5+6;
console.log(total);
</script>
</body>
</html>

CIT 218 Saka D. 100