随堂笔记
约 8322 字大约 28 分钟
随堂笔记
1.今日目标和应用
1.JavaScript 校验页面
2.JavaScript 完成轮播图 弹出广告 等2.函数(掌握)
1.函数格式一
<!-- 文档类型声明标签，告知浏览器这个页面采取html版本来显示页面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站，本页面采取英文显示，单也可以书写中文 -->
<html lang="en">
<head>
<!-- 必须书写，告知浏览器以UTF-8编码表编解码中文，如果不书写就会乱码 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 标题标签 -->
<title>title</title>
</head>
<body>
<script type="text/javascript">
/*
js中的函数：
定义格式
function 函数名(参数列表){
函数体
}
*/
function fn(){
console.log("fn....");
}
//调用函数 ：函数名(实参,....);TODO:函数必须被调用才能执行
fn();
//定义函数
function add(a,b){
console.log(a+"---"+b);
//返回
return a+b;
}
//调用add函数
let sum = add(10,20);
console.log(sum);
</script>
</body>
</html>1.小结：
2.格式一：
function 函数名(参数名,参数名,..){
函数体
}3.函数必须被调用才能执行
let 变量名 = 函数名(实参,实参);2.函数格式二
<!-- 文档类型声明标签，告知浏览器这个页面采取html版本来显示页面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站，本页面采取英文显示，单也可以书写中文 -->
<html lang="en">
<head>
<!-- 必须书写，告知浏览器以UTF-8编码表编解码中文，如果不书写就会乱码 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 标题标签 -->
<title>title</title>
</head>
<body>
<script type="text/javascript">
/*
js中的函数：匿名函数，就是没有名字的函数
定义格式
let 函数名 = function(参数列表){
函数体
}
*/
//将匿名函数赋值给一个变量
let add = function(x,y){
console.log(x+"---"+y);
return x+y;
}
//调用函数
let sum = add(1,2);
console.log(sum);
</script>
</body>
</html>3.函数注意事项
<!-- 文档类型声明标签，告知浏览器这个页面采取html版本来显示页面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站，本页面采取英文显示，单也可以书写中文 -->
<html lang="en">
<head>
<!-- 必须书写，告知浏览器以UTF-8编码表编解码中文，如果不书写就会乱码 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 标题标签 -->
<title>title</title>
</head>
<body>
<script type="text/javascript">
/*
js中的函数：注意事项：
1.匿名函数还可以作为另一个函数的参数传递
2.在js中没有函数重载概念，如果存在函数名一样的函数，后出现的函数就会覆盖之前的函数名
3.在js中调用无参函数可以传递实参；调用有参函数可以不传递实参.数据没有丢失会放到js的一个内置数组对象中 arguments
*/
// function fn(x){
// /*
// * x=function(){
// console.log("匿名函数作为参数传递");
// }
// * /
// console.log("fn.....");
// //调用函数x
// x();
// }
//调用fn函数
// 1.匿名函数还可以作为另一个函数的参数传递
// fn(function(){
// console.log("匿名函数作为参数传递");
// });
////////////////////////////////////////////////////////////////////////////////
// 2.在js中没有函数重载概念，如果存在函数名一样的函数，后出现的函数就会覆盖之前的函数名
// function fn2(){
// console.log("fn2......");
// }
// function fn2(a,b){//let a;
// console.log("fn2......"+a+b);
// }
// //调用函数
// // fn2(10,20);
// fn2();//fn2......undefinedundefined
///////////////////////////////////////////////////////////////////////////////////
//3.在js中调用无参函数可以传递实参；调用有参函数可以不传递实参.数据没有丢失会放到js的一个内置数组对象中 arguments
function fn3(){//let arguments =[10,1.2];
console.log("fn3.....");
//遍历数组
for(let i=0;i<arguments.length;i++){
console.log(arguments[i]);
}
}
fn3(10,1.2);
</script>
</body>
</html>3.对象(掌握)
1.数组对象Array
1.第一种定义格式
<!-- 文档类型声明标签，告知浏览器这个页面采取html版本来显示页面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站，本页面采取英文显示，单也可以书写中文 -->
<html lang="en">
<head>
<!-- 必须书写，告知浏览器以UTF-8编码表编解码中文，如果不书写就会乱码 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 标题标签 -->
<title>Title</title>
</head>
<body>
<script type="text/javascript">
/*
创建数组对象方式一：采用Array方式
*/
let arr = new Array(1,2,1.2,"哈哈");
//遍历数组
//使用增强for
// for(let x of arr){//x表示数组的数据
// console.log(x);
// }
//1.采用方式一即上述方式定义数组注意：如果只给一个number类型的值，那么此时数值表示数组长度，数组中的数据都是empty
let arr1=new Array(10);
// console.log(arr1.length);//10
//2.采用方式一即上述方式定义数组注意：如果只给一个number类型的值，那么此时数值表示数组长度，要求不能给小数，数组长度不能是小数
// let arr2=new Array(3.14);
// console.log(arr2.length);
//3.采用方式一即上述方式定义数组注意：如果只给一个非number类型的值， 那么此时数值表示数组的元素
let arr3=new Array("锁哥");
// console.log(arr3.length);//长度是1 数据是 ['锁哥']
//4.js中的数组长度是可变的
let arr4=new Array(10,20,1.2,"柳岩");//数组长度是4
//给索引是7的位置添加数据
arr4[7]="牛";//7表示索引 数据： [10, 20, 1.2, '柳岩', empty × 3, '牛'] 长度变为8
let arr5=new Array(10,20,1.2,"柳岩");//数组长度是4
//更改长度
arr5.length=2;//[10, 20]
</script>
</body>
</html>2.第二种定义格式
<!-- 文档类型声明标签，告知浏览器这个页面采取html版本来显示页面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站，本页面采取英文显示，单也可以书写中文 -->
<html lang="en">
<head>
<!-- 必须书写，告知浏览器以UTF-8编码表编解码中文，如果不书写就会乱码 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 标题标签 -->
<title>Title</title>
</head>
<body>
<script type="text/javascript">
/*
创建数组对象方式二：采用中括号方式
*/
let arr1=[10,1.2,"呵呵"];
//定义数组
let arr2=[10]; //10表示数组元素，长度是1
</script>
</body>
</html>3.常见属性和函数
<!-- 文档类型声明标签，告知浏览器这个页面采取html版本来显示页面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站，本页面采取英文显示，单也可以书写中文 -->
<html lang="en">
<head>
<!-- 必须书写，告知浏览器以UTF-8编码表编解码中文，如果不书写就会乱码 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 标题标签 -->
<title>Title</title>
</head>
<body>
<script type="text/javascript">
/*
数组Array对象中的函数
*/
let arr = [10, 1.2, '哈哈'];
//1.push() 将新元素添加到数组的末尾，并返回新的长度。
console.log(arr.push(true,100,10));//6 [10, 1.2, '哈哈', true, 100, 10]
/*
2.splice(index,n) 从数组中添加/删除元素。
index表示从哪个索引删除
n表示删除数据的个数
*/
let arr1 = [10, 1.2, '哈哈'];
//需求:删除数据1.2 哈哈
arr1.splice(1,2);//第一个参数1表示arr1数组的索引，从1索引开始删除 第二个参数2表示删除2个数据
</script>
</body>
</html>2.正则对象RegExp
<!-- 文档类型声明标签，告知浏览器这个页面采取html版本来显示页面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站，本页面采取英文显示，单也可以书写中文 -->
<html lang="en">
<head>
<!-- 必须书写，告知浏览器以UTF-8编码表编解码中文，如果不书写就会乱码 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 标题标签 -->
<title>Title</title>
</head>
<body>
<script type="text/javascript">
/*
js中的正则对象RegExp讲解
1.在js中创建正则有两种方式：
1）new RegExp("^正则符号$");
2）/^正则符号$/; 建议使用
2.RegExp正则对象中的验证函数
test(被验证的字符串) 如果被验证的字符串满足正则对象中的表达式则test函数返回true，否则返回false
*/
//需求：验证指定字符串长度是否是6
//1.创建正则对象
// let reg = new RegExp("^.{6}$");
let reg = /^.{6}$/;
//2.使用正则的对下调用验证的函数test
let boo = reg.test("abcde");
//3.判断
if(boo){
console.log("校验通过");
}else{
console.log("校验失败");
}
</script>
</body>
</html>3.String对象
<!-- 文档类型声明标签，告知浏览器这个页面采取html版本来显示页面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站，本页面采取英文显示，单也可以书写中文 -->
<html lang="en">
<head>
<!-- 必须书写，告知浏览器以UTF-8编码表编解码中文，如果不书写就会乱码 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 标题标签 -->
<title>Title</title>
</head>
<body>
<script type="text/javascript">
/*
String字符串对象
*/
//1.创建对象 了解
let s = new String("abc");
console.log(s);
console.log(s.toString());//"abc"
//2.创建对象 掌握
let s1="abc";
console.log(s1);//"abc"
//3.创建对象 掌握
let s2='abc';
console.log(s2);//"abc"
//4.常见属性：length 表示求字符串的字符个数或者字符串长度
console.log(s2.length);//3
//5.常见函数
//5.1charAt() 返回在指定位置的字符。 参数表示索引，索引从0开始
//创建对象
let s3="黑马程序员程序员";
console.log(s3.charAt(2));//2表示索引 程
//5.2.indexOf() 检索字符串。 查找字符串在指定字符串中存在的索引，如果不存在返回-1
console.log(s3.indexOf("程序员"));//2 这里程序员在s3字符串中最开始出现的索引是2
console.log(s3.lastIndexOf("程序员"));//5 从右往左查找第一次出现的索引
</script>
</body>
</html>注意：求字符串长度是属性length不是函数length()。
4.自定义对象(很重要)
<!-- 文档类型声明标签，告知浏览器这个页面采取html版本来显示页面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站，本页面采取英文显示，单也可以书写中文 -->
<html lang="en">
<head>
<!-- 必须书写，告知浏览器以UTF-8编码表编解码中文，如果不书写就会乱码 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 标题标签 -->
<title>Title</title>
</head>
<body>
<script type="text/javascript">
/*
自定义对象：
let 对象名称 = {
属性名称1:属性值1,
属性名称2:属性值2,
...
函数名称:function (形参列表){}
...
};
*/
let person ={
//属性名:属性值
name:"柳岩",
address:"湖南",
age:18,
//定义函数 函数名:function(形参列表){}
eat:function(){
//TODO:如果在自定义对象中使用当前自定义对象中的其他属性或者函数那么格式：this.属性名或者this.函数名(实参);
console.log("干饭人，干饭魂..."+this.address);//this表示当前对象即person
console.log("干饭人，干饭魂..."+person.address);//this表示当前对象即person
}
};
//获取name和age的值并输出控制台
console.log(person.name);//柳岩 获取属性值：对象名.属性名
console.log(person.age);//18
//调用函数 对象名.函数名(实参);
person.eat();
</script>
</body>
</html>4.BOM对象（掌握）
1.window对象
<!-- 文档类型声明标签，告知浏览器这个页面采取html版本来显示页面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站，本页面采取英文显示，单也可以书写中文 -->
<html lang="en">
<head>
<!-- 必须书写，告知浏览器以UTF-8编码表编解码中文，如果不书写就会乱码 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 标题标签 -->
<title>Title</title>
</head>
<body>
<script type="text/javascript">
/*
1.确认框
let result = window.confirm(提示信息);
点击确定按钮，返回true
点击取消按钮，返回false
*/
// let boo = window.confirm("这么好的商品确认删除吗?");
// if(boo){
// //输出
// console.log("确认删除，将当前删除商品的id传递到后台服务器");
// }else{
// //输出
// console.log("不删除");
// }
/*
2.定时器：
let 变量名 = window.setInterval(匿名函数,毫秒);
说明：该函数表示js中的定时器，每隔多少毫秒就会执行一次匿名函数体中的函数体
取消定时器：
window.clearInterval(定时器变量名);
*/
//开启定时器，每隔1秒输出一次hello
// window.setInterval(function(){
// console.log("hello");
// },1000);
//开启定时器，页面被加载3秒后有个延迟在输出一次hello，只输出一次
// console.log("hello");
//timer 这里表示定时器的变量名
// let timer = window.setInterval(function(){
// console.log("hello");
// //取消定时器
// window.clearInterval(timer);
// },3000);
/*
let 变量名 = window.setTimeout(匿名函数,毫秒)
说明：该函数表示js中的定时器，每隔多少毫秒就会执行一次匿名函数体中的函数体,只会执行一次
*/
//开启定时器，页面被加载3秒后有个延迟在输出一次hello，只输出一次
window.setTimeout(function(){
console.log("hello");
},3000);
</script>
</body>
</html>2.window对象练习_切换灯泡图片
<!-- 文档类型声明标签，告知浏览器这个页面采取html版本来显示页面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站，本页面采取英文显示，单也可以书写中文 -->
<html lang="en">
<head>
<!-- 必须书写，告知浏览器以UTF-8编码表编解码中文，如果不书写就会乱码 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 标题标签 -->
<title>Title</title>
</head>
<body>
<!--
onclick属于js中的单击事件，只要单击当前开灯的input按钮标签就会执行该事件，调用该事件的js函数on()
-->
<input type="button" onclick="on()" value="开灯">
<!-- 引入灯泡的图片 -->
<img id="myImage" border="0" src="imgs/off.gif" style="text-align:center;">
<input type="button" onclick="off()" value="关灯">
<script>
//修改img标签的src属性值变为imgs/on.gif===》src="imgs/off.gif" ===》src="imgs/on.gif"
function on(){
/*
1.document.getElementById('myImage') 根据标签<img id="myImage" border="0" src="imgs/off.gif" style="text-align:center;">
的id属性值获取img整体标签对象，
2.document.getElementById('myImage').src='imgs/on.gif'; 使用获取的img标签对象调用img标签的src属性并赋值为imgs/on.gif
*/
document.getElementById('myImage').src='imgs/on.gif';
}
//修改img标签的src属性值变为imgs/off.gif===》src="imgs/on.gif" ===》src="imgs/off.gif"
function off(){
document.getElementById('myImage').src='imgs/off.gif'
}
/*
需求：每隔一秒，灯泡切换一次状态
就是每隔一秒更改一次<img id="myImage" border="0" src="imgs/off.gif" style="text-align:center;">标签的src属性值
这里我们只需要每隔一秒调用上面的js中的on或者off函数即可
*/
//1.开启定时器
//2.TODO:定义变量x,并且给初始值
let x=0;
window.setInterval(function(){
//3.切换图片 on() off()函数 先执行on() 过一秒在执行off()
if(x % 2 == 0){
//开灯
on();
}else{
//关灯
off();
}
//4.修改x变量
x++;
},1000);
</script>
</body>
</html>3.history(了解)
表示浏览器访问的历史记录
<!-- 文档类型声明标签，告知浏览器这个页面采取html版本来显示页面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站，本页面采取英文显示，单也可以书写中文 -->
<html lang="en">
<head>
<!-- 必须书写，告知浏览器以UTF-8编码表编解码中文，如果不书写就会乱码 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 标题标签 -->
<title>Title</title>
</head>
<body>
<a href="demo03.html">跳转到demo03.html页面</a>
<!-- 点击下面的按钮执行js的fn函数 -->
<button onclick="fn()">-></button>
<script type="text/javascript">
/*
history历史记录对象
*/
function fn(){
//前进
window.history.forward();
}
</script>
</body>
</html><!-- 文档类型声明标签，告知浏览器这个页面采取html版本来显示页面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站，本页面采取英文显示，单也可以书写中文 -->
<html lang="en">
<head>
<!-- 必须书写，告知浏览器以UTF-8编码表编解码中文，如果不书写就会乱码 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 标题标签 -->
<title>Title</title>
</head>
<body>
<button onclick="fn1()"><-</button>
<script type="text/javascript">
/*
history历史记录对象
*/
function fn1(){
//后退
window.history.back();
}
</script>
</body>
</html>4.location(掌握)
<!-- 文档类型声明标签，告知浏览器这个页面采取html版本来显示页面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站，本页面采取英文显示，单也可以书写中文 -->
<html lang="en">
<head>
<!-- 必须书写，告知浏览器以UTF-8编码表编解码中文，如果不书写就会乱码 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 标题标签 -->
<title>Title</title>
</head>
<body>
<script type="text/javascript">
/*
location对象：
需求：浏览器一加载就会跳转到百度页面
*/
// window.location.href="http://www.baidu.com";
//定时器
window.setTimeout(function(){
window.location.href="http://www.baidu.com";
},3000);
</script>
</body>
</html>5.DOM(掌握)
1.介绍
1.DOM:文档对象模型，操作html标签的文本 属性 css样式 以及事件的。
2.DOM中将所有的标签封装成对象 img标签 ===>Image 对象
3.所有标签的父对象是Element。
2.获取元素的方法
<!-- 文档类型声明标签，告知浏览器这个页面采取html版本来显示页面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站，本页面采取英文显示，单也可以书写中文 -->
<html lang="en">
<head>
<!-- 必须书写，告知浏览器以UTF-8编码表编解码中文，如果不书写就会乱码 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 标题标签 -->
<title>Title</title>
</head>
<body>
<img id="light" src="imgs/off.gif"> <br>
<div class="cls">传智教育</div> <br>
<div class="cls">黑马程序员</div> <br>
<input type="checkbox" name="hobby"> 电影
<input type="checkbox" name="hobby"> 旅游
<input type="checkbox" name="hobby"> 游戏
<br>
<script>
/*
获取：使用Document对象的方法来获取
* getElementById：根据id属性值获取，返回一个Element对象
* getElementsByTagName：根据标签名称获取，返回Element对象数组
* getElementsByName：根据name属性值获取，返回Element对象数组
* getElementsByClassName：根据class属性值获取，返回Element对象数组
*/
//1. getElementById：根据id属性值获取，返回一个Element对象
//获取img标签：<img id="light" src="imgs/off.gif">
let oImg = document.getElementById("light");//参数light表示img标签的id属性值 oImg 就是<img id="light" src="imgs/off.gif">标签对象
console.log(oImg);
//2. getElementsByTagName：根据标签名称获取，返回Element对象数组
//获取上述所有的div标签
let arrDivs = document.getElementsByTagName("div");//参数div表示标签名
//3. getElementsByName：根据name属性值获取，返回Element对象数组
//获取上述所有的name属性值是hobby的标签
let arrNames = document.getElementsByName("hobby");//参数hobby是上述标签<input type="checkbox" name="hobby"> 的name属性值
//4. getElementsByClassName：根据class属性值获取，返回Element对象数组
//获取class是cls的标签
let arrCls = document.getElementsByClassName("cls");//参数cls是标签<div class="cls">传智教育</div> 的class属性值
</script>
</body>
</html>3.元素的使用
<!-- 文档类型声明标签，告知浏览器这个页面采取html版本来显示页面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站，本页面采取英文显示，单也可以书写中文 -->
<html lang="en">
<head>
<!-- 必须书写，告知浏览器以UTF-8编码表编解码中文，如果不书写就会乱码 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 标题标签 -->
<title>Title</title>
</head>
<body>
<img id="light" src="imgs/off.gif"> <br>
<div class="cls">传智教育</div>
<br>
<div class="cls">黑马程序员</div>
<br>
<input type="checkbox" name="hobby"> 电影
<input type="checkbox" name="hobby"> 旅游
<input type="checkbox" name="hobby"> 游戏
<br>
<script>
//1. getElementById：根据id属性值获取，返回一个Element对象
let objImg = document.getElementById("light");//<img id="light" src="imgs/off.gif">
// 修改图片地址变为imgs/on.gif
/*
TODO:objImg表示<img id="light" src="imgs/off.gif">对象，img标签所属Image 对象，因此这里我们可以使用objImg调用Image 对象中的属性或者函数
Image对象的属性：src 设置或返回图像的 URL。
*/
objImg.src="imgs/on.gif";
//2. getElementsByTagName：根据标签名称获取，返回Element对象数组
let divs = document.getElementsByTagName("div");
/*
style:设置元素css样式
innerHTML：设置元素内容
*/
for (let i = 0; i < divs.length; i++) {
//获取div标签对象
let objDiv = divs[i];//objDiv表示<div class="cls">传智教育</div>所属Div
//设置字体颜色为红色 标签对象.style 设置或返回元素的 style 属性。
objDiv.style.color="red";//标签对象.style.css样式名 = "样式值"
//更改文本 ：传智大学 标签对象.innerHTML 设置或返回元素的文本内容。
objDiv.innerHTML="传智大学";
}
//3. getElementsByName：根据name属性值获取，返回Element对象数组
let hobbys = document.getElementsByName("hobby");
for (let i = 0; i < hobbys.length; i++) {
//获取每个复选框标签对象
let objHobby = hobbys[i];//objHobby所属对象Checkbox 对象
//设置复选框被选中 ==>Checkbox 对象 checked 属性表示设置或返回 checkbox 是否应被选中。
//checked属性值是true表示被选中，值是false表示不被选中
objHobby.checked=true;
}
</script>
</body>
</html>4.事件绑定介绍
<!-- 文档类型声明标签，告知浏览器这个页面采取html版本来显示页面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站，本页面采取英文显示，单也可以书写中文 -->
<html lang="en">
<head>
<!-- 必须书写，告知浏览器以UTF-8编码表编解码中文，如果不书写就会乱码 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 标题标签 -->
<title>Title</title>
</head>
<body>
<!-- 给下面的标签绑定单击事件,只要单击下面的按钮就会执行fn函数 -->
<input type="button" value="点我试试" onclick="fn();"/>
<script type="text/javascript">
/*
事件名作为标签属性名，在属性值中调用js函数。
*/
function fn(){
console.log("我被点了");
}
</script>
<input type="button" value="点我试试" id="btn" class="cls"/>
<script type="text/javascript">
/*
标签对象.事件名=function(){
}
*/
//document.getElementById("btn") 获取的是<input type="button" value="点我试试" id="btn"/>标签对象
//只有是标签对象才可以绑定事件，如果是数组不能直接绑定需要遍历数组取出每个标签对象绑定事件
// document.getElementById("btn").onclick=function(){
// console.log("我又被点了");
// }
// document.getElementsByClassName("cls").onclick=function(){//错误的，document.getElementsByClassName("cls")是数组
// console.log("我又被点了");
// }
/*
document.getElementsByClassName("cls") 获取的内容是[input标签对象]
document.getElementsByClassName("cls")[0] 获取上述数组中索引是0的标签对象===》input标签对象
*/
document.getElementsByClassName("cls")[0].onclick=function(){//错误的，ocument.getElementsByClassName("cls")是数组
console.log("我又被点了");
}
</script>
</body>
</html>5.常见事件
<!-- 文档类型声明标签，告知浏览器这个页面采取html版本来显示页面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站，本页面采取英文显示，单也可以书写中文 -->
<html lang="en">
<head>
<!-- 必须书写，告知浏览器以UTF-8编码表编解码中文，如果不书写就会乱码 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 标题标签 -->
<title>Title</title>
</head>
<body>
<form id="register" action="#">
<input type="text" name="username" id="username"/>
<input type="submit" value="提交">
</form>
<script>
//需求：给form表单绑定提交事件，然后将数据提交到后台服务器
/*
TODO:如果输入框输入值则可以提交表单，如果输入框没有输入值不能提交表单
*/
//1.给上述表单绑定提交事件
document.getElementById("register").onsubmit=function(){
//alert("表单提交了");
//2.获取输入框输入的值
//document.getElementById("username") 获取的是标签对象<input type="text" name="username" id="username"/>
let usernameValue = document.getElementById("username").value;
//3.判断usernameValue是否是空字符
if(usernameValue === "" || usernameValue === ''){
//不能提交表单 TODO:对于onsubmit事件来说，如果可以提交表单，那么绑定的匿名函数返回true(默认的)，反之返回false
return false;
}else{
//可以提交表单
return true;
}
}
</script>
</body>
</html>1.表单提交事件，onsubmit。对于该事件，如果阻止表单提交，绑定的匿名函数体返回false.可以提交表单返回true.
onload事件
<!-- 文档类型声明标签，告知浏览器这个页面采取html版本来显示页面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站，本页面采取英文显示，单也可以书写中文 -->
<html lang="en">
<head>
<!-- 必须书写，告知浏览器以UTF-8编码表编解码中文，如果不书写就会乱码 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 标题标签 -->
<title>Title</title>
<script>
//需求：给form表单绑定提交事件，然后将数据提交到后台服务器
/*
TODO:如果输入框输入值则可以提交表单，如果输入框没有输入值不能提交表单
*/
//1.给上述表单绑定提交事件
//null
/*
TODO:如果将获取form标签的js代码放到form标签上面，那么js引擎在执行js代码的时候例如：
document.getElementById("register") 由于浏览器还没有将form标签加载到内存中，因此这行代码
document.getElementById("register")是获取不到form标签的
TODO:解决问题：我们可以先让浏览器加载下面的html标签，然后回来在执行下面的js代码即可
可以将操作html标签的js代码放到onload时间绑定的函数中即可
*/
window.onload=function(){
//当整个页面的html 图片 css都执行完在执行该函数体代码
console.log(document.getElementById("register"));
document.getElementById("register").onsubmit=function(){
//alert("表单提交了");
//2.获取输入框输入的值
//document.getElementById("username") 获取的是标签对象<input type="text" name="username" id="username"/>
let usernameValue = document.getElementById("username").value;
//3.判断usernameValue是否是空字符
if(usernameValue === "" || usernameValue === ''){
//不能提交表单 TODO:对于onsubmit事件来说，如果可以提交表单，那么绑定的匿名函数返回true(默认的)，反之返回false
return false;
}else{
//可以提交表单
return true;
}
}
}
</script>
</head>
<body>
<form id="register" action="#">
<input type="text" name="username" id="username"/>
<input type="submit" value="提交">
</form>
</body>
</html>6.js综合案例_校验表单(课下必须完成)
<!-- 文档类型声明标签，告知浏览器这个页面采取html版本来显示页面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站，本页面采取英文显示，单也可以书写中文 -->
<html lang="en">
<head>
<!-- 必须书写，告知浏览器以UTF-8编码表编解码中文，如果不书写就会乱码 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 标题标签 -->
<title>欢迎注册</title>
<link href="css/register.css" rel="stylesheet">
</head>
<body>
<div class="form-div">
<div class="reg-content">
<h1>欢迎注册</h1>
<span>已有帐号？</span> <a href="#">登录</a>
</div>
<form id="reg-form" action="#" method="get">
<table>
<tr>
<td>用户名</td>
<td class="inputs">
<!-- <input name="username" type="text" id="username" onblur="checkUsername()">-->
<!-- TODO:给下面的用户名输入框绑定一个离焦事件，鼠标离开输入框焦点就调用函数checkUsername() -->
<input name="username" type="text" id="username" onblur="checkUsername()">
<br>
<!--display: none 属于css语法，表示隐藏标签 -->
<span id="username_err" class="err_msg" style="display: none">用户名不太受欢迎</span>
</td>
</tr>
<tr>
<td>密码</td>
<td class="inputs">
<input name="password" type="password" id="password" onblur="checkPassword()">
<br>
<span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
</td>
</tr>
<tr>
<td>手机号</td>
<td class="inputs"><input name="tel" type="text" id="tel" onblur="checkTel()">
<br>
<span id="tel_err" class="err_msg" style="display: none">手机号格式有误</span>
</td>
</tr>
</table>
<div class="buttons">
<input value="注 册" type="submit" id="reg_btn">
</div>
<br class="clear">
</form>
</div>
<script>
//1. 验证 用户名是否符合规则：长度 6~12,单词字符组成
function checkUsername(){
//1.1 获取用户名输入框输入的值
let usernameValue = document.getElementById("username").value;
//1.2 创建正则对象 new RegExp("\\w");
//单词字符 : \w
let reg=/^\w{6,12}$/;
//1.3判断输入的值是否满足正则 正则对象.test(被验证的字符串)
if(reg.test(usernameValue)){
//1.4被验证的字符串满足正则即合法
//隐藏<span id="username_err" class="err_msg" style="display: none">用户名不太受欢迎</span>显示出来
document.getElementById("username_err").style.display="none";
//提交表单
return true;
}else{
//被验证的字符串满足不正则即非法，这里需要将标签
// <span id="username_err" class="err_msg" style="display: none">用户名不太受欢迎</span>显示出来
//js操作css样式：标签对象.style.样式名 = 样式值
document.getElementById("username_err").style.display="block";
//阻止表单提交
return false;
}
}
//2. 验证 密码是否符合规则:长度 6~12任意字符
function checkPassword(){
//2.1 获取密码框的值
let passwordValue = document.getElementById("password").value;
//2.2创建正则对象
let reg=/^.{6,12}$/;
//2.3判断密码框的值是否满足正则
if(reg.test(passwordValue)){
//2.4满足正则，隐藏span标签
document.getElementById("password_err").style.display="none";
//2.5可以提交表单
return true;
}else{
//2.6不满足正则，显示span标签
document.getElementById("password_err").style.display="block";
//2.7不可以提交表单
return false;
}
}
//3. 验证 手机号是否符合规则：长度 11，数字组成，第一位是1
function checkTel(){
//3.1 获取手机号输入框的值
let telValue = document.getElementById("tel").value;
//3.2创建正则对象 \d 表示[0-9] \d{9} 这里表示从第三位开始正好出现9次数字
let reg=/^1[356789]\d{9}$/;
//3.3判断手机号的值是否满足正则
if(reg.test(telValue)){
//3.4满足正则，隐藏span标签
document.getElementById("tel_err").style.display="none";
//3.5可以提交表单
return true;
}else{
//3.6不满足正则，显示span标签
document.getElementById("tel_err").style.display="block";
//3.7不可以提交表单
return false;
}
}
//4. 表单是否可以提交
//4.1给form标签绑定提交表单事件onsubmit
document.getElementById("reg-form").onsubmit=function(){
//4.2 三个输入框只要有一个非法就阻止表单提交，都合法才能提交表单
return checkUsername() && checkPassword() && checkTel();
}
</script>
</body>
</html>7.浏览器debug(掌握)
1.使用浏览器打开页面然后按f12
2.设置断点
3.常见按钮
8.今日反馈和作业
能够在JavaScript中定义函数
1.function 函数名(参数名,参数名,..){
return;
}
2.let 变量名 = function(){}
3.标签对象.事件名 = function(){}
能够使用JavaScript提供的Array对象、String对象
1.Array数组对象
1）创建数组 let 数组名= new Array(数值,数值,....); 只有一个number值，表示数组长度 不能是小数
let 数组名=[数值,数值,...];
2)数组长度可变 存储的数值类型不统一
3）push() 向数组末尾添加元素
4)splice(删除数据的索引，删除数据的个数)
2.String：
1）创建对象 let 对象名 =""或者''
2）获取字符串的长度：字符串对象.length
能够使用JavaScript自定义对象
let 对象名={
属性名:属性值,
属性名:属性值,
....
函数名:function(参数名,...){
//在函数中使用属性：this.属性名 this.get函数名()
}
}
对象名.属性名 获取属性值
对象名.函数名(实参);
能够使用Window对象弹出警告框、确认提示框
1.警告框 ：window.alert(弹出信息);
2.确认提示框：let result = window.confirm(提示信息); 点击确定按钮，返回值是true,点击取消返回false
能够使用Window对象设置定时器
1.一直执行的定时器：
let 变量名 = window.setInterval(function(){},毫秒); 取消定时器 window.clearInterval(定时器变量名)
2.只会执行一次的定时器：
window.setTimeout(function(){},毫秒);
能够使用Location对象跳转页面
window.location.href="跳转地址";
能够使用Document对象获取Element对象
1.根据标签的id属性值获取的一个标签对象: document.getElementById("id属性值")
2.根据标签名获取多个标签： document.getElementsByTagName("标签名"); 是数组
3.根据name属性值获取多个标签： document.getElementsByName("name属性值"); 是数组
4.根据class属性值获取多个标签： document.getElementsByClassName("class属性值"); 是数组
能够为元素绑定事件
1.事件名作为标签属性名，在属性值中调用js函数 <标签名 事件名="调用js函数" 。。。。。
2.标签对象.事件名=function(){}
能够说出常见事件：单击事件、失去焦点事件、获得焦点事件、鼠标移到元素之上事件、鼠标移除事件、表单提交事件
1.单击事件 onclick
2.失去焦点事件 : 输入框 onblur
3.获得焦点事件:onfocus 输入框
4.鼠标移到元素之上事件：onmouseover
5.鼠标移除事件:onmouseout
6.表单提交事件:onsubmit作业：
1.课上的注册表单验证
2.基础作业