You: “May I use a framework such as React or Vue for this prompt?” Interviewer: “No, please complete the prompt in vanilla JavaScript.” You: Ahh, vanilla JavaScript… it makes even seasoned web developers break out into a cold sweat. But, with a little practice in the fundamentals, you might learn that vanilla JavaScript (JS) can be your friend! :) This article serves as an introduction to a multi-part tutorial on vanilla JavaScript. The tutorial begins in the next article. What is vanilla JS, and why should I spend any time on it? “Vanilla JS” is a casual nickname for the programming language JavaScript in its pure form, without the benefit of any added frameworks or libraries (such as React or Vue, as mentioned above). Such frameworks and libraries are not only helpful in a professional setting, but they are also imperative! However, most veteran programmers would recommend that beginner programmers not start with such tools, as they can sometimes impair your underlying conceptual understanding of web development. Starting with the no-frills version of JS will lead to a more concrete understanding of how the code interacts with the browser, which is a core component of web development. This is a humorous repackaging of vanilla JS into a sleek new framework. Developers love shiny new frameworks, and truthfully if vanilla JS was sentient and had any interest in "rebranding itself" this would be an excellent strategy. tongue-in-cheek website Sometimes the term vanilla JS implies that some of the HTML and CSS coding for a project that might otherwise occur in separate HTML/CSS files will be handled in the JS file. So, rather than using vanilla JS only for the JavaScript portion of your project, you might do some of the styling or DOM manipulation in the .js file as well. Some Disclaimers If you have coding experience, especially web development experience, odds are the following tutorial will be way too slow for you. No quick tricks here; this is more of a methodical walkthrough for absolute beginners to DOM manipulation trying to learn basics. Now, the tutorial that follows this article does presuppose a basic knowledge of HTML and JS. Try a couple of ; if they seem easy or at least doable, you should be good to go. If they seemed a little (or a lot) beyond you, I recommend spending some time completing some of the Basic Javascript section. Then, head back here when you feel ready. these toy problems here You also need to have a code editor installed or some sort of development environment that you have some competence with; my weapon of choice is VSC , but any code editor will do the trick. (Visual Studio Code) What should I expect from one of your tutorials? The focus in this tutorial will be JS (obviously), so we will be doing all of our coding in a SINGLE JS file; no HTML or CSS at all!* *…Except for a boilerplate HTML with a script tag linking to our JS file. I know, I lied, but this HTML file is really only to make the browser happy. Browsers like HTML code, and even though we humans are reading this article to learn to make HTML with JS, web browsers don’t have the same willingness to learn as you do. So, kudos to you for being a better student than your browser! There will be opportunities throughout the tutorial for you to code along. You really should do this; have a file open in your text editor of choice and code along. It will help reinforce the knowledge, trust me (or don’t trust me and code along anyway). Thanks for bearing with me through the [admittedly somewhat boring] details and background. It is important to make sure you are at the right starting point so you will understand the content. Not understanding this stuff now will lead to you having a bad time when things get more complex (and they will DEFINITELY get more complex). In the following article, our vanilla JS tutorial begins! : Panic reaction (sweating) GIF by Billy Budgen, linked from giphy.com Attributions Previously published at https://shinetechnicallywrites.netlify.app/posts/lets-talk-about-vanilla-js/

Building Blocks of DOM Manipulation - Vanilla JS Tutorial (Part One)

2021 - HackerNoon Contributor of the Year - HEALTH

Too Long; Didn't Read

Make resilience your competitive advantage

Let's Talk About Vanilla JavaScript: What Is Vanilla JS, and Why Should I Spend Any Time On It?

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Noonies Nominee Mike Shine on Career Pivot, Technical Writing, and the Influence of Big Tech

10 VSCode Extensions To Make Your Life Easier

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Tips For Junior Developers To Succeed in Code

10 Things Every Beginner Should Know When Learning Javascript And React

Noonies Nominee Mike Shine on Career Pivot, Technical Writing, and the Influence of Big Tech

10 VSCode Extensions To Make Your Life Easier

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Tips For Junior Developers To Succeed in Code

10 Things Every Beginner Should Know When Learning Javascript And React

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps