Untitled

// Javascript Cheat Sheet

/************************************
*********** DOM: How to... *********
************************************/
// Find an element by its ID
document.getElementById("anId");

// Show an element
element.show();

// Hide an element (display:none;)
element.hide();

/************************************
************** Variables ************
************************************/

// Variables: All data has a type associated with it which determines what you can do with it.

"I'm a string" // string: a chain of characters
1 // number: integer
1.2 // number: float
true // boolean: true or false
["I'm a string", 1, 1.2, true, false] // array: stores multiple values in a single variable

// Set variables
var string = "I'm a string";
var integer = 1;
var float = 1.2;
var boolean = true;
var array = ["I'm a string", 1, 1.2, true];

// Change variables
string = "I'm still a string but with another value";
integer = 2;
boolean = false;

/************************************
*********** Math expressions *********
************************************/

+ // Add
- // Remove
* // Multiply
// Devide
/
% // Modulo: returns the remainder when a division is executed.
3 % 3 // Returns 0
3 % 2 // Returns 1
++ // Adds 1
-- // Removes 1

// Comparisons
== // Equal
!= // Different
> // Superior
< // Inferior
>= // Superior or equal
<= // Inferior or equal

// Conditions
if (someCondition == true) {
  // do something
}
else if (someOtherCondition == false) {
  // do something
}
else {
  // do something
}

/************************************
************** Use Case 1 ***********
************************************/
var recipe = "Porridge";
var packets = 3;
var isScottish = true; // camelCase when a variable is made of many words.

var myBreakfast = "I like having " + recipe + " at breakfast. In fact I eat " + packets + " packets a week.";

if (isScottish == true) {
document.getElementById("breakfast").innerHTML = myBreakfast;
}
else {
document.getElementById("breakfast").innerHTML = "I only have coffee.";
}


/************************************/
/********* Objects: How to... *******/
/************************************/

// Get all properties of an object
Object.getOwnPropertyNames(replaceWithYourVariable);

/************************************/
/*************** Loops **************/
/************************************/

// While loop
var numbers = [1, 2, 3, 4, 10, 20];
var incrementer = 0;
while (incrementer < numbers.length) {
  numbers[incrementer] *= 2;
  incrementer ++;
}
// returns numbers = [2, 4, 6, 8, 20, 40]

// For loop
var numbers = [1, 2, 3, 4, 10, 20];
for (var i = 0; i < numbers.length; i++) { // first we set the value of i, then we set the condition and at the end the incrementent.
  numbers[incrementer] *= 2;
}
// returns numbers = [2, 4, 6, 8, 20, 40]

/************************************/
/************* Functions ************/
/************************************/

function sandwich(filling) { // Define a new function. "filling" is an optional argument. Leave empty parenthesis if the argument is not needed.
  alert("A delicious " + filling + " sandwich!");
}
sandwich("extra butter"); // Then use it

/************************************/
/************** Events **************/
/************************************/

// Click event
selector.onclick = function(){
  // Do something
};

// Hover event
selector.onmouseover = function(){
  // Do something
};

/************************************/
/******** Declare Javascript ********/
/************************************/

// Inline, in the HTML. NOT RECOMMENDED
<button onclick="style.backgroundColor = 'yellow';">Click me!</button>

// At the end of the <body>
<script>
    document.getElementById("button").onclick = function(){
      this.style.backgroundColor = 'yellow';
    }
</script>

// In a separated file
<head>
    <script type="text/javascript" src="url/to/source"></script>
</head>

/************************************/
/************ Libraries *************/
/************************************/

// jQuery
// Instead of innerHTML = something;
$( "button.blue" ).html( "I'm feeling blue." ); // Use CSS selectors

// Instead of onclick = function(){};
$( "button.clickMe" ).click(function(){
  $(this).css("background-color", "blue");
});

// Instead of onmouseover
$( "button.hoverMe" ).hover(function(){
  $(this).hide();
});