Overcoming JavaScript "this" keyword confusion

The use of the this keyword in JavaScript is confusing. It is not the same as the self variable in Python.

Children can generally get through basic objects and methods in Python and be able to use self.

However, the "this" keyword in JavaScript depends on the way the this keyword is used.

In most cases, the "this" keyword will refer to the object that calls the function/method that the "this" keyword is used in. Wow, that sounds horribly confusing.

Let's break it down.

• There are different methods within a single object. 
• One method is called, "preload". 
• One method is called, "create".
• To use a variable in both "preload" and "create", I use the word, "this" in front of the variable name.

This is overly simplified, but for a child, I'm focusing on the most common usage.

Problem

The problem at the top of article occurs when you try to use a "this" keyword variable inside of a nested function. The variable "animals" is inside of an anonymous function called by the method forEach(). Oh, no!  This will break the simple explanation of the use of "this".

I explain that "this" only works within a small area, like a shop within a town. As soon as another function is put between the "this.variable" and the top method "create()", you'll have to use some funky techniques to access the variable. 

I'm not sure if the technique at the top of the screen is a best practice or not, but it works and might be a "good-enough" technique for lessons. The code snippet and technique of assigning "this" to "self" are from a mobile game course by Pablo Farias.

Why Python and Pygame Are Perfect for Beginning Programmers

I published an article on opensource.com explaining why you should start with Pygame and Python instead of JavaScript and Phaser.

After six years of teaching my kids Python and Pygame, I've been teaching my daughter JavaScript and Phaser for six months. I have real-world observations of how pre-teen children learn, encounter problems, and overcome problems with both Python and JavaScript.

If you're teaching your kids programming or are considering learning Python or JavaScript yourself, consider reading the article.

Computer Programming Courses for Middle School Children

As my daughter is in middle school, I recently reviewed courses designed for middle school children. Eight years ago, there was limited curriculum for middle school children.

Today, there is a wealth of curriculum. Instead of developing your own curriculum, I suggest using existing curriculum that a professional has built. code.org has a good list of curriculum for middle school kids. Although I'm not using the curriculum on any of the lists, the offering at CodeHS looks interesting. There are introductory courses for both Python and JavaScript. The JavaScript course is designed for 9th graders.

Pythonroom also looks promising. The video looks like they have a great vision, but I'm a bit concerned that they have 5 thumbs up and 2 thumbs down at the time I looked at it.

I'm still experimenting with different mixtures of Python and JavaScript. I recommend starting with Python as it is easier and the structure helps with learning. My daughter also feels that Python is easier than JavaScript.

If Python is better for learning and teaching, why I am teaching her JavaScript? Well, JavaScript is everywhere. It's used to quickly distribute web applications, build mobile applications with PhoneGap and build server applications with node.

Here's what I ended up doing:

1. started with Python and Pygame using my drills and used the drills for a month
2. taught HTML, CSS, and basic JavaScript, including JQuery for about a month. Not using any type of graphical animation such as HTML canvas or any framework
3. Used the JavaScript game development framework Phaser for a month, including the Making your first Phaser game tutorial
4. went back to Python and Pygame for another few months and used RAPT Pygame to run the apps on a mobile phone
5. went back to using JavaScript canvas for a month, which is where I am right now. I'm planning to go back to Phaser in about 2 to 4 weeks.

Examples from Lessons

This game was built entirely in Python and uses RAPT Pygame to run it on an Android mobile phone. It's running on a Moto G 3rd generation. Age 12.
Teaching objective: loops and game levels

The test below was made with Unity and some pictures she took at the local Stanford museum.
Teaching objective: 360 image photography and basic 3d asset usage

This one is done entirely in Python. Age 12.
Teaching objective: association of attributes for an object. Did not actually use objects.

This is another Pygame example. Age 12.

Teaching objective: if statements

This one is done in JavaScript.
Teaching objective: Use of arrays.

Phaser Girl JavaScript Lessons For a Middle School Girl

I'm working with girl coder on new drills based on Phaser and JavaScript. In each lesson, I sit by coder girl and watch her type in the same drill 10 times.

The philosophy for Phaser Girl is to take the simplest possible code snippet and build from there. Programming concepts are not explained until after the drills are started.  The idea is to dive in, start typing, and the concepts will arise over time.

This structure came from watching my son learn karate. Since his dojo (classroom) was 25 minutes away, I would often stay in the dojo and watch the class.

There are three components to teach kids karate:

1. kihon (fundamental: punch, kick, block)
2. kata (form: collection of kihon)
3. kumite (sparring: application of kihon and kata)

For Phaser Girl, the equivalent is:

1. syntax: conditionals, loops, variable assignment
2. drills: the basis of Phaser Girl
3. projects

Within this framework, I focus on drills. The syntax emerges from the drills.

Repetition

I originally started with a target of 5 reps. During the first lesson, Blank Screen, I increased the target repetition to 10. The objective is for coder girl to be able to go through the drill without looking at reference material and without encountering a syntax error by rep 8.

By drill 6, Cursors, each rep was taking 5 minutes, pushing the total lesson time to 70 minutes. I gave coder girl a 5 minute break after rep 5.

Practical Application (kumite) Example

Level 1, simple project. 40 lines of code total.

Drill (kata) Example

Fundamental (kihon) Example

Get Phaser Girl now