JavaScript Objects, Variables, and DOM

1
JavaScript Objects,Variables, and DOM
2
Variables
3
Basics of a Variable

• Defines a memory location.
• Stores data.
• Value can change as script runs.

Jane
Fred
Susie
4
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
ANumber 123.59
floating point
string
ANumber 123.59
string
ANumber Hello World!
string
curStatus false
curStatus false
Boolean
8
Declaring and Using a Variable
ltscript type"text/javascript"gt var keepTrack
'Start' alert(keepTrack) keepTrack
'100' alert(keepTrack) lt/scriptgt
9
Local Variable
ltscript type"text/javascript"gt function
myFunction1() var aVar 1 alert('myFunction1
' aVar) function myFunction2() alert('myF
unction2 ' aVar) lt/scriptgt
10
Global Variable
ltscript type"text/javascript"gt var aVar
1 function myFunction1() alert('myFunction1
' aVar) function myFunction2() alert('myFu
nction2 ' aVar) lt/scriptgt
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
Review of Objects
18
Using Objects
object.property
object.method()
object.method(param1, param2, )
parentobject.childobject.method()
19
A Simple Accumulator Object
Properties
Methods
currentValue
increase(amount)
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
navigator
history
22
Reminder
object
properties
methods
Support varies by browser type and browser
version.
DOM references identify properties and methods.