Writing first JavaScript program - Deep Dive

Overview - Writing first JavaScript program

What is it?

Writing your first JavaScript program means creating a simple set of instructions that a web browser can understand and run. JavaScript is a language that makes websites interactive and dynamic. Your first program usually shows a message or does a small task to prove the code works. This step is the starting point to learning how to make websites come alive.

Why it matters

Without JavaScript, websites would be static and boring, like printed pages. JavaScript lets you add buttons, animations, and respond to user actions, making the web fun and useful. Learning to write your first program breaks the barrier between just reading code and making things happen on your screen. It opens the door to building games, apps, and interactive tools.

Where it fits

Before this, you should know basic computer use and how to open a text editor or browser. After this, you will learn how to use variables, functions, and events to make your programs more powerful and interactive.

Mental Model

Core Idea

A JavaScript program is a list of simple instructions that the browser reads and follows to do something on the webpage.

Think of it like...

Writing your first JavaScript program is like giving a recipe to a friend who has never cooked before; you tell them step-by-step what to do, and they follow your instructions exactly.

┌─────────────────────────────┐
│ Start JavaScript Program     │
├─────────────────────────────┤
│ 1. Write instructions        │
│ 2. Browser reads instructions│
│ 3. Browser runs instructions │
│ 4. See result on webpage     │
└─────────────────────────────┘

Build-Up - 6 Steps

1

Foundation

What is JavaScript and Its Role

Concept: Introducing JavaScript as a language that runs in browsers to make webpages interactive.

JavaScript is a programming language that works inside your web browser. It lets you add actions like showing messages, changing colors, or responding when you click buttons. Unlike HTML and CSS, which only show content and style, JavaScript makes the page do things.

Result

You understand that JavaScript is the tool to make webpages interactive.

Knowing JavaScript's role helps you see why writing a program matters beyond just displaying text.

2

Foundation

Setting Up Your Environment

Concept: How to prepare your computer to write and run JavaScript code.

You can write JavaScript code inside a simple text editor like Notepad or VS Code. To run it, you open your web browser and use the developer console or create an HTML file that includes your JavaScript. This setup is easy and requires no special software.

Result

You have a place to write and test JavaScript code.

Having a ready environment removes barriers and makes learning hands-on and immediate.

3

Intermediate

Writing Your First JavaScript Line

🤔Before reading on: do you think JavaScript code must be long to show a message? Commit to your answer.

Concept: Learn the simplest JavaScript command to display a message in the browser console.

The simplest program is: console.log('Hello, world!'); This line tells the browser to print 'Hello, world!' in the console, a special place for messages and debugging.

Result

The message 'Hello, world!' appears in the browser console.

Understanding that a single line can produce output builds confidence and shows immediate feedback.

4

Intermediate

Running JavaScript in the Browser Console

🤔Before reading on: do you think you need to save files to run JavaScript in the browser console? Commit to your answer.

Concept: How to open the browser console and run JavaScript code directly without files.

In most browsers, press F12 or right-click and choose 'Inspect', then select the 'Console' tab. You can type JavaScript code here and press Enter to run it immediately. Try typing console.log('Hi!'); and see the output.

Result

You can run JavaScript instantly and see results without creating files.

Knowing this quick method encourages experimentation and faster learning.

5

Advanced

Embedding JavaScript in an HTML File

🤔Before reading on: do you think JavaScript must be separate from HTML to work? Commit to your answer.

Concept: Learn how to include JavaScript code inside an HTML file to run in the browser.

Create a file named index.html with this content: Open this file in a browser and check the console to see the message.

Result

JavaScript runs as part of the webpage and outputs to the console.

Understanding how JavaScript fits inside HTML is key to building real web pages.

6

Expert

Understanding JavaScript Execution Context

🤔Before reading on: do you think JavaScript runs all at once or step-by-step? Commit to your answer.

Concept: Explore how the browser reads and runs JavaScript code line by line in an environment called the execution context.

