1. Project 2: Introduction to Object-Oriented Programming Essentials for Design JavaScript Level One Michael Brooks

2. Copyright (c) 2004 Prentice-Hall. All rights reserved. 2 Objectives Create objects and classes Use basic methods Manipulate properties Use common properties Incorporate events Apply correct syntax

3. Copyright (c) 2004 Prentice-Hall. All rights reserved. 3 Why Would I Do This ? JavaScript is an object-oriented programming language  Object-oriented programming (OOP) Is a style of programming Relies on reusing objects in multiple computer programs  A class represents the definition of an object A class doesn’t actually exist in physical form; rather, it simply describes an object

4. Copyright (c) 2004 Prentice-Hall. All rights reserved. 4 Why Would I Do This ? (continued)  Objects are like nouns that you can use in the JavaScript language  You can use other aspects of JavaScript to describe: the characteristics of the object (the equivalent of adjectives) what the object does (comparable to verbs)

5. Copyright (c) 2004 Prentice-Hall. All rights reserved. 5 Why Would I Do This ? (continued) Earlier programming languages used a strict sequence of commands, which were usually numbered in the order they were executed  This worked well for simple tasks, but quickly became cumbersome as applications grew in complexity An OOP language is loosely organized  You define an object once, and then use it anywhere you choose — without having to rewrite the code you used to define the object

6. Copyright (c) 2004 Prentice-Hall. All rights reserved. 6 Why Would I Do This ? (continued) Methods represent actions that an object can perform  Methods can accomplish a variety of tasks, depending on the object

7. Copyright (c) 2004 Prentice-Hall. All rights reserved. 7 Why Would I Do This ? (continued) Properties represent characteristics of an object:  They are often useful to: change the property of an object to suit a specific purpose discover the value of a specific property

8. Copyright (c) 2004 Prentice-Hall. All rights reserved. 8 Visual Summary All OOP languages and environments include common characteristics in:  Grammar  Syntax  Construction All OOP languages contain:  Classes  Objects  Methods  Properties  Events

9. Copyright (c) 2004 Prentice-Hall. All rights reserved. 9 Visual Summary (continued) JavaScript uses dot syntax Dot syntax:  Is a special kind of syntax (the set of rules that dictate how the language is written), to show the relationship of the items in the code  Periods are used within the code to note how items relate to one another  Example of JavaScript dot syntax Example of JavaScript dot syntax

10. Copyright (c) 2004 Prentice-Hall. All rights reserved. 10 Visual Summary (continued) The primary object appears first; the window object represents the browser window Methods always appear with () at the end of the method; the write() method is an action the document object can perform The document object represents the HTML document; it is a sub- object of the window object

11. Copyright (c) 2004 Prentice-Hall. All rights reserved. 11 Visual Summary (continued) Dot syntax uses a “top-down” method of writing code Periods (dots) are placed between the words to denote the hierarchy of the objects from the generic to the specific Dot syntax is one part of the overall JavaScript syntax

12. Copyright (c) 2004 Prentice-Hall. All rights reserved. 12 Visual Summary (continued) Examples of JavaScript syntax rules include but are not limited to:  Case sensitivity, which means that a program will distinguish between uppercase and lowercase letters  You must use semi-colons to denote the end of the line of code  When text strings are used in methods, you must enclose them within matching quotes More JavaScript syntax rules

13. Copyright (c) 2004 Prentice-Hall. All rights reserved. 13 Visual Summary (continued) You cannot add spaces within specific places of the JavaScript code, such as within a keyword or token White space, such as tabs and spaces, can make it easier to read the code Semi-colons are used to signal the end of each line Text strings are always enclosed within a pair of matching quotes

14. Copyright (c) 2004 Prentice-Hall. All rights reserved. 14 Objects and Classes In an object-oriented programming environment, code is organized into objects  By using objects, you can group commands according to how humans categorize information Objects can include sub-objects or subcategories  A sub-object is part of another object Example of classes and their objects

15. Copyright (c) 2004 Prentice-Hall. All rights reserved. 15 Objects and Classes (continued) ClassObject A type of bank accountJoe’s checking account A carSue’s 2003 Honda Accord A person Bill Jones A sphereA baseball

16. Copyright (c) 2004 Prentice-Hall. All rights reserved. 16 Objects and Classes (continued) Objects can assume many forms in JavaScript:  The window object represents the browser window  The document object represents the HTML document loaded into the browser window  A form object represents a form in the HTML document

17. Copyright (c) 2004 Prentice-Hall. All rights reserved. 17 Objects and Classes (continued) Use the Window Object  When an event occurs, programmers say that it fires  Change the tag to the following:  The onBlur event fires when the user chooses a different window by clicking on a different program or different browser window  This causes the browser to blur the current window and focus on the new window

