Академический Документы
Профессиональный Документы
Культура Документы
Lecture 18
Objects, Properties, Methods (Web Development Lecture 6)
1
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()
6
<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> 7 </BODY> </HTML>
Well use JavaScript to do client-side scripting. However, there are many other languages that can be used for that purpose, e.g. VBScript 8
Reduced network traffic as the forms data is sent only once instead of many tos and fros
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
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
11
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
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 13
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
14
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
15
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
16
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)
17
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 18
prop 1 prop 2
prop 3
prop 4
prop 5
method 3
19
method 1
Example: A Bicycle
color height
name
accelerate()
pressure
speed
direction
turn() park()
20
inflate()
name
open()
document
location
status
alert()
21
Properties
Objects may have a single or several properties
Referring to a Property
dot
objectName.propertyName
Examples:
window.width button.value
23
24
25
<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> 26 </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 propert value y The JavaScript code included as an attribute of the Submit button: onMouseOver=changeStatus()
27
28
29
The main code segment that goes between the <SCRIPT>, </SCRIPT> tags in the HEAD:
function gotoURL() { window.location=http://www.vu.edu.pk/; } new propert value y The JavaScript code included as an attribute of the Go to VU button: onMouseOver=gotoURL()
30
You should be connected to the Internet for the successful execution of the example that we just discussed
31
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
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
33
34
35
36
The main code segment that goes between the <SCRIPT>, </SCRIPT> tags in the HEAD:
function changeBgcolor() { window.document.bgColor = pink; } propert y new value
The JavaScript code included as an attribute of the Change Color button: onMouseOver=changeBgcolor()
37
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[ ]
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 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()
43
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
44
Referring to a Method
dot
objectName.methodName( argumnets )
Examples:
window.close() button.click() Info is passed on to the method through one or more 46 arguments
48
The main code segment that goes between the <SCRIPT>, </SCRIPT> tags in the HEAD:
function vuWindow() { window.open(http://www.vu.edu.pk/); } argument method The JavaScript code included as an attribute of the New VU Window button: different event handler onClick=vuWindow()
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 users interaction with the browser
We use event handlers [e.g. onMouseOver(), onClick()] to design Web pages that can react to those events
50 More on event handlers in a future lecture
We also became able to perform simple tasks through the application of methods
51