7/27/2019 Cs101_Lec18

1/52

1

CS101 Introduction to Computing

Lecture 18Objects, Properties, Methods(Web Development Lecture 6)

7/27/2019 Cs101_Lec18

2/52

2

During the last lecture we continued

our discussion on Interactive Forms

We got ourfirst taste of JavaScript the

object-based language that we will be

employing throughout the rest of the Webdevelopment part of this course

We developed a (simple) client-side script inJavaScript

7/27/2019 Cs101_Lec18

3/52

3

During Todays Lecture

We will have a more formal introduction toJavaScript and client-side scripting

We will become able to appreciate the concept

of objects in JavaScript

We will learn about the properties of those

objects, and about how to read & modify them

We will become able to perform simple tasks

through the application ofmethods

7/27/2019 Cs101_Lec18

4/52

4

7/27/2019 Cs101_Lec18

5/52

5

Last time we looked at two distinct ways of

performing the form field checking function.

From now onwards, we will be employing the

2nd way more often than not

In that 2nd way, we referred to a function in

the HTML BODY, and but defined that

function in the HTML HEAD

7/27/2019 Cs101_Lec18

6/52

6

The main code segment that goes between the

, 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 theSend eMail button:

onMouseOver=checkForm()

7/27/2019 Cs101_Lec18

7/52

7

Send an eMail

function checkForm(){

if (document.sendEmail.sender.value.length < 1) {

window.alert('Empty From field! Please correct');}

}

Send an eMail

From:

To:

Subject:

Message:

7/27/2019 Cs101_Lec18

8/52

8

New Concept: Client-Side Scripts Small programs that are a part of the Web page

and runon the users (clients) computer

They interact with the userto 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 be used for that purpose, e.g. VBScript

7/27/2019 Cs101_Lec18

9/52

9

Advantages of Client-Side Scripting

Reduced server load as it does not have tosend messages to the users browser about

missing or incorrect data

Reduced network trafficas the forms data is

sent only once instead of many tos and fros

7/27/2019 Cs101_Lec18

10/52

10

Disadvantages

Client-side scripts do not work with all browsers

Some user intentionally turn scripting offon

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

7/27/2019 Cs101_Lec18

11/52

11

JavaScript

A programming language specificallydesigned to work with Web browsers

It is designed to be used fordeveloping

small programs called scripts that canbe embedded in HTML Web pages

JavaScript: Is an interpreted language

Supports event-driven programming

Is object-based

7/27/2019 Cs101_Lec18

12/52

12

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 theability to format pages through HTML -including the placement of graphics)

Any network programming bar one function: theability to download a file to the browser

specified through an arbitrary URL

7/27/2019 Cs101_Lec18

13/52

13

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. Arbitrary calculations, including floating-point

ones

4. Interact with the user through event handlers

5. Store & modify a limited amount of data about

the user in the form of client-side cookies

7/27/2019 Cs101_Lec18

14/52

14

Client-Side JavaScript

Although a version of JavaScript existsthat can be used to write server-side

scripts, our focus in this course will only

be on client-side scripting

7/27/2019 Cs101_Lec18

15/52

15

Case Sensitivity

HTML is notcase sensitive. The followingmean the same to the browser:

--

--

JavaScriptis case sensitive. Only the first ofthe following will result in the desired function

the rest will generate an error or some otherundesirable event:

onMouseClick -- OnMouseClick

onmouseclick -- ONMOUSECLICK

7/27/2019 Cs101_Lec18

16/52

16

JavaScript

A programming language specificallydesigned to work with Web browsers

It is designed to be used for developing

small programs called scripts that canbe embedded in HTML Web pages

JavaScript: Is an interpreted language

Supports event-driven programming

Is object-based

7/27/2019 Cs101_Lec18

17/52

17

JavaScript is Object-Based

Everything that JavaScript manipulates, ittreats as an objecte.g. a window or a button

An object hasproperties

e.g. a window hassize, position, status, etc.

Objects are modified with methods that areassociated with that object e.g. a resize a

window with resizeTo(150, 200)

7/27/2019 Cs101_Lec18

18/52

18

Not Object-Oriented!

JavaScript is not a true object-orientedlanguage like C++ or Java

It is so because it lacks two key features:

A formal inheritance mechanism

Strong typing

Nevertheless, it does include many keyconcepts that are part of almost all object-oriented languages, and therefore is referred as

an object-basedlanguage

Obj t

7/27/2019 Cs101_Lec18

19/52

19

Object:A namedcollection of properties(data, state) & methods (instructions, behavior)

prop1

prop 2prop 5

name

prop 3

prop 4

A collection

of properties

& methods

All objects have the

name property: it

holds the name of

the object (collection)

method 3method 1

method 2

7/27/2019 Cs101_Lec18

20/52

20

Example: A Bicycle

color

heightdirection

name

pressure

speed turn()inflate()

accelerate()

park()

7/27/2019 Cs101_Lec18

21/52

21

Example: JavaScripts window Object

width

heightstatus

name

document

location alert()close()

open()

P ti

