JavaScript for.Net Developers The things you need to know Pavel Kolev

2 1.History of the Web 2.The Good, The Bad and the Evil 3.The Future Table of Contents

History of the Web

4  Just a document viewer, not a platform  It’s not a page – it’s a scroll  The good and the bad  Custom tags  Make the evolution possible  Accept bad html  Not so many tags – lets have ids and classes  No control over the presentation HTML

5 Runoff GML TEXScribe( ) LATEXSGML HTML XML GML: :h1.Gosho :ol :li.Pesho :li.Ivan :eol. … ::ol. … SGML – IBM government, CERN HTML – Simplified SGML

6  CSS isn’t bad. You just don’t understand it like I do.  Designed for paper printing.  The good and the bad  Not implementable – every specification fails  Complicated selector management (imagine no tools and !important)  Not intended for dynamic content  No modularity – different modules on the page with different style  Naming CSS

7 CSS vs JavaScript CSS background-color font-size list-style-type z-index float JavaScript(DOM) backgroundColor fontSize listStyleType zIndex cssFloat / styleFloat

 Document Object Model  At first not all elements are scriptable (MS makes them all)  The good and the bad  document.write  Useless #textnode for whitespace  document.documentElement – return html  Hell a lot of a pointers The DOM

9  Pointers  Child (firstChild, lastChild)  Siblinds (nextSibling, previousSibling)  Parent (parentNode)  Children (childNodes)  You just need firstChild and nextSibling  node.property vs node.getAttribute (W3C fault – JAVA style)  node.className should be node.classNames The DOM - nodes

10  document.createElement – does not add it to the DOM  node.appendChild(newNode)  node.replaceChild(new, old) is actually old.parentNode.replaceChild(new, old)  node.removeChild(old) is actually old.parentNode.removeChild(old) – in IE you should remove all event handlers because of memory leaks  All browsers implemented MS’s innerHTML which acts like a parser (W3C does not provide access to HTML parser) The DOM – nodes operations

But meanwhile JavaScript happened

 The Mosaic browser introducing the  The Netscape startup getting Brendan Eich on board  JavaScript JavaScript – the beginning Java (syntax) LiveScript Self (prototypes) Scheme (functions model)

13  The language of the web should have been JAVA  In Netscape 2.0 we got LS both on server and client  Netscape & Sun vs Microsoft  We kill LavaScript  JScript  Making the standart – W3C, ISO, ECMA  Can’t use the name so call it ECMAScript  Microsoft declares victory and leave the field JavaSceript – the early years

14  Netscape with bad business model  Microsoft moves to the X – Internet and.NET  JS should have died with Netscape as all languages do  Microsoft – the good guy  JScript  Generelized document model – made the DOM good enough  XMLHttpRequest(AJAX) – the second surprise to MS and the reason the web survived  The AJAX revolution succeeded because of the goodness of JS JavaScript and Microsoft

The Good, The Bad and the Evil

16  The need of interactivity in the browsers – HyperCards (Apple)  Brilliant ideas but not enough time to fix all the bugs during the browser wars  The greatest discovery of 21 st century – JS has good parts  The bad parts reasons  Legacy – coping some of the JAVA problems  Make it easy for newbies – “;”, global object – great or not  Too little time to design, develop and ship  The bad parts can be avoided and it’s a brilliant language JavaScript in short

17  Its all about objects  Objects in JS are not instances of a Class  Object – dynamic collection of properties  Each property has a key string that is unique within that object  get, set, delete  Think of them as hash tables JavaScript – all about Objects

18 JavaScript Types  JavaScript is NOT a typeless language  JavaScript is a loosely typed language – you don’t declare the data types of the variables explicitly  Types – Number, Boolean, String, Array, Function, Date, RegExp  Use var for declaration

19  Declares AND initializes variable within function  You do not specify type  JavaScript does not respect block scope  Declaration is split in 2 parts:  the declaration part is hoisted at the top of the function and initialized with undefined  the initialization part turns into ordinary assign statement var statement var a = “gosho”;

