The Environment: Where to Write Your Code
Episode #2 of the course Fundamentals of JavaScript by Matt Fay
Today, you’re going to learn the JavaScript environment—that is, where to write your code.
There are many places in which you can write your JavaScript code. For this course, we’re going to focus on the console, which can be found in all browsers, to see immediate results.
Text Editors
The main tool used during the creation of a website is called a text editor (which provides a local environment); some of the most famous are Sublime Text, Atom, Notepad++, Visual Studio Code (which is built with JavaScript!), etc. You most likely already have a text editor installed on your computer: Notepad for Windows machines, TextEdit for the macOS, and gedit for GNU/Linux machines.
Text editors provide a comfortable environment, highlighting text, and even auto-correcting typos. This is done with the use of plugins. Just like your browser makes use of plugins such as an ad-blocker, so too does the text editor, which is incredibly useful for a developer.
In order to properly use a text editor, you will need to understand the file structure, which is where your project would be located—for example: file:///home/user/Documents/project/index.html. The index.html will link your CSS and JavaScript files. Our main focus is JavaScript, so we’re not going to dig deep into this subject.
Online Platforms
There are also websites that allow you to write JavaScript there or even create entire web applications. For example, codepen.io is a popular platform where you can browse many projects created by people all over the world or even look through job postings. The freeCodeCamp organization makes use of this platform, sending students to create their projects there; it’s convenient, as it allows you to share your project with others via the URL.
Other such platforms similar to codepen are repl.it and jsbin.com. It’s worth giving them a look, but we won’t be building anything in this course.
The Console
As mentioned, in order to see immediate results, we’re going to use the console, which is a built-in feature of your web browser.
To pull up the console, right click on any website, selecting the “inspect element,” or just “inspect” option. This will pull up the HTML elements on the page, and that is how the website you’re viewing is structured! Notice that the top tabs are listed as follows: elements, console, sources, network, memory, application, security, and audits. We’re going to focus on the console tab, so give that a click. (Note: If you see red-colored text, don’t worry. Those are most likely errors that the developer of the website has to deal with, and nothing wrong on your end.) You should see a prompt, ‘>’, and a blinking cursor. It’s time to write your first line of code! In the console, type console.log(“Hello, world!”);.
The response: Hello, world!
Notice the console doesn’t print the console.log(); but only the message we passed to it. That’s strange, right? Not quite. Your browser understands what console.log() means. It’s a built-in function for it—the JavaScript engine. When V8 for Chrome or SpiderMonkey for Firefox sees this, it stops and responds: “Okay, we’ve received a console.log(), which tells us to print or log a message to the console. The message we’re going to print is contained in quotations, it’s of type string; return the string.”
For now, you don’t need to worry about strings—we’ll discuss them further in the next lesson—but the string is simply, “Hello, world!”, of which we passed into console.log();.
If you’re on a phone and want to see some action, you can type the following into the search bar:
javascript: alert(“Hello, world!”);
You can also type the same into your console; the ‘javascript:’ isn’t necessary though. I’m sure you’re all familiar with the effect of the alert() function!
You may recognize this from webpages asking you if you’re sure you want to close a tab or alerting you that your session expired. It is basically a message that you’d want a user to notice.
Stay tuned for the next lesson: variables, values, types, and operators.
Share with friends