js cheat sheet

js-cheat-sheet.js

// VARIABLES

// assign a variable to something - use the `var` keyword
var myVariable = "i love variables";

// change the value of an existing variable - don't use `var`
myVariable = "i REALLY love variables";

// change the value of a variable in place
myVariable = myVariable + " - don't you?";

// another example with numbers
var myNumber = 12;
myNumber = myNumber + 1;

// shortcuts for adding 1 to a variable
myNumber += 1;
myNumber++;


// METHODS

// call a method
"i want peanut butter".toUpperCase();

// pass in an argument to a method
var word = "foo";
word.concat("bar");


// PROPERTIES

// call a property
"supercalifragilisticexpialidocious".length;

// when you a call a method, it ends with (); when you call a property, it doesn't
"i want peanut butter".toUpperCase();
"supercalifragilisticexpialidocious".length;


// FUNCTIONS

// call a function
alert('hello world');

// assign a variable to the value a function returns
var favoriteColor = prompt("What is your favorite color?");

// create a function; `number1` and `number2` are parameters, and the function returns a value
function add(number1, number2) {
  return number1 + number2;
}

// call the function we created; `3` and `5` are arguments, which are assigned to the parameters in the function
add(3, 5);

// if a function doesn't return anything, it returns `undefined`
function sayHi() {
  alert('Hello from Epicodus!');
}
sayHi();


// JQUERY

// defer running of your user interface javascript until the page loads
$(function() {
  // put your js here
});

// bind a callback to the click event:
$("h1").click(function() {
  alert("This is a header.");
});

// oh, a callback is a function that is passed in as an argument

// hide something
$("img").hide();

// show something
$("img").show();

// toggle whether something is hidden or showing
$("img").toggle();

// insert some text into the page
$("ul").append("<li>Hello!</li>");

// toggle a class on an element (useful to change the CSS that's applied to it)
$("body").toggleClass("yellow-background");

// bind a callback to a form submission
$("form").submit(function() {

  // grab the value of an input field
  var someValue = $("input#some-value").val();
  
  // clear the value of an input field by setting it to an empty string
  $("input#some-value").val("");

  // return false to keep the form from actually submitting
  return false;
});


// LOGIC

// do different things depending on the condition
if (age > 21) {
  $('#drinks').show();
} else if (age === 21) {
  alert("Now don't go crazy!");
  $('#drinks').show();
} else {
  $('#under-21').show();
}

// a condition can simply be a function or method that returns a boolean
if (person.isRecklessDriver()) {
  quote += 50;
}

// && - do things only if multiple conditions are true
if (gender === 'male' && age < 26) {
  quote += 50;
}

// || - do things only if any condition is true
if (gender === 'male' || age < 26) {
  quote += 50;
}

// do things if a condition isn't true
if (!under18) {
  // do something only adults can do
}


// ARRAYS

// create an empty array
var groceryList = [];

// add an element to the end of an array
groceryList.push("apples");

// add an element to the front of an array
groceryList.unshift("oranges");

// access an element of an array, starting at index 0
groceryList[1];

// remove an element from the end of an array
groceryList.pop();

// remove an element from the front of an array
groceryList.shift();

// get the length of an array
groceryList.length


// ITERATION

// loop with forEach
var languages = ['HTML', 'CSS', 'JavaScript'];
languages.forEach(function(language) {
  alert('I love ' + language + '!');
});

// loop with for
for (var index = 1; index <= 3; index += 1) {
  alert(index);
}


// OBJECTS

// create an empty object
var dictionary = {};

// add a property to the object
dictionary.catfish = "a feline that can swim";

// retrieve a property from an object
dictionary.catfish;

// create an object with properties
var michael = {
  name: "Michael Kaiser-Nyman",
  phone: "916.595.9543"
};

// create an object with a method
var michael = {
  phoneNumbers: ["916.595.9543"],
  addNumber: function(numberToAdd) {
    this.phoneNumbers.push(numberToAdd);
  }
};

// create a prototype object (the capital first letter is just a convention to indicate that it's only to be used as a prototype for creating other objects)
var Person = {

  // the initialize method creates the array in which to store the phone numbers
  initialize: function() {
    this.phoneNumbers = [];
  },
  addNumber: function(numberToAdd) {
    this.phoneNumbers.push(numberToAdd);
  }
};

// create a "child" object from a prototype

var michael = Object.create(Person);
michael.initialize();
michael.addNumber("916.595.9543");