JavaScript introduction: think in behavior, not in magic

Learn what JavaScript solves in a real application, how it runs in the browser, and which mental model helps you move from raw data to visible behavior.

How much do you know about JavaScript?

📘 Theory

If you already completed the Programming course, you are not starting from zero

You arrive with real leverage: the core logic is already familiar, and now we translate it into JavaScript inside a real browser environment.

If you just finished `programacion`, you already know variables, data types, operators, conditionals, loops, functions, arrays, objects and basic debugging habits.

That means this lesson is not about relearning what programming is. It is about understanding what changes when that logic enters JavaScript, the browser and frontend development.

You already know how to think in input, process and output.
You already know how to follow state, decisions and repetition.
You already know how to read a basic trace and use the console with intention.
Now we add real JavaScript syntax, browser runtime context and tooling.

What JavaScript solves in a web product

JavaScript gives the interface behavior, rules and state.

When a user clicks a button, fills out a form or waits for server data, JavaScript decides what should happen next and how the UI should react.

That is why it helps to think in inputs, processing and output: user event, business rule and visual feedback.

Input

Signals such as clicks, typing, submit events or network responses.

The user interacts
The system receives a signal

Process

Validation, calculation, decisions and data transformation.

Output

DOM updates, messages for the user and state changes.

Observation

Console logs that help you verify assumptions and debug faster.

The real relationship between HTML, CSS and JavaScript

They do not compete. They complement each other with different responsibilities.

HTML defines structure and meaning, CSS defines presentation, and JavaScript controls dynamic behavior. Keeping those responsibilities separate makes code easier to maintain.

In real projects, many bugs appear when those layers get mixed: style logic pushed into JavaScript for no reason, or behavior hidden in HTML. Here we work with clearer boundaries.

HTML handles semantics and accessibility basics.
CSS handles layout, visual states and presentation.
JavaScript handles rules, state and interaction.
The practical order is progressive: make it work, then make it clearer, then optimize it.

Why JavaScript is still central

It is the native language of the web, it keeps evolving, and it reaches frontend, tooling and backend work.

JavaScript already lives in every browser and its standard, ECMAScript, continues to evolve every year. That makes it more than a passing trend.

With Node.js, you can also reuse the same language and mental model for scripts, automation and backend APIs.

One language across multiple layers of the stack.
A mature ecosystem for frameworks, testing and tooling.
Large documentation surface and a huge community.
A direct bridge toward TypeScript when you are ready.

How JavaScript runs in the browser

First the code is parsed, then it is executed. If syntax fails, logic never starts.

The engine, such as V8, analyzes your script and builds internal structures to run it. A syntax error stops everything before the first real instruction executes.

After that, your code runs on the main thread and uses browser Web APIs for asynchronous work. That is why some results arrive later even if the script started immediately.

Base mental model: data -> decisions -> effects

If you can trace that flow, you can debug most beginner bugs with much more confidence.

First identify which data enters the system, then decide which rule should be applied, and finally define which result should appear. Later in the course, that simple map becomes variables, operators and control flow.

The pattern repeats everywhere: in a tiny exercise, in a form, and eventually in a full checkout flow.

1 If you already completed the Programming course, you are not starting from zero 2 What JavaScript solves in a web product 3 The real relationship between HTML, CSS and JavaScript 4 Why JavaScript is still central 5 How JavaScript runs in the browser 6 Base mental model: data -> decisions -> effects

🧰 Resources

Useful links

TC39 and the ECMAScript standard MDN JavaScript overview V8 blog MDN JavaScript Guide javascript.info Node.js documentation

Test

Check your knowledge with a test about JavaScript.

Test for JavaScript

Course resources 62

📘 Glossary 🎧 Audio 📄 PDFs 🖼️ Infographics 🎬 Videos 🔗 Links 🧠 Flashcards 🧩 Snippets

Lesson 02

JavaScript tools: your real working environment

›