Lesson 47 - Javascript and Variables

She's been asking for another lesson since we did our little game design session on the weekend. Today I told her that our programming day is actually tomorrow, but she insisted that we have a session today and also tomorrow. She really wants to implement this little game. I started to warn her like "You gotta remember thought that..." and she finished my sentence "... it's hard. Yes I know!". So here we go.

So today started learning Javascript. Calling functions and introducing and mutating variables was on schedule.

I explained her that I had made some preparations so that we can start coding in the browser. But the best things in life start from the command-line so that's where we started too. We recapped files and directories: the snake ~ character symbolizes her home directory. 

We used cd karkuun to change directory to the newly created directory (named after our game, remember). She typed flawlessly! Then I asked here to list the files in that directory. She remembered that the command ln is used for that. Well, the correct one would be ls of course.

So we saw the directory listing

  README.md    index.html    game.js    helpers.js    jquery.js

I told here that "index.html" is the most important file here and it's an HTML file that can be opened in the browser. She demanded that I explain the other files too so I did. The helper.js file contains some helper functions I've made for her to get started with Javascript.

Then we opened the index.html in the browser. She remembered the English word open and was able to open the file by herself. We marvelled at the simple web page titled "Milan peli". She read this by herself with ease (caps, small letters, no problemo!).

Then I told her that there's a SECRET DRAWER in the browser and the YOU CAN CODE IN THERE! That was exciting! So in Chrome you can use Cmd-Alt-J to open a developer console. And pow, there was a blinking cursor and she knew what it meant!

A brief intro to Javascript followed. Starting with function calls. They are just like in Roy or Haskell, except you have to use parentheses in Javascript. So, we use parentheses when we call the tell function that prints the given message on the HTML page. Like

    tell("mila") 

Worked like a charm. She mastered the use of parens and quotes once I told her. Then another function call that changes the document title. (these functions were already defined in my helpers.js file).

    title("peli")

It seems that syntax is not an issue! It's not a big deal that javascript has a different function call syntax.

Then variables. I explained that we use variables for the positions of the Lion and Princess in the game. The start at positions 0 and 4 respectively.

    var p=4
    tell(p)

Now that the Princess moves, the variable gets a new value which is ... and she knew: 5.

    p=5
    tell(p)

At this point her smaller sister had been harrassing .. err ... helping us for a while and had produced this on my computer screen:

    eduootttyjkkoåäö..eeeeiiè1ätrqt

So we decided that enough had been achieved for this session. What did she do? She went to code.org again and started solving the coding puzzles there. And is still doing that. Coding is fun, isn't it?