Learn to design, develop, and execute basic programs in JavaScript.

Zero to Hero in Front-end Development with React

This module provides a comprehensive introduction to the tools that help create various programs, such as documents, movies, and games. We'll start with simple math, real-world problem solving, and writing solutions as steps in simple English. Next, we'll learn about decision-based solutions that are demonstrated via flowcharts and explained with execution sheets. Finally, we'll learn how to translate our solutions into JavaScript programs using variables, conditions, loops, strings, arrays, and built-in functions. We'll also learn how to create our own functions in JavaScript. We’ll be able to add to our confidence by editing practice programs and running them in an embedded way. After completing this module, we’ll have acquired the skills to write basic programs in JavaScript.

Getting Started with Javascript

# Hello World

It’s time to write our first program in JavaScript, which will display or log the message `"Hello World!"` on the console.

We’ll use the following widget to write our JavaScript code. We can execute our JavaScript program by clicking the "Run" button at the bottom of the widget.

In JavaScript, we use **`console.log()`** for **print** (to display a value on the screen as output).

Run the code below to see the output. For a better understanding, you can take the AI mentor's help.

console.log("Hello World!"); // display/log Hello World on console

Javascript (babel-node-es2024)

> **Note:** We can add non-executable text in a JavaScript program by adding the `//` sign at the start of the text. This type of text is called a **comment**. We use comments to include descriptions in the program.



# Personalize messages and add variables




Let’s write another JavaScript program that inputs the name of the user before displaying a greeting message. We use the `username` variable to store the input given by the user in JavaScript.



> **Note:** A **variable name** can only contain letters (`A`–`Z` and `a`–`z`) and the underscore symbol (`_`). It may also contain digits (`0`–`9`), but the variable name can’t start with those. For example, `Key_2` is a valid variable name but `2_key` is not. Variable names are case-sensitive, meaning that `name`, `Name`, and `NAME` are three different variables.




Once you press the "Run" button, a **pop-up box appears**. You must type your name in that box to obtain the desired output. Pressing the “Cancel” button results in `null` being displayed as the name.

> **Note:** The “Run” button becomes the “Stop” button when we run the code. To **re-run** the code, we have to click the “Stop” button. Then click the "Run" button again to **try different inputs** of variables. 



Learn to create and execute the first JavaScript program.

Problem Solving with Simple Programs

Decisions and Branching

JavaScript Basics

Repetition with Loops

Strings and Arrays

Functions

Conclusion

First JavaScript Program

Hello World