HTML and CSS Reference
In-Depth Information
JavaScript and Canvas
JavaScript, the programming language we will use to create Canvas applications, can
be run inside nearly any web browser in existence. If you need a refresher on the topic,
read Douglas Crockford's
JavaScript: The Good Parts
(O'Reilly), which is a very popular
and well-written reference on the subject.
JavaScript Frameworks and Libraries
There are many popular JavaScript frameworks that developers use to help get their
JavaScript off the ground, including libraries such as jQuery, Processing.js, and others.
We expect these frameworks to add robust support for Canvas in the next 6-12 months.
In the meantime, we will focus on straight JavaScript to control the canvas. However,
where appropriate, we will introduce you to frameworks and JavaScript libraries that
will help augment Canvas development (e.g., Modernizr, JSColor, and WebGL).
Where Does JavaScript Go and Why?
Because we will create the programming logic for the Canvas in JavaScript, a question
arises: where does that JavaScript go in the pages we have already created?
It's a good idea to place your JavaScript in the
<head>
of your HTML page because it
makes it easy to find. However, placing JavaScript there means that the entire HTML
page needs to load before your JavaScript can work with the HTML. This also means
that the JavaScript code will start to execute before the entire page loads. As a result,
you will need to test to see whether the HTML page has loaded before you run your
JavaScript program.
There has been a recent move to put JavaScript right before the
</body>
at the end of
an HTML document to make sure the whole page loads before the JavaScript runs.
However, because we are going to test to see whether the page has loaded in JavaScript
before we run our
<canvas>
program, we will put our JavaScript in the traditional
<head>
location. If you are not comfortable with this, you can adapt the style of the code
to your liking.
No matter where you put the code, you can place it inline in the HTML page or load
an
external .js
file. The code for loading an external JavaScript file might look like this:
<script type="text/javascript" src="canvasapp.js"></script>
To make things simple, we will code our JavaScript inline in the HTML page. However,
if you know what you are doing, saving an external file and loading it will work just as
well.
