DEV Community

Cover image for 100 days of Miva: Day 15
Abdulsamod
Abdulsamod

Posted on

100 days of Miva: Day 15

It's day 15 of the 100 days of Miva coding challenge which has flown by very quickly but has helped me improve massively in my HTML, CSS and JavaScript skills.
Today, I learned two concepts in JavaScript. Displaying object properties and JavaScript Events. They are very important in adding data and also keeping webpages responsive and interactive.

Displaying Object Properties

As i discussed previously, objects are used to create data blocks containing data of different data types related to each other or a particular subject; written in a key-value pair format.
Displaying these properties have different methods in which it can be achieved. Firstly, they can be displayed as strings where the properties are concantenated using the addition operator.
Displaying as strings

They can be displayed as a loop selecting each key and value pair until the object is exhausted.
Displaying as loop

They can also be displayed in an array format using the Object.values() method.
Displaying as array

Finally, they can be displayed using the JSON.stringify() method which displays them using the JSON notation.
Displaying with JSON notation

JavaScript Events
Events are actions that occur on a webpage due to the browser or user action or input. Actions such as a button clicked, a webpage loading, page sizing and so on are known as Events. JavaScript code can be used to cause certain reactions when these actions happen.

For example, on the click of a button, JavaScript code can be used to display the time and date in real time as compared to static display with HTML and CSS.

Real time display

JavaScript code can also be used to change the content of a particular element when an action takes place on it.
Changing HTML content

Functions can also be called and executed in case of an event.
Calling Functions

The concept of JavaScript Events is crucial to making webpages responsive and interactive as they can be used to induce real time reactions to actions on the webpages.

Day 15 was hugely productive and educative and I plan on exploring more on JavaScript Events tomorrow!😊

Source codes available here:
Object display: (https://github.com/Abdul-Samod/100daysofMiva/blob/74ad5573744c15d1955e8f8777053f0492d41fe9/javascript_prac2.html)

JavaScript Events: (https://github.com/Abdul-Samod/100daysofMiva/blob/74ad5573744c15d1955e8f8777053f0492d41fe9/javascript_prac3.html)

Top comments (1)

Collapse
 
tobidelly profile image
TD!

Nice nice