前端基础（JavaScript）——基础语法（变量，高级软件测试面试答案内部的js：外部的js：基础语法 0.数据类

内部的js：

	<script>
 alert("Hello World");
 </script>

外部的js：

<script src="/day06/js/axios.min.js"></script>

基础语法

0.数据类型

原始数据类型

1、number 数字整数，小数，NaN

2、String 字符和字符串一样 “”和’'都可以

3、boolean true false

4、null:一个对象为空的占位符

5、undefined：从null演变过来的，未定义，如果一个变量没有初始化值，默认就是这个

	   var num = 123;
       var num1 = "123";
       var num3 = NaN;
       var num4 = 123.321;
       var num2 = null;
       alert(num5);

1.变量----let

let用的多：

<script>
 var s = "who i am"; // 作用域，重复定义
 const i = 100; // 常量 final
 let j = "123"; // 类似于java
</script>

2.怎么打印—console

console用的多：浏览器的控制台；还有alert：弹出窗口

<script>
 let i = 999\*999;
 // // 弹出窗口
 alert("999\*999"+i);
 // // 输出到页面上
 document.write("<h1>999\*999"+i+"</h1>")
 // 控制台
 console.log("999\*999="+i)
</script>

在这里插入图片描述

3.if条件分支–啥都可以是条件

如果是变量，0表示false，其他都为true；
如果变量不赋值，默认为false；
空字符串为false，其他正常对象都是true；

    let i = 10;
    if(i>=10){
        console.log("i大于等于10");
    }else{
        console.log("i小于10");
    }

    // 可以把变量传入if
    // 0表示false，其他都是true
    let j = -9
    if(j){
        console.log("i大于等于10");
    }

    // 如果没有赋值，默认为false
    let k;
    if(!k){
        console.log("hh")
    }

    // 空字符串为false，其他正常的对象都是true
    if("bac"){
        console.log("abc")
    }

例子：输入框，打印输入和未输入

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="username">
<button id="btn">提交</button>
<script>
    let btn = document.getElementById("btn");
    btn.onclick = function (){
        let username = document.getElementById("username");
        if (!username.value)
        {
            console.log("无输入")
        }
        else
        {
            console.log("您输入的是:" + username.value)
        }
    }
</script>
</body>
</html>

4.数组push 和 splice

数组，自动扩容，未定义是undefined

let arr = ['a','b','c','d','e'];

（1）push方法：往最后添加元素

    // 数组常用操作 push,splice
    console.log('数组长度：'+arr.length);
    // 1.push,数组放元素,默认往最后一个添加
    arr.push('g');
    console.log(arr);
    console.log(arr.length);

（2）splice，3个参数，索引开始、删除几个，添加啥

2.1 进行添加，可以多个

	// 2.1 往最前面添加1个元素---添加
    arr.splice(0,0,'a1','a2');
    console.log(arr);
    
    // 2.2 往索引为xx加
    arr.splice(3,0,'b','a');
    console.log(arr)
    
    // 2.3 往最后加1个元素
    arr.splice(arr.length,0,'last');
    console.log(arr);

2.2 删除元素

    // 删除元素
    // 2.1 删除头部2个元素
    arr.splice(0,2);
    console.log(arr);
    
    // 2.2 删除最后1个元素
    arr.splice(arr.length-1,1);
    console.log(arr)

2.3 修改元素

    // 修改元素
    arr.splice(2,1,'ccc');
    console.log(arr);

5.循环语句—数组的打印

fori，forin，forof，foreach，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    // 用索引的方式
    let arr = ['a','b','c','d','e'];
    for (let i = 0; i < arr.length; i++) {
        console.log(arr[i]);
    }
    console.log("~~~~~~~~~~~~~~~~~~~~~~")

    // 用增强型
    for (const s of arr) {
        console.log(s);
    }
    console.log("~~~~~~~~~~~~~~~~~~~~~~")

    // 用forin
    for (const arrKey in arr) {
        console.log(arrKey+': '+arr[arrKey]);
    }
    console.log("~~~~~~~~~~~~~~~~~~~~~~")

    // foreach
    arr.forEach(s=>console.log(s))

</script>

</body>
</html>

函数定义&值的比较

1.函数定义—啥都能传

不传的话，返回值为NaN，not a number

（1）方式一：function add(){}

    // 定义一个方法，返回值类型可不写
    function add(a,b) {
        return a+b;
    }
    console.log(add());// NaN,not a number
    console.log(add(1,2))
    console.log(add(1,2,3))
    console.log('aa','bb'); // 字符串也行
    console.log('1',2)

（2）把方法定义成一个常量【常用】

    // 定义添加方法，方法定义成一个变量
    // 常用，函数是一个对象
    let add1 = function (a,b) {
        return a+b;
    }
    console.log(add1(3,5))

