测试开发系列之——javascript

学习目标

js数据类型和基本语法
js函数和事件
js内置对象
json

js-简介

一门客户端脚本语言

脚本语言是一种解释性的语言
例如vbscript，javascript等等，它不需要翻译，Python

客户端脚本
运行在客户端浏览器中的，每一个浏览器都有脚本的解释引擎

服务器端脚本语言
jsp asp php

js-发展历史

1995年，Netscape（网景）公司，LiveScript。后来，请来SUN公司的专家，命名为JavaScript

1996年，微软抄袭JavaScript开发出JScript语言

1997年，ECMA（欧洲计算机制造商协会），制定出客户端脚本语言的标准：ECMAScript，就是统一了所有客户端脚本语言的编码方式。

JavaScript = ECMAScript + (BOM+DOM)
ES6，以年份命名ECMAScript 2015 2019

js-引入

外部文件引用

 <script type="text/javascript" src="文件路径"/>

页面内嵌套

 <script type="text/javascript"></script>

js-变量

弱类型：在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据。
声明变量关键字：
```
 var
```
```
 const：es6
```
```
 let：es6
```
命名规范：变量只能包含数字、字母、下划线、$，其中数字不能作为首字母

js-数据类型

原始数据类型（基本数据类型）：
1. number：数字。整数／小数／NaN（not a number一个不是数字的数字类型）
2. string：字符串。字符串"abc" “a” ‘abc’
3. boolean：true和false
4. null：一个对象为空的占位符
5. undefined：未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined
引用数据类型：对象object

typeof运算符：获取变量的类型
注：null运算后得到的是object

js-基础语法

运算符
1. 一元运算符 i++、++i
2. 算数运算符
3. 赋值运算符 x+=y
4. 比较运算符 ==
5. 逻辑运算符 && ||
6. 三元运算符 x>y?a:b
流程控制语句
1. 条件分支 if…else
2. 循环 for、while
3. 跳转break、continue

练习：99乘法表

js-函数function对象

创建

function 方法名称(形式参数列表){
		方法体
}
var 方法名 = function(形式参数列表){
		方法体
}

调用

!function(){}()
(function(){}())
(()=>{})()

特点：函数是对象，函数对象对应的类型是Function

js-常用事件

事件	描述
onchange	HTML 元素改变
onclick	用户点击 HTML 元素
onmouseover	用户在一个HTML元素上移动鼠标
onmouseout	用户从一个HTML元素上移开鼠标
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载

事件监听机制
绑定事件

直接在html标签上，指定事件的属性（操作），属性值就是js代码
通过js获取元素对象，指定事件属性，设置一个函数
addEventListener

js-常用内置对象

Array：数组对象
Date：日期对象
Number
String
RegExp：正则表达式对象/[a-zA-Z]\W{5,}/

js-DOM

文档对象模型

js-BOM

浏览器对象模型
对象属性：
- history：同浏览器回退与前进一致
- location：地址
对象方法：
- alert：弹框
- prompt：交互窗口
- setInterval：重复执行
- clearInterval：消除重复执行
- setTimeout：定时器
- clearTimeout：消除定时器

练习：随机js点名器+表单中密码验证

运行结果截图

初始界面
点名点到Jacky+表单中密码验证

3.html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <button id="btn">点名</button>
    <button id="btnStop">停止</button>
    <div id="div1">随机点名区域</div>

    <script src="/3.js"></script></br></br></br>
    用户名：<input id="usernameInput" name="username" onblur="checkUsername()">
    <span id = "info">*</span></br>
    密码：<input id="passwordInput" name="password" onblur="checkPassword()">
    <span id = "infoPWD">*</span>
</body>
</html>

3.js代码

//document.getElementById("btn").onclick=dianming;
document.getElementById("btn").onclick=start;
document.getElementById("btnStop").onclick=stop;
var flag = true;

function dianming(){
    //var text = e.target.innerHTML;
    //console.log(text);
    //点名
    var arr = ['Amy','Jacky','Rose'];//0-2
    var index = 0;
    var u;
    if(flag){
        t = setInterval(() => {
            index = Math.floor(Math.random()*arr.length);
            u = arr[index];
            document.getElementById("div1").innerHTML = u ;
            console.info(arr[index]);
        }, 100);
    }else{
        clearInterval(t);
    }
}

function start() {
    //随机获取姓名
    flag = true;
    dianming();
}

function stop() {
    //停止随机获取姓名
    flag = false;
    dianming();
}

function checkUsername(){
    var usernameStr = document.getElementById("usernameInput").value;
    var reg = /^[a-zA-Z]\w{5,14}$/;
    //非空
    if(usernameStr==""||usernameStr==null){
        document.getElementById("info").innerHTML="<font color = 'red'>用户名不能为空</font>";  
        return;      
    }
    if(!reg.test(usernameStr)){
        //提示错误
        document.getElementById("info").innerHTML="<font color = 'red'>用户名格式不正确</font>";
        return;
    }
}

function checkPassword(){
    var passwordStr = document.getElementById("passwordInput").value;
    var reg = /^[0-9]{6}$/;//6位数字
    //非空
    if(passwordStr==""||passwordStr==null){
        document.getElementById("infoPWD").innerHTML="<font color = 'red'>密码不能为空</font>";  
        return;      
    }
    if(!reg.test(passwordStr)){
        //提示错误
        document.getElementById("infoPWD").innerHTML="<font color = 'red'>密码格式不正确</font>";
        return;
    }
}

anniewhite

发布了14 篇原创文章 · 获赞 1 · 访问量 858

私信关注