Amazing how much we've been through in the last 4 hours. you can consider yourself a JavaScript developer at this stage. In this last JavaScript tutorial of this cluster of videos we will add a few missing elements such as working with user interaction and canvas.

What should your background be before starting this title?

A basic HTML background will help you a lot in this title. We are assuming you know basic HTML and that you have a light background in programing. Although we go over every single key element in code in this title we are running through them. If you have no background at all this title might be a bit harder and if so I recommend you check out our Developer basics Title ( a long detailed step by step guide to the basics of development).

What's in this JavaScript Tutorial?

In this JavaScript tutorial we will condense everything we learnt so far into a project. We will be building a canvas animation that flickers colors on the screen changing the colors 20 times a second followed by our capability to control when the animation starts or stops by turning our canvas into a toggle button.

We will start our project using a prebuilt template HTML file. The first thing we will want to do is figure out where to place our HTML5 canvas information followed by filling the canvas background color so we can find it using the canvas JavaScript API.

After creating the canvas element we will need to position our canvas in the right area of our screen to do that we will use some CSS tricks to position our canvas exactly where we want it to be placed. Although we are not actively learning CSS in this title the basics of CSS are easy to follow.

Even though we at 02Geek are big fans of Agile development there are a few things every programer needs to do - planning. There are many levels of planing some developers will plan in advance there work for the month while others will have a big picture plan and then only plan as they go. In our example as we are building a small project its easy for us to project all the things we will need to make our project work. In this part we go through the variables we will need and create the calculation s we will need before drawing and creating our first grid in canvas.

In an earlier title Conditionals and Loops we discovered what loops are and how to work with them. In this part we are going to learn a few new things about loops. Followed by creating our first nested loop. The idea behind a nested loops is to be able to create a loop inside of a loop. This type of strategy is sometimes called a 2 dimensional loop. In the core of it is just two loops only because one is inside of the other each time the first loop finishes a round the internal loop does a complete loop.

We created a JavaScript nested loop but why? That is a really great question and if you where asking that as well you deserve a star. The idea behind using a nested loop enables us to create a grid as we can very quickly an easily work row by row or line by line creating a full grid. That is exactly what we will do next. We will draw small circles in a grid pattern in the defined canvas space.

Time for us to revisit everything we did and figure out what parts of it need to move around. We will be moving our code around to optimize it and enable us to only call the code within our nested loop repeatability over time using setInterval.

Our last task in this JavaScript tutorial will be to add user interaction. Yes even the pros make mistakes although most others will edit them out we like keeping our mistakes inside as there a great learning experience(even if they make us sometimes embarrassed like this one!). In this tasks we will learn a lot of things from how to debug applications all the way through how to work with mouse events. In the end of our course we will have a fully interactive canvas project.

Download
Source