Sit Amet"; str.toLowerCase(); //"lorem ipsum dolor sit amet" str.toUpperCase(); //"LOREM IPSUM DOLOR SIT AMET" str.split(" "); //["Lorem", "Ispum", "Dolor", "Sit", "Amet"] str.substring(6,9); //"Ips" new String("Lorem Ipsum Dolor Sit Amet") == str; //true Strings Thursday, July 5, 12
B compared by value alone •1 == “1” evaluates to true •a === b / a !== b •A and B compared by value and by type •1 === “1” evaluates to false Thursday, July 5, 12
the browser window •The “global” object: foo === window.foo •Things like window.location.href, etc •document •Provides access to the current DOM Thursday, July 5, 12
return baz; } return Bar(); } Foo(); //1 Lexical Scoping function Foo() { var baz = 1; return Bar(); } function Bar() { return baz; } Foo(); //baz is not defined Thursday, July 5, 12
(thus “hoisted” to the top of the file). Anonymous functions, or functions assigned to variables, require evaluation before they become available foo(); //called foo! function foo() { console.log('called foo!'); } foo(); //called foo! bar(); //undefined is not a function var bar = function() { console.log('called bar!'); } bar(); //called bar! Hoisting Thursday, July 5, 12
an object •Named Functions double as object constructors •Function objects contain a prototype dictionary that is copied to instance when using new Thursday, July 5, 12
Insert the script before the first script tag in the body of the document var script = document.createElement('script'); script.src = "http://path.to/script.js"; script.async = true; var s = document .getElementsByTagName('script')[0]; s.parentNode .insertBefore(script, s); Async Script Loading Thursday, July 5, 12
exceptions, real-time data dumping, and code execution within the current context •Your best friend •Though older IEs FREAK OUT when you leave it in, remove before deploy! Thursday, July 5, 12
value displayed is not value at the moment of the call •Your if/else conditionals will work yet console.log will return something that should cause them to fail Thursday, July 5, 12
a function utility, is now globally accessible without fearing collision with other functioned similarly named App = window.App || {}; App.utility = function() { //Globally available, no //conflicts }; Safe Extension Thursday, July 5, 12
code minus comments •Can be eval()’ed •But don’t! Use JSON2.js or equivalent •Minimal overhead compared to XML •No parsers required, native mapping Thursday, July 5, 12
foo that are children of the top level matched set Apply the css style of color:red; Pop the matching of .foo off the jQuery object Find elements of class bar that are children of the top level matched set (ul.first) Apply the css style of color:blue; $('ul.first') .find('.foo') .css('color', 'red') .end().find('.bar') .css('color', 'blue') .end(); Chaining Thursday, July 5, 12
event (page is done loading) }); $(document).bind('ready', function() { //Equivalent to the above }); $(function() { //Shortcut, equivalent to the above }); Events Thursday, July 5, 12
a.foo element that was clicked $('a.foo').click(function(){ var $this = $(this) , href = $this.href(); //href will be the clicked //links href }); jQuery Thursday, July 5, 12
element at the specific point in time it was bound • New elements that match will not be included •Using .on or .off produces a delegate listener that scans for bubbled events that match a selector • New elements that match said selector WILL be included Thursday, July 5, 12
descendant of .grandparent will trigger this event on click Any future a tags that are added as a descendant of .grandparent will trigger this event on click $('.grandparent') .on('click', 'a', function(e){ var $target = $(e.target); //$target will *usually* //be the a tag, though //sometimes it will be a //nested tag }); Live Events Thursday, July 5, 12
instance. The first click handler will fail. The keyword this will not be a reference to the instance of Foo as expected, but a reference to the matched DOM element that was clicked. jQuery.proxy() will wrap your function such that further invocations will use the context you set for this function Foo() {} Foo.prototype.baz = function() {}; Foo.prototype.bar = function() { this.baz(); }; var instance = new Foo(); $('element').click(instance.bar); $('element').click( jQuery.proxy( instance.bar, instance ); ); Proxy Thursday, July 5, 12
and then remove it from the DOM $('.button').click(function(){ $('img.preview') .fadeOut(600, function() { $(this).remove(); }); }); Animation Thursday, July 5, 12
$() and jQuery will create the element and return it wrapped in jQuery •Second parameter is dictionary for properties •Then use methods like .append() to insert Thursday, July 5, 12
of #bar with: <strong>Testing</strong> $('#foo') .html("<strong>Testing</strong>"); $('#bar') .text("<strong>Testing</strong>"); DOM Override Thursday, July 5, 12
outside the one said JavaScript was loaded from •If you include http://sub.domain.tld/file.js, it cannot make AJAX requests to http:// another.tld/ •It can make requests to http://domain.tld/ Thursday, July 5, 12
file (create an inject a script tag into the DOM) •Response is a function (defined by a callback GET parameter) that executes and returns value Thursday, July 5, 12
state, each successive iteration must be returned var inp = [1, 2, 3]; _(inp).reduce(function(mem, n){ return mem + n; }); //Iter 0: mem = 1 | n = 2 //Iter 1: mem = 3 | n = 3 //Returns: 6 Reduce Thursday, July 5, 12
(iterator) provided, will use to produce the value to be compared var stooges = [ {name: 'moe', age: 40} , {name: 'larry', age: 50} , {name: 'curly', age: 60} ]; _.max(stooges, function(s){ return s.age; }); //Returns {name: 'curly', age: 60} Max (Min) Thursday, July 5, 12
underscore but with the value attached [similar to opening with _(val)]. The chain continues until the value is extracted using .value() var stooges = [ {name : 'curly', age : 25}, {name : 'moe', age : 21}, {name : 'larry', age : 23} ]; var youngest = _.chain(stooges) .sortBy(function(s){ return s.age; }) .map(function(s){ return s.name + ' is ' + s.age; }) .first() .value(); //Returns "moe is 21" Chaining Thursday, July 5, 12
a nested array [[key, val], [key, val], ..] sortBy: sorts array returned by map by key (first element) reduce: reforms an object using the nested list, [0] as key and [1] as value value: spits out the value an ends the chain _(request.params).chain() .map(function(v, k) { return [k,v]; }) .sortBy(function(a) { return a[0]; }) .reduce(function(s, v){ s[v[0]] = v[1]; return s; }, {}) .value(); Chain: FUN! Thursday, July 5, 12
dcousineau
osakatechlab
kbaba1001
ivargrimstad
dropout009
yusukebe
philipschwarz
uetyo
n3xem
taiyow
hirobe1999
irumaru
stoneream
gr2m
eileencodes
bryan
lauravandoore
addyosmani
jlugia
quramy
samanthasiow
deanohume
philnash
honnibal
![var arrayShort = [ 'one', 'two' ]; arrayShort[2] = 'three';](https://files.speakerdeck.com/presentations/5011b96dfd90ca0002007f95/slide_15.jpg){kind=link}
![var arr = [1,2,3,4,6]; arr.indexOf(2); //1 arr.join(':'); //"1:2:3:4:6" arr.pop(); //6](https://files.speakerdeck.com/presentations/5011b96dfd90ca0002007f95/slide_16.jpg){kind=link}
![var arr1 = [1,2,3]; var arr2 = [3,4,5]; arr1.concat(arr2); //[1,2,3,3,4,5]](https://files.speakerdeck.com/presentations/5011b96dfd90ca0002007f95/slide_17.jpg){kind=link}
![["api", "response"] callback(["api", "response"]); JSONp domain.tld/api.json domain.tld/api.jsonp?callback=callback Thursday, July 5,](https://files.speakerdeck.com/presentations/5011b96dfd90ca0002007f95/slide_124.jpg){kind=link}
