Week 6, 7, and 8 - The DOM, the extras, and the wrap up

The combination of the last three weeks into one blog post comes from a lack of time to write a cohesive blog post that is enjoyable to read! Over the course of these last three weeks, I have maintained my journal and my daily revision structure. This post will combine the notes and key areas of development conducted over the last three weeks worth of learning.

The main resources used are:

• Main Resource - LearnJavaScript.online

What Was Learnt

This post looks at two parts, the DOM and async/await.

The DOM

The DOM or Document Object Model is by far one of the most critical components of Web Development. The browser uses the DOM to provide a hierarchy of components that render onto the page. Similar to that of the prototype structure, the hierarchy builds a functional web-page based on the HTML, CSS, and JavaScript that has been applied.

From the Learn JavaScript resource, one of the major components that a JS developer has to navigate is how to acquire certain components from the webpage. For example:

<h1 id="my-header">Hello</h1>

To acquire this tag a JS developer would use the following function:

const myHeader = document.querySelector("#my-header");

Firstly, the JS developer accesses the global document object, that contains almost all the content on the page (the exception is the shadow DOM). The querySelector function then searches the web-page for any id with the name "my-header", alternatively, we can find all ids with a name using the document.querySelectorAll.

Now we can access the properties that the header has, for example, the text that the header is holding:

console.log(myHeader.textContent) // Hello

By being able to access multiple different components we can then add varying functionality, such as event-based functionality.

myHeader.addEventListener("click", () => {
    myHeader.textContent = "Hello World!";
});

By adding an event to the component we can have dynamic functionality based on the characteristics of events, such as:

• Click
• Submit
• Change

The DOM is a huge topic and one can dedicate a lot of time to understand how it works, one great resource for delving deeper into the area is W3.org DOM

Async/Await

With the previous post provided an overview of JS Promises. Async/Await provides syntactic sugar, a phrase that basically means a short-cut for writing JS Promises by abstracting away from the minutiae of the topic. The following is a basic transition from Promises to Async:

Promises

// Promises
const getWebsite = () => {
    fetch("fakeSite").then(response => response.json()).then(data => console.log(data))
}

Async/Await

const getWebsite = async () => {
     const response = await fetch("fakeSite);
     const data = await response.json();
     console.log(data);
}

The only difference in this case is that Async/Await provides a succinct more readable method of writing such a function. However, it does come down mostly to preference. Some developers prefer the chaining of conditions together via the Promises, and others prefer the use of async/await with the addition of try-catch statements to manage the errors that maybe produced.

I will state, the Learn JavaScript makes a great emphasis on the fact that any developer should have a solid grasp of Promises before diving into Async/await due to them being as we said, syntactic sugar of promises.

Resource Review

Having started Learn JavaScript on the 6th of May 2022, I have finally completed the 78 section course on the 19th of June 2022. Over the course of the 45days, I feel this course has provided me a great advantage over many resources due to its compounding learning approach, while maintaining a good level of ease to digest writing and detailed knowledge around the topic.

The flashcard functionality provides a great method for pre-sleep revision to ensure that you understand key concepts to hit that spaced-repetition!

I would encourage anyone to consider using this resource to learn JavaScript as there first entry into the language as it provides a well structured, succinct, and unique approach to developing good practice and understanding.

Sign Off

Going forward, the next step is to spend a week practicing the skills learnt throughout this last 45 days. The project will be carried out using the following rough structure:

• Day 1: Brainstorm and plan the project
• Day 2: Drawn design of the application
• Day 3: Strawman the application
• Day 4: Visualise the data
• Day 5: Tidy and Review
• Day 6: Break
• Day 7: Write-Up

Obviously this structure is a rough draft to work with and has fluidity to it, as potential areas may require more time to work with or may be completed earlier.

This has been a really fun 45 days, I look forward to seeing you all in 7 days!

Jack/eXit