程序员都必掌握的前端教程之JavaScript基础教程(上)
wxin55 2024-11-21 22:17 16 浏览 0 评论
阅读本文约需要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管理局专注计算机领域技术、大学生活、学习方法、求职招聘、职业规划、职场感悟等类型的原创内容。期待与你相遇，和你一同成长。
文章推荐：
相关推荐
- Shiro学习系列教程三:集成web（web集成环境）
-
相关推荐：《Shiro学习系列教程一：Shiro之helloworld》《Shiro学习系列教程三：集成web》《Shiro学习系列教程四：集成web(二)》《Shiro学习系列教程五：自定义Real...
- 写了这么多年代码，这样的登录方式还是头一回见
-
SpringSecurity系列还没搞完，最近还在研究。有的时候我不禁想，如果从SpringSecurity诞生的第一天开始，我们就一直在追踪它，那么今天再去看它的源码一定很简单，因为我们了...
- Shiro框架:认证和授权原理（shiro框架授权的四种方式）
-
优质文章，及时送达前言Shiro作为解决权限问题的常用框架，常用于解决认证、授权、加密、会话管理等场景。本文将对Shiro的认证和授权原理进行介绍：Shiro可以做什么？、Shiro是由什么组成的？举...
- Spring Boot 整合 Shiro-登录认证和权限管理
-
这篇文章我们来学习如何使用SpringBoot集成ApacheShiro。安全应该是互联网公司的一道生命线，几乎任何的公司都会涉及到这方面的需求。在Java领域一般有SpringS...
- Apache Shiro权限管理解析二Apache Shiro核心组件
-
ApacheShiro核心组件Subject（用户主体）Subject是Shiro中的核心概念之一，表示当前用户（可以是登录的用户或匿名用户）。它是与用户交互的主要接口，提供了对用户身份验证...
- 详细介绍一下Apache Shiro的实现原理?
-
ApacheShiro是一个强大、灵活的Java安全框架，设计目标是简化复杂的安全需求，提供灵活的API，使开发者能方便地将安全功能集成到任何应用中。主要作用是用于管理身份验证、授权、会话管理和加...
- 什么是Apache Shiro?SpringBoot中如何整合Apache Shiro?
-
ApacheShiro是一个功能强大且易于使用的Java安全框架，主要用于构建安全的企业应用程序，例如在应用中处理身份验证（Authentication）、授权（Authorization）、加密（...
- Apache Shiro权限管理解析三Apache Shiro应用
-
Shiro的优势与适用场景优势简单易用：API设计直观，适合中小型项目快速实现权限管理。灵活性高：支持多种数据源（数据库、LDAP等），并允许开发者自定义Realm。跨平台支持：不仅限于We...
- 那些通用清除软件不曾注意的秘密（清理不需要的应用）
-
系统清理就像卫生检查前的大扫除，即使你使出吃奶的劲儿把一切可能的地方都打扫过，还会留下边边角角的遗漏。随着大家电脑安全意识的提高，越来越多的朋友开始关注自己的电脑安全，也知道安装360系列软件来"武装...
- JWT在跨域认证中的奇妙应用（jq解决跨域）
-
JWT在跨域认证中的奇妙应用什么是JWT？让我们先来聊聊JWT（JSONWebToken）。它是一种轻量级的认证机制，就像一张电子车票，能让用户在不同的站点间通行无阻。JWT由三部分组成：头部（H...
- 开启无痕浏览模式真能保护个人隐私吗?
-
在访问网站页面时，你是否有过这样的疑虑，自己访问的会不会是山寨网站？用公用电脑上网，个人信息会被别人看到吗？这时，有人会说，使用浏览器的“无痕浏览”模式不就行了，可以在操作中不留下“蛛丝马迹”，但，真...
- 辅助上网为啥会被抛弃 曲奇(Cookie)虽甜但有毒
-
近期有个小新闻，大概很多小伙伴都没有注意到，那就是谷歌Chrome浏览器要弃用Cookie了！说到Cookie功能，很多小伙伴大概觉得不怎么熟悉，有可能还不如前一段时间被弃用的Flash“出名”，但它...
- cookie、session和token（cookie,session和token的区别）
-
Cookie的概念最早是在1994年由NetscapeCommunications的程序员LouMontulli发明的，目的是为了解决当时早期互联网的一个关键问题：HTTP无状态协...
- 小白都能看懂的session与cookie的区别理解
-
cookie/session都是跟踪识别浏览器用户身份的一个东西。cookie的理解：我们要知道，服务器和客户端之间进行数据传输，需要使用到一个超文本传输协议（http协议），而http协议本身是个...
- 面试:网易一面:支撑10万QPS的电商购物车系统如何架构设计呢?
-
1.需求分析：10万QPS的购物车系统需要满足哪些需求？回答：10万QPS的购物车系统需要满足以下核心需求和挑战：核心功能：添加、删除、修改购物车商品实时查看购物车列表支持高并发读写（10万QPS）...
欢迎 你 发表评论:
- 一周热门
- 最近发表
-
- Shiro学习系列教程三:集成web（web集成环境）
- 写了这么多年代码，这样的登录方式还是头一回见
- Shiro框架:认证和授权原理（shiro框架授权的四种方式）
- Spring Boot 整合 Shiro-登录认证和权限管理
- Apache Shiro权限管理解析二Apache Shiro核心组件
- 详细介绍一下Apache Shiro的实现原理?
- 什么是Apache Shiro?SpringBoot中如何整合Apache Shiro?
- Apache Shiro权限管理解析三Apache Shiro应用
- 那些通用清除软件不曾注意的秘密（清理不需要的应用）
- JWT在跨域认证中的奇妙应用（jq解决跨域）
- 标签列表
-
- hive行转列函数 (63)
- sourcemap文件是什么 (54)
- display none 隐藏后怎么显示 (56)
- 共享锁和排他锁的区别 (51)
- httpservletrequest 获取参数 (64)
- jstl包 (64)
- qsharedmemory (50)
- watch computed (53)
- java中switch (68)
- date.now (55)
- git-bash (56)
- 盒子垂直居中 (68)
- npm是什么命令 (62)
- python中+=代表什么 (70)
- fsimage (51)
- nginx break (61)
- mysql分区表的优缺点 (53)
- centos7切换到图形界面 (55)
- 前端深拷贝 (62)
- kmp模式匹配算法 (57)
- jsjson字符串转json对象 (53)
- jdbc connection (61)
- javascript字符串转换为数字 (54)
- mybatis 使用 (73)
- 安装mysql数据库 (55)