DEV Community: Lakshit

Phases of Event in JavaScript

Lakshit — Sun, 10 Sep 2023 10:00:00 +0000

Introduction:
Events play a crucial role in JavaScript, allowing us to respond to user interactions and create dynamic and interactive web applications. Understanding the phases of JavaScript events and how they propagate through the DOM (Document Object Model) is essential for effective event handling. In this blog post, we will explore the different phases of JavaScript events and discuss their usefulness in event propagation.

Event Phases:

JavaScript events go through three distinct phases during propagation: capturing, target, and bubbling.

a. Capturing Phase:

In the capturing phase, the event starts from the topmost ancestor element and travels down the DOM tree to the target element. This phase allows you to capture events on parent elements before they reach the target element. To demonstrate this, consider the following example:

<div id="parent">
  <div id="child">
    <button id="button">Click me</button>
  </div>
</div>

const parent = document.getElementById('parent');
const child = document.getElementById('child');
const button = document.getElementById('button');

parent.addEventListener('click', () => console.log('Parent clicked'), true);
child.addEventListener('click', () => console.log('Child clicked'), true);
button.addEventListener('click', () => console.log('Button clicked'), true);

In this example, when you click the button, the event will first trigger the capturing phase, logging "Parent clicked," "Child clicked," and "Button clicked" in that order.

b. Target Phase:

After the capturing phase, the event reaches the target element, triggering any event listeners attached directly to it. In our previous example, if we add an event listener to the target element, it will be executed during the target phase:

button.addEventListener('click', () => console.log('Button clicked'), false);

Now, when you click the button, the event will log "Button clicked" during the target phase.

c. Bubbling Phase:

Once the target phase is complete, the event starts bubbling up the DOM tree, triggering event listeners on parent elements. This phase allows you to capture events on parent elements after they have reached the target element. To demonstrate this, consider the following example:

parent.addEventListener('click', () => console.log('Parent clicked'), false);
child.addEventListener('click', () => console.log('Child clicked'), false);
button.addEventListener('click', () => console.log('Button clicked'), false);

Now, when you click the button, the event will log "Button clicked," "Child clicked," and "Parent clicked" in that order during the bubbling phase.

Usefulness and Benefits:

Understanding the phases of JavaScript events and event propagation is crucial for effective event handling. Here are some benefits and use cases:

a. Event Delegation:

By leveraging the capturing and bubbling phases, event delegation allows you to handle events on multiple elements efficiently. Instead of attaching event listeners to individual elements, you can attach a single event listener to a parent element and utilize event propagation to handle events on child elements.

b. Preventing Event Bubbling:

In some cases, you may want to prevent an event from bubbling up the DOM tree. By calling the event.stopPropagation() method within an event listener, you can stop the event from triggering event listeners on parent elements.

c. Event Order and Execution: Understanding the event phases helps you control the order of event execution. By attaching event listeners during the capturing or bubbling phase, you can ensure that specific event handlers are executed before or after others.

d. Performance Optimization: By utilizing event delegation and capturing phase, you can reduce the number of event listeners and improve performance, especially when dealing with large or dynamically changing DOM structures.

Conclusion:

Understanding the phases of JavaScript events and event propagation is essential for effective event handling and creating dynamic web applications. By leveraging the capturing, target, and bubbling phases, you can efficiently handle events, delegate events to parent elements, control event order, and optimize performance. By mastering these concepts, you can create more interactive and responsive web experiences for your users.

Remember to experiment and practice with event handling to fully grasp the potential of event phases and event propagation. Happy coding!

HTML form to Google Sheets

Lakshit — Sun, 03 Sep 2023 16:35:00 +0000

Most of the frontend developers struggle with how to collect the data from the user and harder is to manage it. Some of us try to use third-party services offering trials to perform this task.
But we have a better way to collect the data and handle it. We all use that service in our day-to-day life. The service we are going to use is Google Sheets :)

Aren't you shocked? 😂

Now, let's begin and here is a step-by-step tutorial for it:

1. Create a Google Sheet: The first and foremost step is to create a Google Sheet. You can use this link to create a new spreadsheet. You can use any name to create the sheet and name the columns according to the details you want to collect data..
For example, if we want to collect the name, email and contact number, then we can create the columns using the fields name, email and number.

2. Create a Google Apps Script:

