JavaScript for C# Devs

Salvatore Di Fazio – MVP SharePoint Server

http://salvatoredifaziosharepoint.blogspot.co.uk

Twitter: @Salvodif

Why a JS 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

Improvement from

SharePoint 2007 to

SharePoint 2013

JavaScript API for Office

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...

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

Nulland

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

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'; //true0 === '0'; //falsefalse == '0'; //truefalse === '0'; //false

Global scope

Comparision == OR ===

PrototypeDEMO

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

ClassDEMO

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

ClosureDEMO

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 of YUI 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;}());

Anonymous Closures Pattern:

(function () { // ... all vars and functions are in this scope only // still maintains access to all globals}());

ModuleDEMO

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