MAQ Learning

Write Your First JavaScript Program (Code)

In this tutorial, you’ll learn how to write and run your first JavaScript program using two different methods:

  1. Using Google Chrome’s Developer Console (Quick & Easy)
  2. Using a Code Editor with HTML & JavaScript (More Practical for Real Apps)

By the end, you’ll have built a simple HTML + JavaScript app and understood key JavaScript concepts.

Option 1: Run JavaScript in Google Chrome’s Developer Console (No Setup Required)

The Developer console is a powerful tool for writing, testing, and debugging JavaScript code quickly. Whether you're learning JavaScript or troubleshooting a web app, mastering the console will save you time.

What is the JavaScript Developer Console?

The Chrome Developer Console (or "Console") is a built-in tool that:

  • Lets you run JavaScript code instantly.
  • Displays errors, warnings, and logs.
  • Helps debug scripts in real-time.

How to Open the Developer Console

You can open Chrome's developer console with keyboard shortcut in the following way.

  • Windows/Linux: Press Ctrl + Shift + J
  • Mac: Press Cmd + Option + J

Writing Your First JavaScript Code in the Console

Once the console is open, you can type and run JavaScript directly.

Example 1: Basic Output

Type this and press Enter:

console.log("Hello, World!");

Output: Hello, World!

Explanation:

  • console.log() prints messages to the console.
  • Useful for debugging and checking variable values.

Example 2: Simple Math Operation

Note: Press Shift + Enter to write on a new line.

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

Output: The sum is: 15

Explanation:

  • let declares a variable (sum).
  • You can perform calculations directly in the console.

Example 3: Interactive Prompt

let name = prompt("What's your name?");  
console.log("Welcome, " + name + "!");

What happens?

  1. A pop-up asks for your name.
  2. After entering a name, the console greets you.

Explanation:

  • prompt() takes user input.
  • The input is stored in the name variable.

Key Features of the Chrome Console

1. Multi-Line Code Execution

Instead of writing one line at a time, press Shift + Enter to write multiple lines.

2. Auto-Completion & Suggestions

  • Start typing (e.g., docu), and Chrome suggests document.
  • Press Tab to auto-complete.

3. Clearing the Console

  • Type clear() or press Ctrl + L (Windows/Linux) / Cmd + K (Mac).

4. Viewing Errors & Warnings

  • If your code has mistakes, Chrome shows errors in red.

Example:

console.loog("Test"); // Typo in 'log'

Error: Uncaught TypeError: console.loog is not a function

5. Inspecting Webpage Elements

  • Type document.body to see the HTML structure.
  • Use document.getElementById("id") to select elements.

Practical Uses of the Developer Console

  • Debugging Websites
  • Modifying Web pages Temporarily
  • Testing API Responses

Best Practices When Using the Developer Console

  • Use console.log() for debugging.
  • Avoid long scripts (use a code editor for big projects).
  • Check for errors if code doesn’t run.
  • Clear the console often for better readability.

Option 2: Writing JavaScript in a Code Editor (HTML + JS)

In this section, you’ll learn two ways to write JavaScript in a code editor (like VS Code, Sublime Text, or Notepad++).

  1. Embedding JavaScript directly in HTML
  2. Writing JavaScript in a separate file and linking it to HTML

By the end, you’ll know the best practices for structuring your code.

Prerequisites

✔ A code editor (Download VS Code for free).
✔ A web browser (Chrome, Firefox, or Edge).

1. Embedding JavaScript Directly in HTML

You can write JavaScript inside HTML using the <script> tag.

<script>  
  // JavaScript code here  
</script>

Step 1: Create an HTML File

  1. Open your code editor.
  2. Create a new file named index.html.
  3. Add the following basic HTML structure:
<html>
<head>
    <title>JavaScript in HTML</title>
</head>
<body>
    <h1>My First JavaScript Code</h1>
    <script>
        // JavaScript goes here
    </script>
</body>
</html>

Step 2: Write JavaScript Inside <script> Tags

Inside the <script> tag, add:

alert("Hello from inline JS!");

Complete Code:

<html>
<head>
    <title>JavaScript in HTML</title>
</head>
<body>
    <h1>My First JavaScript Code</h1>
    <script>
        // JavaScript goes here
        alert("Hello from inline JS!");
    </script>
</body>
</html>

Explanation:

  • alert() shows a pop-up message.

Step 3: Open in Browser

  1. Save the file (Ctrl + S).
  2. Double-click index.html to open it in Chrome.
  3. You’ll see the alert on the page!

Pros and Cons of Embedding JavaScript in HTML

Pros: Quick for small scripts.
Cons: Hard to maintain in larger projects.

2. Writing JavaScript in a Separate File & Linking to HTML

This is the recommended way for real projects—it keeps code organized.

Step 1: Create Two Files

  1. In your project folder, create:
    • index.html (for HTML structure)
    • script.js (for JavaScript code)

Step 2: Write HTML (index.html)

<html>
<head>
  <meta charset="UTF-8">
  <title>My First JavaScript</title>
</head>
<body>
  <h1>Hello, JavaScript!</h1>

  <!-- Link to external JavaScript file -->
  <script src="script.js"></script>
</body>
</html>

Explanation:

  1. The <script src="script.js"></script> tag tells the browser to load and run JavaScript from another file.
  2. This script runs automatically when the page loads.

Step 3: Write JavaScript (script.js)

Open script.js and add:

 alert("Welcome to your first JavaScript program!");

Explanation:

  • alert() shows a popup message box in the browser.

Step 4: Run in Browser

  1. Save both files.
  2. Open index.html in Chrome.
  3. It shows an alert popup!

Why External JS is Better?

  • Cleaner code – Separates HTML and JavaScript.
  • Faster loading – Browser caches JS files.
  • Reusability – Same script can be used in multiple HTML files.

Simple Rule to Remember: One Job Per Script Tag

When you use a <script> tag in HTML, it can do only one thing at a time:

  1. Load an external JavaScript file (using src="file.js")
    -OR-
  2. Run JavaScript code written directly inside it

You Can't Do Both in One Tag!

This example WON'T WORK because it tries to do two things:

<script src="file.js">  <!-- Trying to load a file -->
  alert(1);            <!-- AND run code inside (this gets ignored) -->
</script>

The Right Way: Use Separate Tags

If you need both:

  1. First load your external file
  2. Then write additional code in another tag
<!-- This loads code from file.js -->
<script src="file.js"></script>

<!-- This runs your extra JavaScript -->
<script>
  alert(1);  // Now this works!
</script>

Key Takeaways

  1. One job per <script> tag - either load a file OR run code inside
  2. Need both? Use two separate tags
  3. Order matters - the browser reads tags from top to bottom

Comparison: Embedded vs External JavaScript

Feature <script>code</script> (Embedded) <script src="file.js"></script> (External)
Code Organization Mixed with HTML Separate file
Reusability Only works in one file Can be used across multiple pages
Caching Not cached Cached by browser
Best For Quick tests, small scripts Production websites, large applications

Best Practices for Using JavaScript in HTML

  1. Use External Files – Keep HTML and JS separate.
  2. Load Scripts at the End – Place <script> before </body>.

Conclusion

The <script src=""> tag is essential for:

  • Maintaining clean code structure
  • Improving website performance
  • Enabling code reuse across pages
  • Facilitating team collaboration

For production websites, always prefer external JavaScript files over embedded scripts. Place your <script src=""> tags just before the closing </body> tag for optimal performance.