People keep asking me about how to learn programming. Before Steve Jobs killed it, Apple's HyperCard was by far the best way to learn programming. There never has been anything like it before nor since, but it only ran on classic Macs. Before Microsoft killed VisualBasic(v6) and replaced it with a completely different (and incompatible) product with the same name, VB6 was a reasonable second for people with lesser computers. Both of those are gone now, and they can't run on current computers anyway.
In this first page we will look at the smallest elements of a program, the constants, variables, and operators. Then we will look at statements and how to form them into larger structures. In the following section we will look at the largest structures, called functions. A program is generally a collection of functions, with some startup code. After that we will look at complex data structures, and how functions are associated with them in what is called Object-Oriented Programming, or OOP. Later we will do some game programming and animation.
This tutorial is a work in process. Lately I have been uploading revisions
every few days. Most of the files have revision dates at the front or end,
which you can check to be sure you have the latest copy. This entire tutorial
(including supporting files) is also available in a
single zip here.
Open WordPad (or your favorite text editor) and type the following text into it:
</script> </body> </html>
To run your program, you need to install it into a web page. Everything you need is already there, just save the file as "Test.html" (without the usual ".txt" at the end) then open it in your browser. Usually that is as simple as double-clicking the file icon, but you can also open it within your browser from the File->Open menu. If everything went well, you should see the "Hello world!" message as a single line of text in the new window. If it didn't work, you may need to get somebody to help you. Once it's working, the rest should come along without bothering your favorite guru again.
Most of programming is about finding the mistakes you made, and the
my own. Read about it here (we'll get to it
Another important part of programs is the comment, which doesn't affect how the program runs in any way, but is often helpful for explaining to other programmers (and especially to yourself, tomorrow) what this part of the program is intended to do. One-line comments begin with a double slash // and end at the end of the line. Block comments start with /* and end with */ possibly on another line and/or in the middle of the line, with executable code resuming after the comment. Comments can occur anywhere a space is permitted. Here are some examples of comments:
document.write("Hello world!"); // this is a commentConstants are values that cannot change when the program is running, and you can tell they are constants because they (mostly) look different from variables. Variables hold values temporarily, and the program gets interesting when variable values are changed from time to time. Operators combine constants and variables into expressions, which have their own transient values.
// document.write("Hello world!"); // this whole line is a comment
/* comment at front */ document.write("Hello world!");
document.write/* comment in the middle */("Hello world!");
/* this is three lines of comments,
including all of this..
and ending at the end of this line */
Numbers and quoted string literals are the most obvious constants. 1 and 3 and -27 and 3.1416 are numerical constants. The quoted strings "Hello world!" and "3" and the empty string "" also constants. Other constants such as true and false look like variables.
You can experiment with constants in your program. Try replacing the
world!" literal with another constant, then save it and click the
Reload button on your Test window in the browser, or if there is no such
button, the View->Refresh menu. The Reload/Refresh is necessary
because most browsers make a copy of the file, then look at the copy instead
of the (possibly changed) original. Closing the window and re-opening it
seems to work in Windows. If nothing shows at all, you probably made a
typing mistake. Check your work very carefully, or else go back to something
known to work, then make your changes one at a time, checking each modification.
To put a value into a variable, you need an assignment stament. We'll cover the other statements later, but assignment is simple. The name of the variable comes first, followed by the assignment operator, then the value, finally ending in a semicolon, for example:
myVar = 3;It is tempting to pronounce the assignment operator as "equal" but that's not a good idea, because there is another "equal" operator for comparison. I prefer to say "gets" as in "myVar gets three" for the statement above. This captures the meaning of the assignment statement, which is to put the value 3 into the variable myVar.
Variables are like mailboxes in the postoffice or at the front of an apartment. The mail carrier comes and puts values (letters) in the boxes. Sometimes they get a letter in the wrong box, and take it out and place it in a different box. Unlike mailboxes, variables can hold only one value. Unlike letters, the same value can be put into several variables. As the program runs, new values can replace old ones, so each box always has a value, but it changes from time to time, as directed by the assignment statements.
We now expand our test program to two lines (notice the variable declaration):
var myVar = 3;Notice that the multiplication was done before the addition, the way we learned in school. If you want the calculation to happen in a different order, use parentheses to group the operations that must happen first:
document.write((myVar+2)*5);This is called operator precedence. You can experiment with other numbers and operators to get the feel for it. You can also build an expression value on the right side of the assignment statement, provided you use only constants or variables previously defined. The variable is not defined until you put a value into it, and the interpreter in my browser gives it the cryptic value NaN (Not a Number) if you try to use an undefined variable. But you can define multiple variables, then mix and match:
var x = 5+myVar;
There is only one string operator, concatinate, and it's unfortunately spelled the same as the add operator. I guess the language designers were thinking that it's essentially adding the strings together, but concatinating strings is fundamentally different from adding numbers. Thus "Hello"+World" has the value "HelloWorld". This gets weird when your strings have numeric values: "3"+"2" is the string "32" but "3"-"2" is the number 1. That's because the interpreter does its best to make sense of what you gave it. The plus makes sense for strings, so it concatinates them; minus is only valid on numbers, but the strings can be converted to numbers and then subtracted. Notice that ("3"+2) is still the string "32" and "3"-2 still makes sense as having the value 1. Try different combinations of values and operators to see how this works.
There are three boolean operators, logical AND (&&), OR (||) and NOT (!). NOT inverts false to true and vice-versa; (a&&b) is true only if both a and b are true, and false otherwise; while (a||b) is false only if both a and b are false, and true otherwise. The bitwise operators & and | and ~ work the same on the individual bits of numbers. Thus 5&9 gives 1, while 5|9 gives 13, and ~5 gives -6; the exclusive-OR operator ^ gives 0 where the bits match, and 1 where they don't:
0101 0101 0101If you use a numeric operator on a boolean value, the interpreter converts the value to a number, 0 for false, 1 for true. There are also the (numeric) bit-shift operators, left-shift << and right-shift >> which you can experiment with. If you are not good at working with binary numbers, you probably won't have much use for these at first. Eventually you will need to become familiar with binary numbers if you are going to be a successful computer programmer.
& 1001 | 1001 ^ 1001 ~ 0101
0001 1101 1100 111010
There are six comparison operators, which compare any two values and
give a boolean result. If the values are not the same type, they are converted
to something that is, boolean to number, and if it can, string to number,
otherwise number to string, but it's not a good idea to depend on this
automatic conversion, because grown-up languages don't do that. The operators:
|>||greater than||<=||not greater|
var myVar = 3;but you might be surprised to see the result (5, rather than false), and even more to discover that the next time you use myVar it has the new value. C programmers are proud of doing stuff like this, which is one of the reasons C code is so much more fragile than better languages. I don't recommend it.
There are two other operators, which like the assignment operator, have persistent side effects. These are the increment ++ and decrement -- operators. They are useful in their place, and you can make your code especially unreadable by using them elsewhere. The expression (++myVar) increments the variable by +1 before it is used in the value of whatever expression contains it, and (myVar++) increments it after it has been used. The decrement operator works the same, but subtracts 1 from the variable. Notice that the variable retains its new value. I personally refuse to use these operators inside expressions, because they are the unwitting cause of so many bugs. Like assignment, you can use the increment and decrement operators in their own statements, thus:
myVar++;Of course it makes no difference whether you put the operator before or after the variable name in this stand-alone usage; most people use the postfix form (after). Note that every statement ends with a semicolon, with one exception we will get to later. Using the increment operator can be thought of as shorthand for an assignment. These two statements have exactly the same effect:
myVar = myVar+1;
There is a third way to say the same thing, which is the plus-assignment operator:
myVar += 1;There are corresponding combinations of most of the operators, which allows you to update a variable by their respective operations and any appropriate value. I don't clutter up my memory with these extras, as they do not contribute anything useful to my programming skills.
Rev 2010 December 24