1. CSCE 102 – Chapter 8 (Objects and Variables ) CSCE 102 - General Applications Programming Benito Mendoza 1 2016-2-29 Benito Mendoza 1 By Benito Mendoza Department of Computer Science & Engineering An Introduction to Objects Storing Things for Later Use: Variables The Object Structure of the Web Browser

2. CSCE 102 – Chapter 8 (Objects and Variables ) Benito Mendoza 2 Last Lecture : Interactivity onclick attribute describes the action(s) to take when a click event is detected <input type=“button” … ¬ onclick=“alert(‘You clicked me’)” /> alert is JavaScript exception to rule Ch07-Ex-07.html An Introduction to Objects Storing Things for Later Use: Variables The Object Structure of the Web Browser

3. CSCE 102 – Chapter 8 (Objects and Variables ) Benito Mendoza 3 Objects consist of: Data (text, numbers, etc.) Code (interacts with the data) State Defined by an object’s data AKA “properties” Behavior Defined by its code AKA “methods” A Hierarchy of Languages An Introduction to Objects Storing Things for Later Use: Variables The Object Structure of the Web Browser

4. CSCE 102 – Chapter 8 (Objects and Variables ) Benito Mendoza 4 Real-world example: coffee maker UltraJava 2000 Three Properties: Power Bean Grind State defined by these properties An Introduction to Objects Storing Things for Later Use: Variables The Object Structure of the Web Browser

5. CSCE 102 – Chapter 8 (Objects and Variables ) Benito Mendoza 5 Power On, Off Bean French Roast, Columbian, etc. Grind Fine, Medium, Coarse Machine state at any time is a combination of these 3 properties An Introduction to Objects Storing Things for Later Use: Variables The Object Structure of the Web Browser

6. CSCE 102 – Chapter 8 (Objects and Variables ) Benito Mendoza 6 “dot notation” used for describing an object’s properties: objectName.propertyName Thus ultraJava.power ultraJava.bean ultraJava.grind An Introduction to Objects Storing Things for Later Use: Variables The Object Structure of the Web Browser

7. CSCE 102 – Chapter 8 (Objects and Variables ) Benito Mendoza 7 Capitalization is user-defined but must be consistent ultraJava.power ≠ UltraJava.power Properties have: Names (“power”, “bean”, “grind”) Values (“On”, “Off”, “French Roast”, etc.) An Introduction to Objects Storing Things for Later Use: Variables The Object Structure of the Web Browser

8. CSCE 102 – Chapter 8 (Objects and Variables ) Benito Mendoza 8 Behaviors defined by “methods” A method is a code module that belongs to a software object Methods may lead to changes of state Changing the “grind” setting from “fine” to “coarse” How is this accomplished? An Introduction to Objects Storing Things for Later Use: Variables The Object Structure of the Web Browser

9. CSCE 102 – Chapter 8 (Objects and Variables ) Benito Mendoza 9 Send a message to the object: Identify the object Identify the method Provide a new value for a property ultraJava.changeGrind (“coarse”) An Introduction to Objects Storing Things for Later Use: Variables The Object Structure of the Web Browser

10. CSCE 102 – Chapter 8 (Objects and Variables ) Benito Mendoza 10 General form of a method call: objectName.methodName (parameter1, parameter 2,…) If method does not require parameters: objectName.methodName () ultraJava.powerToggle() Parentheses required to indicate method not property An Introduction to Objects Storing Things for Later Use: Variables The Object Structure of the Web Browser

11. CSCE 102 – Chapter 8 (Objects and Variables ) Benito Mendoza 11 Assigning values to properties Method call is one way Assignment statement is another objectName.propertyName = value Read from right to left ultraJava.grind=“coarse” Assignment operator not equal sign An Introduction to Objects Storing Things for Later Use: Variables The Object Structure of the Web Browser

12. CSCE 102 – Chapter 8 (Objects and Variables ) Benito Mendoza 12 Add a cappuccino attachment to the UltraJava 2000 Every object can have its own properties and methods An Introduction to Objects Storing Things for Later Use: Variables The Object Structure of the Web Browser