18. Copyright (c) 2004 Prentice-Hall. All rights reserved. 18 Objects and Classes (continued)  The idea behind focus and blur is very prevalent in modern operating systems: If an element has focus, any key that you press is directed to that element  You can use other objects to draw focus to other elements, such as a field in a form  When you draw focus to an element, another element is automatically blurred; only one element can be in focus at any given time

19. Copyright (c) 2004 Prentice-Hall. All rights reserved. 19 Objects and Classes (continued) Use the Document Object  The document object represents the HTML code shown in the browser window  Sub-objects of the document object represent various HTML elements in the page  Since the document object represents the HTML code in the document, it is extremely useful  The document object is a sub-object of the window object Example of using the Document Object

20. Copyright (c) 2004 Prentice-Hall. All rights reserved. 20 Objects and Classes (continued) links_href.html document.write("Link object href: " + document.links[0].href); Against The Clock The document displayed in the Web browser The link object represents the tags in the document

21. Copyright (c) 2004 Prentice-Hall. All rights reserved. 21 Objects and Classes (continued) Use the Math Object  The Math object allows you to complete various calculations  The random() method is used to generate random numbers  The Math object is always capitalized, unlike most other objects, which are lowercase Example of using the Math Object

22. Copyright (c) 2004 Prentice-Hall. All rights reserved. 22 Objects and Classes (continued) mathobject.html document.write(Math.random()); The document displayed in the Web browser; a different random number appears every time the page reloads Math object is used to complete various calculations

23. Copyright (c) 2004 Prentice-Hall. All rights reserved. 23 Using Basic Methods Aside from describing objects, you can use dot syntax to write other aspects of JavaScript, including methods Methods represent actions that objects can perform; they are the “verbs” of the object- oriented programming language A code statement that uses a method is often referred to as a method call

24. Copyright (c) 2004 Prentice-Hall. All rights reserved. 24 Using Basic Methods (continued) Methods are always written in the form “methodName()”  The parentheses indicate that this is a method  If information appears within the parentheses, such as a number or text, it indicates that the information is being passed to the method  For some methods, no information is required; for other methods, however, specific information is required to achieve the desired action

25. Copyright (c) 2004 Prentice-Hall. All rights reserved. 25 Using Basic Methods (continued) Use the prompt() Method  You use the prompt() method to ask a question  The prompt() method is similar to the alert() method, but the prompt() method allows the user to type in a response to the question being asked  The prompt() method can pass two values one value is the message that appears in the prompt window the second value is the default message that appears in the answer field Example of using the prompt() Method

26. Copyright (c) 2004 Prentice-Hall. All rights reserved. 26 Using Basic Methods (continued) prompt.html prompt("What’s your favorite color?",""); The document displayed in the Web browser; placing a comma after the text string and typing a set of double quotes sends an empty text string to the prompt() method The two values passed by the prompt() method

27. Copyright (c) 2004 Prentice-Hall. All rights reserved. 27 Using Basic Methods (continued) Return Information from a Method  You can use the prompt() method to return information to the script  Changing the prompt statement to match the following: answer = prompt("What’s your favorite color?",""); creates a temporary storage space for the information that will be returned from the method; the storage space is named answer Example of returning information from a method Example of returning information from a method

28. Copyright (c) 2004 Prentice-Hall. All rights reserved. 28 Using Basic Methods (continued) prompt.html answer = prompt("What’s your favorite color?",""); document.write("You said " + answer); The storage space named answer The color value is returned

29. Copyright (c) 2004 Prentice-Hall. All rights reserved. 29 Using Basic Methods (continued) math.html – demonstrates the Math object and sqrt()method window.alert("The square root of 1600 is " + Math.sqrt(1600)); Notice how the script uses the Math.sqrt() method within the window.alert() method Using Methods within Methods The square root is calculated and returned

30. Copyright (c) 2004 Prentice-Hall. All rights reserved. 30 Manipulating Properties Properties are characteristics of an object  If you want to access a property of an object, you can do so using dot syntax  Each property is used to store one piece of information about an object  For example, if you want to change the color of the car to green, you would type the following statement: myCar.color="green";

31. Copyright (c) 2004 Prentice-Hall. All rights reserved. 31 Manipulating Properties (continued) Change Properties of Objects  You can change properties of the JavaScript document object Example of changing the properties of the document object : the default link colors of the HTML page Example of changing the properties of the document object : the default link colors of the HTML page

32. Copyright (c) 2004 Prentice-Hall. All rights reserved. 32 Manipulating Properties (continued) main.html // change default link colors document.alinkColor="#CC0000"; document.vlinkColor="#666666"; Main Page Links: Main About Us Products <br This Page demonstrates the use of properties for JavaScript objects by controlling link colors. This code makes active links appear in dark red, and previously visited links appear in dark gray

