Intro/Setup

Begin Programming with JavaScript Intro/Setup

Welcome to Begin Programming with Javascript.

This is an introduction for complete beginners. You will learn all the basic programming concepts, and create small simple programs to solve simple problems. And we’re going to do that using JavaScript.

There are ten chapters, and each chapter comes with exercise. So make sure that you follow along with the code in each chapter, as well as tackling the exercise at the end.

There is a special bonus chapter at the end for most practice problems.

Setting Up

In this chapter, we’re going to set up everything and write a simple program called Hello World. The program will just print the message Hello World on the screen. The goal is to make sure your computer has a proper setup.

Step 1 - Prepare the Folders

Create a folder for all the code we’re going to write in this series (use whatever name you prefer).

code

Inside the folder, create a sub-folder for this chapter.

code
hello

We’ll use a different folder for each new chapter.

Step 2 - Install browser and editor

We need to install 2 things: a code editor for writing the code and a browser to run the code.

For the most part, it doesn’t matter which browser you use, but there are a couple of chapters specific to Google Chrome. So download Chrome if you don’t have it already.

And more importantly, we need a code editor for writing the code. I recommend Atom, because it’s open source and completely free. You can get it from its official website (http://atom.io).

Step 3 - Create a file

After installing the code editor, open it.

Create a new file as index.html inside the hello folder.

hello
index.html

The name index indicates the file as the main web page of the folder.

The dot html extension tells the computer that this is a web page so that it should be opened in a browser.

image

Step 4 - Copy the code

Copy following code to the file, and save:

<!DOCTYPE html>
<html>
<body>
<script>
alert("Hello world");
</script>
</body>
</html>

unpack:

The main part of this code is the line that says alert. All the other lines are just for setting up the web page.

This simple program displays a message in a popup box.

 

Step 5 - Run the code

Double click to open index.html. It should be opened in a browser automatically and you’ll see a popup box with the message Hello world.

image

If the browser doesn’t open, make sure you name the file with dot html, because that’s how the computer knows that a browser should be used to open it.

And if the browser opens but it doesn’t show the popup box, make sure you have the exact same code.

The Code

So why do we need so many lines of code for this simple program?

↓ This longer line here is doing the real work. The rest of the code is just for setting up the stage.

alert("Hello world");

unpack:

A line of JavaScript code is called a statement, and it ends with a semicolon.

We actually have two kinds of code in this one single file, HTML and JavaScript.

HTML is used for showing web page contents, it’s called a markup language.

JavaScript is a general programming language. It has many purposes. Commonly, it’s used for making a web page interactive. When you click something on a web page, it responds in a certain way. That’s JavaScript working.

The HTML code is made up of elements. Each element is a pair of opening and closing tags. An element can be inside another element.

Right now we don’t have any web page contents in HTML. All we have are just an html element and a body element for setting up the page. And the script element is for using JavaScript code in an HTML page.

The very first line is called the Doctype. It’s for telling the browser which version of HTML to use. There are different Doctypes for different HTML versions, and they all look a little different. In this case, we’re using the HTML5 Doctype.

This is the basic HTML code you need every time you create a new web page. Since it will be the same every time, you don’t have to memorize it. Feel free to copy and paste whenever you need it.

HTML is not going to be the focus here, because this series is about programming with JavaScript. The reason we need HTML for a JavaScript program is that a browser can only open an HTML file. In order to run JavaScript, we need to put the JavaScript code inside an HTML file.

image

Basically, we’re using the HTML file as the middleman. But we’ll learn more about HTML in later chapters.

JavaScript File

We can also extract the JavaScript code to a separate file.

Create a JavaScript file in the hello folder.

hello
main.js

You can name the file whatever you like; main.js is a common name for the main JavaScript file.

The file name must have the dot js file extension, that’s how the computer recognizes a JavaScript file.

image

↓ Move the JavaScript code to the new file, and save.

alert("Hello world");

↓ And then connect the JavaScript file using the src attribute of the script element.

image

unpack:

The src attribute is used for specifying the location of the JavaScript file. An attribute is used for providing additional information for an HTML element.

Since there’s nothing inside the script element, we can put the open tag and the close tag on the same line.

Refresh the page in the browser to test the new change. The program should still be doing the same thing.

An external JavaScript file can make the code more organized. In the rest of the series, I will put the JavaScript code in an external file for better presentation.

Recap

index.html

<!DOCTYPE html>
<html>
<body>
<script src="main.js"></script>
</body>
</html>

main.js

alert("Hello world");
  1. We created an HTML file and a JavaScript file.
  2. The HTML file is connected to the JavaScript file using the script element.
  3. The JavaScript file only has one line of code, and it shows a popup box that says Hello world.

Exercise

Try replacing alert("Hello world"); with the following code.

alert(1);
alert(1 + 1);
alert(1 + "1");
alert(1 === 1);
alert(1 === 2);
alert(1 !== 2);
alert(1 < 2);
alert(2 < 1);
alert("1" === "1");
alert("1" === 1);
// alert("Hello world");

Try them out one by one, and see what each line does

For now, just play around and experiment with the code. The new symbols will be explained in later chapters.

The last line is special because it will not show anything. The double slash (//) is for creating a comment. The computer will ignore comments when it runs the program.

Comments are for programmers to remind themselves what the code does.

Sometimes a comment is used for temporarily removing a line of code without permanently deleting it. This technique is called commenting out the code.

You should be getting the following outputs in the popup box:

1
2
11
true
false
true
true
false
true
false