CS1113 Web Programming

Lecture 11
Client Side Scripting

(JavaScript - I)
1

In Todays Lecture
We will get our first taste of JavaScript the
object-based language.
Today we will write (simple) client-side scripts in
JavaScript.
We will become able to appreciate the concept of
objects in JavaScript.
We will learn about the properties & methods of
those objects, and how to read & modify them.
2

HTML

CSS

JavaScript

markup
conten
language

style sheet
presentatio
language

programming
language

behavior

 HTML: is a language for content and structure of the

page. How many divisions in your page, how many
paragraphs, what will be the content of those
paragraphs.
CSS: style sheet language for presentation, what fonts
does the headings have, what will the background
color of the page, whats the width of div.
JavaScript: the programming language, for behavior
and interactivity, what happens when you mouse over
a menu, what happens when you typed the wrong
value in a form field. How long does the photo slide
show takes to move from one image to the next.
4

Now lets take a look at a form that we

constructed, and see how we can make it
better

Lets now review what happens when I enter

all the required info and press the Send
eMail button?

Info contained
in the form

Browser

Users
Computer

Ack
no

wle
dg

Server-Side
Script
eme
nt

Web
Server

Message
to the
receivers
eMail
address

This is what happens when the form is filled correctly.

What if the form is filled incorrectly?

What if the users leaves one of the
essential fields, blank?
What if the user enters an illegal eMail
address? Examples:
altaf2cs.uol.edu.pk
bhola@hotmail.con
bhola@yahoo
9

A Reasonable Scenario
When the Send eMail button is clicked, the
browser sends the data collected through the
form to a script running on the Web server
That server-side script:
receives that data
analyzes it
discovers the missing or incorrect data
sends a message back to the users browser
stating the problem and asks the user to re-send
10

This process
That is the process of user:
Filling the incomplete/incorrect data
Sending it to the server
Receiving the response back from the server
Correcting and resending

is quite time-consuming and uses the servers

resources to help the user correct his mistakes
It can really bog down the server if a large
number of users are using that Web server
11

Client-Side Scripting is a viable alternate

In this technique, one uses the users browser
to checking the form data
If data is missing or is incorrect, the browser
can prompt the user to take corrective action
This way, the form data is sent to the serverside script only after it has been established
that the collected data is complete and correct
12

Server-Side Scripts: Review

Are programs that reside on Web servers
Receive info that a user enters in a form
Process that info and take appropriate action
Examples:
CGI scripts on Unix servers
ASP/PHP scripts on Windows servers
13

New Concept: Client-Side Scripts

Small programs that are a part of the Web page
and run on the users (clients) computer
They interact with the user to collect info or to
accomplish other tasks
Once it has been collected, they may help pass the
collected info on to a server-side script
Well use JavaScript to do client-side scripting.
However, there are many other languages that can
14
be used for that purpose, e.g. VBScript, JScript

JavaScript a CLIENT-SIDE Language

Web Server

Users Computer

Browser
HTML
HTML
CSS
CSS
JavaScript

15

Advantages of Client-Side Scripting

Reduced server load as it does not have to
send messages to the users browser about
missing or incorrect data
Reduced network traffic as the forms data is
sent only once instead of many tos and fros

16

Disadvantages
Client-side scripts do not work with all browsers
Some user intentionally turn scripting off or
disabled on their browsers
This increases the complexity of the Web page,
as it now has to support both situations:
browsers with scripting capability, and those not
having that capability
17

Some of things that JavaScript cannot do!

The following file ops. on the client computer:
Read
Rename
Create

-- Modify
-- Delete

Create graphics (although, it does have the

ability to format pages through HTML including the placement of graphics)
Any network programming bar one function: the
ability to download a file to the browser
specified through an arbitrary URL
18

 There is no works in JavaScript to talk with

a database.
You cant access hardware (USB, etc)

19

Some of the things that JavaScript can do!

1. Control the appearance of the browser.
2. Control the content and appearance of the
document displayed in the browser
3. Interact with the user through event handlers
4. Arbitrary calculations, including floating-point
ones
5. Store & modify a limited amount of data about
the user in the form of client-side cookies
20