When the browser loads a page, it creates an execution context for JavaScript. It reads your code from top to bottom, running each instruction in order. This context keeps track of variables and functions as the program runs. If there are errors, it stops or shows messages in the console.

Result

You understand the behind-the-scenes process of how your code runs.

Knowing the execution context helps you predict how code behaves and debug problems.

Under the Hood

JavaScript code is parsed by the browser's JavaScript engine, which converts the text into instructions the computer can execute. The engine creates an execution context that holds variables and functions, then runs the code line by line. Output commands like console.log send messages to the browser's console, a tool for developers.

Why designed this way?

JavaScript was designed to run inside browsers quickly and safely, so it uses an execution context to isolate code and prevent it from crashing the whole page. Running code line by line makes it easier to understand and debug, especially for beginners and interactive web pages.

┌───────────────────────────────┐
│ Browser loads HTML file       │
├───────────────────────────────┤
│ JavaScript engine starts       │
├───────────────────────────────┤
│ Creates execution context      │
├───────────────────────────────┤
│ Parses and runs code line by line│
├───────────────────────────────┤
│ Outputs results to console or page│
└───────────────────────────────┘

Myth Busters - 3 Common Misconceptions

Quick: Does JavaScript run automatically when you write it, or do you need to run it explicitly? Commit to your answer.

Common Belief: JavaScript code runs automatically as soon as you write it anywhere.

Reality: JavaScript runs only when the browser loads the code or when you explicitly run it in the console or through events.

Why it matters: Thinking code runs automatically can confuse beginners who don't see output and give up too soon.

Quick: Is console.log the only way to show messages to users? Commit to your answer.

Common Belief: console.log is how you show messages to website visitors.

Reality: console.log shows messages only in the developer console, not on the webpage visible to users.

Why it matters: Confusing console output with user-visible output can lead to thinking your program is broken when users see nothing.

Quick: Can JavaScript run outside a browser without any tools? Commit to your answer.

Common Belief: JavaScript only works inside web browsers.

Reality: JavaScript can run outside browsers using tools like Node.js, but beginners usually start inside browsers.

Why it matters: Limiting JavaScript to browsers hides its full power and confuses learners about where it can be used.

Expert Zone

1

JavaScript engines use Just-In-Time (JIT) compilation to speed up code execution, which means your simple program is optimized behind the scenes.

2

The execution context includes a call stack that manages function calls, even in your first simple program, this stack is created and managed.

3

Browsers have different developer consoles with unique features; knowing these helps debug more effectively.

When NOT to use

Writing JavaScript directly in the browser console is great for learning and quick tests but not suitable for building full applications. For larger projects, use separate files and tools like bundlers and editors.

Production Patterns

In real projects, JavaScript code is organized into files and modules, often bundled and minified for performance. Developers use frameworks and libraries to manage complexity, but the first program remains the foundation for all.

Connections

Programming Fundamentals

Builds-on

Understanding how to write your first JavaScript program connects directly to basic programming ideas like instructions, output, and syntax.

User Interface Design

Builds-on

Knowing how JavaScript runs lets you create interactive elements that improve user experience on websites.

Cooking Recipes

Analogy-based connection

Just like following a recipe step-by-step produces a dish, writing JavaScript instructions step-by-step produces actions on a webpage.

Common Pitfalls

#1 Trying to run JavaScript code by typing it in the browser address bar.

Wrong approach:

alert('Hello!'); // typed directly in the browser address bar and pressed Enter

Correct approach:

Open the browser console (F12), then type alert('Hello!'); and press Enter

Root cause:

Misunderstanding where JavaScript code can be executed; the address bar is for URLs, not code.

#2 Expecting console.log output to appear on the webpage itself.

Wrong approach:

console.log('Welcome!'); // expecting this text to show on the page

Correct approach:

document.body.innerText = 'Welcome!'; // this changes the page content to show the message

Root cause:

Confusing developer console output with webpage content display.

#3 Writing JavaScript code outside

Root cause: Not knowing that JavaScript must be inside