1. IT分享知识网首页
  2. 开发语言
  3. java

程序员都必掌握的前端教程之JavaScript基础教程（下）

老牧童 • • java, JavaScript • 阅读 48

程序员都必掌握的前端教程之JavaScript基础教程（下）阅读本文约需要10分钟，您可以先关注我们，避免下次无法找到。JavaScript基础教程（上）成哥为大家介绍了JavaScript的基础知识、数

大家好，欢迎来到IT知识分享网。

程序员都必掌握的前端教程之JavaScript基础教程（下）

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

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

01 JavaScript控制结构

（1）if-else语句

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

1. <!DOCTYPE html>  
2. <html lang="en">  
3. <head>  
4.     <meta charset="UTF-8">  
5.     <title>JavaScript基础教程</title>  
6. </head>  
7. <body>  
8.     <script type="text/javascript">  
9.         // 通过if-else语句判断年龄应该去什么教育  
10.         let age = 10;  
11.         if (age > 3 && age < 6) {  
12.             document.write("Age : " + age + "<b>应该上学前教育</b>");  
13.         } else if (age >= 6 && age < 18) {  
14.             document.write("Age : " + age + "<b>应该上义务教育</b>");  
15.         } else {  
16.             document.write("Age : " + age + "<b>应该上高等教育</b>");  
17.         }  
18.     </script>  
19. </body>  
20. </html>  
程序员都必掌握的前端教程之JavaScript基础教程（下）

（2）Switch-case-default语句

1. <!DOCTYPE html>  
2. <html lang="en">  
3. <head>  
4.     <meta charset="UTF-8">  
5.     <title>JavaScript基础教程</title>  
6. </head>  
7. <body>  
8.     <script type="text/javascript">  
9.         // 通过switch-case语句控制输出，这边注意每个case后面要接break不然程序不会退出会自动执行下面语句  
10.         let age = 35;  
11.         switch(age){  
12.             case 10:  
13.                 document.write('未成年');  
14.                 break;  
15.             case 18:  
16.                 document.write('成年');  
17.                 break;  
18.             case 35:  
19.                 document.write('淘汰边缘的程序员');  
20.                 break;  
21.             default:  
22.                 document.write('不知道什么人');  
23.         }  
24.     </script>  
25. </body>  
26. </html>  
程序员都必掌握的前端教程之JavaScript基础教程（下）

（3）For循环语句

1. <!DOCTYPE html>  
2. <html lang="en">  
3. <head>  
4.     <meta charset="UTF-8">  
5.     <title>JavaScript基础教程</title>  
6. </head>  
7. <body>  
8. <script type="text/javascript">  
9.     // 通过for循环实现数字倒序输出  
10.     for (var i = 10; i >= 0; i--) {  
11.         document.write(i + " ");  
12.     }  
13. </script>  
14. </body>  
15. </html>  
程序员都必掌握的前端教程之JavaScript基础教程（下）

（4）While循环语句

1. <!DOCTYPE html>  
2. <html lang="en">  
3. <head>  
4.     <meta charset="UTF-8">  
5.     <title>JavaScript基础教程</title>  
6. </head>  
7. <body>  
8. <script type="text/javascript">  
9.     // 通过while循环实现数字正序输出  
10.     x = 0;  
11.     while (x < 10) {  
12.         document.write(x + " ");  
13.         x++;  
14.     }  
15. </script>  
16. </body>  
17. </html>  
程序员都必掌握的前端教程之JavaScript基础教程（下）

（5）do-while循环语句

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

1. <!DOCTYPE html>  
2. <html lang="en">  
3. <head>  
4.     <meta charset="UTF-8">  
5.     <title>JavaScript基础教程</title>  
6. </head>  
7. <body>  
8. <script type="text/javascript">  
9.     // 通过do while循环实现数字正序输出  
10.     x = 0;  
11.     do {  
12.         document.write(x + " ");  
13.         x++;  
14.     } while (x < 10);  
15. </script>  
16. </body>  
17. </html>  
程序员都必掌握的前端教程之JavaScript基础教程（下）

（6）for-in循环语句

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