COOKIES
Cookies are small files, in which browser
can store some data on client machine, so
that next time user visit the same webpage.
The webpage get to know where he is
actually.
Example:
In cookies, there is information about client
machine address, name, time and date.
When i visit amazon.com for book purchase,
it is written on the webpage, hello
Yasir.
21

What is a Scripting Language?

operating system
Web Browser
Web page
C++ App

Java App

JavaScript

.Net App

JavaScript is intentionally limited, you cant write desktop

application in JavaScript the way you do in C++, Java or .Net
JavaScript only works inside another application the web
browser, all browsers have JavaScript engine inside them. The
OS runs the web browser, the web browser contains the page
and the page contains the JavaScript.
22

A Simple Example of
Client-Side Scripting

23

24

<INPUT
type=submit
name=sendEmail
value=Send eMail
>

Code for the simple Send eMail

button as was described during
the last Web development course
25

<INPUT
type=submit
name=sendEmail
value=Send eMail
onMouseOver=
if (document.sendEmail.sender.value.length < 1)
window.alert(Empty From field! Please correct)
>

Additional JavaScript code for the smart Send

eMail button that would not allow itself to be
26
clicked if the From text field is left
blank

<INPUT
Event
type=submit
Handler
name=sendEmail
value=Send eMail
onMouseOver=
if (document.sendEmail.sender.value.length < 1)
window.alert(Empty From field! Please correct)
>

27

 This is one way of including JavaScript code in

an HTML document that is, including a short
JavaScript segment as part of an HTML tag
There are a few others as well. Lets now find
out about another.
But before we do that
lets just make clear why we are interested
in including JavaScript in our Web pages
28

Why JavaScript?
HTML is great for static Web pages; however,
supports only rudimentary interactivity through
forms and hyperlinks
JavaScript can be used (along with HTML) to
develop interactive content for the Web

29

What is JavaScript?
A programming language specifically designed
to work with Web browsers
It is designed to be used for developing small
programs called scripts that can be
embedded in HTML Web pages
JavaScript:
Is an interpreted language
Supports event-driven programming
Is object-based language
30

Object Based?
Everything that JavaScript manipulates, it
treats as an object e.g. a window or a button
An object has properties e.g. a window has
size, position, status, etc.
Properties are modified with methods e.g. a
resize a window with resizeTo(150, 200)

31

Not Object-Oriented!
JavaScript is not a true object-oriented
language like C++ or Java
It is so because it lacks two key features:
A formal inheritance mechanism
Strong typing

Nevertheless, it does include many key

concepts that are part of almost all objectoriented languages, and therefore is referred as
an object-based language
32

Back to our example

33

34

<INPUT
type=submit
name=sendEmail
value=Send eMail
onMouseOver=
if (document.sendEmail.sender.value.length < 1)
window.alert(Empty From field! Please correct)
>

35

<INPUT
type=submit
name=sendEmail
value=Send eMail
onMouseOver=checkForm()
>

36

<INPUT
type=submit
name=sendEmail
value=Send eMail
onMouseOver=
if (document.sendEmail.sender.value.length < 1)
window.alert(Empty From field! Please correct)
>
<INPUT
type=submit
name=sendEmail
value=Send eMail
onMouseOver=checkForm()
37
>

checkForm()
JavaScript understands onMouseOver it is
one of the pre-defined keywords in JavaScript
However, the case for checkForm() is different
A checkForm() function does not exist in
JavaScript. Therefore, we will have to define it
ourselves
It can either be defined in the HEAD portion or
BODY portion. We will do it in the HEAD.
38

<HTML>
<HEAD>
<TITLE>Send an eMail</TITLE>
<SCRIPT type=text/javascript">
function checkForm() {
if ( document.sendEmail.sender.value.length < 1) {
window.alert( Empty From field! Please correct ); }
}
</SCRIPT>
</HEAD>
<BODY bgcolor=#FFFFCC>
body content
JavaScript code
</BODY>
enclosed in the new
</HTML>
<SCRIPT>,</SCRIPT>
39

HTML tags

We have looked at 2 techniques for embedding

JavaScript code in a Web page:
1. Put the code in the tag for the Send eMail
button - as was shown to you earlier
2. Put the checkForm() code in the HEAD
portion & put the onMouseOver=checkForm()
attribute in the tag for the Send eMail button
Both perform the required function satisfactorily.
Q: Which of two techniques is better?
40

 The put all code in the tag technique seems to

