CS 101 Introduction to Computing Lecture 18 Objects
CS 101 Introduction to Computing Lecture 18 Objects, Properties, Methods (Web Development Lecture 6)
During the last lecture we continued our discussion on Interactive Forms • We got our first taste of Java. Script – the object-based language that we will be employing throughout the rest of the Web development part of this course • We developed a (simple) client-side script in Java. Script 2
During Today’s Lecture … • We will have a more formal introduction to Java. Script and client-side scripting • We will become able to appreciate the concept of objects in Java. Script • 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 3
4
Last time we looked at two distinct ways of performing the “form” field checking function. From now onwards, we will be employing the 2 nd way more often than not In that 2 nd 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 check. Form() { if ( document. send. Email. sender. value. length < 1) { window. alert( “Empty From field! Please correct” ); } } The Java. Script code included as an attribute of the “Send e. Mail” button: on. Mouse. Over=“check. Form()” 6
<HTML> <HEAD> <TITLE>Send an e. Mail</TITLE> <SCRIPT> function check. Form(){ if (document. send. Email. sender. value. length < 1) { window. alert('Empty From field! Please correct'); } } </SCRIPT> </HEAD> <BODY bgcolor="#FFFFCC"> <H 1>Send an e. Mail</H 1> <FORM name="send. Email" method="post" action=send. Mail. Script. URL> <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><TD>Subject: </TD> <TD><INPUT type="text" name="subject" size="50"></TD> </TR><TD valign="top">Message: </TD> <TD><TEXTAREA name="message" cols="38" rows="6"></TEXTAREA></TD> </TR><TD colspan="2" align="right"> <INPUT type="reset" name="reset" value="Reset All Fields"> <INPUT type="submit" name="send. Email" value="Send e. Mail" on. Mouse. Over="check. Form()"> </TD></TR></TABLE></FORM> </BODY> </HTML>
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 Java. Script to do client-side scripting. However, there are many other languages that can be used for that purpose, e. g. VBScript 8
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 9
Disadvantages • Client-side scripts do not work with all browsers • Some user intentionally turn scripting off 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 10
Java. Script • 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 • Java. Script: – Is an interpreted language – Supports event-driven programming – Is object-based 11
Some of things that Java. Script 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 12 specified through an arbitrary URL
Some of the things that Java. Script 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” 13
Client-Side Java. Script Although a version of Java. Script exists that can be used to write server-side scripts, our focus in this course will only be on client-side scripting 14
Case Sensitivity • HTML is not case sensitive. The following mean the same to the browser: – <HTML> – <Html> -- <ht. Ml> • Java. Script 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: – on. Mouse. Click – onmouseclick -- On. Mouse. Click -- ONMOUSECLICK 15
Java. Script • 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 • Java. Script: – Is an interpreted language – Supports event-driven programming – Is object-based 16
Java. Script is Object-Based • Everything that Java. Script 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 resize. To(150, 200) 17
Not Object-Oriented! • Java. Script 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 18
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 19
Example: A Bicycle color name height inflate() pressure speed accelerate() direction turn() park() 20
Example: Java. Script’s “window” Object width height close() name document location open() status alert() 21
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 22 itself)
Referring to a Property dot object. Name. property. Name Examples: window. width button. value 23
24
25
<HTML> <HEAD> <TITLE>Change Property Demo # 1</TITLE> <SCRIPT> function change. Status() { window. status = “Mouse has touched the button”; } </SCRIPT> </HEAD> <BODY> <H 1>Change Property Demo # 1</H 1> <FORM name=“dummy” method=“” action=“”> <INPUT type=“submit” name=“” value=“Change Status“ on. Mouse. Over=“change. Status()”> </FORM> </BODY> </HTML>
The main code segment that goes between the <SCRIPT>, </SCRIPT> tags in the HEAD: function change. Status() { window. status=“Mouse has touched the button”; } new value property The Java. Script code included as an attribute of the “Submit” button: on. Mouse. Over=“change. Status()” 27
28
29
The main code segment that goes between the <SCRIPT>, </SCRIPT> tags in the HEAD: function goto. URL() { window. location=“http: //www. vu. edu. pk/”; } new value property The Java. Script code included as an attribute of the “Go to VU” button: on. Mouse. Over=“goto. URL()” 30
You should be connected to the Internet for the successful execution of the example that we just discussed
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 32
Types of Objects • Java. Script objects – Objects that are part of Java. Script – 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 33
One More Example: Let us try to change the background color of the window
35
36
The main code segment that goes between the <SCRIPT>, </SCRIPT> tags in the HEAD: function change. Bgcolor() { window. document. bg. Color = “pink”; } new value property The Java. Script code included as an attribute of the “Change Color” button: on. Mouse. Over=“change. Bgcolor()” 37
In addition to “bg. Color”, there are many other properties of the “document” object, e. g. • • • fg. Color link. Color title URL referrer last. Modified • • cookie forms[ ] images[ ] links[ ] … … … 38
Read-Only Properties 39
• 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 40
41
42
The main code segment that goes between the <SCRIPT>, </SCRIPT> tags in the HEAD: function change. Bgcolor() { old. Color = window. document. bg. Color; window. document. bg. Color = “pink”; window. alert("The old color was " + old. Color); } The Java. Script code included as an attribute of the “Change Color” button: on. Mouse. Over=“change. Bgcolor()” 43
• Now we have established what we mean by objects: a named collection of properties and methods • And that Java. Script 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 44
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” 45
Referring to a Method dot object. Name. method. Name( argumnets ) Examples: window. close() button. click() Info is passed on to the method through one or more 46 arguments
A few more methods associated with the “window” object • • alert() confirm() prompt() close() open() focus() blur() set. Time. Out() 47
48
The main code segment that goes between the <SCRIPT>, </SCRIPT> tags in the HEAD: function vu. Window() { window. open(“http: //www. vu. edu. pk/”); } argument method The Java. Script code included as an attribute of the “New VU Window” button: different event handler on. Click=“vu. Window()” 49
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. on. Mouse. Over(), on. Click()] to design Web pages that can react to those events • More on event handlers in a future lecture 50
During Today’s Lecture … • We had a more formal introduction to Java. Script and client-side scripting • We became able to appreciate the concept of objects in Java. Script • We learnt about the properties of those objects • We also became able to perform simple tasks through the application of methods 51
Next (the 7 th) Web Dev Lecture: Data Types and Operators • To find out about data types • To become familiar with Java. Script data types • To become able to use Java. Script statements and arithmetic operators 52
- Slides: 52