A compiler is a computer program that processes codes and turns them to machine language. Making a website interactive means adding features that are controlled by the users to the website. For example, online registration forms, online calculator, and so on. The Static website has fixed objects and contents and it displays the same information to all the visitors.
The answer is simple, you can do the following:
You can create an active user interface.
You can control web browsers.
You can validate user inputs (if they are typed wrong).
You can create custom web pages that can pop up on the browser, holding information or images.
If you do not have these two software already installed on your computer, it is necessary to download and install them.
We will use the Atom text editor as it is a cross-platform editor, has a built-in package manager, does smart autocompletion, and has a lot of other advantages.
To install Google Chrome go to http://www.google.com/chrome and click Download now, as shown in the following screenshot:
To install the Atom text editor, follow the https://atom.io/ link and press Download Windows Installer, as shown in the following screenshot:
A file called
AtomSetup.exe will start downloading.
Atom will launch automatically after the installation is completed.
If you are on another platform, use the Other platforms link:
If you are a Mac user, go to the https://github.com/atom/atom/releases/latest link and download the
X.X.Xis the version number of Atom. Install it by double-clicking on the file.
If you are an Ubuntu user, you can follow the https://github.com/atom/atom/releases/latest link and download the
atom-amd64.debfile. After downloading it, launch your Terminal in the same folder, where you placed the file after downloading it. Then, write the following code:
sudo dpkg --install atom-amd64.deb
You may need the administrative password to install it. After the installation is complete, you can run Atom from the Terminal by typing
Atomand pressing Enter.
You will see the following tools:
From the tools, select Console. If you cannot find Console, click on the >> symbol, as follows:
Once your console is open, type the following code and hit Enter on your keyboard:
The output that you will see is as follows:
Downloading the example code
You can download the example code files for all the Packt books that you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register in order to have the files e-mailed to you directly.
If you type anything wrong; consider that you forgot the inverted commas of the
Hello World string, you will get the following errors:
Ctrl + L: Clear console
Tab: Autocomplete common prefix
Right arrow: Accept suggestion
Ctrl + U: Clear console prompt
Up/Down: Next/previous line
Enter: Execute command
Ctrl + B: Browse list of open files
Ctrl +Alt + R: Reload Atom
Ctrl +Shift + L: Change syntax highlighting
Alt +Shift + S: Show available code snippets
Ctrl +Shift + M: Markdown preview
Ctrl +Alt + I: Toggle Developer Tools
Ctrl + N: New file
Ctrl +Shift + N: New Window
Ctrl + P: Open file (type the name to perform a search)
Ctrl + O: Open file
Ctrl +Shift + O: Open folder
Ctrl + S: Save
Ctrl +Shift + S: Save as
Ctrl + W: Close tab
Ctrl +Shift + W: Close window
Ctrl + G: Go to line
Ctrl + L: Select line
Ctrl +Shift + D: Duplicate line
Ctrl +Shift + K: Delete line
Ctrl + Up/Down: Move line up/down
Ctrl + /: Toggle comment line
Ctrl + Enter: New line below
Ctrl + [/]: Indent/unindent selected lines
Ctrl + J: Join lines
Ctrl + Alt + .: Complete bracket
Ctrl + Alt + M: Select code inside matching brackets
Ctrl + Alt + /: Fold/unfold code
Ctrl + Alt + F: Fold selected code
Ctrl + Alt + [/]: Fold/unfold all code
Ctrl + F: Find in current file
Ctrl + Shift + F: Find in project
F3: Find next
Shift + F3: Find previous
Ctrl + Enter: Replace all
Ctrl + Alt + /: Use Regex in search
Ctrl + Shift + =/-: Increase/decrease text size
Ctrl + 0 (zero): Reset text size
F11: Toggle fullscreen
In this chapter, we saw how to download Google Chrome and Atom, and install them.
You learned how to write your first code using Chrome Developer Tools (Console). You have also learned a few keyboard shortcuts for Chrome Developer Tools and Atom text editor.