33. Copyright (c) 2004 Prentice-Hall. All rights reserved. 33 Manipulating Properties (continued) Display Properties of Objects  JavaScript can output the value of a property Example of displaying the vlinkColor and alinkColor properties Example of displaying the vlinkColor and alinkColor properties

34. Copyright (c) 2004 Prentice-Hall. All rights reserved. 34 Manipulating Properties (continued) main.html // change default link colors document.alinkColor="#CC0000"; document.vlinkColor="#666666"; Main Page Links: Main About Us Products //the next line shows the active links color document.write("The Active links color i+document.alinkColor+" "); //the next line shows the visited links color document.write("The Visited links color is "+document.vlinkColor); This code displays the colors of active links and previously visited links

35. Copyright (c) 2004 Prentice-Hall. All rights reserved. 35 Manipulating Properties (continued) Delete the Browser’s History List  When you view a Web page, your browser uses an internal history list to determine whether the page was recently viewed, and if it should display links as visited  You can delete the browser’s history list Example of how to delete the browser’s history list in IE Example of how to delete the browser’s history list in Netscape Example of how to delete the browser’s history list in Netscape

36. Copyright (c) 2004 Prentice-Hall. All rights reserved. 36 Manipulating Properties (continued) Example of how to delete the browser’s history list in IE

37. Copyright (c) 2004 Prentice-Hall. All rights reserved. 37 Manipulating Properties (continued) Example of how to delete the browser’s history list in Netscape Navigator

38. Copyright (c) 2004 Prentice-Hall. All rights reserved. 38 Incorporating Events Events are occurrences that the programming environment detects Event handlers are JavaScript keywords that detect events When an event occurs, it “fires” You can use event handlers if the class of the object allows the event handler

39. Copyright (c) 2004 Prentice-Hall. All rights reserved. 39 Incorporating Events (continued) Use an Inline JavaScript Event  Event handlers are usually used as inline JavaScript; they often appear as attributes of an HTML tag  Events are usually attached to HTML tags as properties of the tag  Inline event handlers are case insensitive because they are an extension to HTML, and HTML is case insensitive  Example of how event handlers are used to detect events Example of how event handlers are used to detect events

40. Copyright (c) 2004 Prentice-Hall. All rights reserved. 40 Incorporating Events (continued) The onLoad event occurs when the page has finished loading

41. Copyright (c) 2004 Prentice-Hall. All rights reserved. 41 Understanding Syntax Requirements Each language has its own set of syntax requirements  These requirements are in place for two reasons: the interpreter for the language is typically quite limited; interpreters become “confused” by code that doesn’t follow established syntax rules following syntax rules ensures that others do not confuse the intent of your statements

42. Copyright (c) 2004 Prentice-Hall. All rights reserved. 42 Understanding Syntax Requirements (continued) Use Semi-Colons to End Statements  Although not always technically required, inserting semi-colons at the ends of statements is good programming practice; it prevents errors in some situations. Example of how missing semicolons can cause errors Example of how missing semicolons can cause errors

43. Copyright (c) 2004 Prentice-Hall. All rights reserved. 43 Understanding Syntax Requirements (continued) If you remove the semi-colons (;) from the alert statements, depending on the browser used and whether error suppression is turned off or on, the commands are ignored or you receive an error message event.html alert("Hi!") alert("What's up?")

44. Copyright (c) 2004 Prentice-Hall. All rights reserved. 44 Understanding Syntax Requirements (continued) Correct Text String Quote Errors  JavaScript uses pairs of quotes to note the beginning and end of a text string  You can use either single or double quotes, but you must use them in matching pairs  Improper mix of single and double quotes can introduce another kind of syntax error Example of improper mix of single and double quotes Example of improper mix of single and double quotes

45. Copyright (c) 2004 Prentice-Hall. All rights reserved. 45 Understanding Syntax Requirements (continued) If, in the two alert() commands you change the ending double quote marks to single quotes, the commands are ignored or you receive an error message event.html alert("Hi!'); alert("What's up?');

46. Copyright (c) 2004 Prentice-Hall. All rights reserved. 46 Understanding Syntax Requirements (continued) Use White Space for Code Formatting  A token, such as document.writeln, is a keyword or other text element that has meaning to the interpreter  You must not divide tokens with spaces or tabs Example of error caused by dividing tokens with spaces or tabs Example of error caused by dividing tokens with spaces or tabs

47. Copyright (c) 2004 Prentice-Hall. All rights reserved. 47 Understanding Syntax Requirements (continued) Inserting white space into the token document.writeln creates a syntax error in your code whitespace.html document.write ln("Hi!")