Morning:
Afternoon:
If we start with the following markup:
<div id="my-div"></div>
We can add additional markup to it programmatically using JavaScript. One way is to create new HTML elements using document.createElement, and adding them by using appendChild. Styling of the element can even be changed by manipulating the element’s style property.
// create an h1 and modify text content and color
const heading = document.createElement('h1')
heading.textContent = "This is the best heading I've ever seen"
heading.style.color = "red"
// get a reference to the existing div and add the heading as a child element
const div = document.querySelector('#my-div')
div.appendChild(heading)
This will produce the following markup:
<div id="my-div">
<h1 style="color: red;">This is the best heading I've ever seen</h1>
</div>
Array.map - Docs on MDNmap() blog post.bindArrays are extremely useful data structures in JavaScript, as they can be easily iterated and transformed through methods like map, filter, and reduce. Sometimes, you may have an ‘array-like’ collection (like a NodeList or function arguments) that you would need to convert to an actual Array before you could use these methods. This can be done using Array.from
let paragraphs = document.querySelectorAll('p')
paragraphs.map((p) => {
p.textContent = "This won't work because paragraphs is a NodeList, not Array!"
})
// => Uncaught TypeError: paragraphs.map is not a function
let actualArrayOfParagraphs = Array.from(paragraphs)
actualArrayOfParagraphs.map((p) => {
p.textContent = "This totally does work because we created an Array from our NodeList!"
})
What objects can you convert to an Array using ‘Array.from’?
For more info, check out this article on MDN.
Almost everything in JavaScript is an Object. The easiest way to create new Objects is with the object initializer, more commonly known as ‘object literal’ syntax. Basically, use curly braces to make an object {} and fill in the properties that you want.
Objects contain key/value pairs that allow you to set and retrieve values from them.
// create a new object and assign some properties
const myObject = {
prop1: 'Hello there',
prop2: 42
}
// access the values in several ways, usually 'dot' or 'square bracket' notation
myObject.prop1 // => 'Hello there'
myObject['prop1'] //=> 'Hello there'
// new key/value pairs can also be assigned with these notations
myObject.prop3 = 'New Value!'
myObject['prop4'] = 'Newest Value!'
console.log(myObject)
// {
// prop1: 'Hello there',
// prop2: 42,
// prop3: 'New Value!',
// prop4: 'Newest Value!'
// }
We know that we can iterate through an Array using map or forEach. Can we do something similar with objects? There are a few ways to do it, but one of the newest and easiest is the Object.keys method. It iterates through the enumerable properties of an object, returning an array of the property keys. Once we have an array of keys, we can map over that and access each of the object properties individually.
const myObj = {
a: 'hi',
b: 42,
c: [1, 2, 3]
}
const myObjKeys = Object.keys(myObj) // ['a', 'b', 'c']
myObjKeys.map(key => myObj[key]) // ['hi', 42, [1, 2, 3]]
The same function can have different values for this depending on how the function is called/invoked.
const app = {
sayYeah() {
console.log(`Yeah, ${this}`)
},
toString() {
return 'app object'
}
}
// When invoked as a method
app.sayYeah() // "Yeah, app object"
// When invoked as an event handler
document
.querySelector('button')
.addEventListener('click', app.sayYeah)
// "Yeah, [object HTMLButtonElement]"
// When manually set with bind
app.sayYeah.bind('w00t')() // "Yeah, w00t"