A Better Coder - JavaScript | Massivefile.com

This is a most basic and intuitive JavaScript practical explanation so that a kid can understand it :)

Let's start with what will I do if I need to remember something for later

Ahhah!, I will use a variable.
Let's see how that works out here.


  var a = "To be or not to be"
  var b = 100
  var c = false

I need to make a decision

Use an if/else conditional statement


  if (menuOpen==false) {
    // open the menu
  } else {
    // close the menu
  }


  if (x <= 100) {
    // do something
  } else {
    // so something else
  }

I need to change what my page looks like

Use the style property

HTML:


  <div id="title"></div>

JavaScript:


  var t = document.getElementById("title")

  t.style.color = "#00aaff"
  t.style.border = "#solid 2px #0af"
  t.style.backgroundColor = "#eeeeee"

I need to save an action so I can do it later

Use a function


  function changeBG() {


  }


  // later, you can execute it
  changeBG()

I need my action to happen a little bit differently each time

Use a function with an argument


  function changeBG(color) {

    // color will contain your argument

  }

  // later, you can execute it
  changeBG("black")
  changeBG("white")

I need to add something to my page

Use document.createElement and document.appendChild


  var t = document.createElement("div")
  t.innerHTML = "Lorem Ipsum"

  var parenttobe = document.getElementById("title")
  parenttobe.appendChild(t)

More Advanced

I need to remember a lot of things that are related somehow

Use an array


  var groceries = [ "milk", "eggs", "bread" ]

  groceries[0] // returns "milk"

or use an object


  var groceries = {

    milk: "1 gallon",
    eggs: "1 dozen",
    bread: "1 loaf"

  }

  groceries.milk // returns "1 gallon"

I need to do something several times

Use a loop


  for (var i=0;i<100;i++) {
    //the code in here will happen 100 times
  }

I need to make my site interactive

Use an event listener

HTML:


  <div id="title"></div>

JavaScript:


  var t = document.getElementById("title")

  t.addEventListener("click", function(event) {
    //do something in here
    //a ton of info is provided in the 'event' argument
  })

Examples

Example 1 - Toggle

I need to remember something

I need to save an action for later

I need to make a decision

I need to change what my site looks like

I need to make my site interactive

var on = false;

function toggleIt() {

if (on==false) {

var d = document.getElementById("mytoggle")
d.style.backgroundColor = "#0af"
on = true

} else {

var d = document.getElementById("mytoggle")
d.style.backgroundColor = "#fff"
on = false

}

var d = document.getElementById("mytoggle") d.addEventListener("click",toggleIt)

Click Here to See The Result

Example 2 - Static Menu

I need to remember a list of related items

I need do something several times

I need to add something to my site

var items = [
"Sign in",
"My account",
"Something else",
"Log out"
]

for (var i=0;i<items.length;i++) {

var newItem = document.createElement("div")
newItem.innerHTML = items[i]

var container = document.getElementById("menu")
container.appendChild(newItem)

}

Click Here to See The Result

HTML Paintbrush

I need to make my site interactive

I need to add something to my site

I need to change what my site looks like

document.body.addEventListener("mousemove", function(e) {

var d = document.createElement("div")

d.style.width = "3px"
d.style.height = "3px"
d.style.backgroundColor = "lime"
d.style.opacity = 0.7
d.style.position = "absolute"
d.style.top = e.clientY + "px"
d.style.left = e.clientX + "px"

document.body.appendChild(d)

})

Click Here to See The Result

Remember, there are a dozen ways to code any given idea. It is always easier to understand your own code than to read someone else's. Steal the essentials and go forth to be creative!