Before you write a single line of code, it pays to understand what you are about to learn and why it is worth the effort. JavaScript is today the most widely used programming language on the planet: it runs in practically every web page you visit, on servers, in mobile apps and even in desktop applications. In this lesson you will see what kind of language it is, where it runs, where it came from (which explains many of its quirks), how it relates to HTML and CSS, and what sort of things you will be able to build with it. By the end you will have a clear picture of the playing field before you start playing.

1. What JavaScript is and what it is for
2. The language's characteristics, explained without jargon
3. Where JavaScript runs
4. JavaScript, ECMAScript and the language versions
5. A short history that explains its quirks
6. JavaScript alongside HTML and CSS
7. What you can build: the Nómada Tasks case
8. Common Mistakes and Tips
9. Exercises
10. Conclusion

JavaScript is a programming language: a set of words and rules you use to give a computer instructions. Its historical specialty is giving behavior to web pages. When you click a button and something expands, when you type in a search box and suggestions appear without reloading the page, when you drag a card from one column to another on a board: that is JavaScript at work.

Consider a very practical difference:

But JavaScript escaped the browser long ago. Today it is also used to write the server that serves those pages, to build mobile apps, command-line tools, automations and desktop programs. In practice it is a general-purpose language with web origins.

You are going to read these four labels a thousand times. It is worth understanding them from the start, at least broadly.

Some languages require a prior compilation step: you write the code, a tool translates it into an executable file and then you run it. From your point of view JavaScript does not work that way: you write the code and it runs directly. There is no "compile button" you have to press.

Under the hood, however, modern engines do something smarter than interpreting line by line: they use JIT compilation (Just In Time). The engine starts by interpreting, watches which parts of the code run many times, and translates those into optimized machine code on the fly.

• For you, right now: it means you can write a line, save, reload the browser and see the result. The learning cycle is extremely fast.
• An important consequence: many errors are not detected until the line actually runs. If you have a typo in a part of the program you never reach, nobody warns you.

In JavaScript variables have no type, values do. The same variable can hold a number today and a piece of text three lines later. You do not declare "this is an integer"; you simply store a value.

• Advantage: you write very fast and with very little ceremony.
• Risk: nothing stops you from adding a piece of text to a number by accident. This is the source of a huge share of beginner errors, which is why an entire lesson is devoted to the topic in Type Conversion and Comparisons.

A paradigm is a style of organizing code. JavaScript does not force you to pick one:

This is a great freedom, but also a responsibility: you decide how to structure things. That is why this course insists on conventions and good practices from the very beginning.

JavaScript runs one thing at a time. There are no two parts of your code running in parallel and stepping on each other's data. This makes life a lot simpler... as long as no instruction gets stuck, because while something is blocking, everything else waits (including the user interface, which freezes).

Since that would be unbearable for slow work (requesting data from a server, waiting for a timer), JavaScript solves the problem with a mechanism called asynchrony: it hands off the slow task, carries on with its own work and deals with the result when it arrives. It is one of the most powerful ideas in the language and it is studied in depth in Module 5.

JavaScript does not run "on its own": it needs a program that understands it. That program is called a JavaScript engine.

One key detail that saves a lot of confusion: the language is the same, what changes is everything around it. In the browser you have access to the page, the window and local storage; on the server you have access to the file system and the network. Adding two numbers works the same in both places; reading a file from disk only makes sense on the server.

In this course you will work mostly in the browser, which is where JavaScript shines and where results are visible immediately, and you will use Node.js as a supporting tool to run standalone scripts and, later on, the automated tests.

There is a classic confusion here that is worth clearing up today.

• ECMAScript is the specification: the official document that defines how the language must behave. It is maintained by a committee called TC39.
• JavaScript is the implementation of that specification used by browsers and Node.js.

In short: ECMAScript is the law, JavaScript is the language that obeys it. Day to day the two words are used almost interchangeably.

The important versions you will hear mentioned:

Since 2015 the committee has published one revision per year, named after the year (ES2016, ES2017... ES2026). There are no more giant leaps: there is a steady stream of small improvements.

