This upcoming week we will start the 2nd session of ng-club at Roosevelt Elementary School in Melrose, MA. During the first session, we focused mostly on building games in Scratch. This session will be with a new set of kids, but we will do something a bit different. We are going to focus more on real code. We will still utilize a visual programming interface, but instead of Scratch, we are going to use Google’s Blockly library.

 

Blockly is software that you can use to build your own visual programming environment. I used this software along with Angular to build a custom development environment for ng-club. The app can be found here:

https://ngclub.app

It is really basic for now, but I have some big ideas for how this can evolve over the upcoming 8 weeks. Eventually, I will have some custom blocks added to do some really cool stuff like modifying other web pages. In an ideal world, the kids in ng-club will also be able to mess with the ngclub.app code itself by the end of the 8 weeks.

Session 2, Week 1 Agenda

For now, though, we will just utilize the app to learn some of the core basics of JavaScript. Specifically for this first week we are only going to learn 2 things:

1. Variables

A variable is arbitrary symbol that you use to store a value. For example:


var x = 4;

In this case, you are saying that the variable x has the value 4. You can use multiple variables together like this:


var x = 4;
var y = 6;
var z = x + y
window.alert(z);

In this case, 10 will be shown to the user. There are different types of values you can set to variables:


// number
var oneVariable = 4;


// string
var somethingElse = "here is my string";


// boolean (either true or false)
var lastOne = true;

What is happening when you assign a variable? Well, in short, the computer allocates a space in memory to the desired value. Think of it like a bookshelf. When you create a variable, you are adding a new book to the shelf (the computer in this analogy is the shelf).

During the class we will roughly follow this agenda for variables:

  1. Show kids how to create a variable and print it out with Blockly and have them do it
  2. Show them how to add numbers, concatenate strings and do boolean operations
  3. Ask them to use what they now know to solve the following math problem: 156 * 345

2. Functions

A function is a set of instructions that can be reused. For example:


function add(x, y) {
return x + y;
}

In this function which is called add, you can pass in two numbers and it returns the value of those numbers added together. If you want to use this function you can call it like this:


var sum = add(5, 6);
window.alert(sum);

In this case, the add function is taking in two numbers, 5 and 6. It returns 11 which is assigned to the variable called sum and then that variable is shown to the user.

During the class we will roughly following this agenda for functions:

  1. Show them the add function and have them try it out
  2. Ask them to create a function that combines two strings together

Upcoming Weeks

Here is a rough idea of what we are going to be doing on the coming weeks:

  • Week 1 (today) – basics with variables and functions
  • Week 2 – basics with control flows (i.e. conditionals and loops)
  • Week 3 – basics with objects
  • Week 4 – basics with HTML and the DOM
  • Week 5 – create our first game

 

Categories: Uncategorized

Jeff Whelpley

CTO at GetHuman, Google Developer Expert, AI and Angular Boston meetup organizer

Leave a Reply

Your email address will not be published. Required fields are marked *