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