JavaScript - Like a Box of Chocolates - jsDay

JavaScript
Like a Box of Chocolates

@robertnyman

http://robertnyman.com

“Are you telling me that I can’t get away
anymore without getting deeply into Javascript?”

- Developer

“That is a disaster for me! I have made a career
out of actively avoiding Javascript.”

- Developer

“If I cant continue to ignore Javascript, then you
may as well amputate one of my limbs.”

- Developer

// Various "false" values
var nullVal = null;
var undefinedVal = undefined;
var zeroVal = 0;
var falseVal = false;
var emptyString = "";

// All would equal false in an if-clause
if (emptyString) {
// Would never go in here
}

“Coercion is the practice of forcing another party
to behave in an involuntary manner”

- Wikipedia

rci on
c oe
// Equality
Ty pe
if (7 == "7") {
// true
}

// Identity
if (7 === "7") {
// false
}

// Type coercion
var sum = "5" + 6 + 7; // 567

// Prevent type coercion
var sum = parseInt("5", 10) + 6 + 7; // 18

// Self-invoking functions
(function () {
var investment = "Lieutenant Dan got me
invested in some kind of fruit company.";
})();

// Using arguments
function friends (friend1, friend2) {
return friend1 + " & " + friend2;
}

// Lieutenant Dan & Bubba
friends("Lieutenant Dan", "Bubba");

// Lieutenant Dan & undefined
friends("Lieutenant Dan");

// Using the arguments collection
function friends () {
var allFriends = [];
for (var i=0, il=arguments.length; i<il; i++) {
allFriends.push(arguments[i]);
};
return allFriends.join(" & ");
}

// Lieutenant Dan & Bubba
friends("Lieutenant Dan", "Bubba");

// Lieutenant Dan
friends("Lieutenant Dan");

// Object declaration
function Forrest () {
this.firstName = "Forrest";
this.lastName = "Gump";
}

var forrest = new Forrest();

// Object declaration, literal style
var forrest = {
firstName : "Forrest",
lastName : "Gump"
};

// Iterating over properties
for (var item in forrest) {
console.log(item + ": " + forrest[item]);
}

var forrest = {
firstName : "Forrest"
};

// Safe check for property
if ("firstName" in forrest) {
console.log(forrest.firstName);
}

function ForrestAsChild {
this.firstName = "Forrest";
};

// Method set via prototype
ForrestAsChild.prototype.runsFast = function () {
return true;
};

function ForrestAsGrownup {
this.joinsArmy = true;
};

// Prototype for new object
ForrestAsGrownup.prototype = new ForrestAsChild;

// Method set via prototype
ForrestAsGrownup.prototype.ruinsBathrobe = function () {
return "I think I ruined your roommate's bathrobe";
};

// Create an instance
var forrest = new ForrestAsGrownup();

// Returns "I think I ruined your roommate's bathrobe"
forrest.ruinsBathrobe();

// Returns true - from ForrestAsChild
forrest.runsFast();

// Fails
forrest.codesJavaScript();

forrest instance

ForrestAsGrownup

ForrestAsChild

Object

// Extending core JavaScript objects
if (typeof Array.prototype.push === "undefined") {
Array.prototype.push = function () {
for (var i=0, il=arguments.length; i<il; i++) {
this[this.length] = arguments[i];
};
return this;
}
}

var locations = ["Vietnam"];
locations.push("China", "White House");
// locations = ["Vietnam", "China", "White House"];

// Scope - global or local

// Global
var quote = "I had run for 3 years, 2 months,
14 days, and 16 hours."

function () {
// Local
var pantherParty = "I'm sorry I had to
fight in the middle of your Black Panther
party.";

// Global
question = "And so, you just ran?";
}

// Global
function meetingJFK () {
var JFKQuestion = "Congratulations, how do
you feel?";

// Local
function forrestReply () {
return "I gotta pee.";
}

return forrestReply();
}

meetingJFK(); // I gotta pee
forrestReply(); // Error: not accessible

// Controlling scope
function whoAmI () {
return this.nodeName;
}

whoAmI(); // undefined
whoAmI.call(document, "Hello"); // #document
whoAmI.apply(document.body, ["Hello", "Greetings?"]); // BODY

