JavaScript Beginners: Friendly Intro & Exercises

“Baby steps, & lots of practice.”

That is the most common answer I hear to the How can I learn JavaScript? question.

Because let’s face it:

For JS beginners, the towering ecosystem that is JavaScript can be quite intimidating.

At Snipcart, we have many users who aren’t JS experts—and that’s just fine. We often try to guide them towards a better understanding and best practices. Following the count your keystrokes principle, I decided to create an evergreen resource I could later point to!

This intro for JS beginners will feature:

• A rich overview of JavaScript & its ecosystem
• A step-by-step learning program & key resources
• Two JavaScript exercises for beginners

Let’s take those first baby steps.

1. First, what is JavaScript?

JavaScript is a tool for developers to add interactivity to websites.

To put things a bit crudely:

• HTML structures your content
• CSS styles it
• JavaScript makes it come to life!

These three languages enable web developers to create vibrant online experiences.

JavaScript, however, is a more… complex beast than the first two. You see, it lets you do a bunch of things on a site:

• Auto-update content, like a social media feed :bird:
• Animate visual elements :dash:
• Add visual feedback on user interactions :white_check_mark:
• Add interactive maps
• Trigger pop-ups/offers after user actions ‼

Developers often use JavaScript to fetch data from other sites and display it on their own.

Our shopping cart at Snipcart, for instance, is added to sitesusing JavaScript!

However, these use cases only represent the tip of the JS iceberg. Web developers also use it to:

• Create single page applications—with frameworks likeReact &Vue.js
• Run backend web servers—withNode.js

JavaScript is a quite versatile language, used in both programming paradigms, i.e.functional & OOP (object-oriented programming).

Absolute beginners need not worry about that just yet though! We’ll cover this in an upcoming, intermediate post. :+1:

2. Breaking down the JavaScript ecosystem

2.1. There’s a “convention” behind JavaScript: it’s called ECMAScript

Scott Tolinski explains what "ES" stands for, and what its different versions bring to the table.

Whenever a new version of JavaScript comes out, you’ll inevitably hear about ECMAScript.

ECMAScript is the scripting language specification JavaScript is based upon.

Let’s use a simple analogy to break this down: building a house :house:

The convention on how to write house plans—the one all architects agree upon—is ECMAScript. Thick lines represent exterior walls; thin ones, interior, etc.

The widely adopted (and trademarked) method to write house plans on a 20” x 20” light blue paper sheet is JavaScript.

Your own detailed, 20” x 20” light blue house plan is the JavaScript code in your program.

Your fully built house is the execution of the JavaScript code—the program running.

In other words, ECMAScript is the “convention” behind JavaScript. This specification defines language lexicon & syntax, as well as the APIs (we’ll get to that later) that should be made available in it.

There are multiple versions of the ECMAScript specification, dating as far back as 1997. There are also many different implementations (read: languages) of the specification, like JScript & ActionScript . But JavaScript is BY FAR the most popular one.

2.2. Modern JavaScript works on both browsers AND servers

What’s fun, and confusing, about modern JavaScript, is that it can run both on the frontend AND backend.

In other words, you can run JavaScript code in your browser, but also on your servers!

Let’s see how they differ.

Client-side JS: browser magic!

All browsers have JavaScript engines that interpret and run JS code.

Once an HTML page renders into a browser tab, the latter executes the JavaScript code scoped to that specific page. One page can load scripts (different JavaScript files) from multiple sources. Browsers execute them sequentially—one after the other—at each page load.

JavaScript has access to the DOM (Document Object Model), i.e. the structure of HTML elements in your page.

It is by accessing the DOM that JavaScript manipulates HTML elements and produces animations, transitions, visual cues, etc.

In section 4, we’ll show you concrete examples of how to use JS in the browser!

Server-side JS: Node & npm

Node.js is a JavaScript runtime—an execution environment—that runs JS code outside the browser.

It comes with a ton of APIs (here’s an API intro!) that interact with computer resources: file system, network I/O, etc.

See, these capabilities aren’t available in the browser. Why? Mostly for security reasons: you wouldn’t want web pages to run code that reads local files on your computer… that’s nasty!

Using Node.js, developers are building a wide array of backend JS programs, ranging from simple developer tools to full-blown production web servers.

All of these programs are all listed on and accessible through npm .

Developer bear building stuff with Node packages! [ source ]

npm (which stands for Node Package Manager) is a command line tool and a public package registry. It’s a tool that lets you include external libraries, known as packages, in your Node.js program.

Simply put, it lets you install any of these Node programs directly from your computer. It allows developers to publish and download bits of JavaScript code, from simple functions to mature frameworks.

Check out this post if you want to dig deeper into Node.js.

3. Actually learning JS—where to start?

GitHub repo with resources for JS beginners

I’d love to go on about what statements, declarations, variables, objects/functions, and expressions are.

But I am not kamikaze enough to try and reproduce the entire JavaScript documentation in one blog post.

The heroic folks at Mozilla Developer Network (MDN) already did a great job of introducing JS beginners to the language’s technical quirks. So if this section’s first sentence sounded like gibberish, fear not. These two JavaScript tutorials will help you get up to speed with JS mechanics & syntax real quick:

• What is JavaScript - MDN
• A first splash into JavaScript - MDN

If you’re coming from a backend programming background, you’ll get the hang of these in no time.

If you’re not, you’re in luck: our team recently published an extensive list of key resources to get started with JavaScript. It’s gathered 200+ stars on GitHub, and we’re happy to share it with you:

Open source list of paid & free resources to learn JavaScript

Now before you go on a rampage of clicks and scrolls, wait. I suggest following this simple beginner’s path first:

1. Understand some basics on Udacity , Codecademy , or freeCodeCamp (or in the exercises below!)
2. Give JavaScript: Understanding the Weird Parts a watch
3. Check out the YDKJS series !

Rapid-fire tips for JS beginners

• Start by learning vanilla (plain) JavaScript —not a framework.
• Get the hang of developers tools —debugging will save your life!
• Learn the difference between falsy & truthy values.
• Learn promises, then async/await .
• Get familiar with useful APIs like filter , map , reduce , spread , rest .

4. Two JavaScript exercises for beginners

Number 1: Show user IP address with JavaScript

See the Pen LJbPdY by Charles Ouellet ( @couellet ) on CodePen .

Number 2: Add items to a wishlist with JavaScript

See the Pen pONQOX by Charles Ouellet ( @couellet ) on CodePen .

Closing thoughts

Remember: learning ~~a new programming language~~ anything takes time and practice. It won’t be easy, but it’ll empower you to create awesome experiences online. Be it for yourself, your friends, a company, or some clients!

JavaScript really is the backbone of the web, so I promise learning it will future-proof your career. Scout’s honor.

What’s next, you ask?

Slowly but surely, take the time to go through some hand-picked resources in the GitHub repo shared above.

Once you’re a bit more confident with your JS knowledge, I’d advise going through Wes Bos’ JavaScript 30 course.

Massive shout-out to our dev friends Diego , Sophie , Max , and P-Y for sharing their JS beginner tips with us! You guys rock.

If you enjoyed this post, please. Is there a topic in there you’d like us to explore more? Let us know in the comments, and we might just write a post on it! :blush: