cheatsheet.js

/* -----------------------------------------------------------------------------
    INTERACTING WITH THE USER INTERFACE
------------------------------------------------------------------------------*/


// GET HTML (DOM) ELEMENT

    // I need to reference an HTML element inside javascript:
    var element = document.getElementById("test");
    // In ENGLISH: assign the local variable 'element' to the element within the document whose id= "test"

    // the variable  'element' now holds the HTML elemement whose id="test"


// DO SOMETHING WHEN THE USER CLICKS ON AN HTML ELEMENT

    document.getElementById('test').onclick = function(event) {
        // any code inside this function will run when this event occurs.
        console.log('the element whose id="test" has been clicked'); // TEST IT
    }


// SET THE INNER CONTENTS OF AN HTML ELEMENT

    document.getElementById('test').innerHTML = 'You played rock. The bot played {scissors} . You win! :)';


// SET THE VALUE OF AN INPUT ELEMENT

    document.getElementById('test').value = 'new value';


// GET THE VALUE OF AN INPUT ELEMENT
    var inputValue = document.getElementById('test').value;
    console.log(inputValue);


/* -----------------------------------------------------------------------------
    VARIABLES
------------------------------------------------------------------------------*/


// SET A VARIABLE TO A STRING

    var test = 'Hello world!';


// SET A VARIABLE TO AN INTEGER

    var test = 1;


// SET A VARIABLE TO A FLOAT

    var test = 1.0;


// CHANGE A VARIABLE

    // Variables can be changed an unlimited number of times.
    // Only use 'var' the first time you declare your variable!
    var test = "Hello";
    test = "Goodbye";
    test = "Wait, I came back";
    // you can also set them to entirely different types:
    test = 1;


// USE A VARIABLE

    // To use or get a variable just place the variable name where you want to use it.
    var test = 'Hello World!';
    document.getElementById('container').innerHTML = test;
    // IN ENGLISH: set the inner contents of the element whose id="container" to "Hello World!"

// WHAT THE HELL DOES 'var' DO?

    // var technically means: "Assign this variable to the most local scope possible"
    // So whenever you see 'var' you should read that statement in your head
    // (we haven't covered scope yet so be on the lookout for that)


/* -----------------------------------------------------------------------------
    FUNCTIONS
------------------------------------------------------------------------------*/


// SYNTAX
    
    // this is called a function definition or declaration.
    // it is not the same as a function "reference" or a function "call" as we'll see later.
    function test() {
        // all code inside the curly brackets run whenever the function is executed
    }

// NAMED FUNCTIONS

    function thisIsTheNameOfTheFunction() {

    }

// ANONYMOUS FUNCTIONS

    // it just means they don't have a name:

    function() {

    }

    // you can use it like you would a variable:
    function handleClick() {
        // some code
    };
    document.getElementById('test').onclick = handleClick;

    // VS

    document.getElementById('test').onclick = function() {
        // some code
    }

    // you can even set it to a variable
    var jade = function() {

    }

// REFERENCE A FUNCTION (NOT THE SAME AS CALLING/EXECUTING A FUNCTION)

    // named:
    function handleClick() {
        // some code
    };
    document.getElementById('test').onclick = handleClick;

    // anonymous:
    document.getElementById('test').onclick = function() {
        // some code
    }

// CALL A FUNCTION

    // given the function:
    function handleClick() {
        // some code
    };
    // this calls it:
    handleClick();
    // notice the parenthesis 


// FUNCTION ARGUMENTS

    function handleClick(data) {
        // the local variable `data` is available inside this function only
        // its similiar to if you did this:
        var data = 'something';
        // but don't do that! (erase this if you use this because it will override incoming data value)
    };


// PASS IN FUNCTION ARGUMENT

    // when you call the function, you can pass in any argument value you want:
    handleClick('this is the value of data');

    // if you call it again, you can give it different data and it will work for that value:
    handleClick('different data!');


// SUMMARY

    // function definition:
    function handleClick() {
        // some code
    };

    // function reference:
    handleClick;

    // function call:
    handleClick();



/* -----------------------------------------------------------------------------
    IF ELSE CONDITIONALS
------------------------------------------------------------------------------*/


// if / else

    // where "1 === -1" is just an expression that returns true/false
    if (1 === -1) {

    }
    else {

    }


// if / else if / else

    if (1 === -1) {

    }
    else if(false) {

    }
    else {

    }


/* -----------------------------------------------------------------------------
    RANDOM STUFF
------------------------------------------------------------------------------*/


// Execute javascript code only after the entire HTML (DOM) has loaded.

    document.addEventListener('DOMContentLoaded', function() {
        // ALL YOUR CODE MUST GO INSIDE THIS FUNCTION
    });

    // Solves:
    //   document.getElementById('test') returns null in your code but works in the console.
    // Issue:
    //   Your js file is probably in the <head></head> so when the code runs the <body></body> has not yet loaded.


/* -----------------------------------------------------------------------------
    PRACTICE
------------------------------------------------------------------------------*/

'http://www.codecademy.com/courses/getting-started-v2/0/1'