![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：Uncorrected
Teacher's comments：
Collection
Collection
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js</title>
</head>
<body>
<h2>js数组的增删改查</h2>
<script type="text/javascript">
var arr=[‘张三’,’李四’,’王五’,’孙六’,’赵七’];
// alert(arr);
// console.log(arr);
//查看数组的长度
// var a=arr.length;
// console.log(a);
// 数组新增
// 开头新增
var res=arr.unshift(‘数组开头’);
// console.log(res);
// alert(arr);
// console.log(arr);
//尾部新增
var end=arr.push(‘数组结尾’);
// console.log(arr);
// //中间第第四个位置新增
function arrAdd(t,val) {
var res1=[];
for (i =0 ;i<arr.length;i++)
{
if(i == t){
res1.push(val);
}
res1.push(arr[i]);
}
console.log(res1);
}
arrAdd(4,'数据中间');
console.log(arr);
//数据删除
//头部删除
var begDel=arr.shift();
console.log(arr);
//尾部删除
var endDel=arr.pop();
console.log(arr);
//中间删除
function arrDel(t) {
var res1=[];
for (i =0 ;i<arr.length;i++)
{
if(i == t){
continue;
}
res1.push(arr[i]);
}
console.log(res1);
}
arrDel(2);
//数据修改
arr[1]='李四数据修改';
console.log(arr);
//数据查询
var sel=arr.slice(1);
console.log(sel);
// 数组合并
var arr1=['数组合并'];
var arr2 = arr.concat()+arr1;
console.log(arr2);
</script>
</body>
</html>`
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js</title>
</head>
<body>
<h2>函数练习</h2>
<h3>onclick onmouseleave onblur onchange</h3>
<!--onblur 当鼠标离开时触发事件-->
<input type="text" id="username" placeholder="请输入用户名" onblur="pl()">
<br>
<input type="password" id="pwd" placeholder="请输入密码" onblur="pl1()">
<br>
<!--onclick 当按钮被点击是触发 p a div i 等标签都可以被触发-->
<button onclick="submits()">提交</button>
<br>
<div>
<!-- onchange 用户改变输入框内容是触发-->
<select name="" id="sel" onchange="vl()">
<option value="1">手机</option>
<option value="2">pad</option>
<option value="3">电脑</option>
<option value="4">电视</option>
</select>
</div>
<!--<a href="javascript:void (0)" onclick="submits()">提交</a>-->
<!-- onmouseover事件在鼠标移动到时触发 onmouseleave事件在鼠标移出时触发-->
<button onclick="submits()" onmouseleave="down()" onmouseover="up()" id="tj">鼠标事件</button>
<script type="text/javascript">
function vl() {
var vl = document.getElementById(‘sel’).value;
alert(‘你的当期值为：’+vl)
}
function pl() {
var username =document.getElementById(‘username’).value;
if(username==’’)
{
alert(‘请输入你的用户名’);
}
}
function pl1() {
var pwd =document.getElementById(‘pwd’).value;
if(pwd==’’)
{
alert(‘请输入你的密码’);
}
}
function up() {
// console.log(‘鼠标上移’);
document.getElementById(‘tj’).style.color=’red’;
}
function down() {
// console.log(‘鼠标下移’);
document.getElementById(‘tj’).style.color=’black’;
}
function submits() {
var username = document.getElementById(‘username’).value;
var pwd = document.getElementById(‘pwd’).value;
if (username==’’){
return alert(‘请输入用户名’);
}
if ((pwd==’’)){
return alert(‘请输入密码’);
}
alert(‘用户名为：’+username+’密码为：’+pwd);
}
</script>
</body>
</html>`
基本了解了数组的增删改查，了解了部分的事件触发。