JavaScript #4 — Your first program

5 min readFeb 28, 2021

These JavaScript articles are written for people who are interested in coding and are meant to provide an introduction to the programming world.

You are going to learn how to create your first program that actually does something. The program we are about to make is going to sum two numbers together. The purpose of this exercise is to get more comfortable with coding.

You won’t be yet able to understand everything that is mentioned in this article but don’t worry about that. The following articles will get you more familiar with programming.

Let’s open VS Code editor and get into it.

Creating a new file

The first thing we need to do is to create a new file. Click on “New file” button to do that.

You should see something like this.

Let’s save the file and give it a name. Press Cmd+S (for Mac) or Control+S (for Windows). Then select or create a folder where do you want to keep your code. I have created a folder “programming”. Then type the name of the file first-program.html and click on the Save button.

Writing code

Now you are going to write code that sums two numbers and prints the result into the browser console.

The JavaScript code inside <script>...</script> tag is going to be executed line by line, from the top to the bottom. The web browser first executes line number 4, then 5, 6 and 7.

Here is a video where you can watch how the code is being written using VS Code editor. The code editor is trying to help and it is giving us suggestions to make coding faster and convenient.

If you want to make sure the code is without errors, you can copy the following code and paste into your first-program.html file.

<html>
  <body>
    <script>
      let numberA = 1
      let numberB = 2
      let sum = numberA + numberB
      console.log(sum)
    </script>
  </body>
</html>

Run the code

There are two ways to run JavaScript code:

In a web browser (Chrome)
In NodeJS runtime

We are going to run the code inside a web browser. Open Chrome and then open the developer tools by pressing Cmd+Option+J (on Mac). Here is a tutorial on how to enable developer tools in case nothing opens in Chrome after pressing Cmd+Option+J on your keyboard.

Observing the result

Let’s explain what happened when we have dropped the first-program.html file into Chrome web browser and pressed Enter.

First, the web browser loaded first-program.html. Then the web browser started reading our HTML code.

<html>
  <body>
    <script>
      ...
    </script>
  </body>
</html>

<html>, <body>, and <script> are called elements and they are always in pairs. Every element needs to have a closing tag to indicate where it starts and ends. For example, <html> needs to have its closing tag</html>. If we omit the closing tags, the code becomes invalid. An invalid code is not functioning, can show errors and produce unexpected results.

The elements are saying to the web browser what to expect. <html> says that the content of the file is going to be a HTML/Web page. <body> element is saying that whatever is inside of <html> element should be displayed to the user. And <script> (the one we care about most in this tutorial) is saying that the web browser needs to execute the code that is included in it.

You can find out more about HTML on this page: https://www.w3schools.com/html.

The code that is inside <script> and </script> tags is JavaScript code that does the following:

creates a new variable numberA with value 1, using let keyword
creates a new variable numberB with value 2, using let keyword
sums numberA and numberB together and stores the result in a variable named sum, using + operator
then it prints the sum into the web browser console, using console.log() function

let numberA = 1
let numberB = 2
let sum = numberA + numberB
console.log(sum)

Change, run and observe

The essential way to learn to code is to modify the code and see how it affects the result. Then, you can start to understand what is going on in the code.

Lets change the numbers from 1 and 2 to 14 and 1110.

<html>
  <body>
    <script>
      let numberA = 14
      let numberB = 1110
      let sum = numberA + numberB
      console.log(sum)
    </script>
  </body>
</html>

When you run the code, you should see 1124 in the console.