1.JS初识
JavaScript是当下最流行的编程语言之一，它主要用来完成页面的开发。
我们都知道 前端三剑客：html、CSS、JS。
- html就相当于人的骨架，CSS 则相当于人的皮肤，最后JS就相当于让一个人能活动起来，能够进行交互。
对于在浏览器上执行的 JS ，可以分为 3 个部分：
- JS的核心语法。
- DOM API：浏览器提供的一组操作 页面元素 的 API。
- BOM API：浏览器提供的一组操作 浏览器窗口的 API。
2.JS的书写形式
1.内嵌式
<body>
<!-- 内嵌式 -->
<script>
// 语句后面可以加分号也可以不加
alert('hello word');
console.log();
</script>
</body>
2.行内式
<body>
<!-- 行内式 -->
<button onclick="alert('hello')">这是一个按钮</button>
<!-- JS中字符串使用 双引号 或者 单引号 都可以 -->
</body>
3.外部式
//cpp.js文件中的内容
alert('hello cpp.js');
<body>
<!-- 外部式 -->
<script src="cpp.js"></script>
</body>
3.JS和用户的交互
1.alert
这个是弹出一个点击方框。
<body>
<script>
alert('hello word');
</script>
</body>
2.console.log
这个我们就比较常用了，它是将结果在日志在 浏览器 的控制台上进行打印。
<body>
<script>
//当JS中有一些语法错误时，它也会在 控制台 上进行打印日志
console.log('hello word');
</script>
</body>
4.JS的基础语法
JS 的基础语法 和 java 的很大一部分都相同，只有在一些地方有所不同。
1.var 和 let
<body>
<script>
// JS 中的变量统一使用的是 var,没有 int String float 等这些
// JS 中创建变量的类型取决于 初始化的值：
var a = 10; //数字类型的变量
var b = 'hello'; //字符串类型的变量
var c = []; //数组类型的变量
//如果不进行初始化，那么该变量的类型默认就是 undefined，值也是 undefined。
var d;
</script>
</body>
<body>
<script>
//let 更符合java的编程习惯,let可以看成是有作用域的。
{
let b = 11;
var c = 11;
}
// 这里是访问不到 b 的。
console.log(b);
// 这里却可以访问到 c。
console.log(c);
</script>
</body>
注意：JS 的变量和 java 中的不同，它是一种 "动态类型"，也就是说它可以在程序运行时更改变量的类型。
而java不行，所以java是 "静态类型"。
<body>
<script>
let a = 10; //数字类型
a = 'hello'; //变成了字符串类型
a = []; //变成了数组类型
console.log(a);//打印结果就是一个空数组
</script>
</body>
2.JS的基本数据类型
- number：数字类型，不区分整数和小数。
- Boolean：布尔类型，真true ，假false。
- String：字符串类型
- undefined：表示未定义的值，值为 undefined
- null：表示空值。
1. number
在 JS 里面也可以用数字进制表示。
<body>
<script>
let a = 10; //十进制
let b = 07; //八进制 0开头
let c = 0xff; //十六进制 0x开头
let d = 0b1111; //二进制 0b开头
console.log(a);
console.log(b);
console.log(c);
console.log(d);
</script>
</body>
特殊的数字值：
- Infinity: 无穷大, 大于任何数字. 表示数字已经超过了 JS 能表示的范围.
- -Infinity: 负无穷大, 小于任何数字. 表示数字已经超过了 JS 能表示的范围.
- NaN: 表示当前的结果不是一个数字
<body>
<script>
//js中最大的数字
let a = Number.MAX_VALUE;
console.log(a*2); //结果为Infinity，表示无穷大。
console.log(-a*2); //结果为-Infinity，表示无穷小。
console.log('hello' - 10); //结果为 NAN ,表示不是一个数字
console.log('hello' + 10); //结果为 ： hello10（会进行字符串拼接）
</script>
</body>
2.字符串类型
在 JS 中表示一个字符串可以使用 双引号 或者 单引号 都可以。所以就会面对以下的情况：
情况一：一个字符串本身就包含 引号。
<body>
<script>
//使用 单双引号进行 搭配。
let a = 'my name is "张三"';
console.log(a);
let b = "my name is '张三'";
console.log(b);
</script>
</body>
情况二：一个字符串中 单双 引号 混用。
<body>
<script>
//和java一样，JS 也是支持 转义字符 的。
let a = ' my \' name \" is \' zhang \" san';
console.log(a);
</script>
</body>
字符串求长度：length
<body>
<script>
let a = 'hello world';
console.log(a.length); //结果：11
let b = "你好,世界！";
console.log(b.length); //结果：6
//length 的单位是 字符。
</script>
</body>
字符串拼接：直接使用 + 号
<body>
<script>
let a = 'hello ';
console.log(a+'word');
</script>
</body>
3.布尔类型
这里与 java 也是不同的，在 JS 中 true 和 false 会被当成 1 和 0 来处理。
<body>
<script>
let a = true;
console.log(a + 10); //结果为 11，这里就会把 true 当成 1 来处理
</script>
</body>
在 java 中 true 就是 true，false 也只是 false。
所以我们说 java 是 强类型 语言。因为它并不是很支持 "隐式类型转换"。
JS 是 弱类型 语言，它就很支持 "隐式类型转换"。
4.undefined 与 null
undefined类型的取值只有一个 ： undefined。
null 类型的取值也只有一个 ： null。
- undefined 是一个 非法的情况，它表示该值没有定义。
- null 却是 合法的情况，它表示该值 "没有值"。
<body>
<script>
let a;
console.log(a); //结果为 ：undefined
let b = null;
console.log(b); //结果为：null
//null 通常配和 || 使用，来进行初始化。
b = b || 0;
console.log(b); //结果为：0
</script>
</body>
3.JS中的比较相等
在 JS 中的比较相等有两组：
- == 和 != ：只比较值是否相等，如果通过 隐式类型转换 后的值相等，也会被判定为 相等。
- === 和 !== ：既比较值是否相等，也比较类型是否相等。
<body>
<script>
let a = 10;
let b = '10';
console.log(a == b); //结果为 ：true (通过隐式类型转换后值相等)
console.log(a === b); //结果为 ：false (类型不同,所以不相等)
</script>
</body>
4. && 和 ||
这两个操作和 java 中的也有很大的不同。
在 java 中，返回的是一个 true 或者 false。但在 JS 中返回的是一个表达式。
c = a || b
- 如果 a 为 真（true），那么 c 的值就是 表达式 a 的值。
- 如果 a 为 假（false），那么 c 的值就是 表达式 b 的值。
c = a && b
- 如果 a 为真（true），那么 c 的值就是 表达式 b 的值。
- 如果 a 为假（false），那么 c 的值就是 表达式 a 的值。
<body>
<script>
let a = 10;
let c = a || 0;
console.log(c);
//通常的用法给 b 设置默认值。
let b = null;
b = b || 0;
console.log(b);
</script>
</body>
5. / 和 %
在 JS 中 /（除）和 java 又有点不同。在 JS 中 / 是有小数位的。
<body>
<script>
console.log(1 / 2); //结果：0.5
console.log(1 % 2); //结果：1
</script>
</body>
5.JS中的数组
在 JS 中，数组和 java 中的有很大的不同。
1. 数组的创建
<body>
<script>
//不是很常用,很java的 ArrayList 有点像
let arr1 = new Array();
//JS中打印数组内容使用 console.log 就行
console.log(arr1);
//创建一个空数组
let arr2 = [];
console.log(arr2);
//创建一个有初始值的数组
let arr3 = [1,2,3,4];
console.log(arr3);
//JS的数组没有具体类型,里面什么类型的元素都能放
let arr4 = [1,'hello',true,undefined,null,NaN];
console.log(arr4);
</script>
</body>
2. 获取数组元素
这里和 java 一样，JS 的数组下标也是从 0 开始。
更java相同的地方：
<body>
<script>
let arr = [1,2,3,4];
//与java一样可以通过for循环拿到所有的值
for(let i = 0; i < arr.length; i++){
console.log(arr[i]);
}
</script>
</body>
不同之处：
<body>
<script>
let arr = [1,2,3,4];
//使用length来获取数组长度
console.log(arr);
console.log(arr.length);
//这种操作再 java 中就会 抛出异常：数组下标越界
//在 JS 中就不会,并且还将数组的长度给改变了。（JS中数组的 length 值是会改变的。）
arr[100] = 10;
console.log(arr);
console.log(arr.length);
console.log(arr[50]); //中间的元素的值也默认是 undefined
let arr = [1,2,3,4];
//原先的数组长度
console.log(arr.length); //结果：4
arr[-1] = 10;
//执行 arr[-1] = 10 后的数组长度
console.log(arr.length); //结果：4
//数组内容
console.log(arr); //结果：[1,2,3,4,-1:10]
//下标-1的值是啥？
console.log(arr[-1]); //结果：10
//总结：我们发现如果给 -1 下标添加一个值,就会给该数组添加一个属性,属性的表现形式为：key：value(键值对)
let arr = [1,2,3,4];
arr['hello'] = 10; //同理也会给 arr 数组添加一个属性，key为 hello ,value 为 10
console.log(arr);
console.log(arr['hello']);
console.log(arr.hello);
//总结：属性并不会影响到数组的元素个数，也就是 arr.length 的值
</script>
</body>
3. 添加元素
在 JS 里，可以通过 push 方法来在数组末尾添加新的元素，和 java 中 ArrayList 里的 add 方法一样。
<body>
<script>
let arr = [1,2,3,4];
arr.push(100);
console.log(arr);
console.log(arr[4]);
</script>
</body>
4. 删除元素
在 JS 中通过 splice 方法，可以完成数组元素的删除。
同时 它 也可以 完成数组元素的 替换和插入。
<body>
<script>
let arr = [1,2,3,4];
console.log(arr); //结果：1,2,3,4
//用于删除元素
//第一个参数：从哪儿开始删除
//第二个参数：删除多少个
arr.splice(1,2);
console.log(arr); //结果：1,4
//使用splice完成元素的插入
arr.splice(1,0,2,3);
console.log(arr); //结果：1,2,3,4
//使用splice完成元素的替换
arr.splice(0,4,5,6,7,8);
console.log(arr); //结果：5,6,7,8
</script>
</body>
6.JS 中的函数
1.函数的定义
<body>
<script>
// 函数的定义
function hello(x,y){
console.log('hello word');
return x + y;
}
// 调用该函数,并接收该返回值
let val = hello(1,2);
console.log(val);
</script>
</body>
在 JS 中并没有 函数 的 重载，但是如果我们先要完成 类似 java 中重载的效果，我们可以使用如下方法：
<body>
<script>
function add(a,b,c,d,e,f,g,h){
//如果传入的实参个数不够，那么多的形参的值为 undefined
//所以在这里就需要进行处理,不然就会出现一个 NAN 的值。
a = a || 0;
b = b || 0;
c = c || 0;
d = d || 0;
e = e || 0;
f = f || 0;
g = g || 0;
h = h || 0;
return a + b + c + d + e + f + g + h;
}
let result1 = add(1,2);
console.log(result1);
let result2 = add(1,2,3);
console.log(result2);
let result3 = add(1,2,3,4);
console.log(result3);
let result4 = add(1,2,3,4,5);
console.log(result4);
</script>
</body>
当然，我们也可以在 同一个 函数 里来传不同的值。
<body>
<script>
function add(a,b){
return a + b;
}
let result1 = add(2,3);
console.log(result1);
let result2 = add('hello','word');
console.log(result2);
let result3 = add('hello',10);
console.log(result3);
</script>
</body>
2.函数表达式
在 JS 中 函数表达式 也是我们经常用到的一个方式。
<body>
<script>
function hello(){
console.log('hello word');
}
//可以将函数赋值给一个变量
let f = hello;
//通过变量再调用
f();
</script>
</body>
通常我们还可以这样写：
<body>
<script>
//在函数定义的时候就完成赋值
let f = function hello(){
console.log('hello word!');
}
f();
</script>
</body>
当然，我们也可以使其更加的简洁：
<body>
<script>
//在这里就可以省略掉 函数的名字，使其更加的简洁
let f = function(){
console.log('hello java');
}
f();
</script>
</body>
3.JS中的作用域
在 JS 中可以在 {} 里面 访问 {}外面的内容。
它的访问规则："逐级向上" 进行查找，如果出现同名的变量，先找到谁就是谁。
<body>
<script>
let num = 10;
let f = function(){
let ret = function(){
console.log(num); //结果为 10
}
ret();
}
f();
</script>
</body>
注意：
<body>
<script>
let num = 10;
let f = function(a){
let num = 20;
let ret = function(a){
console.log(a); //这时如果想要拿到 num = 10 的值,就需要通过 传参的方式来拿到
}
ret(a);
}
f(num);
</script>
</body>
7. JS 中的对象
在 JS 中 对象 是不依托于 类的，并且 JS 中所有的对象都是一个类型：Object类型。
1. 对象的创建
第一种方式（更常用）
<body>
<script>
// 创建对象
let student = {
// 方法和属性都是通过 键值对 的方式来表示
name:'张三',
age:23,
gender:'男',
phone:'123456',
address:'地球村',
// 每个键值对之间使用 , 来分割
sleep:function(){
console.log('呼呼大睡');
},
eat:function(){
console.log('大口吃肉');
},
};
// 使用对象
console.log(student.name);
console.log(student.age);
student.sleep();
student.eat();
</script>
</body>
第二种方式
<body>
<script>
// 和 java 的实例化对象有点像
let student = new Object();
// 添加属性和方法
student.name = '李四';
// 也可以和 操作数组一样 来添加属性
student['age'] = 25;
student.sleep = function(){
console.log('睡觉');
}
student.eat = function(){
console.log('吃饭');
}
// 使用对象
console.log(student.name);
console.log(student.age);
student.sleep();
student.eat();
</script>
</body>
第三种方式，可以批量的创建出一组类似的对象
<body>
<script>
function student(name,age,eat){
this.name = name;
this.age = age;
this.eat = function(){
console.log('吃'+eat);
}
}
let student1 = new student('王五',21,'油条');
console.log(student1.name);
console.log(student1.age);
student1.eat();
let student2 = new student('赵六',26,'包子');
console.log(student2.name);
console.log(student2.age);
student2.eat();
</script>
</body>
8. DOM API
DOM api 就是用来操作 页面上的元素。
当一个页面加载完成之后，就会生成一个 document 全局变量，里面就有一些 属性 和 方法 来让我们操作页面的元素。
<body>
<div class="one">
你好啊
</div>
<!-- JS 要写在 标签 下面，不然拿不到 -->
<script>
//通过 querySelector 只能拿到匹配到的第一个元素的对象
let obj = document.querySelector('.one');
console.log(obj);
</script>
</body>
如果我们想要拿到所有匹配的元素，那么上面的方法是做不到的，这时就要使用 querySelectAll
<body>
<ul>
<li class="one">张三</li>
<li class="one">李四</li>
<li class="one">王五</li>
<li class="one">赵六</li>
</ul>
<script>
// querySelectorAll 拿到的是一个 伪数组，但它也有 length，也能使用 下标 访问。
// 总之 它 和 数组 的操作 很相似。
let obj = document.querySelectorAll('.one');
console.log(obj);
</script>
</body>
9.JS中的事件
在 JS 中很多的代码都是通过 "事件" 来进行触发执行的。
事件：浏览器对用户操作的一个统称。（当然并不都是用户操作触发的）
- 事件的三要素：
- 1.事件源：哪个html元素触发的
- 2.时间类型：鼠标点击事件、鼠标移动事件
- 3.事件的处理程序：就是所需要执行的 JS 代码
<body>
<!-- 鼠标点击事件 -->
<button class="one">这是一个按钮</button>
<script>
//事件源
let obj = document.querySelector('.one');
//事件类型：onclick
//这是一个回调函数（不会立即执行，会在合适的时候被 库/框架 调用）
obj.onclick = function(){
//事件的处理程序：按钮点击之后，在控制台打印一个 hello word
console.log('hello word');
}
</script>
</body>
1.操作元素内容
使用 innerHTML 这个属性来实现。
<body>
<div>hello word</div>
<button>这是一个按钮</button>
<script>
//1.数据源
let obj = document.querySelector('button');
//2.事件类型
obj.onclick = function(){
//3.事件处理程序
//拿到元素的内容
let val = obj.innerHTML;
//打印在控制台上
console.log(val);
}
</script>
</body>
1. 小练习：按钮点击修改元素内容
<body>
<div class="one"><h1>My name is 张三</h1></div>
<button class="two">这是一个按钮</button>
<script>
let obj = document.querySelector('.two');
obj.onclick = function(){
let res = document.querySelector('.one');
res.innerHTML = '<h1>hello word</h1>';
}
</script>
</body>
2.小练习：按钮点击数字加1
<body>
<div>1</div>
<button>加1按钮</button>
<script>
let obj = document.querySelector('button');
obj.onclick = function(){
let res = document.querySelector('div');
let val = res.innerHTML;
//注意：在这里需要将 val 转换成一个 数字类型。
val = parseInt(val);
//加1
val += 1;
//将值又重新写回去
res.innerHTML = val;
}
</script>
</body>
注意：如果是一个 input 这样的 单标签 的话，那么 innerHTML 就不行了，需要使用 value
<body>
<input type="text" class="one" value="0">
<button>按钮</button>
<script>
let obj = document.querySelector('button');
obj.onclick = function(){
let res = document.querySelector('.one');
//通过 value 属性来获取 值
let val = res.value;
val = parseInt(val);
val += 1;
//重写写回去
res.value = val;
}
</script>
</body>
2. 操作元素属性
在 js 中我们可以通过 .属性 名的方式来操作元素的属性。
1. 小练习：图片切换
<body>
<img src="44.jpg">
<script>
let img = document.querySelector('img');
img.onclick = function(){
// 拿到 img 对象 中的 src 属性值
let url = img.src;
// 检查当前显示的是哪张图片
if(url.indexOf('44.jpg') >= 0){
//更改 src 的值
img.src = '142.jpg';
// 同上
}else if(url.indexOf('142.jpg') >= 0){
img.src = '44.jpg';
}
}
</script>
</body>
注意：我们可以使用 console.dir 来打印一个 DOM 对象中的所有属性。
3. 操作表单元素的属性
表单元素和普通的标签元素有所不同，其中的常用的表单属性是：
- value ：input 的值
- checked ：服用框会使用来调整 默认值
- selected ：下拉框会使用来调整 默认值
- type ：input 标签的类型（文本、密码、按钮、文件等）
1. 小练习：按钮点击切换
<body>
<input type="button" value="播放" class="ip">
<script>
let input = document.querySelector('.ip');
input.onclick = function(){
//获取 input 对象的 value 属性
let val = input.value;
//通过判断值的内容,来进行修改
if(val == '播放'){
input.value = '关闭';
}else if(val == '关闭'){
input.value = '播放';
}
}
</script>
</body>
2. 小练习：全选按钮
<body>
<input type="checkbox" class="all">全部选择<br>
<input type="checkbox" class="people">张飞<br>
<input type="checkbox" class="people">刘备<br>
<input type="checkbox" class="people">关羽<br>
<input type="checkbox" class="people">吕布<br>
<script>
//1.实现全选操作
let all = document.querySelector('.all');
let peoples = document.querySelectorAll('.people');
all.onclick = function(){
for(let i = 0; i < peoples.length; i++){
peoples[i].checked = all.checked;
}
}
//2.实现取消全选或自动全选操作
for(let i = 0; i < peoples.length; i++){
//给每个 input 元素都注册一个 点击事件
peoples[i].onclick = function(){
//通过一个函数来判断 全选框 的状态
all.checked = checkPeoples(peoples);
}
}
//检查函数声明
function checkPeoples(peoples){
//每个复选框都要检查一下
for(let i = 0; i < peoples.length; i++){
if(peoples[i].checked == ''){
return '';
}
}
return 'checked';
}
</script>
</body>
4. 修改元素样式
这个本质上也是修改元素属性（style属性）
1. 通过 style 修改 内联样式（点击字体大小加5px）
<body>
<div style="font-size: 20px;">这是一段话</div>
<script>
let div = document.querySelector('div');
div.onclick = function(){
//获取 div 中的 style 属性里的 font-size 属性值
let val = div.style.fontSize;
//将其转换成一个数字
val = parseInt(val);
//大小加5px
val += 5;
//重写写回去
div.style.fontSize = val + 'px'; //注意 parseInt 遇到非数字字符就转化停止了，所以要加单位
}
</script>
</body>
2. 通过 className/classList 修改 CSS 中的 类选择器 样式（夜间开关灯）
<body>
<style>
/* 白天样式 */
.light{
font-size: 10px;
color: black;
background-color: white;
height: 500px;
width: 100%;
}
/* 夜间样式 */
.dark{
font-size: 50px;
color: white;
background-color: black;
height: 500px;
width: 100%;
}
</style>
<div class="light">这是一段话</div>
<button>关灯</button>
<script>
let div = document.querySelector('.light');
let button = document.querySelector('button');
// 按钮点击事件
button.onclick = function(){
//判断当前样式是 白天 还是 黑夜
if(div.className == 'light'){
div.className = 'dark';
button.innerHTML = '开灯';
}else if(div.className == 'dark'){
div.className = 'light';
button.innerHTML = '关灯';
}
}
</script>
</body>
5. 操作节点（新增/删除/移动）
<body>
<div class="container">
</div>
<script>
//1.创建一个新的 div 节点
let newDiv = document.createElement('div');
//2.给这个 div 元素增加一些属性
newDiv.className = 'One';
newDiv.id = 'tes';
newDiv.innerHTML = 'hello word';
//3.将这个新的节点 挂到 dom 树上
let div = document.querySelector('.container');
div.appendChild(newDiv);
</script>
</body>
10. 猜数字游戏
<body>
<button id="rest">重新开始一局游戏</button>
<div>
请输入要猜的数字：
<input type="text" class="inputValue">
<button class="guess">猜</button>
</div>
<div>
已经猜的次数：
<span class="guessCount">0</span>
</div>
<div>
结果：
<span class="guessValue"></span>
</div>
<script>
//先将需要拿到的对象都准备好
let rest = document.querySelector('#rest');
let guess = document.querySelector('.guess');
let inputValue = document.querySelector('.inputValue');
let guessValue = document.querySelector('.guessValue');
let guessCount = document.querySelector('.guessCount');
//1.首先要生成一个随机数 [1,100]
let number = Math.floor((Math.random()*100)+1)
//在控制台打印一下随机数，方便调试
console.log(number);
//2.注册 猜 的点击事件
guess.onclick = function(){
//处理不输入的情况
if(inputValue.value == ''){
return;
}
//3.拿到用户输入的数字
let val = parseInt(inputValue.value);
console.log(typeof(val)); //观察 val 的类型
//4.判断数字的大小
if(val > number){
guessValue.innerHTML = '猜大了';
guessValue.style.color = 'red';
}else if(val < number){
guessValue.innerHTML = '猜小了';
guessValue.style.color = 'blue';
}else{
guessValue.innerHTML = '猜对了';
alert('猜对了！');
location.reload();
}
//5.修改 已经猜的次数
let count = guessCount.innerHTML;
count = parseInt(count);
count += 1;
guessCount.innerHTML = count;
}
//6.注册重新来一把的点击事件
rest.onclick = function(){
//location用来控制页面的链接
location.reload(); //刷新页面
}
</script>
</body>
11. 表白墙
<body>
<style>
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.container{
width: 100%;
}
h1{
font-family: '楷体';
font-size: 60px;
text-align: center;
padding: 10px;
}
p{
font-family: '宋体';
color: grey;
text-align: center;
padding: 4px;
}
.row{
width: 400px;
height: 50px;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
span{
display: block;
width: 80px;
font-size: 20px;
}
.edit{
display: block;
width: 250px;
height: 40px;
font-size: 15px;
text-indent: 0.5em;
outline: none;
line-height: 40px;
}
button{
width: 300px;
height: 40px;
border: none;
background-color: orange;
border-radius: 40px;
font-size: 20px;
color: white;
line-height: 40px;
}
button:active{
background-color: gray;
}
</style>
<div class="container">
<h1>表白墙</h1>
<p>输入后点击提交,会将信息显示在表格中</p>
<div class="row">
<span>谁:</span>
<input type="text" class="edit" id="one">
</div>
<div class="row">
<span>对谁:</span>
<input type="text" class="edit" id="two">
</div>
<div class="row">
<span>说什么:</span>
<input type="text" class="edit" id="three">
</div>
<div class="row">
<button>提交</button>
</div>
</div>
<script>
//准备所需要的dom对象
let container = document.querySelector('.container');
let button = document.querySelector('button');
let one = document.querySelector('#one');
let two = document.querySelector('#two');
let three = document.querySelector('#three');
button.onclick = function(){
//判断一下是否填写完毕
if(one.value == '' || two.value == '' || three.value == ''){
//不再进行下面的操作，直接返回
return;
}
//创建一个新的 div 节点
let div = document.createElement('div');
//将属性添加到新节点中
div.className = 'row';
div.innerHTML = one.value + '对' + two.value + '说' + three.value;
//将新节点挂到dom树上
container.appendChild(div);
//清空 input 输入框中的内容
one.value = '';
two.value = '';
three.value = '';
}
</script>
</body>
