When you click a webpage’s contents, and the webpage responds, how does that happen?
It’s JavaScript, usually.
Kids might already know that JavaScript can create games, websites and web apps, and even mobile apps. And more specifically, they might know that JavaScript makes browser-based games, interactive sites, and apps like Netflix and Uber all possible.
But for kids looking to get coding with JavaScript, what does that all mean? How do lines of code transform into an interactive, user-controlled experience?
So, let's take a step back; back to the basics to ensure we define, educate, and provide examples to help you and your students begin to grasp what JavaScript is, learn what it can do, and figure out how they can get started.
What is JavaScript?
JavaScript is one of many great coding languages for kids used to communicate instructions to a computer. If you’ve ever clicked through an interactive webpage or game, you were probably able to do so thanks to JavaScript.
In other words, in web development, while HTML forms the body of a webpage, JavaScript can be thought of as the brains of the operation. JavaScript can change what is seen on a page, can react to user input, run games, and more.
JavaScript code is a list of instructions called statements. A statement starts on a new line and ends with a semicolon, and is one of a few important JavaScript terms kids can start learning. Here are others!
Read More: Web Design for Kids
Get Started: Online HTML Lessons
JavaScript Terms
Warning! These terms might not mean anything to you right now. But, they form the basic foundation a student will need in order to begin programming with JavaScript. This “cheat sheet” glossary will help you learn useful programming lingo and approach coding concepts.
(After reading this through, check out the section below for examples of what can be created with JavaScript and how these different terms help to make it all possible.)
A script is a set of steps that a programmer writes for a computer to follow.
While JavaScript can be written from scratch, JavaScript libraries (what’s a coding library?) help simplify code, and are databases of pre-written functions and code that can be referenced and used to streamline coding. In this case, p5.js is one of the most well-known JavaScript libraries with tons of built-in code to use.
Variables are containers in code that can hold a single number, word, or other information. Variables have three parts: type, name, and value.
Keywords are words that have a preset meaning in a programming language.
If statements run a block of code if the statement's condition is true.
An else statement must be connected to an if statement and will run when the if statement condition is false.
The last type of statement is an else if statement. This type of statement allows a program to react differently to various inputs, enabling more than two paths.
A function is a group of statements in a script that can be reused to perform a specific task.
Parameters are where you provide information that affects how the function runs.
Sprites are images that represent game assets.
Colliders are invisible collision boxes that surround images.
A game mechanic is any active player action or an event within the game. These actions come together to create a compelling game to play.
Loops check a condition and then run a code block. The loop will continue to check and run until the condition is false.
While loops will run forever (until the condition is false).
For loops combine the counting aspect of the while loop into one line.
Arrays are containers that hold variables; they're used to group together similar variables.
What you can do with JavaScript
As mentioned above, for beginners looking to learn JavaScript, it’s great to see hugely successful “everyday life” examples to get an idea of all that JavaScript can do.
But to kids interested in moving forward, it might also help to look at smaller, more specific cases.
User interaction—alerts and buttons
Allowing a user to make in-game decisions can enhance their experience when playing or using a program. For instance, buttons will sit on a web page, waiting to be clicked, and when clicked, will execute a new visual, etc.
An alert, which creates a pop-up on the screen with a message inside of it (like a speech bubble) is one way for a user to interact with web-based code.
A button is another, and it also utilizes a user's input to display different content. This can take advantage of user interaction to make users feel more involved in the program created.
So, by combining HTML and JavaScript, an HTML button can be created, and then a JavaScript function runs when the user clicks the button.
Mouse clicks and physics
A tearable cloth program like the example below uses objects and mouse clicks to determine whether a mouse is moving the material.
It uses a combination of physics and advanced JavaScript commands to create the simulation of the mouse “grabbing” and “ripping” the cloth as the user clicks and drags.
Projectile shooters
How about the classic top-down shooter game, where characters move around and shoot projectiles at enemies? The goal is to avoid the enemies and defeat as many as possible to add to the score!
With JavaScript, programmers can create enemies that spawn randomly throughout levels by using loops. This feature also allows for the addition of collisions so that the game can detect whether a player and enemy have collided.
Action-adventure titles like The Legend of Zelda, RPGs like Undertale, and other types of video games can also be created with JavaScript.
Random numbers like Yahtzee!
Games use random numbers all the time, right? For instance, worlds in Minecraft are randomly generated when games are started, and in Tetris, random numbers determine the order of new pieces appearing on the board.
Said simply, in games, random numbers add challenges and originality. Other games, like Yahtzee! rely on random number generation to form the core challenge. A for loop can be used to simulate the rolling of dice and randomly generate new numbers each time.
Arrays and a “magic 8 ball”
The Magic 8 Ball is a mystical sphere that answers any "Yes or No" question you ask. With JavaScript and HTML, beginners can learn to create a Magic 8 Ball on the web! With the press of a button on a web page, the Magic 8 Ball will shake, and using an array to hold eight different string responses to a "Yes or No" question, answers will display.
Machine learning for image recognition and voice controls
Machine learning is one of the fastest growing areas in tech, and it's all about training computers to recognize things like images or sounds!
Again, JavaScript libraries have already trained the computer to recognize certain images or sounds, so beginners would only need to reference certain commands for it to fully work! In this case, the additional library for machine learning is called ml5.
Putting the pieces together
While getting started is always a challenge, it’s a necessary step for any kid wondering if coding is right for them or not. If so, it’s important to remember that they don’t need to have all of the answers (and you don’t need to have all of the answers either), but they will need outlets to extend their learning.
For those wanting to learn right now, iD Tech offers JavaScript lessons and coding tutoring across multiple languages, along with JavaScript summer camps for a more social approach. You can also continue learning more about Python for kids, Java for kids, and more!