Are you ready to dive into the world of JavaScript programming? Creating your first code doesn’t have to be daunting. In fact, it can be quite simple and exciting! In this article, I will guide you through the process of creating your first JavaScript code using different methods. Get ready to say hello to the world of JavaScript!
Hello world using an Online Editor (Codepen)
The quickest and easiest way to create a “hello world” program is by using a web-based platform where you can code without the need for any installations. One of the recommended platforms is Codepen. Simply click on “Start coding” and it will open a screen like this:
As you can see, Codepen provides a simple editor where you can write HTML, CSS, and JavaScript. For this article, we will focus on JavaScript. If you’re not familiar with these languages, you can refer to the Frontend post for more information.
By the way, you can create an account on Codepen to save your projects as you go along.
To write the “hello world” program, simply enter the following code in the JavaScript box:
console.log("Hello world!");Now, if you click on the “Console” button at the bottom left, you will see “Hello world!” printed on the screen. That’s what creating a “hello world” program is all about – creating a simple program or web page that displays “hello world” on the screen. It’s that easy!
Hello world on your computer using files
But is creating a “hello world” program really that simple? Well, these web platforms are designed to make our lives easier by eliminating the need to set up a development environment for web development.
Now that you’ve created your first code, I recommend taking the next step and starting to develop using files on your computer. This way, you’ll become familiar with the tools that developers typically use, as most professionals work with local files rather than the cloud.
To program locally, all you need is a text editor. Some people start with Notepad or any program that allows you to write on your computer, but I recommend starting directly with VScode – a completely free code editor.
In the Frontend Development Environment article, I explain in detail all the options you have for programming.
Once you’ve downloaded and installed your chosen code editor, create a folder on your computer and open it with the code editor. Inside this folder, create a file called index.html. Actually, you can name it whatever you want, but index is commonly used for the main file of a website.
The content of the index.html file should be as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hello world</title>
</head>
<body>
<script>
console.log("Hello world!");
</script>
</body>
</html>I won’t go into too much detail about HTML, but you should know that with the HTML script tag, you can execute JavaScript code. In this case, we use the console.log command, which writes the output to the browser console.
Now, if you open this file in your browser (right-click and open with Firefox, Chrome, or your preferred browser), you won’t see anything displayed on the screen. Don’t worry, that’s normal.
The code we’ve written is being executed and printed to the browser console, not on the webpage itself.
To open the browser console, right-click on the page and select “Inspect” or “Inspect element”. You can also use the keyboard shortcut Control + Shift + I (or Command + Shift + I on a Mac).
You will now see the Developer Tools of the browser. These tools are essential for web developers, as they allow you to view the source code of a webpage, monitor its execution, analyze network requests, and much more.
For our purposes, we’re interested in the “Console” tab. Here, you can view any errors and see the output of the console.log.
If you’ve followed the steps correctly, you should see “Hello world” in the console.
JavaScript code in a separate file
Writing JavaScript code directly inside HTML files is considered bad practice. It’s best to separate different languages and keep things organized. For the “hello world” program, you can create a file called index.js (or any name you prefer, as long as it has the .js extension) in the same folder.
In the index.html file, modify the script tag to reference the external JavaScript file instead of directly executing the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hello world</title>
</head>
<body>
<script src="index.js"></script>
</body>
</html>Inside the .js file, simply write:
console.log("Hello world!");That’s it! Now, if you save both files and refresh the page in the browser, you will see the same output.
Try changing the text between the double quotes and save the file. If you go back to the browser, you’ll notice that nothing has changed. That’s because you need to reload the page for the browser to reflect the changes. Simply press F5 or click the refresh button.
That’s all there is to it! If you’re a beginner programmer, I recommend being patient. It’s normal to feel overwhelmed by the amount of information you need to learn in the beginning. But with practice, it will all come together. Good luck on your coding journey!
