Tagged with

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, Visual Studio Code, VIM and Brackets. My preference is Atom.

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 and click Download. On Mac it looks like this:

image alt text

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

Your text editor is ready to use. Press CMD + Space, type terminal and hit enter.

image alt text

Now, create a folder inside your terminal.


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.


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.


touch index.html

touch main.js

atom .

image alt text

Let’s add the basic HTML structure to our ‘index.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 ‘’ tag.


<!DOCTYPE html>

<html>

<body>

<script src="main.js"></script>

</body>

</html>

Now add a button inside the body tag.


<button>Click Me!</button>

Then, add ‘onclick’ to the button with the value ‘helloWorld()’.


<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

Open the file with your browser and you will see a button.

image alt text

Now, let’s make this button do something. Open your main.js file and type this function.


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

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

The previous post in the JavaScript Zero Series is Essentials for Getting started in JavaScript - A list of helpful resources for a JavaScript beginner.


B9491f993786452ffe05d432a66f18d9?s=184&d=mm

Matthew Ray Matthew is a software developer and tech news enthusiast. He spends most of his time developing software, watching sports and drinking coffee. You will probably find him at a coffee shop or the library.