SlideShare a Scribd company logo
JavaScript forC# Devs
Salvatore Di Fazio – MVP SharePoint Server
http://salvatoredifaziosharepoint.blogspot.co.uk
Twitter: @Salvodif
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
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 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
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
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
 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 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 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
}());
 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

More Related Content

What's hot (20)

PDF
jQuery Essentials
Bedis ElAchèche
 
KEY
jQuery Performance Tips and Tricks (2011)
Addy Osmani
 
PDF
Learn about Eclipse e4 from Lars Vogel at SF-JUG
Marakana Inc.
 
PDF
Handlebars.js
Ivano Malavolta
 
PDF
The Django Book, Chapter 16: django.contrib
Tzu-ping Chung
 
PPT
Js ppt
Rakhi Thota
 
PPTX
FuncUnit
Brian Moschel
 
PPT
Learn javascript easy steps
prince Loffar
 
PDF
Associations & JavaScript
Joost Elfering
 
PPTX
Jquery introduction
musrath mohammad
 
PDF
JavaScript - Chapter 3 - Introduction
WebStackAcademy
 
KEY
User Interface Development with jQuery
colinbdclark
 
KEY
Nothing Hard Baked: Designing the Inclusive Web
colinbdclark
 
KEY
The jQuery Library
LearnNowOnline
 
PPTX
Efficient use of jQuery selector
chandrashekher786
 
PDF
那些年,我用 Django Admin 接的案子
flywindy
 
PPTX
Getting started with jQuery
Gill Cleeren
 
PPT
Intro to jQuery
Alan Hecht
 
PPTX
JavaScript Advanced - Useful methods to power up your code
Laurence Svekis ✔
 
jQuery Essentials
Bedis ElAchèche
 
jQuery Performance Tips and Tricks (2011)
Addy Osmani
 
Learn about Eclipse e4 from Lars Vogel at SF-JUG
Marakana Inc.
 
Handlebars.js
Ivano Malavolta
 
The Django Book, Chapter 16: django.contrib
Tzu-ping Chung
 
Js ppt
Rakhi Thota
 
FuncUnit
Brian Moschel
 
Learn javascript easy steps
prince Loffar
 
Associations & JavaScript
Joost Elfering
 
Jquery introduction
musrath mohammad
 
JavaScript - Chapter 3 - Introduction
WebStackAcademy
 
User Interface Development with jQuery
colinbdclark
 
Nothing Hard Baked: Designing the Inclusive Web
colinbdclark
 
The jQuery Library
LearnNowOnline
 
Efficient use of jQuery selector
chandrashekher786
 
那些年,我用 Django Admin 接的案子
flywindy
 
Getting started with jQuery
Gill Cleeren
 
Intro to jQuery
Alan Hecht
 
JavaScript Advanced - Useful methods to power up your code
Laurence Svekis ✔
 

Similar to Javascript for the c# developer (20)

PPTX
Javascript fundamentals and not
Salvatore Fazio
 
PDF
Handlebars and Require.js
Ivano Malavolta
 
ODP
Jquery Plugin
Ravi Mone
 
PDF
Handlebars & Require JS
Ivano Malavolta
 
PDF
Design patterns
Jason Austin
 
KEY
JavaScript Coding with Class
davidwalsh83
 
PDF
WebNet Conference 2012 - Designing complex applications using html5 and knock...
Fabio Franzini
 
PPT
Java Basics for selenium
apoorvams
 
PPTX
JavaScript_III.pptx
rashmiisrani1
 
PPTX
Built to last javascript for enterprise
Marjan Nikolovski
 
PDF
Dependency Injection for PHP
mtoppa
 
PPT
Jump Start To Ooad And Design Patterns
Lalit Kale
 
PPS
Jump start to OOP, OOAD, and Design Pattern
Nishith Shukla
 
ODP
Bring the fun back to java
ciklum_ods
 
PPT
Intro Java Rev010
Rich Helton
 
ODP
(An Extended) Beginners Guide to Object Orientation in PHP
Rick Ogden
 
PPTX
How to crack java script certification
KadharBashaJ
 
PPTX
Javascript Common Design Patterns
Pham Huy Tung
 
PDF
Angular Intermediate
LinkMe Srl
 
PPTX
Django apps and ORM Beyond the basics [Meetup hosted by Prodeers.com]
Udit Gangwani
 
Javascript fundamentals and not
Salvatore Fazio
 
Handlebars and Require.js
Ivano Malavolta
 
Jquery Plugin
Ravi Mone
 
Handlebars & Require JS
Ivano Malavolta
 
Design patterns
Jason Austin
 
JavaScript Coding with Class
davidwalsh83
 
WebNet Conference 2012 - Designing complex applications using html5 and knock...
Fabio Franzini
 
Java Basics for selenium
apoorvams
 
JavaScript_III.pptx
rashmiisrani1
 
Built to last javascript for enterprise
Marjan Nikolovski
 
Dependency Injection for PHP
mtoppa
 
