What JavaScript and TypeScript Are

Table of Contents

1. Three Languages, Three Jobs
2. Engines and Runtimes
3. Set Up Your Workspace
4. The Console and DevTools
5. Your First Script in the Browser
6. Your First Script in Node
7. Where TypeScript Fits
8. The Project You'll Build
9. Try It Yourself

1. Three Languages, Three Jobs

In What HTML and CSS Are you learned that HTML describes what is on a page and CSS describes how it looks. Both are declarative: you state the result you want, and the browser works out the steps. Neither one can make a decision, repeat a task, or react to a click.

JavaScript is the third language, and it fills that gap. It is a real programming language: it has variables, conditions, loops, and functions. It describes what the page does.

In the house comparison from the last series, JavaScript is the electricity and plumbing. The walls and paint work without it, but switches, lights, and taps need it.

Despite the similar name, JavaScript has nothing to do with Java. They are different languages that happen to share part of a name.

2. Engines and Runtimes

A computer cannot run JavaScript directly. A program called a JavaScript engine reads your code and executes it. Chrome and Edge use an engine called V8, Firefox uses SpiderMonkey, and Safari uses JavaScriptCore. They all follow the same language standard, so the same code works in each.

An engine only understands the language itself. To do useful things, it needs a runtime: the engine plus extra tools from the environment that runs it. Two runtimes matter for this series:

The language is the same in both. What changes is the set of objects available. In a browser, document lets you change the page. In Node, document does not exist, but you can read and write files. In chapters 2 to 7 we use both, because Node is the quickest way to try plain language features. From chapter 8 on, we work in the browser.

3. Set Up Your Workspace

You already have VS Code and the dara-profile folder from the previous series. You now need Node.js. Install it with nvm (Node Version Manager), which lets you switch Node versions without breaking your computer. Follow the install steps on the nvm page for macOS and Linux, or use nvm-windows on Windows. Then install the current LTS (Long Term Support) version, which is the stable one meant for most people:

nvm install --lts
nvm use --lts
node --version

You should see a version such as v22.x.x or higher. If you see command not found, close the terminal, open a new one, and try again.

Next, open your project and create a folder for the new code:

cd dara-profile
mkdir js
code .

The existing index.html and styles.css stay where they are. In VS Code, the Live Server extension you installed earlier works just as before.

4. The Console and DevTools

Open index.html in your browser, press F12, and click the Console tab. This is a place to type JavaScript and see the result at once. Try it:

2 + 3

Press Enter. The console prints 5. Now try:

console.log("Hello from the console");

console.log() prints a message. It is the most common debugging tool in JavaScript: when you are unsure what a value is, print it. The Console tab also shows errors, in red, with the file name and line number. Always look there first when something does not work.

The Elements panel from the HTML series is still there, and it matters even more now, because JavaScript changes the DOM you saw. You will watch elements appear and change as your code runs.

5. Your First Script in the Browser

Create a file named js/main.js:

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

Connect it to the page by adding a <script> tag at the end of the <body> in index.html, just before </body>:

<script src="js/main.js"></script>

Save, reload the page, and open the Console. You should see Hello, Dara! with main.js:1 next to it, which tells you where the message came from.

Why at the end of <body>? The browser reads HTML from top to bottom. If the script ran first, the page elements would not exist yet. Putting the script last means everything above it is already loaded. (Chapter 8 shows a cleaner option, the defer attribute.)

You can also write code directly in the page with <script>...</script>, but a separate file keeps your HTML tidy, just as a separate styles.css did.

6. Your First Script in Node

The same file can run without a browser. In the terminal, from the dara-profile folder:

node js/main.js

The terminal prints:

Hello, Dara!

Same code, different place. Here console.log writes to the terminal instead of the Console tab. Let us make the difference visible. Create js/where.js:

if (typeof window === "undefined") {
  console.log("Running in Node");
} else {
  console.log("Running in a browser");
}

Run it with node js/where.js, then add it to the page with another <script> tag and look at the browser Console. You get a different answer, because window exists only in the browser. Do not worry about typeof and if yet; chapters 2 and 3 explain them.

Because Node needs no web page, you will use it throughout the early chapters to test ideas quickly.

7. Where TypeScript Fits

TypeScript is JavaScript with an added layer: types. A type states what kind of value something should be, such as a number or a piece of text. Here is a small taste. Do not try to run this yet:

function double(n: number): number {
  return n * 2;
}

double("hello"); // TypeScript reports an error before you run anything

The : number parts are the types. Plain JavaScript would accept double("hello") and give a confusing result at run time. TypeScript catches the mistake while you type, in the editor.

Three facts to remember:

• TypeScript is a superset of JavaScript. Every valid JavaScript program is also valid TypeScript, so everything you learn here carries over.
• Browsers and Node run JavaScript, not TypeScript. A tool called the TypeScript compiler removes the types and produces plain JavaScript.
• Types exist only while you write code. They disappear at run time.

For this reason, we learn JavaScript first, in chapters 2 to 10. Types make more sense once you know what they describe. Chapters 11 and 12 then add TypeScript to the same project.

8. The Project You'll Build

Over the next eleven chapters, you take Dara's profile page from the HTML and CSS series and make it interactive:

Keep committing after each chapter, as before:

git add .
git commit -m "Add first script"

9. Try It Yourself

1. Use the Console as a calculator. In the browser Console, type 10 * 7, "Dara" + " Sok", and 100 / 3. Write down what each returns.
2. Print your own message. Change js/main.js to print your name and your favorite color on two separate lines, using two console.log calls. Check the result in both the browser and Node.
3. Make an error on purpose. Remove the closing parenthesis from a console.log( call and save. Read the red message in the Console. What file and line does it point to? Fix it again.
4. Move the script. Put the <script> tag in the <head> instead of the end of <body>. Does it still print? Add the line console.log(document.body); to the script and see what happens. Then move the tag back.
5. Compare the two runtimes. In js/main.js, add console.log(typeof document);. What does it print in the browser, and what does it print in Node? Why?
6. Check your tools. Run node --version and npm --version. Write both numbers in a file called notes.txt.

Next, we'll start learning the language itself: how to store values in variables and what kinds of values JavaScript has. Continue with Values, Variables, and Types.