JavaScript for Kids: A Beginner's Guide using Codepen.io

1. Getting Started:
   

• Go to codepen.io

• Click on "Create Pen" at the top of the page

• You'll see three panels: HTML, CSS, and JavaScript

2. Your First Program: In the JavaScript panel, type:

alert("Hello, World!");

Click the "Run" button at the top. You should see a pop-up message!

3. Variables:

Our first and very important lesson: Variables.

Think of it like a box where you can store things. In JavaScript, we store numbers or letters or combination of the two.

Try this in the JavaScript panel:

let myName = "Alex";
alert("My name is " + myName);

A pop-up message with "My name is Alex" should show.

Here's what happened:

let myName = "Alex"; 

In the code above, we assigned a string "Alex" to "myName" variable. The equals operation here means we are assigning something to the left side of it. This time it is a string variable "Alex". String values are written inside double quotes.

We use the word "let" in front of a variable to declare it in JavaScript.

alert("My name is " + myName);

In the above code, we are using an internal JavaScript function called "alert()" with small letters. It displays the string that is inside the parenthesis "()" in a pop-up box with an "OK" and "Cancel" buttons. It does not do anything but just to inform us that something should be seen and inform the users.

4. Functions

A simple example of a function

function introduce(name, age)
{
	return "I am " + name + " and I am " + age + " years old."
}

let sentence = introduce("John", 10)
alert(sentence);

You'll see a pop-up message with "I am John and I am 10 years old".

What happened?

We made a function "introduce" that takes two parameters name and age. Inside the curly braces we have "return "I am " + name + " and I am " + age + " years old."" which will combine the sentence with the given parameters and return it to the caller which is the value for sentence.

Functions are special codes that perform tasks and return something like numbers or strings. They take one or many arguments that can be used inside the curly braces.

5. Numbers and Math

let age = 10;
let newAge = age + 5;
alert("In 5 years, I'll be " + newAge);

A pop-up message with "In 5 years, I'll be 15" should show.

Here's what happened:

We have an "age" variable with an assignment of number 10. Also we have a "newAge" variable with an assignment of "age" plus the number 5.

let newAge = age + 5;

In the above code, a math operation occurred. JavaScript took the "age" variable's value which is ten and added five to it.

alert("In 5 years, I'll be " + newAge);

Okay, so i bet the above code is confusing for you. It has a plus sign between the string and the variable "newAge". In this case, we are not doing math operations any more but combining the two.

Homework:

Write a code that will produce:

"My name is Mike. I was born in 2014 and I'm now __ years old."

Key points:

• "Mike" is a string variable.

• 2014 is a number variable.

• "__" should be replaced by the difference between today's year and 2014.

Write your code in the comments section. Enjoy!