Beginner Lessons

8/6/2019 Beginner Lessons

1/24

Getting

Started

Computers aren't very smart. Sure, they can do a lot of math or help you search the Internet. But,

if you asked a computer to vacuum the house for you, could it do it? If you asked a computer todraw a picture of a bird for you, would it? A computer would have no idea about what you're

saying.

Computers are bad at understanding things. If you don't give them exact instructions, they

become confused and make mistakes. Telling a computer what you want it to do is sometimeshard because you have to explain things very carefully.

Because computers don't understand English, these instructions have to be written in specialcomputer languages that computers can understand. This website will teach you the Javascript

language. Most computers understand the Javascript language.

Don't be frustrated if you write some Javascript that a computer doesn't understand. Rememberthat computers are easily confused, and all the Javascript instructions of have to be exactly right.

Computers are very picky! Little mistakes or problems in the Javascript are called bugs. Even thebest programmers make many, many bugs.

Next: Giving Commands to Objects


2/24

Giving

Commands

to Objects

Javascript is an object-oriented language. That means that the language has objects that you cangive commands to. It's just like in real-life. If you have a dog, you can tell your dog to "sit" or to

"roll-over."

If you look on the left, you will see two robots. The one on the left is called zbot because it has abig "Z" on it. The one on the right is called tvbot because its head is a giant tv. Zbot and tvbot are

both objects. You can give commands to them.

To give them commands, you first need to move your mouse inside the blue box of the Program

Area and click.

Then, you type whom you want to give a command to. After that, you type a period. Then, youtype which command you want to give. And then, you type two round brackets and a semi-colon

(a semi-colon is the symbol that looks like a comma with a dot over it). So, if you want zbot towave its hand, you would write, "zbot.wave();" Make sure that all the letters are lower-case.

Javascript will get confused if you use capital letters.


3/24

And lastly, you should click on the Run button.

Go ahead and try getting zbot to wave. Remember, the steps are 1. click inside the blue box ofthe Program Area, 2. type "zbot.wave();", and then 3. click on Run. Make sure you typeeverything exactly right.

Now, try getting tvbot to wave. First, click on the Clear button to get rid of the old command.Click on Yes when the computer asks you if you want to clear your program.

Then, it's the same as before except instead of typing zbot, you type tvbot instead. (Tvbot has

smaller arms, so it only waves a little bit.)

Zbot and tvbot know how to do lots of things. Here are some of the things you can tell them todo: "blink," "clap," and "jump." Tvbot does not have any legs, so it cannot jump. Try out these

different commands.


4/24

If you give a command to one of the robots that it does not understand, don't worry. It is a bug,and Javascript will complain and tell you what's wrong in the orange Messages area.

You can also type more than one command in the Program Area.

The computer will follow the first command, and then do the next command, and then the next

one, until it reaches the end. This list of instructions is called a "program."

Next: Programs 1

Programs 1

Tvbot visited the moon recently. There are lots of craters and mountains on the moon, and Tvbot

got lost. Tvbot needs your help in getting back to its rocket ship.


5/24

On the left, you can see Tvbot on the moon. You can move Tvbot by using the "up," "down,"

"left," and "right" commands.

Tvbot cannot move outside the green line. Tvbot will simply wait if it cannot follow yourcommands.

Give instructions to Tvbot about how to get back to the rocket ship. Tvbot has to get to the bluearea to get on the ship.

Next: Programs 2

Programs 2

Tvbot's TV can be turned on and off with the "on" and "off" commands. Give it a try.


6/24

You can also change the channel on Tvbot's TV. You do this by giving Tvbot the "channel"command, and putting a channel number between the two brackets. Tvbot can be tuned to

channels 0, 1, 2, 3, or 4.

Robots aren't the only objects in Javascript. There are some objects that you can't even see. There

is a clock object that can give you the time, but it doesn't show up on the screen. You can givethe "time" and "date" commands to the clock to find out what time and day it is.

Sometimes you can give a command directly to the computer. In these cases, you don't need totype an object or the period. You just type the command only. One of these commands is

"show." The show command will show a number on the screen. If you put a number in-between

the brackets, that number will be shown on the screen.

Next: Calculator

Calculator

You can use Javascript to do math like it's a calculator.


7/24

Remember that you can use the "show" command to show a number on the screen.

You can add up numbers by writing two numbers and putting a plus sign in-between them. Go

ahead and try it on the left.

You can do other types of math by using different symbols. Because there are no "times" or"divide" buttons on the keyboard, you have to use a * or / instead.

You can also put a lot of math on one line and do all the calculations at the same time.

You have to be careful though. Javascript doesn't do the math from left to right. It uses a specialmathematical order.

Next: Variables: Remembering Stuff


8/24

Variables: Remembering Stuff

A computer has memory and can remember stuff. To get a computer to remember stuff, you

