Prepare for your exams
Study with the several resources on Docsity
Earn points to download
Earn points by helping other students or get them with a premium plan
Guidelines and tips
Prepare for your exams
Study with the several resources on Docsity
Earn points to download
Earn points by helping other students or get them with a premium plan
Community
Ask the community
Ask the community for help and clear up your study doubts
University Rankings
Discover the best universities in your country according to Docsity users
Free resources
Our save-the-student-ebooks!
Download our free guides on studying techniques, anxiety management strategies, and thesis advice from Docsity tutors
Objects, Properties, Methods - Introduction to Computing - Lecture Slides, Slides of Introduction to Computing
Objects, Properties, Methods, Client Side Scripts, Advantages of Client Side Scripting, Disadvantages, JavaScript, Client Side JavaScript, Case Sensitivity, JavaScript is Object Based and some other key points are also part of this lecture.
Typology: Slides
2011/2012
1 / 51
Related documents
Partial preview of the text
Download Objects, Properties, Methods - Introduction to Computing - Lecture Slides and more Slides Introduction to Computing in PDF only on Docsity! CS101 Introduction to Computing Lecture 18 Objects, Properties, Methods (Web Development Lecture 6) 1 Docsity.com During the last lecture we continued our discussion on Interactive Forms • We got our first taste of JavaScript – 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 JavaScript 2 Docsity.com 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 5 Docsity.com 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 Docsity.com <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> 7 Docsity.com 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 Docsity.com 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 Docsity.com 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 12 Docsity.com 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 Docsity.com 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 Docsity.com 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 Docsity.com Example: A Bicycle 20 color height direction name pressure speed turn() inflate() accelerate() park() Docsity.com Example: JavaScript’s “window” Object 21 width height status name document location alert() close() open() Docsity.com 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) 22 Docsity.com “y Change Property Demo # 1 - Microsoft Internet Explorer -__. Pi [=] E4
| File Edit View Favorites Tools Help |
Change Property Demo # 1
Change status |
le
Docsity cot
Lal hy Computer
<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> 26 Docsity.com The main code segment that goes between the <SCRIPT>, </SCRIPT> tags in the HEAD: function changeStatus() { window.status=“Mouse has touched the button”; } The JavaScript code included as an attribute of the “Submit” button: onMouseOver=“changeStatus()” 27 propert y new value Docsity.com The main code segment that goes between the <SCRIPT>, </SCRIPT> tags in the HEAD: function gotoURL() { window.location=“http://www.vu.edu.pk/”; } The JavaScript code included as an attribute of the “Go to VU” button: onMouseOver=“gotoURL()” 30 propert y new value Docsity.com You should be connected to the Internet for the successful execution of the example that we just discussed 31 Docsity.com 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 Docsity.com “y Change Property Demo # 3 - Microsoft Internet Explorer -_.. [=] E4
| File Edit View Favorites Tools Help |
Change Property Demo # 3
Change Color |
le
B. | | | = My Computer Docsity cot
“y Change Property Demo # 3 - Microsoft Internet Explorer -_.. [=] E4
| File Edit View Favorites Tools Help |
Change Property Demo # 3
Change Color |
le
®. | | | = My Computer Docsity cot
The main code segment that goes between the <SCRIPT>, </SCRIPT> tags in the HEAD: function changeBgcolor() { window.document.bgColor = “pink”; } The JavaScript code included as an attribute of the “Change Color” button: onMouseOver=“changeBgcolor()” 37 propert y new value Docsity.com • 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 Docsity.com y Change Property Demo # 4 - Microsoft Internet Explorer -_.. Pi [=] 4
| File Edit View Favorites Tools Help |
Change Property Demo # 4
Change Color |
le
B. | | | = My Computer Docsity cot
xy Change Property Demo # 4 - Microsoft Internet Explorer -... [=] Ea
File Edit View Favorites Tools Help
Change Property Demo # 4 7
Change Color |
Microsoft Internet Explorer
AN The old color was #fffftt
Lo hy Computer
Le
Docsity com
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 Docsity.com Referring to a Method objectName.methodName( argumnets ) Examples: window.close() button.click() 46 dot Info is passed on to the method through one or more arguments Docsity.com A few more methods associated with the “window” object • alert() • confirm() • prompt() • close() • open() • focus() • blur() • setTimeOut() 47 Docsity.com 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 50 Docsity.com 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 51 Docsity.com
Copyright © 2024 Ladybird Srl - Via Leonardo da Vinci 16, 10126, Torino, Italy - VAT 10816460017 - All rights reserved