网站首页 > 基础教程 正文
阅读本文约需要10分钟，您可以先关注我们，避免下次无法找到。
本篇文章成哥继续带大家来学习前端教程之JavaScript，网页的动态事件基本上都是靠它来实现的。下面我们就一起来学习内容吧！
01 JavaScript简介
JavaScript通常缩写为 JS，是一种高级的，解释执行的编程语言。
JavaScript 是一门基于原型、函数先行的语言，是一门多范式的语言，它支持面向对象编程，命令式编程，以及函数式编程。它提供语法来操控文本、数组、日期以及正则表达式等，不支持 I/O，比如网络、存储和图形等，但这些都可以由它的宿主环境提供支持。
它已经由 ECMA（欧洲计算机制造商协会）通过 ECMAScript 实现语言的标准化。
它被世界上的绝大多数网站所使用，也被世界主流浏览器（Chrome、IE、Firefox、Safari、Opera）支持。
JavaScript具有如下特点:
1）JavaScript是一种动态语言，用于在客户端设计网页。
2）它是区分大小写的语言。
3）它是非类型语言，即变量可以保存任何类型的值，Python语言也有相同的特点。
02 JavaScript文件
JavaScript的语句可以写在HTML文件中，也可以单独写在.js文件中，其具体如下所示
1）HTML文件
JavaScript写在HTML文件中时必须写在HTML文件中的'script'标签中，下面我们在HTML文件中通过JavaScript输出"Hello World"，具体示列如下
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <title>JavaScript基础教程</title>
6. </head>
7. <body>
8. <script>
9. document.write("Hello World from JavaScript!<br>");
10. </script>
11. </body>
12. </html> 2）js文件
现在我们创建一个单独的js文件，然后在HTML文件中应用具体示列如下：
1. // js文件
2. document.write("Hello World from JavaScript!<br>");
3.
4. // html文件
5. <!DOCTYPE html>
6. <html>
7. <head>
8. <meta charset="UTF-8">
9. <title>JavaScript基础教程</title>
10. </head>
11. <body>
12. <!-- 引入js文件 -->
13. <script src="test.js"></script>
14. </body>
15. </html> 03 JavaScript的关键字、数据类型、变量与常用操作
（1）JavaScript关键字
JavaScript包含了许多关键字，我们在编写语句时要注意避开这些关键字，以免引起不必要的错误。其常用关键字如下表所示：
（2）JavaScript数据类型
JavaScript包含了三种数据类型具体如下：
1）数值类型，如'123，12.1'在JavaScript中所有的数值类型其实都是浮点数
2）字符串类型，如'JavaScript基础教程'
3）布尔类型，如'true, false'
（3）JavaScript变量
JavaScript的变量一般用var这个关键字来定义，在ES6中变量一般用let定义。JavaScript是非类型化语言，即变量可以包含任何数据类型。JavaScript具体变量使用示列如下：
1. // 1.js文件
2. // document会在文章渲染后再执行，所以看到其在js文件中是在前面，但HTML页面输出的内容在最后
3. document.write("Hello World from JavaScript!<br>");
4.
5. // 定义变量your_name与age
6. var your_name = "成哥";
7. var age = 30;
8. // 在HTML中找到p_name的id标签，然后在内部插入html内容
9. document.getElementById("p_name").innerHTML= "Hello "+ your_name + "<br>Age : " + age;
10.
11. // 2. HTML文件
12. <!DOCTYPE html>
13. <html>
14. <head>
15. <meta charset="UTF-8">
16. <title>JavaScript基础教程</title>
17. </head>
18. <body>
19. <p id='p_name'></p>
20. <script src="test.js"></script>
21. </body>
22. </html> 我们还可以通过prompt方法获取用户在页面的输入的变量具体示列如下
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <title>JavaScript基础教程</title>
6. </head>
7. <body>
8. <script>
9. // prompt方法用于获取用户在页面输入的内容
10. var x = prompt("请输入一个数字，计算其10倍的结果");
11. document.write("其10倍结果为：10 * ", x, " = ", 10*x + "<br>");
12. </script>
13. </body>
14. </html> （4）JavaScript运算符
1）算术运算符
2）赋值运算符
3）比较运算符
4）条件运算符
JavaScript的条件运算符为问号加冒号组合（？：），其规则是问号前面条件是否为true如果为true则执行冒号前面的表达式，如果为false则执行冒号后面的表达式，具体如下：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <title>JavaScript基础教程</title>
6. </head>
7. <body>
8. <script>
9. // prompt方法用于获取用户在页面输入的内容
10. var x = prompt("请输入一个数判断其是奇数还是偶数");
11. // 通过条件运算符来进行判断奇偶数
12. var result = x % 2 === 0 ? '偶数': '奇数';
13. document.write("数值(", x, ")为", result);
14. </script>
15. </body>
16. </html> 5）逻辑运算符
（5）类型转换
1）字符串传数值类型
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <title>JavaScript基础教程</title>
6. </head>
7. <body>
8. <script>
9. // 字符串转数值型通过Number方法实现
10. document.write("2 + Number('3.4') = ", 2 + Number('3.4'), "<br>");
11. </script>
12. </body>
13. </html> 2）整型转换
浮点的数值类型与字符串的数值类型可以通过parseInt方法转成整形具体示列如下：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <title>JavaScript基础教程</title>
6. </head>
7. <body>
8. <script>
9. // 整型转换
10. document.write("2 + parseInt('3.4') = ", 2 + parseInt('3.4'), "<br>"); // 字符串转整型
11. document.write("2 + parseInt(3.4) = ", 2 + parseInt(3.4), "<br>"); // 浮点数转整型
12. </script>
13. </body>
14. </html> 3）浮点数转换
数值型字符串与数值类型可以通过parseFloat方法转成浮点数，具体示列如下
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <title>JavaScript基础教程</title>
6. </head>
7. <body>
8. <script>
9. // 浮点数转换
10. document.write("2 + parseFloat('3.4') = ", 2 + parseFloat("3.4"), "<br>");
11. </script>
12. </body>
13. </html> （6）字符串方法
JavaScript内置了好多针对字符串操作的方法，下面我们就演示一些常用的字符串方法具体示列如下：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <title>JavaScript基础教程</title>
6. </head>
7. <body>
8. <script>
9. // 字符串示例
10. document.write("hello".toUpperCase(), "<br>") // 转换为大写字母
11. w = "JavaScript"
12. document.write(w.toLowerCase(), "<br>") // 转换为小写
13. document.write(w.small(), "<br>") // 变小字体
14. document.write(w.bold(), "<br>") // 变粗字体
15. document.write(w.strike(), "<br>") // 给文字加上横线
16. document.write(w.fontsize("5em"), "<br>") // 设置字号大小
17. document.write(w.link("http://www.baidu.com"), "<br>") // 给其增加url链接
18. document.write(w.fontcolor("red").fontsize("12em"), "<br>") // 连续使用多个方法设置
19. </script>
20. </body>
21. </html> （7）数组
JavaScript的数组类型可以包含不同的数据类型，比如一个数组同时包含字符串与数值类型，其跟Python非常类似，具体使用示例如下：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <title>JavaScript基础教程</title>
6. </head>
7. <body>
8. <script>
9. // 数组示例
10. arr = [15, 30, "Meher"]
11.
12. // 遍历数组方式一：
13. document.write("遍历数组方式一：", "<br>");
14. for(a in arr)
15. document.write(arr[a], " ");
16. document.write("<br>");
17.
18. // 遍历数组方式二：
19. document.write("遍历数组方式二：", "<br>");
20. for (var i=0;i<arr.length;i++){
21. document.write(arr[i], " ");
22. }
23. document.write("<br>");
24.
25. document.write(arr.pop(), "<br>"); // 移除数组最后一个元素
26. arr.push("JavaScript"); // 在数组最后增加一个元素
27. document.write(arr.pop(), "<br>");
28. document.write("该数组长度为: ", arr.length, "<br>");
29. </script>
30. </body>
31. </html> 04 总结
至此我们《JavaScript基础教程上篇》就讲完了，下篇内容主要讲解JavaScript的控制语句、函数编程及异常处理等相关知识，敬请期待。最后如果喜欢本篇文章不要忘了点赞、关注与转发哦！
-END-
@IT管理局专注计算机领域技术、大学生活、学习方法、求职招聘、职业规划、职场感悟等类型的原创内容。期待与你相遇，和你一同成长。
文章推荐：
猜你喜欢
- 2024-10-12 菜鸟面试:(Object和String)时间类和日期类以及包装类等而谈
- 2024-10-12 做前端不得不会的纯js验证码，你知道吗?
- 2024-10-12 js——prototype 属性 js object.prototype
- 2024-10-12 2024 年 5 个令人兴奋的 JavaScript 新功能
- 2024-10-12 JavaScript 基本数据类型和引用类型的区别详解
- 2024-10-12 「JS 口袋书」第 1 和 2 章:JS简介及基础
- 2024-10-12 第15节 Javascript引用类型-Web前端开发-零点程序员-王唯
- 2024-10-12 javascript系统学习(五)万物皆对象
- 2024-10-12 讲解一下JavaScript基本类型和引用类型的值
- 2024-10-12 JavaScript 原型扩展——对象(Object)
- 05-03【Docker】部署 Elasticsearch（docker运行elasticsearch）
- 05-03若依框架改造,阿里docker部署（若依框架开发教程）
- 05-03软件测试/测试开发丨必知必会的Docker 命令
- 05-03如何从主机复制文件到Docker容器（如何从主机复制文件到docker容器里）
- 05-03Windows搭建Agent开发平台-WSL2+Dify本地部署及开发指南
- 05-03docker安装prometheus和grafana（docker如何安装）
- 05-03从Docker容器复制文件到主机的方法
- 05-03在Debian Docker环境一键部署Dify:手把手教你搭建本地AI应用平台
- 最近发表
-
- 【Docker】部署 Elasticsearch（docker运行elasticsearch）
- 若依框架改造,阿里docker部署（若依框架开发教程）
- 软件测试/测试开发丨必知必会的Docker 命令
- 如何从主机复制文件到Docker容器（如何从主机复制文件到docker容器里）
- Windows搭建Agent开发平台-WSL2+Dify本地部署及开发指南
- docker安装prometheus和grafana（docker如何安装）
- 从Docker容器复制文件到主机的方法
- 在Debian Docker环境一键部署Dify:手把手教你搭建本地AI应用平台
- 【Docker】部署Jira&Confluence
- 精辟!阿里大牛泪解:docker镜像制作——构建企业镜像LAMP+BBS
- 标签列表
-
- 菜鸟教程 (58)
- jsp (69)
- pythonlist (60)
- gitpush (78)
- gitreset (66)
- python字典 (67)
- dockercp (63)
- pythonif (68)
- pythonifelse (59)
- deletesql (62)
- c++模板 (62)
- c#event (59)
- linuxgzip (68)
- 字符串连接 (73)
- nginx配置文件详解 (61)
- html标签 (69)
- c++初始化列表 (64)
- exec命令 (59)
- mysqlinnodbmyisam区别 (63)
- arraylistadd (66)
- node教程 (59)
- console.table (62)
- mysqldatesub函数 (63)
- window10java环境变量设置 (66)
- c++虚函数和纯虚函数的区别 (66)