古修蟑 发表于 2025-10-30 23:55:03

前端三剑客——javascript流程控制与异常处理

    大纲 :
    1.判断语句/分支语句:
      if  else if  else
      switch case
    2.循环语句/遍历语句
      while
      for循环/for遍历
    3.补充：forEach(数组的内置方法）
    4.异常处理和主动抛出异常
    5.时间相关
 
判断语句/分支语句
  1.if  else 和  if   else if else语句 
  2.switch  case语句
 
  判断语句：if  else   和   if   else if else   
//if语句
/*
格式:if(条件){
<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body> 语句;
}else if(条件){
<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body> 语句;
}else{
<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body> 语句;
}
*/<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>输入年龄进行范围判断 <body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>  判断语句：switch  case  
//switch语句 /* 意思:根据表达式的值匹配不同的case分支并执行相应的代码 格式:switch(表达式的值){<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>case 比较的值:<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body> 执行的语句;<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body> break;<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>···<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>default:<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body> 执行的语句;<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>}*/<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>根据今天周几进行更换背景颜色 //switch语句 /* 意思:根据表达式的值匹配不同的case分支并执行相应的代码 格式:switch(表达式的值){<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>case 比较的值:<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body> 执行的语句;<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body> break;<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>···<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>default:<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body> 执行的语句;<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>}*/ //根据今天周几进行更换背景颜色 var date = new Date(); var weekday = date.getDay();<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>//.getDay()获取今天是周几 switch (weekday) {<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>case 0:<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>console.log("7");<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>break;<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>case 1:<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>console.log("1");<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>break;<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>case 2:<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>console.log("2");<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>break;<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>case 3:<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>console.log("3");<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>break;<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>case 4:<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>console.log("4");<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>break;<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>case 5:<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>console.log("5");<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>break;<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>default:<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>console.log("6"); } colorselect = ["red", "green", "yellow", "blue", "purple", "pink"]; document.body.style.backgroundColor = colorselect; 
 循环语句/遍历语句
  1.while循环
  2.for循环
 
  循环语句：while
//while语句 /* 格式: while(条件）{<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>语句; }*/<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>//示例一:
var liList = ["guohan","gh","gg","hh"];
var num = 0;
while (num<liList.length){
    console.log(liList);
    /*
    console.log(liList);
    num++;
   */
}
//示例二:
var number = 1;
while(number<=10){
    console.log(number++);
} 
 异常处理和主动抛出异常
//异常处理 1.抛出内置异常 格式: try{<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>代码; }catch(e){<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>代码;<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>//如:console.log(`异常类型:${e.name},异常原因:${e.message}`); }2.主动抛出自定义异常 //自定义异常用函数定义 function 自定义异常函数名(message){<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>this.name = "(自定义的错误类型)";<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>this.message = message || ”默认信息错误";<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>//后面是防止 throw时忘记传入错误信息参数 } try {<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>// 可能抛出异常的代码（包含 throw）<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>if (条件不满足) {<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>throw 自定义异常函数名(message); // 主动抛出异常<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>}<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>// 正常逻辑（如果没抛异常，会执行这里） } catch (error) {<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>// 捕获到异常后执行的处理逻辑<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>console.error("捕获到异常：", error.message); } finally {<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>// 可选：无论是否抛出异常，都会执行的代码（如清理操作）<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>console.log("操作结束"); }*/ 
抛出异常 //抛出内置异常 try{<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>console.log(num); }catch(e){<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>console.log(e.name,e.message);<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>//e.name:异常类型<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>e.message:异常原因 }finally{<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>console.log("操作完毕") }<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>//主动抛出自定义异常<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body> throw try {<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>console.log(num); } catch (e) {<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>console.log(`异常类型=${e.name},异常原因=${e.message}`);<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>//异常类型=ReferenceError,异常原因=num is not defined }//主动抛出自定义异常<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>throw function UserError(message) {<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>this.name = "userException";<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>this.message = message || "默认错误信息"; }Person = {"name": "guohan", "age": 17}; try{<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>if (Person.age < 18){<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body><body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>throw new UserError("未成年禁止进入");<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>}<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>console.log("可以进入"); }catch(e){<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>console.log(e.name,e.message); }finally{<body>
<input type="text" name="age"><input type="button" id="btn" value="提交">

</body>console.log("操作完毕"); }                     
 
 与python区别

 
 时间相关


 
 
 

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

谅潭好 发表于 2025-11-23 19:33:28

感谢发布原创作品，程序园因你更精彩

厥轧匠 发表于 2025-12-12 03:18:27

热心回复！

凌彦慧 发表于 2025-12-22 00:37:09

感谢分享，下载保存了，貌似很强大

均浇 发表于 2025-12-24 12:11:37

这个有用。

锄淫鲷 发表于 2026-1-2 08:34:23

东西不错很实用谢谢分享

玛凶 发表于 2026-1-13 19:27:39

很好很强大我过来先占个楼 待编辑

羊舌正清 发表于 2026-1-17 23:19:53

感谢发布原创作品，程序园因你更精彩

乳杂丫 发表于 2026-1-18 04:03:57

鼓励转贴优秀软件安全工具和文档！

蔡如风 发表于 2026-1-19 11:44:51

谢谢分享，试用一下

艺轫 发表于 2026-1-19 13:54:30

感谢分享，下载保存了，貌似很强大

禄磊 发表于 2026-1-19 14:18:51

过来提前占个楼

吮槌圯 发表于 2026-1-21 03:25:16

这个好，看起来很实用

愿隙 发表于 2026-1-23 09:38:54

分享、互助 让互联网精神温暖你我

顶豌 发表于 2026-1-24 11:32:04

感谢发布原创作品，程序园因你更精彩

煞赶峙 发表于 2026-2-1 02:45:56

感谢分享，学习下。

琶轮 发表于 2026-2-5 13:13:07

喜欢鼓捣这些软件，现在用得少，谢谢分享！

姘轻拎 发表于 2026-2-8 08:04:33

感谢，下载保存了

赖珊 发表于 2026-2-8 09:00:31

这个好，看起来很实用

米嘉怡 发表于 2026-2-9 15:18:41

前排留名，哈哈哈
页: [1] 2
查看完整版本: 前端三剑客——javascript流程控制与异常处理