Thanks to visit codestin.com
Credit goes to www.slideshare.net

JavaScript for C# Developers
By Sarvesh Kushwaha
What JavaScript Is ? But its not C#
• Strongly Typed and Compiled
• Classical Inheritance
• Classes
• Constructors
• Methods
• Loosely Typed and Dynamic
• Prototypal
• Functions
• Functions
• Functions
C# JavaScript
JavaScript Types
JavaScript has basic types :
 Value Types
 Boolean
 String
 Number
 Reference Types
 Object
 Delegate type
 Function
 Special type
 undefined
 null
var z = y // undefined
var x = null // null
var x = typeof 1 // number
var z = typeof 1.0 // number
var y = typeof true // Boolean
Var c = type of “I m sick of this hello world” //
String
var x = new Object(); // object
var z = new Array(); //object
var f = function(arg1, arg2) {};
// f(1,2); its like func<> in C#.
JavaScript Types Contd..
• Type Coalescing
• Type Detection
“Hi ” + “All” // Hi All (string)
“Hi ” + 1 // Hi 1 (string)
1 + “2025” // 12025 (number)
var x = 1;
var typeName = type of x ; // number
All About JavaScript Functions
• Functions is just an object which has properties and member functions
• Functions can store as variable like anonymous function in C#
function SayHello(s) { alert(“Hello”);}
var a = SayHello.length; // 1 parameter
var b = SayHello.toString(); // return whole function as string
var a = function(s) {alert (“Hello”);}
a(1); //call like a function
a.length; //1
All About JavaScript Functions
• Functions parameters do not matters
• No Overloading
function test(a,b,c)
{ alert(a);
alert(b); alert(c);
}
test(1); // b , c will simply undefined
function foo(a)
{ alert(“Hello”); }
function foo(b,c)
{ alert(“Bye”); }
foo(1); // Bye  huh ?
All About JavaScript Functions
• Arguments object , Remember params in C# ?
function foo(a,b,c)
{
alert(arugments.length);
}
foo (1); // 1
// pass many parameters and access their values
function foo()
{
for(var i = 0;i < arguments.length;i++ )
{
alert(arguments[i]);
}
}
foo(1,2,3);
All About JavaScript Functions
• Function always return a value
• ‘this’ tells the owner of the function
• Supports Closure
function foo(a,b,c){ } // will return undefined
var a = foo() // type of ‘undefined’
function foo(a,b,c){ return; } // will return undefined
function foo(a,b,c){ return “”; } // will return s
var anyobj = { name : “Sarvesh”,
func : function(){ console.log(this.name); }}
anyobj.func() // “Sarvesh”
var x= 1;
function anyfunction() { var y = x; }
//references outside of function remains regardless of lifetime
JavaScript Scope
• Functions creates scope
var a = 1; // Global Scope , Added to window object
function abc()
{
var b = a; //works because of closure , and b is limit to
this function only
}
var c = b; // that will not work
JavaScript Namespacing
• Create a namespace
//Don’t have namespace we can mimic them by
creating a object
// Import namespaces or create a new one
var MyNamespace = MyNamespace || {};
MyNamespace.CurrentDate = function() {
return new Date();
}
JavaScript as Object Oriented language
• Classes : No such thing available in JavaScript , but you can mimic it.
function Employee(name ,department)
{
// public properties
this.name = name;
this.department = department;
//member function
this.creditSalary = function(amount){};
// private properties
var annualPackage = 10000;
}
var emp = new Employee(“Sarvesh”,”Development”);
var getDep = emp.department;
emp.creditSalary(1000);
JavaScript as Object Oriented language
• Read & Write , Read only and Write only properties :
function Employee(name)
{
var _name = name;
Object.defineProperty(this,”name”, {
get : function() { return _name;},
set: function(value) {_name = value;} //don’t include set to make
it read only
});
}
var emp = new Employee(“Sarvesh”);
var name = emp.name;
JavaScript as Object Oriented language
• Static Members
function Employee(name ,department)
{
// public properties
this.name = name;
this.department = department;
}
Employee.Married = “Single”;
var emp = new Employee(“Sarvesh”,”Development”);
var getMarriedStatus = emp.Married; //will not work
getMarriedStatus = Employee.Married; //work
JavaScript as Prototype language
• Why its called prototype language ? Because every object you create in
JavaScript has a prototype object.
• All instance of object shares the prototype members.
• Prototype can be used to add extension methods
function Employee(name ,department)
{// public properties
this.name = name;
this.department = department;
}
Employee.prototype.Married = “Single”;
var emp = new Employee(“Sarvesh”,”Development”);
var getMarriedStatus = emp.Married; //now it will work
Array.prototype.detectLength = function() {return this.length;};
Var a = [“One”,”Two”];
var getLength = a.DetectLength();
Reflection in JavaScript
• Like C# , JavaScript allows us to enumerate members
var Emp= {
name : “Sarvesh”,
Companyname : “Microsoft”,
sendThanks : function() {}
};
for(var property in Emp ) //Object reflection
{
alert(property); // name
alert(Emp[property]); // value
}
//Detect properties
var a = new Employee();
var has = a.hasOwnProperty(“name”); //will return Bool value
var isEnum = a.propertyIsEnumerable(“name”);
Architecting JavaScript files
• Isolates scripts with namespaces
<html>
<script src=“One.js”></script>
<script src=“two.js”></script>
</html>
(function(ns){
ns.customer = function(){
this.name = “”;
};
}(window.mynamespace = window.mynamespace || {} ));
(function(ns){
ns.Emp = function(){
this.name = “”;
};
}(window.mynamespace = window.mynamespace || {} ));
Things which are important to know in
Javascript
• Strict Mode (Use of undefined variable, No Duplicate property name, Cant assign
value to read only property)
• Foreach in C# is diff from JavaScript For-In
• Use JS lint in Visual Studio for Compilation Check
“use strict”;
var a = “hiii”; // will work
y = “hii”; // it will not work
var x = {Salary : “” , Salary : “”} // exception
x.Length = 5; //exception
var a = [“A” , “B” , “C”];
for(var i in a)
{
console.log(i); // 0,1,2 will give index
console.log(a[i]); } // A, B, C
Sarvesh Kushwaha | | | | | |

