javascript objects, variables, and dom
DESCRIPTION
JavaScript Objects, Variables, and DOM. Variables. currentStudent. Basics of a Variable. Defines a memory location. Stores data. Value can change as script runs. Jane. currentStudent. Characteristics of a Variable. Name. Data type. Value. String. Jane. Variable Lifecycle. Declare. - PowerPoint PPT PresentationTRANSCRIPT
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.