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!

Advertisements

Tongue Twisters for Road Trips

Just as I finished compiling a list of car ride jokes, I bumped into this book at the National Library. A book on tongue twisters. Sounds good for a road trip too!

I extracted 20 of them from the book to store here for future reference.

Here’s the downloadable version

Tongue Twisters for Road Trips

  • 1. How much wood would a woodchuck chuck if a woodchuck could chuck wood?
  • 2. Ann anteater ate Andy Alligator’s apples, so angry Andy Alligator ate Ann Anteater’s ants.
  • 3. How high would a housefly fly if a housefly would fly high?
  • 4. Each Easter Eddie eats eighty Easter eggs
  • 5. Which is the witch that wished the wicked wish
  • 6. Santa’s sleigh slides on slick snow
  • 7. Shy Sheila shakes soft shimmering silks
  • 8. Sarah saw a sash shop full of showy shiny sashes
  • 9. Sly Sam slurps Sally’s soup
  • 10. He threw three free throws
  • 11. The boy blinked at the blank bank blackboard
  • 12. There’s no need to light a night-light on a light night like tonight. For a night-light’s just a slight light on a light night like tonight
  • 13. Blake the baker bakes black bread
  • 14. Peter Piper picked a peck of pickled peppers. A peck of pickled peppers Peter Piper picked. If Peter Piper picked a peck of pickled peppers, how many pickled peppers did Peter Piper picked?
  • 15. Betty Botter bought a bit of butter. “But,” said she, “this butter’s bitter. If I put it in my batter, it will make my batter bitter. But a bit of better butter that would make my batter better.” So Betty Botter bought a bit of better butter, and she put it in her bitter batter and made her bitter batter a bit better
  • 16. We surely shall see the sun shine soon
  • 17. Betty and Bob brought back blue balloons from the big bazaar.
  • 18. Sam’s shop stocks short, spotted socks
  • 19. Mrs Smith’s fish sauce shop
  • 20. Old oily Ollie oils old oily autos.
  • Extracted from Tongue Twisters by Pam Rosenberg

    Jokes for Road Trips

    It’s the school holidays! Time for vacation! Every time we go on trips, we tend to have lots of time spent on the road, getting from one place to another. I will then always prepare some activities to entertain the kids on long car rides. And when my activities run out, they will whip out the iPads at the very first opportunity.

    Here’s what I prepared previously:

    1. Storybooks

    2. Random toys in a bag

    3. LEGOs

    4. Small balls

    5. DIY busy book (took me lots of time and effort to make)

    DIY busy book because I could not find any suitable ones outside

    6. Cardboard boxes, paper strips and Pom poms (for the baby then who gets fascinated over boxes)

    Made from toilet roll and diy Pom Pom with yarn. Can discard after the trip if the condition degrades 😂

    7. Hand puppets

    Hanged the toy with pacifier clip and a rubber band so it’s stretchy

    8. Cars

    The thing with legos and balls are that they tend to drop again and again all over the car and I would have to pick them up again and again. Duh!

    Busy books were good as I made sure I had different types of activities packed in, like mazes, writing sheets, magnetic paper doll set, various worksheets for academic skills, stickers, and thread with paper punched with holes for threading and learning how to tie shoe laces.

    The downside was that once it gets dark, all these activities aren’t appropriate anymore. Then they will spend the rest of the ride on gadgets. With bright lights and everything.. duh again.

    I’ve tried to think of something that they could do during those night car rides but couldn’t get any good ideas.

    Then this idea came to me. We can’t see well in the dark but we could talk. But talk about what? They could easily get turned off and go back to the gadgets. I finally thought of something that could entertain them for a while. We could do “I spy with my little eye…”. But it could be too dark outside to spy on anything at all.

    Finally, car ride jokes! That sounds like a potential idea. So I googled for some jokes and consolidated them here. Here’s a downloadable editable version if anyone is interested. Hope it can sustain for a while for at least some parts of the rides

    Jokes for road trip

    1. Where do sharks go on vacation?

    Finland!

    2. Where do sheep go on vacation?

    The Baaa-hamas!

    3. What do frogs like to drink on a hot summer’s day?

    Croak-a-Cola!

    4. How do rabbits get to their holiday destination?

    By hare-plane!

    5. What travels around the world but stays in one corner?

    A stamp!

    7. Where can you find an ocean without water?

    On a map!

    8. Where do cows like to go in the evenings?

    To the mooooo-vies!

    9. What did the one ocean say to the other ocean?

    Nothing, it just waved.

    10. What happens when you wear a watch on a plane?

    Time flies!

    11. Who can drive all their customers away and still make money?

    Taxi drivers.

    12. What do you say to a frog who needs a ride?

    Hop in

    13. Where do dogs park their cars?

    In the barking lot.

    14. What’s a car’s favorite meal?

    Brake-fast.

    15. Why did the old lady fall in the well?

    Because she couldn’t see that well

    16. What’s brown and sticky?

    A stick

    17. Which country has the most germs?

    Germany

    18. What did the tornado say to the sports car?

    Want to go for a spin?

    19. What part of the car is the laziest?

    The wheels, because they are always tired!

    20. What only starts to work after it’s fired?

    A rocket!

    21. What’s the worst vegetable to serve on a boat?

    Leeks!

    22, What happens when a frog parks in a no-parking space?

    It gets toad(towed) away!

    23. What do you call a sleeping bull?

    A bull-dozer!

    24. Why do you need a license for a dog but not for a cat?

    Cats can’t drive!

    25. What is the difference between a nicely-dressed man on a tricycle and a poorly dressed man on a bicycle?

    A tire (attire)