This document provides an overview of JavaScript for Java developers. It discusses the origins and history of JavaScript, including how it was influenced by Java syntax but developed separately. The document outlines similarities and differences between JavaScript and Java, as well as features of JavaScript like dynamic typing, prototypes, closures, and this keyword context. It recommends leveraging good JavaScript features like objects, functions, and JSON while avoiding bad patterns like direct DOM manipulation. Resources for further learning are also provided.

1. JavaScript for Java Developers
Trainer: Igor Khotin
Contacts: khotin@gmx.com

2. 1990 – World Wide Web1990 – World Wide Web

3. 1993 – NCSA Mosaic1993 – NCSA Mosaic

4. 1994 - Netscape Navigator1994 - Netscape Navigator

5. 1995 – Sun Java1995 – Sun Java

6. JavaScript Origins – LiveScriptJavaScript Origins – LiveScript
Interpreted scripting language
Simple enough for beginners
Dialect of Scheme
Self-inspired prototype model
HyperCard event model
Java syntax
Brendan Eich

7. JavaScript Origins – LiveScriptJavaScript Origins – LiveScript
Interpreted scripting language
Simple enough for beginners
Dialect of Scheme
Self-inspired prototype model
HyperCard event model
Java syntax
Brendan Eich
Implemented in 10 days

8. Netscape – Sun dealNetscape – Sun deal
&

9. Java Applets for appsJava Applets for apps
&

10. Simple script for web designersSimple script for web designers
&
Script?

11. 1995 - JavaScript Released1995 - JavaScript Released
&

12. 1995 - JavaScript Released1995 - JavaScript Released
&

13. Internet ExplorerInternet Explorer

14. 2005 - AJAX2005 - AJAX

15. Today – The Most Popular Client PlatformToday – The Most Popular Client Platform

16. In Fact – The Only Option on Web ClientIn Fact – The Only Option on Web Client

17. New fast engines – Google V8New fast engines – Google V8

18. JavaScript “strict mode”JavaScript “strict mode”

19. Mozilla RhinoMozilla Rhino
JavaScript engine shipped with JRE (version 6 and higher)

20. NashornNashorn
Much faster JavaScript engine in JRE 8

21. Server Apps with Node.jsServer Apps with Node.js
JavaScript server platform
based on Google V8 engine

22. Desktop Apps with Node-WebkitDesktop Apps with Node-Webkit

23. How Developers Learn JavaScriptHow Developers Learn JavaScript
Hmm... JavaScript...
Looks familiar...
Let the coding begin!!!

24. It will make you think...It will make you think...

25. After a little while...After a little while...
I hate JavaScript!!!

26. What I really mean...What I really mean...
I don't understand the language
It has stupid features
The DOM model is EVIL

27. Java & JavaScriptJava & JavaScript
JavaScript != Java

28. Java & JavaScript – What is SimilarJava & JavaScript – What is Similar
C-like syntax
Sandboxed
Java keywords are reserved in js
JS follows Java naming
conventions

29. Java & JavaScript – What is SimilarJava & JavaScript – What is Similar
C-like syntax
Sandboxed
Java keywords are reserved in js
JS follows Java naming
conventions
Make harder to see the
difference!

30. JavaScriptJavaScript
Dynamic Typing
Prototype-based
Dynamic Objects
First Class Functions
Closures
Function Scope
Global Variables

31. Know and Avoid Bad FeaturesKnow and Avoid Bad Features

32. Don't Use DOM DirectlyDon't Use DOM Directly
JQuery
Prototype
...

33. Global ScopeGlobal Scope
Window object = context
Avoid global variables

34. Automatic SemicolonsAutomatic Semicolons
return {
status: true
}
{ status: true }
return
{
status: true
}
undefined

35. Automatic SemicolonsAutomatic Semicolons
return {
status: true
}
{ status: true }
return;
{
status: true
}
undefined

36. What is the difference?What is the difference?
console.log('multiline string
Literal');
console.log('multiline string
Literal');

37. You can't see itYou can't see it
console.log('multiline string
Literal');
console.log('multiline string _
Literal'); ^

38. ====
'' == '0' // false
0 == '' // true
0 == '0' // true
false == 'false' // false
false == '0' // true
false == undefined // false
false == null // false
null == undefined // true
' trn ' == 0 // true

39. Use === and !== insteadUse === and !== instead
'' === '0' // false
0 === '' // false
0 === '0' // false
false === 'false' // false
false === '0' // false
false === undefined // false
false === null // false
null === undefined // false
' trn ' === 0 // false

40. undefined valuesundefined values
value == null

41. Use === and !== insteadUse === and !== instead
value == null
value === undefined

42. Only floating point numbersOnly floating point numbers
0.3 - 0.1 !== 0.2

43. typeoftypeof
typeof 0.2 // 'number'
typeof {} // 'object'
typeof [] // 'object'
typeof null // 'object'
typeof NaN // 'number'

44. Function ScopeFunction Scope
function checkScope() {
{
var foo = 42;
}
// foo is still visible!
}

45. Use the Power of Good FeaturesUse the Power of Good Features

46. Weak TypingWeak Typing
Variables are containers that could store everything

47. Objects as Hash TablesObjects as Hash Tables
function Person(name) {
this._name = name;
this.getName = function() {
return this._name;
};
}
var person = new Person("John");
person.age = 27;
person["city"] = "London"

48. Objects Literals, eval() and JSONObjects Literals, eval() and JSON
var myCar = {
color: "yellow",
wheels: 4,
engine: {
cylinders: 4,
size: 2.0
}
};

49. First Value FunctionsFirst Value Functions
var 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, '-');

50. ClosuresClosures
function add(value1) {
return function doAdd(value2) {
return value1 + value2;
};
}
var increment = add(1);
var foo = increment(2);
// foo equals 3

51. PrototypesPrototypes
var Point = function(x) {
this.x = x;
return this;
};
Point.prototype = {
x: 0,
draw: function() { … }
};
p1 = new Point(10);
p2 = new Point(15);

52. this as function contextthis as function context
function bar() {
alert(this);
}
bar(); // global
var foo = {
baz: function() {
alert(this);
}
}
foo.baz(); // foo

53. Resources
JavaScript – The Good Parts
Douglas Crockford
JavaScript Patterns
Stoyan Stefanov

54. Questions