JavaScript For CSharp Developer

  • 1.
    JavaScript for C#Developers By Sarvesh Kushwaha
  • 2.
    What JavaScript Is? But its not C# • Strongly Typed and Compiled • Classical Inheritance • Classes • Constructors • Methods • Loosely Typed and Dynamic • Prototypal • Functions • Functions • Functions C# JavaScript
  • 3.
    JavaScript Types JavaScript hasbasic types :  Value Types  Boolean  String  Number  Reference Types  Object  Delegate type  Function  Special type  undefined  null var z = y // undefined var x = null // null var x = typeof 1 // number var z = typeof 1.0 // number var y = typeof true // Boolean Var c = type of “I m sick of this hello world” // String var x = new Object(); // object var z = new Array(); //object var f = function(arg1, arg2) {}; // f(1,2); its like func<> in C#.
  • 4.
    JavaScript Types Contd.. •Type Coalescing • Type Detection “Hi ” + “All” // Hi All (string) “Hi ” + 1 // Hi 1 (string) 1 + “2025” // 12025 (number) var x = 1; var typeName = type of x ; // number
  • 5.
    All About JavaScriptFunctions • Functions is just an object which has properties and member functions • Functions can store as variable like anonymous function in C# function SayHello(s) { alert(“Hello”);} var a = SayHello.length; // 1 parameter var b = SayHello.toString(); // return whole function as string var a = function(s) {alert (“Hello”);} a(1); //call like a function a.length; //1
  • 6.
    All About JavaScriptFunctions • Functions parameters do not matters • No Overloading function test(a,b,c) { alert(a); alert(b); alert(c); } test(1); // b , c will simply undefined function foo(a) { alert(“Hello”); } function foo(b,c) { alert(“Bye”); } foo(1); // Bye  huh ?
  • 7.
    All About JavaScriptFunctions • Arguments object , Remember params in C# ? function foo(a,b,c) { alert(arugments.length); } foo (1); // 1 // pass many parameters and access their values function foo() { for(var i = 0;i < arguments.length;i++ ) { alert(arguments[i]); } } foo(1,2,3);
  • 8.
    All About JavaScriptFunctions • Function always return a value • ‘this’ tells the owner of the function • Supports Closure function foo(a,b,c){ } // will return undefined var a = foo() // type of ‘undefined’ function foo(a,b,c){ return; } // will return undefined function foo(a,b,c){ return “”; } // will return s var anyobj = { name : “Sarvesh”, func : function(){ console.log(this.name); }} anyobj.func() // “Sarvesh” var x= 1; function anyfunction() { var y = x; } //references outside of function remains regardless of lifetime
  • 9.
    JavaScript Scope • Functionscreates scope var a = 1; // Global Scope , Added to window object function abc() { var b = a; //works because of closure , and b is limit to this function only } var c = b; // that will not work
  • 10.
    JavaScript Namespacing • Createa namespace //Don’t have namespace we can mimic them by creating a object // Import namespaces or create a new one var MyNamespace = MyNamespace || {}; MyNamespace.CurrentDate = function() { return new Date(); }
  • 11.
    JavaScript as ObjectOriented language • Classes : No such thing available in JavaScript , but you can mimic it. function Employee(name ,department) { // public properties this.name = name; this.department = department; //member function this.creditSalary = function(amount){}; // private properties var annualPackage = 10000; } var emp = new Employee(“Sarvesh”,”Development”); var getDep = emp.department; emp.creditSalary(1000);
  • 12.
    JavaScript as ObjectOriented language • Read & Write , Read only and Write only properties : function Employee(name) { var _name = name; Object.defineProperty(this,”name”, { get : function() { return _name;}, set: function(value) {_name = value;} //don’t include set to make it read only }); } var emp = new Employee(“Sarvesh”); var name = emp.name;
  • 13.
    JavaScript as ObjectOriented language • Static Members function Employee(name ,department) { // public properties this.name = name; this.department = department; } Employee.Married = “Single”; var emp = new Employee(“Sarvesh”,”Development”); var getMarriedStatus = emp.Married; //will not work getMarriedStatus = Employee.Married; //work
  • 14.
    JavaScript as Prototypelanguage • Why its called prototype language ? Because every object you create in JavaScript has a prototype object. • All instance of object shares the prototype members. • Prototype can be used to add extension methods function Employee(name ,department) {// public properties this.name = name; this.department = department; } Employee.prototype.Married = “Single”; var emp = new Employee(“Sarvesh”,”Development”); var getMarriedStatus = emp.Married; //now it will work Array.prototype.detectLength = function() {return this.length;}; Var a = [“One”,”Two”]; var getLength = a.DetectLength();
  • 15.
    Reflection in JavaScript •Like C# , JavaScript allows us to enumerate members var Emp= { name : “Sarvesh”, Companyname : “Microsoft”, sendThanks : function() {} }; for(var property in Emp ) //Object reflection { alert(property); // name alert(Emp[property]); // value } //Detect properties var a = new Employee(); var has = a.hasOwnProperty(“name”); //will return Bool value var isEnum = a.propertyIsEnumerable(“name”);
  • 16.
    Architecting JavaScript files •Isolates scripts with namespaces <html> <script src=“One.js”></script> <script src=“two.js”></script> </html> (function(ns){ ns.customer = function(){ this.name = “”; }; }(window.mynamespace = window.mynamespace || {} )); (function(ns){ ns.Emp = function(){ this.name = “”; }; }(window.mynamespace = window.mynamespace || {} ));
  • 17.
    Things which areimportant to know in Javascript • Strict Mode (Use of undefined variable, No Duplicate property name, Cant assign value to read only property) • Foreach in C# is diff from JavaScript For-In • Use JS lint in Visual Studio for Compilation Check “use strict”; var a = “hiii”; // will work y = “hii”; // it will not work var x = {Salary : “” , Salary : “”} // exception x.Length = 5; //exception var a = [“A” , “B” , “C”]; for(var i in a) { console.log(i); // 0,1,2 will give index console.log(a[i]); } // A, B, C
  • 18.