Basics of JavaScript

This article or blog will be a refresher as well as a guide for people that are new to the world of web development. You might encounter questions similar to these in your interviews as well. As for me, I am making this so I really don’t have to search through google every time I have to attend an interview and recreate the definitions from scratch. Feel free to give suggestions in the comments and let me know if you like this kind of narrative based blogs! So, without further ado let’s get started.

Do you know what a DOM is?

It basically means Document Object Model. A DOM is created whenever a website or a webapp is loaded. DOM is a standard way of accessing documents put in place by the W3C (World Wide Web Consortium). Can we can do with the DOM? Well JavaScript has access to the DOM and it is essential because without the access we can’t really do the fun and awesome animations or clicks that we do on our websites and apps.
JavaScript manipulates this DOM and changes the HTML elements, attributes, add CSS styles on the go. It can also add HTML events, delete all of the above and more. (Isn’t that awesome!). One other thing, DOM is of 3 types: Core DOM, XML DOM and HTML DOM.

What’s HTML DOM?

Imagine a tree, it has branches right? Exactly. I visualize it as the Yggdrasil tree from Norse Myths. As JavaScript is the reason why web is so interactive and fun to use!

DOM is an object tree. So, HTML DOM is a standard object model, in other words a programmable interface for HTML. It helps define HTML elements, the properties of HTML elements, methods to access those elements and events that are triggered on them as objects.
Simply HTML DOM is a standard to get, change/manipulate, add, delete, update HTML elements.

What are HTML DOM Methods?

Whatever actions we perform can we imitated in some way or form in programming as well. Methods are actions that can be performed on the HTML elements. The properties can be fetched and set or changed to manipulate the HTML elements.
DOM can be accessed by JavaScript as well as other programming languages to manipulate it. You can also see as the programming interface as the methods and properties of each HTML object.

<p id=”test”>
    <script>
    document.getElementByID(“test”).innerHTML = “Wake up Neo!”;
</script>
</p>

Here you can see the getElementByID is a method and innerHTML is a property of that method. It is used to fetching and replacing the content.

Can you tell something about DOM Document?

The HTML DOM Document in simple terms is the father of every other object in the browser. Kind of like Emperor Palpatine ruling over the entire Sith conglomerate.

Whenever we want an element, we start by accessing the document object first. Then we move down the tree till we find the particular object branch.

How do we access these objects?

So, there are three ways to access the DOM objects.

• getElementByID: grabs the id assigned to the HTML element or tag.
• getElementByTagName: grabs the HTML tag directly, returns multiple tags as a list.
• getElementByClassName: grabs the class assigned to the HTML element or tag.

How can we add or Delete Elements from the DOM Tree

There are multiple ways to get this thing done. Let’s see a few of those:

1. We can use the below one for creating a new element in the tree using JavaScript.

document.createElement(elementName)

1. Similarly, we can use appendChild for adding an element to already existing branch or tree.

document.appendChild(elementName)

1. Then there is removeChild for removing an element

document.removeChild(elementName)

1. To replace an element in the DOM tree we use the replaceChild property

document.replaceChild(newElementName, oldElementName)

1. Then we have the write property which allows us to write some text into the HTML output stream.

document.write(text)

Can we Change existing HTML Elements?

Why of course, we can change any HTML or CSS element using JavaScript.
To change an element also there are a few different ways. We need to tap into the element selector and the properties and methods that is has. Let’s see that with examples for better understanding.

• There are 3 properties and a method in these examples. The first one is a method and the rest are properties which can we used to change the elements using JavaScript.
• Using setAttribute method to change values of the elements.

const element = document.querySelector(“.elementClassName”) 
element.setAttribute(attributeName, value)
element.setAttribute("style", "background-color: red;");

1. Using the attribute property.

const element = document.querySelector(“.elementClassName”) 
element.attribute = value
element.src = "landscape.jpg";

1. Using the innerHTML property

const element = document.querySelector(“.elementClassName”)
element.innerHTML = new HTMLContent
element.innerHTML = "New Heading";

1. Finally using the style.property to change CSS using JavaScript

const element = document.querySelector(“.elementClassName”)
element.style.property = new style
element.style.color = "blueviolet";

Event Handlers and how to use them

Let’s first know what are events. Events are well any actions that are performed on HTML elements. JavaScript reacts on these events and changes or modifies the elements.
Event Handlers are ways to tap into these events and act/react accordingly. There are various ways to handle an event. Usually these the handlers are functions as JavaScript code may be too lengthy.

    <element event='some JavaScript'>

    document.getElementByID(id).onClick = function (){
    //code
}

Some commonly used event handlers are:

1. onload or onunload It’s triggered when user enters or exits the page respectively.
2. onchange: It is used with a combination of input field element.
3. onmouseover and onmouseout: It’s triggered when mouse is over or out of an HTML element respectively.
4. onmousedown, onmouseup and onclick: The onmousedown, onmouseup, and onclick events are all parts of a mouse-click, the onmousedown event is triggered when a mouse-button is clicked first, then, the onmouseup event is triggered, when the mouse-button is released, finally, when the mouse-click is completed, the onclick event is triggered.

That’s the end of basics of Javascript. I’ll keep adding more of these. Do let me know your thoughts and follow my Twitter and LinkedIn.