20 Number  Only one type for Number – no Integer, BigInteger, Float, Double etc… which makes the language easier for beginners  Using 64 – bit floating point  Using “Double” (IEEE-754) to represent numbers  Associative Law does not hold  Inherits from Number.prorotype (a + b) + c === a + (b + c)

21  Inherited from JAVA. Should be in Number Math object  abs  acos  asin  atan  atan2  ceil  cos  exp  floor  log  max  min  pow  random  round  sin  sqrt  tan  E  LN10  LN2  LOG10E  LOG2E  PI  SQRT1_2  SQRT2

22  Special Number – Not a Number  NaN – a number which is not any real number  With bad math you get NaN instead of error NaN NaN === NaN // false NaN !== NaN // true

23  Got it right  Exactly 2 Boolean values in the language:  true  false Boolean

24  Why we call them strings? They don’t look like strings?  No separate character type  A sequence of 0 or more 16 bit Unicode characters  Similar strings are equal (===)  Strings are immutable  You can use both ‘’ and “” for strings  Multiline strings String var myString = “This is a sample multiline \ string that will cause error”;

25  Numbers to Strings  Strings to number Strings var myNum = Number(str); var mySecondNum = +str; var myThirdNum = parseInt(“123mm”) // result in 123 var myForthNum = parseInt(“08”) // result in 0 var myFifthNum = parseInt(“08”, 10) // result in 8 var myString = num.toString(); var mySecondString = String(num);

26 String methods  charAt  charCodeAt  compareLocale  concat  indexOf  lastIndexOf  localeCompare  match  replace  search  slice  split  substring  toLocaleLowerCase  toLocaleUpperCase  toLowerCase  toString  toUpperCase  trim  length

27 Trim if(typeOf String.prototype.trim !== ‘function’) { String.prorotype.trim = function() { return this.replace(placeRegExHere); }}

28  There are no Arrays in JavaScript  JavaScript use objects to simulate array  Indexes are converted to strings and used as keys to retrieving values  You don’t have the speed advantage  No need to provide initial length of the array – they don’t actually have a length  We have length property  Don’t use for in with arrays – order of iteration is not guaranteed Array

29  Array litteral uses []  Can contain anything because it is object  Will fill the empty with udnefined Array literals var arr = [1, “pesho”, function() { … }]; arr.length === 3; // true arr[arr.length] = true;

30 Array methods  concat  every  filter  forEach  indexOf  join  lastIndexOf  map  pop  push  reduce  reduceRight  reverce  shift  slice  some  splice  toLocaleString  toString  unshift

