1.JavaScript简称js，是一个运行在客户端浏览器的【解释型】【弱类型】【面向对象】脚本语言 1、编译型：在运行程序之前，需要先检查语法是否正确，如果不正确，直接不运行 - 严格，比如：Java、C++...
解释型：在运行程序之前，不需要检查语法是否正确，直接运行，碰到错误就会停止后续代码 - 更加自由，比如：javascript、php
2、弱类型：变量保存的数据是随意可以更改，数据类型由数据来决定 - 更自由
var i="啦啦啦"；
var i=111；
console.log(i)；
强类型：变量保存的数据，由数据的类型来决定 - Java
console.log(111)；
console.log("啦啦啦")；
1 - number - 数值
"1" - string - 字符串要加引号
3、面向对象 - 很难
以后可能会经常见到这种写法：
对象名.属性名
对象名.方法名();
4、特点：
1、可以使用一切编辑工具编写JS代码，编辑器不代表你的实力...
2、解释型
3、弱类型
4、面向对象
5、可以做一切css完成不了的效果（轮播、选项卡、购物车、验证...）
2.如何使用js: 1、使用方式：2种 ①、直接在HTML写上一个script标签，在里面书写js代码 - 上课用
②、创建一个xx.js文件，在其中写入js代码，最后在HTML引用 - 正式开发使用方式
<script src="xx.js">
只要有src属性在，此处不可以在书写代码了
</script>
③、<script></script>建议写在body最下面，避免js加载时间过长，页面显示不出来，用户浏览器页面空白
2、输出方式/打桩输出/检查错误：3种
①、在控制台输出日志：console.log(你想要输出的东西);//console控制台 log日志
②、在页面上输出日志：document.write(你想要输出的东西);//document文档 write写入 - 支持标签，缺点：如果以后学会了绑定事件里面有document.write这句话，那会替换掉整个页面
③、在警告框输出日志：alert(你想要输出的东西);//会卡住整个页面，导致用户只能看到白板
3、变量和常量：
*变量：创建后，值可以再次修改
何时使用：以后反复使用到的数据，都要提前把他保存在一个变量中，以后使用变量名，相当于就是在使用变量的值
如何使用：var 变量名=值;
特殊：
①、变量名其实不是随意的
a、不能以数字开头
b、建议下划线命名法或驼峰命名法
c、命名要尽量得见名知意
name,age,hobby,height,weight - 推荐
xingming,nianling,aihao - 不推荐：逼格低下
更不要：d1,d2,d3,d4,aa,ab,ac,ad - 此变量名无意义
②、如果你的变量名是name，不管你保存的数据类型是什么，都会悄悄的给你变成一个字符串
③、变量名不能是关键字var
常量：创建后，值不允许修改
生活中的常量：
PI
一个小时60分钟
一分钟60秒
一天24个小时
一年365/366天
语法：const 常量名=值; - 垃圾，不常用
4、算数运算符：+ - * / %
①、%：取余，俗称模，两个数相除，不取商，而是取除不尽的余数：m%n
固定使用场景：
a、判断奇偶性：num%2;结果如果为0，说明是偶数，结果为1说明是奇数
b、获取一个数字的倒数n位数
1234%10; -> 4
1234%100;-> 34
②、*****特殊：+运算，如果左右两边都是一个数字，直接+在一起了
但是如果左右两边有一个是字符串，则+运算，不再是+运算，变为了拼接操作
其余的操作，我们以后再说
NaN：Not A Number：不是一个数字，但是确实是数字类型，不是一个有效数字
5、数据类型：分为两大类：
①、原始/基本/值类型：5个
1、Number - 数字，取值：有无数个
2、String - 字符串，取值：有无数个
3、Boolean - 布尔，取值：true（真、对）和 false（假、错），往往都是用于做条件判断操作的时候的一个结果
4、Undefined - 取值：undefined，创建了一个变量，但是没有赋值，默认值为undefined，undefined用来做一切操作都不行
5、Null - 空，取值：null，你不用的变量，可以进行释放，节约我们的内存空间。
变量名=null
②、引用/对象类型：11个对象（很多很多属性和方法）
扩展：
1、用户输入框：var user=prompt("提示文字");
2、分支结构：判断条件的不同选择对应的代码去执行，执行了一条路就不会再走别的路
如何使用：
一个条件，一件事，满足就做，不满足就不做
if(条件){
操作;
}
一个条件，两件事，满足就做第一件，不满足，就做第二件
if(条件){
操作;
}else{
默认操作;
}
多个条件，多件事，满足谁，就做谁
if(条件1){
操作1;
}else if(条件2){
操作2;
}else{
默认操作;
}
特殊：
1、else if有几句看你的需求
2、最后else可以省略不写，如果不写，条件都不满足，那什么事都不会执行
3、书写判断你的顺序也是需要根据需求来注意的，前面条件不能包含后面的条件
1.***数据类型的转换：不同的数据类型做操作可能出来的结果也不一样 number + number = number number + string = string
js获取页面上的一切东西，数据类型默认都是一个字符串
如果你想要查看数据类型：typeof(查看的东西)
1、*****算术运算的隐式转换：悄悄的，我们程序员看不见的
默认：
悄悄的将左右两边的东西，转为一个数字，在运算
特殊：
①、+运算，碰上一个字符串，左右两边都会悄悄的变成字符串，+运算也不再是+运算，变了拼接操作
②、原来别的数据类型也能转为数字
true->1
false->0
undefined->NaN：只要是转为数字，但是我又不知道该转为多少的时候，结果一定为NaN
null->0
③、其实-*/%，字符串也可以转为一个数字，前提要是一个纯数字组成的字符串才能，但凡包含了一个非数字字符则为NaN
"100"->100
"100px"->NaN
④、NaN：Not A Number：不是一个数字，但是确实又是数字类型，不在三界之中，不是一个有效的数字
2个缺点：
1、NaN参与任何算术运算，结果仍为NaN
2、NaN参与任何比较运算，结果都为false,甚至自己都不等于自己
问题：我们没有办法使用普通的比较运算来判断x是不是NaN
解决：
个人更爱反用：!isNaN(x)
！- 非 ， && - 与 ， || - 或
true->是一个有效数字
false->是一个NaN
记住，不同场景会有不同的数据类型的转换
学完隐式转换，我们也没解决一个事
"100px"-*/%5=NaN
"100px"+100="100px100"
2、强制/显示转换：隐式转换出来的结果不是我们想要的，我们程序员就要手动调用一些方法，强制转为我们想要的数据类型，再运算
①、转字符串：var str=xx.toString();//xx不能是undefined和null，因为undefined和null不能使用.做任何操作
页面上的一切数据类型都是字符串
②、***转数字：3种
1、*parseInt(str/num); parse->解析 Int->整型
原理：专门为字符串和小数转为整数数字准备的，从左向右依次读取每个字符，碰到非数字字符就会停止转换。如果一来就碰到了不认识的字符，结果就为NaN，不认识小数点
console.log(parseInt(100.5));//100
console.log(parseInt("100.5"));//100
console.log(parseInt("100px"));//100
console.log(parseInt("px100"));//NaN
console.log(parseInt("1px00"));//1
console.log(parseInt(true));//NaN
console.log(parseInt(false));//NaN
console.log(parseInt(undefined));//NaN
console.log(parseInt(null));//NaN
2、*parseFloat(str); parse->解析 Float->浮点数：小数
原理：几乎和parseInt一致，认识小数点
console.log(parseFloat(100.5));//100.5
console.log(parseFloat("100.5"));//100.5
console.log(parseFloat("100.5px"));//100.5
console.log(parseFloat("px100.5"));//NaN
console.log(parseFloat("10px0.5"));//10
console.log(parseFloat("100.5.5.5"));//100.5
console.log(parseFloat(".555"));//0.555
3、Number(x);//此方法是万能的，任何基本类型都可以转为数字
垃圾：完全等效于隐式转换，我还得记忆一个方法，还不如 -0 *1 /1
2.*****Function的基础： 1、Function：函数，也称之为方法：需要【预定义】好的，以后就可以【反复使用】的【代码段】
其实一阶段你就见过很多函数了：比如
rotate(360deg) - 完成了一个顺时针旋转360度的功能
url("图片路径") - 完成了一个根据图片路径显示图像的功能
js中要学习自定义函数：完成了一个。。。。。。。的功能
2、如何使用：2步
①、创建/定义/封装函数：
function 函数名(){
若干的函数体/代码段/操作
}
②、调用/使用函数
函数名();
注意：
1、程序员在js里写死，调用几次，就执行几次
2、交给用户来触发，只需要为某个元素绑定点击事件
<button onclick="js代码">内容</button>
3、何时使用：
1、不希望打开页面立刻执行，而需要时再用，或者由用户来触发
2、希望能够反复执行，不用刷新页面
3、以后任何一个独立的功能体，都要单独封装为一个函数（你的每一个作业）
4、函数在js中的地位最高：函数是第一等公民地位，所以随时随地，咱们要想着能不能封装函数
4、带参数的函数
榨汁机 -> 函数：榨汁
原材料 -> 参数
何时使用：如果我的函数体，希望根据传入的实参的不同，做的略微不同
创建：形参：形式参数，其实就是一个变量，但是不需要写var，而且默认也没有保存任何值
function 函数名(形参,...){
若干的函数体/代码段/操作
}
调用：实参：实际参数，真正的值，需要你在调用函数时传入进去
函数名(实参);
特殊：
1、传参的顺序一定要一一对应上，并且数量也要对应
2、不是一定需要带参数的函数，才是好函数，具体要不要带有参数，需要看我们的需求
如果你的函数体就是固定的 - 则普通函数搞定
如果你的函数体是根据参数的不同，做的略微不同 - 就使用带参数的函数
3.***分支结构： 1、程序的流程控制语句：3种 ①、顺序执行 - 默认：从上向下依次执行 ②、分支结构 - 通过条件判断，选择部分代码执行 ③、循环结构 - 通过条件判断，选择要不要重复执行某块代码
2、比较运算符：>= <= > < == !=
用于做判断的
结果：一定是一个布尔值
强调：
①、=：不是比较，而叫做赋值操作，把等号右边的东西保存到等号左边
②、如果你想要判断多个条件，绝对不能像小时候数学的写法：18<=age<=65，错误的！在代码里不支持
解决：逻辑运算符
3、逻辑运算符：
&&：与、并且。要求全部条件都满足，最后的结果才为true
只要有一个条件不满足，结果则为false
||：或。要求全部条件都不满足，最后的结果才为false
只要有一个条件满足，结果则为true
!：颠倒布尔值：!true->false !false->true
4、分支的语法：
一个条件，一件事，满足就做，不满足就不做
if(条件){
操作
}
一个条件，两件事，满足做第一件，不满足做第二件
if(条件){
操作
}else{
默认操作
}
多个条件，多件事，满足谁，就做谁
if(条件1){
操作1
}else if(条件2){
操作2
}else{
默认操作
}
1.****循环 问题：在控制台打印输出1000句hello world? console.log("1hello world"); ... console.log("1000hello world");
循环结构：反复执行 相同 或 相似的操作
循环三要素：
1、循环条件：开始 - 结束，循环的次数
2、循环体：做的操作是什么
3、循环变量：记录着我们当前在哪一次，而且它会不断的变化
1、while循环：
语法：
var 循环变量=几;
while(循环条件){
循环体;
循环变量发生变化;
}
执行原理：首先创建了循环变量，判断循环条件，如果条件满足，则做一次循环体操作，并不会退出循环，回过头来
再次判断条件满足，则再做一次循环体操作...
直到条件不满足为false时，才会退出循环
宏观上感觉循环一瞬间就结束了，但微观上来说其实是一次一次执行的
特殊：
1、有的时候真有可能需要使用死循环：永远不会停下来的循环
何时：不确定循环次数的时候
while(true){
死循环
}
2、退出循环语句：break; - 只能用在循环中，多半都是搭配死循环使用
2、*for循环：和while的原理是一样的，但是他比while看上去更加的简洁，更加的舒服
语法：
for(var 循环变量=几;循环条件;循环变量发生变化){
循环体;
}
死循环：
for(;;){
死循环
}
面试题：while 和 for的区别？
while和for几乎没有区别：
一般来说我们不确定循环次数的时候，会使用while循环 - 死循环
一般来说我们确定循环次数的时候，会使用for循环 - 更漂亮更简洁，大部分情况
上午练习：两种循环来完成以下3道题
1、求和：1-1000之间所有的数字的和
2、求和：1-1000之间所有的偶数的和
3、猜数字小游戏
扩展：1、随机整数的公式：parseInt(Math.random()*(max-min+1)+1)
2.*****数组： 问题：保存1000个同学的名字？ var name1="1"; ... var name1000="1000";
不推荐，变量其实就是我们所谓的内存，变量创建的越多，那么我们内存空间消耗越大，那么网站性能就会越差
解决：数组：创建一个变量可以保存【多个数据】
数组都是线性排列，除了第一个元素，每个元素都有唯一的前驱元素
除了最后一个元素，每个元素都有唯一的后继元素
***每个元素都有一个自己的位置，称之为叫做下标，下标是0开始的，到最大长度-1结束
1、创建数组：2种
①、*直接量方式：var arr=[];//空数组
var arr=[数据1,...];
②、构造函数方式：var arr=new Array();//空数组，是以前老版本的写法
var arr=new Array(数据1,...);//而且他还有个坑（以后讲）
2、获取数组之中的数据：
数组名[i];
3、后续添加/替换元素：
数组名[i]=新数据;
如果下标处没有数据，那么则为添加，如果下标处已经有数据了，则为替换
4、数组具有三大不限制：
①、不限制元素的类型
②、不限制元素的个数
③、不限制元素的下标越界 - 不是一个好东西：
如果获取元素，下标越界，返回的是一个undefined
如果添加元素，下标越界，会得到一个稀疏数组，如果搭配上循环去获取每个元素，则会得到很多很多的undefined
问题：自己数下标，是不科学的，很有可能就会数错
5、解决：数组中有一个唯一的属性
如何使用：数组名.length;
作用：获取数组的长度：长度是从1开始的
三个固定套路：
1、向末尾添加元素：arr[arr.length]=新值;
2、获取数组的倒数第n个元素：arr[arr.length-n];
3、缩容：删除倒数n个元素：arr.length-=n;
6、***往往很多情况，我们不会拿出某个元素来使用，而是拿出所有的每个元素来进行 相同 或 相似的操作 遍历：把数组中的每个元素取出来执行 相同 或 相似的操作 公式： for(var i=0;i<数组名.length;i++){ 数组名[i];//当前次元素，要干什么由你自己决定 }
作业： 1、*PPT17页 三道题 闰年公式： 1、普通闰年：能被4整除，但是不能被100整数 2、世纪闰年：能被400整除 2、*PPT32页 一道题 3、 PPT34页 三道题
扩展：
javascript其实由三部分组成：
1、ECMAScript - 核心语法，内功心法，以后的任何操作可能都离不开我们这些天学习的东西
2、DOM - Document Object Model - 文档对象模型（外功招式），文档：HTML、CSS - JS操作页面元素了
3、BOM - Browser Object Model - 浏览器对象模型（外功招式），操作浏览器的，但是很多东西浏览器本身就自带了，所以BOM使用相对较少
1.DOM：Document Object Model：文档对象模型：专门用于操作HTML文档的，提供了一些方法
2.DOM树概念：*DOM将我们的HTML看做了是一个倒挂的树状结构，但是树根不是html标签，而是document对象 document对象：不需要我们程序员创建，由浏览器的js解释器自动创建，一个页面只有一个document 作用：可以通过树根去找到我们想要的任何一个DOM元素/节点/对象（属性和方法） DOM会将页面上每个元素、属性、文本、注释都当做是一个DOM元素/节点/对象
3.查找元素： 1、通过ID找元素：（不常用） var elem=document.getElementById("id值");
特殊：
1、返回值：找到了返回当前找到的DOM元素，没找到返回是一个null
2、找到了返回的也只是第一个id的元素
2、*通过标签名找元素：
var elems=document/已经找到了的父元素.getElementsByTagName("标签名");
例子：var ul=document.getElementsByTagName("ul")[1];
var li=ul.getElementsByTagName("li")[2];
特殊：
1、返回值：找到了返回一个类数组DOM集合，没找到返回的是一个空数组
*2、JS只能直接操作DOM元素，不可以直接操作DOM集合，解决：要么使用下标拿到某一个元素（每一个后面都写上下标[i]），那么使用遍历拿到每一个的元素
3、不一定非要从document开始查找，如果从document去找，会找到的所有的元素，可以换成我们已经找到的某个元素
3、*通过class名找元素：
var elems=document/已经找到了的父元素.getElementsByClassName("class名");
特殊：
1、返回值：找到了返回一个类数组DOM集合，没找到返回的是一个空数组
2、JS只能直接操作DOM元素，不可以直接操作DOM集合，解决：要么使用下标拿到某一个元素（每一个后面都写上下标[i]），那么使用遍历拿到每一个的元素
3、不一定非要从document开始查找，如果从document去找，会找到的所有的元素，可以换成我们已经找到的某个元素
4、通过关系找元素：前提条件：必须先找到一个元素才可以调用关系网
父元素：elem.parentNode; - 单个元素
子元素：elem.children; - 集合
第一个子元素：elem.firstElementChild; - 单个元素
最后一个子元素：elem.lastElementChild; - 单个元素
前一个兄弟：elem.previousElementSibling; - 单个元素
后一个兄弟：elem.nextElementSibling; - 单个元素
作业： 1、上午的练习 2、查找元素，你随便写一个HTML越乱越好，你试试找到你想找的元素
操作元素：前提：找到元素才可以操作元素 1、内容： *1、innerHTML - 获取和设置开始标签到结束标签之间的内容，支持识别其中标签的 获取：elem.innerHTML; 设置：elem.innerHTML="新内容";
2、innerText - 获取和设置开始标签到结束标签之间的文本，不支持识别标签的
获取：elem.innerText;
设置：elem.innerText="新文本";
以上两个API都是为双标签准备的，但是操作不了input
*3、value - 为获取input的value值准备的
获取：input.value;
设置：input.value="新内容";
2、*属性：
获取属性值：elem.getAttribute("属性名");
设置属性值：elem.setAttribute("属性名","属性值");
简化版：
获取属性值：elem.属性名;
设置属性值：elem.属性名="属性值";
简化的缺陷：
1、class属性名必须写为className
2、不能操作自定义属性
3、属性有颜色时，需要注意浏览器会改变颜色的写法，把16进制变为rgb,那么条件判断时会失效
3、样式：
使用样式的方式：
1、内联样式
2、内部样式表
3、外部样式表
二阶段我们就是要用js来操作【内联样式】：
1、不会牵一发动全身
2、优先级最高
获取：elem.style.css属性名;
设置：elem.style.css属性名="css属性值";
特殊：
1、css属性名，有横线的地方，去掉横线，换为小驼峰命名法
border-radius -> borderRadius
2、获取时，只能获取内联样式 - 小缺点，我们可以忽略掉
总结：
一切的获取，往往都是用于判断操作
一切的设置，其实也就可以理解为是修改
4、绑定事件：
elem.on事件名=function(){
操作;
*****this关键字：这个
如果单个元素绑定事件，this->这个元素
如果多个元素绑定事件，this->当前触发事件的元素
}
5、计算字符串：呆老湿喜欢称呼为脱字符串的衣服
eval(str);
例如：eval("5-3");
区别于：parseInt("5")-parseInt("3")
作业： 1、点击按钮，让页面上a标签内容和网址发生变化 2、开关门效果 3、表格隔行变色，奇数次奇数行变色，偶数次点击偶数行变色 4、下午：选项卡 5、下午：计算器 6、下午：购物车 - 封装为函数 7、学会写博客：自己整理这一周学习的内容，背着笔记去回忆，写完后，再打开笔记对比，看看差了什么
