Scalable Business for Startups

Get the oars in the water and start rowing. Execution is the single biggest factor in achievement so the faster and better your execution.

+91 9472774549 thebytemind@gmail.com Looking for collaboration for your next creative project?

Chapter 2: Setting Up the Development Environment

Before diving into JavaScript, let's set up your development environment and write your first program. We'll go over the tools you'll need, and by the end of this chapter, you'll be able to create and run a simple JavaScript program.

1. Tools You'll Need

To get started, you’ll need:

  • A Code Editor: A text editor designed for coding is essential. Some popular options are:
    • Visual Studio Code (VS Code): Free, open-source, with a wide range of extensions.
    • Sublime Text: Lightweight and powerful, though paid (with a trial version).
    • Atom: Also free, customizable, and beginner-friendly.

    Recommendation: Download Visual Studio Code as it’s widely used and has excellent support for JavaScript.

  • A Web Browser: Modern browsers like Chrome, Firefox, or Edge come with developer tools, making them perfect for JavaScript development. Google Chrome is particularly popular among developers due to its robust DevTools.
  • Node.js (Optional): If you plan to work on JavaScript projects outside the browser (e.g., backend with Node.js), installing Node.js is beneficial. It also comes with npm (Node Package Manager), useful for managing JavaScript libraries.

Download Node.js: Node.js Website

2. Setting Up Visual Studio Code

Once you've installed VS Code:

  1. Open Visual Studio Code.
  2. Install Extensions: Click on the Extensions view icon in the sidebar or press Ctrl + Shift + X. Here are some helpful extensions:
    • JavaScript (ES6) Code Snippets: For quicker code writing.
    • Prettier - Code Formatter: Keeps code well-formatted.
    • Live Server: Quickly opens HTML files in your browser with auto-reload on code changes.
  3. Set Up Folder Structure:
    • Create a new folder called MyFirstProject.
    • Inside this folder, create a file named index.html and another file called script.js.
3. Writing Your First JavaScript Program

Let’s start with a simple “Hello, World!” program.

Create the HTML Structure:

Open index.html and add the following code:

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

This sets up a basic HTML page with a reference to script.js, where our JavaScript code will go.

Add JavaScript Code:

Open script.js and write:

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

This code sends the message "Hello, World!" to the browser's console, an area where developers can see output and debug information.

Run the Program:
  1. Right-click on index.html and select “Open with Live Server” if you have the Live Server extension installed.
  2. Open Developer Tools in the browser by pressing F12 (or Ctrl + Shift + J in Chrome).
  3. Go to the Console tab. You should see “Hello, World!” printed there!
Example Codepen