JavaScript
By - Ankit Agrawal

please excuse any literal error
Topics in discussion
~ Why do we need javascript
~ javascript vs traditional language!
~ functions and objects
~ prototypal inheritance

~ variable scope

~ closure
~ callbacks
~ events
~ the confusion of 'this'
~ popular frameworks
Why Javascript
~ Platform Independent runs in a browser
~ Light weight
~ Great community support
~ 'C' of web development
~ smooth learning curve
JS is no C or Java
•

Interpreted

•

Asynchronous

•

Loosely Typed

•

Uses prototypes instead of classes
Objects
•

Basic Data Types in JavaScript are numbers, strings,
booleans, null, and undefined.

•

Everything else are Objects.

•

In JavaScript, arrays are objects, functions are objects,
regular expressions are objects and of course, objects are
objects.

•

An object is a mutable container of properties, where as a
property has a name and a value. A property name can
be any string, including the empty string. A property value
can be any JavaScript value except for undefined.
Prototypal Inheritance
•

In JavaScript, the inheritance is prototypebased.

•

There are no classes. An object inherits from
another object.

•

Each Object in javascript has a hidden
prototype property.

Code : http://dabblet.com/gist/8035334
Functions
•

Functions in JavaScript are objects.

•

Function objects are linked to Function.prototype

•

Every function is also created with two additional hidden
properties: the function’s context and the code that implements
the function’s behavior.

•

Functions can be stored in variables, objects and arrays.

•

Function can be passed as arguments to functions and can be
returned from functions.

•

Functions can have properties and methods.
Function Invocation
•

The Method Invocation Pattern

•

The Function Invocation Pattern

•

The Constructor Invocation Pattern

•

The Apply Invocation Pattern

Code : http://dabblet.com/gist/8035060
Variable Scope
•

JavaScript does not have block scope even
though its block syntax suggests that it does.

•

JavaScript does have function scope.

•

Due to absence of block scope, it is best to
declare all of the variables used in a function at
the top of the function body.

Code : http://dabblet.com/gist/8035530
Closure
A closure is an inner function that has access to
the outer (enclosing) function’s variables—scope
chain
The inner function has access not only to the outer
function’s variables, but also to the outer function’s
parameters. However it don't have access to the
outer function’s arguments object.
Code : http://dabblet.com/gist/8036352
Callbacks
•

Callbacks allow single-threaded operations to
execute asynchronously.

•

Provide a means of communication among
objects.

•

Callback exploit closures and could be used to
create interfaces in javascript.
Events
Events provide a mean to detect user action
Can be extended to provide a means of
communication among different objects
Key to achieve loose coupling
The curious case of 'this'
•

Calling a function with no base object reference
( The this value will also refer to the global object )

•

Calling a function bound as a property of an
object ( he this value will refer to obj )

•

Using the new operator ( The this value will refer to a
newly created object that inherits from
MyFunc.prototype )
Popular Frameworks
Backbone
Angular
Ember
Knockout
Meteor
Thank You
Code Source
https://gist.github.com/anksanu
this slide is intentionally left blank

Javascript for Intermediates

  • 1.
    JavaScript By - AnkitAgrawal please excuse any literal error
  • 2.
    Topics in discussion ~Why do we need javascript ~ javascript vs traditional language! ~ functions and objects ~ prototypal inheritance ~ variable scope ~ closure ~ callbacks ~ events ~ the confusion of 'this' ~ popular frameworks
  • 3.
    Why Javascript ~ PlatformIndependent runs in a browser ~ Light weight ~ Great community support ~ 'C' of web development ~ smooth learning curve
  • 4.
    JS is noC or Java • Interpreted • Asynchronous • Loosely Typed • Uses prototypes instead of classes
  • 5.
    Objects • Basic Data Typesin JavaScript are numbers, strings, booleans, null, and undefined. • Everything else are Objects. • In JavaScript, arrays are objects, functions are objects, regular expressions are objects and of course, objects are objects. • An object is a mutable container of properties, where as a property has a name and a value. A property name can be any string, including the empty string. A property value can be any JavaScript value except for undefined.
  • 6.
    Prototypal Inheritance • In JavaScript,the inheritance is prototypebased. • There are no classes. An object inherits from another object. • Each Object in javascript has a hidden prototype property. Code : http://dabblet.com/gist/8035334
  • 7.
    Functions • Functions in JavaScriptare objects. • Function objects are linked to Function.prototype • Every function is also created with two additional hidden properties: the function’s context and the code that implements the function’s behavior. • Functions can be stored in variables, objects and arrays. • Function can be passed as arguments to functions and can be returned from functions. • Functions can have properties and methods.
  • 8.
    Function Invocation • The MethodInvocation Pattern • The Function Invocation Pattern • The Constructor Invocation Pattern • The Apply Invocation Pattern Code : http://dabblet.com/gist/8035060
  • 9.
    Variable Scope • JavaScript doesnot have block scope even though its block syntax suggests that it does. • JavaScript does have function scope. • Due to absence of block scope, it is best to declare all of the variables used in a function at the top of the function body. Code : http://dabblet.com/gist/8035530
  • 10.
    Closure A closure isan inner function that has access to the outer (enclosing) function’s variables—scope chain The inner function has access not only to the outer function’s variables, but also to the outer function’s parameters. However it don't have access to the outer function’s arguments object. Code : http://dabblet.com/gist/8036352
  • 11.
    Callbacks • Callbacks allow single-threadedoperations to execute asynchronously. • Provide a means of communication among objects. • Callback exploit closures and could be used to create interfaces in javascript.
  • 12.
    Events Events provide amean to detect user action Can be extended to provide a means of communication among different objects Key to achieve loose coupling
  • 13.
    The curious caseof 'this' • Calling a function with no base object reference ( The this value will also refer to the global object ) • Calling a function bound as a property of an object ( he this value will refer to obj ) • Using the new operator ( The this value will refer to a newly created object that inherits from MyFunc.prototype )
  • 14.
  • 15.
  • 16.
  • 17.
    this slide isintentionally left blank