javascript objects, variables, and dom
Post on 19-Jan-2016
46 Views
Preview:
DESCRIPTION
TRANSCRIPT
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.
top related