• Like
A Deeper look into Javascript Basics
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

A Deeper look into Javascript Basics

  • 372 views
Published

There are several JavaScript libraries available in the world of web programming. And, as the usage and complexity is increasing day by day, sometimes it becomes very difficult and confusing to …

There are several JavaScript libraries available in the world of web programming. And, as the usage and complexity is increasing day by day, sometimes it becomes very difficult and confusing to understand and create modules using those libraries, especially for those having strong background of Object Oriented Languages.

So this one hour session will make an effort to go into the very basics of JavaScript and put a base for writing modular JavaScript code.

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
372
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
16
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • Every developer starts his journey with C, and in most of the cases till he reaches upto web development he gains sufficient knowledge in C, C++, C# or may be Java at least. And here starts the problem. When it comes to javascript most of us usually ignore the basics of javascript assuming its the same, except few array declaration, weak typing etc. So this seminar is not intended to touch the basic declaration, initialization concepts but something additional to that.

Transcript

  • 1. A deeper look into Presentation By : Ashutosh Mahto Mindfire Solutions Javascript Basics
  • 2. “The world's most misunderstood programming language” - Douglas Crockford A Deeper Look Into Javascript Basics
  • 3. Agenda to Discuss Hoisting in javascript Scopes In javascript Objects Functions Closures Prototype Drawing some basic practices A Deeper Look Into Javascript Basics
  • 4. Hoisting in Javascript A Deeper Look Into Javascript Basics Every declaration, variable declaration or function declaration is hoisted to the top of its declaration context. /* Hoisiting */ var name = "ramesh"; function showName() { if (!name) { var name = "Suresh"; } console.log(name); } showName(); // output - Suresh
  • 5. Defining Scopes in Javascript - Everything defined without var is global - Every global variable or object can be accessed through window.<variablename> - Unlike C, Javascript doesn't have Block Level Scope - Javascript has Function Level Scope A Deeper Look Into Javascript Basics
  • 6. Defining Scopes in Javascript A Deeper Look Into Javascript Basics #include <stdio.h> int main() { int x = 1; printf("%d, ", x); // 1 if (1) { int x = 2; printf("%d, ", x); // 2 } printf("%dn", x); // 1 } var x = 1; console.log(x); // 1 if (true) { var x = 2; console.log(x); // 2 } console.log(x); ??? Output – 2, which should be 1 as in C Scope in C Scope in Javascript
  • 7. Object In Javascript - Everything except Number, String, Boolean, null and undefined are objects. - Can be created using object literals or through Object constructor. - Objects are usually key value pairs. - Objects can be used as Associative Arrays, but are not actually any type of array. - Objects can link to another objects through - var newObject = Object(oldObject); This will create a new object and keep a link to the Old Object. If any property is not available in newObject it will be looked into oldObject A Deeper Look Into Javascript Basics
  • 8. Functions In Javascript - Executable piece of code, in any programming language. - In javascript, functions are INVOKABLE objects. - Like objects functions can carry Properties & Methods, can be copied, deleted and augmented - Functions can be passed as parameter to other functions and can be returned also - Functions are First Class Citizens in javascript. - Every function returns a value, if not, returns undefined. A Deeper Look Into Javascript Basics
  • 9. Functions in Javascript - Function declaration function sayHello() { console.log('Hello!'); } - Function expression var sayHello = function() { console.log('Hello!'); } - Anonymous Functions - Self executing functions (function() { console.log('Hello!'); })(); A Deeper Look Into Javascript Basics
  • 10. Closures in Javascript Local variables for a function are kept alive after the function has returned A closure is a stack-frame which is not deallocated when the function returns (as if a 'stack-frame' were malloc'ed instead of being on the stack!) A Deeper Look Into Javascript Basics var greet = function(time) { var good = "Good"; return function(name){ console.log(good+ " "+ time+ " "+ name); } } var sayGoodMorning = greet("Morning"); sayGoodMorning("Suresh"); // Good Morning Suresh
  • 11. Prototype in Javascript Prototype is the base of Object Oriented Programming in javascript Every function contains a prototype object that can be chained through its constructor. A Deeper Look Into Javascript Basics var Person= function(name) { this.name = name; } Person.prototype.getName = function() { return this.name; } var student = new Person("Satish");
  • 12. Drawing some best practices Start using JSLint Start using “strict” Always use var while declaring variables to avoid unnecessary globals Declare all the variables at the top of its function scope Maximize the use of function expressions Always use ; as delimiter Never think of Objects as a kind of array, and never declare an object as an array. A Deeper Look Into Javascript Basics
  • 13. Any Question ??? A Deeper Look Into Javascript Basics
  • 14. References and Recommendations  Books − JavascriptThe Good Parts, Douglas Crockford − Javascript:The Definitive Guide, David Flanagan − Professional Javascript For Developers, Nicholas Zakas  Blogs  Articles  Stack Overflow A Deeper Look Into Javascript Basics
  • 15. ThankYou !!! A Deeper Look Into Javascript Basics