require less code
For very short scripts, all code in the tag
works well. However, this technique does not
work when one needs to put multiple script
statements in the same tag
The code in the HEAD portion is more
general-purpose, and the right choice for
developing larger JavaScript scripts
41

Lets again look at the

JavaScript code

42

The main code segment that goes between the

<SCRIPT>, </SCRIPT> tags in the HEAD:
function checkForm() {
if ( document.sendEmail.sender.value.length < 1) {
window.alert( Empty From field! Please correct );
}
}

The JavaScript code included as an attribute of

the Send eMail button:
onMouseOver=checkForm()
43

Today we checked if the From field of the form

was empty
How can we modify the JavaScript code for
checking if the To field is empty as well?
How about checking all four fields?
How about checking if the addresses given in
the From and To fields are legal eMail
addresses?
Please try thinking about those possibilities?
44

Client-Side JavaScript
Although a version of JavaScript exists
that can be used to write server-side
scripts, our focus in this course will only
be on client-side scripting

45

Case Sensitivity
HTML is not case sensitive. The following
mean the same to the browser:
<HTML>
<Html>

-- <html>
-- <htMl>

JavaScript is case sensitive. Only the first of

the following will result in the desired function
the rest will generate an error or some other
undesirable event:
onMouseClick -- OnMouseClick
onmouseclick -- ONMOUSECLICK
46

alert(hello world);
Alert(hello world);
47

Object: A named collection of properties

(data, state) & methods (instructions, behavior)
A collection
of properties
& methods

prop 1

All objects have the

name property: it
holds the name of
the object (collection)
name

prop 2
method 1

prop 3
prop 4

method 2
prop 5
method 3
48

Example: A Bicycle

color

name

height
inflate()

pressure
speed

accelerate()
direction
turn() park()
49

Example: JavaScripts window Object

width
height
close()

name
document
location

open()
status
alert()
50

Properties
Objects may have a single or several properties
A property may have one of the following
values:
Number
-- Text
-- Boolean
Array
-- Functions
Objects (Example: document a property of the
window object is an object in itself. A
document in turn may contain a form object as a
property, and then that form may contain a
button property, which, once again, is an object in
itself)
51

Referring to a Property
dot

objectName.propertyName
Examples:
window.width
button.value
52

53

54

<HTML>
<HEAD>
<TITLE>Change Property Demo # 1</TITLE>
<SCRIPT type=text/JavaScript>
function changeStatus() {
window.status = Mouse has touched the button;
}
</SCRIPT>
</HEAD>
<BODY>
<H1>Change Property Demo # 1</H1>
<FORM name=dummy method= action=>
<INPUT type=submit name= value=Change Status
onMouseOver=changeStatus()>
</FORM>
</BODY>
55
</HTML>

The main code segment that goes between the

<SCRIPT>, </SCRIPT> tags in the HEAD:
function changeStatus() {
window.status=Mouse has touched the button;
}
new value

property

The JavaScript code included as an attribute of the

Submit button:
onMouseOver=changeStatus()
56

57

58

The main code segment that goes between the

<SCRIPT>, </SCRIPT> tags in the HEAD:
function gotoURL() {
window.location=http://www.uol.edu.pk/;
}
new value

property

The JavaScript code included as an attribute of the

Go to UOL button:
onMouseOver=gotoURL()
59

You should be connected to the

Internet for the successful execution
of the example that we just
discussed

60

A Suggestion
Please try the pieces of code that I just
demonstrated to you to change the
status and location properties of the
window object yourself
Also try changing the width, height
properties of the window object

61

Types of Objects
JavaScript objects
Objects that are part of JavaScript
Examples: window, document

Browser objects
Objects that contain info not about the
contents of the display, but the browser itself
Examples: history, navigator

User-defined object
62

JavaScript Object Hierarchy

63

Predefined JavaScript Objects

Anchor

Applet

Area

Array

Boolean

Button

Checkbox

Date

Document

Event

Fileupload

Form

Frame

Function

Hidden

History

Image

Layer

Link

Location

Math

Mimetype

