Javascript for the c# developer

Javascript for the c# developer

• 1.
  JavaScript forC# Devs SalvatoreDi Fazio – MVP SharePoint Server http://salvatoredifaziosharepoint.blogspot.co.uk Twitter: @Salvodif
• 2.
  Why aJS session ifwe speak about SharePoint? • Sharepoint 2013 – Javascript & jQuery big booboo to watch out for: http://alturl.com/3xdvz • “so everyone likes jQuery right? Even Microsoft like it, even the SharePoint team like it. Unfortunately, 99.999% of the code you see out there using jQuery makes a big huge mistake. And that is, to load the $ variable in the global namespace…” • Web 2.0 – when a client ask for a new feature, most of the time, the comparison is one of the new social network (Facebook,Twitter, Instagram,Yammer, etc.) • Microsoft is pushing
• 3.
  Improvement fromSharePoint 2007 to SharePoint 2013 JavaScriptAPIfor Office
• 4.
  starter • JavaScript isobject based, everything is an object • Variables created using var • You should always use semicolons, and an object is a collection of name/value name: value • JavaScript is case sensitive • Always use strict mode, declared with use strict • Cannot use a variable without declaring it • Cannot define a property more than once in an object literal • Cannot use a parameter name more than once in a function • Cannot use reserved words • The value of this in a function is no longer the window object • Cannot change the members of the arguments array • Etc...
• 5.
  Functions  Start withthe keyword function  Can have a name or not  Can have parameters or not, by default exist the arguments param  The delimiters of the function are { }  A function can return a value, and that value can be itself  Cannot be overloaded!!!  Parameters not passed are setted undefined  Is possible to have a function inside a function Closure  Functions have this and it identify the current context  Every function has a property named prototype
• 6.
  Null and undefined • NULL • Primitivetypes • Represents the absence of value • Evaluates to false in Boolean expressions • UNDEFINED • Primitive type • Represents an unknown value • Returned when a non-existent object property is called • Evaluates to false in Boolean expressions
• 7.
  Avoid coercive equality operators Objects are only equal to themselves  Primitives are equal if the values match (“salvo” === “salvo”)  Two sets of equality operators ( == and ===)  never use == or != INSTEAD of === or !== 0 == '0'; //true 0 === '0'; //false false == '0'; //true false === '0'; //false
• 8.
   Global scope Comparision == OR ===  Prototype DEMO
• 9.
  Classes  We createa class in JS by a pattern:  Using function, the most common ways  Using object literals  Singleton using a function  Use it to prevent name collisions and polluting parent namespace  Use the new keyword to invoke the constructor  Use the prototype to expand it:  Using it avoid to recreated every time the method when the constructor is invoked, using the prototype avoid this effort
• 10.
   ClassDEMO
• 11.
  Closure Whenever you seethe function keyword within another function, the inner function has access to variables of the outer function http://stackoverflow.com/questions/111102/how-do-javascript- closures-work
• 12.
   ClosureDEMO
• 13.
  Module  The windowobject in browsers is a global namespace  Variables defined outside a function are in the global namespace  Variables defined without the var keyword are in the global namespace  Always create your own namespace by a pattern  The module pattern was made by Eric Miraglia ofYUI in the 2007  Use it to prevent name collisions and polluting parent namespace  Keep everything tidy  Module Export Pattern: var MODULE = (function () { var my = {}, privateVariable = 1; function privateMethod() { // ... } my.moduleProperty = 1; my.moduleMethod = function () { // ... }; return my; }());  AnonymousClosures Pattern: (function () { // ... all vars and functions are in this scope only // still maintains access to all globals }());
• 14.
   ModuleDEMO
• 15.
  Some useful links•Strict Mode - http://msdn.microsoft.com/en-us/library/ie/br230269(v=vs.94).aspx • Strict Mode - http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/ • JavaScript info - https://developer.mozilla.org/en-US/docs/JavaScript/Reference/ • Namespace function - https://github.com/smith/namespacedotjs/blob/master/example/sandbox.js • TypeScript