@patheard / PWGSC
// Following evaluate to false
undefined
null
0
-0
NaN
""
var car = {
type: "k-car",
cheap: true,
wheels: 4,
getSpeed: function () {
return 60;
} };
// i has a value of undefined
var i;
// i, j and k are undefined
var i, j, k;
// i, j and k are defined
var i = 1, j = "foo", k = false;
var scope = "global";
function getGlobal () {
return scope;
}
function getLocal () {
var scope = "local";
return scope;
}
console.log(getGlobal()); // "global"
console.log(getLocal()); // "local"
var scope = "global";
function outputScope () {
console.log(scope); // undefined
var scope = "local";
console.log(scope); // "local"
}
outputScope();
// function that takes 2 parameters
function multiply (a, b) {
return a * b;
}
// calling the function with 2 arguments
multiply(2, 3); // 6
multiply.call({}, 4, 5); // 20
var hello = function () {
return "Hello World";
};
var me = {
feeling: function (say) {
return "Feeling " + say;
}
};
function sayHello(name) { var phrase = "Howdy " + name;
var called = 0;
return function(emoticon) {
return phrase + " " + emoticon + " " + (++called);
}; }
var pat = sayHello("Pat");
console.log(pat(":)")); // "Howdy Pat :) 1"
console.log(pat(":/")); // "Howdy Pat :/ 2"
= // assignment
==, != // equality, inequality
===, !== // strict equality, inequality (type must match)
<, <=, >=, > // greater and less than
+, -, *, / // arithmetic operations and string concat
++, -- // pre/post increment and decrement
+=, *=, -=, /= // arithmetic and assignment
% // module (remainder)
&&, ||, ! // logical AND, OR, NOT
?: // conditional operator (ternary operator)
if (answer === 42) { // Do something fancy
} else {
// Do something less fancy
}
switch(n) {
case 1:
// logic for n == 1
break;
case 2:
// logic for n == 2
break;
default:
// logic if no matching case
break; }
var count = 0; while (count++ < 10) { // loop 10 times }
do {
// loop 11 times
} while (count++ < 10);
for (var i = 0, l = a.length; i < l; i++) {
console.log(a[i]); // loop over an array
}
for (var p in o) {
console.log(p + ": " + o[p]); // loop over object properties
}
var count = 0;
while (count++ < 10) {
if (count === 8) {
break; // jumps out of the loop
} else if (count === 3) {
continue; // jumps to next iteration of the loop
}
console.log(count);
}
var obj = {
prop1 : "foo",
prop2 : "bar",
someMethod : function () {
return this.prop1 + this.prop2;
}
};
obj.someMethod();
function Shape(x, y) {
this.x = x;
this.y = y;
this.getArea = function () {
return this.x * this.y;
}
}
var s = new Shape(5, 5);
s.getArea();
// me inherits age and height properties
var me = Object.create({age: 35, height: 180});
// customDate inherits Date properties/methods
var customDate = Object.create(Date.prototype, {
someProp: {
value: "foo"
}
});
function Shape(x, y) {
this.x = x;
this.y = y;
}
Shape.prototype = {
getArea: function () {
return this.x * this.y;
}
};
function Rectangle(x, y) {
Shape.call(this, x, y);
}
Rectangle.prototype = Object.create(Shape.prototype);
var r = new Rectangle(10, 5);
r.getArea();
var o = {
x: 1
};
o.x; // 1
o['x']; // 1
var prop = 'x';
o[prop]; // 1
var a = [1, 2, 3];
a.push(4); // Add an element to the end
a.pop(); // Remove the last element
var b = new Array();
b["cat"] = "meow";
b.dog = "woof";
for (var i = 0, l = a.length; i < l; i++) {
console.log(a[i]);
}
// CSS selectors
var $h1 = $('h1'),
$notes = $('p.notes'),
$firstNote = $notes.filter(':first-child');
// DOM elements
var p = document.getElementById('foo'),
$p = $(p); // or even easier, $('#foo')
var $notes = $('#content > .notes');
$notes.css('background-color', 'red');
$notes.css({
opacity: .5,
fontSize: '1em'
});
$notes.addClass('big').removeClass('red');
$notes.toggleClass('big');
$('a').attr('href', 'http://google.ca');
$('input[type="checkbox"]').prop('checked', true);
var $notes = $('.notes');
$notes.animate({height: 100}, 500, function () {
console.log('finished animation!');
});
.notes {
height: 50px;
transition: height 1s ease-in;
}
.notes.taller {
height: 100px;
}
$('p').on('click', function() {
$(this).text('clicked');
});
$('p').trigger('click');
var $p = $('p');
$p.off('click').on('click', function(event) {
$p.text('clicked');
event.stopPropagation(); // stops the event from bubbling
});
$p.click();
$('p').parent();
$('p').parents('div');
$('p').children();
$('p').filter('.foo').find('strong');
var t = new Date().getTime();
// Do some stuff
console.log(new Date().getTime() - t);