Navigator

Number

Object

Option

Password

Plugin

Radio

RegExp

Reset

Screen

Select

String

Submit

Text

Textarea

window

64

 Now we have established what we mean by

objects: a named collection of properties and
methods
And that JavaScript treats everything that it
manipulates as an object
We have also learnt how to change the
properties of these objects by selecting a
property and equating it to a new value
65

Methods: Functions (code, instructions,

behavior) associated with objects
Methods are functions associated with
an object that can be used to
manipulate that object
Example:
window.close()
Here close() is a method that has been
defined for the window object. Its
function is to close the window
66

Referring to a Method
dot

objectName.methodName( argumnets )
Examples:
window.close()
button.click()

67

Info is
passed on to
the method
through one
or more
arguments

A few more methods associated

with the window object

alert()
confirm()
prompt()
close()
open()
focus()
blur()
setTimeOut()
setInterval()

68

69

The main code segment that goes between the

<SCRIPT>, </SCRIPT> tags in the HEAD:
function uolWindow() {
window.open(http://www.uol.edu.pk/);
}
argument

method

The JavaScript code included as an attribute of the

New UOL Window button:
different event handler
onClick=uolWindow()
70

DOM (Document Object Model)

What is document? Document simply means a web
page. But this document can be represented by
different ways.
What are the objects? Dates, arrays, images,
headers etc
What is the model? Is set of terms or standards we
are agreed upon.
DOM is set of terms that describe exactly how to
interact the pieces of a web page.
71

How to get an element node

<html>
<head>
<title>About JavaScript</title>
</head>
<body>
<h1>Learning JavaScript</h1>
<p>JavaScript is: </p>
<ul id=optionList>
<li>a language that runs in
browser</li>
<li>simple, but powerful</li>
<li>misunderstood</li>
</ul>
</body>
</html>

html
head

body

title

72

h1

ul

li

li

li

 You can add id and class attribute to any of

your html element. Class can be added to
multiple elements. Id should only applies to
one element.
If element has a unique id you can grab it
in JavaScript possibly the most important
method of document object which is:
document.getElementById(someId);
73

Retrieving an element by ID
var myElement = document.getElementById(abc);
html
head

title

body

h1

ul id =abc

li

li
74

li

 What if i dont have id or i want to grab

more than one element.
document.getElementsByTagName(a);
Notice, its elements the plural. What
this is going to do is go through our
document and give us back any of the
elements that are anchor elements.

75

Retrieving an element by ID
var ListItems = document.getElementsByTagname(li);
var myLinks = document.getElementsByTagname(a);
html

myLinks

head

ListItems
0
1
2

title

body

h1

ul id=abc

li

li
76

li

77

78

The main code segment that goes between the

<SCRIPT>, </SCRIPT> tags in the HEAD:
function changeBgcolor() {
window.document.bgColor = pink;
}
new value

property

The JavaScript code included as an attribute of the

Change Color button:
onMouseOver=changeBgcolor()
79

In addition to bgColor, there are many other

properties of the document object, e.g.

fgColor
linkColor
title
URL
referrer
lastModified

cookie
forms[ ]
images[ ]
links[ ]

80

Popup Boxes
Alert Box
window.alert(Hello Every body!!");
Confirm Box
window.confirm("Press a button");
Prompt Box
window.prompt(Your name","")
81

82

Read-Only Properties

83

 We have learnt how to modify the properties of

objects
But the properties are not there just so that we
can modify them; we can also just read them
that is just find out their current value
Let us now look at an example where we first
read a property, display the current value, and
then change the property
84

85

86

The main code segment that goes between the

<SCRIPT>, </SCRIPT> tags in the HEAD:
function changeBgcolor() {
window.document.bgColor = pink;
oldColor = window.document.bgColor;
window.alert("The old color was " + oldColor);
}
The JavaScript code included as an attribute of the
Change Color button:
onMouseOver=changeBgcolor()
87

Event Handlers
Objects are made up of properties and
associated methods
Many objects also have event handlers
associated with them
Events are actions that occur as a result of
users interaction with the browser
We use event handlers [e.g. onMouseOver(),
onClick()] to design Web pages that can react
to those events
88
More on event handlers in a future
lecture