Skip to content

Instantly share code, notes, and snippets.

@michaelrkn

michaelrkn/js-cheat-sheet.js

Created August 10, 2013 20:13
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save michaelrkn/6201955 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save michaelrkn/6201955 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. michaelrkn created this gist Aug 10, 2013.
    219 changes: 219 additions & 0 deletions js-cheat-sheet.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,219 @@
    // 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");