Arrays vs Linked Lists

Tyler Caprioli — Fri, 18 Sep 2020 00:07:53 +0000

Data structures are a core concept in computer science, and knowing how to identify and utilize each system correctly is the difference between an engineer and a developer. Today I'll be comparing arrays and linked lists, two prevalent data structures.

Similarities

orders items sequentially
flexible size (if array is dynamic)

Differences

arrays store items next to each other in memory while linked lists items aren't
static arrays aren't flexible in size like linked lists are
arrays are better for looking up items then linked lists are
It's easier to perform operations on the ends of linked lists than it is on arrays

JS Cheatsheet: Dom Manipulation & Event Listeners

Tyler Caprioli — Thu, 03 Sep 2020 23:53:20 +0000

Manipulating the DOM

Need to know

To find an element: .querySelector(), .getElementBy()
To add an element: .createElement(), .appendChild(), insertBefore(), .innerHTML
To remove an element: .remove(), .removeChild()

How to use

First find an element on the page you’d like to manipulate. You can do this by looking at the source HTML file or by pressing cmd+shift+c to select an element on the page.

In this case, we’ve chosen the <div> element with an id of “dog-image-container”. For us to select this we’d use querySelector and save it to a variable for later use.

dogContainer = document.querySelector('#dog-image-container');

Now we want to add an <h1> element that says “Dog Pics”. Let us begin by creating it. let h1 = document.createElement('h1'); Now that we have the <h1> element stored in our “h1” variable let’s assign it some text. h1.innerHTML = "Dog Pics";

If you look in the console to the right you’ll see that we’ve added text to our h1 variable! But wait, it’s not on our page yet. That’s because creating an element doesn’t include it to the DOM. To do this we have to append our h1 variable to Its parent, dogContainer. There are two ways to do this; the first would be to use the appendChild method: dogContainer.appendChild(h1); By calling the method on the parent class(in this case dogContainer) you will be adding the child to the end of the parent. What if you wanted the element at the top of the container though? There’s a method for that. insertBefore() takes two arguments, the first is what element you are inserting and the second is the position you are inserting that element before.
dogContainer.insertBefore(h1,dogContainer.firstChild);

We did it! If we wanted to remove the text we’ve just created it would be as simple as calling the remove() method on the h1 variable we created: h1.remove(); This method is a shortcut as it allows us to remove the element without looking for the parent. removeChild(), however, requires both the parent and the child to work: dogContainer.removeChild(h1);

Event Listeners

Need to know:

desiredElement.addEventListener("type of event", callBackFunction())

Event listeners allow us to interact with the page. Check out the MDN documentation for a list of available events. For our purposes, we want to be able to click our new “Dog Pics” text and have it turn red. Lucky for us our desired element is already defined with our h1 variable. In our callback function, we’re defining what happens when we perform the action. We need our text to turn red.

h1.style.color = 'red';

This line of code is calling the style attribute on our h1 element and assigning it a new color, red. Now we have all of the pieces of our puzzle to write our event listener:

desiredElement = h1
“type of event” = “click”
call back function = h1.style.color = ‘red’;

h1.addEventListener("click",function(event){h1.style.color = 'red';})

DEV Community: Tyler Caprioli