First JavaScript Program

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.

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.

The code above displays the message, "Hello", before the value of the username variable on the first line. Then, it displays "Welcome to Educative" on the second line.

In JavaScript, we use prompt() for input (to read a value from the user).

In the code above:

1. We use the let keyword to define a variable.
2. Each line ends with a semicolon (;).

JavaScript programming practice

Let’s practice writing the first JavaScript program that takes multiple inputs from the user.

Tell a story

Let’s write a program that tells a story with the information given by the user. The program should ask the user to enter their name, age, city, college, profession, and pet’s name.

We’ll prompt the user to input in the given pop-up box one after the other so we can test it.

• User’s name
• User’s age
• User’s city
• User’s college
• User’s profession
• User’s pet’s name

Note: Remember to use the same order of inputs in the code.

The program should display the following story, employing the entered user’s information in the appropriate locations in the following text:

There once was a person named NAME who lived in CITY.
At the age of AGE, NAME went to college at COLLEGE.
NAME graduated and went to work as a PROFESSION.
Then, NAME adopted an animal named PETNAME.
They both lived happily ever after!

Note: The “Run” button becomes the “Stop” button when we run the code. We have to click the “Stop” button to edit the code. We can re-run the code by clicking on the “Run” button again, after editing. We can re-run to try different inputs of variables.