Introduction to JavaScript Objects, Properties, Methods.

Introduction to JavaScriptObjects, Properties, Methods

Today’s Lecture …

• We will have a more formal introduction to JavaScript 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 of methods

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

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()”

<HTML><HEAD><TITLE>Send an eMail</TITLE><SCRIPT>

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

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

}</SCRIPT></HEAD><BODY bgcolor="#FFFFCC"><H1>Send an eMail</H1><FORM name="sendEmail" method="post" action=sendMailScriptURL> <TABLE><TR> <TD>From: </TD> <TD><INPUT type="text" name="sender" size="50" ></TD> </TR><TR> <TD>To: </TD> <TD><INPUT type="text" name="receiver" size="50"></TD> </TR><TR><TD>Subject: </TD> <TD><INPUT type="text" name="subject" size="50"></TD> </TR><TR><TD valign="top">Message: </TD> <TD><TEXTAREA name="message" cols="38" rows="6"></TEXTAREA></TD> </TR><TR><TD colspan="2" align="right"> <INPUT type="reset" name="reset" value="Reset All Fields"> <INPUT type="submit" name="sendEmail" value="Send eMail" onMouseOver="checkForm()"></TD></TR></TABLE></FORM></BODY></HTML>

Some of things that JavaScript cannot do!

• The following file operations 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

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”

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

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

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

JavaScript is 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.

• Objects are modified with methods that are associated with that object – e.g. a resize a window with resizeTo(150, 200)

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)

Referring to a Property

objectName.propertyName

Examples:window.width

button.value

dot

<HTML><HEAD> <TITLE>Change Property Demo # 1</TITLE> <SCRIPT> 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></HTML>


function changeStatus() { window.status=“Mouse has touched the button”;}

The JavaScript code included as an attribute of the “Submit” button:

onMouseOver=“changeStatus()”

property

new value


function gotoUrl() { window.location=“http://www.umt.edu.pk/”;}

The JavaScript code included as an attribute of the “Go to IMT” button:

onMouseOver=“gotoUrl()”

property

new value

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

Types of Objects

• JavaScript– Objects that are part of JavaScript– Examples: window, document

• Browser– Objects that contain info not about the

contents of the display, but the browser itself– Examples: history, navigator

• User-defined

One More Example:

Let us try to change the background color of the window


function changeBgColor() { window.document.bgColor = “pink”;}

The JavaScript code included as an attribute of the “Change Color” button:

onMouseOver=“changeBgColor()”

property

new value

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

• 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


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 the “Change Color” button:

onMouseOver=“changeBgColor()”

• 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

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

objectName.methodName( argumnet1 )

Examples:window.close()

button.click()

dot

Info is passed on to the method through arguments

A few more methods associated with the “window” object

• alert()

• confirm()

• prompt()

• close()

• open()

• focus()

• blur()

• setTimeOut()


function imtWindow() { window.open(“http://www.umt.edu.pk/”);}

The JavaScript code included as an attribute of the “New IMT Window” button:

onClick=“imtWindow()”

method argument

different event handler

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

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 of methods

Introduction to JavaScript Objects, Properties, Methods.

Documents

Transcript of Introduction to JavaScript Objects, Properties, Methods.