// closures
function happens (what) {
return function (verb) {
return what + " " + verb;
}
}

var action = happens("Shit");

action("happens"); // Shit happens

// closures
function happens (what) {
return function (verb) {
return what + " " + verb;
}
}

var action = happens("Shit");

// Breaking it down
var action = function (verb) {
return "Shit" + " " + verb;
};

var link;
for (var i=0; i<3; i++) {
link = document.createElement("a");
link.innerHTML = "Link " + i;
link.onclick = function () {
alert("I am link " + i);
};
document.body.appendChild(link);
};

var link;
for (var i=0; i<3; i++) {
link.innerHTML = "Link " + i;
link.onclick = function (index) {
return function () {
alert("I am link " + index);
};
}(i);
document.body.appendChild(link);
};

// Yahoo! JavaScript Module Pattern
var forrest = function () {
var firstName = "Forrest";

return {
getFirstName : function () {
return firstName;
}
};
}();

// Returns "Forrest"
forrest.getFirstName();

var forrest = function () {
var firstName = "Forrest",
getFirstName = function () {
return firstName;
};

return {
getFirstName : getFirstName
};
}();

// Returns "Forrest"
forrest.getFirstName();

// Namespacing
var Movie = {};

Movie.forrest = function () {
var lastName = "Gump";

return {
return this.firstName;
}
};
}();

Movie.forrest = function () {
var lastName = "Gump";

return {
return this.firstName;
}
};
}();

Movie.lieutenantDan = function () {
var lastName = "Taylor";

return {
firstName : "Dan",
getFullName : function () {
return Movie.forrest.getFirstName.call(this) + " " + lastName;
}
};
}();

Movie.lieutenantDan.getFullName();

// Minimize DOM access
document.getElementById("container").className = "js-enabled";
document.getElementById("container").innerHTML += "Hello Verona";
document.getElementById("container").innerHTML += "Tell me how you doin'!";
document.getElementById("container").innerHTML += "Lovely to be here...";
document.getElementById("container").innerHTML += "...at a World Heritage Site";

// Minimize DOM access
var container = document.getElementById("container"),
content = "Hello Verona";
container.className = "js-enabled";
content += "Tell me how you doin'!";
content += "Lovely to be here...";
content += "...at a World Heritage Site";
container.innerHTML = content;

// Looping, variables and array lookups
function forrestForm () {
var allParagraphs = document.getElementsByTagName("p");
for (var i=0; i<allParagraphs.length; i++) {
var link = document.createElement("a");
link.href = "http://en.wikipedia.org/wiki/Forrest_Gump";
link.title = "Read about Forrest Gump at Wikipedia";
link.innerHTML = "Forrest Gump";

allParagraphs[i].className = "Forrested";
allParagraphs[i].appendChild(link);
}
}

// Looping, variables and array lookups
function forrestForm () {
var allParagraphs = document.getElementsByTagName("p");
for (var i=0, l=allParagraphs.length, link, paragraph; i<l; i++) {
link.href = "http://en.wikipedia.org/wiki/Forrest_Gump";
link.title = "Read about Forrest Gump at Wikipedia";
link.innerHTML = "Forrest Gump";

paragraph = allParagraphs[i];
paragraph.className = "Forrested";
paragraph.appendChild(link);
}
}

// Variable declaration
function richAndStupid () {
var rich = "And cause I was a gazillionaire, I
cut that grass for free.",
stupid = "Stupid is as stupid does.";
}

if (!("a" in window)) {
var a = 1;
}
alert(a); // undefined

function value () {
return 1;
}
var value;
alert(typeof value); // function

function value () {
return 1;
}
var value = 3;
alert(typeof value); // number

// Semicolon insertion
return
return; // Semicolon insertion
{ // Considered an empty block
javascript : "Fantastic!"
}; // Semicolon insertion, dummy line

3.toString(); // Error
3..toString(); // "3"

var number = 5,
check = {
number: 10,
getNum: function () {
var number = 20;
setTimeout(function () {
alert(this.number);
}, 10);
}
};
check.getNum(); // 5

http://chrome.angrybirds.com/

Robert Nyman
http://robertnyman.com/speaking/