7/27/2019 Cs101_Lec18

22/52

22

Properties

Objects may have a single or several properties

A property may have one of the following

values:

Number -- Text -- BooleanArray -- 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)

7/27/2019 Cs101_Lec18

23/52

23

Referring to a Property

objectName.propertyName

Examples:

window.widthbutton.value

dot

7/27/2019 Cs101_Lec18

24/52

24

7/27/2019 Cs101_Lec18

25/52

25

7/27/2019 Cs101_Lec18

26/52

26

Change Property Demo # 1

function changeStatus() {

window.status = Mouse has touched the button;

}

Change Property Demo # 1

7/27/2019 Cs101_Lec18

27/52

27

The main code segment that goes between the

, tags in the HEAD:

function changeStatus() {

window.status=Mouse has touched the button;

}

The JavaScript code included as an attribute of theSubmit button:

onMouseOver=changeStatus()

propert

y

new

value

7/27/2019 Cs101_Lec18

28/52

28

7/27/2019 Cs101_Lec18

29/52

29

7/27/2019 Cs101_Lec18

30/52

30

The main code segment that goes between the

, tags in the HEAD:

function gotoURL() {

window.location=http://www.vu.edu.pk/;

}

The JavaScript code included as an attribute of theGo to VU button:

onMouseOver=gotoURL()

propert

y

new

value

7/27/2019 Cs101_Lec18

31/52

31

You should be connected to the

Internet for the successful executionof the example that we just

discussed

A S ti

7/27/2019 Cs101_Lec18

32/52

32

A Suggestion

Please try the pieces of code that I justdemonstrated 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

T pes of Objects

7/27/2019 Cs101_Lec18

33/52

33

Types of Objects

JavaScript objects Objects that are part of JavaScript

Examples: window, document

Browserobjects

Objects that contain info notabout the

contents of the display, but the browser itself

Examples: history, navigator

User-defined object

O M E l

7/27/2019 Cs101_Lec18

34/52

34

One More Example:

Let us try to change the background colorof the window

7/27/2019 Cs101_Lec18

35/52

35

7/27/2019 Cs101_Lec18

36/52

36

7/27/2019 Cs101_Lec18

37/52

37

The main code segment that goes between the

, tags in the HEAD:

function changeBgcolor() {

window.document.bgColor = pink;

}

The JavaScript code included as an attribute of theChange Color button:

onMouseOver=changeBgcolor()

propert

y

new

value

7/27/2019 Cs101_Lec18

38/52

38

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

7/27/2019 Cs101_Lec18

39/52

39

Read-Only Properties

7/27/2019 Cs101_Lec18

40/52

40

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, andthen change the property

7/27/2019 Cs101_Lec18

41/52

41

7/27/2019 Cs101_Lec18

42/52

42

7/27/2019 Cs101_Lec18

43/52

43

The main code segment that goes between the

, tags in the HEAD:

function changeBgcolor() {oldColor = window.document.bgColor;

window.document.bgColor = pink;

window.alert("The old color was " + oldColor);}

The JavaScript code included as an attribute of theChange Color button:

onMouseOver=changeBgcolor()

N h t bli h d h t b

7/27/2019 Cs101_Lec18

44/52

44

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 aproperty and equating it to a new value

Methods: Functions (code instructions

7/27/2019 Cs101_Lec18

45/52

45

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

Referring to a Method

7/27/2019 Cs101_Lec18

46/52

46

Referring to a Method

objectName.methodName( argumnets )

Examples:

window.close()

button.click()

dot

Info is

passed on to

the methodthrough one

or more

arguments

A few more methods associated

7/27/2019 Cs101_Lec18

47/52

47

A few more methods associated

with the window object

alert()

confirm()

prompt()

close()

open()

focus() blur()

setTimeOut()

7/27/2019 Cs101_Lec18

48/52

48

7/27/2019 Cs101_Lec18

49/52

49

The main code segment that goes between the

, tags in the HEAD:

function vuWindow() {

window.open(http://www.vu.edu.pk/);

}

The JavaScript code included as an attribute of theNew VU Window button:

onClick=vuWindow()

method argument

different event handler

Event Handlers

7/27/2019 Cs101_Lec18

50/52

50

Event Handlers

Objects are made up ofproperties and

associated methods

Many objects also have event handlersassociated with them

Events are actions that occur as a result ofusers interaction with the browser

We use event handlers [e.g. onMouseOver(),onClick()] to design Web pages that can reactto those events

More on event handlers in a future lecture

During Todays Lecture

7/27/2019 Cs101_Lec18

51/52

51

During Today s Lecture

We had a more formal introduction to

JavaScript and client-side scripting

We became able to appreciate the concept of

objects in JavaScript

We learnt about the properties of those objects

We also became able to perform simple tasks

through the application ofmethods

Next (the 7th) Web Dev Lecture:

7/27/2019 Cs101_Lec18

52/52

52

Next (the 7 ) Web Dev Lecture:Data Types and Operators

To find out about data types

To become familiar with JavaScript data types

To become able to use JavaScript statements

and arithmetic operators