🏠 JavaScript Basics
Estimated reading: 4 minutes 12 views
« PreviousNext »

👋 JavaScript Hello World – Your First JS Program Explained

💡 Starting with your first line of JavaScript code is an exciting step toward mastering web development.

The “Hello, World!” program is the traditional starting point for learning any new programming language. It’s simple, but powerful—it confirms that your environment is set up correctly and that your code can run in the browser.

🧠 What You’ll Learn

✅ How to write your first JavaScript program
✅ How to use the <script> tag
✅ How to display output using alert() and console.log()
✅ Where to place JavaScript code in an HTML file

📝 Writing Your First JavaScript Code

✅ Method 1: Inline JavaScript with <script> Tag

<!DOCTYPE html>
<html>
<head>
  <title>Hello World in JS</title>
</head>
<body>
  <script>
    alert("Hello, World!");
  </script>
</body>
</html>

🧾 Explanation

  • <!DOCTYPE html> — Declares the HTML5 document type.
  • <html> — Root element of the HTML page.
  • <head> — Contains metadata like the title.
  • <body> — Contains visible page content.
  • <script> — This is where you write JavaScript.
  • alert("Hello, World!"); — Shows a popup alert with the message.

⚠️ Note: This method uses alert(), which interrupts the user’s experience. It’s best used for testing or debugging.

🖥️ Method 2: Using console.log() for Developers

<!DOCTYPE html>
<html>
<head>
  <title>Console Example</title>
</head>
<body>
  <script>
    console.log("Hello, World!");
  </script>
</body>
</html>

🧾 Explanation

  • console.log("Hello, World!"); — Prints the message in the browser’s Developer Console.
  • Open your browser’s dev tools (usually F12 or Ctrl + Shift + I) and go to the Console tab to see the output.

✅ This is the preferred method for debugging and testing JavaScript as a developer.

📂 Method 3: External JavaScript File

Separate your JS code from HTML by using an external .js file.

📄 index.html

<!DOCTYPE html>
<html>
<head>
  <title>Hello from External JS</title>
</head>
<body>
  <script src="hello.js"></script>
</body>
</html>

📄 hello.js

console.log("Hello, World from external file!");

🧾 Explanation

  • src="hello.js" — Loads JavaScript from an external file.
  • Keeps your HTML clean and maintains a separation of concerns.

💡 Best Practices

✅ Prefer console.log() for debugging, not alert()
✅ Use external JavaScript files for large codebases
✅ Place <script> tags at the bottom of <body> or use defer to improve page load performance

🛠️ Where Should You Write JavaScript?

PlacementDescriptionBest Use Case
Inside <head>Executes before HTML is parsedUse with defer or async
End of <body>Executes after the HTML is fully parsedMost common placement
External .js fileKeeps code modular and reusableRecommended for all projects

📌 Summary

You’ve just written your first “Hello, World!” program in JavaScript!
This small step is a big milestone—from here, you’ll learn how to:

  • Handle user interactions
  • Modify the DOM
  • Work with variables, functions, and loops
  • Build real applications!

❓ FAQ – JavaScript Hello World

❓ What is the purpose of a “Hello World” program?

A: It verifies that JavaScript is correctly running in your environment.

❓ Should I use alert() or console.log()?

A: Use console.log() for development and debugging; alert() is intrusive and rarely used in production.

❓ Can I run JavaScript without an HTML file?

A: Yes, you can run JavaScript in a browser console or using Node.js on your computer.

❓ What does console.log() do in JavaScript?

A: It prints output to the browser’s Developer Console.

❓ How do I include JavaScript in HTML?

A: Use the <script> tag—either inline or with a src attribute to link an external .js file.

« PreviousNext »
Share Now :

Leave a Reply

Your email address will not be published. Required fields are marked *

Share

JavaScript — Hello World

Or Copy Link

CONTENTS
Scroll to Top