JavaScript forC# Devs
Salvatore Di Fazio – MVP SharePoint Server
http://salvatoredifaziosharepoint.blogspot.co.uk
Twitter:...
Why aJS session
if we speak about
SharePoint?
• Sharepoint 2013 – Javascript & jQuery big booboo to watch out
for: http://...
Improvement
fromSharePoint
2007 to
SharePoint 2013
JavaScriptAPI for
Office
starter
• JavaScript is object based, everything is an object
• Variables created using var
• You should always use semico...
Functions
 Start with the keyword function
 Can have a name or not
 Can have parameters or not, by default exist the ar...
Null
and
undefined
• NULL
• Primitive types
• Represents the absence of value
• Evaluates to false in Boolean expressions
...
Avoid coercive
equality operators
 Objects are only equal to themselves
 Primitives are equal if the values match (“salv...
 Global scope
 Comparision == OR ===
 Prototype
DEMO
Classes
 We create a class in JS by a pattern:
 Using function, the most common ways
 Using object literals
 Singleton...
 ClassDEMO
Closure
Whenever you see the function keyword within another
function, the inner function has access to variables of the o...
 ClosureDEMO
Module
 The window object in browsers is a global namespace
 Variables defined outside a function are in the global name...
 ModuleDEMO
Some useful links• Strict Mode - http://msdn.microsoft.com/en-us/library/ie/br230269(v=vs.94).aspx
• Strict Mode - http://...
Upcoming SlideShare
Loading in …5
×

Javascript for the c# developer

905 views
812 views

Published on

Slides of my London suguk event on 18 July 2013

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
905
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Strict mode: http://www.nczonline.net/blog/2012/03/13/its-time-to-start-using-javascript-strict-mode/
  • Javascript for the c# developer

    1. 1. JavaScript forC# Devs Salvatore Di Fazio – MVP SharePoint Server http://salvatoredifaziosharepoint.blogspot.co.uk Twitter: @Salvodif
    2. 2. Why aJS session if we 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. 3. Improvement fromSharePoint 2007 to SharePoint 2013 JavaScriptAPI for Office
    4. 4. starter • JavaScript is object 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. 5. Functions  Start with the 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. 6. Null and undefined • NULL • Primitive types • 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. 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. 8.  Global scope  Comparision == OR ===  Prototype DEMO
    9. 9. Classes  We create a 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. 10.  ClassDEMO
    11. 11. Closure Whenever you see the 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. 12.  ClosureDEMO
    13. 13. Module  The window object 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. 14.  ModuleDEMO
    15. 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

    ×