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.
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).
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 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.
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.
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.
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.
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 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
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.
Basically, we’re using the HTML file as the middleman. But we’ll learn more about HTML in later chapters.
src attribute of the
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.
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