4. JavaScript Animation

We don’t believe in reinventing the wheel here at Coders for Liberty. We believe in learning from everyone and everywhere. When we find an excellent coding resource, we will share that with you. Khan Academy is an excellent tool for learning mathematics, science, the humanities, and computer science. JavaScript is an important language to know for developing web apps.  However, the main reason we include it in our training is to introduce you to the programming training and collaboration opportunities offered on Khan Academy. You may also want to try their SQL training.

4.1 Getting Started on Khan Academy

  1. Visit khanacademy.org
  2. Click “Start learning now”
  3. Either click “sign in with Facebook,” “sign in with Google,” or “Sign up with email”
  4. Enter your information and click “Sign up”
  5. Open your email and click “Finish signing up”
  6. Finish signing up.
  7. Go to khanacademy.org/coaches
  8. In the “Add a coach” field, enter the class code FGB2JA or the code provided by your Code for Liberty mentor. This enables us to see your progress and help you along the way.
  9. Go to khanacademy.org/computing/computer-programming/programming and start learning.

4.2 Intro to JS: Drawing & Animation

khanacademy.org/computing/computer-programming/programming

This really is a fun way to learn JavaScript. It is all about graphics and animation. You can follow along and watch the teacher code. You can also pause the tutorial and mess with the code yourself. However, the best part is creating projects at the end of each section yourself. The training is also available on YouTube as videos. However,we  recommend that you do the training on Khan Academy’s site.

4.3.2 Running Your Khan Academy Programs on a Website

www.petercollingridge.co.uk/blog/running-khan-academy-programs-your-computer

Follow the directions provided by Peter’s website . However, there are some slight modifications I would make based on what I learned from the Mozilla Web Development course. However, these are really just web design preferences. You can just ignore my design tips and just do it Peter’s way.

  • Save the processing.js file to your scripts folder for your website.
  • Create a file called code.js in your scripts folders
  • Open the code.js in a text editor and copy  your Khan Academy code and save it.
  • When you are working on the index.html file, you will need to add “scripts/” to your HTML code:
<script src="scripts/processing.js"></script>
 <canvaswidth="400"height="400"data-processing-sources="scripts/code.js"></canvas> 

Note: This may not work well with some Khan Academy projects. You may need to tweak your project a little. While I did have a bit of trouble porting some Khan Academy projects over, I was able to write a new program using this method and the Processing.js reference page. You should be able to do the 4.4 project using this method. You can refer to the Processing.js reference page if you get stuck.

4.4 Make an Animated Meme

Making a meme should be part of any training program. Use shapes you create using JavaScript code to draw the meme and animate it.

4.4.1 Add Your Meme to Our Github Project Site
  1. Go to https://github.com/coders4liberty/js-memes
  2. Click “Fork” in the upper right hand corner.
  3. Name your js script file something unique and upload it.
  4. Make a html file that uses the Processing.js file and your js file to play the animated meme. Name it something unique. You can use the ssdp.html file as a reference.
  5. Make a link to your file in the index.html file. You don’t have to make a javascript script that makes it randomly change the title of your animation, but you can if you want.
  6. Issue a Pull Request

Congratulations, you have finished the level four training!

4.5 Help Others Learn

Evaluate projects on Khan Academy to help others and brush up on your coding skills. Include suggestions for improvement and words of encouragement.

Onward to the level 5 training!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s