Think In Code

how to think in code

I need to remember something so I can use it later

Use a variable.


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

I need to make a decision between two or more options

Use an if/else conditional statement


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


  if (name=="Ben") {
    // do something
  } else {
    // do something else
  }

I need to change what my website 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() {
   
    //do something
  
  }


  // later, you can invoke it
  changeBG()

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

Use a function with an argument


  function changeBG(color) {

    document.body.style.backgroundColor = color

  }

  // later, you can invoke it with different colors
  changeBG("black")
  changeBG("white")

I need to add something to my page

Use createElement and 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 something on 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

Toggle

I need to remember something

whether my toggle is currently on or off

I need to save an action for later

the action that does the toggling

I need to make a decision

whether to turn the toggle on or toggle off

I need to change what my site looks like

to visually represent the change in the toggle's state

I need to make my site interactive

so when I click the toggle, it switches on/off

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)

See The Result

Static Menu

I need to remember a list of related items

the items in my menu

I need to do something several times

make an HTML element for each menu item

I need to add something to my site

add each menu item to the page

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)

}

See The Result

HTML Paintbrush

I need to make my site interactive

to watch for mouse movement

I need to add something to my site

a tiny div for each "brushstroke"

I need to change what my site looks like

make the brushstroke small and colorful

document.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)

})

See The Result
This is fun, though you'd be much better off using a <canvas> for drawing !