"Modern JavaScript" is the colloquial expression for writing code from ES2015 onwards: let and const instead of var, arrow functions, template literals, modules, promises and async/await. This course teaches modern JavaScript from the very first lesson, and only mentions the old syntax when it is necessary for you to understand code you will run into out in the wild.

In 1995 Netscape needed a simple language so that web pages would stop being static documents. The job fell to Brendan Eich, who —according to the story told ever since— had about ten days to produce a working prototype.

The short version of the sequence:

1. 1995: it is born under the name Mocha, becomes LiveScript and ends up being called JavaScript for purely commercial reasons (Java was fashionable). JavaScript and Java are different languages with no family relationship, no more related than a car and a carpet.
2. 1996-1999: Microsoft builds its own version for Internet Explorer. Every browser behaves differently and programming for the web becomes a nightmare of special cases.
3. 1997: it is standardized as ECMAScript to bring some order.
4. 2009: ES5 modernizes the language and Node.js appears, taking it out of the browser.
5. 2015: ES6 transforms the language and kicks off the yearly release cycle.
6. Today: it is the most used language in the world and the de facto standard of the web.

Why does this history matter? Because it explains two facts that are going to surprise you:

• It has inherited quirks. Designed in a matter of weeks and with backward compatibility treated as sacred (breaking the web is not an option), JavaScript carries strange behaviors that could never be removed: typeof null returns 'object', '5' == 5 is true, null and undefined both exist. They are not your mistakes: they are historical scars.
• Almost nothing is removed, things are added. When something turns out badly, the committee adds a better alternative and discourages the old one. That is why var and let coexist, or == and ===. Learning modern JavaScript is, to a large extent, about knowing which part of the language to use and which to avoid.

A web page is built with three technologies that do three distinct, complementary jobs. The classic analogy is a house:

Notice the dashed arrows: JavaScript can modify the HTML and the CSS while the page is open. That is where its power lies. It can add a new task to the list without reloading anything, or change the color of a row when its due date passes. That mechanism is called the DOM and it takes up the whole of Module 6.

One useful warning so you do not get frustrated: this is a JavaScript course, not an HTML or CSS course. You will use some HTML because JavaScript needs somewhere to live, but it will be simple HTML and it will be explained. You do not need advanced CSS to follow along.

With JavaScript you can build, among many other things:

• Interactive interfaces: forms that validate as you type, instant filters, menus, draggable boards.
• Full web applications that work like desktop programs (mail, spreadsheets, editors).
• Data visualizations: charts that update themselves.
• Servers and APIs with Node.js.
• Mobile and desktop applications from the same code base.
• Automations: scripts that rename files, process data or generate reports.

Over the course of this program you will build one of those things, step by step: Nómada Tasks.

Taller Nómada is a small coworking space and creative workshop (a fictional company created for this course). Three people run it: Marta, who coordinates; Iván, a designer; and Lucía, a developer. Today they manage their work with sticky notes on the wall and a messaging group, and the result is predictable: tasks get lost, nobody knows who is doing what, and due dates are discovered too late.

Nómada Tasks will be the web application that solves that problem. Its basic unit will be the task: a piece of data with a title, an assignee, a priority, a status, some tags, some estimated hours and a due date. For example, something like this (you do not need to understand the syntax yet, only the idea):

The journey, in one sentence per module: you will start by storing the data of one task in separate variables; then you will learn to make decisions and repeat work with them; to group logic into functions; to handle lists of tasks; to model them as objects and classes; to display them on screen; to save and synchronize them; and finally to test, optimize and deploy the complete application.

The lesson The Course Project: Nómada Tasks presents the project in detail. Until then, keep the name and the idea in mind: everything you learn will have somewhere to be applied.

Common mistakes when starting out

• Confusing JavaScript with Java. They are different languages, from different companies, with different uses. The name was a marketing decision back in 1995. When you look for help online, always search for "JavaScript", never "Java".
• Believing JavaScript is only good for the browser. That is its natural habitat, but today it is also a server, mobile and desktop language.
• Thinking you have to learn HTML and CSS thoroughly before you start. Not true. With a basic grasp of HTML you can start with JavaScript perfectly well; this course will give you whatever you need.
• Obsessing over the ECMAScript version. You do not need to memorize what arrived in ES2019. Learn modern JavaScript and check the reference when in doubt.
• Copying old code from the internet without realizing it. There is an enormous amount of pre-2015 material still circulating. If you see var everywhere and not a single arrow function, you are probably reading old code.

