JavaScript #4 — Your first program

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:

  1. In a web browser (Chrome)
  2. 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:

  1. creates a new variable numberA with value 1, using let keyword
  2. creates a new variable numberB with value 2, using let keyword
  3. sums numberA and numberB together and stores the result in a variable named sum, using + operator
  4. 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.

Final words

We started learning 3 things from this exercise:

  • how to define a variable and assign it a numeric value
  • how to sum two numbers together
  • how to print something into the web browser console

The next step is going to explain what is syntax (a.k.a grammar) of a programming language.

Next Step

JavaScript #5 — Syntax — You are going to learn what is a syntax of a programing language.