use variables. A variable is a piece of information with a name for that information.

Let's say you're shopping for groceries, and you need to buy five apples. You can tell the

computer to remember how many apples you need to buy. You can use a variable for this.

In the blue Program Area on the left, type "apples=5;"

When you run the program, the computer will now store the number 5 in its memory. It will give

that piece of information the name "apples."


9/24


10/24

Make sure you spell the variable the same way every time. And make sure you don't mix up yourupper case and lower case letters! If you use a variable that the computer does not know about,

or if you spell a variable incorrectly, the computer will complain.

You can use variables in math. For example, instead of using "show(2+4);" you can use

"show(lettuce + celery);" They're the same. Try it out.

You can also do math and put everything in a variable. You can even use variables in the math.

Look here at three different ways to put things inside of the vegetables variable. They're all thesame.

Suppose a friend is baking an apple pie and asks you to buy two extra apples. To do that, you canjust take the old amount of apples that you wanted and add two to it. Then your grocery list willhave two extra apples in it.

One weird things with variables is that the computer forgets everything each time the program isrun. So at the start of the program, you must set all the variables again.

Next: Strings 1


11/24

Strings 1

So far, you've been working mostly with numbers in your programs. If you want to use words in

a program, you need something called a string.

A string is bunch of letters or words put between quotes. You can have symbols (except for the \and ") and numbers in between the quotes as well. If you try to show a string, everything except

for the quotes will be shown.

It's important to have quotes at the beginning and end of the string. Computers aren't very smartand can get easily confused. It will think you are trying to use a variable!

On the left, there is a Program Area where you can try showing different strings on the screen.There is also a special robot called the actingbot who can do some acting. The actingbot object


12/24

understands the say command. If you give the actingbot a string to say, the actingbot will say it.You can also get the actingbot to say numbers.

Strings can be put inside variables just like numbers.

Unlike numbers, you can't do math with strings. If you try to add strings together, the two strings

get joined together. Be careful when you have numbers inside a string! When you add themtogether, the two strings get joined together and not added together.

Next: Strings 2

Strings 2

Now that you know how to use strings, you can do some interesting things. On the left is aProgram Area with a stage for plays. actingbot is there, along with its friends actorbot andactressbot. They understand the left() and right() commands. The stage has curtains which can

open() and close(). In the back, there is a backdrop object. If you give it a change() commandwith a number, it will change the picture shown in the back. Try typing in the program shown

here. Then try making your own play!

Next: Input


13/24

Input

If you want the computer to ask you a question, you can use the "input" command. You give thecommand a string with the question to be asked. A window then shows up with the question, and

you must type in the answer.

The computer then gives the answer back to your program in a string. You can put that string

into a variable and use it later. Give it a try.

You can try making madlib games using input.

Next: If


14/24

If

A program lets a computer follow instructions, but so far the computer doesn't know how tomake decisions.

With the "if" instruction, a computer can compare two things and make a decision. One way it

can compare things is to check if two things are the same.

You do this by typing "if" with an opening bracket after it. Then you write the first thing you

want the computer to look at. Then you type two equals signs and then the second thing youwant the computer to look at. After that, you type a closing bracket, and then an opening "curly

brace". You then give the computer some instructions that the computer should follow if the twothings ARE the same. Then you type closing curly brace.


15/24

In this little program. If you answer yes, the computer will tell you to bring an umbrella. If youtype something that isn't exactly the same as "yes" then the computer won't do anything. You can

type "no" or "nope" and the computer won't do anything. If you use different letters like "yEs",it's not exactly the same as "yes" and the computer will also not do anything.

An exclamation mark followed by an equals sign means "not equal." In the program above, itfirst checks to see if you typed "yes." If so, it tells you to bring an umbrella. Then it checks to see

if you typed something other than "yes." If so, it will tell you to wear sunscreen instead.

Instead of having two different if instructions, you can use the else instruction. In the above

program, if a is "yes," then it does one thing. If a isn't "yes" then it does the instructions that

come after the else. Also notice that you can have more than one instruction inside of the curlybraces. And you can put things on different lines to make things easier to read.


16/24

This is useful because you can have lots of if instructions all put together. Here, if you type in

"sunny," "rainy," or "snowy" the computer will tell you what to wear. If you type something else,the computer will go right to the end and tell you that it does not understand what you typed.

On the left, you need to write the program for a paint-mixing machine. It uses red, blue, andyellow paint to make other types of paint.

On the right of the machine is an order for a type of paint. You have to get the machine to make

that type of paint. You can use machine.order() to give you a string with the type of paint you

need to make. Then, you must use machine.conveyor(), to move the paint bucket under thesprays on the conveyor belt. red.spray(), blue.spray(), and yellow.spray() will shoot paint into thebucket to make the right type of paint. Then machine.conveyor() again will move the paint away,

and then the paint will be checked to see if it's correct. The order changes each time you run yourprogram. At the top of the exercise area, you can change what sort of orders you will get. Right

now, you will get orders for red paint, but you can change it.

Next: While: Loops and Repeating Things


17/24

While: Loops and Repeating Things

Sometimes you want a computer to repeat something over and over again. A loop is used to

make a computer do something more than one time.

One type of loop is the infinite loop. With an infinite loop, a computer keeps doing the same

command again and again. The computer will keep repeating the command forever.

You make an infinite loop with the "while(true)" instruction. First, you type while(true). Afterthat, you should put an opening curly brace. Then, you put all the instructions that you want the

computer to repeat. Finally, you put a closing curly brace. For example, in the above program,the computer will keep telling you how great you are and how it likes you.

The computer will just keep repeating the instructions from the infinite loop forever. To get thecomputer to stop, you must click on the stop button.


18/24

Loops are useful for counting things. The program above starts at 1 and keeps counting.

Remember to press the stop button when you want the computer to stop.

At the beginning, n is 1. The computer then shows you this. Then, it adds 1 to n, giving 2. Andthen, it shows 2 on the screen. Then, it adds 1 again to n, giving 3. And it shows this on the

screen. And this continues again and again. By doing this, the computer is able to count numbers.

Usually, you don't want the computer to repeat something forever. In Javascript, there is an

instruction called "break." When a computer sees the break instruction, it stops repeating things.

This program uses the break instruction to count from 1 to 5. n starts at 1. Each time the loop isrepeated, n goes up by 1. But when n is 5, the loop stops, and the computer says "Done."


19/24

You can also use break to stop a loop when something important happens. In this program, thecomputer asks you a question. It will keep asking you the same question until you give the right

answer.

Next: Random Numbers and Choose

Random Numbers and Choose

When you roll a die, you aren't sure what number you will get. You might get a one or a six or afive. This sort of number is called a random number.

Javascript has a command called "random" for making random numbers. With the randomcommand, you must give a number between the brackets. Javascript will then give you a random

number between 1 and the number you gave.


20/24

In the program area on the left, type "show(random(6));" When you click the Run button, what

number is shown? If you run the program several times, you should get lots of different numbers.

Let's write a Rock, Paper, and Scissors game in Javascript. In this game, both you and the

computer must choose between rock, paper, scissors. If your choice beats the computer's choice,then you win.

At the beginning of the program, you should choose whether you want rock, paper, or scissors.We'll use a special command called "choose." With the choose command, you first give a string

with some instructions. Then, you put a comma and some more strings with different things thatsomeone can choose. If you take the first string, choose will give you back a one. If you take the

second string, choose will give you back a two. If you choose the third string, choose will giveyou back a three. And so forth.

So the program should start by asking you to choose rock, paper, or scissors. We stick the choice

in a variable called "you." If "you" has 1, it means rock. If "you" has 2, it means paper. And if"you" has 3, it means scissors.


21/24

Then, the computer should choose rock, paper, or scissors. It uses the random() command to finda number between 1 and 3. It puts that number into the variable "me." It then tells you what its

choice was. Remember that 1 means rock, 2 means paper, and 3 means scissors.

At then end, the program needs to figure out who won. It looks at your choice and the computer's

choice to see who made the better choice. If "me" is 3 and "you" is 3, then both you and the

computer chose scissors. That means nobody won, and the program will show the word draw. If"me" is 1 and "you" is 2, then the computer chose rock and you chose paper. That means youwin. Try the program out

Can you change the program so that you have to play the game three times, and the computerkeeps a score?

Next: FSM: The Finite State Machine


22/24

FSM: The Finite State Machine

A finite state machine isn't a crazy type of machine. A finite state machine is one way to writeprograms. A finite state machine is usually just called a FSM.

A FSM is made up of two things. First, it has some writing about what's happening. Then, it has

some arrows that show different choices you can make. You should make a choice and followthe arrow.

FSMs are good for making games and stories. Here is one game where you have to find some

treasure. First, go to Start. Then, you just follow the arrows until you get to the end.


23/24

Here is a simpler FSM that lets you explore the rooms of a house.

Let's try making a program that lets you explore the house. First, number all of the rooms.

Now we'll start programming. When programming a FSM, you need the computer to knowwhich room you are in. You should start in room 1.

The computer should tell you something different depending on which room you are in.


24/24

The computer should also ask you where you want to go. The computer should then change the

room number depending on your answer.

After your room has changed, the computer should go back to the beginning and tell you about

the new room. You can use a loop for this.

That's it! You can run the program now. You will be able to move through the different rooms.

Try taking the FSM for the treasure game and programming it into the computer. Then, try

making your own FSM game.

Beginner Lessons

Documents