JavaScript Tutorial – Day 2: Hello World and Code Structure
Welcome back to our JavaScript tutorial series! 🎉 Yesterday in Day 1, we explored what JavaScript is, why it matters, and we even wrote our very first program using alert() and console.log().
Today, in Day 2, we’ll go one step further and learn how to properly structure JavaScript code in a webpage. By the end of this tutorial, you’ll understand:
- The different ways to add JavaScript to HTML
- The correct place to put JavaScript code for best performance
- How to write clean, readable, and beginner-friendly code
Let’s dive in! 🚀
Recap: The “Hello World” Program
In the previous blog, we wrote this simple program:
console.log("Hello, JavaScript!");It worked, but we didn’t talk much about where to put this code inside a real webpage. That’s exactly what we’re going to solve today.
Different Ways to Add JavaScript
JavaScript can be included in an HTML page in three main ways:
(a) Inline JavaScript
This means writing JavaScript code directly inside an HTML tag.
Example:
<button onclick="alert('Hello World!')">Click Me</button>📌 Pros: Quick for very small tasks.
⚠️ Cons: Makes your HTML messy and hard to maintain.
👉 Not recommended for professional projects, but fine for learning.
(b) Internal JavaScript
Here, JavaScript is written inside the HTML file but placed in a <script> tag.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Internal JS Example</title>
</head>
<body>
<h1>Welcome to JavaScript Tutorial</h1>
<script>
console.log("Hello from internal JS!");
</script>
</body>
</html>📌 Pros: Keeps all code in one file, good for practice.
⚠️ Cons: Still mixes HTML and JavaScript, not good for bigger projects.
(c) External JavaScript (Best Practice ✅)
This is the most professional and recommended method. You write JavaScript in a separate .js file and connect it to your HTML.
Example:
<!DOCTYPE html>
<html>
<head>
<title>External JS Example</title>
<script src="app.js" defer></script>
</head>
<body>
<h1>External JavaScript Example</h1>
</body>
</html>app.js file
console.log("Hello from external JS file!");📌 Pros:
- Keeps HTML and JavaScript separate.
- Cleaner and easier to maintain.
- Allows reusing the same JS file across multiple pages.
✔ This is the method you should use for all real-world projects.
Where to Place JavaScript Code?
The placement of <script> tags is very important because it affects how your webpage loads.
Option 1: Inside <head> with defer
<script src="app.js" defer></script>- The
deferattribute makes sure the script runs after HTML is fully loaded. - Best for performance.
Option 2: At the End of <body>
<body>
<h1>Hello Page</h1>
<script src="app.js"></script>
</body>- This ensures HTML loads first, then the script runs.
- Also a good practice if you don’t want to use
defer.
⚠️ If you put a script in <head> without defer, it might block the page from loading until JavaScript finishes running. This makes your site feel slow.
Basic Code Structure in JavaScript
When writing JavaScript, keep these best practices in mind:
- Readable Code
- Use proper indentation and spacing.
- Example:
console.log("Hello, world!");- Comments for Explanation
// This prints a message to the console
console.log("Learning JavaScript is fun!");- Use
//for single-line comments - Use
/* ... */for multi-line comments
Use let and const (not var)
let name = "Anand";
const pi = 3.14;These are modern and safer ways to declare variables (we’ll cover this in detail tomorrow).
Mini Project – Interactive Greeting
Let’s create a fun little program to practice what we learned.
<!DOCTYPE html>
<html>
<head>
<title>Greeting Example</title>
</head>
<body>
<h1>Click the button for a greeting</h1>
<button onclick="greet()">Say Hello</button>
<script>
function greet() {
alert("Hello! Welcome to JavaScript Tutorial Day 2 🚀");
}
</script>
</body>
</html>
👉 When you click the button, a popup message appears with a greeting.
This combines HTML (structure), CSS (if you style the button), and JavaScript (functionality).
Key Takeaways
- JavaScript can be written inline, internal, or external.
- Always prefer external JS files for clean and maintainable code.
- Place scripts at the end of
<body>or usedeferin<head>for better performance. - Use comments and proper structure to make your code readable.
📌 What’s Next?
In Day 3 of our JavaScript tutorial series, we’ll explore Variables & Data Types – the foundation of all programming. You’ll learn how to store information like text, numbers, and more inside your code.
