With the New Year just beginning, what new skills do you hope to learn? Have you considered learning to code but not sure where to find the time? How about learning to code with your child?

With the backdrop that COVID-19 has brought to life this past year, now more than ever parenting is a balancing act of juggling work, childcare, online learning support along with the daily needs of your family. With the hope that 2021 can bring the return to some normalcy again, learning a new skill with your child could be a fun way to bond with them while modeling the value of lifelong learning.

JavaScript (JS) is the programming language of the World Wide Web and is the third top programming language in the world. It’s no longer just a front-end programming language and many popular websites, like YouTube and Facebook, use it to create their websites. What’s more important is that many of JS coding concepts are language-agnostic, meaning that they can be applied to many different programming languages.

Here's seven JS coding concepts that you and your child can learn together.

1. Variables

A variable is like a small box that stores information (data). This small box contains one piece of information that you can play around with and change at any time. Pick what  you would like to name the variable, then to assign a value to a variable, use the = Equals Sign. If you are using text (string) for the value make sure that it is in quotations.

Variables can hold text and numbers, including integers and decimals. There’s three rules when naming your variable:

• It must start with a Letter
• Must only contain A-Z, a-z, 0-9, $, _
• Cannot be a JavaScript Keyword

For more information, explore Hatch Coding’s Reference Manual.

2. Functions

Functions are a fundamental key programming concept that is universal across most programming languages. Functions help organize code by splitting it up into sections or blocks. This also allows you repeat code without having to type it out again. All you need to do is call on the function.

User-Defined Functions are created by the user as a specific collection of code needed for a specific project. Eg. Make a cookie with all of the specific details of your cookie with the function for this project.

Pre-existing Functions (JavaScript functions) are functions that the computer already knows can be used automatically in any project. Eg. Draw Function - whatever it is you want to happen, will occur 60 times a second while you press a key, or mouse click etc.

Create a function:

• Start with the var keyword
• Define the name of your function
• Set your named function equal to the function keyword
• Write the parameters in between the brackets
• Place the code that will be executed by the function between two curly brackets
• End the function by putting a semicolon after the closing curly bracket

Eg. var NameofFunction = function (parameters) {

// the function’s code lives here

};

Calling a Function: Functions only perform the code inside of them when they are called.

For more information explore Functions in Hatch Coding’s reference manual.

3. Conditionals

Conditional statements are the base for any logic/decision making that happens within your code. If something is true do this, else do this thing. Most all decisions made within your code will be done by some form of a conditional statement. This allows you to control what your code is doing based on different circumstances and variables.

“If” Statements check if something is true or false. For example, if you are hungry, then go get some food. If you are not hungry, you would not get some food.

“Else” Code runs when all if statements and else statements are false. For example, if the number is not bigger than 500 and not smaller than 300, then an image of a smiley face will appear.

For more detailed information, check out the notes on conditional statements in Hatch Coding’s reference manual.

Check out variables, functions and conditional statements in action in this JS Bouncy Balls project!

4. Mathematics: Operators

Math is important in programming as it serves to combine, subtract, multiple or divide values within a variable or parameter. It also is used to compare if something is true or false in if statements and for loops.

Assignment Operators set or change a value to a different value. They are usually used to change the value of a variable.

Examples:

= assignment

+= adds the value

-= subtracts the value

*= multiplies by a value

/= divides by a value

++ increment (adds 1)

-- decrement (subtracts 1)

Arithmetic Operators are used like normal math and are often used to change a value in a parameter.

Examples:

+ addition

- subtraction

* multiplication

/ division

% modulus

Comparison Operators check to see if something is true or false and are often used in if statements and for loops.

Examples:

> is greater than

< is less than

&& and

| | or

>= is greater than or equal to

<= is less than or equal to

=== is equal to

!== is not equal than

Give JavaScript operators a try!

5. Loops

Loops are a key component to any programming language. Loops allow you to repeat blocks of your code multiple times, saving you from having to write repetitive code. Understanding how, when and why to use loops is an essential skill for any programmer.

For Loops Example:

Check out loops, math, functions and variables in action in this Circles JS project!

6. Arrays

Arrays allow you to store and access information easily. They’re used to store multiple values in a single variable. An array is like a bookcase where you only store books in it. And they all need to be organized and ordered from 0,1, 2, 3, etc.  

Arrays are created with square brackets [ ]; and here is an array that has four numbers stored inside of it:

For more detailed information, check out all you can do with arrays in Hatch Coding’s reference manual.

Give arrays a try!

7. Objects

An object is like a next-level variable, where instead of holding one piece of information, there are properties of a variable that can be held within and changed.

In real life, a cat is an object. A cat has properties like weight, colour, name, age and methods like walk and run and sit. All cats have the same properties (weight, colour, name and age), but the property values differ from cat to cat.

All cats have the same methods (walk, run, sit, jump, sleep), but the methods are performed at different times. Think of objects like something you pull out of a box that hold functions that can do things.

Object Literals Example

Object Prototypes are like classes in other languages. Whereas the object literal only let’s you create one object and that’s it, an object prototype let’s you create more than one of the same type of object.

Constructors are what you use to make a new instance of an Object. For example, an object literal makes one cookie and you define everything about that one cookie. Whereas an Object Prototype is like making dozens of cookies and all of the cookies have the same general properties (shape, size, name) but you can change one property - like the colour of the icing.  

For more detailed examples on how to use objects and their methods, check out Hatch Coding’s reference manual.

Check out objects, arrays and loops in action in this Ripples JS project!

JavaScript: Universal Programming Language

JavaScript is used in everything! From the high level creation of PDF’s to game, app and website development, it now has the capability to be a full stack language, so it’s not going to be outdated any time soon. Whether you want to upskill your own resume while also helping to support your child in their coding journey, learning these basic JS coding concepts will help sharpen the senses and give you and your child a creative outlet to build something together.

Give coding in JavaScript a try and sign up for Hatch Coding’s two week free trial.

‍