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:
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.
Your text editor is ready to use. Press "CMD + Space", type terminal and hit enter.
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 .
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 ‘body’ 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.
Open the file with your browser and you will see a button.
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.
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
-Atom
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)