There are eleven chapters, and each chapter comes with exercise. So make sure that you follow along the code in each chapter, as well as tackling the exercise at the end.
The last chapter is a special chapter. It doesn’t teach any new concepts, but it comes with a list of exercises. You will have to spend more time on the last chapter.
In this chapter, we’re going to setup 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).
Inside the folder, create a sub-folder for this chapter.
We’ll use a different folder for each new chapter.
Step 2 - Install browser and editor
We’re going need a browser to run the code we write.
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.
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 can be opened in a browser.
Step 4 - Copy the code
Copy following code to the file, and save:
<!DOCTYPE html> <html> <body> <script> alert("Hello world"); </script> </body> </html>
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.
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.
For the most part, it doesn’t matter which browser you have, but there’s a couple chapters specific to the Google Chrome browser. So download Google Chrome if you don’t have it already.
So why do we need so many lines of code for a very simple task?
↓ This longer line here is doing the real work. The other lines of code are only for setting up the stage.
HTML is used for showing web page contents, it’s called a markup language.
The HTML code is made up of elements. Each element is a pair of open and close tags. An element can wrap around other elements.
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
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 very time, you don’t have to memorize it. Feel free to copy and paste whenever you need it.
Basically we’re using the HTML file as the middleman. But we’ll learn more about HTML in later chapters.
Since there’s nothing inside the
scriptelement, 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.
<!DOCTYPE html> <html> <body> <script src="main.js"></script> </body> </html>
alert("Hello world"); with the following code. Try them out one by one, and see what each
alert statement displays in the popup box:
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");
For now, just play around and experiment with the code. The new symbols will be explained in the coming 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, such as how we’re using it here.
You should be getting the following outputs in the popup box:
1 2 11 true false true true false true false