plusjade · January 12, 2015 23:15 · Jan 12, 2015
diff --git a/cheatsheet.js b/cheatsheet.js
@@ -0,0 +1,238 @@
+
+
+/* -----------------------------------------------------------------------------
+    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'
+
No results found