复习知识

while循环

格式:`while(条件判断表达式){  //当条件判断表达式为 true是才会执行底下的语句
	满足条件执行的语句
}`

while循环特点

一直循环直到条件判断表达式为假的时候,停止.

一次调动两个函数格式:

function jia(x) {
        return x + 1;
    }
    function pf(y) {
        return y * y;
    }
    console.log(pf(jia(3)));
    //输出结果为16

给按钮添加点击事件格式:

第一步:

<button id="btn">我是按钮</button>

let _btn = document.querySelector("#btn")

先获取想要添加事件的元素(这里我们用按钮举例)

第二步

给事件添加事件(用点击事件举例):

//cilick是点击事件
_btn.addEventListener("click",function () {
        console.log("我是按钮")  //当事件触发时执行的语句
    })

for循环

格式:for (语句 1; 语句 2; 语句 3) {
 要执行的代码块}

可以用于遍历对象

例如:可以利用遍历对象给每一个对象添加事件
eg:(这里我们用给每一个按钮添加点击事件)

<button>我是按钮</button>
<button>我是按钮</button>
<button>我是按钮</button>
<button>我是按钮</button>

//获取文档中所有的按钮标签
  let btn = document.getElementsByTagName("button");
  //用for循环拿到所有的按钮
    for (let i = 0;i < btn.length;i++){
    //给每一个按钮添加事件(这里我们用的是点击事件)
    //(i+1)是因为下标是从0开始的
        btn[i].addEventListener("click",function () {
            alert("我是按钮" + (i + 1));
        })
    }

类似聊天框功能实现

div{
    width: 200px;
    height: 200px;
    border-top: 1px solid red;
    border-bottom: 1px solid yellowgreen;
    border-right: 1px solid green;
    border-left: 1px solid blue;
    margin-bottom: 25px;
}

<div id="dv"></div>
<button id="btn"></button>
<input type="text" id="ipt">

	//获取文档中id名称为btn、ipt、dv的元素
	let _btn = document.querySelector("#btn");
    let _ipt = document.querySelector("#ipt");
    let dv = document.querySelector("#dv");
	//给按钮添加事件(这里我们用的是点击事件)
    _btn.addEventListener("click",function () {
 		//获取输入框中输入的值
        let _ip = _ipt.value;
 		//用已经输入到div中的文本 和输入框中将要输入到div中的文本进行拼接(目的是:不让后输入的文本替代前面已经输入的文本)
        dv.innerHTML += _ip + "<br>";
        //输入之后让输入框中的内容变为空字符串
        _ipt.value = "";
    })

函数默认返回值是undefinde的,想要返回值用return
构造函数不用return,默认会返回值