Simple HTML and Javascript Operators: Teaching Computer Programming To Kids: Lesson 3

As Cate and I were walking to 16th and Mission street Bart station at 7:30am, I talked to her about the arithmetic operators in Javascript.

There is

+ for addition
– for subtraction
* (kinda funny) for multiplication
/ (forward slash) for division

We went through some examples

var x = 12
 x = x + 5
x = 12
 x = x - 1
x = 12
 x = x * 3
x = 12
 x = x / 3

Then I talked to her about variables multiplying itself, which is a square root and she seem to understand

var x = 3
x = x * x

When we got to BART, I brought the computer out and we typed in some simple HTML
into Emacs and I showed her using CTRL-X CTRL-S to save files

<body>
ninepins
<b>now</b>
</body>

I talked with her about balancing the tags with closing tags using ‘/’

<b> == bold

Then she tried
<i> and <u> by herself and I taught her to use Firefox and open the file and display it whenever she saved

I showed her <s> for strike-thru

We tried <font color=”#ff0000″> for red and 00ff00 for green and 0000ff for blue.  And she remembers the
Lesson #1 when we talked about the RGB values.

Then as we pull into 19th street BART station and need to transfer, we built a simple Javascript program to prompt and using
if … then … to display different answers

<script type=”text/javascript”>
var STRIKE=”Are we there yet?”
var guru = window.confirm(STRIKE);
if (guru)
window.alert(“Yipee!!”)
else
window.alert(“Too bad :(/”)
</script>

Cate thought this is pretty funny and asked me if we can build a magic eight ball program

I started to design it with her, but I had forgotten how to do random numbers in Javascript and told her
we’ll have to look it up when we have a reference book or online documentation.

It’s time to get off BART at the Ashby station as we have to pick up a Zipcar to drive to the school.
I can’t wait until the next lesson.  I can understand how Cate’s brain thinks as she gets exposed to computer programming

<script type=”text/javascript”>

var magicAnswers = [“Yippe”, “Oh boy”, “hazy”, “No way”, “Outlook looks good”, “We’ll see”];
var randAnswer = rand(0,6)
var answer = window.confirm(“Are we almost there?”);
window.alert(magicAnswer[randAnswer]);

</script>

—-
This is a series that documents my daughter’s curiosity to learn about computer programming
—-