how to run a function on page load in javascript

How to Run a Function on Page Load in JavaScriptIf you're building a modern web application, you're likely using JavaScript to add interactivity and dynamic behavior to your pages. Running a function on page load is a common task you'll encounter, as it enables you to perform specific actions as the page loads, such as initializing variables, fetching data from an API, or setting up event listeners. In this article, we'll explore how to run a function on page load in JavaScript.Defining Your FunctionBefore you can run a function on page load, you first need to define it. This involves writing the code that will perform the task you want to execute. For example, if you want to log a welcome message to the console as the page loads, you would write something like this:```function logWelcomeMessage() { console.log(\"Welcome to my page!\");}```You can define your function in an external file or in a script block in your HTML file. Just make sure that you define the function before you try to call it on page load.Using the window.onload EventIn order to run a function on page load, you can use the window.onload event. This event fires when the browser finishes loading all the assets of the web page, including images, scripts, and stylesheets. You can attach your function to this event by writing the following code:```window.onload = function() { logWelcomeMessage();};```This code will execute the logWelcomeMessage() function as soon as the window.onload event is triggered. Note that you're assigning an anonymous function to the window.onload property, which then calls your defined function.Using the jQuery $(document).ready() FunctionIf you're using jQuery in your web application, you can use the $(document).ready() function to achieve the same result as window.onload. This function is triggered as soon as the DOM is fully loaded, which usually happens before all the external assets are loaded. Here's an example on how to use it:```$(document).ready(function() { logWelcomeMessage();});```Here, we're passing an anonymous function to $(document).ready(), which calls our defined function. Note that you need to have jQuery included on your page for this to work.Using the ES6 window.addEventListener() MethodIf you're using modern JavaScript, you can use the window.addEventListener() method to attach a function to the load event. This method provides more flexibility than the previous methods, as it allows you to attach multiple functions to the same event. Here's an example:```window.addEventListener(\"load\", function() { logWelcomeMessage();});```This code will execute the logWelcomeMessage() function when the load event is triggered. You can add as many functions to the load event as you want by calling the addEventListener() method multiple times.ConclusionRunning a function on page load is a useful technique that enables you to perform specific actions as your page loads. Whether you're using the window.onload event, the jQuery $(document).ready() function, or the ES6 window.addEventListener() method, you now have multiple ways to attach your functions to the load event. Remember to define your function before you try to call it, and test your code thoroughly to make sure it works as expected. Happy coding!"