Tips

• Type the code, do not just read it. Programming is a motor skill as well as an intellectual one. Typing the examples, getting them wrong and fixing them is what makes the learning stick.
• Get used to the official documentation. MDN Web Docs is the de facto reference for JavaScript and the browser APIs. Searching for "MDN" followed by the name of whatever you need is an excellent habit.
• Accept the quirks instead of fighting them. Many things in JavaScript are the way they are for historical reasons. Learn the practical rule and move on.
• Do not skip the exercises. They are designed so that you discover the mistakes in a safe environment.

Say whether each statement is true or false and justify your answer in one sentence.

1. JavaScript and Java are different versions of the same language.
2. To run JavaScript you first have to compile it with an external tool.
3. ECMAScript is the specification that defines how JavaScript must behave.
4. JavaScript can only run inside a browser.
5. JavaScript runs several instructions at once, in parallel.
6. let and const are part of what is called "modern JavaScript".

For each Nómada Tasks requirement, decide whether it is mainly solved by HTML, CSS or JavaScript:

1. The Taller Nómada task list appears as a list with one item per task.
2. High-priority tasks are shown with a red left border.
3. Typing "Iván" in the search box makes the list show only Iván's tasks.
4. Every task card has a title and a line of text with the due date.
5. Clicking "Mark as done" moves the task to a different column without reloading the page.
6. On small screens the cards stack into a single column.

Read these two statements about JavaScript:

• '5' == 5 returns true.
• typeof null returns 'object'.

Without knowing yet how those operators work, explain in your own words why the language can have behaviors like these and why they have not been fixed. Write three to five lines.

Exercise 1

1. False. They are independent languages with no technical relationship. The name "JavaScript" was chosen in 1995 for commercial reasons, because Java was fashionable.
2. False. There is no compilation step for the programmer to run: the code executes directly. The engine does compile internally with JIT, but that is invisible to you.
3. True. ECMAScript, maintained by the TC39 committee, is the specification; JavaScript is the implementation that obeys it.
4. False. It also runs on servers with Node.js, in mobile apps and in desktop applications. What changes between environments is not the language, but the APIs available around it.
5. False. JavaScript is single-threaded: it runs one instruction at a time. It handles slow work through asynchrony, not through parallel execution of the code you write.
6. True. Both arrived in ES6 (ES2015) and are part of the core of the modern style, as opposed to var.

Exercise 2

An important observation: in cases 3 and 5 JavaScript ends up touching the HTML and the CSS. That is precisely its job: modifying structure and style while the page is open.

Exercise 3

Suggested answer: JavaScript was designed in very little time, in 1995, aiming to be a simple, forgiving language for non-programmers. Several decisions made in a hurry (such as converting types automatically when comparing, or a flaw in the internal representation of null) stayed in the language. Fixing them now would break millions of web pages that depend on that behavior, and backward compatibility is an almost sacred rule on the web. So instead of removing what is broken, the committee adds better alternatives (=== versus ==) and recommends using those.

In this lesson you have placed JavaScript on the map. You know it is an interpreted, JIT-compiled, dynamic, multi-paradigm, single-threaded language; that it runs in the browser thanks to engines like V8 or SpiderMonkey, but also on the server with Node.js and on mobile and desktop; that ECMAScript is its specification and that "modern JavaScript" means ES2015 onwards. You have seen that many of its quirks are explained by its ten days of design in 1995 and by the commitment never to break the web. And you have understood its role alongside HTML and CSS: structure, presentation and behavior, with JavaScript as the one that can modify the other two on the fly.

You also know the destination of the journey: Nómada Tasks, the task management application for Taller Nómada, which you will build module by module with Marta, Iván and Lucía as the cast of every example.

Now it is time to prepare the tools. In the next lesson, Setting Up Your Development Environment, you will build your workstation: browser and DevTools, code editor, Node.js and npm, and the project's folder skeleton. Without an environment there is no practice, and without practice there is no learning.