JavaScript is a versatile language. As my friend says, “If you know JavaScript, you can do anything, even you can build a game with this.” In my life as a software engineer, the questions that I come across the most are:
- How to learn Javascript?
- I know how to declare a variable in JavaScript or how to write a loop, but I feel overwhelmed when I have to deal with browser code.
- I want to learn React or Next JS but I don’t know JavaScript. What to do?
While I was starting in front-end web development, I was just told to learn JavaScript because it’s indispensable. Being a fresh graduate intern, what I did was spent time knowing the difference between “const” and “let” keywords or learning for each loop, and then I was assigned to learn React which after some weeks fell flat on me. It soon became a back and forth between JavaScript and React (Giddyup, Kramer’s recipe for disasters right there).
After all these years, I’m thinking of putting together my experience and observations to learn JavaScript in a way that gives you an edge while learning front-end web development. I’m not a pro, but I know the tricks of the trade, as well as the sheer intimidation that people face while they are starting in this stack. If you just learned how to print “Hello World” or mess with Wiki entries, this blog has got you covered.
First, if you are planning to learn the basics of front-end web development, you need to learn HTML CSS and JavaScript, and to kickstart visit Free Code Camp. This website is a gem where you can learn and apply your knowledge simultaneously, also it’s free! Things tend to get convoluted once you reach the JavaScript and/or React (or any frontend framework) section of this or any tutorial site. I will be trying to bridge the gaps in the following sections over the course of this series I promise. Today, I will provide you with a cheat-sheet of some of the crucial JavaScript concepts that you will be needing while building a website or a web app. Here goes:
1. HTML Element manipulation
Any web page is a combination of HTML tags that are holding the elements. Go to your browser and click left. You will see “inspect” or “inspect element” at the bottom, click it and you can see a litany of HTML and CSS.
This is the DOM or Document Object Model of my chrome start page. Every web page is a HTML DOM model which is constructed as a tree of Objects. The tree looks like the following, image courtesy [W3 Schools] 🙁https://www.w3schools.com/whatis/whatis_htmldom.asp)
The HTML DOM is an API (Programming Interface) for JavaScript. What we do with JavaScript is, we try to give instructions to these HTML elements, or get something out of this. That’s how JavaScript makes a website dynamic. The instructions are given by tag name, class name, id, CSS selectors or HTML object collections of individual HTML elements.
Let’s say there is a tag like the following:
Kramerica Industries
In order to change the color of the heading, what we can do is:
...