OVERVIEW
PREAMBLE: YOU’RE AWESOME!
Welcome to our final unit of the course—JavaScript!
Before we move forward, take a brief moment to think about how much you’ve already learned this semester: how to purchase a domain name and hosting, create a web page with HTML and style it with CSS, leverage a front-end framework like Bootstrap, and work with a content management system like WordPress. Way to go!
It’s worth taking the time to celebrate what we’ve already learned at this particular moment in the course, not just because it’s awesome that you’ve learned how to do an absolute ton of stuff that you couldn’t do before, but because this, our final unit, JavaScript, will continue to challenge you, perhaps even more than any of the units we’ve tackled so far. But take heart! You’ve already learned so much, and you’ll learn JavaScript, too. To quote the eternal rallying cry of Gen Z: You’ve Got This™.
READING: WHAT IS JAVASCRIPT? BY MOZILLA DEVELOPER NETWORK
Required sections: "A high-level definition" and "So what can it really do?"
The two required sections of this article give a pretty excellent overview of what JavaScript is and the roles it plays in modern web development.
Though JavaScript has actually been extended into all kinds of creative and powerful use cases these days, in our course, we’re going to focus on its role as “the third layer of the layer cake of standard web technologies” alongside HTML and CSS. As the reading continues, “JavaScript is a scripting language that enables you to create dynamically updating content, control multimedia, animate images, and pretty much everything else.”
We haven’t dug into JavaScript directly yet, but we’ve seen it. As the reading notes, “every time a web page does more than just sit there and display static information for you to look at — displaying timely content updates, interactive maps, animated 2D/3D graphics, scrolling video jukeboxes, etc. — you can bet that JavaScript is probably involved.”
Some of the more adventurous among you might’ve incorporated found snippets of JS into Project One, but everyone used JavaScript in Project Two (at least three libraries of it, actually! Remember our friends jQuery.js, popper.js, and bootstrap.js?). What role does JS play in Bootstrap? Anything that animated—modals and dropdowns, responsive menus—interacted with JS, as did all of the things listed here. Most every theme or template included its own additional JavaScript, too.
And, even though WordPress is mostly written in PHP, it includes plenty of JS. In one of your WordPress installs, navigate to wp-admin/includes/js, and you’ll see over 90(!) JavaScript files. And, just like Bootstrap, just about every WP theme under the sun includes its own additional JS. too.
JAVASCRIPT IS A DIFFERENT SORT OF THING FROM THE THINGS WE’VE DONE SO FAR
HTML and CSS are great, but they’re ultimately markup and presentation languages. They can structure our information and style it, but ultimately they can only create posters—the aforementioned “display[s of] static information”. Granted, they’re magical, Harry-Potter-style posters that can change size and pull off a few other tricks, but they’re posters nonetheless.
(Bootstrap is fantastic, but it’s ultimately a more sophisticated method of building better posters.)
WordPress is a bit different. At the end of the day, we’re still creating posters (web pages), but these posters are made by a machine—one that assembles web pages out of component parts on demand in powerful, complex ways.
Still, it’s a machine that someone else built that we’ve simply been trained to operate. With JavaScript, we get to build our own machines—machines made out of code that can do almost anything.
Because we’re just beginning, the machines we’ll construct in this course are relatively simple. But they’re real machines, created with one of the most popular programming languages in the world—indisputably in the top 10, if not the top 5-6. Vast power awaits you—if you’ll take the time to learn how to wield it.
APPROACH
WHY BOTHER LEARNING JAVASCRIPT?
Even though you’re hopefully excited to learn JS after what we’ve just discussed, some skepticism on your part might well be warranted. After all, without knowing much of anything at JavaScript, you’ve been able to build some pretty cool stuff on the web!
Without taking a single thing away from what you’ve built, I’d argue that every single person who wants to do any sort of front-end web development should know at least a bit of JavaScript. Why?
IT’S AN ESSENTIAL PART OF THE FRONT END WEB
Taking a course in front-end web development without learning JS would be a little bit like learning a second language and never really learning about adjectives or adverbs. You could still communicate, sure, but only in a way that’s profoundly limited.
More proof of this point: as I mentioned earlier, both Bootstrap and WordPress make extensive use of JavaScript. I’d be willing to bet that there’s at least some small part of each of you that’s a tiny bit curious about how the JavaScript-y parts of the things you’ve made so far in this course work under the hood.
IT’S A FANTASTIC INTRODUCTION TO PROGRAMMING
JavaScript is a true programming language. Also, we fully expect that the overwhelming majority of people who take this course to not go into careers in programming. Nevertheless, there are at least two great outcomes to learning a programming language.
The first: what if…you really like it? Like, what if you really enjoy the kind of thinking and work that programming entails? What if your brain ends up being deeply intrigued by trying to solve the types of puzzles posed by programming?
Programming opens up a huge variety of in-demand, well-paid career paths. (And don’t worry: if you want to start your journey down this path, there are fantastic NMI electives just for you!)
IT’S A MARKETABLE SKILL
Second, for the vast majority of you who don’t go into full-time programming—or even a primarily technical career path!—the skillset and thought patterns opened up by learning even just the introductory programming skills we’ll cover in this unit will serve just about everyone well in their future careers.
While we’re specifically learning JavaScript, more broadly, we’re learning to think programmatically. Everyone from film editors to teachers to business leaders to scientists benefit from the ability to think programmatically.
WHAT SHOULD I BE ABLE TO DO?
In short: read at an intermediate level, speak at a beginner level.
At a very practical level, most of you won’t need to write arbitrary JavaScript to make cool stuff on the web. What is immensely helpful, though, is the ability to, when necessary, drop into a JavaScript file for a project you’re working on, figure out the lay of the land, and tweak/extend/otherwise modify things to make them work exactly the way you want.
Think of it this way: most of us will never frame a whole house from the ground up or cut an entire outfit from whole cloth, but that doesn’t mean it’s not still incredibly useful to know how to use a circular saw or a sewing machine.
MINDSET
FINDING COMFORT AND GIVING GRACE
Learning any programming language can at times feel like a super-un-fun two-step between unbearable boredom and impossible complexity. You will likely feel both of the following feelings:
- “Okay, yes, shut up already, I’m in college, I know how to add two numbers, for crying out loud.”
- “I’ve tried this 57 times, and I’m more convinced than ever that this exercise is flat-out impossible.”
In navigating these competing feelings, try to focus on this: while some concepts (basic math! putting words together!) might feel incredibly simple, you’ll quickly be asked to apply them in entirely new ways of thinking. Find peace and comfort in the parts of learning how to program that feel familiar, and give yourself grace when an exercise or challenge feels impossible.
Remember, you’re learning a new way of thinking, so of course some things will feel familiar (how could you learn this new way of thinking without at least some parallels / analogies to things you already know?) and of course some things will feel alien and incomprehensible (how could you learn this new way of thinking without encountering something strange and challenging?).
One more thing: JavaScript is unforgiving in ways that HTML and CSS are not. Because HTML and CSS are bounded languages (there’s a limited vocabulary of options to work with within each), if your HTML or CSS has a small error, the browser will still try its best to guess what you mean and try to render something. JavaScript, though, is a true programming language, a browser’s JavaScript engine can’t really guess what you mean—you could feasibly be trying to do anything! All of that to say, when you have a small error in JavaScript, expect errors that stop your code from running, even if it’s just a missing space or punctuation mark. Knowing this in advance won’t eliminate frustration, but it might help reduce it.
COMPREHENSION (MOSTLY) OVER COMPLETION
From Attitudes and habits:
…prioritize comprehension over completion. Don’t just finish your daily lessons—seek to truly understand the concepts they’re communicating. The skills in this class are largely sequential and additive. If you don’t understand something early in the class, the impact of that gap in your understanding will only be magnified as we go on.
I’d much rather move a bit more slowly to achieve deeper understanding. Always feel free to ask me or your peers for clarification or help.
This admonition is perhaps more true for JavaScript than for any other unit of this course. As you make your way through the FreeCodeCamp exercises, really take the time necessary to understand each new concept as it’s introduced.
At this point in the course, though, it’s appropriate to add a wrinkle to the above: sometimes the best way to comprehension is by first achieving completion without comprehension. What does this mean?
You absolutely should still try to complete each lesson on your own first, and then by consulting the provided hints and/or your classmates. However, with JavaScript in particular, if you’re well and truly stuck, it can be a helpful strategy to check out the solution—or to watch the associated videos (they’re great!), which often provide the solution—and then take the time to study the solution and figure out why and how it works.
One final note in this area: functional comprehension is the goal, not perfect and total understanding. There are many layers to learning a programming language, and lessons will sometimes discuss in passing concepts you don’t understand or provide a simplistic explanation of something you might correctly suspect is more complex. As you’re learning JavaScript, aim to understand well enough to achieve the goals set before you at the present moment. You can always go back and revisit a concept later if you find your grasp on it isn’t quite as firm as you first thought.
RESOURCES
Thankfully, there are tons of amazing resources out there to help learn JavaScript. Here are a few of our favorites.
GRASSHOPPER
A part of the Code with Google program, Grasshopper is a free coding app for beginners in which you’ll:
- “Learn with fun, quick lessons on your phone that teach you to write real JavaScript.”
- “Move through progressively challenging levels as you develop your abilities.”
- “Graduate with fundamental programming skills for your next step as a coder.”
The best part about Grasshopper is that it’s cross-platform and is actually practical to use on a phone, allowing you to work on your skills on the go.
JAVASCRIPT FOR CATS
So easy your human companion could do it too!
Regardless of your feelings towards cats, this introduction to JavaScript is as informative as it is silly. To make the most of introductory tutorial, we suggest following along with the instructions, using the console tab in your browser. If you haven’t used the console tab before, don’t worry: The author/cat(?) walks you through how to access it.
This resource will take roughly half an hour to go through, but it’s well worth the time investment if you want to have a solid understanding of basic JavaScript syntax.
GUESS THE COLOUR!
From the Raspberry Pi Foundation, a UK-based charity designed to make coding accessible to everyone, this color guessing game introduces you to beginner-level JavaScript, as well as how to use programming concepts to solve problems.
Although this game assumes no prior knowledge of JavaScript, we suggest going through it after you’ve done a few FCC lessons.
THE JAVASCRIPT BEGINNER’S HANDBOOK
Free Code Camp published a beginner’s handbook to JavaScript that is a great complement to the Free Code Camp lessons that you’ll be working through in this unit. This serves as an excellent reference for when you get deep into one of the FCC coding challenges and can’t quite remember how to access an element of an array or what the logical and operator looks like. You can bookmark this website or download a pdf version of the handbook.
JAVASCRIPT TO-DO LIST
A short exercise in which you can tweak the JavaScript in a semi-real-world-type scenario. Fun?