This course assumes only that you know how to type, copy & paste,
and navigate the internet in a browser. If you are reading this, you probably
already have these basic skills. If you already know how to program some
of this course material will seem elementary, but you can skip over the
parts you already know how to do.
There are several layers in telling a computer how to display a web page. At the top, somebody must decide what content to display, and then how to order it and what it should look like. At the bottom of the heap is the hardware that presents pixels to the viewer, and just above it, the software that converts text and images to pixels. These lower levels are outside the scope of this course, because all software (not just web page display) depends on them.
Somewhere in the middle of this layered heap of responsibility is HTML, a language for telling the computer about paragraph and font management, and which also identifies links to other pages and the placement of graphic elements like tables and pictures. HTML tells the computer what to display, and gives it in the order to be displayed, then the browser software in the next layer down decides exactly the pixel positions and such details. HTML can be thought of as a programming language for displaying the contents of a web page, but it lacks the ability to make decisions, so nobody calls it "programming"; it's just data. There are computer programs to convert ordinary text and pictures into HTML, which the client browser then converts back into text and pictures -- or rather pixels, which the viewer sees as text and pictures. It's all done automatically by magic. The technical term "magic" means "I'm not telling you how it happens."
looks and behaves. It is related to HTML the way animals
are related to plants: both are a form of computer programming, but like
around (make decisions) on its own. However, just as all animals depend
to get it going and to implement the final display. This course does not
teach everything you need to know about HTML to make
other courses (here and elsewhere [links TBA]) for learning everything
there is to know about HTML. You don't need to take
You also need a simple text editor. Many programmers use fancy (and possibly expensive, but not usually) text editors, which have been specially designed to make programming easier. If you have one of those available, that's great, but you don't need it. WordPad will do fine (on Windows, TextEdit on OSX is usable, but only after some unobvious contortions; if you are on Linux, you already know and use a text editor).
Another useful tool is a debugger, so called because it helps you to
step through program execution to find errors (called "bugs") and subsequently
remove them. Debuggers tend to be tricky, hard to use, and/or expensive.
did eventually write my own. You can use it free with this course, but
it's awkward in Internet Explorer and the FireFox debugger FireBug is in
some ways better. More on that later.
Unlike the painter and the architect, the programmer's art is mostly never seen by other people. If an architect designs ugly buildings, nobody will buy his designs, but if a programmer designs ugly software, so long as it works, who cares? Like a child's finger paints, your first efforts at programming will not be "beautiful" but if you stay with it, you can design masterpieces.
Some things the users of your software will see. If it is abusive to the users, or crashes the computer, they will scream and cuss you out. Don't do that. We'll talk about ways to prevent those unfortunate outcomes later.
Unlike the other arts -- even architecture -- programming is an exercise in power. Real power consists in making people & objects do what you want. If you are very rich, you can pay them to do those things. Money is power. A skilled painter or musician draws emotions out of people. The great artists of the past did that; now the artists seem content with evoking shock. Shock and awe, both are emotions. The power of programming is different. Programming gives you absolute control over the computer, and if done well, considerable control over the people who use those computers. Programming is an awesome power. We focus here on controlling the machine; what you do beyond that is up to you.
The greatest power anybody can exercise consists in enabling your subject
to make good decisions on their own. That's what programming is, telling
the computer how to make those decisions -- in advance, before you know
what the data is that the program will be processing. It takes a lot of
concentration for really complicated software, but you can do it. This
course will get you started learning those skills. If you want to.
It is traditional for beginning programmers that their first computer program says "Hello world!" and then quits. It's not much of a program, but it's a start. We will do that now.
First we must deal with the mechanics of getting your program into the computer so the computer can run it. Open WordPad (or your favorite text editor) and type the following text into it:
</script> </body> </html>
<!-- saved from url=(0014)about:internet --> <script>
</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). Most text editors will try to add that ".txt" so the operating system knows to open it in the text editor next time; you don't want that. If you use a formatting editor like WordPad or Word, it will try to save it as a formatted document (".rtf" or ".doc" or some such); you really don't want that. When you choose the "File->SaveAs" menu, it will put up a dialog box where you type a file name. Next to the file name is also the format it should be saved in. The default is almost always wrong, you must pop up the menu to choose "Plain text". It may not give you the choice to eliminate the ".txt" in the file name, but this is not catastrophic, just an extra step. You can save it in your default Documents folder or on the desktop where it is easy to find.
If you succeeded so far, you will see the file on your desktop with the browser icon, so you can open it by double-clicking the file icon. 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.
Check the file name of the file you saved. You need to see the whole file name, including the extension, to verify that you spelled the extension correctly. If not, click on the file name and "Rename" it to have the correct extension. Windows will ask if you really want to do that. You do.
If you made a typing mistake, the program won't run. This is why I recommend copy and paste. Some people imagine themselves to be very good typists, but everybody makes mistakes. The computer will not tolerate any mistakes. None at all. Even the "good typists" spend a lot of time on the backspace key. Plan on it.
The video for this lesson goes through the process. After your first
program works, you should try making changes and see what happens. That
way, when you make that kind of mistake, you will recognize the problem
and (maybe) know what to fix.
1. Sequence, doing steps in a particular order;
2. Assignment, calculating and holding values for later use;
3. Conditionals, making a decision on the basis of a value test, then doing either one step or another (but not both);
4. Iteration, repeating a sequence of steps multiple times;
5. Functions (also called "methods"), giving a name to a sequence of steps, then calling on that function from different parts of the program; and
6. Input and output (I/O), transferring data from the external world into the program, and getting results back out.
six lessons, then move on to higher-level abstractions, the real meat of
programming. The remainder of this course is devoted to exercising your
a simple data obfuscator to foil spammers, stuff like that. We end up with
several larger programs: some stand-alone games, and finally an extended