Javascript introcse.taylor.edu/~jgeisler/cos264/lectures/js.pdf · Jonathan Geisler Javascript...
Transcript of Javascript introcse.taylor.edu/~jgeisler/cos264/lectures/js.pdf · Jonathan Geisler Javascript...
![Page 1: Javascript introcse.taylor.edu/~jgeisler/cos264/lectures/js.pdf · Jonathan Geisler Javascript intro. What’s in a name? Livescript (Netscape) Javascript (Netscape & Sun partnership)](https://reader033.fdocuments.us/reader033/viewer/2022060603/6057c428ee2bbf4b71200588/html5/thumbnails/1.jpg)
Javascript intro
Jonathan Geisler
February 12, 2007
Jonathan Geisler Javascript intro
![Page 2: Javascript introcse.taylor.edu/~jgeisler/cos264/lectures/js.pdf · Jonathan Geisler Javascript intro. What’s in a name? Livescript (Netscape) Javascript (Netscape & Sun partnership)](https://reader033.fdocuments.us/reader033/viewer/2022060603/6057c428ee2bbf4b71200588/html5/thumbnails/2.jpg)
What’s in a name?
Livescript (Netscape)
Javascript (Netscape & Sun partnership)
Sun involved, so Java name includedNOT much like Java
ECMAscript
IE & Mozilla/Netscape interoperabilityBetter name, but very few know what it is
Jonathan Geisler Javascript intro
![Page 3: Javascript introcse.taylor.edu/~jgeisler/cos264/lectures/js.pdf · Jonathan Geisler Javascript intro. What’s in a name? Livescript (Netscape) Javascript (Netscape & Sun partnership)](https://reader033.fdocuments.us/reader033/viewer/2022060603/6057c428ee2bbf4b71200588/html5/thumbnails/3.jpg)
What’s in a name?
Livescript (Netscape)
Javascript (Netscape & Sun partnership)
Sun involved, so Java name includedNOT much like Java
ECMAscript
IE & Mozilla/Netscape interoperabilityBetter name, but very few know what it is
Jonathan Geisler Javascript intro
![Page 4: Javascript introcse.taylor.edu/~jgeisler/cos264/lectures/js.pdf · Jonathan Geisler Javascript intro. What’s in a name? Livescript (Netscape) Javascript (Netscape & Sun partnership)](https://reader033.fdocuments.us/reader033/viewer/2022060603/6057c428ee2bbf4b71200588/html5/thumbnails/4.jpg)
What’s in a name?
Livescript (Netscape)
Javascript (Netscape & Sun partnership)
Sun involved, so Java name included
NOT much like Java
ECMAscript
IE & Mozilla/Netscape interoperabilityBetter name, but very few know what it is
Jonathan Geisler Javascript intro
![Page 5: Javascript introcse.taylor.edu/~jgeisler/cos264/lectures/js.pdf · Jonathan Geisler Javascript intro. What’s in a name? Livescript (Netscape) Javascript (Netscape & Sun partnership)](https://reader033.fdocuments.us/reader033/viewer/2022060603/6057c428ee2bbf4b71200588/html5/thumbnails/5.jpg)
What’s in a name?
Livescript (Netscape)
Javascript (Netscape & Sun partnership)
Sun involved, so Java name includedNOT much like Java
ECMAscript
IE & Mozilla/Netscape interoperabilityBetter name, but very few know what it is
Jonathan Geisler Javascript intro
![Page 6: Javascript introcse.taylor.edu/~jgeisler/cos264/lectures/js.pdf · Jonathan Geisler Javascript intro. What’s in a name? Livescript (Netscape) Javascript (Netscape & Sun partnership)](https://reader033.fdocuments.us/reader033/viewer/2022060603/6057c428ee2bbf4b71200588/html5/thumbnails/6.jpg)
What’s in a name?
Livescript (Netscape)
Javascript (Netscape & Sun partnership)
Sun involved, so Java name includedNOT much like Java
ECMAscript
IE & Mozilla/Netscape interoperabilityBetter name, but very few know what it is
Jonathan Geisler Javascript intro
![Page 7: Javascript introcse.taylor.edu/~jgeisler/cos264/lectures/js.pdf · Jonathan Geisler Javascript intro. What’s in a name? Livescript (Netscape) Javascript (Netscape & Sun partnership)](https://reader033.fdocuments.us/reader033/viewer/2022060603/6057c428ee2bbf4b71200588/html5/thumbnails/7.jpg)
What’s in a name?
Livescript (Netscape)
Javascript (Netscape & Sun partnership)
Sun involved, so Java name includedNOT much like Java
ECMAscript
IE & Mozilla/Netscape interoperability
Better name, but very few know what it is
Jonathan Geisler Javascript intro
![Page 8: Javascript introcse.taylor.edu/~jgeisler/cos264/lectures/js.pdf · Jonathan Geisler Javascript intro. What’s in a name? Livescript (Netscape) Javascript (Netscape & Sun partnership)](https://reader033.fdocuments.us/reader033/viewer/2022060603/6057c428ee2bbf4b71200588/html5/thumbnails/8.jpg)
What’s in a name?
Livescript (Netscape)
Javascript (Netscape & Sun partnership)
Sun involved, so Java name includedNOT much like Java
ECMAscript
IE & Mozilla/Netscape interoperabilityBetter name, but very few know what it is
Jonathan Geisler Javascript intro
![Page 9: Javascript introcse.taylor.edu/~jgeisler/cos264/lectures/js.pdf · Jonathan Geisler Javascript intro. What’s in a name? Livescript (Netscape) Javascript (Netscape & Sun partnership)](https://reader033.fdocuments.us/reader033/viewer/2022060603/6057c428ee2bbf4b71200588/html5/thumbnails/9.jpg)
Where is Javascript used?
Client side scripts
Server side scripts
Stand-alone applications
Jonathan Geisler Javascript intro
![Page 10: Javascript introcse.taylor.edu/~jgeisler/cos264/lectures/js.pdf · Jonathan Geisler Javascript intro. What’s in a name? Livescript (Netscape) Javascript (Netscape & Sun partnership)](https://reader033.fdocuments.us/reader033/viewer/2022060603/6057c428ee2bbf4b71200588/html5/thumbnails/10.jpg)
Where is Javascript used?
Client side scripts
Server side scripts
Stand-alone applications
Jonathan Geisler Javascript intro
![Page 11: Javascript introcse.taylor.edu/~jgeisler/cos264/lectures/js.pdf · Jonathan Geisler Javascript intro. What’s in a name? Livescript (Netscape) Javascript (Netscape & Sun partnership)](https://reader033.fdocuments.us/reader033/viewer/2022060603/6057c428ee2bbf4b71200588/html5/thumbnails/11.jpg)
Where is Javascript used?
Client side scripts
Server side scripts
Stand-alone applications
Jonathan Geisler Javascript intro
![Page 12: Javascript introcse.taylor.edu/~jgeisler/cos264/lectures/js.pdf · Jonathan Geisler Javascript intro. What’s in a name? Livescript (Netscape) Javascript (Netscape & Sun partnership)](https://reader033.fdocuments.us/reader033/viewer/2022060603/6057c428ee2bbf4b71200588/html5/thumbnails/12.jpg)
Types
Dynamically
CreatedCheckedReferenced
Everything is like an
ObjectArray
Jonathan Geisler Javascript intro
![Page 13: Javascript introcse.taylor.edu/~jgeisler/cos264/lectures/js.pdf · Jonathan Geisler Javascript intro. What’s in a name? Livescript (Netscape) Javascript (Netscape & Sun partnership)](https://reader033.fdocuments.us/reader033/viewer/2022060603/6057c428ee2bbf4b71200588/html5/thumbnails/13.jpg)
Types
Dynamically
Created
CheckedReferenced
Everything is like an
ObjectArray
Jonathan Geisler Javascript intro
![Page 14: Javascript introcse.taylor.edu/~jgeisler/cos264/lectures/js.pdf · Jonathan Geisler Javascript intro. What’s in a name? Livescript (Netscape) Javascript (Netscape & Sun partnership)](https://reader033.fdocuments.us/reader033/viewer/2022060603/6057c428ee2bbf4b71200588/html5/thumbnails/14.jpg)
Types
Dynamically
CreatedChecked
Referenced
Everything is like an
ObjectArray
Jonathan Geisler Javascript intro
![Page 15: Javascript introcse.taylor.edu/~jgeisler/cos264/lectures/js.pdf · Jonathan Geisler Javascript intro. What’s in a name? Livescript (Netscape) Javascript (Netscape & Sun partnership)](https://reader033.fdocuments.us/reader033/viewer/2022060603/6057c428ee2bbf4b71200588/html5/thumbnails/15.jpg)
Types
Dynamically
CreatedCheckedReferenced
Everything is like an
ObjectArray
Jonathan Geisler Javascript intro
![Page 16: Javascript introcse.taylor.edu/~jgeisler/cos264/lectures/js.pdf · Jonathan Geisler Javascript intro. What’s in a name? Livescript (Netscape) Javascript (Netscape & Sun partnership)](https://reader033.fdocuments.us/reader033/viewer/2022060603/6057c428ee2bbf4b71200588/html5/thumbnails/16.jpg)
Types
Dynamically
CreatedCheckedReferenced
Everything is like an
ObjectArray
Jonathan Geisler Javascript intro
![Page 17: Javascript introcse.taylor.edu/~jgeisler/cos264/lectures/js.pdf · Jonathan Geisler Javascript intro. What’s in a name? Livescript (Netscape) Javascript (Netscape & Sun partnership)](https://reader033.fdocuments.us/reader033/viewer/2022060603/6057c428ee2bbf4b71200588/html5/thumbnails/17.jpg)
Types
Dynamically
CreatedCheckedReferenced
Everything is like an
Object
Array
Jonathan Geisler Javascript intro
![Page 18: Javascript introcse.taylor.edu/~jgeisler/cos264/lectures/js.pdf · Jonathan Geisler Javascript intro. What’s in a name? Livescript (Netscape) Javascript (Netscape & Sun partnership)](https://reader033.fdocuments.us/reader033/viewer/2022060603/6057c428ee2bbf4b71200588/html5/thumbnails/18.jpg)
Types
Dynamically
CreatedCheckedReferenced
Everything is like an
ObjectArray
Jonathan Geisler Javascript intro
![Page 19: Javascript introcse.taylor.edu/~jgeisler/cos264/lectures/js.pdf · Jonathan Geisler Javascript intro. What’s in a name? Livescript (Netscape) Javascript (Netscape & Sun partnership)](https://reader033.fdocuments.us/reader033/viewer/2022060603/6057c428ee2bbf4b71200588/html5/thumbnails/19.jpg)
Syntax
OK, there is one Java-like thing in Javascript . . .Most everythinglooks like C++, except:
No classes
typeof
for-in
Exceptions more Java-like with finally clause
var to declare variables
Jonathan Geisler Javascript intro
![Page 20: Javascript introcse.taylor.edu/~jgeisler/cos264/lectures/js.pdf · Jonathan Geisler Javascript intro. What’s in a name? Livescript (Netscape) Javascript (Netscape & Sun partnership)](https://reader033.fdocuments.us/reader033/viewer/2022060603/6057c428ee2bbf4b71200588/html5/thumbnails/20.jpg)
Syntax
OK, there is one Java-like thing in Javascript . . .Most everythinglooks like C++, except:
No classes
typeof
for-in
Exceptions more Java-like with finally clause
var to declare variables
Jonathan Geisler Javascript intro
![Page 21: Javascript introcse.taylor.edu/~jgeisler/cos264/lectures/js.pdf · Jonathan Geisler Javascript intro. What’s in a name? Livescript (Netscape) Javascript (Netscape & Sun partnership)](https://reader033.fdocuments.us/reader033/viewer/2022060603/6057c428ee2bbf4b71200588/html5/thumbnails/21.jpg)
Syntax
OK, there is one Java-like thing in Javascript . . .Most everythinglooks like C++, except:
No classes
typeof
for-in
Exceptions more Java-like with finally clause
var to declare variables
Jonathan Geisler Javascript intro
![Page 22: Javascript introcse.taylor.edu/~jgeisler/cos264/lectures/js.pdf · Jonathan Geisler Javascript intro. What’s in a name? Livescript (Netscape) Javascript (Netscape & Sun partnership)](https://reader033.fdocuments.us/reader033/viewer/2022060603/6057c428ee2bbf4b71200588/html5/thumbnails/22.jpg)
Syntax
OK, there is one Java-like thing in Javascript . . .Most everythinglooks like C++, except:
No classes
typeof
for-in
Exceptions more Java-like with finally clause
var to declare variables
Jonathan Geisler Javascript intro
![Page 23: Javascript introcse.taylor.edu/~jgeisler/cos264/lectures/js.pdf · Jonathan Geisler Javascript intro. What’s in a name? Livescript (Netscape) Javascript (Netscape & Sun partnership)](https://reader033.fdocuments.us/reader033/viewer/2022060603/6057c428ee2bbf4b71200588/html5/thumbnails/23.jpg)
Syntax
OK, there is one Java-like thing in Javascript . . .Most everythinglooks like C++, except:
No classes
typeof
for-in
Exceptions more Java-like with finally clause
var to declare variables
Jonathan Geisler Javascript intro
![Page 24: Javascript introcse.taylor.edu/~jgeisler/cos264/lectures/js.pdf · Jonathan Geisler Javascript intro. What’s in a name? Livescript (Netscape) Javascript (Netscape & Sun partnership)](https://reader033.fdocuments.us/reader033/viewer/2022060603/6057c428ee2bbf4b71200588/html5/thumbnails/24.jpg)
Primitives
Javascript has these things called primitives, but due to coercions,you normally don’t need to worry about them. They are closer tomachine representation of types like integers or floating pointnumbers.
Jonathan Geisler Javascript intro
![Page 25: Javascript introcse.taylor.edu/~jgeisler/cos264/lectures/js.pdf · Jonathan Geisler Javascript intro. What’s in a name? Livescript (Netscape) Javascript (Netscape & Sun partnership)](https://reader033.fdocuments.us/reader033/viewer/2022060603/6057c428ee2bbf4b71200588/html5/thumbnails/25.jpg)
Operators
C++ and Java operators are standard
===1 and !== are new and prevent coercions
typeof returns a string representation of a variable’s type,but not very helpful since there are so few types
1
Can you remember that many equal signs?
Jonathan Geisler Javascript intro
![Page 26: Javascript introcse.taylor.edu/~jgeisler/cos264/lectures/js.pdf · Jonathan Geisler Javascript intro. What’s in a name? Livescript (Netscape) Javascript (Netscape & Sun partnership)](https://reader033.fdocuments.us/reader033/viewer/2022060603/6057c428ee2bbf4b71200588/html5/thumbnails/26.jpg)
Operators
C++ and Java operators are standard
===1 and !== are new and prevent coercions
typeof returns a string representation of a variable’s type,but not very helpful since there are so few types
1Can you remember that many equal signs?Jonathan Geisler Javascript intro
![Page 27: Javascript introcse.taylor.edu/~jgeisler/cos264/lectures/js.pdf · Jonathan Geisler Javascript intro. What’s in a name? Livescript (Netscape) Javascript (Netscape & Sun partnership)](https://reader033.fdocuments.us/reader033/viewer/2022060603/6057c428ee2bbf4b71200588/html5/thumbnails/27.jpg)
Operators
C++ and Java operators are standard
===1 and !== are new and prevent coercions
typeof returns a string representation of a variable’s type,but not very helpful since there are so few types
1Can you remember that many equal signs?Jonathan Geisler Javascript intro
![Page 28: Javascript introcse.taylor.edu/~jgeisler/cos264/lectures/js.pdf · Jonathan Geisler Javascript intro. What’s in a name? Livescript (Netscape) Javascript (Netscape & Sun partnership)](https://reader033.fdocuments.us/reader033/viewer/2022060603/6057c428ee2bbf4b71200588/html5/thumbnails/28.jpg)
Properties
Data & Method types
Dynamically created & deleted
Accessed with . & []
Jonathan Geisler Javascript intro
![Page 29: Javascript introcse.taylor.edu/~jgeisler/cos264/lectures/js.pdf · Jonathan Geisler Javascript intro. What’s in a name? Livescript (Netscape) Javascript (Netscape & Sun partnership)](https://reader033.fdocuments.us/reader033/viewer/2022060603/6057c428ee2bbf4b71200588/html5/thumbnails/29.jpg)
Properties
Data & Method types
Dynamically created & deleted
Accessed with . & []
Jonathan Geisler Javascript intro
![Page 30: Javascript introcse.taylor.edu/~jgeisler/cos264/lectures/js.pdf · Jonathan Geisler Javascript intro. What’s in a name? Livescript (Netscape) Javascript (Netscape & Sun partnership)](https://reader033.fdocuments.us/reader033/viewer/2022060603/6057c428ee2bbf4b71200588/html5/thumbnails/30.jpg)
Properties
Data & Method types
Dynamically created & deleted
Accessed with . & []
Jonathan Geisler Javascript intro
![Page 31: Javascript introcse.taylor.edu/~jgeisler/cos264/lectures/js.pdf · Jonathan Geisler Javascript intro. What’s in a name? Livescript (Netscape) Javascript (Netscape & Sun partnership)](https://reader033.fdocuments.us/reader033/viewer/2022060603/6057c428ee2bbf4b71200588/html5/thumbnails/31.jpg)
For use with browsers
Javascript was developed for browsing the web, so it has functionsthat interact with the browser user:
alert()
confirm()
prompt()
document.write()
Jonathan Geisler Javascript intro
![Page 32: Javascript introcse.taylor.edu/~jgeisler/cos264/lectures/js.pdf · Jonathan Geisler Javascript intro. What’s in a name? Livescript (Netscape) Javascript (Netscape & Sun partnership)](https://reader033.fdocuments.us/reader033/viewer/2022060603/6057c428ee2bbf4b71200588/html5/thumbnails/32.jpg)
Does Javascript have classes?
Yes
new can be called with any function as a constructorObjects have both data and methods
No
No InheritanceNo PolymorphismSeverely limited EncapsulationNo type association with a class name
Jonathan Geisler Javascript intro
![Page 33: Javascript introcse.taylor.edu/~jgeisler/cos264/lectures/js.pdf · Jonathan Geisler Javascript intro. What’s in a name? Livescript (Netscape) Javascript (Netscape & Sun partnership)](https://reader033.fdocuments.us/reader033/viewer/2022060603/6057c428ee2bbf4b71200588/html5/thumbnails/33.jpg)
Does Javascript have classes?
Yes
new can be called with any function as a constructor
Objects have both data and methods
No
No InheritanceNo PolymorphismSeverely limited EncapsulationNo type association with a class name
Jonathan Geisler Javascript intro
![Page 34: Javascript introcse.taylor.edu/~jgeisler/cos264/lectures/js.pdf · Jonathan Geisler Javascript intro. What’s in a name? Livescript (Netscape) Javascript (Netscape & Sun partnership)](https://reader033.fdocuments.us/reader033/viewer/2022060603/6057c428ee2bbf4b71200588/html5/thumbnails/34.jpg)
Does Javascript have classes?
Yes
new can be called with any function as a constructorObjects have both data and methods
No
No InheritanceNo PolymorphismSeverely limited EncapsulationNo type association with a class name
Jonathan Geisler Javascript intro
![Page 35: Javascript introcse.taylor.edu/~jgeisler/cos264/lectures/js.pdf · Jonathan Geisler Javascript intro. What’s in a name? Livescript (Netscape) Javascript (Netscape & Sun partnership)](https://reader033.fdocuments.us/reader033/viewer/2022060603/6057c428ee2bbf4b71200588/html5/thumbnails/35.jpg)
Does Javascript have classes?
Yes
new can be called with any function as a constructorObjects have both data and methods
No
No InheritanceNo PolymorphismSeverely limited EncapsulationNo type association with a class name
Jonathan Geisler Javascript intro
![Page 36: Javascript introcse.taylor.edu/~jgeisler/cos264/lectures/js.pdf · Jonathan Geisler Javascript intro. What’s in a name? Livescript (Netscape) Javascript (Netscape & Sun partnership)](https://reader033.fdocuments.us/reader033/viewer/2022060603/6057c428ee2bbf4b71200588/html5/thumbnails/36.jpg)
Does Javascript have classes?
Yes
new can be called with any function as a constructorObjects have both data and methods
No
No Inheritance
No PolymorphismSeverely limited EncapsulationNo type association with a class name
Jonathan Geisler Javascript intro
![Page 37: Javascript introcse.taylor.edu/~jgeisler/cos264/lectures/js.pdf · Jonathan Geisler Javascript intro. What’s in a name? Livescript (Netscape) Javascript (Netscape & Sun partnership)](https://reader033.fdocuments.us/reader033/viewer/2022060603/6057c428ee2bbf4b71200588/html5/thumbnails/37.jpg)
Does Javascript have classes?
Yes
new can be called with any function as a constructorObjects have both data and methods
No
No InheritanceNo Polymorphism
Severely limited EncapsulationNo type association with a class name
Jonathan Geisler Javascript intro
![Page 38: Javascript introcse.taylor.edu/~jgeisler/cos264/lectures/js.pdf · Jonathan Geisler Javascript intro. What’s in a name? Livescript (Netscape) Javascript (Netscape & Sun partnership)](https://reader033.fdocuments.us/reader033/viewer/2022060603/6057c428ee2bbf4b71200588/html5/thumbnails/38.jpg)
Does Javascript have classes?
Yes
new can be called with any function as a constructorObjects have both data and methods
No
No InheritanceNo PolymorphismSeverely limited Encapsulation
No type association with a class name
Jonathan Geisler Javascript intro
![Page 39: Javascript introcse.taylor.edu/~jgeisler/cos264/lectures/js.pdf · Jonathan Geisler Javascript intro. What’s in a name? Livescript (Netscape) Javascript (Netscape & Sun partnership)](https://reader033.fdocuments.us/reader033/viewer/2022060603/6057c428ee2bbf4b71200588/html5/thumbnails/39.jpg)
Does Javascript have classes?
Yes
new can be called with any function as a constructorObjects have both data and methods
No
No InheritanceNo PolymorphismSeverely limited EncapsulationNo type association with a class name
Jonathan Geisler Javascript intro
![Page 40: Javascript introcse.taylor.edu/~jgeisler/cos264/lectures/js.pdf · Jonathan Geisler Javascript intro. What’s in a name? Livescript (Netscape) Javascript (Netscape & Sun partnership)](https://reader033.fdocuments.us/reader033/viewer/2022060603/6057c428ee2bbf4b71200588/html5/thumbnails/40.jpg)
Everything is an array?
Yes!
Use the Array() constructor, or
Use the [] constructor
Use for-in to get at all the elements
Use .length to get/set the last element location
Perl-like operators available (e.g., push(), pop(), shift(),unshift(), etc.)
Jonathan Geisler Javascript intro
![Page 41: Javascript introcse.taylor.edu/~jgeisler/cos264/lectures/js.pdf · Jonathan Geisler Javascript intro. What’s in a name? Livescript (Netscape) Javascript (Netscape & Sun partnership)](https://reader033.fdocuments.us/reader033/viewer/2022060603/6057c428ee2bbf4b71200588/html5/thumbnails/41.jpg)
Everything is an array?
Yes!
Use the Array() constructor, or
Use the [] constructor
Use for-in to get at all the elements
Use .length to get/set the last element location
Perl-like operators available (e.g., push(), pop(), shift(),unshift(), etc.)
Jonathan Geisler Javascript intro
![Page 42: Javascript introcse.taylor.edu/~jgeisler/cos264/lectures/js.pdf · Jonathan Geisler Javascript intro. What’s in a name? Livescript (Netscape) Javascript (Netscape & Sun partnership)](https://reader033.fdocuments.us/reader033/viewer/2022060603/6057c428ee2bbf4b71200588/html5/thumbnails/42.jpg)
Everything is an array?
Yes!
Use the Array() constructor, or
Use the [] constructor
Use for-in to get at all the elements
Use .length to get/set the last element location
Perl-like operators available (e.g., push(), pop(), shift(),unshift(), etc.)
Jonathan Geisler Javascript intro
![Page 43: Javascript introcse.taylor.edu/~jgeisler/cos264/lectures/js.pdf · Jonathan Geisler Javascript intro. What’s in a name? Livescript (Netscape) Javascript (Netscape & Sun partnership)](https://reader033.fdocuments.us/reader033/viewer/2022060603/6057c428ee2bbf4b71200588/html5/thumbnails/43.jpg)
Everything is an array?
Yes!
Use the Array() constructor, or
Use the [] constructor
Use for-in to get at all the elements
Use .length to get/set the last element location
Perl-like operators available (e.g., push(), pop(), shift(),unshift(), etc.)
Jonathan Geisler Javascript intro
![Page 44: Javascript introcse.taylor.edu/~jgeisler/cos264/lectures/js.pdf · Jonathan Geisler Javascript intro. What’s in a name? Livescript (Netscape) Javascript (Netscape & Sun partnership)](https://reader033.fdocuments.us/reader033/viewer/2022060603/6057c428ee2bbf4b71200588/html5/thumbnails/44.jpg)
Everything is an array?
Yes!
Use the Array() constructor, or
Use the [] constructor
Use for-in to get at all the elements
Use .length to get/set the last element location
Perl-like operators available (e.g., push(), pop(), shift(),unshift(), etc.)
Jonathan Geisler Javascript intro
![Page 45: Javascript introcse.taylor.edu/~jgeisler/cos264/lectures/js.pdf · Jonathan Geisler Javascript intro. What’s in a name? Livescript (Netscape) Javascript (Netscape & Sun partnership)](https://reader033.fdocuments.us/reader033/viewer/2022060603/6057c428ee2bbf4b71200588/html5/thumbnails/45.jpg)
Variable scope
Everything is global except for locally defined variables (var) insidea function. Therefore, use functions for name safety.
Jonathan Geisler Javascript intro
![Page 46: Javascript introcse.taylor.edu/~jgeisler/cos264/lectures/js.pdf · Jonathan Geisler Javascript intro. What’s in a name? Livescript (Netscape) Javascript (Netscape & Sun partnership)](https://reader033.fdocuments.us/reader033/viewer/2022060603/6057c428ee2bbf4b71200588/html5/thumbnails/46.jpg)
Regular Expressions
Look forward to Perl, where we’ll spend time on this explicitly!When that happens, note these similarites:
search() or match() in Javascript is like m// in Perl
replace() in Javascript is like s/// in Perl
Patterns/classes in Javascript are nearly identical to Perl(intentionally)
Jonathan Geisler Javascript intro
![Page 47: Javascript introcse.taylor.edu/~jgeisler/cos264/lectures/js.pdf · Jonathan Geisler Javascript intro. What’s in a name? Livescript (Netscape) Javascript (Netscape & Sun partnership)](https://reader033.fdocuments.us/reader033/viewer/2022060603/6057c428ee2bbf4b71200588/html5/thumbnails/47.jpg)
Event based programming
We will see this in Java, too
Response to user allows better interactivity
Independent code for each action
Flow of control is implicit
Jonathan Geisler Javascript intro
![Page 48: Javascript introcse.taylor.edu/~jgeisler/cos264/lectures/js.pdf · Jonathan Geisler Javascript intro. What’s in a name? Livescript (Netscape) Javascript (Netscape & Sun partnership)](https://reader033.fdocuments.us/reader033/viewer/2022060603/6057c428ee2bbf4b71200588/html5/thumbnails/48.jpg)
Calling Javascript from HTML
Use <script> explicitly and do one of the following:1 Have source inside tag2 Use src attribute to point to separate source file
Include handlers for desired events with attributes on desiredtags (e.g., <body onload="dostuff()">
Jonathan Geisler Javascript intro
![Page 49: Javascript introcse.taylor.edu/~jgeisler/cos264/lectures/js.pdf · Jonathan Geisler Javascript intro. What’s in a name? Livescript (Netscape) Javascript (Netscape & Sun partnership)](https://reader033.fdocuments.us/reader033/viewer/2022060603/6057c428ee2bbf4b71200588/html5/thumbnails/49.jpg)
Handlers
The book does a great job on pages 197–199 of listing all theJavascript events. Some of the most frequently used events are:
onclick
onsubmit/onreset
onload
onmouseover/onmouseout
Jonathan Geisler Javascript intro
![Page 50: Javascript introcse.taylor.edu/~jgeisler/cos264/lectures/js.pdf · Jonathan Geisler Javascript intro. What’s in a name? Livescript (Netscape) Javascript (Netscape & Sun partnership)](https://reader033.fdocuments.us/reader033/viewer/2022060603/6057c428ee2bbf4b71200588/html5/thumbnails/50.jpg)
What can be done with Javascript?
Modify the HTML document directly
Form validation (often done)
Snazzy presentation
Using mouseoverUsing clicks
Squirrelmail is a great example! And it all started here at Taylor!
Jonathan Geisler Javascript intro
![Page 51: Javascript introcse.taylor.edu/~jgeisler/cos264/lectures/js.pdf · Jonathan Geisler Javascript intro. What’s in a name? Livescript (Netscape) Javascript (Netscape & Sun partnership)](https://reader033.fdocuments.us/reader033/viewer/2022060603/6057c428ee2bbf4b71200588/html5/thumbnails/51.jpg)
Document Object Model (DOM) history
1 Javascript for Netscape (DOM 0)
2 IE and others copied it for compatibility purposes
3 IE & Netscape extended the DOM in different ways tosupport DHTML
4 W3C standardized two versions (DOM 1 & 2) with supportfrom Microsoft and Netscape, but only Netscape tried to fullycomply
Therefore, still use DOM 0 if at all possible. This may change inthe future as Microsoft just released IE 7 beta this summer. Theexpectation is that it will have better standards compliance(including DOM 2) and that you may be able to start using thoseadvanced features. We’re going to move more towards using DOM2 with AJAX, but doing it intelligently so that browsers that don’tsupport it are still able to display our pages and function as goodas possible given their limitations.
Jonathan Geisler Javascript intro
![Page 52: Javascript introcse.taylor.edu/~jgeisler/cos264/lectures/js.pdf · Jonathan Geisler Javascript intro. What’s in a name? Livescript (Netscape) Javascript (Netscape & Sun partnership)](https://reader033.fdocuments.us/reader033/viewer/2022060603/6057c428ee2bbf4b71200588/html5/thumbnails/52.jpg)
Document Object Model (DOM) history
1 Javascript for Netscape (DOM 0)
2 IE and others copied it for compatibility purposes
3 IE & Netscape extended the DOM in different ways tosupport DHTML
4 W3C standardized two versions (DOM 1 & 2) with supportfrom Microsoft and Netscape, but only Netscape tried to fullycomply
Therefore, still use DOM 0 if at all possible. This may change inthe future as Microsoft just released IE 7 beta this summer. Theexpectation is that it will have better standards compliance(including DOM 2) and that you may be able to start using thoseadvanced features. We’re going to move more towards using DOM2 with AJAX, but doing it intelligently so that browsers that don’tsupport it are still able to display our pages and function as goodas possible given their limitations.
Jonathan Geisler Javascript intro
![Page 53: Javascript introcse.taylor.edu/~jgeisler/cos264/lectures/js.pdf · Jonathan Geisler Javascript intro. What’s in a name? Livescript (Netscape) Javascript (Netscape & Sun partnership)](https://reader033.fdocuments.us/reader033/viewer/2022060603/6057c428ee2bbf4b71200588/html5/thumbnails/53.jpg)
Document Object Model (DOM) history
1 Javascript for Netscape (DOM 0)
2 IE and others copied it for compatibility purposes
3 IE & Netscape extended the DOM in different ways tosupport DHTML
4 W3C standardized two versions (DOM 1 & 2) with supportfrom Microsoft and Netscape, but only Netscape tried to fullycomply
Therefore, still use DOM 0 if at all possible. This may change inthe future as Microsoft just released IE 7 beta this summer. Theexpectation is that it will have better standards compliance(including DOM 2) and that you may be able to start using thoseadvanced features. We’re going to move more towards using DOM2 with AJAX, but doing it intelligently so that browsers that don’tsupport it are still able to display our pages and function as goodas possible given their limitations.
Jonathan Geisler Javascript intro
![Page 54: Javascript introcse.taylor.edu/~jgeisler/cos264/lectures/js.pdf · Jonathan Geisler Javascript intro. What’s in a name? Livescript (Netscape) Javascript (Netscape & Sun partnership)](https://reader033.fdocuments.us/reader033/viewer/2022060603/6057c428ee2bbf4b71200588/html5/thumbnails/54.jpg)
Document Object Model (DOM) history
1 Javascript for Netscape (DOM 0)
2 IE and others copied it for compatibility purposes
3 IE & Netscape extended the DOM in different ways tosupport DHTML
4 W3C standardized two versions (DOM 1 & 2) with supportfrom Microsoft and Netscape, but only Netscape tried to fullycomply
Therefore, still use DOM 0 if at all possible. This may change inthe future as Microsoft just released IE 7 beta this summer. Theexpectation is that it will have better standards compliance(including DOM 2) and that you may be able to start using thoseadvanced features. We’re going to move more towards using DOM2 with AJAX, but doing it intelligently so that browsers that don’tsupport it are still able to display our pages and function as goodas possible given their limitations.
Jonathan Geisler Javascript intro
![Page 55: Javascript introcse.taylor.edu/~jgeisler/cos264/lectures/js.pdf · Jonathan Geisler Javascript intro. What’s in a name? Livescript (Netscape) Javascript (Netscape & Sun partnership)](https://reader033.fdocuments.us/reader033/viewer/2022060603/6057c428ee2bbf4b71200588/html5/thumbnails/55.jpg)
Document Object Model (DOM) history
1 Javascript for Netscape (DOM 0)
2 IE and others copied it for compatibility purposes
3 IE & Netscape extended the DOM in different ways tosupport DHTML
4 W3C standardized two versions (DOM 1 & 2) with supportfrom Microsoft and Netscape, but only Netscape tried to fullycomply
Therefore, still use DOM 0 if at all possible. This may change inthe future as Microsoft just released IE 7 beta this summer. Theexpectation is that it will have better standards compliance(including DOM 2) and that you may be able to start using thoseadvanced features. We’re going to move more towards using DOM2 with AJAX, but doing it intelligently so that browsers that don’tsupport it are still able to display our pages and function as goodas possible given their limitations.
Jonathan Geisler Javascript intro
![Page 56: Javascript introcse.taylor.edu/~jgeisler/cos264/lectures/js.pdf · Jonathan Geisler Javascript intro. What’s in a name? Livescript (Netscape) Javascript (Netscape & Sun partnership)](https://reader033.fdocuments.us/reader033/viewer/2022060603/6057c428ee2bbf4b71200588/html5/thumbnails/56.jpg)
DOM Level 0 hierarchy
window
navigator
self
frames[]
location
history
document
screen
embeds[]
applets[]
images[]
links[]
anchors[]
forms[]elements[]
ButtonCheckboxFileUploadHiddenPasswordRadioResetSelectSubmitTextTextarea
options[]
Jonathan Geisler Javascript intro
![Page 57: Javascript introcse.taylor.edu/~jgeisler/cos264/lectures/js.pdf · Jonathan Geisler Javascript intro. What’s in a name? Livescript (Netscape) Javascript (Netscape & Sun partnership)](https://reader033.fdocuments.us/reader033/viewer/2022060603/6057c428ee2bbf4b71200588/html5/thumbnails/57.jpg)
DOM 1 & 2
The model views the page (document) as a tree. You may traversethe tree by:
Explicitly visiting each node until you find the one you’reinterested via the childNodes[], parentNode, firstChild,and/or lastChild properties.
Let the browser find the node you’re interested inautomatically via getElementByID() orgetElementsByTag()
Jonathan Geisler Javascript intro
![Page 58: Javascript introcse.taylor.edu/~jgeisler/cos264/lectures/js.pdf · Jonathan Geisler Javascript intro. What’s in a name? Livescript (Netscape) Javascript (Netscape & Sun partnership)](https://reader033.fdocuments.us/reader033/viewer/2022060603/6057c428ee2bbf4b71200588/html5/thumbnails/58.jpg)
What can we do with DOM nodes?
1 Change attributes
2 Change text
3 Change styles
4 Move them to a different spot in the document
5 Delete them from the document
6 Create new nodes for the document
7 “Clone” them (i.e., make a copy)
Jonathan Geisler Javascript intro
![Page 59: Javascript introcse.taylor.edu/~jgeisler/cos264/lectures/js.pdf · Jonathan Geisler Javascript intro. What’s in a name? Livescript (Netscape) Javascript (Netscape & Sun partnership)](https://reader033.fdocuments.us/reader033/viewer/2022060603/6057c428ee2bbf4b71200588/html5/thumbnails/59.jpg)
What can we do with DOM nodes?
1 Change attributes
2 Change text
3 Change styles
4 Move them to a different spot in the document
5 Delete them from the document
6 Create new nodes for the document
7 “Clone” them (i.e., make a copy)
Jonathan Geisler Javascript intro
![Page 60: Javascript introcse.taylor.edu/~jgeisler/cos264/lectures/js.pdf · Jonathan Geisler Javascript intro. What’s in a name? Livescript (Netscape) Javascript (Netscape & Sun partnership)](https://reader033.fdocuments.us/reader033/viewer/2022060603/6057c428ee2bbf4b71200588/html5/thumbnails/60.jpg)
What can we do with DOM nodes?
1 Change attributes
2 Change text
3 Change styles
4 Move them to a different spot in the document
5 Delete them from the document
6 Create new nodes for the document
7 “Clone” them (i.e., make a copy)
Jonathan Geisler Javascript intro
![Page 61: Javascript introcse.taylor.edu/~jgeisler/cos264/lectures/js.pdf · Jonathan Geisler Javascript intro. What’s in a name? Livescript (Netscape) Javascript (Netscape & Sun partnership)](https://reader033.fdocuments.us/reader033/viewer/2022060603/6057c428ee2bbf4b71200588/html5/thumbnails/61.jpg)
What can we do with DOM nodes?
1 Change attributes
2 Change text
3 Change styles
4 Move them to a different spot in the document
5 Delete them from the document
6 Create new nodes for the document
7 “Clone” them (i.e., make a copy)
Jonathan Geisler Javascript intro
![Page 62: Javascript introcse.taylor.edu/~jgeisler/cos264/lectures/js.pdf · Jonathan Geisler Javascript intro. What’s in a name? Livescript (Netscape) Javascript (Netscape & Sun partnership)](https://reader033.fdocuments.us/reader033/viewer/2022060603/6057c428ee2bbf4b71200588/html5/thumbnails/62.jpg)
What can we do with DOM nodes?
1 Change attributes
2 Change text
3 Change styles
4 Move them to a different spot in the document
5 Delete them from the document
6 Create new nodes for the document
7 “Clone” them (i.e., make a copy)
Jonathan Geisler Javascript intro
![Page 63: Javascript introcse.taylor.edu/~jgeisler/cos264/lectures/js.pdf · Jonathan Geisler Javascript intro. What’s in a name? Livescript (Netscape) Javascript (Netscape & Sun partnership)](https://reader033.fdocuments.us/reader033/viewer/2022060603/6057c428ee2bbf4b71200588/html5/thumbnails/63.jpg)
What can we do with DOM nodes?
1 Change attributes
2 Change text
3 Change styles
4 Move them to a different spot in the document
5 Delete them from the document
6 Create new nodes for the document
7 “Clone” them (i.e., make a copy)
Jonathan Geisler Javascript intro
![Page 64: Javascript introcse.taylor.edu/~jgeisler/cos264/lectures/js.pdf · Jonathan Geisler Javascript intro. What’s in a name? Livescript (Netscape) Javascript (Netscape & Sun partnership)](https://reader033.fdocuments.us/reader033/viewer/2022060603/6057c428ee2bbf4b71200588/html5/thumbnails/64.jpg)
What can we do with DOM nodes?
1 Change attributes
2 Change text
3 Change styles
4 Move them to a different spot in the document
5 Delete them from the document
6 Create new nodes for the document
7 “Clone” them (i.e., make a copy)
Jonathan Geisler Javascript intro
![Page 65: Javascript introcse.taylor.edu/~jgeisler/cos264/lectures/js.pdf · Jonathan Geisler Javascript intro. What’s in a name? Livescript (Netscape) Javascript (Netscape & Sun partnership)](https://reader033.fdocuments.us/reader033/viewer/2022060603/6057c428ee2bbf4b71200588/html5/thumbnails/65.jpg)
Author’s examples
The author gives two examples:
1 Expanding a form to fit the number of entries exactly withoutneeding extra entries. Think of this as the web equivalent ofnew because we are able to use exactly the right amount ofmemory without having declare too much to be sure we haveenough for any plausible situation.
2 Generic rollovers. Basically you have one piece of code thatshould work on any web page that includes this script andthen declares the class for the <img> tag to be a rollover.
What thoughts and questions did you have about these examples?
Jonathan Geisler Javascript intro
![Page 66: Javascript introcse.taylor.edu/~jgeisler/cos264/lectures/js.pdf · Jonathan Geisler Javascript intro. What’s in a name? Livescript (Netscape) Javascript (Netscape & Sun partnership)](https://reader033.fdocuments.us/reader033/viewer/2022060603/6057c428ee2bbf4b71200588/html5/thumbnails/66.jpg)
Connecting functions to events
As your book points out, there is the DOM way, and the IE way.We’ll look at the DOM to simplfy things and let you get thedifferences for IE from the book.To have myClicker() called when we click on the elementidentified by clicker, we use the following code:
function myClicker(e) {// code
}
var elem = document.getElementById (" clicker ");elem.addEventListener (" click", myClicker , false);
Jonathan Geisler Javascript intro
![Page 67: Javascript introcse.taylor.edu/~jgeisler/cos264/lectures/js.pdf · Jonathan Geisler Javascript intro. What’s in a name? Livescript (Netscape) Javascript (Netscape & Sun partnership)](https://reader033.fdocuments.us/reader033/viewer/2022060603/6057c428ee2bbf4b71200588/html5/thumbnails/67.jpg)
Changing the normal browser behavior
In order to stop an event from being sent to each element up theDOM tree, we use stopPropagation().
In order to prevent an event from causing default behavior, we usepreventDefault().
Jonathan Geisler Javascript intro
![Page 68: Javascript introcse.taylor.edu/~jgeisler/cos264/lectures/js.pdf · Jonathan Geisler Javascript intro. What’s in a name? Livescript (Netscape) Javascript (Netscape & Sun partnership)](https://reader033.fdocuments.us/reader033/viewer/2022060603/6057c428ee2bbf4b71200588/html5/thumbnails/68.jpg)
Smart Events
We’ll cover the examples in your book on the board. Whatquestions do you have concerning the “Creating Smarter Links”and “Making Tables More Readable” sections?
Jonathan Geisler Javascript intro