javascript技术教程蔡敏_程序员都必掌握的前端教程之JavaScript基础教程（下）

阅读本文约需要10分钟，您可以先关注我们，避免下次无法找到。

JavaScript基础教程(上)成哥为大家介绍了JavaScript的基础知识、数据类型及常用方法，本编文章主要介绍JavaScript的的控制语句、函数编程及异常处理等相关知识，下面成哥就为大家一一介绍这些内容。

01 JavaScript控制结构

(1)if-else语句

如下所示，使用if-else语句根据不同的三个年龄条件在页面上打印不同的输出

1. html>  2.   3.   4.       5.     JavaScript基础教程  6.   7.   8.       19.   20.   

(2)Switch-case-default语句

1. html>  2.   3.   4.       5.     JavaScript基础教程  6.   7.   8.       25.   26.   

(3)For循环语句

1. html>  2.   3.   4.       5.     JavaScript基础教程  6.   7.   8.   14.   15.   

(4)While循环语句

1. html>  2.   3.   4.       5.     JavaScript基础教程  6.   7.   8.   16.   17.   

(5)do-while循环语句

do-while与while的区别是，do-while是先执行循环体再判断循环条件，而while是先判断循环条件在执行循环体。

1. html>  2.   3.   4.       5.     JavaScript基础教程  6.   7.   8.   16.   17.   

(6)for-in循环语句

for-in一般用来遍历数组或者对象，遍历数组时遍历的是数组的索引，遍历对象时是对象的key，下面我们来看看for-in语句的示例

1. html>  2.   3.   4.       5.     JavaScript基础教程  6.   7.   8.   22.   23.   

(7)Continue与Break语句

continue与break一般都是用在循环语句中，其中continue表示执行到当前不往下再执行而是从下一个循环继续执行，而break是表示退出当前循环，后面的循环语句都不执行了，具体示例如下所示：

1. html>  2.   3.   4.       5.     JavaScript基础教程  6.   7.   8.   26.   27.   

02 JavaScript异常处理

在实际开发过程中程序经常会遇见各种异常，为了解决该问题JavaScript使用try-catch来捕获异常，其语法结构如下：

1. try {  2.   // 这里写可能出现异常的代码  3. } catch (err) {  4.   // 在这里写，出现异常后的处理代码  5. } finally {  6.   //无论try中代码是否有异常抛出(甚至是try代码块中有return语句)，finally代码块中始终会被执行。  7. }  

try-catch语句有如下几点要注意：

1)语句 try 和 catch 是成对出现的，finally可以写也可以不写。

2)如果在 try 中出现了错误，try 里面出现错误的语句后面的代码都不再执行，直接跳转到 catch 中，catch 处理错误信息，finally的内容则不论有没有异常都会执行。

3)如果 try 中没有出现错误，则不会执行 catch 中的代码，执行完 try 中的代码后直接执行后面的代码。

03 JavaScript函数

JavaScript中的函数可以简要分为以下三类：

1)普通函数

普通函数的语句格式如下

1. function common(age){  2.   return age + 10;  3. }  

2)匿名函数

匿名函数也就是没有名称的函数一般当参数使用，如在定时器中调用，具体语法格式如下

1. function (args){  2.     return args + 1;  3. }  4. // 一般用于当做参数使用，例如：设置定时器 setInterval(function(){},5000)  

3)自执行函数

自执行函数是当HTML页面加载完自动执行的函数，具体示例如下

1. html>  2.   3.   4.       5.     JavaScript基础教程  6.   7.   8.   14.   15.   

04 JavaScript事件处理

JavaScript主要就是用于HTML页面的事件处理。如鼠标点击或者点击键盘某个按键触发函数调用执行，如下所示alert一般用于在浏览器页面弹出一个小窗口并插入内容。

1. html>  2.   3.   4.       5.     JavaScript基础教程  6.   7.   8.   9.    点击我  10.   11.   16.   17.   

JavaScript的函数事件处理还可以绑定其它常用的触发事件具体如下所示：

1. html>  2.   3.   4.       5.     JavaScript基础教程  6.   7.   8.     // onmouseover鼠标在这标签上时设置标签为红色  9.     // onmouseleave鼠标离开这标签时设置标签为蓝色  10.     // onmouseup鼠标没有点击时标签文字设置为'没有点击'  11.     // onmousedown鼠标点击时设置标签为'被点击'  12.     没有点击
  17.   18.   

JavaScript还有如下常用的事件，我们这边就不一一示例了

1. onLoad ：当页面加载完毕后触发，常用于body元素

2. onUnload ：当页面关闭后触发，常用于body元素

3. onBlur ：当失去焦点时触发，常用于input表单元素

4. onFocus ：当获得焦点时触发，常用于input表单元素

5. onClick ：当点击时触发，可以用于任何元素

6. onMouseOver ：当鼠标悬浮时触发

7. onMouseOut ：当鼠标离开时触发

8. onMouseDown ：当鼠标按下时触发

9. onMouseUp ：当鼠标弹起时触发

10. onMouseMove ：当鼠标移动时触发

11. onChange ：当状态改变时触发，常用于select下拉选框

12. onSelect ：当文本框中的文本选中时触发

13. onkeypress ：当键盘按下时触发(要快于onkeydown)

14. onkeydown ：当键盘按下时触发(可能捕获功能键，如上下左右)

15. onkeyup ：当键盘弹起时触发

16. onSubmit ：当表单提交时触发，常用于form表单元素

17. onReset ：当表单重置时触发，常用于form表单元素

05 总结

至此我们《JavaScript基础教程》就讲完了，如有任何问题欢迎在文章后面进行留言。最后如果喜欢本篇文章不要忘了点赞、关注与转发哦！

-END-

@IT管理局专注计算机领域技术、大学生活、学习方法、求职招聘、职业规划、职场感悟等类型的原创内容。期待与你相遇，和你一同成长。

文章推荐：

• 程序员都必掌握的前端教程之HTML基础教程(上)
• 程序员都必掌握的前端教程之CSS基础教程(上)