2.值的比较—字符串和数字可以比较，===

===可以排除类型不同的情况，

    // 字符串和数字是可以比较的
    console.log('1'==1); // true
    console.log(1==1);
    // 排除类型相等的问题
    console.log('1'===1); // false

JSON对象【重要】—{} + []

s和其他语言通讯用JSON对象：数组对象[] 和普通对象{}，可以互相嵌套，甚至套本身

{} ====对应java中的实体类，或者map；
[] ====对应java中的List 和数组；
{}表示一个对象，用键值对定义,用. 就可以获得— JSON对象

    // js和其他语言通讯 用JSON对象：数组对象[] 和 普通对象{}，可以互相嵌套，甚至套本身
    // {} ====对应java中的实体类，或者map；
    // [] ====对应java中的List 和 数组；
    // {}表示一个对象，用键值对定义,用. 就可以获得--- JSON对象
    let person = {
        "name":"peter","age":28,"gender":"男",
        "address":[{"1001":'南京'},{"1002":'背景'}]
    }
    console.log(person.name)
    // 获得第一套房子
    console.log(person.address[0])

    // 表示多个人
    let persons = [{"name":"p"},{"name":"s"}];
    console.log(persons);

在这里插入图片描述

js操作标签—控制html元素

方法	函数
根据id获取元素	document.getElementById(“username”)
用选择器获取	document.querySelector(“#username”)
用name获取–多个	ddocument.getElementsByName(“hobby”)

案例：让选择框都变成未选择的状态：

在这里插入图片描述

    // 3.用name获取--多个
    let h = document.getElementsByName("hobby");
    h.forEach(ho=>ho.checked=false);

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="username" value="peter">
<input type="checkbox" name="hobby" value="game">游戏
<input type="checkbox" name="hobby" value="foot">足球
<input type="checkbox" name="hobby" value="code">编程


<script>
    // // 1.根据id获取一个元素
    let usernameInput = document.getElementById("username");
    console.log(usernameInput.value);
    // // 1.2 修改 也可以再控制台
    // usernameInput.value = "Sh";

    // 2.用选择器获取
    let u = document.querySelector("#username");
    console.log(u.value);

    // 3.用name获取--多个
    let h = document.getElementsByName("hobby");
    console.log(h);

    // 让三个框全选中
    for (const hKey of h) {
        hKey.checked = true;
    }

    // 用箭头函数
    h.forEach(ho=>ho.checked=false);

</script>
</body>
</html>

常用事件

1.鼠标单击事件–onclick–eat.innerText

鼠标单击一下，增加一个apple，eat.innerText

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<span id="apple">peter eat Apple </span><br>
<button id="close">add</button>

<script>
    // 获取一个按钮
    let addBtn = document.getElementById("close");
    let eat = document.getElementById("apple");
    document.querySelector("#apple"); // 选择器

    // 给按钮注册一个点击事件
    // 如果按钮被鼠标单击，触发该函数
    addBtn.onclick = function (){
        console.log("hello~~~~~~~~~~~~");
        eat.innerText += " apple ";
    }
</script>
</body>
</html>

1.案例：开灯关灯案例—light.src.includes(“off.gif”)

思路，本质是监测鼠标单击，如果单击了就换一下图片

方法一：用includes方法，不能用==，猜测是对比引用指向同一对象？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="imgs/on.gif" id="img">
<script>
    let light = document.getElementById("img");
    light.onclick = function () {
        if (light.src.includes("off.gif")){ // 可以实现
        // if (light.src=="imgs/off.gif"){ // 未实现
            console.log("if")
            light.src = "imgs/on.gif"
        }else {
            console.log("else");
            light.src = "imgs/off.gif"
        }
    }
</script>
</body>
</html>

方案二：顶一个Boolean类型的flag，每次取反

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="imgs/on.gif" id="img">
<script>
    let light = document.getElementById("img");
    let flag = true;
    light.onclick = function () {
        if (flag){
            light.src = "imgs/off.gif";
        }else {
            light.src = "imgs/on.gif";
        }
        flag=!flag;
    }
</script>

</body>
</html>

2.鼠标失去焦点时间–onblur

usernameInput.onblur

3.两个textarea同步–oninput

jianInput.oninput

3.案例：两个框同步，类似百度翻译

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="username">
<br>
<textarea id="jian"></textarea>
<textarea id="fan"></textarea>

<script>
    // 实现鼠标挪走，如果框失去焦点，就输出一句话
    let usernameInput = document.getElementById("username");
    usernameInput.onblur = function () {
        // 一个失去焦点的事件
        console.log(usernameInput.value);

    }

    // 两个框同步，类似百度翻译
    let jianInput = document.getElementById("jian");
    let fanInput = document.getElementById("fan");
    jianInput.oninput = function () {
        fanInput.value = jianInput.value;
    }

</script>
</body>
</html>

4.案例：按钮弹框window.alert() + 二次确定confirm(“确定删除”);

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="btn">按钮</button>
<br>
<button id="del">删除</button>

<script>
    // window代表的是整个浏览器，windows可省略
    let btn = document.querySelector("#btn");
    let delBtn = document.querySelector("#del");
    btn.onclick = function(){
        window.alert();
    }

    delBtn.onclick = function(){
        // 进行操作的二次确定，返回true，false
        let flag = confirm("确定删除");
        console.log(flag);
    }

</script>
</body>
</html>

5.案例：操作页面—控制浏览器window.open(),close()

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="open">访问百度</button>
<button id="close">关闭百度</button>
<br>
<script>
    let openBtn = document.querySelector("#open");
    let closeBtn = document.querySelector("#close");
    let openW

    openBtn.onclick = function () {
        console.log("open~~~~~~~~");
        openW = window.open("https://baidu.com")

    }

    closeBtn.onclick = function (){
        console.log("close~~~~~~~~");
        openW.close();
    }
</script>

</body>
</html>

6.案例：刷新页面—location.reload()

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="open">跳转到百度</button>
<button id="reload">刷新页面</button>
<br>
<script>
    let openBtn = document.querySelector("#open");
    let reload = document.querySelector("#reload");

    openBtn.onclick = function () {
        console.log("open~~~~~~~~");
        location.href = "https://baidu.com";
    }

    reload.onclick = function () {
        console.log("reload");
        location.reload();
    }
</script>

</body>
</html>

7.案例：10s后跳转到百度—location.href = “www.baidu.com”;

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<span id="span" style="color: red">10</span>秒后跳转到百度
<script>
  window.onload = function(){
    let element = document.querySelector("#span");
    function fun(){
      element.innerText--;
      if(element.innerText==0)
      {
        location.href = "https://www.baidu.com";
      }
    }
    setInterval(fun,1000)
  }
</script>
</body>
</html>

8.案例：购物网站首页图自动切换–setInterval(fun,1000)

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img id="img" src="imgs/1.jpg">

<script>
    let img = document.getElementById("img");
    let i = 0;
    let imgList = ["imgs/1.jpg","imgs/2.jpg","imgs/3.jpg"]
    let fun = function () {
        if (i>2){
            i=0;
        }
        img.src = imgList[i];
        i++;
    }

    // 第一个参数，准备循环执行的方法，第二个参数，间隔的毫秒数
    setInterval(fun,1000);

</script>

</body>
</html>

应用案例

1.支付完成后5,4,3,2,1,0跳转到界面

要点：
（1）setInterval(fun,1000);要放在后面；
（2）用document.write不好看，一行一行打印，要用span

document.write("<h1>支付完整后"+i+"s后跳转</h1>");

在这里插入图片描述



![img](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/3372bf51fabe4bf2beafd3bf85cef5c9~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3MzIxMjA3NDIwNDUy:q75.awebp?rk3s=f64ab15b&x-expires=1772949932&x-signature=NJMVwhHXk980duI5YJ3yimHk8uw%3D)
![img](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/8532fe11fabb40c9aa2b78acfa0d9905~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3MzIxMjA3NDIwNDUy:q75.awebp?rk3s=f64ab15b&x-expires=1772949932&x-signature=KtnHSQMvVVrT%2BEuwQjtG%2F4%2BgHQc%3D)

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**了解详情》docs.qq.com/doc/DSlVlZExWQ0FRSE9H**

前端基础（JavaScript）——基础语法（变量，高级软件测试面试答案

基础语法

0.数据类型

1.变量----let

2.怎么打印—console

3.if条件分支–啥都可以是条件

例子：输入框，打印输入和未输入

4.数组push 和 splice

（2）splice，3个参数，索引开始、删除几个，添加啥

5.循环语句—数组的打印

函数定义&值的比较

1.函数定义—啥都能传

（2）把方法定义成一个常量【常用】

2.值的比较—字符串和数字可以比较，===

JSON对象【重要】—{} + []

js操作标签—控制html元素

案例：让选择框 都变成未选择的状态：

常用事件

1.鼠标单击事件–onclick–eat.innerText

1.案例：开灯关灯案例—light.src.includes(“off.gif”)

2.鼠标失去焦点时间–onblur

3.两个textarea同步–oninput

3.案例：两个框同步，类似百度翻译

4.案例：按钮弹框window.alert() + 二次确定confirm(“确定删除”);

5.案例：操作页面—控制浏览器window.open(),close()

6.案例：刷新页面—location.reload()

7.案例：10s后跳转到百度—location.href = “www.baidu.com”;

8.案例：购物网站首页图自动切换–setInterval(fun,1000)

应用案例

1.支付完成后5,4,3,2,1,0跳转到界面

案例：让选择框都变成未选择的状态：