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

文章目录

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

javascript 复制代码

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

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

html 复制代码

<!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类

html 复制代码

<!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类

javascript 复制代码

<!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 语法

javascript 复制代码

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

4.1.2 案例

html 复制代码

<!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 语法

javascript 复制代码

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

4.2.2 案例

1、.html文件

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文件

javascript 复制代码

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

4.2.3 注意

html 复制代码

<!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 语法

javascript 复制代码

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

4.3.2 案例

html 复制代码

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

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

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

html 复制代码

<!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.4 呼吸灯-焦点图或轮换图

焦点图或轮换图---英文名称：banner图
图片切换；呼吸效果：渐隐渐现效果

5.5 js实现动画效果

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

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

5.6 模态窗口

模态窗口：弹出两个层，

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

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

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

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