Tuesday, February 19, 2013

Javascript Basics Tutorial Part 8: Delegate Function

Delegate Function: A method declaration passed as a argument value in funtion.

Chapter 8
Output

Javascript Basics Tutorial Part 7: Module Design Pattern

Module Design Pattern: View code to understand the pattern.
Chapter 7:


Output
 

Javascript Basics Tutorial Part 6 : Nested Function

Nested Function---> Outer Inner function.

Semantics
function Outer(n)
{
      function Inner()
      {
          do something with (n);
          return n;
      }
      return Inner// Call Inner function;
}

Outer(10); //VALID  CALL
Inner(); //INVALID CALL.

Chapter 6:



























Output:



 

Javascript Basics Tutprial Part 5: Self Calling Or Immediate function.

Lets look at syntax representation of Self calling or Immediate function call.

Method 1
(
        function ()
       {
             something;
       }
)
( ) ;//This is self fn call

Method 2

(
      function ()
     {
          something;
      }

      ( )
) ;

Method 3
(
function  Anything()
{
something;
}

( )
) ;

The only difference is ( ) is inside or outside in the example above.
Chapter 5



Output

 

Monday, February 18, 2013

Javascript Basics Tutorial : Part 4 Var obj={};

Part 4 : var obj={};
Remember this semantics var X= {};

This chapter we will discuss how we can defined multiple methods and variable in OBJECT. The sample code describes the methods scope within OBJECTS and its declaration and semantics.
Understand diff between semantics and Syntax.

Chapter 4
Key notes here direct call to f1(), f2() and f() are INVALID. This is concepts of data encapsulation. Its implementations are hidden to outer world. Like we know how to drive car without knowing how it is internally deviced and operated.

Output


 

Javascript Basics Tutorial Part 3: Anonymous Methods

Anonymous Method Like C#.
Important Key notes:
  1. All Methods are funtions but funtions are not method.
  2. Methods can not be called before it is being defined. Unlike FUNCTIONS.
  3. Methods is represented as variable and function is assigned to it.
  4. Methods is variable and any var declaration must ends with semicolon.
  5. Methods can be declared as Anonymous with no name and can be declared with Named Expression.
var obj= function(){somthing;} ;

Chapter 3:

 Output
 

Javascript Basics Tutorial Part 2: Simple Function.

:In part 2 we are going to look into details of simple function declaration and its defination. We also look into function scope. Refer Part 1 for Objects and Array.

Function Scoping: Function can be called before it is defined. Look at below example.

Function : By default every function is like default constructor with inbuilt arguments.
We can also put debugger; to put a breakpoint and debug to step-in, step-out, step-over in vs 2010.

In short we can defined function with NO Input Argument but we can pass multiple input parameter values of any type while calling a function.
 
f2(17, 0.1, "Ninja", [], {});

function f2()
{
//Fn Responsibilty & Operations.
}
Interesting facts: Inside a function we can fetch the inputs values to the function through a array called arguments[].Internally it is stored in arguments[] array placeholder where we can reference and use the input values for the operations.




 Output

 

Javascript Basic Tutorial Part 1:Objects & Array

Here is the quick series of javascript begineer kit.
To make learning easy, below are the code demos with screenshot.
So lets get started

Objects & Array

All I have done is taken one default.aspx with all javascript references and one div tag to display results. We also have JQuery online reference just to have ready() function and few Jquery selector to create showresults() display panel.


Common Utility.JS

In order to simplify this kits, I have replaced alerts with ShowResults code snippet. There is a global array and global Method to display outputs. I'll be using ShowResults() Method to display output for each javascript demo.




Chapter 1. Objects & Array
  1. var obj={} represents objects
  2. var arr=[] represents array
The skeleton to define object are as given below. There are two ways to do it.
var dog={};
dog.breed='abc';
dog.bark= function(){
//some operations;
}

This defination involves comma separated property and method. The important note here is dog object is notated as a var defined as class with property and method. Always remember closure always ends with semicolon as it is assigned to var . Like
var animal= { something;};


var dog ={
breed:'abc', bark=function(){
}

}
};


Output