Introducing JavaScript and NodeJS

As you venture forward in your development journey, there’s one name you will hear about sooner or later: JavaScript, the programming language that powers the web of today. Before you can harness its power, you’ll need some fundamentals! This article covers the barebone basics to set you up for success.

Before You Read

This article assumes you have a basic familiarity with web concepts, like what HTML and CSS are used for. No coding experience required!

In this article you will learn all about:

• What JavaScript is, its common uses, and what makes it special
• What is NodeJS, and how it makes JavaScript even more powerful
• How NodeJS helps you build both static and dynamic websites

By the end, you’ll be able to decide if learning Javascript and NodeJS are the right next steps for you. You will also get a clearer sense of where to go from there, including a teaser for Astro and all the cool things the NPM ecosystem can do for you.

What Is JavaScript?

JavaScript (JS, for friends) is the programming language that runs the internet as we know it today. While many programming languages can be used to create programs that run on your computer, JavaScript is the only language that can create highly interactive experiences that run inside your web browser. This makes JavaScript a fundamental language for any web developer to learn, and one of the most widely used out there.

In less scary terms, JavaScript lets you create websites where users can actively interact with content (submitting forms, triggering animations, updating content), instead of consuming it passively.

Examples of these interactive experiences are:

• Surveys, quizzes, or polls
• Games, from small point-and-click adventures to multiplayer 3D experiences
• Interactive infographics and virtual tours
• Many other staples of modern web design you’ve come to expect, like tabbed interfaces, live notifications, chat, and interactive drag-and-drops!

What's in the name? JavaScript, Java, and... ECMAScript

Do not confuse JavaScript with Java, a similarly-named but very different coding language. While they both have “Java” in the name, these days JavaScript is the only language that can run directly inside a web browser! When in doubt? Double check! Luckily, Java and JavaScript look very distinct.

But if you see ECMAScript or ES mentioned in the wild, surprise! That is Javascript! There’s a bit of history and nuance to this alternate name, but nothing you need to worry about… unless you want to.

These days, almost every website uses JavaScript to engage and delight—and, yes, sometimes annoy—its users. Here’s a few examples you might have encountered:

• Content sharing sites use JavaScript to show your posts as soon as you hit submit, without reloading the entire page.
• Social networks use JavaScript to load new content as you scroll, creating the illusion of an endless feed.
• Image galleries that expand images to full screen and let you swipe through them (“lightboxes”) are built using JavaScript.

Knowing this, becoming proficient in JavaScript may already look like a wonderful idea. And yet there’s more to JavaScript than what it can do for web pages! In the next section, we’ll take our friend JS to the next level by exploring more amazing things you can build with it.

What Is Nodejs?

NodeJS (Node, for short) allows you to run JavaScript code outside a browser. This lets you take what you learned about JS on the web and use it to write code that runs directly on your computer. This unlocks new, exciting possibilities: anything that can be done with a computer program, you can now do with JavaScript!

Exciting features NodeJS adds on top of traditional JavaScript include:

• Access to your filesystem, so you can read, write (or delete!) user files
• Build Desktop Applications (like Discord or Obsidian) thanks to tools like Electron
• Command line tools and automation scripts, so you can do things like resize all your webiste images in bulk, or add a watermark on top
• Running a Web Server so you can store data beyond the boundaries of a single visits, letting you build comment sections, guestbooks, private sections, and other types of dynamic web content

In addition to all this, Node is a “cross platform” program, which means it can be run on different operating systems, like Windows or iOS. This makes your code more portable, and allows you to share your programs with anyome, from your friends to the wider online world.

Run, NodeJS, run: JavaScript and its Runtime Environments

Sometimes, you may see NodeJS referred to as a “runtime environment”. While this sounds scary, it simply means NodeJS is a program that knows how to read (and run) your JavaScript code.

There are many different runtime environments for JavaScript, both in the browser and outside. The differences are not important: just keep it in mind if you hear names like Bun or Deno!

Want to learn more about runtime environments and their differences? Click here! (TODO)

(TODO)

Build Static (Or Dynamic!) Websites with Nodejs

Learning to use NodeJS—alongside its package manager, NPM—has another huge perk: access to a sprawling library of web development tools that can make your experience of creating, updating, and expanding your websites quicker, less frustrating, and more ambitious. These tools, which include Static Site Generators like Astro, both unlock new capabilities and greatly reduce the work required to maintain a traditional HTML site. This makes NodeJS a logical next step once you’re ready to venture past (but not abandon) hand-coded HTML.

Thanks to these tools, your websites can serve all types of content, including:

• Static content, like traditional HTML pages, which is built ahead of time and remains the same for all users, until a new version is uploaded
• Dynamic content, like a list of comments or a guestbook entries, which is generated on the fly upon request, and can include data specific to each visitor or created after the site was uploaded

With NodeJS and NPM at your side you’ll have the freedom to build any website—nay, program!—that your heart desires. And, as you’ll learn in our upcoming guide to Astro, you can grow your skills overtime, reaching progressively more daring goals as your knowledge and ambition expand.

What’s Next?

You now have a high-level understanding of what JavaScript is, and how NodeJS builds on its capability to help you harness JavaScript’s powers beyond the boundaries of a browser.

It’s now time to turn theory into practice by seeing NodeJS in action yourself. In the next article, you’ll run your very first NodeJS program.

If you instead prefer getting the full picture before diving into the particulars, you can skip ahead to learn how NPM lets you harness the code shared by other developers as you build your own programs.