Here’s your first Javascript program. Start your text editor program with a new, empty document. Simply select all of the text in the odd font below, copy it, and paste it into your new, empty document.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>My First Javascript Program</title>
<meta charset="utf-8" />
<script>
var myCanvas, context;
window.onload = function() {
myCanvas = document.getElementById("theCanvas");
context = myCanvas.getContext("2d");
context.fillStyle = 'white';
context.font = "36px Georgia";
context.fillText("I can program in Javascript!", 200, 400);
};
</script>
</head>
<body style="background-color:#000000">
<canvas id="theCanvas" width="600" height="720"></canvas>
</body>
</html>
Now, if you are a reasonable person, you are thinking, “What the hay-ull is all this gobbledygook?” The answer is: it’s gobbledygook, all right. But you don’t need to worry about what all this gobbledygook means. For now, just accept the fact that it works. Prove that to yourself by saving your program (the one in the text editor document) as “MyProgram.html”. For now, save it EXACTLY as I have written it.
Now leave the text editor program and go find the file you just saved — the one called “MyProgram.html”. When you’ve found it, double-click on it. If you have a halfway decent computer, it will launch your browser program and display the results of your program, which will look something like this:
Now comes the most educational part of this exercise: play. It’s time for you to play with this program. Here again is the program, but this time I have highlighted in red those things that you can change without blowing up the program.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>My First Javascript Program</title>
<meta charset="utf-8" />
<script>
var myCanvas, context;
window.onload = function() {
myCanvas = document.getElementById("theCanvas");
context = myCanvas.getContext("2d");
context.fillStyle = 'white';
context.font = "36px Georgia";
context.fillText("I can write in Javascript!", 200, 400);
};
</script>
</head>
<body style="background-color:#000000">
<canvas id="theCanvas" width="600" height="720"></canvas>
</body>
</html>
Pick one of red items and change it, then run the program again. What did your change accomplish? I suggest that you start off with small changes, because a really huge change could produce an effect you might not be able to figure out. For example, if you replace the 36 with, say, 36000000, you’ll probably get an empty black screen.
Some things can be changed pretty freely. You can replace “I can write in Javascript!” with almost anything — but not QUITE anything. If you put in extra quotation marks (either single quotation marks (‘) or double quotation marks (“)), then you’ll mess it up. Just remember, make only one change at a time and be ready with that UNDO button when you cripple the program.
And no, you can’t do any damage playing with the program. No matter what changes you make, you will not start a nuclear war, set your computer on fire, or, worst of all, accidentally send nude photos of yourself to everybody in your Contacts list.
Other things are more delicate. For example, you can change the #000000 to #AEF077, but not #AEF07 or #AEF0777. There must be exactly SIX characters in that number, and those characters can by the numerals 0 through 9 or the letters A through F. If you put anything else in there, it won’t work. You can change ‘white’ to ‘red’, but not ‘forest green’. It is possible to find on the web rules for exactly what you can and cannot do in these places, but for now, you need to learn how to play.
I have never taken a single programming course in my entire life. Almost everything I know about programming I learned by playing around with programming. Sure, there are plenty of times when you just have to look things up or ask an expert, but your first and fastest way to solve problems is to play. So get to work play!