JS入门到精通 第8章 程序调试与错误处理
一、练习
1. 练习1
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>onerror事件</title>
<script type="text/javascript">
window.onerror=function(ms,Url,Line){
alert("为什么多次弹出？\n"+Line+"\n"+ms+"\n"+Url+"\n");
return true;
}
function ImgLoad(){
document.images[0].onerror=function(){
alert("您调用的图像并不存在\n");
};
document.images[0].src="test.gif";
}
</script>
</head>
<body onload="ImgLoad()">
<img />
<script type="text/javascript">
onHave(); //调用不存在的onHave()函数
</script>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/8_1/
（3）Tips
整半天，都啥玩意。
2. 练习2
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>try catch语句</title>
</head>
<body>
<script type="text/javascript">
try{
document.forms.input.length;
}catch(exception){
alert("运行时有异常发生");
}finally{
alert("结束try...catch...finally语句");
}
</script>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/8_2/
（3）Tips
比较明确。
3. 练习3
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>cacth里面又有try</title>
</head>
<body>
<script type="text/javascript">
try{
document.forms.input.length; //调用页面表单中文本框的长度
}catch(exception){
alert("try区域运行时有异常发生");
try{
document.forms.input.length
}catch(exception2){
alert("catch区域运行时有异常发生");
}
}finally{
alert("结束try...catch...finally语句"); //最终程序调用执行的语句
}
</script>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/8_3/
（3）Tips
这是为嘛。
4. 练习4
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
try{
document.forms.input.length;
}catch(exception){
alert("错误类型字符串为："+exception.name+"\n实际的错误消息为："+exception.message);
}finally{
alert("结束try...catch...finally语句");
}
</script>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/8_4/
（3）Tips
显示参数。
5. 练习5
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
try{
var num=1/0;
if(num=="Infinity"){
throw new Error("除数不可以为0");
}
}catch(exception){
alert(exception.message);
}
</script>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/8_5/
（3）Tips
infinity首字母得大写！
6. 练习6
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>抛出自定义异常</title>
</head>
<body>
<script type="text/javascript">
function test(num1,num2){
try{
if(arguments.length<2){
throw new Error("参数个数不够");
}
if(num1/num2=="Infinity"){
throw new Error("除数不可以为0");
}
}catch(exception){
alert(exception.message);
}
}
test(1);
test(1,0);
</script>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/8_6/
（3）Tips
跟上一个差不多。
二、编程训练
1. 训练1
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var str = "我喜欢JavaScript";
try{
//var err=str.substr(3,6);
var err = str.subStr(3,6);
document.write(err);
}catch(e){
alert("方法名错误");
//alert("错误类型字符串为："+exception.name+"\n实际的错误消息为："+exception.message);
}
</script>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/8_7/
（3）Tips
e和exception要搭配使用。
1. 训练1
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var str = "我喜欢JavaScript";
try{
var err=str.subStr(3,6);
document.write(err);
}catch(e){
//alert("方法名错误");
alert("错误类型字符串为："+e.name+"\n实际的错误消息为："+e.message);
}
</script>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/8_8/
（3）Tips
这不就用上了。
三、实践与练习
1. 实践1
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var arr=new Array("A","B","C","D","E");
function getError(msg){
var error=new Error(msg);
return error;
}
function getValue(form){
try{
var val=form.number.value;
if(val == "") {
throw getError("输入不能为空");
}
if(isNaN(val)){
throw getError("输入的不是一个数字");//抛出异常
}
if(val < 1 || val > 5){
throw getError("输入1~5之间的数字");//抛出异常
}
form.output.value = arr[val-1];
}catch(e){
alert(e.message);//弹出错误提示
form.output.value = "";//清空文本框
form.number.select();//选择输入的值
}
}
</script>
</head>
<body>
<form>
输入1~5之间的数字：
<input type="text" name="number">
<input type="button" value="查找" onclick="getValue(this.form)">
<input type="text" name="output">
</form>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/8_9/
（3）Tips
所以catch在什么情况下执行。
2. 实践2
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body,td,th {font-size: 12px;}
.red{color: red;}
.green{color: green;}
</style>
<script type="text/javascript">
function getError(msg){//创建自定义函数
var error = new Error(msg);//创建Error对象
return error;//返回创建的对象
}
function checkinput(){//创建自定义函数
var user=form.user.value;//获取用户名文本框的值
var checkuser=/^[a-zA-Z]\w{4,15}$/; //定义正则表达式
try{
if(user == ""){
throw getError("用户名不能为空");
}
if(!checkuser.test(user)){//用正则表达式进行判断
throw getError("用户名不符合要求");
}
}catch(e){
alert(e.message);//弹出提示对话框
}
var pwd=form.pwd.value;//获取密码文本框的值
var checkpwd=/^[a-zA-Z0-9]{6,12}$/; //定义正则表达式
try{
if(pwd == ""){
throw getError("密码不能为空");
}
if(!checkuser.test(pwd)){//用正则表达式进行判断
throw getError("密码不符合要求");
}
}catch(e){
alert(e.message);//弹出提示对话框
}
}
</script>
</head>
<body>
<form name="form" method="post" action="#">
用户名：<input type="text" name="user" id="user">
<span id="userbox">*必须是以字母开头，可包含字母、数字或下划线，长度5-16个字节</span><br>
密 码：<input type="password" name="pwd" id="pwd">
<span id="pwdbox">*可包含字母、数字，长度6-12个字节</span><br>
<input type="button" name="but" value="测试" onclick="checkinput()">
</form>
</body>
</html>
（2）运行页面
https://www.xinyizhishu.top/jsC/sc/8_10/
（3）Tips
没求意思。