Twitter: @robertnyman

Pictures:

Chocolate: http://10000likes.blogspot.com/2010_11_01_archive.html Seinfeld: http://www.cartoonstock.com/directory/f/false_identity.asp
Robocop: http://www.meh.ro/2010/04/01/murphy-as-robocop/ Forcing: http://www.pollsb.com/polls/p2116218-forcing_guy_look_computer_screen
Bruce Willis: http://www.starsjournal.com/3192/bruce-willis-is-being-sued-for-4-million-dollars.html Play with yourself: http://verydemotivational.memebase.com/2008/06/07/funny-demotivational-posters-masturbation/
Swedish flag: http://scrapetv.com/News/News%20Pages/usa/Images/swedish-flag.jpg Overloading: http://theshadowhive.blogspot.com/2010/04/mutating-chaos-gene.html
Verona flag: http://upload.wikimedia.org/wikipedia/commons/thumb/d/dc/Flag_of_Verona.svg/568px- David Hasselhof: http://www.wimereuxwobblers.co.uk/?page_id=6
Flag_of_Verona.svg.png Pamela Anderson: http://www.dailyheadlineblog.com/television/pamela-andersons-red-swimsuit-up-for-auction/
Swedish woman/flag: http://www.olssonfoto.se/JAlbum/SGP%202008%20Ullevi/slides/Svenska%20flaggan.html Inheritance: http://www.uniquities.co.uk/acatalog/Get_your_GEEK_on.html
Euro Coin: http://accidentaldong.blogspot.com/2009/10/euro-uh-oh.html Extensible (dachshund): http://dog-breeds.findthebest.com/compare/16-55/Beagle-vs-Dachshund
Most popular language: http://odetocode.com/Blogs/scott/archive/2009/03/18/signs-that-your-javascript-skills- Tiger Woods: http://blogs.bigadda.com/pal4868546/2010/01/
need-updating.aspx Pollution: http://www.fishingfury.com/tags/pollution/
Sunrise: http://www.manywallpapers.com/space-wallpapers/earth/sunrise-from-space.html Closure: http://today.msnbc.msn.com/id/4760120
Astronaut: http://martianchronicles.wordpress.com/2009/01/23/carnival-of-space-87/ Steve Ballmer: http://www.businessinsider.com/microsoft-completely-rebooted-its-mobile-strategy-yesterday-heres-
Netscape 2: http://blog.explorelearning.com/2005/12/index.html what-you-missed-2010-2
Internet Explorer 3: http://www.guidebookgallery.org/screenshots/browser Crockford: http://gemsres.com/story/nov07/468365/Crockford_New_4681.jpg
Gandalf: http://web.mit.edu/kayla/Public/Backgrounds/LOTR%20Gandalf%204.JPG Name: http://blog.usa.gov/roller/govgab/tags/names
Now: http://www.chronicbabe.com/articles/801/ Space: http://gucken.deviantart.com/art/Sunrise-in-Space-56420137
Axe: http://bestgamewallpapers.com/a3-the-age-of-sovereign/axe Fail better: http://ozguralaz.posterous.com/ever-tried-ever-failed-no-matt
Money: http://logisticsmonster.com/2010/01/12/the-fed-earns-record-profit-loaning-our-money-to-us/joker- Hoist: http://www.gantry-crane.org/category/hoist/
burning-money-in-tdk-3/ Mila & Macaulay: http://uk.eonline.com/uberblog/b61889_mila_macaulay_home_alone.html
Happy: http://www.petetheplanner.com/blog/2011/03/08/the-cat-poo-story/ Love: http://hyderabadaseels.webs.com/
Fast: http://www.curing-premature-ejaculation.com/
Forrest Gump: http://wallpaper-s.org/36__Forrest_Gump,_1994,_Tom_Hanks,_Robin_Wright_Penn.htm

http://joind.in/talk/view/3363

JavaScript - Like a Box of Chocolates - jsDay

More Related Content

What's hot (20)

Similar to JavaScript - Like a Box of Chocolates - jsDay (20)

More from Robert Nyman (20)

Recently uploaded (20)

JavaScript - Like a Box of Chocolates - jsDay