The 3 pillars of web programming
Front-End
JavaScript was created for the purpose of front end web development. Front end is what the user sees on a browser. It is made from HTML, CSS, and JS.
HTML is the backbone, the skeleton of the website. CSS is the skin, gives the website the nice appearance. Finally JS is the muscle that provide movement and action with the website.
DOM
The first pillar of JS is DOM, Document Object Model. When viewed in the browser, what we are seeing is a copy of the HTML, the DOM. We are allow the play with the DOM, any changes on the DOM, the website will reflect these changes. However, when we refresh the page, the original is back in display. The reason for this we are not changing the original source HTML, just the copy.
Any code that is written in the HTML document is consider stable elements. Any code that is written from the JS document then shows up on the DOM is consider unstable elements. The JS file should be render after the HTML has loaded. Can be done using a defer in the JS file or using a addEventListener on DOMContentLoaded.
To create a new element to add to the DOM.
document.createElement("elementNameGoesHere")document.createElement("li")
document.createElement("button")
document.createElement("div")
All unstable elements needs to be attached to a stable element. Document, the most stable, the parent of all parents. The children being head and body. Append() insert the node after the last child of the ParentNode. Prepend() insert the node before the first child of the ParentNode.
stableParent.append(unstable newly created element)body.append(document.createElement("div"))
Finding a element/node in the document. To do something with it.
Find the first instance
document.querySelector("use tag/ID/class name ")Select all the instances
document.querySelectorAll("use tag/ID/class name ")
Inside the chrome inspect tool. Using the element selector tool, select a region on the browser, where you want the element/node. document.querySelector(“div.section-content”). The last section is the element’s tag, id, and class name.
Removing a element from the DOM
element.remove()Communicating with the server
The second pillar is communication with the server. We need to get our data from our backend and display that information to our users. We also need to handle new request, updating, or deleting any information that is given by our users. It is done by a fetch request through a API.
By default fetch is a GET requestfetch('http://example.com/movies.json')
.then(response => response.json())
.then(data => console.log(data));
POST request
fetch('https://example.com/profile', {
method: 'POST'
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
data-key: data-value
}),
})
.then(response => response.json())
.then(data => {
console.log(data);
})
PATCH request
fetch('https://example.com/profile/:id', {
method: 'PATCH'
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
data-key: data-value
}),
})
.then(response => response.json())
.then(data => {
console.log(data);
})
DELETE request
fetch('https://example.com/profile/:id', {
method: 'DELETE'
})
.then(response => response.json())
.then(data => {
element.remove();
})
A Patch request needs 3 updates, to the backend, frontend, and in the memory.
A fetch is composed of 3 promises. The url will happen but in the meanwhile other bits of code will be ran until the promises get return. JS codes are asynchronous, multiple events are happening at the same time.
Event Listener
The third pillar is using an addEventListener to an element. This will trigger an event when the user does something on that element. A click is a example of a event listener. If the user click on a button or a image or a text, sometime will occur.
element.addEventListener("click", myFunction);
function myFunction() {
alert ("Hello World!");
}In this case, when the user click on that element on the website, an alert message will pop up displaying “Hello World!”
https://codepen.io/IzaqueuOlivera/full/gReQzQ
In an addEventListener, the callback function has a built in method of event. Event has many properties, event.target and event.preventDefault() are two of many useful property. These two are useful in a form. The event.preventDefault() will prevent the default submit button to refresh the page. As for event.target.element.value it will return the input value.
Other Helpful Methods
element.reset()while(element.firstChild){
parent.firstChild.remove()
}element.innerText = ""objectArr.forEach((obj) => {
console.log(obj)
})Object.assign({}, additionalObject, additionalObject, ...)Object.keys(objectHash)element.style.cursor = "pointer"element.style.backgroundColor = "red";
:https://www.w3schools.com/js/js_htmldom_eventlistener.asp
:https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
:https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
:https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
:https://developer.mozilla.org/en-US/docs/Web/Events
:https://developer.mozilla.org/en-US/docs/Web/API/Event
