JavaScript Programming for Kids?

Teaching kids how to do coding has recently become quite popular here in Singapore. I checked out some of those classes that aim to teach children how to code. Most classes are either robotics or uses the Scratch platform. I checked out the Scratch website and attempted to learn programming via their method but did not understand nor how to code without using the website. If you have done flash animation before, it feels more like that than doing coding. Drag and drop pre-configured motion action, logic for the various conditions that you want to animate the otherwise motionless still-image sprite.

Then I found this book, again from our friendly National Library  , I’m a JavaScript Games Maker: Basic by Max Wainewright. Now we are looking at programming.

So I got inspired to write a post on how to get kids started on some Javascript basics and also do a simple program to get started. My girl tried out the book and only just the “Hello World” basic script got her beaming with pride that she got her first coding program working. She went on to try another sample program with a real working game, encountered some bugs, and got our help to resolve it. And she proudly declares that she made her very first game. And she got her sister interested to learn as well.

To get started, we need 

  1. A computer (Desktop, Laptop, Macbook etc)
  2. Any browser (Chrome, Safari, Microsoft Edge etc)
  3. A text editor App (see recommendation below)

For the text editor, any computer should come with a default text editor, for example NotePad on Windows or TextEditor on Mac. Although the basic editor works as well, but using applications built for coding would make the task much easier. You would have less chance for bugs in the program due typo error because a suitable text editor will provide suggestions to help you autocomplete your code.

‘Bugs’ in programming refers to errors in the code that make the code not to work as you expect. The ‘bug’ could be due to

Typo error – you spelt some keyword wrongly

Logic error – no typo error code works but not the way you wanted it. For example, you wanted your animation to move left upon click but it moved right.

Keyword – there are many different programming languages. Each language have their own keyword for you to use to build your code. They usually have lots of documentation, official and non official, to explain the keywords and even the ready made functions (similar to excel functions) that you can use to build your code logic.

Back to the text editor recommendation.

Here’s some suggestions and screenshots using different editors

1. Notepad

Notepad should be familiar to anyone who uses Windows. It’s good enough to use for taking down and storing some notes but definitely not good enough for coding.

Using the basic Notepad application in Windows looks like this. All black texts, no autocompletion of key words

2. Notepad++ (Download here)

The Notepad++ is a free software, downloadable for Windows. Just navigate to their site and hit the big Download button to install. Using Notepad++ looks better than using Notepad but you would still need to type everything out yourself.

No auto-completion of keywords but keywords such as would automatically be changed to blue colour font, so you know that’s a keyword in Javascript

3. Visual Studio Code (Download here)

For those familiar with Microsoft Visual Studio, no, this is not the same as that. Visual Studio Code is also developed by Microsoft but is a freeware that can be downloaded at no cost. In the book, the author recommended Sublime but on the website it indicated that a licence is required for continued use (which means you need to buy) so I would prefer Visual Studio Code instead. Both applications can be downloaded for both Windows or Mac. Firstly, you just need to type a few words and the Visual Studio Code would list out some suggestions for you so that you only need to select the option that you want. And the fonts are colour coded, so you know which are the keywords.

Auto-complete suggestions with some explanation notes on each option to help to understand how to use the keyword

Now we can start our very first program! The first basic program, basically just pops up a “Hello World” message when you open the file in a browser.

Open your text editor and type in the words, unless you use Visual Studio Code, you might not need to type in everything.

    alert (“Hello World”)

Save the file somewhere. Click the File button at the top of the editor and select Save. Enter the filename as Hello.html. Go to the folder where you save your file. In windows, the default should be in My Documents (full path should look something like this “c:\users\<your username>\Documents”. In Mac, the default document folder should be in Documents. Open the Finder. Select Documents folder. You should see the file Hello.html.

Double click on the file. It should open up in your default browser and look something like this.

Every programmer’s first Hello World program 🙂

Although we are using javascript to code, but we actually saved the file as “.html” so the system would automatically open the file in a browser and execute the codes. But we had actually written some HTML as well as JavaScript codes. The keywords and are actually HTML codes. HTML code can be easily identified as they start with a ‘<‘ and ends with a ‘>’ symbol. The actual Javascript code is only this line “alert(“Hello World”)“. The “alert(…)” with the open bracket and close bracket is a function in Javascript that performs the displays that pop up box when you open the file in the browser. Everything inside the brackets, enclosed with open and close inverted commas “” can be any words that you want to show in that pop up box. In this case, Hello World. You can now try to change the Hello World text to anything else like Hello Me, My first Javascript etc and see the different messages pop up.

So there we have, the very first JavaScript programming for kids! I will try to do up another one for the actual game script that was described in the book. It’s quite fun to build and later play the game that you built on your own. So do check back here another day for the post!

Leave a comment

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: