Javascript
                          The Interlingua of the Web
                               Anders Janmyr
             ...
Ugly
     Javascript




Monday, October 4, 2010
Beautiful
        Javascript




Monday, October 4, 2010
Y-Combinator
                             Scheme (Lisp)
                          (define Y
                            (l...
Y-Combinator
                                Javascript
                          function Y (X) {
                       ...
Object


                          Dynamic


Monday, October 4, 2010
Object


                          Hashtable


Monday, October 4, 2010
Object


                          Prototypical


Monday, October 4, 2010
Object Literal


                          var empty_object = {};




Monday, October 4, 2010
var kjell = {
                              name: "Kjell",
                              "kind": "Malayan"
               ...
var kjell = {
                         name: "Kjell",
                         "kind": "Malayan"
                         ...
Retrieval
                   kjell.name    // “Kjell”
                   kjell["name"] // “Kjell”

                   // D...
Retrieving non-
                          existent properties
                kjell.firstname // undefined
               ...
Setting non-existent
                          properties
                          kjell.firstname = 'Sven';
            ...
Prototypical Inheritance
             using Object.create
                          var rudolph =
                        ...
Prototypical
                          Inheritance
                                    name    Kjell
                     ...
rudolph.name = 'Rudolph';

                          rudolph.name // “Rudolph”
                          kjell.name   // “...
rudolph.kind    // ‘Malayan’


                      kjell.kind = 'Baird';

                      rudolph.kind   // ‘Baird...
delete rudolph.name

                          rudolph.name // ‘Kjell’




Monday, October 4, 2010
Prototypical
                              Inheritance
                            new Constructor();

                   ...
Prototypical
                          Inheritance
              Object.create = function(o) {
                  function ...
Arrays

                    • Array inherits from object
                    • Indexes are converted to strings
          ...
Array Literals

                    •[]
                    • names =           [ ʻRudolphʼ, ʻKjellʼ,
                    ...
Array Methods
                    • concat
                    • join
                    • pop
                    • push...
JSON
          {
                   "version": "1.0",
                   "markets": [
                       { "name": "Eu...
Function

                          First class
                            object


Monday, October 4, 2010
Function


                           lambda
                          function() {};




Monday, October 4, 2010
Function Statement
                          function foo() {}

                          expands to

                    ...
Functions

                          Can be defined inside other functions!




Monday, October 4, 2010
residualValues: function(cur) {
       var self = this;
       return function() {
         return [1,2,3,4,5].map(functio...
Methods

                          functions stored in objects




Monday, October 4, 2010
Built-in Prototypes
                    • Object.prototype
                    • Array.prototype
                    • Fun...
Array.prototype.contains = function(element)
  {
      for (var i = 0; i < this.length; i++) {
          if (this[i] == el...
Function.prototype.method =
                        function(name, func) {
                          this.prototype[name] ...
String.method(‘trim’, function() {
            return this.replace(/^s+|s+$/g, ‘’);
          }




          “ tapir “.tr...
Dynamics



Monday, October 4, 2010
Scope

               The function is the scope of the
                          variables




Monday, October 4, 2010
Invocation Forms
                    • •Function form
                        sleep(10)

                    • •Method for...
this
                                Invocation
            this is an extra                    this
                     ...
arguments

                    • A special array like, DYNAMIC,
                          parameter


                    ...
function sum() {
                 var i,
                     n = arguments.length,
                     total = 0;
      ...
Dynamic Compilation
                    • eval
                          •   Evaluates a string and returns the result.

 ...
Global Object
                    • Container for all variables
                    • On browsers window == global
       ...
Good
                          Practices




Monday, October 4, 2010
Modules

                          var MyNamespace = {};


                          var MyNS = MyNS || {};




Monday, Oc...
Cascade
                          setFirst: function(name) {
                            this.first = name;
              ...
Encapsulation
                          var Esperanto = Esperanto || {};

                          Esperanto.Lab = functi...
Local Functions
                 costData: function(current) {
                     var data = {};
                     fu...
self = this
      attachFormListener: function(form, object) {
          var self = this;
          function populator(eve...
Mixins

                Object.mixin = function(destination, source) {
                   for (property in source)
       ...
Test
                    • QUnit
                    • JsTest
                    • ScrewUnit
                    • jSpec
...
jQuery
                          write less, do more.




Monday, October 4, 2010
Monday, October 4, 2010
jQuery Philosophy


                    • Find some HTML
                    • Do something to it


Monday, October 4, 2010
Find some HTML
                          $(“div”)


                          <html>
                          <body>
    ...
Do something to it!
                           $(“div”).addClass(‘cool’);


        <html>
        <body>
            <div...
Document Ready

                           $(function(){
                             // Document is ready
               ...
Tools




Monday, October 4, 2010
Debuggers

                    • Firebug
                    • Apple Dev Tools
                    • Chrome Dev Tools
    ...
CSS Tools

                    • http://codylindley.com/jqueryselectors/
                    • Selector Gadget
           ...
Minification

                    • JsMin
                          •   http://www.crockford.com/javascript/
             ...
Build Tools

                    • Rake
                    • SCons
                    • Ant
                    • Script...
File Watchers
                    • xrefresh for Firefox and IE
                          •   http://xrefresh.binaryage.co...
Monday, October 4, 2010
Demo
                          Browser Command Line


                    • jQuery (10 lines)
                    • Sinatr...
Questions?
                             Anders Janmyr
                            http://anders.janmyr.com
               ...
Upcoming SlideShare
Loading in …5
×

Javascript the Interlingua of the Web

6,063 views

Published on

Javascript is one of the worlds most used programming languages. Yet, most programmers dislike it and it is treated like a second class citizen. The Javascript language has a reputation of being an ugly programming language and to some extent rightfully so, but under the ugly surface is a beautiful programming language with lambdas and closures. In this presentation you will learn to use Javascript, functional programming techniques, and some useful tools.

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,063
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
18
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Javascript the Interlingua of the Web

  1. 1. Javascript The Interlingua of the Web Anders Janmyr http://anders.janmyr.com anders.janmyr@jayway.com @andersjanmyr Monday, October 4, 2010
  2. 2. Ugly Javascript Monday, October 4, 2010
  3. 3. Beautiful Javascript Monday, October 4, 2010
  4. 4. Y-Combinator Scheme (Lisp) (define Y (lambda (X) ((lambda (procedure) (X (lambda (arg) ((procedure procedure) arg)))) (lambda (procedure) (X (lambda (arg) ((procedure procedure) arg))))))) Monday, October 4, 2010
  5. 5. Y-Combinator Javascript function Y (X) { return (function(procedure) { return X(function(arg) { return procedure(procedure)(arg); }); })(function(procedure) { return X(function(arg) { return procedure(procedure)(arg); }); }); } Monday, October 4, 2010
  6. 6. Object Dynamic Monday, October 4, 2010
  7. 7. Object Hashtable Monday, October 4, 2010
  8. 8. Object Prototypical Monday, October 4, 2010
  9. 9. Object Literal var empty_object = {}; Monday, October 4, 2010
  10. 10. var kjell = { name: "Kjell", "kind": "Malayan" }; Monday, October 4, 2010
  11. 11. var kjell = { name: "Kjell", "kind": "Malayan" address: { country: "Denmark" } }; Monday, October 4, 2010
  12. 12. Retrieval kjell.name // “Kjell” kjell["name"] // “Kjell” // Denmark kjell.address.country kjell['address']["country"] Monday, October 4, 2010
  13. 13. Retrieving non- existent properties kjell.firstname // undefined kjell["NAME"] // undefined kjell.home.country // Error Monday, October 4, 2010
  14. 14. Setting non-existent properties kjell.firstname = 'Sven'; kjell["NAME"] = 'SVEN'; kjell.firstname // 'Sven' Monday, October 4, 2010
  15. 15. Prototypical Inheritance using Object.create var rudolph = Object.create(kjell); rudolph.name // “Kjell” Monday, October 4, 2010
  16. 16. Prototypical Inheritance name Kjell kind Malayan id a4r54ed prototype Monday, October 4, 2010
  17. 17. rudolph.name = 'Rudolph'; rudolph.name // “Rudolph” kjell.name // “Kjell” rudolph.kind // ‘Malayan’ Monday, October 4, 2010
  18. 18. rudolph.kind // ‘Malayan’ kjell.kind = 'Baird'; rudolph.kind // ‘Baird’ Monday, October 4, 2010
  19. 19. delete rudolph.name rudolph.name // ‘Kjell’ Monday, October 4, 2010
  20. 20. Prototypical Inheritance new Constructor(); Returns a new object with a link to Constructor.prototype Monday, October 4, 2010
  21. 21. Prototypical Inheritance Object.create = function(o) { function F() {} F.prototype = o; return new F(); } Monday, October 4, 2010
  22. 22. Arrays • Array inherits from object • Indexes are converted to strings • Magic length property • Always one larger than the highest int property Monday, October 4, 2010
  23. 23. Array Literals •[] • names = [ ʻRudolphʼ, ʻKjellʼ, ʻTorstenʼ] • typeof value == ʻobjectʼ • value.constructor === Array Monday, October 4, 2010
  24. 24. Array Methods • concat • join • pop • push • slice • sort • splice Monday, October 4, 2010
  25. 25. JSON { "version": "1.0", "markets": [ { "name": "Europe", "currency": "EUR"}, { "name": "North America", "currency": "USD"}, { "name": "Other", "currency": "USD"} ], "serviceTypes": ["Maintenence", "WearingPart"], "valueTypes": ["Market value", "Trade in value"] } Monday, October 4, 2010
  26. 26. Function First class object Monday, October 4, 2010
  27. 27. Function lambda function() {}; Monday, October 4, 2010
  28. 28. Function Statement function foo() {} expands to var foo = function foo() {}; Monday, October 4, 2010
  29. 29. Functions Can be defined inside other functions! Monday, October 4, 2010
  30. 30. residualValues: function(cur) { var self = this; return function() { return [1,2,3,4,5].map(function(age) { return { years: age, value: self.tradePercent(cur, age) }; }); } } Monday, October 4, 2010
  31. 31. Methods functions stored in objects Monday, October 4, 2010
  32. 32. Built-in Prototypes • Object.prototype • Array.prototype • Function.prototype • Number.prototype • String.prototype Monday, October 4, 2010
  33. 33. Array.prototype.contains = function(element) { for (var i = 0; i < this.length; i++) { if (this[i] == element) return true; } return false; } [1, 2, 3].contains(3); // true Monday, October 4, 2010
  34. 34. Function.prototype.method = function(name, func) { this.prototype[name] = func; return this; } Monday, October 4, 2010
  35. 35. String.method(‘trim’, function() { return this.replace(/^s+|s+$/g, ‘’); } “ tapir “.trim(); // “tapir” Monday, October 4, 2010
  36. 36. Dynamics Monday, October 4, 2010
  37. 37. Scope The function is the scope of the variables Monday, October 4, 2010
  38. 38. Invocation Forms • •Function form sleep(10) • •Method form kjell.sleep(10) • kjell[“sleep”](10) • Constructor form • new sleep(10) • •Apply form sleep.apply(rudolph, 10) Monday, October 4, 2010
  39. 39. this Invocation this is an extra this Form dynamic the global parameter that function object depends on the method kjell calling form constructor a new object apply rudolph Monday, October 4, 2010
  40. 40. arguments • A special array like, DYNAMIC, parameter • All the arguments of the invocation Monday, October 4, 2010
  41. 41. function sum() { var i, n = arguments.length, total = 0; for (i = 0; i < n; i += 1) { total += arguments[i]; } return total; } sum(1, 2, 3, 4); Monday, October 4, 2010
  42. 42. Dynamic Compilation • eval • Evaluates a string and returns the result. • new Function(parameterArray, codeString) • Creates and returns a function. • var add=new Function("a", "b", "return a+b;"); Monday, October 4, 2010
  43. 43. Global Object • Container for all variables • On browsers window == global • Any var not declared is global • Global variables are Dangerous Monday, October 4, 2010
  44. 44. Good Practices Monday, October 4, 2010
  45. 45. Modules var MyNamespace = {}; var MyNS = MyNS || {}; Monday, October 4, 2010
  46. 46. Cascade setFirst: function(name) { this.first = name; return this; } person .setFirst(“Anders”) .setLast(“Janmyr”) .setAge(40); Monday, October 4, 2010
  47. 47. Encapsulation var Esperanto = Esperanto || {}; Esperanto.Lab = function() { var privVar = "example"; function privFunc() { return privVar; } return { example: function() { return privFunc(); } } }() Monday, October 4, 2010
  48. 48. Local Functions costData: function(current) { var data = {}; function addEntry(name, cost) { data[name + "PerHour"] = model.withTwoDec(cost/hours); data[name] = model.noDecimalsWithSeparator(cost); }; addEntry("interest", this.financialCost(current)), addEntry("depreciation", this.depreciationCost(current)), return data; }, Monday, October 4, 2010
  49. 49. self = this attachFormListener: function(form, object) { var self = this; function populator(event) { self.populateFromForm(form, object); object.notify(); }; form.getElements().each(function(child) { child.observe('change', populator); }); }, Monday, October 4, 2010
  50. 50. Mixins Object.mixin = function(destination, source) { for (property in source) destination[property] = source[property]; return destination; } Monday, October 4, 2010
  51. 51. Test • QUnit • JsTest • ScrewUnit • jSpec • ... Monday, October 4, 2010
  52. 52. jQuery write less, do more. Monday, October 4, 2010
  53. 53. Monday, October 4, 2010
  54. 54. jQuery Philosophy • Find some HTML • Do something to it Monday, October 4, 2010
  55. 55. Find some HTML $(“div”) <html> <body> <div>Malayan Tapir</div> <div>Baird Tapir</div> </body> </html> Monday, October 4, 2010
  56. 56. Do something to it! $(“div”).addClass(‘cool’); <html> <body> <div class=‘cool’>Malayan Tapir</div> <div class=‘cool’>Baird Tapir</div> </body> </html> Monday, October 4, 2010
  57. 57. Document Ready $(function(){ // Document is ready }); Monday, October 4, 2010
  58. 58. Tools Monday, October 4, 2010
  59. 59. Debuggers • Firebug • Apple Dev Tools • Chrome Dev Tools • Internet Explorer Developer Tools Monday, October 4, 2010
  60. 60. CSS Tools • http://codylindley.com/jqueryselectors/ • Selector Gadget • Nokogiri • XML, HTML, SAX Parser Monday, October 4, 2010
  61. 61. Minification • JsMin • http://www.crockford.com/javascript/ jsmin.html • YUI Compressor • http://developer.yahoo.com/yui/compressor/ Monday, October 4, 2010
  62. 62. Build Tools • Rake • SCons • Ant • Scripts Monday, October 4, 2010
  63. 63. File Watchers • xrefresh for Firefox and IE • http://xrefresh.binaryage.com/ • LiveReload for Safari and Chrome • http://github.com/mockko/livereload • Watchr • gem install watchr Monday, October 4, 2010
  64. 64. Monday, October 4, 2010
  65. 65. Demo Browser Command Line • jQuery (10 lines) • Sinatra (10 lines) • LiveReload Monday, October 4, 2010
  66. 66. Questions? Anders Janmyr http://anders.janmyr.com anders.janmyr@jayway.com @andersjanmyr Monday, October 4, 2010

×