Recomendados
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Semelhante a Java script good_bad_awful
Semelhante a Java script good_bad_awful (20)
Último
Último (20)
Java script good_bad_awful
- 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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