Taking it to the Next Level

Hey peeps, as promised in the previous blog, this week has been very fruitful in terms of Learning advanced JavaScript. This week we really did took it to the next level.

Last week we covered almost all the basics. I have covered that in my last blog. If you haven't read it and wanna know about it, do check out my previous blog. So, let's just start this week's reflection.

So, this week we basically covered Functions, its types, Document Object Model (DOM) Manipulation, Event Listener, and Object-Oriented Programming (OOP) concepts in JS.

So without further ado lets get right into it.

Functions

Functions are one of the most fundamental building blocks in JavaScript. They are basically used to perform a particular task which can be reuseable. It makes our code readable.

A function definition consists of the “function” keyword, followed by:

• The name of the function.
• A list of parameters to the function, enclosed in parentheses () and separated by commas.
• The JavaScript body enclosed in curly brackets {…..}.

Syntax:
function functionName([arg1, arg2, …argN]){
//code to be executed
}

Document Object Model (DOM) Manipulation

The Document Object Model (DOM) is the data representation of the objects that comprise the structure and content of a document on the web. With the help of HTML DOM, JavaScript can access and change all the elements of an HTML document. Good news, Right. Now you will be able to add all those cool animations that you see around. All of those animations are made by manipulating the DOM. Now lets talk a bit about how to start manipulating it and making our websites look cooler.

So, first we need to link the JavaScript file to the html file. It is done by writing <script src =“index.js”> </script> at the bottom of the body tag.

The DOM basically is an interface that represents how our HTML is read by the browser. It allows JS to manipulate, structure, and style our website. After the browser is done reading HTML document, it creates a representational tree called the Document Object Model and defines how that tree can be accessed.

Representation by the browser

In the image above, we can see the representational tree and how it is created by the browser. In this example, we have four important elements that you’re gonna see a lot:

1. Document: It treats all the HTML documents.
2. Elements: All the tags that are inside your HTML turn into a DOM element.
3. Text: All the tags content.
4. Attributes: All the attributes from a specific HTML element. In the image, the attribute class=”hero” is an attribute from the <p> element.

Advantages

So, by manipulating the DOM, we have an infinite number of possibilities, we just need to use our creativity. We can create applications that stores and update the data of the page. Also, one can create webpages that are used to stored the user input data also customizable by the user and then change the layout or colour of the page etc.

Manipulating the DOM

So, here comes the best part. We are gonna learn how to manipulate the DOM. Its is done by using various methods. There are actually a lot more methods but we covered the following three.

getElementById()

Using this method we access the elements through its id. As we know, id’s are unique, so it’s a very helpful method to get only the element we want.

Syntax: const mainHeading = document.getElementsById(“main”);

getElementsByClassName()

Using this method we access the elements using its class name. This method returns an HTML Collection of all those elements containing the specific name class passed.

Syntax: const mainPara= document.getElementsByClassName(“p_body”);

querySelector()

Using this method we can access the elements using either class name or id or even tags. It returns the first element that has the specific CSS selector passed. Just remember that the selector should follow the CSS syntax.

Syntax: const myButton = document.querySelector(‘#set’);

Event Listeners

To perform any action on any specific point in a webpage like for example after clicking the button we want some specific action, we use an event listener. i.e addEventListener(). There are many possibilities like we can add many event handlers of the same type to one element like two “click” events and so on. There are also several other event listeners in JS.

OOP Concepts in JS

So, in OOP we learnt how to make classes, objects in JS.

In JS, we can have class declarations and class expressions, because they are just functions. A JS class is not an object. It is a template for JS objects. So, like functions classes also makes our code readable and reusable.

Other than that, we discussed about the local storages of the browser which can be used to save any data permanently using JS even if we refresh or close the page, the data won’t get lost. And that’s it for this week.

After that we also discussed CRUD (Create, Read, Update and Delete) operations. It was a bit confusing in the start but after some practice I managed to understand it ✌️.

Concluding my blog, I must say JavaScript wasn't easy in the start. Its not even now hehe. But I am still working on it, a little bit better than before. I can see that in myself. To ace this, one just needs practice and get a grip of the basics and core concepts. Then everything will feel like child’s play.

That’s it from my side. Thanks for reading. See you in the next blog.

Till then, Take care :)