Teach kids a bit of coding. Part II: The beloved JavaScript

11:27 AM Xun 1 Comments

So onward and fast forward from running through one learn-to-code app to another, I finally decided to go straight back to my home camp, the JavaScript camp.

The whys

Why not? For all the good reasons, convenience, resources, usefulness ... why not?

In this coding kingdom, nothing is more convenient and ubiquitous than JavaScript, the language of the web. Who does not use the web? Even on your phone. Even some of your favorite apps.

Resources? There is more libraries, frameworks than you can count.

Comfortable? Yes, I am utterly at home with JavaScript.

Useful? Yes, I am done with building just another play thing living in someone else website.

Yet another back story is that, unlike a lot of game kids, my kids are not so deeply immersed in the game culture. Rather, they are utilitarian; Unlike me, who always checkout and use whatever is out there, my kids want to build their own tools. For example, they want to build a student bean counter so the teacher can easily track at any given time on any given day, which kid is missing; they want to build a Knock-knock-who-is-there joke factory.

Now, they want to build a star/sticker chart, which gives out (online) stickers whenever someone does a good (or not so goo) job , for example, playing violin.

So there we go.

JavaScript can do math homework

Honestly, coding does look daunting. So the first thing I tried is lure my kids by showing off some of the awesome homework-checking capabilities of JavaScript. Like the following. Using FireBug console.



Ok, it is not quite JavaScript yet, but by using FireBug, the little adds-on for Firefox, I gave her a glimpse of JavaScript

Get in touch with basic html tags

A little quick math quickly lost its shine. So I set out to show the basic html dress code, tags like <p>, <img> and the basic html page structure, head, body, title, etc. Luckily for me, I have Visual Studio, so creating a page is a breeze. The next thing, adding some tags, <p>, <img>. So quickly we have a page (ugly it is) set up that have a image from Google, and some text goes with it.

My daughter was having trouble remembering put the text inside of the <p> tag.



Introduce the concept of array

So far so good. My daughter was mildly interested and amused to see her own page actually come alive!

Yet, we need a lot of knock knock jokes. So I have her to drop more <p>, <img> It was getting very very boring and error prone, so obviously, computer should be more fun and intelligent than this.

So let's see if we can handle an array.

Every programming term sounds so alien. She does not get the name variable or array.

What is an array?
Eh, Emma, an array is a collection of things. Ok?
What does it do?
Eh, it let you put things together, then you can use a loop to go through them one by one.
What is a loop?
A loop is just a loop ...

I am always a person who is short at words, now I am out of words.

No matter. Let's build an array anyway.


In JavaScript, you put similar things inside a pair of square bracket. Like this:

var knockknockJokes = [
            { who: 'lettuce', whoIs: 'lettuce in!', image: "" },
            { who: 'figs', whoIs: "Figs the doorbell, it's broken!", image: "" },
            { who: 'Avenue', whoIs: 'Avenue heard this joke before?', image: "" },
            { who: 'Aunt', whoIs: "Aunt you glad Granny's gone ?", image: "" },
            { who: 'Orange.', whoIs: 'Orange you going to let me in?', image: "" }
        ];



It took more explanation, the object inside of the array, the properties inside of the object, etc. I wish i knew better, more kids-friendly words.

Anyway, the array is done. Let's spill all of our knock-knock jokes.

I wrote the loop for her. And our page is done. We are happy.
The Knock Knock page


Next time, I will tell how I get her to know a bit of JavaScript function, the very core of JavaScript.

1 comment:

  1. I agree about Javascript. Many kids will have spent a substantial amount of time gaining a level of proficiency with MIT's Scratch, and it became apparent there was a need for a guided tutorial with the specific aim of taking kids from Scratch to Javascript.

    http://www.s2js.com teaches Javascript in terms of Scratch. It provides tutorials, plus a place to develop your own programs you can share directly with your friends, and the ability to have your own projects and the tutorial side-by-side.

    It doesn't aim to provide mastery over Javascript, just an on-ramp to take whatever enthusiasm they have for Scratch, and replicate that in Javascript as quickly and painlessly as possible.

    ReplyDelete