Lesson 3: Running JavaScript in the Browser
Learning Objectives
By the end of this lesson, learners will:
- Understand how to write and run JavaScript using a web browser
- Use the browser’s Developer Tools Console
- Write JavaScript directly in an HTML file
- Know the difference between internal and external scripts
- Be able to test and debug code in real time
Why Use the Browser?
JavaScript was designed for the web, and every modern browser (Chrome, Firefox, Edge, Safari) includes a JavaScript engine that allows you to run your code without installing anything else.
🧠 Key Insight: Your browser is your JavaScript playground!
Method 1: Using the Browser Console
What is the Console?
The console is a tool inside the browser that lets you:
- Run small JavaScript commands
- See outputs, errors, and warnings
- Debug your code interactively
How to Open It (in Chrome or Edge):
- Open any webpage
- Right-click → Inspect
- Click the Console tab
- Type:
console.log("Hello, Codevisionz!");
- Press Enter — the message should appear in the console!
💡 This is a great way to test small bits of code and practice syntax without needing an HTML file.
Method 2: Embedding JavaScript in an HTML File
Let’s write a basic web page with JavaScript embedded directly inside.
Example:
<!DOCTYPE html>
<html>
<head>
<title>My First JS Page</title>
</head>
<body>
<h1>Hello from HTML</h1>
<script>
alert("Hello from JavaScript!");
</script>
</body>
</html>
What this does:
- Displays a heading on the page
- Runs the
alert()function when the page loads, showing a popup
📁 Save this as index.html and double-click it to open in your browser.
Method 3: External JavaScript File
As your code grows, it’s best to separate your JavaScript from your HTML.
Example:
HTML File (index.html):
<!DOCTYPE html>
<html>
<head>
<title>External JS Example</title>
</head>
<body>
<h1>External JS Demo</h1>
<script src="script.js"></script>
</body>
</html>
JavaScript File (script.js):
console.log("JavaScript is running from an external file!");
📁 Save both files in the same folder, then open index.html.
✅ This keeps your code clean and modular.
Best Practices
| Practice | Explanation |
|---|---|
| ✅ Use external JS | Keeps code organized and easier to maintain |
✅ Place scripts at bottom of <body> | Ensures the HTML loads before the script runs |
| ❌ Avoid inline JavaScript | Harder to read, maintain, and debug |
✅ Use console.log() to test code | Safer and cleaner than using alerts everywhere |
Key JavaScript Functions
| Function | What It Does |
|---|---|
console.log() | Logs messages to the console |
alert() | Shows a popup box |
document.write() | Writes directly into the page (not recommended for modern use) |
Hands-On Practice
Try this basic interaction:
<!DOCTYPE html>
<html>
<head>
<title>Click Event Demo</title>
</head>
<body>
<button onclick="alert('You clicked me!')">Click Me</button>
</body>
</html>
✅ Save and open in your browser. Clicking the button runs JavaScript!
Summary
| Concept | Explanation |
|---|---|
| Browser Console | Lets you test and debug JS code instantly |
| Internal Script | JavaScript code inside a <script> tag in HTML |
| External Script | JavaScript stored in a separate .js file |
| alert() | Pops up a dialog box |
| console.log() | Outputs text to the developer console |