-> Click on extensions and open Apps Script from the dropdown.

-> Now, rename the project name to: Submit Form to Google Sheets. Make sure you are using the same name in order to avoid bugs.

-> After renaming, now delete the definition of empty function myFunction(). The IDE should be empty now.
-> Now, paste the code given below:

var sheetName = 'Sheet1'
var scriptProp = PropertiesService.getScriptProperties()

function intialSetup () {
  var activeSpreadsheet = SpreadsheetApp.getActiveSpreadsheet()
  scriptProp.setProperty('key', activeSpreadsheet.getId())
}

function doPost (e) {
  var lock = LockService.getScriptLock()
  lock.tryLock(10000)

  try {
    var doc = SpreadsheetApp.openById(scriptProp.getProperty('key'))
    var sheet = doc.getSheetByName(sheetName)

    var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0]
    var nextRow = sheet.getLastRow() + 1

    var newRow = headers.map(function(header) {
      return header === 'timestamp' ? new Date() : e.parameter[header]
    })

    sheet.getRange(nextRow, 1, 1, newRow.length).setValues([newRow])

    return ContentService
      .createTextOutput(JSON.stringify({ 'result': 'success', 'row': nextRow }))
      .setMimeType(ContentService.MimeType.JSON)
  }

  catch (e) {
    return ContentService
      .createTextOutput(JSON.stringify({ 'result': 'error', 'error': e }))
      .setMimeType(ContentService.MimeType.JSON)
  }

  finally {
    lock.releaseLock()
  }
}

3. Run the Setup: After adding the code in the above step, now we have to run the setup and give some authorizations.
-> For this, we have to Click on the Run after selecting the initialSetup.

-> It'll give us a popup to ask for Review permissions:

-> It might show you some warning like this:

-> But we have to click on advanced and allow it to go further and it'll ask for few permissions, we have to click on allow.

-> If we are getting this type of result on screen, then it means that the setup is successful:

After making all the , we need to run the doPost() on the submission of the form and for that thing, we have to add a trigger.

4. Add a trigger: In order to add a trigger, we need to follow these steps:
-> Go to triggers, on the left sidebar and click on it and then, click on add a new trigger.
-> In the Choose which function to run, select doPost and in Select event source, select From spreadsheet and in Select event type, select On form submit.

-> Click on save and then, it may ask you for permission review again.

5. Deploy the project: After making all the required configuration, we need to deploy our project.
-> Select Web App in Select type:

-> Then, in the field of access, select Anyone.

-> Now, you'll recieve a link similar to this, copy it and store it at secure place:

6. HTML form: Open the index.html and paste the code for the form and form handling:

      <form name="submit-to-google-sheet">
      <input name="name" type="text" placeholder="Name" required>
      <input name="email" type="email" placeholder="Email" required>
      <input name="number" type="number" placeholder="Number" required>
      <button type="submit">Send</button>
      </form>

      <script>
      const scriptURL = '<SCRIPT URL>'
      const form = document.forms['submit-to-google-sheet']

      form.addEventListener('submit', e => {
      e.preventDefault()
      fetch(scriptURL, { method: 'POST', body: new FormData(form)})
      .then(response => console.log('Success!', response))
      .catch(error => console.error('Error!', error.message))
      })
      </script>

Now, you can test your form and check the output in the Google sheets.

Mastering JavaScript DOM Manipulation: innerText vs innerHTML vs textContent

Lakshit — Sat, 26 Aug 2023 18:45:00 +0000

Most of us use innerText, innerHTML, and textContent daily, but we don't know the actual difference between them. These three methods are often used for manipulating text content within the HTML elements. In this blog, we'll be exploring the differences between them.

Let us try to understand it using an example:


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>innerText vs innerHTML vs textContent</title>
</head>

<body>

    <div>Hello World!</div>

    <div id="root">
      //Content to be added by methods.
    </div>
    <script>

    </script>
</body>

</html>

Initially, our code is giving this as output:

Now, let us one by one use these methods and explore the differences between the three - innerText, innerHTML, and textContent.

Let us take innerHTML first:

innerHTML returns everything inside it including all HTML elements, child tags, and text content and it is used to add HTML to the element.


        let root = document.getElementById("root")
        root.innerHTML = `
        <p>The content is added using innerHTML method.</p>`

        console.log(root.innerHTML);

