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. How to approach the problem?
- I want to learn React JS 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! Find the JavaScript curriculum here - Basic JavaScript.
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 W3Schools
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:
<!DOCTYPE html>
<html>
<body>
<h1 id="heading1">Kramerica Industries</h1>
</body>
</html>
In order to change the color of the heading, what we can do is:
...
</body>
<script>
const h = document.getElementById("heading1");
h.style.color = "red";
</script>
</html>
The output will look like the following :
If the h1 tag had a class instead of an id, you would have to write getElementByClassName instead of getElementById . Refer to this link of W3 Schools for a list of these functions.
Let's say that you want to change the text of a paragraph tag. What you can do is:
...
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</body>
<script>
...
document.getElementsByTagName("p")[0].innerHTML = "Art Vandaley";
</script>
</html>
innerHTML property sets or returns the HTML content of an element. Here, we had overwritten the first paragraph with another text with the use of innerHTML property.
As my knowledge of JavaScript was rather ambiguous because I had no idea of the DOM manipulation, I was struggling with React. To fully grasp these conecepts of JavaScript, Wes Bos has a 30 day course which is up-to-date - 30 Day JavaScript. Also, W3Schools is your friend to learn JavaScript and website development, so definitely google when you hit a snag.
2. Writing on the Browser Console
If you want to print something in the browser, you need to call the log method of browser console like:
console.log(“Write something“)
In our code, write a message inside the script tag and then check your console:
...
<script>
...
console.log("Bania is a hack!")
</script>
</html>
The output will look like this:
As a front-end developer, you will always have to write code which is shown in the browser. Therefore, it's a best practice if you frequently console the outputs and types of your variables and objects. Here's an example:
...
<script>
const h = document.getElementById("heading1");
h.style.color = "red";
console.log("check type:", typeof(h))
</script>
</html>
The type of variable h is shown in the console:
As you can see, the type of variable h which contains the element of h1 tag is object. It's because this element is now an object in the DOM tree.
3. Variable Scopes and Hoisting
There are three ways to declare a variable in JavaScript - using the keywords “let”, “const” and “var”. Unlike other programming languages, there is no need to explicitly write the type of the variable, such as in C you need to write “int c” to declare a variable c of integer type. JavaScript has data types such as String, Int, Boolean, Null, Undefined, and Object. Except for Object, all are primitive data types. All the primitive data types have also Object counterparts which you can use by creating a constructor with "new" keyword; this style is rarely followed.
Now, with const you declare a variable which you won’t re-assign in future use. A const variable is block scoped, and so is a variable declared with the “let” keyword. Unlike const, you can reassign a let variable. Question is, what is a block-scope?
Look at this code:
...
<script>
{
let a = 10
const b = 100
}
console.log(a)
console.log(b)
</script>
</html>
For either of the variable, the console will throw error like the following:
Why? Because variable a and b do not exist outside the curly braces. This is called a block scope for a variable.
A variable that is declared using "var" keyword has a function scope, meaning the variable is available across the whole function. Consider the following example:
...
<script>
function hello(){
var x = 5
function world(){
var y = 8
console.log("inside",x)
console.log("inside",y)
}
world()
console.log("outside",x)
console.log("outside",y)
}
hello()
</script>
Output:
Why is there an error for y outside its function world? Because the scope of y is bound by its function here. As a result, we can get x outside but not y.
Now that we understand how variable scopes work in JavaScript, we need to understand an interesting bit. JavaScript allows variable hoisting, meaning you can use a variable or function or class in JavsScript even before declaring it. How? The interpreter moves all the declaration to the top of their scopes. Here's a catch. Hoisting only works if you declare the variable with var keyword.
<script>
a = 6
console.log( 6 * 6 )
var a
</script>
If you try it with let, you will get an error as for accessing a variable before initialization. And const does not allow you to declare variable this way.
I hope I have been able to lay down some ground works for learning JavaScript for front-end web development. In the following post I will write about some more JavaScript concepts that are also fundamental for any JS framework such as React. Byeeeeeee!
Top comments (2)
Learning Javascript is like the old story about how to eat an elephant -- one bite at a time of course. I think you've organized these learnings into bite sizes so people can start working their way through. Nice!
Something that also helps chomp through programming, whatever the language, is this -- dev.to/frankfont/wishful-programmi...
Yeah that was the idea. I'm back in React stack after 2 years, and suddenly thought to organize all these scrapes that I had 😅 thanks for your kind words🙏
I'll check the link ☺️