No description, website, or topics provided.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
presentation.txt
readme.mdown

readme.mdown

Javascript Conventions

== vs ===

1 == "1"; // true
false == " \n\t "; // true
0==false; // true
new Array([],null,undefined,null) == ",,,"; //true

Fixed with ===:

1 === "1"; // false
false === " \n\t "; // false
0===false; // false
new Array([],null,undefined,null) === ",,,"; // false

Avoiding globals

Before:

var date = new Date(),
    number = date.getDay(),
    day = "";
switch (number)
{
case 0:
  day = "Sunday";
  break;
case 1:
  day = "Monday";
  break;
case 2:
  day = "Tuesday";
  break;
case 3:
  day = "Wednesday";
  break;
case 4:
  day = "Thursday";
  break;
case 5:
  day = "Friday";
  break;
case 6:
  day = "Saturday";
  break;
}

After (with anonymous function):

window.day = "";
(function() {
  var date = new Date(),
      number = date.getDay();
  switch (number)
  {
  case 0:
    window.day = "Sunday";
    break;
  case 1:
    window.day = "Monday";
    break;
  case 2:
    window.day = "Tuesday";
    break;
  case 3:
    window.day = "Wednesday";
    break;
  case 4:
    window.day = "Thursday";
    break;
  case 5:
    window.day = "Friday";
    break;
  case 6:
    window.day = "Saturday";
    break;
  }
})();

Using closures

Before:

function adder(x, y) {
  return x + y;
}
alert(adder(2, 3)); // 5
alert(adder(2, 5)); // 7

After (with closures):

function makeAdder(x) {
  return function(y) {
    return x + y;
  };
}

var add2 = makeAdder(2);

alert(add2(3)); // 5
alert(add2(5)); // 7

Inline HTML

Before:

var widgetStructure = '<div id=' + widgetID + '>' +
	                      '<h2 id="' + widgetTitleID + '">' + widgetTitle + '</h2>' +
                        '<div id="' + widgetContentID + '" style="' + widgetContentStyles + '">' +
                          (function() {
                            var paras = '';
                            for (var i = 0; i < paraItems.length; ++i) {
                              paras += '<p>' + paraItems[i] + '</p>';
                            }
                            return paras;
                           })() +
                        '</div>' +
	                    '</div>';

After:

<div id="widget-template" style="display-none">
...
</div>

var new_widget = $("#widget-template").clone();
var widget = {
  id: widgetId,
  id_title: widgetTitleID
  title: widgetTitle,
  content_id: widgetContentID, 
  content_styles: widgetContentStyles,
  paragraphs:  paraItems
}
var html = new EJS({url: 'widget.ejs'}).render(data);

Inline Javascript vs. Unobstructive Javascript

Before:

<button class="alert-me" onClick="alert('42!')">

After:

$("button.alert-me").live("click", function() {
    alert("42!");
  });

Javascript's this

function HotDog() {
    this.condiments = "mustard, ketchup";
    this.getCondiments = function() {
      alert(this.condiments);
    }
}
var myHotDog = new HotDog();
// Call the getCondiments function in 3 seconds
setTimeout(myHotDog.getCondiments, 3000); // error

Fixed:

var myHotDog = new HotDog();
setTimeout(function() {
    myHotDog.getCondiments();
}, 3000);

Fixed (using jQuery to redefine this):

// Call the getCondiments function in 3 seconds
setTimeout($.proxy(myHotDog.getCondiments, myHotDog), 3000); // no error

Self

Use self as a way to point to the current object and not redefine this

$(".add-button").click(function (e) {
  // this points to the HTML element
  // so I'll define self to point to the jQuery obj
  var self = $(e.target);
});