Hello World with JS and Setting up your Development Environment
Tags: javascript, javascriptzero
Published: 2017-10-04 19:02:37

---
title: Hello World with JS and Setting up your Development Environment
published: true
tags: JavaScript, JavaScriptZero
---

This post was originally posted on [DailyDrip.com](https://www.dailydrip.com/blog/hello-world-with-js-and-setting-up-your-development-environment)

Today, we are going to set up our development environment, and get a basic ‘Hello World’ app up and running. The first thing we will need to do to set up our development environment is pick a text editor. There are a lot of different text editors out there like [Sublime](https://www.sublimetext.com/), [Visual Studio Code](https://code.visualstudio.com/), [VIM](http://www.vim.org/) and [Brackets](http://brackets.io/). My preference is [Atom](https://atom.io/).

Let’s download Atom, and make a simple ‘Hello World’ app. This is for someone who has never done anything in JavaScript.

I’ve picked a text editor. Now it’s time to install it. Go to the [Atom homepage](https://atom.io/) and click Download. On Mac it looks like this:

![image alt text](https://dailydrip-assets.s3.amazonaws.com/DailyDrip/blog_posts/hello-world-with-js/image_0.png)

Once you have downloaded Atom, open it. Then, click ‘Install Shell Commands’ under ‘Atom’. This will allow you to open files with Atom from your terminal.

![image alt text](https://dailydrip-assets.s3.amazonaws.com/DailyDrip/blog_posts/hello-world-with-js/image_1.png)

Your text editor is ready to use. Press "CMD + Space", type terminal and hit enter.

![image alt text](https://dailydrip-assets.s3.amazonaws.com/DailyDrip/blog_posts/hello-world-with-js/image_2.png)

Now, create a folder inside your terminal.

```sh

mkdir practice

```

If you type ‘ls’ you will see this folder in your current directory. Now you want to work inside of that folder. To do that you need to change directories. Luckily, there is a command ‘cd’ which stands for ‘change directory’. Let’s change directories.

```sh

cd practice

```

Now let’s create an html file in this folder with the ‘touch’ command followed by the name of the file we want to create, which will end with ‘.html’. The other file we need is a JavaScript file. It will be created the same way, but it will end in ‘.js’. Then, we can open the directory with atom in the terminal since we have already enabled shell commands, and see our files.

```sh

touch index.html

touch main.js

atom .

```

![image alt text](https://dailydrip-assets.s3.amazonaws.com/DailyDrip/blog_posts/hello-world-with-js/image_3.png)

Let’s add the basic HTML structure to our ‘index.html’.

```html

<!DOCTYPE html>

<html>

<body>

</body>

</html>

```

We need to connect our ‘.js’ file to to our ‘.html’ page. Which can easily be done by adding one line of code above our ‘body’ tag.

```html

<!DOCTYPE html>

<html>

<body>

<script src="main.js"></script>

</body>

</html>

```

Now add a button inside the body tag.

```html

<button>Click Me!</button>

```

Then, add [‘onclick’](https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/onclick) to the button with the value ‘helloWorld()’.

```html

<button onclick="helloWorld()">Click Me!</button>

```

At this point, you can right click the `index.html` file and click ‘show in finder’ and then right click the file again and click ‘open with’ and select Google Chrome.

![image alt text](https://dailydrip-assets.s3.amazonaws.com/DailyDrip/blog_posts/hello-world-with-js/image_4.png)



Open the file with your browser and you will see a button.

![image alt text](https://dailydrip-assets.s3.amazonaws.com/DailyDrip/blog_posts/hello-world-with-js/image_5.png)

Now, let’s make this button do something. Open your main.js file and type this function.

```javascript

function helloWorld() {

  alert( 'Hello World' );

}

```

So, what did we just do? In JavaScript, ‘function’ declares that you are about to have a command that does something. `helloWorld` is simply the name of the function, and since our function takes no arguments, we’ll just add `()` to finish describing the function.. Then, your logic for what the function is going to do goes inside the curly braces ‘{}’. Which in this case ‘alert( 'Hello World' );’ is just going to pop open a window that says ‘Hello World’ when this function is called. We have already assigned this function to a button in our HTML file, so let’s see what happens when we click the button. Make sure you save both files before trying to click the button. When you click the button, you should get an alert similar to this.

![image alt text](https://dailydrip-assets.s3.amazonaws.com/DailyDrip/blog_posts/hello-world-with-js/image_6.png)

Huzzah! You have successfully executed your first JavaScript program.

## At a glance

Today, we setup our development environment, and made a simple ‘hello world’ program with JavaScript.

## Resources

-[Code of this blog post](https://codepen.io/matt24ray/pen/eGeKjO)

-[Atom](https://atom.io/)

-[onClick](https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/onclick)

This is a JavaScript Zero post. JavaScript Zero is a JavaScript Journey starting from Zero, and aimed at anyone interested in learning JavaScript, especially beginners. You can see all the JavaScript Zero posts on DailyDrip.com under the [JavaScriptZero tag](https://www.dailydrip.com/blog?tag=JavaScriptZero).