Web Engineering

Week 6

Client Side Scripting

(JavaScript)
1
 Lecture Contents

• Introduction to JavaScript – the object-based

language.

• Client-side scripting in JavaScript.

• Concept of objects in JavaScript.

• properties & methods of the objects, and how to

read & modify them.
2
 HTML CSS JavaScript

markup language style sheet language programming language

content presentation behavior

3
• 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, what’s 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 let’s take a look at a form that we
constructed, and see how we can make it
better

5
6
Let’s now review what happens when I enter
all the required info and press the “Send
eMail” button?

7
 Info contained
in the form
Browser

Server-Side
User’s Script
Computer

Web
Server Message
to the
receiver’s
eMail
8
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:
– [Link]

– altaf@[Link]

– altaf@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 user’s 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 server’s
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 user’s 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 server-

side 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 user’s (client’s) 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

• We’ll use JavaScript to do client-side scripting.

However, there are many other languages that 14
can
be used for that purpose, e.g. VBScript, JScript
JavaScript a CLIENT-SIDE Language

User’s Computer Web Server

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 user’s browser about
missing or incorrect data

• Reduced network traffic as the form’s data is

sent only once instead of many to’s and fro’s

16
 Disadvantages
• 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 -- Modify
– Rename -- Delete
– Create

• 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 way in JavaScript to talk with a
database.

• You can’t 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
What is a Scripting Language?
operating system

Web Browser
Web page

JavaScript
C++ App Java App .Net App

• JavaScript is intentionally limited, you can’t 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.
21
A Simple Example of
Client-Side Scripting

22
23
<INPUT
type=“submit”
name=“sendEmail”
value=“Send eMail”
>

Code for the simple “Send eMail”

button as was described during
the last Web development course
24
<INPUT
type=“submit”
name=“sendEmail”
value=“Send eMail”
> “if ([Link] < 1)
[Link](‘Empty From field! Please correct’)”
>

Additional JavaScript code for the smart “Send

eMail” button that would not allow itself to be
clicked if the “From” text field is left blank25
<INPUT
type=“submit” Event
Handler
name=“sendEmail”
value=“Send eMail”
> “if ([Link] < 1)
[Link](‘Empty From field! Please correct’)”
>

26
• 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. Let’s now find

out about another.

• But before we do that …

… let’s just make clear why we are interested
in including JavaScript in our Web pages

27
 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

28
 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
29
 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)

30
 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 object-
oriented languages, and therefore is referred as
an object-based language
31
Back to our example …

32
33
<INPUT
type=“submit”
name=“sendEmail”
value=“Send eMail”
> “if ([Link] < 1)
[Link](‘Empty From field! Please correct’)”
>

34
<INPUT
type=“submit”
name=“sendEmail”
value=“Send eMail”
>>

35
<INPUT
type=“submit”
name=“sendEmail”
value=“Send eMail”
> “if ([Link] < 1)
[Link](‘Empty From field! Please correct’)”
>
<INPUT
type=“submit”
name=“sendEmail”
value=“Send eMail”
> 36
>
 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.
37
<HTML>
<HEAD>
<TITLE>Send an eMail</TITLE>
<SCRIPT type=“text/javascript">
function checkForm() {
if ( [Link] < 1) {
[Link]( “Empty From field! Please correct” ); }
}
</SCRIPT>
</HEAD>
<BODY bgcolor=“#FFFFCC”>
… body content … JavaScript code
</BODY> enclosed in the new
</HTML> <SCRIPT>,</SCRIPT>
38
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 >attribute in the tag for the “Send eMail” button

Both perform the required function satisfactorily.

Q: Which of two techniques is better? 39

• 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
40
Let’s again look at the
JavaScript code

41
The main code segment that goes between the
<SCRIPT>, </SCRIPT> tags in the HEAD:
function checkForm() {
if ( [Link] < 1) {
[Link]( “Empty From field! Please correct” );
}
}

The JavaScript code included as an attribute of

the “Send eMail” button:
> 42
So 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?

43
 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
44
alert(“hello world”);

Alert(“hello world”);

45
 Object: A named collection of properties
(data, state) & methods (instructions, behavior)

A collection
All objects have the
of properties
“name” property: it
& methods
holds the name of
the object (collection)

name method 2
prop 1
prop 3 prop 5
prop 2
method 1 prop 4 method 3
46
 Example: A Bicycle

name accelerate()
color
pressure direction
height
inflate() speed turn() park()
47
Example: JavaScript’s “window” Object

name open()
width
document status
height
close() location alert()
48
 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) 49
 Referring to a Property
dot

[Link]

Examples:
[Link]
[Link]

50
51
52
<HTML>
<HEAD>
<TITLE>Change Property Demo # 1</TITLE>
<SCRIPT type=“text/JavaScript”>
function changeStatus() {
[Link] = “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“
></FORM>
</BODY> 53
</HTML>
The main code segment that goes between the
<SCRIPT>, </SCRIPT> tags in the HEAD:
function changeStatus() {
[Link]=“Mouse has touched the button”;
}
property new value

The JavaScript code included as an attribute of the

“Submit” button:
> 54
The main code segment that goes between the
<SCRIPT>, </SCRIPT> tags in the HEAD:
function gotoURL() {
[Link]=“[Link]
”;
} new value
property

The JavaScript code included as an attribute of the

“Go to UETM” button:
55
>You should be connected to the
Internet for the successful execution
of the example that we just
discussed

56
 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

57
 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
58
JavaScript Object Hierarchy

59
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

60
• 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
61
Methods: Functions (code, instructions,
behavior) associated with objects
• Methods are functions associated with
an object that can be used to
manipulate that object

• Example:
– [Link]()
– Here “close()” is a method that has been
defined for the “window” object. Its
function is to close the “window”
62
 Referring to a Method
dot

[Link]( argumnets )

Examples: Info is
[Link]() passed on to
[Link]() the method
through one
or more
63
arguments
A few more methods associated
with the “window” object
• alert()
• confirm()
• prompt()
• close()
• open()
• focus()
• blur()
• setTimeOut()
64
• setInterval()
 Popup Boxes

• Alert Box
[Link](“Hello Every body!!");

• Confirm Box
[Link]("Press a button");

• Prompt Box
[Link](“Your name","");
65
The main code segment that goes between the
<SCRIPT>, </SCRIPT> tags in the HEAD:
function uetWindow() {
[Link](“[Link]
}
method argument

The JavaScript code included as an attribute of the

“New UET Window” button: different event handler
> 66
 DOM (Document Object Model)
• What is document? Document simply means a web
page. But this document can be represented in
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 a set of terms that describe exactly how to

interact with the pieces of a web page.
67
 How to get an element node
• <html>
html
<head>
<title>About JavaScript</title>
</head> head body
<body>
<h1>Learning JavaScript</h1> title
<p>JavaScript is: </p>
<ul id=“optionList”> h1 p ul
<li>a language that runs in
browser</li>
<li>simple, but powerful</li>
<li>misunderstood</li> li li li
</ul>
</body>
</html>
68
• You can add id and class attribute to any of
your html element. Class can be added to
multiple elements. Id should be applied to
only one element.

• If element has a unique id you can grab it in

JavaScript via possibly the most important
method of document object which is:

[Link](“someId”);

69
 Retrieving an element by ID
• var myElement = [Link](“abc”);
html

head body

title h1 p ul id =“abc”

li li li

70
• What if i don’t have id or i want to grab
more than one element.

[Link](“a”);

• What this is going to do is go through

our document and give us back all of
the elements that are anchor elements.

71
 Retrieving an element by ID
• var ListItems = [Link](“li”);
• var myLinks = [Link](“a”);

html
myLinks

head body

ListItems title h1 p ul id=“abc”

0
1
2
li li li
72
73
74
The main code segment that goes between the
<SCRIPT>, </SCRIPT> tags in the HEAD:
function changeBgcolor() {
[Link] = “pink”;
}
property new value

The JavaScript code included as an attribute of the

“Change Color” button:
> 75
In addition to “bgColor”, there are many other
properties of the “document” object, e.g.

• fgColor • cookie
• linkColor • forms[ ]
• title • images[ ]
• links[ ]
• URL
• …
• referrer
• …
• lastModified
• …

76
77
Read-Only Properties

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

79
80
81
The main code segment that goes between the
<SCRIPT>, </SCRIPT> tags in the HEAD:
function changeBgcolor() {
[Link] = “pink”;
oldColor = [Link];
[Link]("The old color was " + oldColor);
}

The JavaScript code included as an attribute of the

“Change Color” button:
> 82
 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
user’s interaction with the browser
• We use “event handlers” [e.g. onMouseOver(),
onClick()] to design Web pages that can react
to those events
• More on event handlers in a future lecture
83