Vanilla JS

Today I am going to talk about vanilla javascript. Vanilla javascript is sort of a funny term to me. As a PC gamer, when I think of vanilla something I think of vanilla wow, which was the original version of the game world of warcraft. I think with vanilla javascript though, the term is more about javascript as it is, without any additional frameworks or libraries. I hear sometimes from experienced developers that it is quite important to be very strong with vanilla javascript. In all honesty I dont know why, but I can imagine certain reasons.

Generally when people make web applications they will inevitably use a framework like react or vue. Frameworks like these can make things quite simple and easy to read. React being so declarative and component driven can make things very easy to establish what x component is doing or why y is doing something in x component. Using vanilla javascript we can still do a lot of things that we might consider using react for.

So how do we even start a vanilla js app? There is no handy create-react-app for us to get started. For the most part we have to create everything from scratch. I guess to be fair there are things that we can use to at least set up an index.html page, but it is pretty easy to look up what you need to set up that. Once we get that index.html set up we need to remember to add the src file to our actual javascript code.

At this point we can start writing javascript code to manipulate the DOM. For those that need a reminder the DOM is the Document Object Model. It is essentially the document we see with HTML or XML and can be modified with scripting languages such as javascript. Generally what we are going to do with our javascript is make functions or other such additions that will modify the HTML for our document. In order to do this we need to be able to reference tags of our html document.

We might use a command such as document.getElementById("myElement"). This will give us access to the myElement

or

or whatever. Then once we have it we can modify it. For example, we might want to grab a div from the code above. If you saw the code, it is a farm, old mcdolands farm. So it would make sense that in the barnyard div we might want some pens with animals in them. Once we have the element, we can make a function to create a pen.

We can make a function that might take in an array of animals for example, and then with that array we will create separate pens for each animal. So when we use document.getElementById we might set that to a variable like, "barn" or whatever you want.

Then we can say barn.innerHTML += our pen making function. This will alter the html to have what our function provided. Next we will want an event listener on when our document loads. So we will use window.addEventListener. What we listen to can be a whole bunch of things but for this we will use "DOMContentLoaded". Once the page is loaded the changes will be rendered with the HTML.

We also might want a form to create more animals. First we would want to create a renderForm function which would essentially be HTML code that will provide the form for which we will add animals or whatever.

Then as we see in the previous picture, we can add an event listener for a submit and this will help us create more animals and pens. Eventually we build up a whole page that can create animals from the form with pens around them. Vanilla javascript is pretty simple and its awesome. But in my experience it can make for a lot of code in one spot unless we want to source a whole bunch of files in our index.html. Thanks for reading.