1. <!DOCTYPE html>  
2. <html lang="en">  
3. <head>  
4.     <meta charset="UTF-8">  
5.     <title>JavaScript基础教程</title>  
6. </head>  
7. <body>  
8. <script type="text/javascript">  
9.     // 遍历数组  
10.     let arr = [10, 12, 31];  
11.     for (let a in arr){  
12.         document.write(arr[a] + " ");  
13.     }  
14.     document.write("<br>");  
15.   
16.     // 遍历对象  
17.     let obj = {a: 1, b: 2, c: 3};  
18.     for (let key in obj){  
19.         document.write("key为: ", key, "值为: ", obj[key], "; ");  
20.     }  
21. </script>  
22. </body>  
23. </html>  
程序员都必掌握的前端教程之JavaScript基础教程（下）

（7）Continue与Break语句

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

1. <!DOCTYPE html>  
2. <html lang="en">  
3. <head>  
4.     <meta charset="UTF-8">  
5.     <title>JavaScript基础教程</title>  
6. </head>  
7. <body>  
8. <script type="text/javascript">  
9.     // continue示例这边输出除了3都打印输出  
10.     for (let i=5; i>=0; i--){  
11.         if (i===3){  
12.             continue;  
13.         }  
14.         document.write(i + " ");  
15.         }  
16.         document.write("<br>");  
17.   
18.     // break示例，这边当循环到3时退出，所以3之前数字（包含3）都不打印  
19.     for (let i=5; i>=0; i--){  
20.         if (i===3){  
21.             break;  
22.         }  
23.         document.write(i + " ");  
24.     }  
25. </script>  
26. </body>  
27. </html>  
程序员都必掌握的前端教程之JavaScript基础教程（下）

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. <!DOCTYPE html>  
2. <html lang="en">  
3. <head>  
4.     <meta charset="UTF-8">  
5.     <title>JavaScript基础教程</title>  
6. </head>  
7. <body>  
8. <script type="text/javascript">  
9.     // 自执行函数在HTML加载完自动把'成哥的javascript教程'作为变量传给函数然后执行  
10.     (function(arg){  
11.         document.write(arg);  
12.     })('成哥的javascript教程')  
13. </script>  
14. </body>  
15. </html>  
程序员都必掌握的前端教程之JavaScript基础教程（下）

04 JavaScript事件处理

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

1. <!DOCTYPE html>  
2. <html lang="en">  
3. <head>  
4.     <meta charset="UTF-8">  
5.     <title>JavaScript基础教程</title>  
6. </head>  
7. <body>  
8.   
9.    <button onclick="alertMessage('alert使用展示')">点击我</button>  
10.   
11. <script type="text/javascript">  
12.    function alertMessage(message){  
13.      alert(message)  
14.    }  
15. </script>  
16. </body>  
17. </html>  
程序员都必掌握的前端教程之JavaScript基础教程（下）

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

1. <!DOCTYPE html>  
2. <html lang="en">  
3. <head>  
4.     <meta charset="UTF-8">  
5.     <title>JavaScript基础教程</title>  
6. </head>  
7. <body>  
8.     // onmouseover鼠标在这标签上时设置标签为红色  
9.     // onmouseleave鼠标离开这标签时设置标签为蓝色  
10.     // onmouseup鼠标没有点击时标签文字设置为'没有点击'  
11.     // onmousedown鼠标点击时设置标签为'被点击'  
12.     <a href="JavaScript:void(0)"  
13.        onmouseover="this.style.color='red'"  
14.        onmouseleave="this.style.color='blue'"  
15.        onmouseup="this.text='没有点击'"  
16.        onmousedown="this.text='被点击'">没有点击</a><br>  
17. </body>  
18. </html>  
程序员都必掌握的前端教程之JavaScript基础教程（下）

程序员都必掌握的前端教程之JavaScript基础教程（下）

程序员都必掌握的前端教程之JavaScript基础教程（下）

程序员都必掌握的前端教程之JavaScript基础教程（下）

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基础教程（上）
程序员都必掌握的前端教程之JavaScript基础教程（下）

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/49315.html

赞 (0)
老牧童老牧童
0
上一篇 2024-04-24 20:26
下一篇 2024-04-25 12:15

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关注微信