Seeing A Result Makes Learning Easier
The first thing that is important to your learning is knowing how to see a result. Browser developers have made things a lot easier these days by including Development Tools right in the browsers themselves.
If you press F12 (in most browsers - definitely works in FireFox, Chrome, Edge) then you will see a new window area pop open.
I’ve pressed F12 in FireFox on my Arduino blog so you can see what this will look like.
Everything below the red line I added is the Browser Console. There are also a number of tabs in that lower section. The first one is [imposter] and the second one which is currently selected is [Console]. The third one is [Debugger] and you can see the rest of them.
Pressing F12 opens the sub-window up with the [Console] tab already selected, which is indicated by the faint blue line and the blue text (“Console”).
Go ahead and type: 2+2<ENTER>
Other Browsers Differ A Bit
If you are using Microsoft Edge the Console window looks a bit different, but you’ll be able to find your way around.
Errors Show Up Too
I typed some nonsense :
The Console Will Remember All the Code You Type
For example, I’ll type in the following commands:
>> var x = 2 + 2<ENTER>
>> console.log(“This value of x is “ + x)<ENTER>
Strange Characters and Text
Finally, as you can see, when you type the second line that references the variable x (var x) the interpreter remembers the value of x and is able to print it out.
If you hadn’t already defined x then the interpreter would’ve given you an error.
For example, type the letter q and press <ENTER>.
These messages are created by the developers who created the browser. That means these messages will often vary from one browser to the next (Edge is different than FireFox, etc). Usually they are similar so you will be able to figure it out. Here’s the q error in Microsoft Edge.
- You cannot save your work -- Once you close the browser tab or refresh the web page all that code will go away. It is only stored in memory and not to disk.
- You can’t easily share it so other users can run the code too. Since it isn’t saved to a file and the program only exists in memory you don’t have a way to have other users run your code.
This is why we normally write our code using a text editor and save it to a file.
Which Text Editor Should You Use?
You should use the text editor that is easiest for you to use and the one you are most comfortable with. Here are some suggestions of text editors that you may decide to use and reasons why you may choose each one.
Pros: Easy to get, free and easy to use. You can get it at: https://notepad-plus-plus.org/
Notepad++ also isn’t resource intensive meaning that it won’t eat up a lot of your memory or processor to run it. Other editors may be more intensive since they may add more capabilities that use more of your computer’s resources.
Syntax coloring means that Notepad++ will colorize the text that it knows are special things like variables, function names, etc. It is a simple and nice way to help you see your code more easily.
- Easy to get and free. https://atom.io/
- Can be used on the Big Three platforms (Mac, Win, Linux). If you switch between OSes you may want to use Atom.
- Fantastic syntax coloring. Editor themes which can make the screen much easier on your eyes.
- Multiple panes for multiple files: you can open up multiple files and view them all at once. This is very helpful since there are times when you will need to edit HTML and more than one JS file at at time.
- Built-in treeview of your project so you can see your project folders and files listed as if you are looking at them in file explorer.
That means Atom is more resource intensive and you may feel your computer slowing down a bit.
Visual Studio Code
Which Editor Will I Be Using In This Book?