one. Miscategorized
1. Syntax error
Also known as parsing errors, occur when compiling in traditional programming languages, and occur in JavaScript when interpreting. These errors are directly caused by unexpected characters in the code, and then they cannot be directly compiled/interpreted. eg, a line of code lacks the closing bracket, resulting in a syntax error. When a syntax error occurs, the code cannot be executed. In JavaScript, only code in the same thread will be affected by syntax errors. Code in other threads and in other externally referenced files can continue to execute if it does not depend on code containing the error.
2. Runtime error
Also known as exception (exception, after compile/interpreter). At this point, the problem is not in the syntax of the code, but in some cases an operation attempted to complete is illegal. eg.
window.openMyFile();
Because the openMyFile() method does not exist, the browser will return an exception. Exceptions only affect the thread that occurs, and other JavaScript threads can continue to execute normally.
two. Handling errors
1. OneError event handling function
It is the first mechanism to assist JavaScript in handling errors. When an exception occurs on the page, the error event is fired on the window object. Eg.
The code copy is as follows:
<html>
<head>
<title>onerror example</title>
<script type="text/javascript">
window.onerror = function() {
alert("An error occurred!");
}
</script>
</head>
<body onload="function1()">
</body>
</html>
In the above code, trying to call a non-existent function while the page is loaded, an exception will be raised. An error message that "Error occurred" pops up. However, the browser's error message is also displayed. How to hide it in the browser? Just return a true method.
The code copy is as follows:
<script type="text/javascript">
window.onerror = function() {
alert("An error occurred!");
return true;
}
</script>
1) Remove the error message
The onerror handler provides three kinds of information to determine the exact nature of the error:
i) Error message - For a given error, the browser will display the same information;
ii) URL - In which file an error occurred;
Line number – The line number where the error occurred in the given URL.
See the following example for access methods:
The code copy is as follows:
<script type="text/javascript">
window.onerror = function(sMessage, sUrl, sLine) {
alert("An error occurred!/n" + sMessage + "/nURL:" + sUrl + "/nLine Number:" + sLine);
return true;
}
</script>
2) Image loading error
The window object is not the only object that supports the onerror event handling function, it also provides support for image objects. When an image cannot be loaded successfully due to the non-existence of the file, the error event is triggered on the image. Let's look at an example:
<img src=”amigo.jpg” oneerror=”alert('An error occurred while loading the image')"/>
The above example directly allocates the onerror event handler function in HTML. Of course, you can also allocate event processing functions through scripts. Before setting the src characteristics of the image, you must wait for the page to be fully loaded. The code is as follows:
The code copy is as follows:
<html>
<head>
<title>Image Error Test</title>
<script type="text/javascript">
function handleLoad() {
document.images[0].onerror = function() {
alert("An error occurred while loading the picture!");
};
document.images[0].src = "amigo.jpg";
}
</script>
</head>
<body onload="handleLoad()">
<img/>
<body>
</html>
Note: Unlike the onerror event handler function of the window object, the onerror event of the image has any additional information parameters.
3) Handle syntax errors
onerror can also handle syntax errors. But one thing must be noted that the event handler must be the first code that appears on the page, because if a syntax error occurs before setting the event handler, the event handler will be useless.
Note: Syntax errors will completely stop the code execution.
Note: The main problem with using onerror event handler is that it is part of the BOM, so no standard can control its behavior. Therefore, different browsers use this event to handle errors significantly. eg. When an error event occurs in IE, normal code will continue to be executed, all variables and data are retained, and can be accessed through the onerror event handler function. In Mozilla, normal code execution will end, and all variables and data before the error occurs are destroyed.
2. try…catch statement
ECMPScript third edition introduces the try…catch statement. Eg.
The code copy is as follows:
try {
window.openFile1();
alert("Successfully called openFile1 method");
} catch (exception) {
alert("Exception occurred!");
} finally {
alert("try..catch test ends!");
}
Unlike Java, the ECMAScript standard can only have one catch statement in the try... catch statement, because JavaScript is a weak type language and cannot specify the specific type of exception in the catch clause. Regardless of the type of error, it is handled by the same catch statement. However, Mozilla has expanded it and can add multiple catch statements, which is not recommended to use this way.
Finally used to include code to be executed regardless of whether an exception occurs, which is useful for closing open links and freeing resources.
1) Nested try…catch statement
Used to deal with error problems in catch clauses, let's take a look at an example, the code is as follows:
The code copy is as follows:
try {
eval("a ++ b");
} catch(oException) {
alert("An error occurred!");
try {
var aError = new Array(100000000000000000000000000000000000000000000000000000000000000000000);
} catch(exception) {
alert("An error occurred in the catch clause!");
}
} finally{
alert("Completed")
}
2) Error object
When an error occurs, JavaScript has an Error base class for throwing. It has two characteristics:
i) name - a string representing the wrong type
ii) message - actual error message.
The name of the Error object corresponds to its class and can be one of the following values:
EvalError: The error occurs in the eval() function;
RangeError: The numeric value exceeds the range that JavaScript can represent;
ReferenceError: Illegal reference was used;
SyntaxError: A syntax error occurred in the eval() function call, and other increasingly errors were reported by the browser and could not be processed through try...catch;
TypeError: The type of the variable is not what is expected to be required;
URIError: An error occurred in the encodeURI or decodeURI function.
3) Determine the error type
The following two methods can be used to determine the error type. The first method is based on the name attribute of the exception, as follows:
The code copy is as follows:
try {
eval("a ++ b");
} catch(oException) {
if (oException.name = "SyntaxError") {
alert("SyntaxError occurred!");
} else {
alert("Other error occurred!");
}
}
The instanceof operator is used in the second, and the code is as follows:
The code copy is as follows:
try {
eval("a ++ b");
} catch(oException) {
if (oException instance of SyntaxError) {
alert("SyntaxError occurred!");
} else {
alert("Other error occurred!");
}
}
4) Throw exception throw statement
In the third edition of ECMAScript, it is used to throw exceptions purposefully. The error object thrown can be a string, a number, a boolean value or an actual object, or an Error object (its constructor has only one function, that is, an error message). eg1. throw new Error("Error occurred!");
eg2.
The code copy is as follows:
function addTwoNumber(a, b) {
if (arguments.length < 2) {
throw new Error("Two numbers need to be passed in!");
}
}
try {
result = addTwoNumber(90);
} catch(oException) {
if (oException instance of SyntaxError) {
alert("SyntaxError:" + oException.message);
} else if (oException instanceof Error){
alert(oException.message);
}
}
The above is all the content described in this article. I hope you can like it.