Javascript and its interactivity with users
For the last couple of months in my Bootcamp course, I have had been learning mostly about the work that happens behind the scenes, such as working with Ruby on Rails ( a server-side web framework) that provides default structures for working with databases. In my Module 2 project, I was in a team of 3 for my rails project and we had created a clone of Instagram( a social media app where you post pictures online) purely on rails. As you can imagine it was not the prettiest website interactive app, in a way just it was a framework of Instagram and could do a lot of things that Instagram could do but it could not replicate the dynamic interactivity with the user that Instagram has, not to forget their fancy design.
Welcome Javascript
When I first I learned about Javascript I couldn’t see the sole purpose of it
which is usual with learning something new, you can interact with
web pages and you know the inner workings but you are missing the knowledge on when to apply it until you just personally get to the nitty-gritty with that stuff and start utilizing its potential.
So what is Javascript, well it is an object-orientated markup language that is used for front-end web development and that allows the webpage to be interactive and allows you to create web apps that's is close enough to native apps that you are well aware of with your smartphones? This means that instead of displaying static pages a user can load up one page and be able to interact with it without the client being required to load up another page.
Which goes into synchronous and asynchronous code, which we will dive into next
There is a lot of great examples on the web to showcase what javascript is capable of this particular website displays important historical events on a timeline that a user can interact with all in one webpage. Yep I know its wonderful
Asynchronous vs Synchronous
Synchronous code basically is executed in a sequence, therefore code happens in an order and has to wait for the previous statement or function finish, while asynchronous allows the code to continue to run and other code within a web page doesn't have to wait to run. The modern computer wouldn’t be what it is now if it wasn’t for asynchronous code, because you can open a web browser but at the same time be able to listen to music from your local drive while also playing a game on another screen.
addDrinkButton.addEventListener("click", (e) => {addToOrder(drink);})function addToOrder(drink) {let orderItem = currentOrder.items.find(item => item.drinkId === drink.id);if(orderItem === undefined) {const newItem = {name: drink.name,drinkId: drink.id,quantity: 1};currentOrder.items.push(newItem);} else {for( var i in currentOrder.items ) {if(currentOrder.items[i].drinkId === drink.id) {currentOrder.items[i].quantity += 1};};}renderShoppingCart();};function renderShoppingCart() {const orderDiv = document.getElementById("order")orderDiv.innerText = ""currentOrder.items.forEach(item => renderSelectedItem(item))
This code was used for in our project for module 3 in our Bootcamp this is a feature in our project that will allow the user to scroll through drinks that are displayed on the webpage and add them to the cart that is also displayed on the same page, that’s a lot of code up there, but I want you to focus on this code below
addDrinkButton.addEventListener(“click”, (e) => {})
which basically handles an event such as here a click from a mouse button on a button that adds that particular drink to the cart. This is an asynchronous function as it is stored within the browser and called upon when an event has occurred and any code that is defined within the handler, will get executed which in our case is rendering the cart on the same page dynamically. This involves callbacks but we are not going to dive into that for now. This allows the user to add drinks to the cart but also scroll through the drinks while doing so. Please feel free to play around with my first project in Javascript using the link below
Why is this important
Well having javascript and CSS and HTML working in conjunction with each other accounts for a great user experience that keeps the user engaged and interested, whether it is having animation running while the user is filling in a form or music playing in the background. In a way, it is like a game that lets you do things while a lot of things happen in the background that gets executed once a user engages instead of being disrupted by waiting for the next frame to load up which of course can still happen without a doubt. The front-end is just as important as the back-end is in the end, the front-end is what the user sees first and engages with, even if the web app is for the sole purpose of a business and interactive and pleasurable experience with a web app that will go a long way. Knowing this stuff will eventually help me also not just creating web-based apps but using the same principle to make mobile apps through frameworks.
