How to Make Kittens with JavaScript

A subscriber recently suggested the magazine include kid-centric tutorials for Javascript and keeping it fun. Well, kittens are fun so JavaScript and kittens likely meet the criteria.

This tutorial is adapted from an excellent book, JavaScript for Kids, published by No Starch Press, pages 7-9. While you don’t need the book to do the tutorial, buy the book if you’re interested to learn much more about JavaScript in a way kids and non-technical people understand.

Requirements

The best part? You only need a Google Chrome web browser which is free and easy to find at https://www.google.com/chrome, if you don’t have it already on your computer.

Set Up

To get started, you’ll open your Google Chrome web browser, open a blank web page, and then open the coding console for the browser.

First, open your Chrome web browser on your computer, You should see a default page with the Google search field.
In the URL field type about:blank and press the Enter key on your keyboard to display a blank page.
Display the coding console. If you use Windows or Linux, hold the Ctrl and Shift keys down as you press the J key. If you use a Mac, hold the Command and Option keys as you press the J key.

Your Chrome web browser should look like this:

projects-make-kittens-chrome-browser-2 — Google Chrome with blank page and coding console

Notice the Console tab is one of many tabs, in this case, the farthest right tab. Click the Console tab if somehow you get lost. For this tutorial, you only need to use the Console tab.

Let’s Warm Up

Before we make fresh warm kittens with JavaScript, we’ll start with a few simple math problems to show how JavaScript, the coding console, and your Chrome web browser work together.

Click to the right of the > bracket in the console. You’ll see a blinking cursor. The console is ready for you to enter JavaScript.
Type 3 + 4; and don’t forget the semi-colon after the 4. Press the Enter key. Your Chrome web browser used JavaScript to calculate 3 + 4. You should see 7 in the row below the command you entered.

You can repeat this process for any math calculation. For example, try these commands:

120/5;
24*5;

The forward slash (/) tells JavaScript to divide two numbers while the asterisk (*) tells JavaScript to multiply two numbers.

You should see this output in your console:

120/5;
24
24*5;
120

where 24 and 120 are the results of your commands to calculate 120 divided by 5 and 24 times 5.

Let’s Make Kittens!

Of course JavaScript does many more important things than calculations. You also can make kittens with JavaScript. Okay, not real kittens but defnitely digital kittens. Here’s an example:

=^.^=

See how the equals signs (=) on the left and right make whiskers, the carat (^) makes ears, and the period (.) makes a nose? This is called an emoticon. You can make all kinds of neat animals, people, and other things with the keys on your computer keyboard and a little imagination.

Today, however, we want to use JavaScript to make as many kittens as we want. We’ll type in some code, called a function, and then use the code to say how many kittens we want to make. Here’s how it works.

In the coding console, type this function code and pay attention to spaces, capitalization, curly braces, and smooth braces:

var drawKittens = function (howManyTimes) {
    for ( var i = 0; i < howManyTimes; i++ ) {
        console.log(i + " =^.^=");
    }
};

Then press the Enter key on your keyboard to enter this function in the memory of your coding console. If you typed everything correctly, you’ll see this output in your console:

< undefined

The < bracket tells you the console has saved the function to its memory. Now let's make kittens! Type this command in your console: drawKittens(5);.

You should see this output:

drawKittens(5);
0 =^.^=
1 =^.^=
2 =^.^=
3 =^.^=
4 =^.^=
undefined

Type the drawKittens command with a different number to make more kittens. For example, drawKittens(5); will make five kittens while drawKittens(50); will make 50 kittens. Way more fun than using your console to do boring math problems.

How JavaScript Makes Kittens

Once the novelty of using JavaScript to make kittens wears off, you might want to know how the code works. Here’s our function code again:

var drawKittens = function (howManyTimes) {
    for ( var i = 0; i < howManyTimes; i++ ) {
        console.log(i + " =^.^=");
    }
};

Notice these details about our code:

var tells JavaScript to create a variable (var is shorthand for variable) called drawKittens then uses the equals sign (=) to say drawKittens will be a function with one input parameter called howManyTimes. When we use drawKittens, we need to tell the function how many times to draw a kitten. The left curly brace ({) marks the start of the definition of our drawKittens function while the right curly brace and semi-colon (};) marks the end of our definition.
The for statement in the next line tells JavaScript to run some code for as long as a set of conditions are met:
1. First, we use var i = 0; create a variable called i (the letter i) and add a semi-colon to tell JavaScript var i = 0 is one condition.
2. Second, we use i < howManyTimes; to tell JavaScript how long to run this code, for as long as i is less than the howManyTimes value we use.
3. Finally, we use i++ to tell JavaScript to add 1 to the value of our i variable each time the code is run.
So this for statement says, in English, "run this code for as long as these conditions are true: the variable i starts out as 0, and i is less than the howManyTimes value, and each time we run this for statement we add 1 to the variable i".

When we start, the value of i is 0. The second time our code runs the for statement, we add 1 to 0 which means i now equals 1. The third time our code runs the for statement, we add 1 to the value of i (1) which sets i equal to 2. When the value of i is no longer less than the value we set for howManyTimes, then our for statement stops. The conditions of our for statement are no longer true. Also notice the left curly brace ({) and right curly brace (}) mark the start and end of our for statement and the code to run.
The console.log(i + " =^.^="); code runs when the for statement conditions we set are true. This makes our kittens. We tell JavaScript to print out in our coding console the value of the i variable plus a blank space and our kitten emoticon. The + (plus) sign tells JavaScript to add (combine) the value of our i variable with whatever we typed between the double quotes (" =^.^="), in this case, a blank space and our kitten emoticon.

With JavaScript, and many programming languages, variables like i do not need double quotes but anything we want to add that is text does need double quotes around it. Why? JavaScript recognizes variables and numbers but is not sure what to do with any other input. The double quotes tell JavaScript, and many other languages, that it should treat the content between the quotes as one item.

Finally, when we type the drawKittens(5); command, we tell JavaScript to use the drawKittens(howManyTimes) function and pass the number 5 as the value for the howManyTimes input parameter of our function.

If you want to learn more JavaScript, definitely look for the book this tutorial is cribbed from, JavaScript for Kids, published by No Starch Press. This tutorial also shows you how to use the Chrome web browser to practice as you learn JavaScript.

Learn More

What is the JavaScript equivalent of Learn Python the Hard Way? (Quora)

Learn Python the Hard Way is a mostly free online course and this thread offers ideas where and how to learn JavaScript.
https://www.quora.com/What-is-the-JavaScript-equivalent-of-Learn-Python-the-Hard-Way

Visited 944 times, 1 visit(s) today

Requirements

Set Up

Let’s Warm Up

Let’s Make Kittens!

How JavaScript Makes Kittens

Learn More

JavaScript for Kids

Using the Console

JavaScript Documentation

Crunchzilla Code Monster

What is the JavaScript equivalent of Learn Python the Hard Way? (Quora)