Risharth Pardeshi
Day 1: Hello World! 🌍 – Your First Step into JavaScript

Day 1: Hello World! 🌍 – Your First Step into JavaScript

Risharth pardeshi's photo
Risharth pardeshi
·

4 min read

Welcome to Day 1 of your JavaScript journey! 🎉 Today, we’ll set up everything you need to write, run, and explore JavaScript. You’ll also create your first program – an alert box that pops up with your name.

Ready? Let’s make your first day as fun and smooth as possible!

1. Setting Up the Environment

We need some essential tools before diving into JavaScript. Let’s get them installed!

Step 1: Install Node.js

Node.js allows us to run JavaScript outside the browser. It’s also necessary to install npm (Node Package Manager) for managing JavaScript libraries.

  1. Go to the Node.js Website: https://nodejs.org

  2. Download the LTS version (Recommended).

  3. Run the installer:

    • On Windows: Follow the prompts (Check the option that says "Add to PATH").

    • On Mac: Open the installer and drag Node.js to Applications.

  4. Verify Installation:

    • Open the terminal or command prompt and type
node -v

If it shows a version number (e.g., v18.0.0), you’re good to go!

Step 2: Install Visual Studio Code (VS Code)

VS Code is an awesome code editor with lots of features that will make coding fun and easy.

  1. Go to the VS Code Website: https://code.visualstudio.com

  2. Download and install the version for your operating system.

  3. Install Extensions (Optional but Useful):

    • Open VS Code.

    • Go to Extensions (Sidebar or Ctrl + Shift + X).

    • Install:

      • Prettier (Code formatter).

      • JavaScript (ES6) Code Snippets (To get code suggestions).

  4. Test Your Setup:

    • Create a new file called test.js.

    • Add the following code:

        console.log('Hello, Risharth!');

    • Open the integrated terminal (Ctrl + ~) and run

node test.js

If you see Hello, Luffy! in the terminal, your setup is perfect!

Step 3: Set Up CodePen (Optional Online Environment)

CodePen is a fast way to test your JavaScript code without installing anything.

  1. Go to CodePen: https://codepen.io.

  2. Create a New Pen.

  3. In the JS section, write your first JavaScript code:

     javascriptCopy codealert('Hello, Risharth!');

2. Introduction to JavaScript

JavaScript is the language of the web. You’ll use it to make webpages interactive—whether it's showing alerts, creating dynamic content, or building entire web apps.

You can write JavaScript in:

  • The browser console (for quick testing).

  • HTML files (to interact with webpages).

  • Node.js (for server-side JavaScript).

3. Try JavaScript in the Browser Console

  1. Open Google Chrome (or any browser).

  2. Right-click anywhere on the page → Click Inspect → Open the Console tab.

  3. Type the following code and hit Enter:

     javascriptCopy codealert('Hello, Risharth!');

    This will display a popup message with your name.

4. Writing Your First JS Program (Alert Box)

You can create a basic JavaScript alert right in your browser or inside an HTML page. Here’s how to do it step-by-step.

Option 1: Using the Browser Console

Open the console (as explained above) and type:

javascriptCopy codealert('Welcome to JavaScript, Risharth!');

Option 2: Writing JavaScript Inside an HTML File

Let’s create a simple HTML + JavaScript file.

  1. Open VS Code and create a new file named index.html.

  2. Add the following code:

     htmlCopy code<!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>Hello, Risharth! 🎉</h1>
   <script>
     alert('Hello, Risharth!');
   </script>
 </body>
 </html>

  3. Open the file in your browser:

    • Right-click the file → Open with Chrome (or any browser).

    • You’ll see the alert popup when the page loads.

5. Challenge: Make the Alert Box Interactive

Let’s make things more interesting by asking the user for input.

Interactive Alert Box Code

  1. In your index.html file, change the JavaScript part to:

     javascriptCopy codelet userName = prompt('What is your name?');
 alert('Hello, ' + userName + '! Welcome to JavaScript.');

  2. Open the file in your browser again.

  3. Enter your name in the prompt box and see what happens!

6. Summary of What You Learned Today

  • Installed Node.js and VS Code.

  • Learned how to run JavaScript code in:

    • Browser console.

    • VS Code (Node.js).

    • CodePen.

  • Wrote your first JavaScript program using alert().

  • Created an interactive prompt-based alert.

Bonus: Celebrate Your First Day! 🎉

  1. Share your progress with friends or post on social media (maybe on Hashnode?)
    "Day 1 complete! Wrote my first JS alert 🎉. Excited for 49 more days! 🚀"

  2. Make sure to take a break and enjoy—you just took the first step toward mastering JavaScript! 🔥

JavaScriptJavascript libraryWeb Development
Â