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.

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 to run your very first NodeJS program

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 vs Java

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.

If you see ECMAScript or ES mentioned in the wild, surprise! That is Javascript! There’s a bit of history and nuance to the different names people use for it, but nothing you should 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!

Run, NodeJS, run! JavaScript 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)

Exciting features NodeJS adds on top of traditional JavaScript include:

• Access to the 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 images in bulk
• Creating Web Servers so you can save data across different website 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, too!

Dynamic vs Static Web Content

Throughout these articles, and in your overall web development journey, you will find references to Web Content being described as either Dynamic or Static.

• Static content is built ahead of time and remains the same for all users unless manually updated.
• Dynamic content can be created on the fly based on incoming new data, even if it’s added after the initial content was updated.

Neither is inherently better than the other: you simply must choose which type works better for the type of content you’re hosting on your website.

Another huge perk of learning to use NodeJS (and NPM, its package manager ) is that they unlock tons of popular web development tools that use or are used for JavaScript, including Static Site Generators like Astro. These reduce the amount of work required to maintain a traditional HTML site, which makes NodeJS a logical next step once you’ve outgrown hand-coded HTML websites.

In the next section, we’ll take a quick look at a NodeJS fresh install and how to run JS code on it.

Running Your First Node Program

Have you Installed NodeJS?

This section assumes you’ve completed your NodeJS installation successfully and are able to run it using your terminal. For detailed instructions on how to install NodeJS via NVM, check out our article here. (TODO: add link)

There’s nothing like some practice! This very quick exercise will show you how to run your very first (and very simple) NodeJS program.

1. Create your program file

   First, create a test file. To do this, open the txt editor of choice (notepad in Windows, for example) and input the following code:

   test.js

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

   Plain text only!

   Make sure you’re using a plain text editor. Otherwise, your program will not run!

   To learn about plain text editing tools, check out our HTML and CSS quickstart.

2. Save your program

   Now save the file as test.js in a location of your choice. These could be your desktop, for example, or any other regular folder.

3. Navigate to the program folder

   Use your terminal to navigate to the folder where you saved your test.js file.

   If you’re struggling to move around using your terminal, you can check out our Terminal Navigation Practice for help figuring out where you are and moving across folders.

4. Run your program

   In the program folder, type the command node followed by the name of the file you wish to run. If everything went well, “Hello, fujin!” will appear in your terminal.

   node test.js

   Hello, fujin!

   Error: Cannot find module!

   Seeing a scary Error: Cannot find module [...]test.js? You may be in the wrong folder!

   You can use ls to see the files in the current directory: tf test.js is not there, you may have taken a wrong turn! Use pwd to check which directory you’re in, and cd [path] to change directory.

Congratulations! You have run your first JS script using Node!

So What’s Next?

With the extensive versatility that JavaScript and NodeJS bring to the table, it’s easy to get overwhelmed!

While you’re welcome to deepen your knowledge on either Node or JavaScript, we suggest you jump ahead into the next article and learn the magic of NPM, Node’s own package manager. This will allow you to access a new tutorial and tons of fun tools, including our go-to static site generator, Astro!