celine-m-s/Javascript Cheat Sheet

## Javascript Cheat Sheet
// 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();
});
	// 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();
	});