JavaScript-Page Dynamism
JavaScript is a scripting or programming language that allows you to implement complex features on web pages. Every time a web page does more than just sit there and display static information, we can be sure that JavaScript is probably involved.
The language is built on top of HTML, which is a markup language that we use to structure and give meaning to our web content, and CSS a language of style rules that we use to apply styling to our HTML content.
The above script tag allows the browser to enter into javascript world and execute our JS code(src/index.js). The defer attribute tells the browser not to wait for the script. Instead, the browser will continue to process the HTML, and build Document Object Model -DOM which is a representation of our web page. The script loads “in the background”, Asynchronously and then runs when the DOM is fully built.
Want to read this story later? Save it in Journal.
So the page is downloaded and ready for the user interaction, But How does Java Script creates a page dynamism? Assume that you want to adopt a pet and end Signing Up for a web page — eg AdoptMe(Its our phase III project). You click a signup button and a form pop out, you fill the form and submit it. Upon submission you may be redirected to a login page and then have full access to the page.
This simple but common user interaction is made possible by javascript running under the hood. We can categorize the whole process using three major Pillars.
I — DOM Manipulation
Document Object Model is a standard object model and programming interface for HTML. It defines HTML elements as objects, The properties of all HTML elements, methods to access all HTML elements and events for all HTML elements. It is a standard for how to get, change, add, or delete HTML elements.
let’s start with the Sign Up button, inorder to add interactivity and add some logic, we have to first locate the button (right DOM Element) from the DOM tree using CSS Selector and DOM methods (use dev tools to easily locate the DOM elements).
The following are some HTML DOM Methods that enable us to find HTML elements:-
So to grab the sign up button, we use document.querySelector() method using the id CSS selector.
II — Event Listeners
Once we got the DOM element, we need to ask ourselves the kind of user event the element is listening to. Among many; is it a Click, Submit, Hover, Keypress etc….event. HTML DOM has got an Event Listener Function, called addEventListener() that will take two arguments, the event and a call back function that will always fire the event, when a user in our case clicks a button. So we add a click event listener to the selected button.
This will display the sign up form. On the form we have to add Submit Event listener, to enable the user submits his information. When handling submit event listeners, we have to always remember to prevent the default behaviour of the form( e.preventDefault() ).
But what happens when the user submits the form? Where does his information go, and how do the page knows who the user is, when the user revisits the page?
III — Server Communication/Using Fetch
We can answer the above question using a client server communication. The browser(client) will send an HTTP request to the server, in our case a POST request; by incorporating the user data from the form. Once the server saves/creates the record, it will send a response back to the client, so that he can access the page and do other activities.
JavaScript uses Fetch API for accessing and manipulating parts of the HTTP pipeline, such as requests and responses.
What is happening below is, upon the form submit, we are going to create a new object (newUser) that was retrieved from each form inputs. Then we will send a fetch POST request to our backend users table. For the new record to be created, we need to check if user routes as well as controller are ready to handle the create action.
If the user data is saved successfully on users table, the server is going to send a Response to the browser. The user is now will be able to see a message or redirected to another page.
The following resources will be useful. Manipulating DOM, DOM Event Listener, MDN-Fetch Api
📝 Save this story in Journal.
