Skip to content

Instantly share code, notes, and snippets.

@plusjade
Created January 12, 2015 23:15
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save plusjade/bf5c38f335faca0ed17e to your computer and use it in GitHub Desktop.
/* -----------------------------------------------------------------------------
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'
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment