筛选选功能形网站建设学校seo推广培训班
1.函数定义
有名函数
定义一个函数 sum，接收两个参数 a 和 b，返回它们的和。然后调用该函数并输出结果。
实现代码：
function sum(a, b) {return a + b;}console.log(sum(1, 2));
函数的定义需要用到function，sum作为函数名，后面的括号跟的是形参列表。
函数体的作用是返回两数相加之和
然后我们使用console.log输出打印函数的结果到浏览器控制台
相同的输出还有1、alert()提示框输出 2、document.write()输出到浏览器
匿名函数
定义函数，接收两个参数a和b，把这个匿名函数赋值给变量f，通过f调用函数
实现代码：
let f = function (a,b){return a+b;
}
console.log(f(12,34));
匿名函数也就是只有function （）{函数体}，匿名函数直接抛弃了函数名，也就是说这个函数写出来基本就只能调用一次。我们也可以把匿名函数赋值给一个变量。通过变量调用函数
箭头函数
定义箭头函数，接收两个参数a和b，把箭头函数赋值给变量f，输出f调用箭头函数的结果到控制台
let f = (a,b)=> a+b;
console.log(f(12,34))箭头函数相对于前两个来说更加简洁。如果箭头函数的函数体只有一条语句，我们就可以省略大括号，如果不知一个语句大括号就不能省略
2.数组操作
给定一个数组arr = [1,2,3,4,5,6]通过map（）方法让数组的每个元素都平方，返回一个新的数组
let arr = [1,2,3,4,5,6]
let arr2 = arr.map(item => {return item*item
})
console.log(arr2)首先定义了一个数组，我们通过数组的map（）方法去挨个处理数组的元素。然后通过return语句返回这些元素给数组arr2
map()方法的作用是遍历对应的数组，括号内是一个函数，用于处理数组元素。处理函数有两个参数，item值，index下标。在这里我们只用了item也就是数组的值。我们用的函数就是箭头函数，因为只有一个形参，所以省略了小括号。如果需要用到下标我们可以改写为：（item，index）=>{}
3.构解赋值
给定一个对象 person = { name: 'Alice', age: 25, job: 'Engineer' }，使用解构赋值将 name 和 age 提取到变量中，并输出它们。
let person = {name : "alice",age : 25,job : "engineer"
}
const {name, age}= person
console.log(name,age)
我们首先定义了对象，对象包含三个属性name，age，job我们需要解构出这三个属性，但是由于题目并没有要求我们解构job属性，我们就省略
一般来说只可以省略最后面的属性，这个只针对对象的解构。数组的结构可以省略中间的元素。我们只需要const [a,,c]就可以了。在结构数组的时候我们用的是[]方括号，对象使用的是{}大括号
4.事件监听与事件委托
创建一个嵌套div，大的div600*600，小的div300*300 小的div水平垂直居中。设置大div事件监听为单击触发，通过事件委托判断是否是点击小div触发的大div
<head><meta charset="UTF-8"><title>Title</title><style>#div1{width: 600px;height: 600px;background-color: red;display: flex;align-items: center;justify-content: center;}#div2{width: 300px;height: 300px;background-color: blue;}</style>
</head>
<body>
<div id = "div1"><div id = "div2"></div>
</div>
<script>
const div1 = document.getElementById('div1')
const div2 = document.getElementById('div2')div1.addEventListener('click', (e) => {if(e.target.id === 'div2'){alert("div2")}else{alert("div1")}
})
</script>我们先看body部分，我们按照题目要求创建了嵌套div。
然后再看head里面的style，我们给两个div设置了宽高，然后又给第一个div设置了flex布局，让它的项目都水平垂直居中。
通过document.getElementById（）获取对应的元素对象。通过对象.addEventListener（）添加事件监听，这里我们是给div1也就是大的div添加了事件监听，因为小div是包含再div1里面的，所以我们点击小的div也会触发大div的事件监听。这就是事件委托
事件监听里面对应的箭头函数有一个e，这个e可以帮我们判断出我们点击的到底是哪个div。
5.数据渲染
用户输入姓名、性别、年龄、住址、体重（kg） 把数据渲染到表格，数据不能为空并且渲染后数据要清空，表格要求有头部标题。姓名单元格背景色改为灰色
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body{display: flex;align-items: center;justify-content: center;flex-direction: column;}td{border: 1px solid black;width: 250px;text-align: center;}table{border-collapse: collapse;}.td_color{background-color: dimgrey;}</style>
</head>
<body>
<form><table><tr><td>姓名</td><td>性别</td><td>年龄</td><td>住址</td><td>体重</td><td>提交</td></tr><tr><td><input type="text" id="name"></td><td><input type="text" id="gender"></td><td><input type="text" id="age"></td><td><input type="text" id="address"></td><td><input type="text" id="height"></td><td><input type="submit" value = "提交"></td></tr></table>
</form><br>
<br>
<br>
<br><table id="table"><tr><td class ="td_color">姓名</td><td>性别</td><td>年龄</td><td>住址</td><td>体重</td></tr>
</table><script>
const form = document.querySelector('form')
const table = document.querySelector('#table')
form.addEventListener('submit', function(e){e.preventDefault()const name = document.querySelector('#name')const gender = document.querySelector('#gender')const age = document.querySelector('#age')const address = document.querySelector('#address')const height = document.querySelector('#height')if(name.value!=""&&gender.value!=""&&age.value!=""&&address.value!=""&&height.value!=""){table.innerHTML += `<tr><td class ="td_color">${name.value}</td><td>${gender.value}</td><td>${age.value}</td><td>${address.value}</td><td>${height.value}</td></tr>`name.value = ""gender.value = ""age.value = ""address.value = ""height.value = ""}else{alert("data not found")}
})
</script>
</body>
</html>根据题目要求我们可以得出以下结论：数据要手动输入，不能为空。写好的数据要渲染到表格，姓名那一栏需要我们把背景色设置为灰色。
我们首先把HTML代码写好，为了美观我们设置body使用flex布局居中。我们首先使用了一个表单，在表单内内置一个表格，然后进行用户输入的一些相应设置。
然后我们再在表单下面写一个表格，这个表格用于数据的渲染操作。这里值得一提的是我们使用flex布局之后默认的排序方式是左到右的排序，我们需要通过flex-direction设置主轴方向
至此我们HTML的代码写完了，我们再来看js的代码
我们首先获取了form和table的对象。通过给form添加监听事件来触发接下来的操作
当我们按下提交按钮之后会触发相应的函数，我们在函数内首先阻止默认提交行为，通过：事件对象.preventDefault()来阻止。
然后分别获取相应内容的对象，通过对象.value获取输入的值，继续判断输入的值是否是空的，如果是空的提示：data not found
获取到数据之后我们就需要渲染到表格内，我们先前已经获取到表格对象了，我们通过表格对象.inner HTML来进行数据的追加渲染。
到此，这个题就被解出来了