JavaScript Objects, Variables, and DOM
description
Transcript of JavaScript Objects, Variables, and DOM
![Page 1: JavaScript Objects, Variables, and DOM](https://reader035.fdocuments.in/reader035/viewer/2022062315/56814f2c550346895dbcb9a3/html5/thumbnails/1.jpg)
JavaScript Objects,Variables, and DOM
![Page 2: JavaScript Objects, Variables, and DOM](https://reader035.fdocuments.in/reader035/viewer/2022062315/56814f2c550346895dbcb9a3/html5/thumbnails/2.jpg)
Variables
![Page 3: JavaScript Objects, Variables, and DOM](https://reader035.fdocuments.in/reader035/viewer/2022062315/56814f2c550346895dbcb9a3/html5/thumbnails/3.jpg)
Basics of a Variable
• Defines a memory location.
• Stores data.
• Value can change as script runs.
JanecurrentStudent
![Page 4: JavaScript Objects, Variables, and DOM](https://reader035.fdocuments.in/reader035/viewer/2022062315/56814f2c550346895dbcb9a3/html5/thumbnails/4.jpg)
Characteristics of a Variable
• Name.
• Data type.
• Value.
JanecurrentStudent
String
![Page 5: JavaScript Objects, Variables, and DOM](https://reader035.fdocuments.in/reader035/viewer/2022062315/56814f2c550346895dbcb9a3/html5/thumbnails/5.jpg)
Variable Lifecycle
Declare
Initialize
Use
Destroy
![Page 6: JavaScript Objects, Variables, and DOM](https://reader035.fdocuments.in/reader035/viewer/2022062315/56814f2c550346895dbcb9a3/html5/thumbnails/6.jpg)
Data Type
• Defines values and operations permitted.
• Types:– String.– Number: integer, floating point (decimal), …– Boolean.– Array.– Object.
![Page 7: JavaScript Objects, Variables, and DOM](https://reader035.fdocuments.in/reader035/viewer/2022062315/56814f2c550346895dbcb9a3/html5/thumbnails/7.jpg)
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
![Page 8: JavaScript Objects, Variables, and DOM](https://reader035.fdocuments.in/reader035/viewer/2022062315/56814f2c550346895dbcb9a3/html5/thumbnails/8.jpg)
Declaring and Using a Variable
<script type="text/javascript">
var keepTrack = 'Start'
alert(keepTrack)
keepTrack = '100'
alert(keepTrack)
</script>
Use
Declare Initialize
![Page 9: JavaScript Objects, Variables, and DOM](https://reader035.fdocuments.in/reader035/viewer/2022062315/56814f2c550346895dbcb9a3/html5/thumbnails/9.jpg)
Local Variable
<script type="text/javascript">function myFunction1(){
var aVar = 1alert('myFunction1: ' + aVar)
}
function myFunction2(){
alert('myFunction2: ' + aVar)}</script>
out of scope
local declaration
![Page 10: JavaScript Objects, Variables, and DOM](https://reader035.fdocuments.in/reader035/viewer/2022062315/56814f2c550346895dbcb9a3/html5/thumbnails/10.jpg)
Global Variable<script type="text/javascript">var aVar = 1
function myFunction1(){
alert('myFunction1: ' + aVar)}
function myFunction2(){
alert('myFunction2: ' + aVar)}</script>
global declaration
![Page 11: JavaScript Objects, Variables, and DOM](https://reader035.fdocuments.in/reader035/viewer/2022062315/56814f2c550346895dbcb9a3/html5/thumbnails/11.jpg)
Basic Operations
• Addition (numbers and strings).
• Subtraction.
• Multiplication.
• Division.
![Page 12: JavaScript Objects, Variables, and DOM](https://reader035.fdocuments.in/reader035/viewer/2022062315/56814f2c550346895dbcb9a3/html5/thumbnails/12.jpg)
Returned Values
![Page 13: JavaScript Objects, Variables, and DOM](https://reader035.fdocuments.in/reader035/viewer/2022062315/56814f2c550346895dbcb9a3/html5/thumbnails/13.jpg)
Some JavaScript User Interface Commands
• alert(message) – no returned value.
• prompt(prompt, default)
• confirm(prompt)
* window object methods.
![Page 14: JavaScript Objects, Variables, and DOM](https://reader035.fdocuments.in/reader035/viewer/2022062315/56814f2c550346895dbcb9a3/html5/thumbnails/14.jpg)
Function/Method Returns Value
variable = function(parameters)
variable = object.method(parameters)
variable = prompt(prompt,default)
variable = confirm(prompt)
![Page 15: JavaScript Objects, Variables, and DOM](https://reader035.fdocuments.in/reader035/viewer/2022062315/56814f2c550346895dbcb9a3/html5/thumbnails/15.jpg)
Examples
grossPay = computeGross(hours, rate)
userName = prompt(‘What is your name?’,’’)
setAsHome = confirm(‘Set as home page?’)
![Page 16: JavaScript Objects, Variables, and DOM](https://reader035.fdocuments.in/reader035/viewer/2022062315/56814f2c550346895dbcb9a3/html5/thumbnails/16.jpg)
JavaScript Objects
![Page 17: JavaScript Objects, Variables, and DOM](https://reader035.fdocuments.in/reader035/viewer/2022062315/56814f2c550346895dbcb9a3/html5/thumbnails/17.jpg)
Review of Objects
Interface
?Properties
Methods
![Page 18: JavaScript Objects, Variables, and DOM](https://reader035.fdocuments.in/reader035/viewer/2022062315/56814f2c550346895dbcb9a3/html5/thumbnails/18.jpg)
Using Objects
object.property
object.method(param1, param2, …)
object.method()
parentobject.childobject.method()
![Page 19: JavaScript Objects, Variables, and DOM](https://reader035.fdocuments.in/reader035/viewer/2022062315/56814f2c550346895dbcb9a3/html5/thumbnails/19.jpg)
A Simple Accumulator Object
Properties
currentValueincrease(amount)
decrease(amount)
current()
Methods
![Page 20: JavaScript Objects, Variables, and DOM](https://reader035.fdocuments.in/reader035/viewer/2022062315/56814f2c550346895dbcb9a3/html5/thumbnails/20.jpg)
Using the Accumulator Object
currentValue Out
accumulator.increase(5) 8
accumulator.decrease(4) 4
accumulator.current() 8
accumulator.currentValue 4
accumulator.currentValue = 3 3
![Page 21: JavaScript Objects, Variables, and DOM](https://reader035.fdocuments.in/reader035/viewer/2022062315/56814f2c550346895dbcb9a3/html5/thumbnails/21.jpg)
JavaScript Document Object Model (DOM) Basics
window
navigator
document
history
location screen
![Page 22: JavaScript Objects, Variables, and DOM](https://reader035.fdocuments.in/reader035/viewer/2022062315/56814f2c550346895dbcb9a3/html5/thumbnails/22.jpg)
Reminder
object
properties methods
Support varies by browser type and browser version.
DOM references identify properties and methods.