With thanks to our sponsors
Adventures of C# developer
in JavaScript world
Igor Gorelik
@rogik
Confession
I don’t like JavaScript
Cool stuff we won’t talk about
So, JavaScript…
It looks like C#
It smells like C#
But it is NOT C#
At the very beginning…
function onLogin() {
if (document.getElementById('username').text == '') {
alert("Username is manda...
jQuery comes to the rescue… Kind of…
function onLogin() {
if ($('#username').text() == '') {
alert("Username is mandatory"...
Let’s compare…
Runtime Environment
C# JavaScript
Chakra V8 SpiderMonkey
Let’s compare…
Language
C# JavaScript
Compiled Interpreted
Strongly Typed Loosely Typed
Static Typing Dynamic Typing
Class...
Type Coalescing
C# JavaScript
“test “ + “me” test me test me
“test “ + 1 test 1 test 1
100 + “25” 10025 10025
“test “ + tr...
Operators
Most of operators are identical, except ==/!=, ===/!==
“hello” == “hello”
1 == 1
1== “1”
1=== “1”
1!== “1”
1=== ...
True/False – not as you know it…
Falsy values are:
• false
• 0 (zero as a number)
• “” (empty string)
• null
• undefined
•...
Object Notation
var x = [];
x['name'] = “DDD Melbourne";
console.log(x['name']);
console.log(x.name);
Array all the things
for (var i = 0; i < a.length; i++) {
console.log(a[i]);
}
var a = [1, 2, 3]; a.length = 3
a[5] = 'abc...
Functions – not as it looks like
function f(arg1) {
console.log("one");
}
function f(arg1, arg2) {
console.log("two");
}
f...
What is this ?
this is the current context function f() {
return this; // returns global object
}
var myObject = {
name: "...
this in action
var myObject = {
location: 'Sydney',
moveMe: function () {
var helpFunction = function () {
this.location =...
this in action
var myObject = {
myLocation: 'Sydney',
moveMe: function() {
var helpFunction = function () {
this.myLocatio...
this in action
var myObject = {
myLocation: 'Sydney',
moveMe: function() {
var that = this;
var helpFunction = function ()...
this in action
var myObject = {
myLocation: 'Sydney',
moveMe: function() {
var helpFunction = function () {
this.myLocatio...
And couple of days ago on client site…
var uiController = {
initController: function() {
$('#MyCheckboxId').change(functio...
And couple of days ago on client site…
var uiController = {
initController: function() {
var that = this;
$('#MyCheckboxId...
Classes in JavaScript
There are no classes in JavaScript
Bad news
Good news
We can mimic them using functions
Show me the money code
Samples
Unit Tests
• Jasmin Test Framework
(http://jasmine.github.io/2.0/introduction.html)
• QUnit Test Framework
(http://qunitjs...
So… What’s next ?
Know your tools
Use them wisely
Good luck
Questions time
Upcoming SlideShare
Loading in …5
×

Javascript for .Net Developers

325 views

Published on

Javacript looks like C#, smells a bit like C# but it isn’t C#. It is easy to expect things, and then spend hours debugging simple innocent looking code. In this talk, we’ll try and make some sense and bring order in this by taking C# terminology and paradigms into account

Published in: Software
  • Be the first to comment

  • Be the first to like this

Javascript for .Net Developers

  1. 1. With thanks to our sponsors
  2. 2. Adventures of C# developer in JavaScript world Igor Gorelik @rogik
  3. 3. Confession I don’t like JavaScript
  4. 4. Cool stuff we won’t talk about
  5. 5. So, JavaScript… It looks like C# It smells like C# But it is NOT C#
  6. 6. At the very beginning… function onLogin() { if (document.getElementById('username').text == '') { alert("Username is mandatory"); return; } if (document.getElementById('password').text == '') { alert("Password is mandatory"); return; } document.forms[0].submit(); }
  7. 7. jQuery comes to the rescue… Kind of… function onLogin() { if ($('#username').text() == '') { alert("Username is mandatory"); return; } if ($('#password').text() == '') { alert("Password is mandatory"); return; } $("#loginForm").submit(); }
  8. 8. Let’s compare… Runtime Environment C# JavaScript Chakra V8 SpiderMonkey
  9. 9. Let’s compare… Language C# JavaScript Compiled Interpreted Strongly Typed Loosely Typed Static Typing Dynamic Typing Classic Inheritance Prototype Inheritance Classes Functions Methods Functions etc
  10. 10. Type Coalescing C# JavaScript “test “ + “me” test me test me “test “ + 1 test 1 test 1 100 + “25” 10025 10025 “test “ + true test true “test “ + new DateTime(75,9,30,11,33,0) test Thu Oct 30 1975 11:33:00 GMT+1100 (AUS Eastern Daylight Time)
  11. 11. Operators Most of operators are identical, except ==/!=, ===/!== “hello” == “hello” 1 == 1 1== “1” 1=== “1” 1!== “1” 1=== 1.000000000000001 1=== 1.0000000000000001 false == ‘’
  12. 12. True/False – not as you know it… Falsy values are: • false • 0 (zero as a number) • “” (empty string) • null • undefined • NaN Truthy values examples: • true • “hello” • 25 • “0” (zero as a string) • f (function variable)
  13. 13. Object Notation var x = []; x['name'] = “DDD Melbourne"; console.log(x['name']); console.log(x.name);
  14. 14. Array all the things for (var i = 0; i < a.length; i++) { console.log(a[i]); } var a = [1, 2, 3]; a.length = 3 a[5] = 'abc'; a.length = 6 a.property = 'something'; a.length = 6 1, 2, 3, undefined, undefined, abc for (var i in a) { console.log(a[i]); } 1, 2, 3, abc, something a.forEach(function (i) { console.log(i); }); 1, 2, 3, abc
  15. 15. Functions – not as it looks like function f(arg1) { console.log("one"); } function f(arg1, arg2) { console.log("two"); } f(1); "two" function f(arg1) { console.log("one " + arguments.length); } function f(arg1, arg2) { console.log("two " + arguments.length); } f(1); "two 1"
  16. 16. What is this ? this is the current context function f() { return this; // returns global object } var myObject = { name: "me", func: function f() { return this; // returns myObject } }; this can be changed var f = myObject.func.bind(this); f(); // this == global object
  17. 17. this in action var myObject = { location: 'Sydney', moveMe: function () { var helpFunction = function () { this.location = 'Melbourne'; }; helpFunction(); console.log(this.location); } }; myObject.moveMe();
  18. 18. this in action var myObject = { myLocation: 'Sydney', moveMe: function() { var helpFunction = function () { this.myLocation = 'Melbourne'; }; helpFunction(); console.log(this.myLocation); } }; myObject.moveMe(); Sydney
  19. 19. this in action var myObject = { myLocation: 'Sydney', moveMe: function() { var that = this; var helpFunction = function () { this.myLocation = 'Melbourne'; }; that.helpFunction = helpFunction; that.helpFunction(); console.log(this.myLocation); } }; myObject.moveMe(); Melbourne
  20. 20. this in action var myObject = { myLocation: 'Sydney', moveMe: function() { var helpFunction = function () { this.myLocation = 'Melbourne'; }; helpFunction.apply(this); console.log(this.myLocation); } }; myObject.moveMe(); Melbourne
  21. 21. And couple of days ago on client site… var uiController = { initController: function() { $('#MyCheckboxId').change(function(e) { this.eventHandler(); }); }, eventHandler: function() { // something useful } } ERROR: event handler is not a function of this
  22. 22. And couple of days ago on client site… var uiController = { initController: function() { var that = this; $('#MyCheckboxId').change(function(e) { that.eventHandler(); }); }, eventHandler: function() { // something useful } }
  23. 23. Classes in JavaScript There are no classes in JavaScript Bad news Good news We can mimic them using functions
  24. 24. Show me the money code Samples
  25. 25. Unit Tests • Jasmin Test Framework (http://jasmine.github.io/2.0/introduction.html) • QUnit Test Framework (http://qunitjs.com/) • Chutzpah VS plugin
  26. 26. So… What’s next ? Know your tools Use them wisely Good luck
  27. 27. Questions time

×