Most computer users are mystified by computer. They know how to use them, but they're not sure how they work. There is also the concept of computer programming — the esoteric science used by developer to make the computer do something interesting.
In this article, I would like to give a quick introduction to what is computer programming. This is not a complete course or tutorial, but I think that this will be enough to give you a better idea of what computer programming is all about. Also, I hope this will will also show you why there are bugs in most of the applications we use day-to-day.
Let's start demystifying computers. To begin with, they are machines, and only machines. In my courses, I sometimes ask my students what is the most powerful computer on the planet. Some answer the brain. However, I can't accept that as an answer, because the human mind is
not a computer...and that's a good thing! Though our minds are not capable of doing billions of calculations per second, it is able to
think, which a computer is simply (as of yet) incapable of doing.
So, computers are not thinking machines. They are incapable of thought. But what are they? Fundamentally they are machine capable of storing information and processing that information. To process that information, a computer follows a sequence of precise instructions. Creating those instructions is what computer programming is all about.
Without a program (a series of instruction), a computer is incapable of doing anything. The instruction given by a computer programmer falls into certain categories.
- Accessing memory — the ability to read and change what is in the memory of the computer
- Performing calculations like additions, subtractions, multiplications, etc...
- Evaluating conditions like 'is A greater than B' or 'is the number of characters entered less than 50'
- Branching — or jumping around in the program. For example, if the password matches, allow entry, otherwise, display error message.
The last point — branching — is really what programming is all about. Telling the computer how to handle different scenarios.
To give instructions to a computer, a programmer uses a programming language. There are literally hundreds, if not thousands of programming languages out there. The reason there are so many languages is that some are better suited at certain task than others. Another way to view it is road vehicles. There are compacts cars, minivans, sports cars, buses, motorcycles, transport truck, etc. The reason there are so many different cars on the road is that each is better suited to one task or another.
Programming languages, as opposed to human languages, are very strict. Since computers don't think, if a period is missing, a comma is misplaced or a word is misspelled, the computer will not be able to make sense of the code. Chances are, the computer will not even execute the program. Even if the computer can execute the program, most likely, it will not do what you expect it to do. In other words, it encountered a bug. The programmer
meant something, but
told the computer something else. Call it a misunderstanding if you'd like.
Here's an example: The programmer tells the computer: 'The cat is shedding fur on the couch. Move it.' The computer comes back and says: 'I finished moving the couch. Next instruction?'
I'm a strong believer that the only way to learn something is to do it. Thus, to help you learn what is programming, we are going to look at code, and see it in action. I strongly recommend you play around with the code. Don't worry, you will not be able to break anything. If you mess up the code click the 'Reset' button, and it will be brought back to it's original state.
To explore programming, we'll use a language called JavaScript. It's a reasonably easy language to start with, and is readily available to most web browsers like
Firefox and Internet Explorer.
Let's start with a simple example. We'll ask our computer to execute the 'alert' function. Look at the following code, and click 'Execute.'
If all went well, you should have seen a window popup with the text 'hello.' If it did not work, it may be that your browser has JavaScript disabled for one reason or another.
In the above example, we are asking the computer to execute the JavaScript 'alert' function. It's one of many functions we can use. We'll explore a couple more as we carry along.
For the fun of it, try to change the above code to:
- alert(1+2);
- alert("1+2");
- alert(1+2*3);
- alert(8/2);
- alert("Hello " + " World!");
Did you try all of the example? Can you explain the difference between the first and second example? Also, in the third example, can you explain the result?
Once you are reasonably comfortable with the above example, let's move to the concept of variables. A variable is simply a placeholder for information. In other words, it's a chunck of memory we are reserving for our program, and we can put whatever value we like in it, and look at the content at any time. Try the following example:
Let's disect the above example. The first line which begins with 'var' tells JavaScript I would like to declare a variable named message. You choose the name of your variable. They can be any combination of letters and numbers, but they cannot begin with a number. You cannot use spaces or punctionation in the variable name. For example, message, message1, myvar, c123 are all valid names. On the other hand, 123, hello world, my*var are not valid names.
The second line tells JavaScript to store a value in the variable. Right now, we are storing the textual value 'Hello from a variable'. Try to replace the text by 2+2 and see what happens. Try it with and without the double quotes ("). Also, try to change the name of the variable to something else, like mymessage. Again, feel free to experiment.
You probably noticed that there is a semicolumn (;) at the end of each line. This is to tell JavaScript that we are finished a statement, just like in English we use a period (.) to indicate that we are finished a line.
In the next example, we will use two variables, as well as interact with the user. Try the following code:
I hope that it's not getting too sophisticated. It if seems like a lot of goobledygook, look at the program one line at a time.
The first line, 'var name,' declares a variable called name. In the next line, 'name = prompt("What is your name?");' we are asking JavaScript to prompt the user for their name, then store it in the variable called name.
The next too lines declare a second variable called message, then 'concatenate' (merges or puts together) three textual value: The text 'Hello, ', the text that the user entered, and finally, an exclamation mark. Notice how the plus (+) sign is used to tell JavaScript to concatenate text together.
Finally, the last line text JavaScript to display (alert) the content of the message variable.
Note that I could have reduced the lines of code. For example, you could have declared and initialize your variables on a single line, as follows:
var name = prompt("What is your name?");
var message = "Hello, " + name + "!";
alert(message);The above code is equivalent to what we executed a moment ago. Try it now if you'd like.
Let's try another example, similar to the first. This time, we are going to calculate something.
Again, read the code line by line, and try to make sense of what's it's telling JavaScript to do. Have you noticed that we are using a new function called Number? What does it do? Try to remove it from the code, and see what happens.
The Number function tells JavaScript to take what is in the bracket, and convert to a number. The thing is, the prompt method assumes that whatever the user enters is going to be text. Thus, if we write 'number1+number2', JavaScript assumes that we'd like to concatenate two textual values. To force JavaScript to treat our variables as numbers, we use the Number function.
If the above explanation is not clear, remember that computers are not intelligent. They do not think. The prompt function returns the text of whatever the user types. Even if you type in a number, for JavaScript, it's text and not a number.
We can tell the difference between a word and a letter, but JavaScript cannot. We have to explicitely tell it so. This is where programming can get a bit tedious. As a programmer, we have to explicitely tell the computer what to do, step-by-step. If you forget to tell the computer something, then the computer is not going to do it.
Though it may seem tedious, the fact that computer do not think is one of their strenght. Because they follow instructions to the letter without deviation, they ensure that a process is completed error-free. AS human being, we can think and rationalize, but we are prone to error. The only way a computer can do an error is if the programmer has introduced an error in their code. Errors in code are called bugs. I'm sure you heard that term before! So, now you know that whenever a program misbehaves, it's most likely because the programmer made a small error in their code. Please don't blame the poor programmer. It is
very difficult to write bug-free code. If you're not convinced, try to write a simple program and see for yourself.
Speaking of simple programs, let's get back to our code. In the next example, we will to some actual programming. So far, the programs that we wrote simply execute one instruction after another. That's not real programming. Programming involves giving decision-making ability to our program. We will look at a simple example that will prompt the user for a password and let the program 'brach' in different direction depending on the password that has been entered.
Can you figure out what the 'secret' password is? Please note that this is only an example. The above code should never be used to protect a website.
We are using a new construct called an 'if' statement. This statement allows your to tell the computer to make a 'decision.' The double equal (==) operator tells JavaScript to compare if two values are the same. The reverse of that would be the != operator that compares to see if two values are different. How about you try it! Replace the == by != and see what happens now. Execute the code with a valid, and invalid password.
You have probably notices the curly brackets { }. These are used to 'group' statements together. They tell JavaScript that every statement between the opening and closing curly bracket should be executed one after another in that branch.
It is possible to 'chain' multiple if statements. Try the following code:
How many branches (else if) can you have? The answer is as many as you'd like.
If statements are one of many constructs that we can use to give define the behaviour of our program. In the next example, I would like to explore the concept of a loop. Loops allow you to tell the computer to repeat something over and over again while a condition is met. Try the following code:
The new construct that we are using is a do-while loop. You'll notice the use of curly bracket to indicate to JavaScript that everything between the do and the while should be executed for each iteration on the loop.
The above example will prompt the user until they enter a valid password. Note that the user cannot even cancel the action. Why not? The reason is, we haven't told the computer what to do if the user clicks the cancel button. Again, computers don't think. We have to tell it exactly what to do.
If you would like to be able to cancel, try the following code:
What you are seeing is starting to look more and more like a computer program. There are actually make ways a programmer can write the same program. The above example is just one.
If you've gotten this far, don't let the length of the program scare you. Disect it bit by bit, line by line. The only thing that is new is the && operator. This tells JavaScript that both comparison (password != "abc123" and password != "") have to be true to continue the loop. Since this is an overview of what computer programming is about, I won't spend too much time on sophisticated conditional statements. As always, feel free to experiment with it.
One last example, then we are moving to the grand finale. The next example will allow three tries to get the password right. If after three tries, the right password is not entered, we exit the loop. There is nothing really new in the next example, beyond merging together many of the concepts we have explored so far.
The only new construct here is the less-than operator (<). Can you see what is does? As long as the counter is less than three, we continue the loop. The moment it's greater than or equal to three, we exit the loop.
Notice the line 'counter = counter + 1;'. Can you figure out what it does? Everytime the loop is entered, we increase the value of the counter by one. For example, the first time we enter the loop, the counter is at zero. Thus, the line reads as 'counter = 0 + 1.' The value of the counter is increased from zero to one. At the next iteration, the line reads as 'counter = 1 + 1,' thus the counter is now at 2.
Again, there are many ways the above code could have been written. Because this is an introduction to what is programming and not an introduction to JavaScript, I'm not exploring all the possible approach here — I'm just exploring how to give instructions to the computer.
For our grand finale, I would like to give you a complete program. It's a game you most likely played in primary school. The computer will pick a number between 1 and 100. You have to guess what it is. The computer will tell you if you guess was less or greater than the secret number.
Look at the code. See if you can figure out what it does, and run it. This is more or less an example of a computer program.
Can you make sense of it? I wrote the code so that it would be reasonably easy to understand, but by the same token, I did not dumb it down too much. If you managed to follow me so far, I think you should be able to make sense of it. It may require you to look closely at the code, and even taking some note on paper, but do give it a try. You can even modify it if you'd like.
So, you've looked at computer code. You now know that computers have a memory (variables) and instructions that the machine will follow to the letter. Because computers do not think, you, as a programmer, are responsibile to tell the computer exactly what you want it to do. If your code does not execute exactly as you would expect, that's because there is a bug. Computer rarely do mistakes. For that matter, we might as well say that computers never do mistakes. So, if your code does not do what you expect it to do, it's not because the computer is wrong. It's because that's what you told the computer to do.
If you've enjoyed this little foray into the world of programming, there are plenty of great resources on the Internet available to you. You can, of course, continue to edit and modify any of the code on this page, and I encourage you to do so. To continue learning JavaScript, I personally would like to recommend
w3schools.com. It's not the only place on the Internet, but it's one that I've used a lot. There are many programming languages you can learn, and JavaScript is only one of them. Also, there a number of best-practices that I did not use in the above examples. The given code is only meant as a learning tool, and not as enterprise-ready solutions.
One way or another, this article should have given you an understanding of what is computer programming — that is, giving very precise instruction to the computer. There's a lot more we can discuss and I'm sure you probably have questions. If you are looking for guidance as to where you would like to go next, or have any questions, please drop me a comment.
Or hey, if you created a cool program, please feel free to share it with us!
Enjoy the rest of your day!
Labels: firefox, javascript, programming
