HTML and CSS Reference
In-Depth Information
After you have opened a web developer console, you can type JavaScript expressions directly into the
browser and have them evaluated. Try it by entering these statements:
console.log("Hello, World!");
2 + 2
From the console, you can access DOM elements and script variables to inspect their values (provided
they are in the proper scope), which makes it easy to reason about how your program runs. This is a great
way to test and debug small sections of code before committing them to a larger program. Find those bugs
as early as possible!
Animating with code
With the document structure in place, you should now understand enough of the basics to start coding.
You need a text editor to input the examples and an HTML5-capable web browser to run them. For
debugging, you should be familiar with your browser's built-in developer console. After you have these
tools—which may already be on your computer—you're ready to go. Let's dive in to some animation!
Animation loops
Almost all programmed animation is expressed as some kind of loop. If you think about a frame-by-frame
animation, you might create a flowchart resembling a series of images, where each frame just needs to be
drawn, as shown in Figure 2-2.
Figure 2-2.
Frame-by-frame animation
When you start drawing shapes, though, things are a bit different. JavaScript code won't create and store
a new image for each frame, even in a frame-by-frame animation. For each frame, we store the position,
size, color, and other attributes of every object drawn to the canvas. So, if you had a ball moving across
the screen, each frame would store the position of the ball on that frame. Maybe frame 1 would indicate
the ball is 10 pixels from the left side, frame 2 would indicate it's 15 pixels, and so on. The code reads this
data, draws the object according to the description given, and displays that frame. From that process, you
can derive a flowchart, as shown in Figure 2-3.
Figure 2-3.
Rendering and then displaying frames