31  Sorting  forEach  Removing items from the array  delete  splice Array methods arr.sort(function(a, b) { // my sorting function }); arr.forEach(function(item, index, array) { // do what you want }); delete arr[5]; // will leave undefined arr.splice(index, 1); // will reorder array

32  Date – based on JAVA’s Date  RegExp  All values are objects except for 2  null – value that isn’t anything  undefined – lack of value  default for variables and parameters  value for missing members of objects  probably not the best name “undefined” Other (before the major)

33  typeof – returns a string representing the type of a value  falsy values – if you put it in if statement you get to else branch  false // “false” is true  null  undefined  0 // “0” is true  “”  NaN Other (before the major) typeof null === ‘object’ // true typeof array === ‘object’ // true but we have Array.isArray

34  JSON.parse – parse json object  JSON.stringify – make json object “to string”  Object.keys – returns array of all enumerable properties of obj  Object.create(obj, newMembers) – you can now inherit from null  Array.isArray – check if passed obj is array  Use ‘strict mode’ on top of function (nice survey in MS for IE9) Others

35  Object based vs Class based  Key – Value  Two kind of properties  data properties – value, writeable  accessor properties – get, set (available with ES5)  No initialization Objects var obj = { name: “Pesho” }; obj.class = 10;

36 Objects var obj = Object.defineProperties(Object.create(Object.prototype), { age: { value: 20, writeable: true, enumerable: true, configurable: true, get: function() {…}, set: function() {…} }}) Object.seal(obj); // prevents new prop & all are non-config Object.freeze(obj); // makes it immutable Object.getOwnPropertyNames(obj); // event not enumerables

37  Coming from C it has all the same operators  Arithmetic  + - * / %  Comparison  == != > = <=  Logical  && || !  Bitwise  & | ^ >> >>> <<  Ternary  ?: Operators

38  Used for both addition and concatenation  If both operands are numbers – add them else – convert them to strings and concatenate them  Bad part that works in JAVA but not here  HTML does not know about numbers + “$” = “$12”

39  If  switch – the value does not need to be number  while  do  for  break  continue  return  try/throw  with – evil do not use it, please, please  eval – evil do not use it, please, please Statements with(obj) { a = b; } obj.a = b; obj.a = obj.b; a = b; a = obj.b;

40  JavaScript is functional language – first class functions  functions can be passed as arguments to a function  functions can be returned from functions  The beaty and one of the best parts  One of the key idea and they make JavaScript so powerfull  Functions in JavaScript does it all – Method, Class, Constructor, Module  Produce instance of function object Functions function name () { … return null; }

41  Function expression  Function statement / declaration  Because of function hoisting function statement can be called before declaration Functions statement vs expression var myFunc = function myFuncName() { … } function myFunc() { … };

42  JavaScript does not respect {} scope  Only functions have scope  Variables declared inside a function are not visible outside of it Scope

43  Invocation  Suffix () operator containing 0 or more parameters separated by comma  Will ignore extra arguments and will fill the missing with undefined  no type checking  Return  You can return any type you want  By default always returns undefined; Invocation and return

44  Function form  myFunction(arguments); // ES3 -> global object, ES5 - undefined  Method form – when it is part of an object  obj.myFunction(arguments); // this will be obj  obj[“myFunction”](arguments);  Constructor form  new MyFunction(arguments); // new object is created and assigned to this and if there is no return, this will be returned  Apply / Call form  myFunc.apply(obj, [arguments]); // this will be obj How to call a function

45  Great idea! Of course not accepted.  Closure – the context of the inner function includes the scope of the outer function. The inner function has access to that context even when the parent has returned Closure var myFunc = (function () { var months = [“Jan”, “Feb” … ]; return function(n) { return months[n-1]; }}());myFunc(2);

46  Pseudo paramenter that all functions get  Contains all arguments from the invocation  Array-like object but not array  arguments.length – number of passed arguments  Use it as read-only arguments

47  Pseudo paramenter that all functions have  Reference to the object of invokation  Allows a method to know what object it is connected with  Key to prototypal inheritance this

48  Objects can be passed to functions and returned  objects are passed by reference not by value  objects are almost never copied which is great  The equality operator === compares references not values Reference

49 Pseudoclassical inheritance function Human (name) { this.name = name; } Human.prototype.myFunc = function () { … }; function Student(name) { this.name = name; } Student.prototype = new Human(); Student.prototype.otherFunc = function() { … };

50 Functional inheritance function human (name) { return { name: name, myFunc: function () { … } }} function student(name) { var that = human(name); that.otherFunc = function() { … }; return that; }

51  JavaScript unlike many other languages does not have Read which makes it possible to have Event loop  Free of races and deadlocks  One stack only  Low overhead  If a turn fails, the program continues Event loop

52  Declare all variables on top of function  Don’t create functions in loops – new function object will be created with each iteration  !!variable – converts variable to boolean  return a && a.member / return a || a.member  You can have private members with closure  ++ is Assembly language feature – don’t use it  Don’t use the global object  Use JSLint Tips

AJAX ?

The future

I believe this presentation is not going to end on time but if you have any questions… otherwhise contact me