JavaScript Objects, Variables, and DOM

1. JavaScript Objects,Variables, and DOM

2. Variables

3. currentStudent Basics of a Variable • Defines a memory location. • Stores data. • Value can change as script runs. Jane

4. currentStudent Characteristics of a Variable • Name. • Data type. • Value. String Jane

5. Variable Lifecycle Declare Initialize Use Destroy

6. Data Type • Defines values and operations permitted. • Types: • String. • Number: integer, floating point (decimal), … • Boolean. • Array. • Object.

7. Names, Types, & Values A Number = 123.59 floating point ANumber = 123.59 string ANumber = “123.59” string ANumber = “Hello World!” string curStatus = “false” Boolean curStatus = false

8. Initialize Declare Use Declaring and Using a Variable <script type="text/javascript"> var keepTrack = 'Start' alert(keepTrack) keepTrack = '100' alert(keepTrack) </script>

9. local declaration out of scope Local Variable <script type="text/javascript"> function myFunction1() { var aVar = 1 alert('myFunction1: ' + aVar) } function myFunction2() { alert('myFunction2: ' + aVar) } </script>

10. global declaration Global Variable <script type="text/javascript"> var aVar = 1 function myFunction1() { alert('myFunction1: ' + aVar) } function myFunction2() { alert('myFunction2: ' + aVar) } </script>

11. Basic Operations • Addition (numbers and strings). • Subtraction. • Multiplication. • Division.

12. Returned Values

13. Some JavaScript User Interface Commands • alert(message) – no returned value. • prompt(prompt, default) • confirm(prompt) * window object methods.

14. Function/Method Returns Value variable = function(parameters) variable = object.method(parameters) variable = prompt(prompt,default) variable = confirm(prompt)

15. Examples grossPay = computeGross(hours, rate) userName = prompt(‘What is your name?’,’’) setAsHome = confirm(‘Set as home page?’)

16. JavaScript Objects

17. ? Properties Interface Methods Review of Objects

18. Using Objects object.property object.method() object.method(param1, param2, …) parentobject.childobject.method()

19. A Simple Accumulator Object Methods Properties increase(amount) currentValue decrease(amount) current()

20. Using the Accumulator Object currentValue Out accumulator.currentValue = 3 3 accumulator.increase(5) 8 accumulator.current() 8 accumulator.decrease(4) 4 accumulator.currentValue 4

21. JavaScript Document Object Model (DOM) Basics window document location screen history navigator

22. Reminder object properties methods Support varies by browser type and browser version. DOM references identify properties and methods.