WDB005.1 - JavaScript for Java Developers (Lecture 1)
1 like1,118 views
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.
![typeoftypeof
typeof 0.2 // 'number'
typeof {} // 'object'
typeof [] // 'object'
typeof null // 'object'
typeof NaN // 'number'](https://image.slidesharecdn.com/wdb005-javascriptforjavadevelopers-140821093731-phpapp02/85/WDB005-1-JavaScript-for-Java-Developers-Lecture-1-43-320.jpg)
![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"](https://image.slidesharecdn.com/wdb005-javascriptforjavadevelopers-140821093731-phpapp02/85/WDB005-1-JavaScript-for-Java-Developers-Lecture-1-47-320.jpg)
;
}
calculate(38, 4, '+');
calculate(47, 3, '-');](https://image.slidesharecdn.com/wdb005-javascriptforjavadevelopers-140821093731-phpapp02/85/WDB005-1-JavaScript-for-Java-Developers-Lecture-1-49-320.jpg)
WDB005.1 - JavaScript for Java Developers (Lecture 1)
- 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 &
- 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