Teach Kids Programming with Javascript: Lesson 0 - Getting Started
Just copy and paste this code, and you'll have kids editing programs within a half-hour. All you need is any web browser and any text editor, like Notepad.
The first thing new programmers need to learn, is the Write-Save-Open ; Edit-Save-Reload sequence. Here's how it goes. First open up Notepad, or TextEdit, or any plain old text editor. Copy and paste the following into the editor:
<html>
<head>
<script>
function popup() {
alert("Hello out there!");
}
</script>
</head>
<body>
<button onclick="popup()">
</body>
</html>
That was the Write step. Now for the Save. Go to File..Save. You have to save it to a file that you know where it is on your computer, and it has to end with .html. Sometimes Notepad will make problems by adding a .txt to the end of the file, and you will have to find the file and change its name to end with .html. Lets say we save it as a file named popup.html.
The third step is to open the file in your web browser. Open up Firefox or your other browser, and go to File..Open File. Now you have to find the file you just saved. This is an important skill to master for budding programmers - know where you put stuff! Once you can see it in the web browser, you've completed the first three steps!
It should look something like this:
and when you click the button, a simple message should pop up:
Now the fun begins! Time for the Edit-Save-Reload sequence, which is where you get to start hacking.
Go back to your text editor (now would be a good time to show kids how to click Alt-Tab to switch applications, or Apple-Tab on the Mac). Change the words that say
Hello out there!
to whatever the child would like. Make it say "Hello Johnny" or "Help, I'm stuck inside a computer!". Just don't delete or add any quotes, braces, parentheses or other funny characters. Save your changes, switch back to the web browser, and click the reload button or File..Reload. (You may want to explain that the web browser doesn't know about your changes, until you tell it to look at the file again. And if you don't save them, it definitely won't know you made them!)
Now when you click the button, you should see your own words:
Learning these simple steps - grab code, save and view; edit, save, reload - will serve young hackers - ah, programmers - well! Children may like to spend some time changing the message to different things, to feel in control of the process. Older kids may want to move on right away to the next steps. Until a detailed lesson 1 is written here, here are some clues:
- Try copying the alert line more than one time. If you can get multiple messages to pop up, you can make them into a simple story or some jokes.
- Try adding another line under the alert :
document.bgColor = "blue";
- Try making copies of the button and the function, and changing the name of the 'popup' function to something else
Online tutorials abound, an excellent one is the W3Schools Javascript Tutorial with online tools to help you learn quickly, and examples to grab!
Advanced students will want to look at a Javascript Reference to understand the syntax and all the possible things you can do!
Enjoy, and if you have questions, requests or experiences to share we'd love to hear about them!