innerHTML method gives the following output:

Now, let's take the innerText:

innerText returns the text that is visible on the screen means it excludes hidden text and the tags. It shows the text as it is visible on the screen. It excludes the hidden text and the HTML tags. It is used to add the text to an element.


        let root = document.getElementById("root")
        root.innerText = `The content is added using innerText and
        it takes text as we want to display it on screen.`
        console.log(root.innerText);

innerText method gives the following output:

Now, it's turn for textContent:

textContent returns complete text including the hidden text and hidden HTML tags. It shows exactly as the code is laid out in the source code.

        let root = document.getElementById("root")
        root.textContent = `The content is added using textContent 
        and it gives the output as a text only no matter 
        if we are adding multiple blank spaces or 
        adding content in next line.`
        console.log(text.textContent);

textContent method gives the following output:

Deciding among innerText, innerHTML, and textContent relies on your particular use scenario. Every property exhibits unique behaviors concerning HTML interpretation, safety, and perceptibility. Grasping these distinctions empowers you to adeptly manage text content within the DOM, ensuring code security and user experience preservation.

Mastering JavaScript DOM Manipulation: append() vs appendChild()

Lakshit — Sat, 19 Aug 2023 16:14:08 +0000

Most of us face issues while understanding the concept of append and appendChild. Some of us also think that append adds the element to the adjacent while appendChild adds the element to child. First of all, I would like to burst this myth. Both append as well as appendChild, adds the elements as a child only.

Then, what's the difference between them Or is there any difference between them?

Yes, there are a few differences. Let us take a look over them one by one:

-> append method takes Node Objects as well as DOM Strings as input while appendChild supports Node Objects only.

<body>
    <div id="container">
        <div>
            <h1>Fruits list:</h1><!--Let's create a create a list for fruits list-->
        </div>
    </div>
    <script>
        let con = document.getElementById("container"); //Accessing the container to append the list.
        let list = document.createElement("ul") //Creating the list
        list.innerHTML = `
            <li>
                <p>Apple</p>
            </li>
            <li>
                <p>Banana</p>
            </li>
            <li>
                <p>Litchi</p>
            </li>`
        con.append(list) //Using append method works fine
    </script>
</body>

Using append method

<body>
    <div id="container">
        <div>
            <h1>Fruits list:</h1><!--Let's create a create a list for fruits list-->
        </div>
    </div>
    <script>
        let con = document.getElementById("container"); //Accessing the container to append the list.
        let list = document.createElement("ul") //Creating the list
        list.innerHTML = `
            <li>
                <p>Apple</p>
            </li>
            <li>
                <p>Banana</p>
            </li>
            <li>
                <p>Litchi</p>
            </li>`
        con.appendChild(list) //Using appendChild method works fine
    </script>
</body>

Using appendChild method

If we run both the codes, they are gonna give us same output.

But as soon as we try to add some string using both the methods, append works fine but appendChild shows error in console.

<body>
    <div id="container">
        <div>
            <h1>Fruits list:</h1><!--Let's create a create a list for fruits list-->
        </div>
    </div>
    <script>
        let con = document.getElementById("container"); //Accessing the container to append the name.
        con.append("Apple") //Works fine
    </script>
</body>

append method gives the following output:

<body>
    <div id="container">
        <div>
            <h1>Fruits list:</h1><!--Let's create a create a list for fruits list-->
        </div>
    </div>
    <script>
        let con = document.getElementById("container"); //Accessing the container to append the name.
        con.appendChild("Apple") //Throws error
    </script>
</body>

appendChild method give the following output:

Along with that it gives error in console.

-> append method can take more than one arguments while appendChild supports only one.

let p = document.createElement("p");
p.innerHTML = "Cat"
con.append(list, p) //Using append method works fine

append shows the following result:

let p = document.createElement("p");
p.innerHTML = "Cat"
con.appendChild(list, p) //Using appendChild method appends the first element and ignores the rest.

appendChild give the following result:

-> appendChild gives a return value but append doesn't.

console.log(con.append(list))

append gives us result as undefined.

console.log(con.appendChild(list))

appendChild gives us result as DOM element.

In modern development, "append" is more oftenly used due to it's flexibility and it's ability to append multiple elements at once. Although, "appendChild" is still useful when we are targetting to old browsers primarily.