8. Strings
"Foo" + "Bar"; //"FooBar"
var str = "Lorem Ipsum Dolor 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
9. String to Number
parseInt("56"); //56
parseInt("42.567"); //42
parseInt("asdf"); //NaN
parseInt("5a6"); //5
parseFloat("24.68"); //24.68
parseFloat("asdf"); //NaN
parseFloat("24a"); //24
10. Objects
• “Dictionary” / “Associative Array”
• Key: Value or 'Key': Value
• Without ': A-Z0-9 only
• Does not keep intrinsic ordering
• Accessed keys using . (dot) or [] notation
12. in or hasOwnProperty()
• Tough call:
• .hasOwnProperty() more consistent
• in checks inherited properties
• Used in for loop
13. in
var test = {
foo: 'value',
bar: 'value',
baz: 'value'
}
for (var key in test) {
console.log(key + ": " + test[key]);
}
//PRINTS:
//foo: value
//bar: value
//baz: value
14. Arrays
• Special object
• Numerical keys only
• Keeps intrinsic ordering
• Short ([]) and Long (new Array()) syntax
17. Arrays
var arr1 = [1,2,3];
var arr2 = [3,4,5];
arr1.concat(arr2); //[1,2,3,3,4,5]
18. Functions
• Are Objects as well
• “Elevated”
• You can use a named function before it is
defined in code
• Function definitions are elevated to the top
26. Comparison
• a == b / a != b
• A and 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
27. window, document
• Built in, global, Objects
• window
• Provides access to the browser window
• The “global” object: foo === window.foo
• Things like window.location.href, etc
• document
• Provides access to the current DOM
29. Global & Local
• Functions are the only way to create new
scopes
• Variables defined with var are local
• Variables defined without var are global
• Global variables are members of window
30. Global & Local
var outerScope = 10;
var outerScope2 = 10;
function Foo() {
var outerScope = 20;
var innerScope = 20;
globalVariable = 30;
outerScope2 = 40;
}
Foo();
alert(outerScope); //10
alert(outerScope2); //40
alert(innerScope); //error
alert(globalVariable); //30
31. Lexical Scoping
function Foo() { function Foo() {
var baz = 1; var baz = 1;
return Bar();
} function Bar() {
return baz;
function Bar() { }
return baz;
} return Bar();
}
Foo(); //baz is not defined
Foo(); //1
33. Closures
• First-Class
• Can assign functions to variables, pass as
arguments and return as values
• Anonymous
• Not required to have a name
• A function that “closes over” variables defined
outside itself
34. Closures
function Foo() {
var count = 0;
return function() {
count = count + 1;
return count;
};
}
var bar = Foo();
bar(); //1
bar(); //2
bar(); //3
35. Closures
function createAdder(amount) {
return function(input) {
return input + amount;
};
}
var add2 = createAdder(2);
add2(2); //4
add2(8); //10
var add3 = createAdder(3);
add3(3); //6
add3(7); //10
36. Module Pattern
(function(exports, undefined){
//ALL your code here
var localVar = "bar"
globalVar = "baz";
exports.foo = "bat";
})(window);
alert(localVar); //error
alert(globalVar); //"baz"
alert(window.globalVar); //"baz"
alert(foo); //"bat"
alert(window.foo); //"bat"
BEWARE: export (singular) is a reserved word in Safari
38. this
• Trips everyone up
• Special variable used within a function
• Refers to the “contextual object”
• Changes based on where a function executes
39. this
var Foo = {
bar: "bar",
baz: function() {
return this.bar;
}
};
Foo.baz(); //"bar"
Foo.bar = "bat";
Foo.baz(); //"bat"
var baz = Foo.baz;
baz(); //undefined
40. this
var Foo = {
bar: "bar",
baz: function() {
return this.bar;
}
};
Foo.bat = function() {
return this.bar + "bat";
};
Foo.bat(); //"barbat"
41. call & apply
• Methods in the function prototype
• Change the context in which a function
executes!
48. OOP... Kinda...
• Almost no real difference between a dictionary
and an object
• Named Functions double as object constructors
• Function objects contain a prototype
dictionary that is copied to instance when
using new
55. setInterval
var id = setInterval(function() {
//Code to execute every 1000 milliseconds
}, 1000);
//clearInterval(id); to stop
56. setTimeout
var id = setTimeout(function() {
//Code to execute after 1000 milliseconds have passed
}, 1000);
//clearTimeout(id); to cancel
57. Nifty Trick
setTimeout(function() {
//Code to run in parallel
//while the code after is
//executed.
}, 1);
//Code here will execute immediately
//without waiting on the above
61. DOM
var paragraph = document.createElement('p');
var content = document.createTextNode("Lorem Ipsum");
paragraph.appendChild(content);
paragraph.classList.add('my-class');
document.getElementsByTagName('body')[0].appendChild(paragraph);
65. JSON
• JavaScript Object Notation
• Serialization format that is basically JavaScript
code minus comments
• Can be eval()’ed
• Minimal overhead compared to XML
• No advanced parsers needed
69. jQuery
• Cross-browser JavaScript library
• Simplifies and normalizes DOM, AJAX, etc.
• Centers around using extended CSS selectors
to grab an element(s)
73. Animation
$('.button').click(function(){
$('img.preview')
When .button is clicked,
.fadeOut(600, function() { fade out img.preview
$(this).remove();
}); over 600 milliseconds
});
and then remove it from
the DOM
74. Events
• jQuery wraps an event handling system
• Handles browser events, AJAX events, and
custom events
75. Events
$(document).ready(function() {
//Only execute when the document fires
//its onready event (page is done loading)
});
$(document).bind('ready', function() {
//Equivalent to the above
});
77. AJAX
• Asynchronous JavaScript And XML
• Though never use XML, use JSON
• jQuery has an AJAX library
• Wraps all the different browser quirks
• IE is weird