JavaScript #3 — Hello, World!

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 write your first program in this section. It is going to be a simple program that prints out a simple message that says “Hello, World!”.

A “Hello, World!” program generally is a computer program that outputs or displays the message “Hello, World!”. Such a program is very simple in most programming languages, and is often used to illustrate the basic syntax of a programming language. It is often the first program written by people learning to code. It can also be used as a sanity test to make sure that a computer language is correctly installed, and that the operator understands how to use it.
— Wikipedia, read more about “Hello, World!” programs

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

Create 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 hello-world.html and click on Save button.

Write the code

Let’s write code, that prints out “Hello, World!” text, into hello-world.html file. Once you are done with typing, hit Cmd+S (for Mac) or Control+S (for Windows) to save the file.

<script>
  console.log("Hello, World!");
</script>

Watch the video for convenience.

Run the code

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.

Make sure you saved your hello-world.html file after doing the changes. If you don’t save the file, you won’t see anything in the Chrome console.

Watch the video to help you with this task.

If you see error, double check the code. It has to be exactly this and every missing letter can cause malfunctions:

<script>
  console.log("Hello, World!");
</script>

Change the code, run it and observe changes

Let’s try to modify the code in this section. We are going to change “Hello, World!” to “Hello, World! I did it!”

Open the editor and update the code to the following.

<script>
  console.log("Hello, World! I did it!");
</script>

Once done, save the file, go to Chrome, click on the refresh button in Chrome and observe the changes. Here is the video showing the whole process.

Final words

Congrats, you made it to the end! Try to play with the code, change the text any text you want to, and observe the changes. You can also try to put two lines with console.log() and see what happens.

Here is something to try out.

<script>
  console.log("Hello, World!");
  console.log("What is going to happen with this?");
  console.log("Can you print numbers?", 123);
</script>

Next Step

JavaScript #4 — Your first program — You are going to learn how to create your first program that actually does something.