Post on 03-Jul-2015
description
transcript
1990 – World Wide Web1990 – World Wide Web
1993 – NCSA Mosaic1993 – NCSA Mosaic
1994 - Netscape Navigator1994 - Netscape Navigator
1995 – Sun Java1995 – Sun Java
JavaScript Origins – LiveScriptJavaScript Origins – LiveScript
Interpreted scripting languageSimple enough for beginnersDialect of SchemeSelf-inspired prototype modelHyperCard event modelJava syntax
Brendan Eich
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
Netscape – Sun dealNetscape – Sun deal
&
Java Applets for appsJava Applets for apps
&
Simple script for web designersSimple script for web designers
&
Script?
1995 - JavaScript Released1995 - JavaScript Released
&
1995 - JavaScript Released1995 - JavaScript Released
&
Internet ExplorerInternet Explorer
2005 - AJAX2005 - AJAX
Today – The Most Popular Client PlatformToday – The Most Popular Client Platform
In Fact – The Only Option on Web ClientIn Fact – The Only Option on Web Client
New fast engines – Google V8New fast engines – Google V8
JavaScript “strict mode”JavaScript “strict mode”
Mozilla RhinoMozilla Rhino
JavaScript engine shipped with JRE (version 6 and higher)
NashornNashorn
Much faster JavaScript engine in JRE 8
Server Apps with Node.jsServer Apps with Node.js
JavaScript server platformbased on Google V8 engine
Desktop Apps with Node-WebkitDesktop Apps with Node-Webkit
How Developers Learn JavaScriptHow Developers Learn JavaScript
Hmm... JavaScript...Looks familiar...Let the coding begin!!!
It will make you think...It will make you think...
After a little while...After a little while...
I hate JavaScript!!!
What I really mean...What I really mean...
I don't understand the languageIt has stupid featuresThe DOM model is EVIL
Java & JavaScriptJava & JavaScript
JavaScript != Java
Java & JavaScript – What is SimilarJava & JavaScript – What is Similar
C-like syntaxSandboxedJava keywords are reserved in jsJS follows Java naming conventions
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!
JavaScriptJavaScriptDynamic TypingPrototype-basedDynamic ObjectsFirst Class FunctionsClosuresFunction ScopeGlobal Variables
Know and Avoid Bad FeaturesKnow and Avoid Bad Features
Don't Use DOM DirectlyDon't Use DOM Directly
JQueryPrototype...
Global ScopeGlobal Scope
Window object = contextAvoid global variables
Automatic SemicolonsAutomatic Semicolons
return { status: true}
{ status: true }
return{ status: true}
undefined
Automatic SemicolonsAutomatic Semicolons
return { status: true}
{ status: true }
return;{ status: true}
undefined
What is the difference?What is the difference?
console.log('multiline string \Literal');
console.log('multiline string \ Literal');
You can't see itYou can't see it
console.log('multiline string \Literal');
console.log('multiline string \_ Literal'); ^
===='' == '0' // false0 == '' // true0 == '0' // true
false == 'false' // falsefalse == '0' // true
false == undefined // falsefalse == null // falsenull == undefined // true
' \t\r\n ' == 0 // true
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
undefined valuesundefined values
value == null
Use === and !== insteadUse === and !== instead
value == nullvalue === undefined
Only floating point numbersOnly floating point numbers
0.3 - 0.1 !== 0.2
typeoftypeof
typeof 0.2 // 'number'typeof {} // 'object'typeof [] // 'object'typeof null // 'object' typeof NaN // 'number'
Function ScopeFunction Scope
function checkScope() { { var foo = 42; } // foo is still visible!}
Use the Power of Good FeaturesUse the Power of Good Features
Weak TypingWeak TypingVariables are containers that could store everything
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"
Objects Literals, eval() and JSONObjects Literals, eval() and JSON
var myCar = { color: "yellow", wheels: 4, engine: { cylinders: 4, size: 2.0 }};
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, '-');
ClosuresClosures
function add(value1) { return function doAdd(value2) { return value1 + value2; };}
var increment = add(1);var foo = increment(2);// foo equals 3
PrototypesPrototypesvar Point = function(x) { this.x = x; return this;};
Point.prototype = { x: 0, draw: function() { … }};
p1 = new Point(10);p2 = new Point(15);
this as function contextthis as function contextfunction bar() { alert(this);}bar(); // global
var foo = { baz: function() { alert(this); }}foo.baz(); // foo
ResourcesJavaScript – The Good PartsDouglas Crockford
JavaScript PatternsStoyan Stefanov
Questions