DEV Community

boredandcode
boredandcode

Posted on

Hello World with JS and Setting up your Development Environment

This post was originally posted on DailyDrip.com

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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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 .

Enter fullscreen mode Exit fullscreen mode

image alt text

Let’s add the basic HTML structure to our ‘index.html’.


<!DOCTYPE html>

<html>

<body>

</body>

</html>

Enter fullscreen mode Exit fullscreen mode

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.


<!DOCTYPE html>

<html>

<body>

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

</body>

</html>

Enter fullscreen mode Exit fullscreen mode

Now add a button inside the body tag.


<button>Click Me!</button>

Enter fullscreen mode Exit fullscreen mode

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


<button onclick="helloWorld()">Click Me!</button>

Enter fullscreen mode Exit fullscreen mode

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' );

}

Enter fullscreen mode Exit fullscreen mode

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

-Code of this blog post

-Atom

-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.

Top comments (0)