Your SlideShare is downloading. ×
0
Intro
Functions
Arrays
Asyncrounus Javascript
Awful and bad parts
References
JavaScript
The good, bad and awful parts
Moam...
Intro
Functions
Arrays
Asyncrounus Javascript
Awful and bad parts
References
Outline
1 Intro
2 Functions
3 Arrays
4 Asyncr...
Intro
Functions
Arrays
Asyncrounus Javascript
Awful and bad parts
References
Brief History
Facts about JS
Outline
1 Intro
...
Intro
Functions
Arrays
Asyncrounus Javascript
Awful and bad parts
References
Brief History
Facts about JS
What is Javascri...
Intro
Functions
Arrays
Asyncrounus Javascript
Awful and bad parts
References
Brief History
Facts about JS
History
In 1992,...
Intro
Functions
Arrays
Asyncrounus Javascript
Awful and bad parts
References
Brief History
Facts about JS
Javascript the l...
Intro
Functions
Arrays
Asyncrounus Javascript
Awful and bad parts
References
Brief History
Facts about JS
Facts about JS
N...
Intro
Functions
Arrays
Asyncrounus Javascript
Awful and bad parts
References
Function definition
Augmenting
Scope
Arguments...
Intro
Functions
Arrays
Asyncrounus Javascript
Awful and bad parts
References
Function definition
Augmenting
Scope
Arguments...
Intro
Functions
Arrays
Asyncrounus Javascript
Awful and bad parts
References
Function definition
Augmenting
Scope
Arguments...
Intro
Functions
Arrays
Asyncrounus Javascript
Awful and bad parts
References
Function definition
Augmenting
Scope
Arguments...
Intro
Functions
Arrays
Asyncrounus Javascript
Awful and bad parts
References
Function definition
Augmenting
Scope
Arguments...
Intro
Functions
Arrays
Asyncrounus Javascript
Awful and bad parts
References
Function definition
Augmenting
Scope
Arguments...
Intro
Functions
Arrays
Asyncrounus Javascript
Awful and bad parts
References
Function definition
Augmenting
Scope
Arguments...
Intro
Functions
Arrays
Asyncrounus Javascript
Awful and bad parts
References
Function definition
Augmenting
Scope
Arguments...
Intro
Functions
Arrays
Asyncrounus Javascript
Awful and bad parts
References
Function definition
Augmenting
Scope
Arguments...
Intro
Functions
Arrays
Asyncrounus Javascript
Awful and bad parts
References
Function definition
Augmenting
Scope
Arguments...
Intro
Functions
Arrays
Asyncrounus Javascript
Awful and bad parts
References
Function definition
Augmenting
Scope
Arguments...
Intro
Functions
Arrays
Asyncrounus Javascript
Awful and bad parts
References
Function definition
Augmenting
Scope
Arguments...
Intro
Functions
Arrays
Asyncrounus Javascript
Awful and bad parts
References
Function definition
Augmenting
Scope
Arguments...
Intro
Functions
Arrays
Asyncrounus Javascript
Awful and bad parts
References
Function definition
Augmenting
Scope
Arguments...
Intro
Functions
Arrays
Asyncrounus Javascript
Awful and bad parts
References
Function definition
Augmenting
Scope
Arguments...
Intro
Functions
Arrays
Asyncrounus Javascript
Awful and bad parts
References
Important methods
Outline
1 Intro
2 Functions...
Intro
Functions
Arrays
Asyncrounus Javascript
Awful and bad parts
References
Important methods
Important methods
array.sli...
Intro
Functions
Arrays
Asyncrounus Javascript
Awful and bad parts
References
Why using async. functions
Sometimes-async fu...
Intro
Functions
Arrays
Asyncrounus Javascript
Awful and bad parts
References
Why using async. functions
Sometimes-async fu...
Intro
Functions
Arrays
Asyncrounus Javascript
Awful and bad parts
References
Why using async. functions
Sometimes-async fu...
Intro
Functions
Arrays
Asyncrounus Javascript
Awful and bad parts
References
Why using async. functions
Sometimes-async fu...
Intro
Functions
Arrays
Asyncrounus Javascript
Awful and bad parts
References
Why using async. functions
Sometimes-async fu...
Intro
Functions
Arrays
Asyncrounus Javascript
Awful and bad parts
References
Why using async. functions
Sometimes-async fu...
Intro
Functions
Arrays
Asyncrounus Javascript
Awful and bad parts
References
Why using async. functions
Sometimes-async fu...
Intro
Functions
Arrays
Asyncrounus Javascript
Awful and bad parts
References
Outline
1 Intro
2 Functions
3 Arrays
4 Asyncr...
Intro
Functions
Arrays
Asyncrounus Javascript
Awful and bad parts
References
Awful and bad parts I
global variables
A non-...
Intro
Functions
Arrays
Asyncrounus Javascript
Awful and bad parts
References
Awful and bad parts II
Reserved Words
Use the...
Intro
Functions
Arrays
Asyncrounus Javascript
Awful and bad parts
References
References
Outline
1 Intro
2 Functions
3 Arra...
Intro
Functions
Arrays
Asyncrounus Javascript
Awful and bad parts
References
References
References
Douglas Crockford.
Java...
Upcoming SlideShare
Loading in...5
×

