Brandon Pretelt
Published in

Brandon Pretelt

JavaScript: The Brains

Ah, JavaScript. What a lovely little scripting language. From its quick inception (a 6 month feat) back in 1995 at the hands of its creator, Brendan Eich, to the maturity it has reached nowadays that enables us to build modern applications, JavaScript has been the brains of pretty much every single web page and web app since.

That said, I’m going to be zeroing in on a few of my favorite JavaScript features.

Event Handling

Event handling probably is, for me, hands down the best part of JavaScript. The amount of interaction you can achieve using events is astounding. By far, the most common one is click, since click can both be used as standard mouse click and also responds to touch, although events that specifically handle touch do exist.

If you want to see an event in action, try using the Google Search bar. It uses one of the keypress events in order to detect what you’re typing. From there, it hooks into either using fetch or AJAX and dynamically updates the autocomplete based on what you’re typing. This is such a great user interaction, in my opinion. In the next section, I linked something that does something similar, albeit, not as cool as Google Search.

Communicating with APIs using Fetch

One of my other favorites things about JavaScript is the ability to communicate with APIs using fetch or even AJAX. The sky is the limit when using fetch. You can create so many applications. On Github, there is a repository with free public APIs that can be used for just about any project need. Using this API resource, I made this simple dictionary based project. The API that I used was the DictionaryAPI (https://my-dictionary-card-site.surge.sh/).

This simple project includes two of my favorite JavaScript features: event handling and fetch. I love the idea of using events and APIs to create an interactive experience with very minimal code. You can create just about anything without having to worry about things like databases or servers. Just good ol’ HTML, CSS and JavaScript.

DOM Manipulation

And finally, DOM Manipulation. DOM Manipulation is, as the name implies, a way to modify the Document Object Model by using different JavaScript methods such as document.createElement(), document.createTextNode() and many others. Using these, a developer can create a dynamic web site or web app with just a few lines of code. However, one of the few cons of this is the fact that you can’t always select dynamically created elements since they don’t technically exist in the DOM unless you select the body element and use other DOM traversal methods to select the aforementioned element. In this Star Wars mini project I worked on (brandonpretelt.com/films), all the elements in the page except for a save few were created solely by JavaScript. The following code accomplishes just that

orderedFilms.forEach((film) => {
const headerElement = document.createElement('header');
const h1Element = document.createElement('h1');
const divElement = document.createElement('div');
const imgElement = document.createElement('img');
containerDiv = document.createElement('div');
const divCrawlElement = document.createElement('div');
const crawlPElement = document.createElement('p');
divElement.classList.add('card');
headerElement.classList.add('card-title');
divCrawlElement.classList.add('card-content');
crawlPElement.textContent = film.opening_crawl;
h1Element.textContent = film.title;
const id = film.url.slice(film.url.length - 2).slice(0, -1);
imgElement.src = `https://starwars-visualguide.com/assets/img/films/${id}.jpg`;
imgArr.push(imgElement);
divElement.append(imgElement);
container.append(divElement);
});

Conclusion

JavaScript is a powerful language and there’s a lot more that you can do with it other than what I mentioned up above. It is definitely the backbone and brains of the web and I don’t see it going anywhere anytime soon.

Brandon Pretelt is a student in the Digital Media Program at Utah Valley University, Orem Utah, studying Web & App Development. The following article relates to (JavaScript) in the (DGM 2760 Course) and representative of the skills learned.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store