wdb005.1 - javascript for java developers (lecture 1)
DESCRIPTION
Slides from our series of lectures on JavaScript for Java Developers.TRANSCRIPT
![Page 2: WDB005.1 - JavaScript for Java Developers (Lecture 1)](https://reader031.vdocuments.us/reader031/viewer/2022020218/55963b0d1a28abc4738b4639/html5/thumbnails/2.jpg)
1990 – World Wide Web1990 – World Wide Web
![Page 3: WDB005.1 - JavaScript for Java Developers (Lecture 1)](https://reader031.vdocuments.us/reader031/viewer/2022020218/55963b0d1a28abc4738b4639/html5/thumbnails/3.jpg)
1993 – NCSA Mosaic1993 – NCSA Mosaic
![Page 4: WDB005.1 - JavaScript for Java Developers (Lecture 1)](https://reader031.vdocuments.us/reader031/viewer/2022020218/55963b0d1a28abc4738b4639/html5/thumbnails/4.jpg)
1994 - Netscape Navigator1994 - Netscape Navigator
![Page 5: WDB005.1 - JavaScript for Java Developers (Lecture 1)](https://reader031.vdocuments.us/reader031/viewer/2022020218/55963b0d1a28abc4738b4639/html5/thumbnails/5.jpg)
1995 – Sun Java1995 – Sun Java
![Page 6: WDB005.1 - JavaScript for Java Developers (Lecture 1)](https://reader031.vdocuments.us/reader031/viewer/2022020218/55963b0d1a28abc4738b4639/html5/thumbnails/6.jpg)
JavaScript Origins – LiveScriptJavaScript Origins – LiveScript
Interpreted scripting languageSimple enough for beginnersDialect of SchemeSelf-inspired prototype modelHyperCard event modelJava syntax
Brendan Eich
![Page 7: WDB005.1 - JavaScript for Java Developers (Lecture 1)](https://reader031.vdocuments.us/reader031/viewer/2022020218/55963b0d1a28abc4738b4639/html5/thumbnails/7.jpg)
JavaScript Origins – LiveScriptJavaScript Origins – LiveScript
Interpreted scripting languageSimple enough for beginnersDialect of SchemeSelf-inspired prototype modelHyperCard event modelJava syntax
Brendan Eich
Implemented in 10 days
![Page 8: WDB005.1 - JavaScript for Java Developers (Lecture 1)](https://reader031.vdocuments.us/reader031/viewer/2022020218/55963b0d1a28abc4738b4639/html5/thumbnails/8.jpg)
Netscape – Sun dealNetscape – Sun deal
&
![Page 9: WDB005.1 - JavaScript for Java Developers (Lecture 1)](https://reader031.vdocuments.us/reader031/viewer/2022020218/55963b0d1a28abc4738b4639/html5/thumbnails/9.jpg)
Java Applets for appsJava Applets for apps
&
![Page 10: WDB005.1 - JavaScript for Java Developers (Lecture 1)](https://reader031.vdocuments.us/reader031/viewer/2022020218/55963b0d1a28abc4738b4639/html5/thumbnails/10.jpg)
Simple script for web designersSimple script for web designers
&
Script?
![Page 11: WDB005.1 - JavaScript for Java Developers (Lecture 1)](https://reader031.vdocuments.us/reader031/viewer/2022020218/55963b0d1a28abc4738b4639/html5/thumbnails/11.jpg)
1995 - JavaScript Released1995 - JavaScript Released
&
![Page 12: WDB005.1 - JavaScript for Java Developers (Lecture 1)](https://reader031.vdocuments.us/reader031/viewer/2022020218/55963b0d1a28abc4738b4639/html5/thumbnails/12.jpg)
1995 - JavaScript Released1995 - JavaScript Released
&
![Page 13: WDB005.1 - JavaScript for Java Developers (Lecture 1)](https://reader031.vdocuments.us/reader031/viewer/2022020218/55963b0d1a28abc4738b4639/html5/thumbnails/13.jpg)
Internet ExplorerInternet Explorer
![Page 14: WDB005.1 - JavaScript for Java Developers (Lecture 1)](https://reader031.vdocuments.us/reader031/viewer/2022020218/55963b0d1a28abc4738b4639/html5/thumbnails/14.jpg)
2005 - AJAX2005 - AJAX
![Page 15: WDB005.1 - JavaScript for Java Developers (Lecture 1)](https://reader031.vdocuments.us/reader031/viewer/2022020218/55963b0d1a28abc4738b4639/html5/thumbnails/15.jpg)
Today – The Most Popular Client PlatformToday – The Most Popular Client Platform
![Page 16: WDB005.1 - JavaScript for Java Developers (Lecture 1)](https://reader031.vdocuments.us/reader031/viewer/2022020218/55963b0d1a28abc4738b4639/html5/thumbnails/16.jpg)
In Fact – The Only Option on Web ClientIn Fact – The Only Option on Web Client
![Page 17: WDB005.1 - JavaScript for Java Developers (Lecture 1)](https://reader031.vdocuments.us/reader031/viewer/2022020218/55963b0d1a28abc4738b4639/html5/thumbnails/17.jpg)
New fast engines – Google V8New fast engines – Google V8
![Page 18: WDB005.1 - JavaScript for Java Developers (Lecture 1)](https://reader031.vdocuments.us/reader031/viewer/2022020218/55963b0d1a28abc4738b4639/html5/thumbnails/18.jpg)
JavaScript “strict mode”JavaScript “strict mode”
![Page 19: WDB005.1 - JavaScript for Java Developers (Lecture 1)](https://reader031.vdocuments.us/reader031/viewer/2022020218/55963b0d1a28abc4738b4639/html5/thumbnails/19.jpg)
Mozilla RhinoMozilla Rhino
JavaScript engine shipped with JRE (version 6 and higher)
![Page 20: WDB005.1 - JavaScript for Java Developers (Lecture 1)](https://reader031.vdocuments.us/reader031/viewer/2022020218/55963b0d1a28abc4738b4639/html5/thumbnails/20.jpg)
NashornNashorn
Much faster JavaScript engine in JRE 8
![Page 21: WDB005.1 - JavaScript for Java Developers (Lecture 1)](https://reader031.vdocuments.us/reader031/viewer/2022020218/55963b0d1a28abc4738b4639/html5/thumbnails/21.jpg)
Server Apps with Node.jsServer Apps with Node.js
JavaScript server platformbased on Google V8 engine
![Page 22: WDB005.1 - JavaScript for Java Developers (Lecture 1)](https://reader031.vdocuments.us/reader031/viewer/2022020218/55963b0d1a28abc4738b4639/html5/thumbnails/22.jpg)
Desktop Apps with Node-WebkitDesktop Apps with Node-Webkit
![Page 23: WDB005.1 - JavaScript for Java Developers (Lecture 1)](https://reader031.vdocuments.us/reader031/viewer/2022020218/55963b0d1a28abc4738b4639/html5/thumbnails/23.jpg)
How Developers Learn JavaScriptHow Developers Learn JavaScript
Hmm... JavaScript...Looks familiar...Let the coding begin!!!
![Page 24: WDB005.1 - JavaScript for Java Developers (Lecture 1)](https://reader031.vdocuments.us/reader031/viewer/2022020218/55963b0d1a28abc4738b4639/html5/thumbnails/24.jpg)
It will make you think...It will make you think...
![Page 25: WDB005.1 - JavaScript for Java Developers (Lecture 1)](https://reader031.vdocuments.us/reader031/viewer/2022020218/55963b0d1a28abc4738b4639/html5/thumbnails/25.jpg)
After a little while...After a little while...
I hate JavaScript!!!
![Page 26: WDB005.1 - JavaScript for Java Developers (Lecture 1)](https://reader031.vdocuments.us/reader031/viewer/2022020218/55963b0d1a28abc4738b4639/html5/thumbnails/26.jpg)
What I really mean...What I really mean...
I don't understand the languageIt has stupid featuresThe DOM model is EVIL
![Page 27: WDB005.1 - JavaScript for Java Developers (Lecture 1)](https://reader031.vdocuments.us/reader031/viewer/2022020218/55963b0d1a28abc4738b4639/html5/thumbnails/27.jpg)
Java & JavaScriptJava & JavaScript
JavaScript != Java
![Page 28: WDB005.1 - JavaScript for Java Developers (Lecture 1)](https://reader031.vdocuments.us/reader031/viewer/2022020218/55963b0d1a28abc4738b4639/html5/thumbnails/28.jpg)
Java & JavaScript – What is SimilarJava & JavaScript – What is Similar
C-like syntaxSandboxedJava keywords are reserved in jsJS follows Java naming conventions
![Page 29: WDB005.1 - JavaScript for Java Developers (Lecture 1)](https://reader031.vdocuments.us/reader031/viewer/2022020218/55963b0d1a28abc4738b4639/html5/thumbnails/29.jpg)
Java & JavaScript – What is SimilarJava & JavaScript – What is Similar
C-like syntaxSandboxedJava keywords are reserved in jsJS follows Java naming conventionsMake harder to see the difference!
![Page 30: WDB005.1 - JavaScript for Java Developers (Lecture 1)](https://reader031.vdocuments.us/reader031/viewer/2022020218/55963b0d1a28abc4738b4639/html5/thumbnails/30.jpg)
JavaScriptJavaScriptDynamic TypingPrototype-basedDynamic ObjectsFirst Class FunctionsClosuresFunction ScopeGlobal Variables
![Page 31: WDB005.1 - JavaScript for Java Developers (Lecture 1)](https://reader031.vdocuments.us/reader031/viewer/2022020218/55963b0d1a28abc4738b4639/html5/thumbnails/31.jpg)
Know and Avoid Bad FeaturesKnow and Avoid Bad Features
![Page 32: WDB005.1 - JavaScript for Java Developers (Lecture 1)](https://reader031.vdocuments.us/reader031/viewer/2022020218/55963b0d1a28abc4738b4639/html5/thumbnails/32.jpg)
Don't Use DOM DirectlyDon't Use DOM Directly
JQueryPrototype...
![Page 33: WDB005.1 - JavaScript for Java Developers (Lecture 1)](https://reader031.vdocuments.us/reader031/viewer/2022020218/55963b0d1a28abc4738b4639/html5/thumbnails/33.jpg)
Global ScopeGlobal Scope
Window object = contextAvoid global variables
![Page 34: WDB005.1 - JavaScript for Java Developers (Lecture 1)](https://reader031.vdocuments.us/reader031/viewer/2022020218/55963b0d1a28abc4738b4639/html5/thumbnails/34.jpg)
Automatic SemicolonsAutomatic Semicolons
return { status: true}
{ status: true }
return{ status: true}
undefined
![Page 35: WDB005.1 - JavaScript for Java Developers (Lecture 1)](https://reader031.vdocuments.us/reader031/viewer/2022020218/55963b0d1a28abc4738b4639/html5/thumbnails/35.jpg)
Automatic SemicolonsAutomatic Semicolons
return { status: true}
{ status: true }
return;{ status: true}
undefined
![Page 36: WDB005.1 - JavaScript for Java Developers (Lecture 1)](https://reader031.vdocuments.us/reader031/viewer/2022020218/55963b0d1a28abc4738b4639/html5/thumbnails/36.jpg)
What is the difference?What is the difference?
console.log('multiline string \Literal');
console.log('multiline string \ Literal');
![Page 37: WDB005.1 - JavaScript for Java Developers (Lecture 1)](https://reader031.vdocuments.us/reader031/viewer/2022020218/55963b0d1a28abc4738b4639/html5/thumbnails/37.jpg)
You can't see itYou can't see it
console.log('multiline string \Literal');
console.log('multiline string \_ Literal'); ^
![Page 38: WDB005.1 - JavaScript for Java Developers (Lecture 1)](https://reader031.vdocuments.us/reader031/viewer/2022020218/55963b0d1a28abc4738b4639/html5/thumbnails/38.jpg)
===='' == '0' // false0 == '' // true0 == '0' // true
false == 'false' // falsefalse == '0' // true
false == undefined // falsefalse == null // falsenull == undefined // true
' \t\r\n ' == 0 // true
![Page 39: WDB005.1 - JavaScript for Java Developers (Lecture 1)](https://reader031.vdocuments.us/reader031/viewer/2022020218/55963b0d1a28abc4738b4639/html5/thumbnails/39.jpg)
Use === and !== insteadUse === and !== instead'' === '0' // false0 === '' // false0 === '0' // false
false === 'false' // falsefalse === '0' // false
false === undefined // falsefalse === null // falsenull === undefined // false
' \t\r\n ' === 0 // false
![Page 40: WDB005.1 - JavaScript for Java Developers (Lecture 1)](https://reader031.vdocuments.us/reader031/viewer/2022020218/55963b0d1a28abc4738b4639/html5/thumbnails/40.jpg)
undefined valuesundefined values
value == null
![Page 41: WDB005.1 - JavaScript for Java Developers (Lecture 1)](https://reader031.vdocuments.us/reader031/viewer/2022020218/55963b0d1a28abc4738b4639/html5/thumbnails/41.jpg)
Use === and !== insteadUse === and !== instead
value == nullvalue === undefined
![Page 42: WDB005.1 - JavaScript for Java Developers (Lecture 1)](https://reader031.vdocuments.us/reader031/viewer/2022020218/55963b0d1a28abc4738b4639/html5/thumbnails/42.jpg)
Only floating point numbersOnly floating point numbers
0.3 - 0.1 !== 0.2
![Page 43: WDB005.1 - JavaScript for Java Developers (Lecture 1)](https://reader031.vdocuments.us/reader031/viewer/2022020218/55963b0d1a28abc4738b4639/html5/thumbnails/43.jpg)
typeoftypeof
typeof 0.2 // 'number'typeof {} // 'object'typeof [] // 'object'typeof null // 'object' typeof NaN // 'number'
![Page 44: WDB005.1 - JavaScript for Java Developers (Lecture 1)](https://reader031.vdocuments.us/reader031/viewer/2022020218/55963b0d1a28abc4738b4639/html5/thumbnails/44.jpg)
Function ScopeFunction Scope
function checkScope() { { var foo = 42; } // foo is still visible!}
![Page 45: WDB005.1 - JavaScript for Java Developers (Lecture 1)](https://reader031.vdocuments.us/reader031/viewer/2022020218/55963b0d1a28abc4738b4639/html5/thumbnails/45.jpg)
Use the Power of Good FeaturesUse the Power of Good Features
![Page 46: WDB005.1 - JavaScript for Java Developers (Lecture 1)](https://reader031.vdocuments.us/reader031/viewer/2022020218/55963b0d1a28abc4738b4639/html5/thumbnails/46.jpg)
Weak TypingWeak TypingVariables are containers that could store everything
![Page 47: WDB005.1 - JavaScript for Java Developers (Lecture 1)](https://reader031.vdocuments.us/reader031/viewer/2022020218/55963b0d1a28abc4738b4639/html5/thumbnails/47.jpg)
Objects as Hash TablesObjects as Hash Tablesfunction Person(name) { this._name = name;
this.getName = function() { return this._name; };}
var person = new Person("John");person.age = 27;person["city"] = "London"
![Page 48: WDB005.1 - JavaScript for Java Developers (Lecture 1)](https://reader031.vdocuments.us/reader031/viewer/2022020218/55963b0d1a28abc4738b4639/html5/thumbnails/48.jpg)
Objects Literals, eval() and JSONObjects Literals, eval() and JSON
var myCar = { color: "yellow", wheels: 4, engine: { cylinders: 4, size: 2.0 }};
![Page 49: WDB005.1 - JavaScript for Java Developers (Lecture 1)](https://reader031.vdocuments.us/reader031/viewer/2022020218/55963b0d1a28abc4738b4639/html5/thumbnails/49.jpg)
First Value FunctionsFirst Value Functionsvar plus = function(x,y){ return x + y };var minus = function(x,y){ return x - y };var operations = { '+': plus, '-': minus};
var calculate = function(x, y, operation){ return operations[operation](x, y);}calculate(38, 4, '+');calculate(47, 3, '-');
![Page 50: WDB005.1 - JavaScript for Java Developers (Lecture 1)](https://reader031.vdocuments.us/reader031/viewer/2022020218/55963b0d1a28abc4738b4639/html5/thumbnails/50.jpg)
ClosuresClosures
function add(value1) { return function doAdd(value2) { return value1 + value2; };}
var increment = add(1);var foo = increment(2);// foo equals 3
![Page 51: WDB005.1 - JavaScript for Java Developers (Lecture 1)](https://reader031.vdocuments.us/reader031/viewer/2022020218/55963b0d1a28abc4738b4639/html5/thumbnails/51.jpg)
PrototypesPrototypesvar Point = function(x) { this.x = x; return this;};
Point.prototype = { x: 0, draw: function() { … }};
p1 = new Point(10);p2 = new Point(15);
![Page 52: WDB005.1 - JavaScript for Java Developers (Lecture 1)](https://reader031.vdocuments.us/reader031/viewer/2022020218/55963b0d1a28abc4738b4639/html5/thumbnails/52.jpg)
this as function contextthis as function contextfunction bar() { alert(this);}bar(); // global
var foo = { baz: function() { alert(this); }}foo.baz(); // foo
![Page 53: WDB005.1 - JavaScript for Java Developers (Lecture 1)](https://reader031.vdocuments.us/reader031/viewer/2022020218/55963b0d1a28abc4738b4639/html5/thumbnails/53.jpg)
ResourcesJavaScript – The Good PartsDouglas Crockford
JavaScript PatternsStoyan Stefanov
![Page 54: WDB005.1 - JavaScript for Java Developers (Lecture 1)](https://reader031.vdocuments.us/reader031/viewer/2022020218/55963b0d1a28abc4738b4639/html5/thumbnails/54.jpg)
Questions