"Javascript" por Tiago Rodrigues

2,662 views

Published on

Workshop Técnico de 23 de Junho de 2009: “Javascript” Por Tiago Rodrigues

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,662
On SlideShare
0
From Embeds
0
Number of Embeds
141
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

"Javascript" por Tiago Rodrigues

  1. 1. JavaScript The World's Most Misunderstood Programming Language Tiago Rodrigues tmcrodrigues@gmail.com http://trodrigues.net
  2. 2. What is it ? JavaScript IS NOT Java
  3. 3. What is it ? JavaScript IS NOT Java Created in 1995 by Netscape (LiveScript)
  4. 4. What is it ? JavaScript IS NOT Java Created in 1995 by Netscape (LiveScript) ECMAScript standard JScript and ActionScript, also based on ECMAScript
  5. 5. What is it ? JavaScript IS NOT Java Created in 1995 by Netscape (LiveScript) ECMAScript standard JScript and ActionScript, also based on ECMAScript Dynamic, Weakly typed
  6. 6. What is it ? JavaScript IS NOT Java Created in 1995 by Netscape (LiveScript) ECMAScript standard JScript and ActionScript, also based on ECMAScript Dynamic, Weakly typed Object Oriented, Prototype based
  7. 7. What is it ? JavaScript IS NOT Java Created in 1995 by Netscape (LiveScript) ECMAScript standard JScript and ActionScript, also based on ECMAScript Dynamic, Weakly typed Object Oriented, Prototype based Functional features
  8. 8. What can we do with it ? Scripting language created for programmatic access of webpage objects
  9. 9. What can we do with it ? Scripting language created for programmatic access of webpage objects Currently also used for: Application scripting Server side scripting
  10. 10. JavaScript we see everyday This application (Google Docs)
  11. 11. JavaScript we see everyday Gmail, SAPO Mail, Google Reader
  12. 12. JavaScript we see everyday Rich text editors
  13. 13. JavaScript we see everyday Ads
  14. 14. JavaScript we see everyday Comment systems (SAPO Comments, Disqus)
  15. 15. Why people hate it Bad uses Popup ads, annoying animations
  16. 16. Why people hate it Bad uses Popup ads, annoying animations Bad practices lead to slower code
  17. 17. Why people hate it Bad uses Popup ads, annoying animations Bad practices lead to slower code Many books advocated wrong practices for years Lots of bad tutorials and bad code all over the web People didn't want to learn, so they replicated the bad code
  18. 18. Why developers hate it Standard is incoherent
  19. 19. Why developers hate it Standard is incoherent Being solved !
  20. 20. Why developers hate it Standard is incoherent Being solved ! Bad implementations
  21. 21. Why developers hate it Standard is incoherent Being solved ! Bad implementations Browser differences
  22. 22. Why developers hate it Standard is incoherent Being solved ! Bad implementations Browser differences However, it will take time...
  23. 23. Learning the language Basic syntax is similar to C-like languages Code goes in .js files or HTML <script> tag Comments are the same as C alert("Hello world ! JavaScript is awesome !");
  24. 24. Variables var hello = "world"; var keyword: local variable No need to declare types
  25. 25. Variables Variable types Numbers var num = 1; Strings var str = "hi !"; Objects var obj = new Object(); Arrays var arr = ["string", 2]; Functions var fun = function() {}; Regexps var regexp = /^jssrocks/; Numbers, Strings, Regexps and Functions are really Objects
  26. 26. Variables Be careful... "30a".parseInt(); "40.5".parseInt(); "40.5".parseFloat();
  27. 27. Variables Strings Concatenation "Tiago" + " " + "Rodrigues"
  28. 28. Variables Strings Concatenation "Tiago" + " " + "Rodrigues" typeof(26 + "px"); // string typeof 26; // number
  29. 29. Variables Other values true, false null undefined
  30. 30. Control structures Control structures if (cond) { ... } else { ... } while (cond) { ... } do { ... } while (cond); for (cond) { ... } switch (expr) { case ... : ... ; break; } try { ... } catch (exception) { ... }
  31. 31. Learning the language Control structures for (var i=0; i<10; i++) { ... } for (var i in obj) { ... }
  32. 32. Objects var obj = { property: value }
  33. 33. Objects var obj = { "name": "content", other_name: 1, this_is_an_array: [1, 2, 3], "this-would-be": "wrong" } alert(obj.name); // content alert(obj["name"]); // content
  34. 34. Functions function add(a, b) { return a + b; }
  35. 35. Functions function add(a, b) { return a + b; } Wrong ! Function goes global !
  36. 36. Functions function add(a, b) { return a + b; } Wrong ! Function goes global ! But functions are objects ! var add = function(a, b) { return a + b; }
  37. 37. Functions var module = { add: function(a, b) { return a + b; }, sub: function(a, b) { return a - b; } } module.add(1, 2); // 3
  38. 38. Context Why is context so important ? var fun = function(){ var num = 1; silly_var = 2; alert(num); // 1; } alert(num); // undefined alert(silly_var); // 2
  39. 39. Context Why is context so important ? var module = { str: "blah", print: function() { alert(this.blah); } } module.print(); // blah However, this can be ambiguous, so be careful.
  40. 40. Functional features Let's go functional ! var fun = function(callback) { callback(); } fun(function() { alert("I'm anonymous !"); });
  41. 41. Closures var fun = function() { var num = 1; var inner = function() { alert(num); } inner(); // nothing happens...yet } fun(); // 1 inner(); // undefined
  42. 42. Available objects Numbers, Strings, Arrays all have methods There are many more available objects: Math, Date, etc* * https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference
  43. 43. Available objects Examples: var str = "Tiago Rodrigues"; str.split(" "); // ["Tiago", "Rodrigues"]; Math.sqrt(36); // 6 var arr = [4, 6, 3, 7]; arr.sort(); // [3, 4, 6, 7]
  44. 44. Object orientation But JavaScript is Object Oriented So how do we create object instances ? We use prototypes !
  45. 45. Classes Defining a class var Book = function(name) { this.init(name); } Book is a constructor
  46. 46. Prototypes Let's add attributes and methods to our class Book.prototype = { name: "", // this is an attribute // this is a method init: function(name) { this.name = name; }, sayName: function() { alert(this.name); } };
  47. 47. Prototypes So let's create some books var good_parts = Book("The Good Parts"); good_parts.sayName(); // The Good Parts var def_guide = Book("The Definitive Guide"); def_guide.sayName(); // The Definitive Guide
  48. 48. Prototypes But why is this so great ? Book.prototype.removeName = function() { this.name = ""; } Extending default objects String.prototype.trim = function() { return this.replace(/^s+|s+$|n+$/g, ''); } " trim me ".trim(); // "trim me"
  49. 49. The Document Object Model API for (X)HTML files Tree representation of all the objects in a file Each object has properties and methods Not the same in every browser Mostly IE not up to date
  50. 50. The Document Object Model window represents your browser window document represents your current document document.forms is an array with all your form fields Many other objects are available
  51. 51. Selecting objects <div id="content"> blah </div> var div = document.getElementById("content"); alert(content.innerHTML); // blah
  52. 52. Event handling <a href="#" onClick="alert('hi')">click me</a> <a href="#" id="link">click me</a>
  53. 53. Event handling <a href="#" onClick="alert('hi')">click me</a> <a href="#" id="link">click me</a> On the JS file: var lnk = document.getElementById("link"); if (lnk.addEventListener){ lnk.addEventListener( 'click', handler, false); } else if (lnk.attachEvent){ lnk.attachEvent('onclick', handler); }
  54. 54. Object properties <a href="#" id="link">click me</a> On the JS file: var lnk = document.getElementById("link"); lnk.href = "file.html"; lnk.style.color = "#000";
  55. 55. Basic output on a browser Alert alert("Hi !"); Confirm confirm("Are you there ?"); // returns true or false Prompt prompt("What's your name ?");
  56. 56. Timing Flashing an alert box after 5 seconds setTimeout(function() { alert("click me !"); }, 5000);
  57. 57. Timing Flashing an alert box after 5 seconds setTimeout(function() { alert("click me !"); }, 5000); Flashing a box every 5 seconds var int = setInterval(function() { if(confirm("Stop ?")) { clearInterval(int); } }, 5000);
  58. 58. JSON     JavaScript Object Notation * { "name" : "Tiago Rodrigues", "age" : 24, "profession" : "JavaScript developer" } Other languages have similar structures There are libraries available on every popular language * http://json.org
  59. 59. Ajax Asynchronous Javascript And XML* Fetching content through JavaScript with the use of the XMLHttpRequest object Server doesn't send an entire page, only what's needed Insert the content in the current page through JavaScript * http://adaptivepath.com/ideas/essays/archives/000385.php
  60. 60. Ajax * http://adaptivepath.com/ideas/essays/archives/000385.php
  61. 61. Ajax Content can be HTML XML JSON
  62. 62. Libraries and frameworks Extend the base language Abstract browser differences Selectors Events AJAX Add widgets and reusable modules
  63. 63. Libraries and frameworks Problems Many library users don't learn the base language
  64. 64. Libraries and frameworks Problems Many library users don't learn the base language Because of this, they abuse the base language
  65. 65. Libraries and frameworks Problems Many library users don't learn the base language Because of this, they abuse the base language This leads to performance problems
  66. 66. Libraries and frameworks Problems Many library users don't learn the base language Because of this, they abuse the base language This leads to performance problems So...be careful !
  67. 67. Libraries and frameworks Prototype / script.aculo.us jQuery / jQuery UI Dojo LibSAPO.js Many others: extjs, Mootools, etc Ajaxian* has a great list * http://ajaxian.com
  68. 68. Good practices Unobtrusive JavaScript Not blocking possible actions Making them available without JavaScript Progressive Enhancement and Graceful Degradation Build your website with no JavaScript at all Add it later to improve user experience This way, the website will degrade gracefully Verify your code ! http://jslint.com/ * http://andr3.net/blog/post/141
  69. 69. Other uses Server Side JS Narwhal Node.js Adobe AIR / Tweetanium Extensões Google Chrome Extensões Mozilla Firefox (Jetpack) Phonegap, Mojo, W3C Widgets (Opera widgets) Platform scripting .NET J2EE (Rhino)
  70. 70. References Books JavaScript: The Definitive Guide JavaScript: The Good Parts http://javascript.crockford.com http://developer.mozilla.org

×