JavaScript Objects,Variables, and DOM

Variables

Basics of a Variable

• Defines a memory location.

• Stores data.

• Value can change as script runs.

JanecurrentStudent

Characteristics of a Variable

• Name.

• Data type.

• Value.

JanecurrentStudent

String

Variable Lifecycle

Declare

Initialize

Use

Destroy

Data Type

• Defines values and operations permitted.

• Types:– String.– Number: integer, floating point (decimal), …– Boolean.– Array.– Object.

Names, Types, & Values

A Number = 123.59

ANumber = 123.59

ANumber = “123.59”

ANumber = “Hello World!”

curStatus = “false”

curStatus = false

floating point

string

string

string

Boolean

Declaring and Using a Variable

<script type="text/javascript">

var keepTrack = 'Start'

alert(keepTrack)

keepTrack = '100'

alert(keepTrack)

</script>

Use

Declare Initialize

Local Variable

<script type="text/javascript">function myFunction1(){

var aVar = 1alert('myFunction1: ' + aVar)

}

function myFunction2(){

alert('myFunction2: ' + aVar)}</script>

out of scope

local declaration

Global Variable<script type="text/javascript">var aVar = 1

function myFunction1(){

alert('myFunction1: ' + aVar)}

function myFunction2(){

alert('myFunction2: ' + aVar)}</script>

global declaration

Basic Operations

• Addition (numbers and strings).

• Subtraction.

• Multiplication.

• Division.

Returned Values

Some JavaScript User Interface Commands

• alert(message) – no returned value.

• prompt(prompt, default)

• confirm(prompt)

* window object methods.

Function/Method Returns Value

variable = function(parameters)

variable = object.method(parameters)

variable = prompt(prompt,default)

variable = confirm(prompt)

Examples

grossPay = computeGross(hours, rate)

userName = prompt(‘What is your name?’,’’)

setAsHome = confirm(‘Set as home page?’)

JavaScript Objects

Review of Objects

Interface

?Properties

Methods

Using Objects

object.property

object.method(param1, param2, …)

object.method()

parentobject.childobject.method()

A Simple Accumulator Object

Properties

currentValueincrease(amount)

decrease(amount)

current()

Methods

Using the Accumulator Object

currentValue Out

accumulator.increase(5) 8

accumulator.decrease(4) 4

accumulator.current() 8

accumulator.currentValue 4

accumulator.currentValue = 3 3

JavaScript Document Object Model (DOM) Basics

window

navigator

document

history

location screen

Reminder

object

properties methods

Support varies by browser type and browser version.

DOM references identify properties and methods.