Installing a Code Editor (e.g., VS Code)

Section 1.2: Setting Up the Environment

Tutorial 1.2.1: Installing a Code Editor (e.g., VS Code)

Installing a Code Editor

To write and test JavaScript effectively, you need a code editor. While there are many options available, Visual Studio Code (VS Code) is one of the most popular choices due to its versatility and rich feature set.

Step-by-Step Guide to Installing VS Code

Download VS Code:

Visit the official VS Code website.
Choose the version for your operating system (Windows, macOS, or Linux).

Install VS Code:

Follow the installation wizard for your operating system:
Windows: Double-click the .exe file and follow the on-screen instructions.
macOS: Drag the downloaded app into the Applications folder.
Linux: Use the package manager or install from the terminal.

Launch VS Code:

Open the application after installation to ensure it's working correctly.

Enhancing VS Code for JavaScript Development

Install Extensions:

Open the Extensions view (Ctrl+Shift+X or Cmd+Shift+X on macOS).
Recommended extensions for JavaScript:
ESLint: Linting and error-checking.
Prettier: Code formatting.
JavaScript (ES6) Code Snippets: Useful code snippets.
Live Server: Preview your code in the browser.

Set Up Themes:

Customize the editor's look by choosing a theme:
Navigate to File > Preferences > Color Theme.
Popular themes: Dark+, Dracula, Monokai.

Enable Auto-Save:

Go to File > Preferences > Settings and search for "Auto Save."
Set it to afterDelay for smoother development.

Testing JavaScript in VS Code

Create a New File:

Open VS Code and create a file with the .js extension (e.g., test.js).

Write and Save Code:

Example:

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

Run JavaScript Code:

Install Node.js (we’ll cover this in the next tutorial) to run JavaScript directly in the terminal.
Open the integrated terminal (Ctrl+~ or Cmd+~) and type:

     node test.js

Alternative Editors

Sublime Text: Lightweight and fast.
Atom: Customizable and open-source.
WebStorm: Paid but feature-rich, ideal for large projects.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>AJAX with XMLHttpRequest</title> </head> <body> <button id="fetchDataBtn">Fetch Data</button> <div id="dataOutput"></div> <script> document.getElementById('fetchDataBtn').addEventListener('click', function() { var xhr = new XMLHttpRequest(); xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true); xhr.onload = function() { if (this.status === 200) { var data = JSON.parse(this.responseText); document.getElementById('dataOutput').innerHTML = ` <h3>${data.title}</h3> <p>${data.body}</p> `; } }; xhr.onerror = function() { console.error('Request failed.'); }; xhr.send(); }); </script> </body> </html>

axios.get('https://jsonplaceholder.typicode.com/posts/1', { headers: { 'Authorization': 'Bearer YOUR_TOKEN_HERE' } }) .then(response => { console.log('Post data:', response.data); }) .catch(error => { console.error('Error fetching data:', error); });

Choose Your Plan

Installing a Code Editor (e.g., VS Code)

Section 1.2: Setting Up the Environment

Tutorial 1.2.1: Installing a Code Editor (e.g., VS Code)