This Presentation depicts JavaScript concept for Csharp developer.It helps to understand the concepts of JavaScript resembling/differentiate them with C# concepts.
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 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#.
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 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
6. 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 ?
7. 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);
8. 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
9. 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
10. 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();
}
11. 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);
12. 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;
13. 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
14. 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();
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”);
17. 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