JavaScript Installation

JavaScript is a widely used programming language, mainly for web development. Unlike other programming languages, JavaScript usually doesn't need to be installed separately because it's already built into all modern web browsers. In this chapter, we'll introduce how to set up a JavaScript development environment.

Built-in JavaScript in Browsers

All modern web browsers (such as Chrome, Firefox, Safari, Edge, etc.) have built-in JavaScript engines, which means you can run JavaScript code without installing any additional software.

Running JavaScript in the Browser

1. Open the browser's developer tools:

   • Chrome/Edge: Press F12 or Ctrl+Shift+I (Windows/Linux), Cmd+Option+I (Mac)
   • Firefox: Press F12 or Ctrl+Shift+I (Windows/Linux), Cmd+Option+I (Mac)
   • Safari: Press Cmd+Option+I (you need to enable the Develop menu in Safari preferences first)

2. Open the Console: Find the "Console" tab in the developer tools

3. Run code: Type JavaScript code in the console and press Enter to execute

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

Text Editors

While browsers can run JavaScript, you'll need a text editor to write more complex programs. Here are some recommended editors:

Free Editors

1. Visual Studio Code (Recommended):

   • Free code editor developed by Microsoft
   • Supports multiple programming languages
   • Has a rich plugin ecosystem
   • Download: https://code.visualstudio.com/

2. Atom:

   • Free open-source editor developed by GitHub
   • Highly customizable
   • Download: https://atom.io/

3. Sublime Text:

   • Lightweight but powerful editor
   • Fast startup
   • Download: https://www.sublimetext.com/

Professional Editors

1. WebStorm:
   • Professional JavaScript IDE developed by JetBrains
   • Full-featured, but requires payment
   • Download: https://www.jetbrains.com/webstorm/

Node.js Environment

While browsers can run JavaScript, in some cases, you may need to run JavaScript code on the server side or locally. This is when you need to install Node.js.

Installing Node.js

1. Visit the official website: Go to https://nodejs.org/

2. Download the installer:

   • Choose "LTS" (Long Term Support) recommended for most users
   • Or choose "Current" (latest version) if you need the newest features

3. Run the installer:

   • Windows: Download the .msi file and double-click to run
   • macOS: Download the .pkg file and double-click to run
   • Linux: Choose the appropriate installation method for your distribution

4. Verify installation: Open a command line tool (Windows: Command Prompt or PowerShell, macOS/Linux: Terminal) and enter:

   node -v
   npm -v

   If version numbers are displayed, the installation was successful.

Running JavaScript with Node.js

1. Create a JavaScript file: Use a text editor to create a .js file, e.g., hello.js

2. Write code:

   console.log("Hello, World from Node.js!");

3. Run the file: Navigate to the file directory in the command line, then run:

   node hello.js

Development Environment Configuration

Visual Studio Code Configuration

If you chose Visual Studio Code as your editor, you can install the following plugins to enhance your JavaScript development experience:

1. ESLint: Code checking tool that helps you follow best practices
2. Prettier: Code formatting tool that keeps code style consistent
3. Auto Rename Tag: Automatically rename HTML tags
4. Bracket Pair Colorizer: Colorful bracket matching for easier code reading
5. JavaScript (ES6) code snippets: ES6 code snippets to improve coding efficiency

Browser Developer Tools

Modern browser developer tools provide powerful debugging features:

1. Elements: View and edit HTML and CSS of web pages
2. Console: Run JavaScript code and view logs
3. Sources: Debug JavaScript code, set breakpoints
4. Network: Monitor network requests
5. Performance: Analyze web page performance
6. Application: View local storage, cache, etc.

Your First JavaScript Program

Let's create a simple HTML file to run JavaScript:

1. Create an HTML file: Create a new file named index.html

2. Add the following code:

   <!DOCTYPE html>
   <html>
   <head>
       <title>My First JavaScript Program</title>
   </head>
   <body>
       <h1>Welcome to JavaScript</h1>
       <button onclick="showMessage()">Click Me</button>
       
       <script>
           function showMessage() {
               alert("Congratulations! You have successfully run your first JavaScript program!");
           }
       </script>
   </body>
   </html>

3. Save and open the file: Open this HTML file in a browser, click the button to see the result

Summary

JavaScript installation and setup is relatively simple:

1. Browsers have built-in JavaScript engines, no additional installation needed to run simple code
2. Choose a suitable text editor (Visual Studio Code recommended)
3. Install Node.js if you need to run JavaScript on the server side
4. Configure development tools and plugins to improve development efficiency

In the next chapter, we'll learn the basic syntax of JavaScript, which is an important first step to mastering this language.