Cat and Mouse with JavaScript

Nesster on Flickr

You computer mouse cursor finally gets a cat to chase it.

For years, we’ve watched the mouse cursor zoom around the screen, unchallenged. Today, we’re going to change that, by creating a JavaScript cat to chase the mouse!

1. Set Up

Open up your web browser and navigate to http://jsfiddle.net.

See how the screen is separated into four different boxes? Each box accepts code from a different language: HTML, CSS, and JavaScript. Each of these three languages plays an important role in web programming.

There’s one more thing to set up. In the bottom left-hand editor, click on the little grey gear next to ‘JAVASCRIPT’.

Click on the box under ‘Frameworks & Extensions’

Select ‘jQuery 3.2.1’

jQuery is a popular extension of JavaScript. It makes it easy to move and modify the elements of a webpage.

2. HTML

HTML can be seen as the ‘bones’ of a webpage. It contains all the important structural information, like what the text says and how it’s separated.

In the top left-hand editor, type:

<div id="cat"> 
=^.^=
</div>

<div id=“cat”> 

An html ‘div’ is a type of container. This one’s id — or ‘name’ — is ‘cat’. Inside the tags we’ll put the ASCII art for our JavaScript kitten.

=^.^=

See how the ‘=‘ are whiskers, and the ‘^’ are ears, and the ‘.’ is a nose? The result is an adorable, minimalist kitten. ASCII at is a way of making pictures using letters and other typed symbols.