Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
Event in Javascript
3.
Onload Event
3.1.
Features of Onload Event
3.2.
Example of Onload Event
3.2.1.
Code
3.2.2.
Output
4.
Onerror Event
4.1.
Syntax
5.
Example
5.1.
Code
5.2.
Output
6.
FAQs
6.1.
Explain the differences between Java and JavaScript.
6.2.
Which is faster, JavaScript or an ASP script?
6.3.
In JavaScript, how do timers perform?
6.4.
Does JavaScript provide automated type conversion?
6.5.
In JavaScript, what are the several sorts of pop-up boxes?
7.
Conclusion 
Last Updated: Mar 27, 2024

Resource Loading in JavaScript

Create a resume that lands you SDE interviews at MAANG
Speaker
Anubhav Sinha
SDE-2 @
12 Jun, 2024 @ 01:30 PM

Introduction

Brendan Eich introduced the JavaScript programming language in 1995. LiveScript was the first name given to JavaScript when it was developed.  

JavaScript is an interpreted computer programming language that is high-leveldynamic, and lightweight. This programming language will assist you in making your website more lively and engaging.

JavaScript is primarily utilised on websites. JavaScript implementations allow client-side scripts to interact with users and create dynamic web pages.

Resource loading is one of the critical features of Javascript. Here we will discuss resource loading in Javascript. This article mainly describes the Onload and Onerror events in Javascript. Let’s first understand what an event is.

Event in Javascript

When the user or the browser manipulates a page, the interaction between JavaScript and HTML is handled through events.

When a page loads, it is referred to as an event. When a user hits a display or view button, it triggers an event. Other events include clicking any key, exiting a window, rearranging a window, etc.

Developers can use these events to run JavaScript-coded actions, such as closing windows, displaying messages to users, validating data, and almost any other response form.

There are several events in JS, but we focus only on two of them. These two events are helpful in Resource loading.

Onload: When the document is loaded, this event is triggered.

Onerror: When an error occurs, this event is triggered.

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Onload Event

When a developer launches a specific function once the page is fully loaded, the Javascript Onload event is used.

Another common application of JavaScript onload is to use it to verify visitors’ web browsers and alter how websites are loaded. You can also use it to see what cookies a website employs.

Most of the popular browsers support the window.onload feature. It starts the moment the resource is loaded.

Features of Onload Event

The main features of Onload events are as follows:

  • When an object is loaded, the JavaScript onload event occurs.
  • The onload attribute is most commonly used in the <body> element to run a script once a page has fully loaded (including the script files, images, CSS files, etc.).
  • The onload event should check the visitor's browser type and version and then load a specific web page version based on that information.
  • The onload event can handle the cookies of the Websites.

Example of Onload Event

Here is an example of the Onload event. We are using onload on an <img> element.

Code

<!DOCTYPE html>
<html>
<body>
<img src="https://www.pngkit.com/png/full/307-3074231_coding-ninjas-coding-ninjas-logo.png" onload="loadImage()" width="300" height="200">
<script>
function loadImage() {
  alert("Image is loaded");
}
</script>
</body>
</html>

Output


You can practice by yourself with the help of Online Javascript Compiler for better understanding.

Onerror Event

The onerror event handler was JavaScript's initial functionality for managing errors. The error event is triggered on the window object whenever a page exception occurs.

It would be best to construct a function to handle errors before using the onerror event. The onerror event handler is then used to call the method. The msg (error message), URL (the URL of the page that generated the issue), and line(the line where the error occurred) parameters are passed to the event handler.

Syntax

onerror=handleErr
function handleErr(msg,url,l)
{
//Handles the error and
return true or false
}

 

The value given by onerror controls whether the browser displays a standard error message. The browser displays the normal error message in the JavaScript console if we return false. The browser does not display the typical error message if we return true.

Example

The onerror event is utilised to catch the error in the following example:

Code

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
onerror=handleErr;
var txt="";
function handleErr(msg,url,l)
{
txt="There is an error on this page.\n\n";
txt+="Error: " + msg + "\n";
txt+="URL: " + url + "\n";
txt+="Line: " + l + "\n\n";
txt+="Click OK to continue.\n\n";
alert(txt);
return true;
}
function message()
{
addalert("Welcome Ninja!");
}
</script>
</head>
<body>
<input type="button" value="View message" onclick="message()" />
</body>
</html>

Output


Must Read Fibonacci Series in JavaScript

FAQs

Explain the differences between Java and JavaScript.

Java is an all-in-one programming environment. On the other hand, JavaScript is a coded programme that may be embedded in HTML pages. These two languages are not interdependent and were created with distinct goals. JavaScript is a client-side scripting language, whereas Java is an object-oriented programming (OOPS) or structured programming language like C++.

Which is faster, JavaScript or an ASP script?

It is quicker to use JavaScript. Because JavaScript is a client-side language, it doesn't require the webserver's help to run. In contrast, ASP is a server-side language, and it is always slower than JavaScript.

In JavaScript, how do timers perform?

Timers are used to execute a piece of code at a predetermined period or interval. This is accomplished using the functions setTimeout, setInterval, and clearInterval.

Does JavaScript provide automated type conversion?

JavaScript supports automatic type conversion. It is the most frequent type of conversion method used by JavaScript programmers.

In JavaScript, what are the several sorts of pop-up boxes?

The three pop-up boxes in Javascript are Confirm, Alert, and Prompt.

Conclusion 

In this article, we have extensively discussed resource loading in javascript. We discussed the functionalities of Onload and Onerror events in Javascript. We also discussed the features of events and their respective examples.

We hope that this blog has helped you enhance your knowledge regarding resource loading in Javascript. You can learn more about Javascript by visiting this. You can also create apps using Javascript. 

Do upvote our blog to help other ninjas grow.

Check out this problem - Smallest Distinct Window .

Head over to our practice platform Coding Ninjas Studio to practice top problems, attempt mock tests, read interview experiences, and much more!!

We wish you Good Luck! Keep coding and keep reading Ninja!!

 

Previous article
JavaScript Page Load
Next article
Async and Defer Attributes in Javascript
Live masterclass