Javascript Tutorial

Setting Up the Environment

❮ Previous Next ❯

To start coding in JavaScript, you’ll need to set up a development environment on your computer. In this lesson, we’ll cover the essential tools and steps to prepare your environment so you can write, test, and debug your JavaScript code effectively.

1. Choosing Your Code Editor

A code editor is a tool where you write and edit your code. Choosing the right editor can make coding easier and faster. Here are some popular code editors for JavaScript:

Visual Studio Code (VS Code): Free, widely used, and has many useful extensions.
Atom: Also free and open-source, known for its customizability.
Sublime Text: A lightweight editor with many features, but some advanced features require a paid license.

Recommended: We’ll be using Visual Studio Code (VS Code) in this course because it’s beginner-friendly, powerful, and widely used by developers.

Steps to Install VS Code:

Go to the VS Code website.
Download the installer for your operating system (Windows, macOS, or Linux).
Run the installer and follow the setup instructions.

Once installed, open VS Code. You’ll see a simple interface where you can start coding immediately.

2. Installing Node.js

JavaScript was originally designed to run only in web browsers, but with Node.js, you can also run JavaScript on your computer’s command line (or terminal). Node.js enables you to execute JavaScript code outside of a browser, making it ideal for testing, running scripts, and building backend applications.

Steps to Install Node.js:

Go to the Node.js website and download the LTS (Long Term Support) version. The LTS version is the most stable for development.
Run the installer and follow the prompts.

To check if Node.js installed successfully, open a terminal (or command prompt) and type:

node -v

This command should return a version number if Node.js is installed correctly.

3. Setting Up Your First JavaScript File

Let’s create a simple project and run some JavaScript code.

Create a New Folder: Create a folder on your desktop (or any location) and name it JavaScriptProjects.
Open the Folder in VS Code: In VS Code, go to File > Open Folder and select the JavaScriptProjects folder.
Create a New JavaScript File: Right-click inside the folder in the Explorer panel on the left, choose New File, and name it hello.js.

4. Writing and Running JavaScript Code

In hello.js, type the following code:

console.log("Hello, World!");

This is a simple line of JavaScript code that prints “Hello, World!” to the console.

Running the Code Using Node.js:

Open the terminal in VS Code by going to View > Terminal or pressing Ctrl + ~ (Windows) / Cmd + ~ (Mac).
Make sure you’re in the JavaScriptProjects directory. You should see a terminal prompt that says JavaScriptProjects or the folder name.
Run the code by typing:
```
node hello.js
```
You should see the message “Hello, World!” printed in the terminal. This confirms that your environment is set up to run JavaScript code.

5. Debugging JavaScript in the Browser

JavaScript is often used to make websites interactive, so it’s important to know how to debug your code directly in the browser.

Using Chrome DevTools:

Open Google Chrome (or any browser with DevTools, like Firefox).
Open a new tab and right-click anywhere on the page, then select Inspect. This opens the DevTools panel.
Go to the Console tab in DevTools. This is where you can see JavaScript output and test code snippets.

Testing JavaScript in the Console:

Try typing console.log("Testing JavaScript in the Console!"); directly in the Console tab and press Enter. You should see the message appear immediately.

Running a Basic HTML and JavaScript File:

Create an index.html file in your JavaScriptProjects folder and add the following HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Setup</title>
    <script src="hello.js"></script>
</head>
<body>
    <h1>Welcome to JavaScript!</h1>
</body>
</html>

Open this index.html file in Chrome. Right-click and select Inspect to open DevTools.
You’ll see the output “Hello, World!” printed in the Console because hello.js is linked to index.html with the <script> tag.

6. Extending VS Code with Helpful Extensions

VS Code has a wide variety of extensions to improve your coding experience. Here are a few recommended ones:

ESLint: Helps detect syntax and code style errors.
Prettier - Code Formatter: Automatically formats your code for better readability.
Live Server: Lets you launch a local server with live-reloading, making it easier to see changes in your code in real-time.

To install an extension:

Click on the Extensions icon on the sidebar in VS Code.
Search for the extension’s name (e.g., “Live Server”) and click Install.

Using Live Server:

After installing, right-click on index.html and select Open with Live Server. Your browser will open a new tab showing your HTML file, and any changes made to index.html or hello.js will automatically refresh the page.

Conclusion

Now, your environment is set up for JavaScript development! You’ve installed a code editor, set up Node.js, and learned to run JavaScript in both Node and the browser. Additionally, you’ve installed a few VS Code extensions to help improve your productivity.

In the next lesson, we’ll dive into the Basic Syntax and Data Types of JavaScript, where you’ll start learning the foundational elements of the language.

❮ Previous Next ❯

Javascript Tutorial

Javascript Tutorial

Introduction to JavaScript

Control Structures

Functions

Objects and Arrays

Advanced Topics

Setting Up the Environment

Important Links