“So you think you know JavaScript” is the title of one of the JavaScript bibles available on the Internet and I think I know where the idea for the title of the book came from. This week I was working on my first major JavaScript application and I understood one thing: JavaScript is a powerful tool, and I know nothing about it.
Junior’s problem with understanding what it is JavaScript
The problem stems from ignorance. Initial courses for Frontend developers focus on HTML and CSS. The knowledge gained from them allows you to do a great job in building static pages. Thanks to CSS, you can even implement interesting animations and effects on such websites, which makes them look great.
If during such a course, the author also shows how to create a drop-down menu in JavaScript and add/subtract elements on the page, it seems that the world of websites has no secrets from us: “OOOOO I can do everything ….”
The truth comes out a little later. The first signals that something is wrong with my knowledge about JavaScript appeared at the React.JS course. However, I thought that this was specific to React and you just have to learn it. Only now, when I work my way through the JavaScript course, do I see that this isn’t true.
Everything we did in React.JS comes directly from the JavaScript properties. Passing functions as parameters to another function or setting a controller on the page that controls the operation of the application is also possible in pure JavaScript.
At the end of the day, it even turned out that the manipulation of HTML code can be performed differently than before. In particular, the functions replace, insertAdjacentHTML and removeChild seem interesting.
How to build a content template with variable values?
Replace allows you to prepare a certain HTML code template with variables that will be supplemented with content depending on the result of our application code. For example, you want to insert a description depending on what the user selects, so you need to prepare a description variable:
var description = <div>%text%</div>;
also, build an object containing descriptions
var obj = {val1: ‘tekst pierwszy’, val2: ‘tekst drugi’, val3:…… itd.}
You can now create a new variable that will contain the appropriate text in place of % text%:
var newDescription = description.replace(%text%, obj.val1);
the newDescription variable will now look like this:
<div>tekst pierwszy</div>
This solution allows you to freely manipulate the content on the website depending on the state of the application.
How to insert created HTML content on a webpage?
Since you already have HTML code ready to be inserted into the page, it would be good to insert it in the indicated place. For this purpose, the insertAdjacentHTML function can be used. This function allows you to “inject” HTML code into an element in the DOM structure.
In our example, the code would look like this:
document.querySelector(element).insertAdjacentHTML(‘beforeend’, newDescription);
element is simply a selected selector where you want to add your code. The insertAdjacentHTML function has several parameters that let you indicate where the code should be added. ‘Beforeend’ will add code to the end of the element. It is also possible to add an element, before the indicated ‘beforebegin’ element, at the beginning of the indicated ‘afterbegin’ element and after the indicated ‘afterend’ element.
How to remove the DOM element from a webpage?
The last cool feature from this week is removeChild. It turns out that with JavaScript it cannot directly delete an element on the page by selecting it. You should use the so-called “Event Bubbling”, ie go over the DOM elements higher in the structure, and then you can delete the selected element. How to do it in practice? Let’s say we have an element to remove from the page with id = box1. We create a variable holding the pointer to this element:
var element = document.getElementById(box1);
Then you should use parentNode to move to a higher element in the DOM structure and only then use the removeChild function:
element.parentNode.removeChild(element);
This week I learned a lot of interesting things about how JavaScript works, now it’s time to systematize them.
I will definitely want to improve the operation of FrontEnd Quiz, because I collected feedback on what is working wrong and I have new knowledge on how to make an application so that the website doesn’t have to reload, and thus all data is stored in variables.
In addition, as part of the course, I made a budget counting application and I can see several possibilities of developing it so that it can be used efficiently throughout the month. That means a lot of work ahead of me.
This week I spent thirteen and a half hours programming.
PS. You can also read: How tricky JavaScript can be.
