Bmore Awesome

Beginning Javascript

1. Javascript in the page

• HTML scaffold w/ javascript

• Body onload

• Alert a message

• Change the message around, try a confirm() instead

2. Javascript Basics

• Define a function w/ an alert and call it

• Create a variable for alert text

• Add a parameter to the function for alert text

• Make other functions that alert different text

3. Dom basics

• Add element to the dom with an id
• Fill in text on the element instead of an alert box
• Make an array of messages, loop over them calling your function to display them all
• Change the array to numbers, have function insert the number amount of the | symbol for each line
• It's a bar chart!

4. Canvas Basics

• Make canvas element

• Draw a rectangle

• Write a rectangle function

• Call function multiple times

• Change the rectangle color and position

• Show how to add size param, have them add more params (x, y, w, h, color)

5. Data-driven canvas

• Start w/ basic bar-chart data

• Loop over data rows, calling rectangle function

• Rectangle function only takes x and y value, automatic x position based on x, fixed width, height by y, start on baseline

• Try setting up different colors and picking a color based on x

• Add a legend and a title

• x and y axes