Cats in Javascript and SVG

Intro

This tutorial is perfect if you have never programmed before, or if you would like to enhance your skills in Javascript.

Javascript is a very popular programming language and it’s widely used in the IT-industry. Almost every webpage contains Javascript. With Javascript you can develop games, make webapplications and business systems. Or draw cats on the screen.

Enough talking, let’s get started!

Let’s go!

If you haven’t programmed before, you need help from a teacher in making your first program. 

Grab a teacher now!

Download a texteditor like Sublime (if it’s not already installed) or Notepad++.

Download and unzip this file anywhere on your computer (e.g Desktop) to a folder you name hackerspace

Open the file cats-in-corners.html in your texteditor (e.g Sublime). It should look like this:


Open the file cats-in-corners.html in a browser, like Chrome. You should now see one lonely cat. 

Great! Now your on the way to become a highly paid, popular software engineer.


Try to change the values after the command move (line 15). Now it says move(20,20), but change it to other number. See what happens.

Copy the line which starts with “draw.image” and see what’s happening.

draw.image('../img/cat-58x84.png').move(20,20)
draw.image('../img/cat-58x84.png').move(30,30)

Try to create four cats. Ask a teacher if you get stuck! When you’re finished it should look like this:



Copy the following code and name the file cats-in-row.html

<style>
body {margin:30;background:black;}
#drawing {width:600px;height:600px;background: white}
</style>

<script src="../js/svg.min.js"></script>
<div id="drawing"></div>