Jump Start To Ooad And Design Patterns
Lalit Kale
 
Jump start to OOP, OOAD, and Design Pattern
Nishith Shukla
 
Bring the fun back to java
ciklum_ods
 
Intro Java Rev010
Rich Helton
 
(An Extended) Beginners Guide to Object Orientation in PHP
Rick Ogden
 
How to crack java script certification
KadharBashaJ
 
Javascript Common Design Patterns
Pham Huy Tung
 
Angular Intermediate
LinkMe Srl
 
Django apps and ORM Beyond the basics [Meetup hosted by Prodeers.com]
Udit Gangwani
 
Ad

Recently uploaded (20)

PDF
"AI Transformation: Directions and Challenges", Pavlo Shaternik
Fwdays
 
PDF
LOOPS in C Programming Language - Technology
RishabhDwivedi43
 
PPTX
Webinar: Introduction to LF Energy EVerest
DanBrown980551
 
PDF
Building Real-Time Digital Twins with IBM Maximo & ArcGIS Indoors
Safe Software
 
PPTX
Mastering ODC + Okta Configuration - Chennai OSUG
HathiMaryA
 
PDF
The 2025 InfraRed Report - Redpoint Ventures
Razin Mustafiz
 
PDF
Peak of Data & AI Encore AI-Enhanced Workflows for the Real World
Safe Software
 
PDF
Reverse Engineering of Security Products: Developing an Advanced Microsoft De...
nwbxhhcyjv
 
PPTX
The Project Compass - GDG on Campus MSIT
dscmsitkol
 
DOCX
Python coding for beginners !! Start now!#
Rajni Bhardwaj Grover
 
PDF
Achieving Consistent and Reliable AI Code Generation - Medusa AI
medusaaico
 
PDF
Bitcoin for Millennials podcast with Bram, Power Laws of Bitcoin
Stephen Perrenod
 
PDF
[Newgen] NewgenONE Marvin Brochure 1.pdf
darshakparmar
 
PDF
POV_ Why Enterprises Need to Find Value in ZERO.pdf
darshakparmar
 
PDF
Book industry state of the nation 2025 - Tech Forum 2025
BookNet Canada
 
PPTX
AI Penetration Testing Essentials: A Cybersecurity Guide for 2025
defencerabbit Team
 
PDF
“NPU IP Hardware Shaped Through Software and Use-case Analysis,” a Presentati...
Edge AI and Vision Alliance
 
PDF
Newgen Beyond Frankenstein_Build vs Buy_Digital_version.pdf
darshakparmar
 
PPTX
Future Tech Innovations 2025 – A TechLists Insight
TechLists
 
PDF
Smart Trailers 2025 Update with History and Overview
Paul Menig
 
"AI Transformation: Directions and Challenges", Pavlo Shaternik
Fwdays
 
LOOPS in C Programming Language - Technology
RishabhDwivedi43
 
Webinar: Introduction to LF Energy EVerest
DanBrown980551
 
Building Real-Time Digital Twins with IBM Maximo & ArcGIS Indoors
Safe Software
 
Mastering ODC + Okta Configuration - Chennai OSUG
HathiMaryA
 
The 2025 InfraRed Report - Redpoint Ventures
Razin Mustafiz
 
Peak of Data & AI Encore AI-Enhanced Workflows for the Real World
Safe Software
 
Reverse Engineering of Security Products: Developing an Advanced Microsoft De...
nwbxhhcyjv
 
The Project Compass - GDG on Campus MSIT
dscmsitkol
 
Python coding for beginners !! Start now!#
Rajni Bhardwaj Grover
 
Achieving Consistent and Reliable AI Code Generation - Medusa AI
medusaaico
 
Bitcoin for Millennials podcast with Bram, Power Laws of Bitcoin
Stephen Perrenod
 
[Newgen] NewgenONE Marvin Brochure 1.pdf
darshakparmar
 
POV_ Why Enterprises Need to Find Value in ZERO.pdf
darshakparmar
 
Book industry state of the nation 2025 - Tech Forum 2025
BookNet Canada
 
AI Penetration Testing Essentials: A Cybersecurity Guide for 2025
defencerabbit Team
 
“NPU IP Hardware Shaped Through Software and Use-case Analysis,” a Presentati...
Edge AI and Vision Alliance
 
Newgen Beyond Frankenstein_Build vs Buy_Digital_version.pdf
darshakparmar
 
Future Tech Innovations 2025 – A TechLists Insight
TechLists
 
Smart Trailers 2025 Update with History and Overview
Paul Menig
 
Ad

Javascript for the c# developer

  • 1. JavaScript forC# Devs Salvatore Di Fazio – MVP SharePoint Server http://salvatoredifaziosharepoint.blogspot.co.uk Twitter: @Salvodif
  • 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
  • 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. 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. 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. 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 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
  • 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
  • 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 }());
  • 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

Editor's Notes

  • #14: Strict mode: http://www.nczonline.net/blog/2012/03/13/its-time-to-start-using-javascript-strict-mode/