famashines

2024-12-16

javascript

Module 2: Setting Up Your Environment

Objective: Learn how to set up a proper environment to write, test, and run JavaScript code, including using the browser console and a text editor.

1. Writing JavaScript in the Browser Console

The browser console is the simplest place to experiment with JavaScript.

Steps to Access the Console:

  1. Open your browser (e.g., Chrome, Firefox, or Edge).
  2. Right-click anywhere on a webpage and choose Inspect (or press Ctrl + Shift + I / Cmd + Option + I).
  3. Click the Console tab in the developer tools.

Try This:

Type this into the console and press Enter:

console.log("JavaScript is awesome!");

You should see the message printed in the console.

2. Using a Text Editor

To write and save JavaScript code for larger projects, you’ll need a text editor. One of the most popular and beginner-friendly editors is Visual Studio Code (VS Code).

Steps to Install VS Code:

  1. Go to VS Code's official website and download it for your operating system.
  2. Install VS Code by following the instructions.
  3. Once installed, open the application.

3. Writing JavaScript in VS Code

Let’s create your first JavaScript file.

Steps:

  1. Open VS Code.
  2. Create a new folder on your computer where you want to save your JavaScript files (e.g., MyJavaScriptProjects).
  3. Inside VS Code, click File > Open Folder, and select the folder you just created.
  4. Create a new file by clicking File > New File and save it as app.js (the .js extension tells the computer it’s a JavaScript file).

Writing Code:

In app.js, write this:

let message = "Hello, JavaScript!";
console.log(message);

4. Running Your JavaScript File

You can run your app.js file in two ways: directly in the browser or using Node.js (a JavaScript runtime).

Option 1: Running JavaScript in the Browser

  1. Create an HTML file to load your JavaScript.

  2. Save a new file in the same folder as app.js and name it index.html.

  3. Write this code in index.html:

    <!DOCTYPE html>
<html>
<head>
    <title>My First JavaScript</title>
</head>
<body>
    <script src="app.js"></script>
</body>
</html>

  4. Open index.html in your browser by double-clicking the file.

  5. Open the console to see the output.

Option 2: Running JavaScript with Node.js

  1. Install Node.js from nodejs.org (download the LTS version).

  2. Open a terminal or command prompt.

  3. Navigate to the folder where your app.js file is saved:

    cd path/to/your/folder

  4. Run the file using Node.js:

    node app.js

  5. You should see Hello, JavaScript! printed in the terminal.

5. Understanding How the Browser Reads JavaScript

When the browser loads a webpage:

  1. It reads the HTML for structure.
  2. It applies CSS for styling.
  3. It runs JavaScript for interactivity.

The <script> tag in index.html tells the browser to load and execute the app.js file.

Example:

If you add this to app.js:

alert("Welcome to JavaScript!");

When you open index.html, you’ll see a pop-up alert.

6. Practice Exercise

Let’s make sure you’re comfortable with your setup.

Task 1:

  • Create a new JavaScript file called practice.js.

  • Write a program to print:

    console.log("I just set up my JavaScript environment!");

Task 2:

  • Modify your index.html file to include practice.js instead of app.js.
  • Reload index.html in the browser and check the console for the message.

Challenge:

  • Add another <script> tag to index.html for a second JavaScript file (e.g., extra.js).

  • Write a small program in extra.js to calculate and display the sum of two numbers:

    let a = 5;
let b = 10;
console.log("The sum is: " + (a + b));