From 18b6aed5fa1d43679815ea072472008b8b542678 Mon Sep 17 00:00:00 2001 From: Mark Chapman Date: Thu, 26 Jan 2012 15:03:51 +0000 Subject: [PATCH] Ready for lesson (cannot indent code because of github rendering issues) --- lessons/08 - Graphics with Javascript.textile | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/lessons/08 - Graphics with Javascript.textile b/lessons/08 - Graphics with Javascript.textile index c21ad1e..9cf5f1d 100644 --- a/lessons/08 - Graphics with Javascript.textile +++ b/lessons/08 - Graphics with Javascript.textile @@ -54,7 +54,7 @@ To use the method we need to put the following lines in our HTML header: @}@ @@ -A function is just a collection of lines of code that are run together. Our function has a name - @init@ - and does not get passed any parameters @()@. We also need to change our tag so that our init function is called when the body of the document is loaded. +A function is just a collection of lines of code that are run together. Our function has a name - @init@ - and does not get passed any parameters @()@. We also need to change our @@ tag so that our @init()@ function is called when the body of the document is loaded. @@ @@ -87,7 +87,7 @@ Comments are ignored when the browser runs the code, but can help out other prog h4. Practical -Put a comment in your code at the top of your init() function to describe what it does. Refresh the page and check you haven't broken anything. +Put a comment in your code at the top of your @init()@ function to describe what it does. Refresh the page and check you haven't broken anything. h2. Context Attributes @@ -108,14 +108,13 @@ h4. Practical * Change your init() function to the following: - function init() { - var ctx =document.getElementById("canvas").getContext('2d'); - - for (i = 0; i <= 125; i=i+25) { - ctx.fillStyle = "rgb(" + i * 2 + ",0,0)"; - ctx.fillRect(i , i, i + 50, i + 50); - } - } +@function init() {@ +@var ctx =document.getElementById("canvas").getContext('2d');@ +@for (i = 0; i <= 125; i=i+25) {@ +@ctx.fillStyle = "rgb(" + i * 2 + ",0,0)";@ +@ctx.fillRect(i , i, i + 50, i + 50);@ +@}@ +@}@ * Refresh the brower, and work out (quietly) what is going on * Change the code so that the squares change in some other way - from red to blue for instance.