【软件测试】6_基础知识 _Javascript - 实践
一、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.4 呼吸灯-焦点图或轮换图
- 焦点图或轮换图—英文名称：banner图
- 图片切换；呼吸效果：渐隐渐现效果
5.5 js实现动画效果
测试的时候一定要多次触发动画，查看动画是否有累积的情况；
1、动画累积bug：移入移出多少次，动画执行多少次。（重复性触发）
5.6 模态窗口
模态窗口：弹出两个层，
- 一个负责盖住下面的其他页面内容（背景色是灰色，无法操作底层其他控件）；
- 另外一个是让用户操作的层，只允许用户操作弹初的那个层。
目的是：让用户优先解决最上面的那个层。
5.7 自定义单选、多选、下拉菜单
只要不是系统原生的，就算是自定义；这些程序，需要js+html+css组合才能实现，肯定比原生的写法浪费时间，但是为了整体页面的美观，必须要求程序员按照设计师的要求来实现；
浙公网安备 33010602011771号