Java script good_bad_awful

304

Published on

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

No Downloads
Views
Total Views
304
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
10
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Java script good_bad_awful"

  1. 1. Intro Functions Arrays Asyncrounus Javascript Awful and bad parts References JavaScript The good, bad and awful parts Moamen Mokhtar Usama Elnily September 17, 2013 Moamen Mokhtar, Usama Elnily JavaScript
  2. 2. Intro Functions Arrays Asyncrounus Javascript Awful and bad parts References Outline 1 Intro 2 Functions 3 Arrays 4 Asyncrounus Javascript 5 Awful and bad parts 6 References Moamen Mokhtar, Usama Elnily JavaScript
  3. 3. Intro Functions Arrays Asyncrounus Javascript Awful and bad parts References Brief History Facts about JS Outline 1 Intro 2 Functions 3 Arrays 4 Asyncrounus Javascript 5 Awful and bad parts 6 References Moamen Mokhtar, Usama Elnily JavaScript
  4. 4. Intro Functions Arrays Asyncrounus Javascript Awful and bad parts References Brief History Facts about JS What is Javascript The world most missunderstood programming language (Neither Java nor Script!) Lots of design errors. Moamen Mokhtar, Usama Elnily JavaScript
  5. 5. Intro Functions Arrays Asyncrounus Javascript Awful and bad parts References Brief History Facts about JS History In 1992, James Gosling and java. Netscape (Berndan Eich) and LiveScript. Sun, Netscape and JavaScript. Moamen Mokhtar, Usama Elnily JavaScript
  6. 6. Intro Functions Arrays Asyncrounus Javascript Awful and bad parts References Brief History Facts about JS Javascript the language Load and go delivery. Loose typing. Objects as general containers. Prototypal inheritance. Lambda. Linkage through global variables. Moamen Mokhtar, Usama Elnily JavaScript
  7. 7. Intro Functions Arrays Asyncrounus Javascript Awful and bad parts References Brief History Facts about JS Facts about JS NaN NaN === NaN == ’1’ == 1 ” == false typeof typeof ”help”.toString; for .. in obj. obj[’ ’] Moamen Mokhtar, Usama Elnily JavaScript
  8. 8. Intro Functions Arrays Asyncrounus Javascript Awful and bad parts References Function definition Augmenting Scope Arguments Apply vs. Call Closure Curry Memoization Outline 1 Intro 2 Functions 3 Arrays 4 Asyncrounus Javascript 5 Awful and bad parts 6 References Moamen Mokhtar, Usama Elnily JavaScript
  9. 9. Intro Functions Arrays Asyncrounus Javascript Awful and bad parts References Function definition Augmenting Scope Arguments Apply vs. Call Closure Curry Memoization Function definition var foo = function(); function foo (); Moamen Mokhtar, Usama Elnily JavaScript
  10. 10. Intro Functions Arrays Asyncrounus Javascript Awful and bad parts References Function definition Augmenting Scope Arguments Apply vs. Call Closure Curry Memoization Augmenting Function.prototype.method = function(name , func) { this.prototype[name] = func; return this; }; Moamen Mokhtar, Usama Elnily JavaScript
  11. 11. Intro Functions Arrays Asyncrounus Javascript Awful and bad parts References Function definition Augmenting Scope Arguments Apply vs. Call Closure Curry Memoization Scope I No block Scope. Hoisting. foo (); // not visible bar (); // visible var foo = function (){ ... }; function bar (){ ... }; Moamen Mokhtar, Usama Elnily JavaScript
  12. 12. Intro Functions Arrays Asyncrounus Javascript Awful and bad parts References Function definition Augmenting Scope Arguments Apply vs. Call Closure Curry Memoization Scope II function foo (){ function bar() { return 3; } return bar (); function bar() { return 8; } } alert(foo ()); Moamen Mokhtar, Usama Elnily JavaScript
  13. 13. Intro Functions Arrays Asyncrounus Javascript Awful and bad parts References Function definition Augmenting Scope Arguments Apply vs. Call Closure Curry Memoization Scope III function foo (){ var bar = function () { return 3; }; return bar (); var bar = function () { return 8; }; } alert(foo ()); Moamen Mokhtar, Usama Elnily JavaScript
  14. 14. Intro Functions Arrays Asyncrounus Javascript Awful and bad parts References Function definition Augmenting Scope Arguments Apply vs. Call Closure Curry Memoization Scope IV alert(foo ()); function foo (){ var bar = function () { return 3; }; return bar (); var bar = function () { return 8; }; } Moamen Mokhtar, Usama Elnily JavaScript
  15. 15. Intro Functions Arrays Asyncrounus Javascript Awful and bad parts References Function definition Augmenting Scope Arguments Apply vs. Call Closure Curry Memoization Scope V function foo (){ return bar (); var bar = function () { return 3; }; var bar = function () { return 8; }; } alert(foo ()); Moamen Mokhtar, Usama Elnily JavaScript
  16. 16. Intro Functions Arrays Asyncrounus Javascript Awful and bad parts References Function definition Augmenting Scope Arguments Apply vs. Call Closure Curry Memoization Scope VI var foo = 1; function bar() { if (!foo) { var foo = 10; } alert(foo); } bar (); Moamen Mokhtar, Usama Elnily JavaScript
  17. 17. Intro Functions Arrays Asyncrounus Javascript Awful and bad parts References Function definition Augmenting Scope Arguments Apply vs. Call Closure Curry Memoization Arguments An array-like variable. Contains all of the arguments of the functions. Doesn’t have all the functions of arrays except length(). Moamen Mokhtar, Usama Elnily JavaScript
  18. 18. Intro Functions Arrays Asyncrounus Javascript Awful and bad parts References Function definition Augmenting Scope Arguments Apply vs. Call Closure Curry Memoization Apply and Call function invocation Difference between apply and call. theFunction.apply(valueForThis , arrayOfArgs) theFunction.call(valueForThis , arg1 , arg2 , ...) Moamen Mokhtar, Usama Elnily JavaScript
  19. 19. Intro Functions Arrays Asyncrounus Javascript Awful and bad parts References Function definition Augmenting Scope Arguments Apply vs. Call Closure Curry Memoization Closure var myObject = function ( ) { var value = 0; return { increment: function (inc) { value += typeof inc === ’number ’ ? inc : 1; }, getValue: function ( ) { return value; } } }( ); Moamen Mokhtar, Usama Elnily JavaScript
  20. 20. Intro Functions Arrays Asyncrounus Javascript Awful and bad parts References Function definition Augmenting Scope Arguments Apply vs. Call Closure Curry Memoization Curry Function.method(’curry ’, function ( ) { var slice = Array.prototype.slice , args = slice.apply(arguments), that = this; return function ( ) { return that.apply(null , args.concat(slice.apply(arguments ))); }; }); Creates closure to hold arguments of the outer function to be used in the inner function. Moamen Mokhtar, Usama Elnily JavaScript
  21. 21. Intro Functions Arrays Asyncrounus Javascript Awful and bad parts References Function definition Augmenting Scope Arguments Apply vs. Call Closure Curry Memoization Memoization I var memoizer = function (memo , fundamental) { var shell = function (n) { var result = memo[n]; if (typeof result !== ’number ’) { result = fundamental(shell , n); memo[n] = result; } return result; }; return shell; }; Moamen Mokhtar, Usama Elnily JavaScript
  22. 22. Intro Functions Arrays Asyncrounus Javascript Awful and bad parts References Function definition Augmenting Scope Arguments Apply vs. Call Closure Curry Memoization Memoization II var fibonacci = memoizer ([0, 1], function (shell , n) { return shell(n - 1) + shell(n - 2); }); var factorial = memoizer ([1, 1], function (shell , n) { return n * shell(n - 1); }); Moamen Mokhtar, Usama Elnily JavaScript
  23. 23. Intro Functions Arrays Asyncrounus Javascript Awful and bad parts References Important methods Outline 1 Intro 2 Functions 3 Arrays 4 Asyncrounus Javascript 5 Awful and bad parts 6 References Moamen Mokhtar, Usama Elnily JavaScript
  24. 24. Intro Functions Arrays Asyncrounus Javascript Awful and bad parts References Important methods Important methods array.slice(start, end ) It makes a copy of a portion of the array starting from start to end. array.splice(start, deleteCount, item...) The splice method removes elements from an array, replacing them with new items. It is different than delete as delete will replace the deleted value with undefined array.sort(comparefn ) The default sort function converts the array entries into strings and sort lexicographically!. It is provided with the sorting function (like comparable objects in java). Moamen Mokhtar, Usama Elnily JavaScript
  25. 25. Intro Functions Arrays Asyncrounus Javascript Awful and bad parts References Why using async. functions Sometimes-async functions Throwing errors from callbacks Outline 1 Intro 2 Functions 3 Arrays 4 Asyncrounus Javascript 5 Awful and bad parts 6 References Moamen Mokhtar, Usama Elnily JavaScript
  26. 26. Intro Functions Arrays Asyncrounus Javascript Awful and bad parts References Why using async. functions Sometimes-async functions Throwing errors from callbacks Using async. functions Prefered with discontinous events to prevent frozen clients. What is a callback? Moamen Mokhtar, Usama Elnily JavaScript
  27. 27. Intro Functions Arrays Asyncrounus Javascript Awful and bad parts References Why using async. functions Sometimes-async functions Throwing errors from callbacks for(vari =1;i <=3;i++){ setTimeout(function (){ console.log(i);} ,0); }; Moamen Mokhtar, Usama Elnily JavaScript
  28. 28. Intro Functions Arrays Asyncrounus Javascript Awful and bad parts References Why using async. functions Sometimes-async functions Throwing errors from callbacks The devil is in the details Javascript is single threaded. Meet the queue. Moamen Mokhtar, Usama Elnily JavaScript
  29. 29. Intro Functions Arrays Asyncrounus Javascript Awful and bad parts References Why using async. functions Sometimes-async functions Throwing errors from callbacks Sometimes-async functions I Functions that are async sometimes, but not at other times. Example: Async functions with caching. var socketsCache ={}; function openWebSocket(serverAddress ,callback ){ var socket; if(serverAddress in webSocketCache ){ socket=webSocketCache [serverAddress ]; if(socket.readyState === WebSocket.OPEN ){ callback (); } .... Moamen Mokhtar, Usama Elnily JavaScript
  30. 30. Intro Functions Arrays Asyncrounus Javascript Awful and bad parts References Why using async. functions Sometimes-async functions Throwing errors from callbacks Sometimes-async functions II }else{ socket=newWebSocket(serverAddress ); webSocketCache [serverAddress ]= socket; .... }; return socket; }; var socket=openWebSocket(url ,function (){ .... }); .... Moamen Mokhtar, Usama Elnily JavaScript
  31. 31. Intro Functions Arrays Asyncrounus Javascript Awful and bad parts References Why using async. functions Sometimes-async functions Throwing errors from callbacks Throwing errors from callbacks Can we catch error thrown from a callabck ? try{ setTimeout(function (){ throw new Error(’Catch_me_if_you_can !’); },0); }catch(e){ console.error(e); } Moamen Mokhtar, Usama Elnily JavaScript
  32. 32. Intro Functions Arrays Asyncrounus Javascript Awful and bad parts References Outline 1 Intro 2 Functions 3 Arrays 4 Asyncrounus Javascript 5 Awful and bad parts 6 References Moamen Mokhtar, Usama Elnily JavaScript
  33. 33. Intro Functions Arrays Asyncrounus Javascript Awful and bad parts References Awful and bad parts I global variables A non-declared variable is considered global. Semicolon insertion return { status: true }; Moamen Mokhtar, Usama Elnily JavaScript
  34. 34. Intro Functions Arrays Asyncrounus Javascript Awful and bad parts References Awful and bad parts II Reserved Words Use them within quotes. Access with subscript object = {case: value }; // illegal object = {’case ’: value }; // ok object.case = value; // illegal object[’case ’] = value; // ok Bitwise Operators Very slow! Moamen Mokhtar, Usama Elnily JavaScript
  35. 35. Intro Functions Arrays Asyncrounus Javascript Awful and bad parts References References Outline 1 Intro 2 Functions 3 Arrays 4 Asyncrounus Javascript 5 Awful and bad parts 6 References Moamen Mokhtar, Usama Elnily JavaScript
  36. 36. Intro Functions Arrays Asyncrounus Javascript Awful and bad parts References References References Douglas Crockford. JavaScript: The Good Parts. O’Reilly, 2008. Trevor Burnham. Async JavaScript. The Pragmatic Programmers, 2012. Moamen Mokhtar, Usama Elnily JavaScript
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×