{"id":2089,"date":"2020-04-02T11:21:05","date_gmt":"2020-04-02T15:21:05","guid":{"rendered":"http:\/\/newmediaproduction.mynmi.net\/?page_id=2089"},"modified":"2022-06-10T02:19:48","modified_gmt":"2022-06-10T02:19:48","slug":"intro-to-javascript","status":"publish","type":"page","link":"https:\/\/nmi.cool\/web\/intro-to-javascript\/","title":{"rendered":"Intro to JavaScript"},"content":{"rendered":"\n
\"Hands
Photo by Katya Austin<\/a><\/figcaption><\/figure>\n\n\n\n

Overview<\/h2>\n\n\n\n

Preamble: You’re awesome!<\/h3>\n\n\n\n

Welcome to our final unit of the course\u2014JavaScript! <\/p>\n\n\n\n

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! ?<\/p>\n\n\n\n

It’s worth taking the time to celebrate what we’ve already learned at this particular moment in the course<\/em>, 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\u2122.<\/p>\n\n\n\n

Reading: What is JavaScript?<\/a> by Mozilla Developer Network<\/h3>\n\n\n\n

Required sections: \"A high-level definition<\/a>\" and \"So what can it really do?<\/a>\"<\/code><\/p>\n\n\n\n

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. <\/p>\n\n\n\n

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.”<\/p>\n\n\n\n

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 \u2014 displaying timely content updates, interactive maps, animated 2D\/3D graphics, scrolling video jukeboxes, etc. \u2014 you can bet that JavaScript is probably involved.”<\/p>\n\n\n\n

Some of the more adventurous among you might’ve incorporated found snippets of JS into Project One, but everyone<\/em> used JavaScript in Project Two (at least three libraries of it, actually! Remember our friends jQuery.js<\/code>, popper.js<\/code>, and bootstrap.js<\/code>?). What role does JS play in Bootstrap? Anything that animated\u2014modals and dropdowns, responsive menus\u2014interacted with JS, as did all of the things listed here<\/a>. Most every theme or template included its own additional JavaScript, too.<\/p>\n\n\n\n

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<\/code>, 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.<\/p>\n\n\n\n

JavaScript is a different sort of thing from the things we’ve done so far<\/h3>\n\n\n\n

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\u2014the 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.<\/p>\n\n\n\n

(Bootstrap is fantastic, but it’s ultimately a more sophisticated method of building better posters.)<\/p>\n\n\n\n

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\u2014one that assembles web pages out of component parts on demand in powerful, complex ways. <\/p>\n\n\n\n

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<\/strong>\u2014machines made out of code that can do almost anything. <\/p>\n\n\n\n

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\u2014indisputably in the top 10<\/a>, if not the top 5-6. Vast power awaits you\u2014if you’ll take the time to learn how to wield it.<\/p>\n\n\n\n

Approach<\/h2>\n\n\n\n

Why bother learning JavaScript?<\/h3>\n\n\n\n

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!<\/p>\n\n\n\n

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?<\/p>\n\n\n\n

It’s an essential part of the front end web<\/h4>\n\n\n\n

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.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

It’s a fantastic introduction to programming<\/h4>\n\n\n\n

JavaScript is a true programming language. Also, we fully expect that the overwhelming majority of people who take this course to not<\/em> go into careers in programming. Nevertheless, there are at least two great outcomes to learning a programming language. <\/p>\n\n\n\n

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? <\/p>\n\n\n\n

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!)<\/p>\n\n\n\n

It’s a marketable skill<\/h4>\n\n\n\n

Second, for the vast majority of you who don’t go into full-time programming\u2014or even a primarily technical career path!\u2014the 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. <\/p>\n\n\n\n

While we’re specifically learning JavaScript, more broadly, we’re learning to think programmatically<\/a>. Everyone from film editors to teachers to business leaders to scientists benefit from the ability to think programmatically.<\/p>\n\n\n\n

What should I be able to do?<\/h3>\n\n\n\n

In short: read at an intermediate level, speak at a beginner level. <\/p>\n\n\n\n

At a very practical level, most of you won’t need to write arbitrary JavaScript to make cool stuff on the web. What is<\/em> 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.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

Mindset<\/h3>\n\n\n\n

Finding comfort and giving grace<\/h4>\n\n\n\n

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:<\/p>\n\n\n\n