Brief explanation of javascript language for intermediates
Topics Covered
~ Why do we need javascript
~ javascript vs traditional language
~ functions and objects ( sample code )
~ prototypal inheritance ( sample code )
~ variable scope ( sample code )
~ closure (sample code )
~ callbacks
~ events
~ the confusion of 'this'
~ popular frameworks
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
~ Platform Independent runs in a browser
~ Light weight
~ Great community support
~ 'C' of web development
~ smooth learning curve
4. JS is no C or Java
•
Interpreted
•
Asynchronous
•
Loosely Typed
•
Uses prototypes instead of classes
5. 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.
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 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.
8. Function Invocation
•
The Method Invocation Pattern
•
The Function Invocation Pattern
•
The Constructor Invocation Pattern
•
The Apply Invocation Pattern
Code : http://dabblet.com/gist/8035060
9. 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
10. 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
11. 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.
12. 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
13. 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 )