let与var：两个都是js的变量，在es6之前使用的都是var，在es6之后用的是let，js中也有常量相当于java中的final，定义了以后就不能再改变
js中的数据类型：
? ? ? ? ? ? 1：原始数据类型：number：①：数字类型? ②：string：字符类型? 使用单引号双引号都行，建议单引号? ?③：boolean：布尔类型? true? false? ? ④：null：空类型? ?⑤：undefined：未定义类型?
? ??
//可以使用typeof查看是什么类型 例如下边的a名字的数据 就可以 let type = typeof a; 返回的就是这个a的数据类型
let a = 10; //number类型
let b = 1.2; //number类型
let c = '张bi晨'; //String
let x; //undefind
let date = new Date(); //获取当前系统时间 引用数据类型
console.log(1-'abc'); NaN 报错 因为这不能使用number类型和string类型进行相减
? ? ? ? ? ? 2：引用数据类型：Object
js的运算符：
? ? ? ? ? 1：? ==与===区别：==是直接比较的内容，只要是内容相等即使数据类型不一样也是true
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ===：实现比较数据类型，如果两个数据类型不一样直接false如果数据类型一样数值也一样才会是true
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? !=是==取反? ? ? !==是===取反
? ? ? ? ?2：逻辑运算符：&&? ?||? ?！? ?感觉和java差不多
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?js中有六种假：false? ? 0? ? ' '? 或者" "? null? NaN? 0
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
/*
逻辑运算符：
&& || !
注意：
1. 在js中逻辑运算符不仅仅针对布尔类型的运算，可以是任意类型 字符 数字等，最后结果是布尔类型
2.在js中有六种假：
false 0 ''或者"" NaN null undefined
*/
if(0 && true){//0 && true :0是假的，&&特点是一徦即假
console.log('真的');
}else{
console.log('假的');
}
if(10 && true){//0 && true :10是真的，&&特点是一徦即假
console.log('真的');
}else{
console.log('假的');
}
if((1-'abc') || '锁哥'){//1-'abc' 是NaN 类型 属于假的类型，'锁哥' 是真的，||特点是一真即真
console.log('真的');
}else{
console.log('假的');
}数据类型转换：? 在js中所有对象都可以使用window对象调用，window可以省略
? ? ? ? ? ? ? ? ? ? ? ? ? ?比如将? let s = '123abc'；转换为number类型那么就是这样写的window.parentInt(s)? ? 又因为window可以说省略所以可以这样写?parentInt(s)
? ? ? ? ? ? ? ? ? ? ? ? ? ?在这里parentInt是从前给后来的转换的时候，123abc转换后就是123，遇到了后边的abc就停止了，如果是一开始就是abc那么就NaN，比如parentInt('abc123')那么就是NaN
? ? ? ? ? ? ? ? ? ? ? ? 还可以转化boolean类型的，例如Number(true)? //返回的就是1? ?如果是false那么就是0
?js中的函数：? ? ?js中函数格式:function 函数名(参数) {......};? 调用函数：fn(参数);?? ? ? ? 在函数中也可以写return? ?返回值结束函数体
? ? ? ? ? ? ? ? ? ? ? ? ? 使用匿名函数：function fn(参数1，参数2..){操作。。}；也可以用一个let fn =???function fn(参数1，参数2..){操作。。}；来接收匿名函数? ? ? ? ? ?
js中的对象:? ? ?
? ? ? ?数组，可以添加任意类型，一个数组可以是1，哈哈，true在一个数组：方式一：let arr = new Array(只有一个number整数类型的)；那么就是表示数组长度，它里面的值为empty
? ? ? ? ? ? ? ? ?方式二：let arr = new Array('哈哈')；//表示的是长度为1的数组值为哈哈
? ? ? ? ? ? ? ? ?方式三：let arr = new Array(1,2,3); //表示长度为3的数组值为1，2，3
? ? ? ? ? ? ? ? ?方式四：let arr = [1,2,3,4];? ?直接用[]括号给里面填充值然后当数组的值
? ? ? ? ? ? ? ? ?这里面方式一如果是小数点那么就会报错，当只有一个number类型的时必须时整数因为代表的是数组长度
? ? ? ? ? ? ? ? ? 数组的长度是可以改变的：例如本来方式三的数组的长度是3，可以再写? arr.length = 2;? 那么此时数组的长度就变为了2，值为1，2长度2以后的值就不要了
? ? ? ? ?数组的push:将数据添加到数组的末尾
?? ? ? ? ? ? ? ? ? ? ? ? ?例如：let arr = [1,2,4];? ?arr.push('aa','bb');? ?那么这个数组就是? 1，2，4，‘aa’,‘bb’
? ? ? ? ? splice：删除数据也可以添加数据：例如：let arr = [1,2,4];?
? ? ? ? ? ? ? ? ? ? ? 删除：? arr.splice(1,2)l那么就是删除第一个索引开始删除两个最后数组就是1
? ? ? ? ? ? ? ? ? ? ? 新增：? arr.splice(1,0,'哈哈'，‘嘻嘻’);? 就是在第一个索引前新增，0是代表新增，0后面的参数就是新增的内容? ?最后就是1，2，4，哈哈，嘻嘻
?正则表达式：两种方式：①:let reg = new RegExp("^正则符号$");
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ②：let reg = /^正则表达式$/;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?然后用reg.test('需要校验的数据');返回的是boolean
/*
js中的正则对象RegExp讲解
1.在js中创建正则有两种方式：
1）new RegExp("^正则符号$");
2）/^正则符号$/; 建议使用
注意：在js中书写验证的正则中必须加边界词： ^ $
2.RegExp正则对象中的验证函数
test(被验证的字符串) 如果被验证的字符串满足正则对象中的表达式则test函数返回true，否则返回false
*/
//需求：验证指定字符串长度是否是6
//1.创建正则表达式对象
/*
1)^ 在正则中表示以什么开始
2）. ： 在正则中表示任意字符
3）{6}表示前面的正则即点代表的任意字符出现的6次
4）$：表示结尾
*/
// let reg = new RegExp("^.{6}$");
let reg = /^.{6}$/;
//2.使用正则对象调用test方法验证字符串是否满足正则表达式
let result = reg.test('a4bdef');
js中的对象：格式? ?
? ? ? ? ? ? ? ? ? ?let person={
? ? ? ? ? ? ? ? ? ? ? ? ? ? 属性：xxxx，
? ? ? ? ? ? ? ? ? ? ? ? ? ? 属性：xxxx，
? ? ? ? ? ? ? ? ? ? ? ? ? ? 函数名：函数（参数）{};
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?}
? ? ? ?调用的时候可以直接person.属性名? ? 在对象中的函数里面想要用对象中属性的值也可以this.属性名，this在这个对象中就是值得这个对象
?String:它里面和java差不多都有charAt(index);? 还有一个indexOf(数据)? ?如果里面有这个数据就返回一次出现的索引如果没有就返回-1? ?例如
? ? ? ? ?
/*
String字符串对象
*/
//1.创建字符串对象
let s = new String('abc');//了解
//输出字符串
console.log(s);//打印的不是字符串abc的值，是对象
console.log(s.toString());//使用toString方法将s中的abc转换为字符串 abc
//2.创建字符串对象
let s1 = "abc";
console.log(s1);
let s2 = 'abc';//推荐使用
console.log(s2);
//输出字符串长度，使用String对象中的length属性，不是函数
console.log(s2.length);//3************************是length不是length()*********************************************
//String的常见函数：
// charAt(intdex) 返回在指定位置的字符。index 必需。表示字符串中某个位置的数字，即字符在字符串中的下标。
console.log(s2.charAt(1));//b 1表示字符b对应的索引
//indexOf(searchvalue) 检索字符串。searchvalue 必需。规定需检索的字符串值。
console.log(s2.indexOf('bc'));//1 这里返回的1的原因是因为bc在字符串'abc'中出现的位置是1索引
console.log(s2.indexOf('bd'));//-1 因为'abc'中没有子字符串bd,索引返回-1定时器：
/*
1.确认框
let result = window.confirm(提示信息);//可以省略window对象
点击确定按钮，返回true
点击取消按钮，返回false
*/
// let result = window.confirm('这么好的商品，确认删除吗?');
// console.log(result);
/*
2.定时器：
let 变量名 = window.setInterval(匿名函数,毫秒);
说明：
1.匿名函数作为 setInterval()函数的第一个参数传递到setInterval函数底层
2.该函数表示js中的定时器，每隔多少毫秒就会执行一次匿名函数体中的函数体
取消定时器：
window.clearInterval(定时器变量名);
*/
// console.log('hello');
//开启定时器，每隔1秒输出一次hello
// window.setInterval(function(){// 2.该函数表示js中的定时器，每隔多少毫秒就会执行一次匿名函数体中的函数体
// //输出
// console.log('hello');
// },1000);
//开启定时器，页面被加载3秒后有个延迟在输出一次hello，只输出一次
// let timer = window.setInterval(function(){
// //输出
// console.log('hello');
// //取消定时器
// window.clearInterval(timer);//timer表示上述定时器的返回值
// },3000);
/*
let 变量名 = window.setTimeout(匿名函数,毫秒)
说明：该函数表示js中的定时器，每隔多少毫秒就会执行一次匿名函数体中的函数体,只会执行一次
*/
//开启定时器，页面被加载3秒后有个延迟在输出一次hello，只输出一次
window.setTimeout(function(){
console.log('hello');
},3000);获取Element：
/*
获取：使用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 objImg = document.getElementById('light');
console.log(objImg);
//2. getElementsByTagName：根据标签名称获取，返回Element对象数组
//获取上述所有的div标签
let arrDivs = document.getElementsByTagName('div');
console.log(arrDivs.length);//2
//3. getElementsByName：根据name属性值获取，返回Element对象数组
//获取上述所有的name属性值是hobby的标签
let arrHobbies = document.getElementsByName('hobby');//<input type="checkbox" name="hobby">
console.log(arrHobbies.length);//3
//4. getElementsByClassName：根据class属性值获取，返回Element对象数组
//获取class是cls的标签
let arrCls = document.getElementsByClassName('cls');
console.log(arrCls.length);//2Element对象：
<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对象
var objImg = document.getElementById("light");//<img id="light" src="imgs/off.gif">
// 修改图片地址变为on.gif
//objImg表示整个<img id="light" src="imgs/off.gif">标签对象
//当前需求是修改src的属性值，那么我们应该使用objImg对象调用src属性并修改值
objImg.src="imgs/on.gif";
//2. getElementsByTagName：根据标签名称获取，返回Element对象数组
var divs = document.getElementsByTagName("div");
/*
style:设置元素css样式
innerHTML：设置元素内容
*/
//需求：设置字体颜色为红色
//2.1遍历数组取出divs中的每个div标签对象
for(let i=0;i<divs.length;i++){
//2.2取出divs数组中每个div标签对象
//数组不能直接调用div标签的属性和函数，必须取出数组中每个div标签对象，才可以使用div标签对象调用div标签所属对象的属性和函数
let objDiv = divs[i];
//2.3使用取出的div标签对象调用调用div标签对象的属性设置字体颜色
//使用Div的父对象Element中的属性：style 设置或返回元素的 style 属性。
objDiv.style.color="red";//color表示字体颜色，属于使用js对象操作css样式名
//更改文本,使用Div的父对象Element中的属性：innerHTML：设置元素内容
objDiv.innerHTML="传智播客";
}
//3. getElementsByName：根据name属性值获取，返回Element对象数组
var hobbys = document.getElementsByName("hobby");
for (let i = 0; i < hobbys.length; i++) {
//设置复选框被选中
hobbys[i].checked=true;//给checked属性设置为true表示标签被选中
}
</script>
</body>
</html>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</title>
</head>
<body>
<!-- 给下面的标签绑定单击事件 -->
<!--
onclick="fn()" 表示给标签input绑定一个单击事件，单击该input标签的时候就会调用fn函数，执行fn函数体代码
-->
<input type="button" value="点我试试" onclick="fn()"/>
<script type="text/javascript">
/*
事件名作为标签属性名，在属性值中调用js函数。
*/
function fn(){
console.log('别点我了，受不了了');
}
</script>
<!-- 给下面的标签绑定单击事件 -->
<input type="button" value="点我试试" id="btn"/>
<script type="text/javascript">
/*
标签对象.事件名=function(){
}
*/
let objBtn = document.getElementById('btn');
//使用获取的标签对象给<input type="button" value="点我试试" id="btn"/>标签绑定单击事件
objBtn.onclick=function(){
console.log('试试就试试');
}
</script>
</body>
</html>Element绑定然后获取里面的value：
<!-- 文档类型声明标签，告知浏览器这个页面采取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表单绑定提交事件，然后将数据提交到后台服务器
/*
说明：
1.提交绑定执行的事件名是onsubmit
*/
//1.给form标签绑定事件
//1.1获取form标签对象
let objForm = document.getElementById('register');
//1.2绑定事件
objForm.onsubmit=function(){
//2.获取form表单中的input标签的value值，对于input标签输入的值赋值给value
//objInput: <input type="text" name="username" id="username"/>
let objInput = document.getElementById('username');
//3.获取input标签的value属性值即输入框输入的值
let val = objInput.value;
//4.输出val值
console.log(val);
// alert(val);
}
</script>
</body>
</html>
