WDB005.1 - JavaScript for Java Developers (Lecture 1)

JavaScript for Java Developers

Trainer: Igor KhotinContacts: [email protected]

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