【软件测试】6_基础知识 _Javascript

📅 发布时间：2026/6/19 9:58:12

文章目录

一、Javascript基本介绍
二、Javascript基础语法
三、Javascript事件
- 3.1 事件三要素
- 3.2 事件三要素-案例
- - 3.2.1 点击div标签，做一件事，点击后弹出对话框—用id类
  - 3.2.2 添加标签p—用class类
四、Javascript书写位置（引入方式）
- 4.1 内嵌Js
- - 4.1.1 语法
  - 4.1.2 案例
- 4.2 外链Js
- - 4.2.1 语法
  - 4.2.2 案例
  - 4.2.3 注意
- 4.3 行内Js（禁止使用）
- - 4.3.1 语法
  - 4.3.2 案例
  - 4.3.3 注意：双引号和单引号的区别在行内
- 4.4 总结
五、js常见特效（了解）
- 5.1 导航跟随/电梯导航
- 5.2 返回顶部
- 5.3 滚动跟随
- 5.4 呼吸灯-焦点图或轮换图
- 5.5 js实现动画效果
- 5.6 模态窗口
- 5.7 自定义单选、多选、下拉菜单

一、Javascript基本介绍

Js是Javascript的缩写，它和java语言没有关系。
]s诞生于1995年，当时的主要目的是验证表单（form）的数据是否合法。form里面有用户名、密码、邮箱等
科普：Javascript的本来应该叫livescript，但是在发布前夕，想搭上媒体超热java的顺风车，临时把名字改为了javascript。(也就是说js跟java没有关系，当时只是想借助java的名气)
作用：控制web前端标准的前两者，结构和样式。

二、Javascript基础语法

1、js代码写在html中的script标签中，放在html页面的最后位置。

2、从script标签中间，写上 alert(“弹窗内容，这里写什么就会弹出什么”)。

<script>alert("弹窗中的显示的内容");</script>

弹出警示框，弹出对话框：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body></body></html><script type="text/javascript">alert("Hello World");</script

注意：浏览器自带的alert警示框，无法统一，这都是浏览器底层自带的，无法修改。

三、Javascript事件

定义：在什么时候做什么事情

作用：捕获用户的行为(单击、双击、鼠标的移入移出·········)

3.1 事件三要素

1、事件源：(解释就是这个事件加给谁)；

2、事件类型：(就是指的这个事件是什么时候发生的)；

3、执行的指令：固定写法 function( ){你的命令写在这里} ；

3.2 事件三要素-案例

id 是唯一的，即单一。
class是类，是复数，在js中用getElementsByClassName 通过class来找页面中的元素，而class可以设置多个重复的类名，获取时必须要在后面添加[0]，从数字0开始计数。

3.2.1 点击div标签，做一件事，点击后弹出对话框—用id类

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><div id = "div1">哈哈哈</div></body></html><script type = "text/javascript">// 点击页面中的div,弹出对话框// 第一步：如果想要控制某个标签必须先要找到它，在css中用选择器寻找，js在当前页面的文档找// 第二步：点击页面的div// 第三步：弹出对话框// 运行代码的时候什么都不弹出，只有点击哈哈哈的时候，才会弹出。document.getElementById('div1').onclick=function(){alert('我点击时，才会弹出哦');}//事件的三要素：事件源.事件的类型 = 执行的命令// 事件源：document.getElementById('div1')//事件类型：onclick//执行的命令：function(){}     </script>说明：document        代表整个html文档getElementById  使用id的名字来找标签onclick         在点击的时候function(){ 此处就写最终点击的时候要执行什么命令}

3.2.2 添加标签p—用class类

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><div id = "div1">哈哈哈</div><p class = "p1"> 我是p1标签</p><p class = "p1"> 我是p2标签</p></body></html><script type = "text/javascript">// 点击页面中的div,弹出对话框// 第一步：如果想要控制某个标签必须先要找到它，在css中用选择器寻找，js在当前页面的文档找//第二步：点击页面的div// 第三步：弹出对话框document.getElementById('div1').onclick=function(){alert('点击div时，才会弹出');}//事件的三要素：事件源.事件的类型 = 执行的命令document.getElementsByClassName('p1')[0].ondblclick=function(){alert('点击p时，才会弹出');}// getElementsByClassName 通过class来找页面中的元素，而class可以设置多个重复的类名// 则在获取时必须要在后面添加[0],从数字0开始计数</script>// onclick     单击弹出// ondblclick  双击才会弹出

四、Javascript书写位置（引入方式）

4.1 内嵌Js

内嵌js：在html文件中，放在scipt标签里。

4.1.1 语法

<script>alert ("弹窗中的显示内容);</script>

4.1.2 案例

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body></body></html><script type = "text/javascript">alert('弹窗-内嵌式');</script>

4.2 外链Js

外链js：可以在单独的js文件里，通过script标签中的src属性引用到页面中。

4.2.1 语法

<script src="js文件的路径>此处不要写代码，写什么都不会执行</script>

4.2.2 案例

1、.html文件

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body></body></html><script type="text/javascript" src="js.js"></script>

2、js.js文件

alert('弹窗-外链式');

4.2.3 注意

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body></body></html><script type="text/javascript" src="js.js">//此处如果是外链的语法，这里写什么都不会执行alert('111111');</script>

4.3 行内Js（禁止使用）

行内js：写在标签的属性里，这个属性必须是事件属性。(任何标签都有事件属性)，与行内css一样，不推荐使用！

4.3.1 语法

<div onclick=alert ( 'heihei');”> 按钮 </div>

4.3.2 案例

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><!-- 点击网页 非官方范例，弹出 '点我之后，才弹出'--><div onclick = "alert('点我之后，才弹出');">非官方范例</div></body></html>

4.3.3 注意：双引号和单引号的区别在行内

在行内只能用单引号实现，否则无法执行js行为

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><div onclick = "alert("弹窗-行内式");">非官方范例</div></body></html>

4.4 总结

行内js和行内css一样，都是不推荐使用！
内嵌和外链随意使用，还是建议使用外链式，因为能实现js代码和html代码的分离，更方便代码的修改。

五、js常见特效（了解）

5.1 导航跟随/电梯导航

导航：指导你去哪

跟随：怎么滚动，页面有一部分都不会改变，不会滚跑

5.2 返回顶部

点击后，回到页面最顶部

5.3 滚动跟随

滚来滚去，跟着跑

5.5 js实现动画效果

测试的时候一定要多次触发动画，查看动画是否有累积的情况；

1、动画累积bug：移入移出多少次，动画执行多少次。（重复性触发）

5.6 模态窗口

模态窗口：弹出两个层，

一个负责盖住下面的其他页面内容（背景色是灰色，无法操作底层其他控件）；
另外一个是让用户操作的层，只允许用户操作弹初的那个层。

目的是：让用户优先解决最上面的那个层。

5.7 自定义单选、多选、下拉菜单

只要不是系统原生的，就算是自定义；这些程序，需要js+html+css组合才能实现，肯定比原生的写法浪费时间，但是为了整体页面的美观，必须要求程序员按照设计师的要求来实现；

【软件测试】6_基础知识 _Javascript - 实践