Getting Started with Vanilla JavaScript: Setting Up Your Development Environment
Tags: news, beginners, javascript, codenewbie
Published: 2024-07-09 17:54:40

This simple guide will walk you through how to set up your development environment, to make working with JavaScript smooth and interactive. The setup will use a simple folder structure with an HTML document and an external JavaScript file. This way, you can code along with the guide, write JavaScript in a separate file, and see your output in the browser console. This setup is pretty much how things work in the real world of web development. Let's dive in!

#### Why Use an External JavaScript File?

Using an external JavaScript file has several advantages:

- **Organization:** It keeps your HTML and JavaScript code separate, making your files cleaner and easier to read.
- **Reusability:** You can use the same JavaScript file across multiple HTML files.
- **Maintainability:** It's easier to update your JavaScript code without modifying your HTML file.
- **Collaboration:** Working with others becomes easier as different team members can work on HTML and JavaScript files simultaneously.

#### Step-by-Step Guide to Setting Up Your Development Environment

#### 1. Create a New Folder for Your Project

Start by creating a new folder on your computer where you'll store your project files. Name the folder something like `js-tutorial`.

#### 2. Create a New HTML File

Inside your project folder (`js-tutorial`), create a new HTML file. Name it something like `index.html`.

#### 3. Create a New JavaScript File

Still inside your project folder (`js-tutorial`), create a new JavaScript file. Name it something like `script.js`.

#### 4. Set Up the Basic HTML Structure

Open your `index.html` file in a text editor and set up a basic HTML structure. Link the external JavaScript file using the `<script>` tag with the `src` attribute:

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

Save the `index.html` file after adding this content.

#### 5. Add JavaScript Code to Your JavaScript File

Open your `script.js` file in the same text editor and add some JavaScript code:

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

Save the `script.js` file after adding the code.

#### 6. Open the HTML File in Your Browser

Now, open the `index.html` file in your preferred web browser. You can do this by double-clicking the file or dragging it into an open browser window.

#### 7. Access the Browser Console

To see the output of your JavaScript code, you need to access the browser console. Follow these steps based on your browser:

**For Google Chrome:**

- **Windows/Linux:** Press `Ctrl + Shift + I` or `F12`.
- **Mac:** Press `Cmd + Option + I`.

Click on the **"Console"** tab.

**For Mozilla Firefox:**

- **Windows/Linux:** Press `Ctrl + Shift + K` or `F12`.
- **Mac:** Press `Cmd + Option + K`.

Click on the **"Console"** tab.

**For Microsoft Edge:**

- **Windows:** Press `Ctrl + Shift + I` or `F12`.
- **Mac:** Press `Cmd + Option + I`.

Click on the **"Console"** tab.

**For Safari:**

- **Mac:** Press `Cmd + Option + I` or enable the **"Develop"** menu in **"Preferences"** under the **"Advanced"** tab. Then, select **"Show JavaScript Console"**.

#### 8. See the Output

With your `index.html` file open in the browser and the console open, you should see `Hello, World!` and `Hello, World!` displayed in the console. This confirms that your setup is working perfectly!

#### 9. Start Coding

You can now write JavaScript code inside the `script.js` file. Each time you save the file and refresh the browser, you'll see the output in the console.

You're all set! Happy coding!