Awesomeness of JavaScript…almostTwitter: #quintonsGithub id: quintons

‘The most misunderstood language has become the worlds most popular programming language’Douglas Crockford – JavaScript architect, yahoo

‘JavaScript like the browsers is starting to move again’Alex Russell – Software engineer, Chrome team and (ECMA) TC39 representative

Agenda

• In the beginning

• Objects, Functions

• Overview of Scope

• Overview of JS primitives and properties

• Gotchers!

• Questions…?

Agenda…for later

• Inheritance and the class’less language

• Prototypical (differential) inheritance

• Best Practices

• Modulising

• Multithreading with Webworkers

• Frameworks what they can offer

• Pollyfills, and how to use them

• Etc….

In the beginning…

…what about JavaScript?

• Java

• Self

• Scheme

• LiveScript

…what about JavaScript?

• Java

• Self

• Scheme

• LiveScript

• JavaScript

…what about JavaScript?

• Java

• Self

• Scheme

• LiveScript

• JavaScript

• ECMAScript

Current implementations (2012)

• Chrome/V8

• Firefox/SpiderMonkey

• IE10/Chakra

• Safari/SquirrelFish (Webkit browsers)

• Opera/Carakan

JS Engine Performance (2011) – running JSLint

Chrome 10 Chrome 13 Firefox 4 IE9 IE10 Opera 11 Safari 50

0.5

1

1.5

2

2.5

3

Browsers

mill

isec

onds

Datasource: http://javascript.crockford.com/performance.html

JavaScript is everywhere…

• Built into every PC

• Building Mobile apps

• Titainum,

• PhoneGap,

• Sencha Touch,

• jQuery mobile etc…

• Server side – Rhino, NodeJs, Apache Sling, etc…

• Every Browser

Proliferation of JS frameworks…Frameworks using MVC

• Backbone.js

• Spine.js

• Choco.js

• Agility.js

• Jamal.js

• PureMVC

• TrimJunction

• JavaScriptMVC

• SproutCore

• Cappuccino

• Google Web Toolkit (GWT)

• Google Closure

• Ember

• Etc…

Proliferation of JS frameworks…DOM, AJAX, CSS and Utility Frameworks

• Jquery

• Qooxdoo

• ActiveJS

• ExtJS

• Knockout

• Eyeballs

• Sammy

• Spry (Adobe)

• Midori

• MooTools

• GWT (Java)

• YUI

• Prototype

• Etc…

…What about Code?….

Objects, Functions

• Run to completion• No multithreading (almost)

• No type testing

• All objects are mutable

• Classless language – differential inheritance.

• functions and closures – data hiding/private state

Objects, Functions

• Data hiding

Objects, Functions

• Functions are first class• Can be passed as an argument

• Can be returned from a function

• Can be assigned to a variable

• Can be stored in an object or array

• arguments passed by value

• Function objects inherit from ‘Function.prototype’

Objects, Functions

• Function

• Method

• Class

• Constructor

• Module

• Object

Objects, Functions

• Function• Defined with the Function constructor

• A function declaration

• A function expression

Objects, Functions

• Function - A function declaration can be called before its

declaration.

Objects, Functions

• Function - A function declaration can be called before its

declaration.

…Why?….

Objects, Functions

• Function • hoisting of variables.

Objects, Functions

• Example of a first class function

Objects, Functions

• Functions – arguments object• Not a true array

• …for example

Objects, Functions

• Functions – arguments object• arguments only available inside a function

• If too few arguments are passed, the remaining will be

undefined

Objects, Functions

• Functions – arguments

• ES6 (Harmony) proposal

• Little sugar – ES3/5 usage

Objects, Functions

• Everything's an object

• And objects act like maps

Objects, Functions

• Every property has a unique key string associated

to that object.

• Make an instance of an object use the ‘new’

keyword

Objects, Functions

• Constructor

Operators

• Arithmetic

• Comparison

• Logical

• Bitwise

Error Catching/Throwing

• Throw Statement

this

Closures/scope and this

• I do ‘this’ and you do that…• ‘this’ keyword refers to the owner of the object that is

invoked

• ‘this’ allows a method to know what object it is

concerned with

• Without ‘this’ prototypical inheritance would not be

possible.

• I do ‘this’ and you do that…continued• function declaration/expression – ‘this’ assigned to the

global scope

• function as a method – ‘this’ assigned to the object

containing the function

• Inner function - ‘this’ does not get access to the outer

function’s ‘this’

Closures/scope and this

• I do ‘this’ and you do that…continued

Closures/scope and this

• I do ‘this’ and you do that…continued• You can change the context of what the object ‘this’

refers to.

Closures/scope and this

• Only function creates scope, no block scope {}

Closures/scope and this

• ES5 to the rescue!...

Closures/scope and this

Primitives

• Numbers

• Boolean

• String

• Undefined

• Null

Primitives

• Numbers• 1 type, 64 bit floating point (aka ‘double’)

• Associative Law does not hold true – ‘when dealing

only with addition or only with multiplication we get

the same result regardless of the order in which we do

the operations’

Primitives

• Numbers (continued)

• Max number (253) 9007199254740992

• Methods• toExplonential()

• toFixed()

• toLocalString()

• toPrecision()

• toString()

• valueOf()

Primitives

• Numbers (…and more)

• All numbers inherit from Number.prototype

• Numbers first class objects

• A number can be stored in a variable

• A number can be passed as a parameter

• A number can be returned from a function

• A number can be stored in an object

Primitives

• Math object• abs()

• acos()

• asin()

• atan()

• atab2()

• ceil()

• cos()

• exp()

• floor()

• log()

• max()

• min()

• pow()

• random()

• round()

• sin()

• sqrt()

• tan()

Primitives

• parseInt/parseFloat• Converts values into a number

• Converting string to a number stops at first non-

numerical character

• parseFloat() defaults to base 10

Primitives

Boolean

True or False

1 or 0

Primitives

• String• A sequence of 0 or more 16bit Unicode characters

• Strings are immutable

Primitives

• String (…continued)

• String literals can use single or double quotes

• Multilines – evil!

• Converting number to a string

Primitives

• String (…and more)

• Convert string to a number

• String.length

• ‘length’ property is the number of 16bit characters

in a string

• All extended (outside of UCS-2) characters are

counted as length of 2

Primitives

• String methods• charAt()

• charCodeAt()

• concat()

• indexOf()

• lastIndexOf()

• localCompare()

• match()

• replace()

• search()

• slice()

• split()

• substr()

• substring()

• toLocalLowerCase()

• toLocalUpperCase()

• toLowerCase()

• toString()

• toUpperCase()

Primitives

• String methods (…continued)

• trim() ES5

• trimLeft() ES5

• trimRight() ES5

Primitives

• String methods (…continued)

• trim() ES5

• trimLeft() ES5

• trimRight() ES5

…What about ES3?….

Primitives

• String methods (…continued)

• trim() – what about ES3?

Special Type of Object

• Array• Array inherits from ‘Object’

• Length of an array auto incremented

• No type required for each value

• Array.length• Always 1 larger than the highest index

• Looping use a for loop

• Do not use a for…in loop with Arrays

Special Type of Object

• Array• Array inherits from ‘object’

• Length of an array auto incremented

• No type required for each value

• Array.length• Always 1 larger than the highest index

• Looping use a for loop

• Do not use a for…in loop with Arrays

…Why?….

Special Type of Object

• Array (…continued)

• For in loop…

‘Array’ inherits from ‘Object’

Special Type of Object

• Array (…continued)

• Array literals

• An array literal uses []

• It can contain any number of values of any type

• Deleting elements

• Removes the element but leaves a hole

Special Type of Object

• Array (…continued)

• Deleting elements….creates a hole

• Arrays are not true arrays – inherits from ‘Object’

Special Type of Object

• Array (…continued)

• Are you an array?

Special Type of Object

• Date• …..too many methods to list! (48)

• Y2K compliant – was not initially

…Watch out!….Gotchers…

Watch out!

• Accidental collision with keywords used as properties

Watch out!

• For…in

• functions that inherit from prototype are included in

the for..in enumeration

• NaN

• Special number – Not a Number

• NaN is evil

• Use isNaN() to test for NaN

Watch out!

• NaN (…continued)

• NaN === NaN = false

• NaN !== NaN = true

• Silent Errors – automatic semicolon insertion

• Switch statement, will fall through if no break statement is

declared

Watch out!

• Immediately invocable function expression

• Infinity/-Infinity

• 1/0 === Infinity

• -1/0 === -Infinity

• Test for Infinity/-Infinity use isFinite()

Watch out!

• Relying on type coercion is not a good idea.

• Always use ‘===‘ not ‘==‘

Watch out!

• Operators and Concatenation

Until next time…Twitter: #quintonsGithub id: quintons