13. CSCE 102 – Chapter 8 (Objects and Variables ) Benito Mendoza 13 New object: cappucinoMaker Property: strength (“single”, “double”) Method: changeStrength How to call this method? An Introduction to Objects Storing Things for Later Use: Variables The Object Structure of the Web Browser

14. CSCE 102 – Chapter 8 (Objects and Variables ) Benito Mendoza 14 Parent Child An Introduction to Objects Storing Things for Later Use: Variables The Object Structure of the Web Browser cappuccinoMaker.changeStrength(“double”)ultraJava.

15. CSCE 102 – Chapter 8 (Objects and Variables ) Benito Mendoza 15 Variables Changing a property’s value implies: The value exists somewhere In some form we can access JavaScript data types: String Number Boolean An Introduction to Objects Storing Things for Later Use: Variables The Object Structure of the Web Browser

16. CSCE 102 – Chapter 8 (Objects and Variables ) Benito Mendoza 16 Variables String data One or more characters considered as a unit “Bob Smith”, “435-76-0912” Must be enclosed in quotation marks Numeric data Integer (1, 2, …, 200, …, 5314092, …) Floating Point (0.0043, 1.36, 58.912, …) An Introduction to Objects Storing Things for Later Use: Variables The Object Structure of the Web Browser

17. CSCE 102 – Chapter 8 (Objects and Variables ) Benito Mendoza 17 Variables Boolean data True/False (yes/no, on/off) Data stored in a “variable” Value may be changed, hence “variable” Values that can’t be changed: “constants” or “literals” An Introduction to Objects Storing Things for Later Use: Variables The Object Structure of the Web Browser

18. CSCE 102 – Chapter 8 (Objects and Variables ) Benito Mendoza 18 Variables Variables have three characteristics: Type Name Value Type String, number, boolean Loosely-typed – may contain different types of data at different times An Introduction to Objects Storing Things for Later Use: Variables The Object Structure of the Web Browser

19. CSCE 102 – Chapter 8 (Objects and Variables ) Benito Mendoza 19 Variables Name Must be unique Must start with a letter (A-Z) or underscore May include letters, digits (0-9), underscores May not include spaces, special symbols, or punctuation Should be descriptive of its purpose! An Introduction to Objects Storing Things for Later Use: Variables The Object Structure of the Web Browser

20. CSCE 102 – Chapter 8 (Objects and Variables ) Benito Mendoza 20 Variables Value May be empty Variables must be “declared” before they can be used: var firstName “keyword” or “reserved word” An Introduction to Objects Storing Things for Later Use: Variables The Object Structure of the Web Browser

21. CSCE 102 – Chapter 8 (Objects and Variables ) Benito Mendoza 21 Variables var firstName var faculty var age var firstName, faculty, age An Introduction to Objects Storing Things for Later Use: Variables The Object Structure of the Web Browser

22. CSCE 102 – Chapter 8 (Objects and Variables ) Benito Mendoza 22 Variables Initialization Assign a beginning value “undefined” variables may cause problems later var firstName = “Bruce” var faculty = true var age = 21 String value Boolean value Numeric value An Introduction to Objects Storing Things for Later Use: Variables The Object Structure of the Web Browser

23. CSCE 102 – Chapter 8 (Objects and Variables ) Benito Mendoza 23 Variables Changing variable value: var firstName=“Bruce” … firstName = “Bob” faculty = false age = 30 … An Introduction to Objects Storing Things for Later Use: Variables The Object Structure of the Web Browser

24. CSCE 102 – Chapter 8 (Objects and Variables ) Benito Mendoza 24 Variables May assign the value of one variable to another variable: var presidentName = “Bush” var currentPres = “” … currentPres = presidentName … Ch08-Ex-05.html An Introduction to Objects Storing Things for Later Use: Variables The Object Structure of the Web Browser

25. CSCE 102 – Chapter 8 (Objects and Variables ) Benito Mendoza 25 Variables Concatenation operator Combines two or more strings together into one large string var someCharacters someCharacters=“Hi ” + “there” An Introduction to Objects Storing Things for Later Use: Variables The Object Structure of the Web Browser

