This is a series of articles that will offer you a gentle introduction into coding, or the art of computer programming.
All you need is a web browser and a little bit of daily time for reading these articles and do some practice.
Practice is absolutely necessary! Learning to code is like learning a foreign language. It requires study but also practice. If you reserve a little bit of daily time and you are motivated to learn, you’ll soon discovered that you’ve acquired a new language: JavaScript.
That’s right! This is the language we are teaching here: JavaScript – one of the most popular computer programming languages out there. This language won’t help you obtain directions to Eiffel tower in France but will help you give instructions to your computer.
Are you eager to give your first instruction?
At this point, we highly recommend you to print this article. By following the exercises from the printed copy, you’ll be forced to use your keyboard to type the programs. This will greatly improve your coding skills!
CodeGuppy.com
As mentioned above we will teach you JavaScript in your browser. You don’t have to install or configure any program. Any keyboard based machine (Mac, PC, Chromebook) is perfect for this task.
The website that will gone use is called codeguppy.com – a site for teaching coding to kids, teens and creative adults.
Go ahead and visit codeguppy.com Feel free to explore the site and, when you are ready, register for a free account.
Once you created the account, you should see a gray band at top of the main page. The only button that you should care now is the big green button named “CODE NOW”. This will launch an editor where we’ll be able to type our code.
Use the “CODE NOW” button any time you want to start a new coding session.
Know your environment
Before we begin to code, let’s get familiar with the environment. Look carefully at your screen. You should see two main areas:
- The left area is where you’ll write your code. This is the “code editor”
- The right area is where you’ll see the results of your code. This is the “output area”
Note: If you don’t see the output window, your computer screen resolution is probably too low and the output window doesn’t fit on the screen. But don’t worry: the output window will be automatically displayed when you’ll need to see it.
Typing instructions
Are you eager to give the computer your first instruction?
Carefully type the following text in the code editor area:
circle (400, 300, 100)
Note: It is very important to carefully type the instruction exactly as you see it here. Make sure you include both parenthesis and all the commas between the numbers. Also, please type the word “circle” in lower case. Do not try to capitalize it or introduce any sort of ‘improvement’!
Computers are very demanding. They will refuse to execute your instructions even if you forgot a single comma.
Executing instructions
When ready, press the big green “Play” button and the computer will execute whatever instruction(s) is in the code editor.
And of course, you can press the “Stop” button if you want to stop the execution of your code.
If everything went OK, you should’ve seen a circle appearing in the output area. This is exactly what we’ve instructed your computer to do: to draw a circle.
Your computer is exactly like an obedient dog. It executes precisely each and every command we give to it.
The only requirement: to know what instruction to give and to spell that instruction correctly. Remember: the computer will greatly complain even if you miss one punctuation sign!
Tinker the instruction
Let’s take a second and analyze the instruction in the code area:
circle (400, 300, 100)
- Notice the “circle” word. This is the actual instruction that tells your computer to draw a circle on the screen in the output area.
- After the “circle”, in between parenthesis, there are 3 numbers separated by comma “,”. We call these the parameters of the instruction.
Now click in the code editor area and try to change the 3rd parameter from 100 to 300. Be careful to change just the number and nothing else. Do not add or delete any other symbol or number.
When ready press again the “Play” button!
Note: If you don’t see the “Play” button, you previous instructions may probably be still in execution mode. Click on the “Stop” button or on the “[]” symbol to stop it and then “Play” should be visible again.
Do you see anything different with the circle? … or you managed to break the code?
Circle radius
If you managed to change the code as described, you should’ve seen the computer draw a bigger circle on the screen.
This is because the 3rd parameter specifies the radius of the circle.
Feel free to continue playing with the radius of this circle. Try different numbers between 0 and 300. After each code modification press the “Play” button to execute the code.
Circle position
Until now we varied only the radius of the circle. What if we want to control the position where the circle is drawn on the screen?
This is actually what the first two parameters of the “circle” instruction are telling. They specify the coordinates of the center of the circle.
Note: Don’t let the “coordinates” term scare you. We’ll teach you about coordinates in a future article.
At this moment let’s just play with the coordinates: in the code editor, try to choose different combinations for the parameters:
- First parameter: number between 0 and 800
- Second parameter: number between 0 and 600
- Third parameter: number between 0 and 300
After each code modification press the “Play” button to see the effects. Don’t rush! Spend at least 5 minutes tinkering the parameters and observing the effects.
Multiple instructions - 1
We hope that you didn’t break the code until now.
If that’s the case, erase everything in the code editor and type again the initial instruction:
circle (400, 300, 100)
Now let’s have some fun and add more instructions.
Using copy and paste operations, copy this instruction at least 2 more times below the original one. Please copy from the code editor, and not from this article. You should have something like this:
circle (400, 300, 100)
circle (400, 300, 100)
circle (400, 300, 100)
This made your program three lines long! Even if these are identical lines, we still call this a multi-line program.
Until now we executed just one instruction at a time, but the actual power of coding consists in telling the computer to execute a longer list of instructions arranged in the desired order.
Computers are very good at executing multiple instructions. It can do this with amazing speed executing millions and millions of instructions per second.
For now – however our code has only three instructions. Let’s try to execute the code and see the effect!
Switch now to your code editor and click “Play”. What do you think should happen?
To some surprise the output is still a single circle, even if we have three circle instructions. In reality, the computer is drawing three circles, but since all of them have the same parameters, the circles are drawn in the same position on top of the previous one.
Fixing the program
Go ahead and change the parameters of these circles and observe the effect. Don’t forget to click “Play” after each change.
We trust you created a pretty unique composition of circles. If you are pleased with your program and you don’t want to lose it, please click the “Save” button located in the top-right corner.
However, if you don’t know what to change, or you want to see our version, type carefully the following program in the code editor:
circle(400, 263, 50)
circle(350, 350, 50)
circle(450, 350, 50)
Remember to clear out the editor before you type new code. When ready click the “Play” button. Do you see the three circles?
Fun drawing
We cannot end this article without having a fun drawing using only circles. Checkout the following code:
circle(400, 300, 200)
circle(250, 100, 50)
circle(270, 122, 20)
circle(550, 100, 50)
circle(530, 122, 20)
circle(300, 220, 30)
circle(315, 230, 10)
circle(500, 220, 30)
circle(485, 230, 10)
circle(400, 400, 90)
circle(400, 350, 20)
It is pretty long! Therefore, if you need a break, take it now, and when you’re coming back, clear your editor and type all the above code at once. Make sure you don’t miss anything.
Press “Play” and enjoy the drawing!
Yeeeey!!! It’s a bear!
Can you tell which circle instruction draws what part? It is difficult since we still have to learn more about the coordinates and other elements of the drawing system.
However, even advanced coders will find difficult to read others people code… or even their own code after a while.
A good way to remember what a certain portion of a code is doing is to “comment the code”.
Fun drawing – commented
We will include below the the same program that draws the bear, but this time ‘commented’:
// Draw bear face
circle(400, 300, 200)
// Draw left year
circle(250, 100, 50)
circle(270, 122, 20)
// Draw right year
circle(550, 100, 50)
circle(530, 122, 20)
// Draw left eye
circle(300, 220, 30)
circle(315, 230, 10)
// Draw right eye
circle(500, 220, 30)
circle(485, 230, 10)
// Draw nose
circle(400, 400, 90)
circle(400, 350, 20)
Looks much better! Right!
Notice the natural language texts placed from place to place in the code. These are comments. Since comments are meant for humans reading the code, and not for the computer, we must put slash characters “//” in front of each line of comment.
The computer will basically ignore the lines that start with //. You can put on that line whatever you want… the computer will not complain about incorrect syntax or unknown instructions. It is as those lines don’t even exist at all in the code.
Conclusion
We hope you enjoyed your first computer coding lesson!
Before ending this article, we want to remember you to save your program. In the upper-right corner there is a “Save as” button. You can use this button at any time to save the current code in the code editor as a separate file that you can further edit and customize.
The code is saved in the cloud so you can continue editing from any computer with internet access.
Note: This article is also available as an interactive tutorial at https://codeguppy.com/code.html?t=_intro_to_coding
Until next time: Happy Coding!
Top comments (0)