26. CSCE 102 – Chapter 8 (Objects and Variables ) Benito Mendoza 26 Variables More concatenation var someCharacters var user=“Bob” someCharacters=“Hi there ” + user + “!” An Introduction to Objects Storing Things for Later Use: Variables The Object Structure of the Web Browser

27. CSCE 102 – Chapter 8 (Objects and Variables ) Benito Mendoza 27 Variables Can change a property’s value: ultraJava.changeGrind(“coarse”) What if we want to find out what a property’s value is? Need a method that “returns” a value: ultraJava.getGrind() Where do we store the returned value? An Introduction to Objects Storing Things for Later Use: Variables The Object Structure of the Web Browser

28. CSCE 102 – Chapter 8 (Objects and Variables ) Benito Mendoza 28 Variables In a variable: var grindSetting grindSetting = ultraJava.getGrind() prompt command … prompt(message, initial_value) Ch08-Ex-06.html An Introduction to Objects Storing Things for Later Use: Variables The Object Structure of the Web Browser

29. CSCE 102 – Chapter 8 (Objects and Variables ) Benito Mendoza 29 Variables confirm command … confirm(message) Ch08-Ex-07.html An Introduction to Objects Storing Things for Later Use: Variables The Object Structure of the Web Browser

30. CSCE 102 – Chapter 8 (Objects and Variables ) Benito Mendoza 30 Browser Object Structure Browsers are constructed in an object- oriented fashion The window itself is the top-level object The child objects are: Location Document History Ch08-Ex-08.html An Introduction to Objects Storing Things for Later Use: Variables The Object Structure of the Web Browser

31. CSCE 102 – Chapter 8 (Objects and Variables ) Benito Mendoza 31 Browser Object Structure Document Object Model (DOM) Window object (“window”) Includes various methods: alert() prompt() confirm() Technically window.alert(…), etc. although “window” usually omitted in practice An Introduction to Objects Storing Things for Later Use: Variables The Object Structure of the Web Browser

32. CSCE 102 – Chapter 8 (Objects and Variables ) Benito Mendoza 32 Browser Object Structure document object Contains information about the current document being displayed in the window Properties include: URL (of the current document) referrer (previous page’s URL) title (from the tag) bgcolor (background color from attribute) fgcolor (foreground color from tag) An Introduction to Objects Storing Things for Later Use: Variables The Object Structure of the Web Browser

33. CSCE 102 – Chapter 8 (Objects and Variables ) Benito Mendoza 33 Browser Object Structure document methods include write Writes text to the window Can include HTML tags Ch08-Ex-10 Ch08-Example An Introduction to Objects Storing Things for Later Use: Variables The Object Structure of the Web Browser

34. CSCE 102 – Chapter 8 (Objects and Variables ) Benito Mendoza 34 Browser Object Structure location object Stores information about the URL of the document currently being displayed in the window. Properties include: href (complete URL) hostname (only the host and domain name) Location Example An Introduction to Objects Storing Things for Later Use: Variables The Object Structure of the Web Browser

35. CSCE 102 – Chapter 8 (Objects and Variables ) Benito Mendoza 35 Browser Object Structure history object Stores the previous URLs visited Methods include: back() – previous URL in list forward() – next URL in list go(±n) – n th URL in list forward or backward History Examples An Introduction to Objects Storing Things for Later Use: Variables The Object Structure of the Web Browser

36. CSCE 102 – Chapter 8 (Objects and Variables ) Benito Mendoza 36 Browser Object Structure Properties may be Read-only (can see but cannot change) Read-write (can see and change) Page 231 An Introduction to Objects Storing Things for Later Use: Variables The Object Structure of the Web Browser

37. CSCE 102 – Chapter 8 (Objects and Variables ) Benito Mendoza 37 Debugging Challenge var last name var professionalTitle = Dr. prompt(Please enter your last name:) alert(Greetings, + professionalTitle + name) alert(For your information, the title of this document is: document.name)