JavaScript
1.概念：简称Js是一个运行在客户端浏览器端的【解释型】【弱类型】【面向对象】脚本语言
1.Js的运行环境：
浏览器自带Js解释器，不需要安装任何环境
Node·js需要安装一个服务器的环境
2.编译型：
在程序执行之前，需要先检查语法是否正确，如果不正确，直接不运行（严格）例如：java c++等
解释型：
在程序执行之前，不需要检查语法是否正确，直接运行，碰到错误就会停止后续代码（更加自由）例：JavaScript Node·js等
3.弱类型：
变量保存的数据可以是随意的，数据类型由数据来决定（更加自由）
1 = Number "1" = 字符串
强类型
变量保持的数据，由数据的类型来决定了能保存什么数据（更难/严格）
4.面向对象
以后经常会遇到的写法，这种写法就是面向对象：
对象名.属性名
对象名.方法名()
在Js中万物皆对象，除了某两个人
特点
可以用一切编辑工具编写Js代码
解释型
弱类型
面向对象
可以做Css完成不了的效果
2.如何使用
1. 使用方式：两种
直接在HTML写一个script标签，在里面书写代码（上课时用）
例: `<script>代码</script>`
创建一个XX.Js文件，在其中写入代码，最后加在HTML引入（正式开发时使用）
例: `<script>此处不能再书写代码</script>`
2.输出方式/打桩输出/检查错误：3种-给程序员自己使用
*在控制台打印输入日志：console.log(想要输出的东西) console
在页面上输出日志：document.write(想要输出的东西) document
在浏览器自带的警告框输出日志：alert(想要输出的东西) alert
3.*变量和常量
*变量：创建后，值可以再次修改
何时使用：以后反复使用到的数据，都要先提前把他保存在一个变量之中，以后反复使用变量名就相当于就是在使用变量的值
为什么：为了方便
如何使用： var 变量名=值；
特殊：1.变量名其实不是随意的：
1.不能以数字开头
2.建议使用驼峰命名法和下划线命名法
3.命名要尽量见名知意
2.如果你的变量名是name，不管你保存的数据类型是什么都会悄悄的给你转为一个字符串，-name这个变量名是一个关键字
3.变量名不能是关键字
4.变量可以只创建，不赋值，默认值为undefined，但是undefined是个垃圾，拿来做什么都要不得
5.如果多个变量连续创建 简写：
var name="阳"，age=18；
（,号隔开;号结束）
常量：创建后，值不允许被再次修改-（生活中不多的东西，代码中也不多，因为代码源于生活）
例： pi 一个小时60分钟 一天12个小时
语法：
const 常量名=值；
3.数据类型（两大类）
1.原始/基本/值类型
*Number--数字，取值有无数个，而且数字就是直接写，不用加任何东西(控制台输出的颜色是蓝色)
*String--字符串，取值有无数个，但是必须加上""或者''(控制台输出的颜色是黑色)
*Boolean--布尔，取值只有2个：ture(真/对) false(假/错)---一般用于当作判断条件，需要搭配分支使用(控制台输出的颜色是蓝色)
Null--空，取值只有一个就是Null，唯一作用就是用于释放变量释放内存,但是每次都需要自己释放--有更好办法(控制台输出的颜色是灰色)
undefiend翻译过来未定义，取值一个就是undefined(控制台输出的颜色是灰色)
引用/对象类型：有11个，暂时理解为有11(属性和方法)个对象
4.运算符
1.算术运算符：+ - * / %
特殊：
1.%取余，俗称模，两个数相除，不取商而是取除不尽的余数
作用：(1)*任意数%2 -判断奇偶数
(2)取某个数字的后n位：
console.log(1234%100);取值34
2.*带有隐式转换：悄悄的会将数据类型转换发生变化，默认：将左右两边都悄悄的转为数字，再运算
默认转换：
true
false
undefiend
null
"100"
"100px"-NaN确实可以将字符串转为数字，但是前提必须是纯数字的字符串才可以，但凡包含了非数字字符 则为NaN
NaN全称：Not A Number：不是一个数字但是他确实是数字类型，不在三界之中，不是一个有效的数字，没有任何优点但是有两个缺点：
(1)参与任何算术运算结果仍为NaN
(2)参与任何比较运算结果都为false
3.+运算符：如果碰上一个字符串，左右两边都会悄悄的转为字符串，+运算符不再是+运算符而是拼接操作
*关系/比较运算符：> < >= <= == != === !==
何时使用：一般都会出现在分支结构之中，我们可以通过条件满足不满足，走不同得的路线
结果：一定是一个布尔值
带有隐式转换：默认左右两边悄悄转为数字再比较大小
特殊：
1.如果参与比较的两边【都是】一个字符串！则会按位pk每个字符的十六进制unicode号
2.NaN参与任何比较运算结果都为false，怎么判断是不是NaN：(！isNaN)专门判断NaN,结果一定是一个布尔值：true--是一个有效数字 false--是一个NaN
3.undefined==unll：结果为true 解决：===--全等
*逻辑运算符：在比较运算的基础上，再进行综合比较。
&&：与(并且)全部条件满足--true，只要一个不满足--false
||：或者 全部条件都不满足--false，只要一个满足--true
!:颠倒(非)布尔值 !true--false !false--ture
*赋值运算符：= += -= *= /= %=
= :赋值符号，将=右边的东西，保存到=的左边的变量之中
后面5个可以理解为是一种升级写法，一句话两个操作 运算后再保存回变量本身
i=i+1 == i+=1
*自增自减运算符 ++ --
例：i++ === i+=1 === i+i+1
自增：固定每次只能+1
自减：固定每次只能-1
累加：+= 每次加几由程序员自己决定
位运算
左移：m<<n，读作m左移了n位，翻译：m*2的几次方
右移：m>>n，读作m右移了n位，翻译：m/2的几次方
(垃圾：底数只能是2，不可以修改)
拓展：用户输入框： var user=prompt("提示文字")
***分支结构
1.程序的流程控制的语句：3种
顺序结构
分支结构
循环结构
2.如何使用
1.if分支：3种写法
(1)一个条件，一件事，满足就做，不满足就不做
if(条件){
操作
}
(2)一个条件，两件事，满足就做第一件事，不满足就做第二件事
if(条件){
操作
}slse{
默认操作
}
(3)多个条件，多件事，满足谁就做谁
if(条件1){
操作1
}else if(条件2){
操作2
}else{
默认操作
}
***注意:
（1）分支只要满足了一条路，就不会再走别的路了，有的时候书写的顺序很重要
（2）else if 这句话想写多少句，由程序员自己决定
（3）else这句话其实可以省略不写，不推荐，如果条件都不满足，则什么都不执行
（4）分支结构可以嵌套
2.switch....case分支：前提：只要知道最后的结果是什么才可以用
语法：
swicth(变量/表达式){
case 值 1:
操作1;
break;
case 值 2:
操作2;
break;
case 值 3:
操作3;
break;
default:
默认操作;
}
注意：
（1）case的比较是不带有隐式转换的
（2）一个case满足过后，会将后续所有的操作做完，解决：给每个后面加上关键字：break；
建议：每个case的操作后面都可以跟上一个break，有的地方也可以不加break：1.最后一个操作default可以省略break 2.如果中间多个条件，做的操作一样可以省略。
（3）default可以省略不写，不推荐，如果条件都不满足，则什么都不执行
三目运算
语法：条件？操作1：默认操作；
页面上的一切东西都是字符串
强制（显示）数据类型转换
转字符串：2种：
var string=X.toString();
var str=String(x);
*转数字：3种
*parseInt(str/num)
*parseFloat(str)
Number(x)
转布尔：
boolean(x);
***只有6个会为false：0 undefined null "" NaN false
其余都为ture
循环结构* * * * *：反复执行相同或相似的操作
while循环语法：
var 循环变量=几；
while(循环条件){
循环体；
循环变量变化起来；
}
执行原理：首先创建出了循环变量，判断循环条件，如果条件满足则执行【一次】循环体操作，并且不会退出循环，而会回过头再次判断循环条件，如果条件满足，则执行【一次】循环体操作，直到循环条件不满足，才会退出循环
while死循环语法：
while(true){
死循环操作
}
for循环语法：
for(var 循环变量=几；循环条件；循环变量变化起来){
循环体
}；
for死循环语法：
for(;;){
循环体
}
执行原理：执行原理同while循环 但是更简洁 更舒服
随机整数的公式：
var r=parseTnt(Math.random()*(max-min+1)+min)
function--函数的基础
概念：function
使用函数：2步
1.定义/创建/声明：
function 函数名(){
函数体/代码段；
}
2.调用函数：2种
（1）直接在就是内容里面写：函数名();程序员写几次调用几次
（2）在HTML页面上绑定点击事件：
<button onclick="函数名()">文字</button>用户点几次就调用几次
何时使用：
1.不希望打开页面立刻执行
2.希望由用户来触发
3.每个独立的功能都要封装为函数
4.函数的地位很高，Js第一等公民地位
带参数的函数：
1.创建出带有形参的函数：其实就是一个变量，只不过不需要写var 而且不需要赋值，所以称之为形式参数，简称形参
function 函数名(形参,..){
函数体
}
2.使用带参数的函数时，记得必须传入实参
使用：函数名(实参,....)
注意：传参的时候顺序是不能乱的，必须和形参的顺序一一对应上，数量不要多，不要少
总结：
1.不带参数的函数，用于执行一些固定的操作
2.带参数的函数，可以根据我们传入的实参的不同，执行的操作略微不同
总结：循环也可以反复执行，函数也可以反复执行，他们的区别在于:
时机不同：
循环：几乎是打开网页的一瞬间就完成了
函数：需要调用后才会执行的
自定义函数：需要提前预定好的，以后反复使用的一个代码段
何时使用：不希望打开页面立刻执行，以后反复使用，由用户来触发
如何使用：
***创建：2种
1.*【声明方式】创建函数：
function 函数名(形参){
函数体
return返回值
}
2.【直接量方式】创建函数：
var 函数名=function(形参){
函数体；
return返回值；
}
感受到函数名就是一个变量名，函数名要尽量的不重复，否则后面的会把前面的覆盖.
调用：var rutrun=函数名(实参)；
具体要不要拿到函数结果取决自己，希望在全局拿着函数的结果去做别的操作，记得加上return
***作用域：2种
全局作用域：全局变量和全局函数，在页面的任何一个位置都可以访问/使用
函数作用域：局部变量和局部函数，只能在【函数调用时，内部可用】
使用规则：优先使用局部的，局部没有就找全局，全局没有就报错
特殊点：也是缺点
（1）局部可以使用全局的，但是全局不能使用局部的。解决：加上return
（2）千万不要在函数中对着未声明的变量赋值--导致全局污染
***重载：相同的函数名，根据传入的实参的不同，自动选择对应的函数去执行但是Js不支持，如果函数名重复了后面的肯定会把前面的覆盖掉
目的：减轻我们程序员的压力，记住一个方法就可以执行多个操作
解决：在【函数内部】自带一个arguments(类数组对象)，不需要我们创建
作用：哪怕没有写过任何形参，他也可以接收住所有实参
固定套路：
通过下标：arguments[i]
通过length：arguments.length
数组Array
数组：创建一个变量可以保存【多个数据】数组都是线性排列的：
除了第一个元素--每个元素都有唯一的前驱元素
除了最后一个元素--每个元素都有唯一的后继元素
***每个元素都有一个自己的位置，称之为下标，下标都是从0开始的，到最大长度-1
*创建数组：2种：
*直接量方式： var arr(数组名)=[];
构造函数方式：var arr(数组名)=new Array();
*获取数组之中的数据：
数组名[i]
*后续添加/替换元素：
数组名[i]=新数据
如果下标处没数据，则为添加数据，如果下标处有数据则替换数据
*数组三大不限
不限元素类型
不限元素个数
不限制下标越界
***三个固定套路：
获取数组倒数第n个元素：arr[arr.length-n]
向末尾添加元素：arr[arr.length]=新元素
缩容：arr.length-=n
*****遍历数组：往往很多情况，我们不会拿出数组的某个数据来使用，而是拿出数组中的所有数据来进行相同或相似的操作--搭配循环
公式：
for(var i=0;i<arr.length;i++){
arr[i];
}
* * * * *DOM：Document Object Model:文档对象模型，专门用于操作HTML文档的
DOM数概念：DOM将我们的HTML看做了是一个倒挂的结构，但是树根不是HTML标签，而是document对象
document对象:不需要程序员创建，有浏览器的Js解释器的自动创建，一个页面只有一个document树根
DOM会将页面上的每一个元素，属性，文本，注释等等都会被视为一个DOM元素/DOM节点/DOM对象
查找元素：两大方面
1.直接通过HTML的特点去查找元素；
（1）通过id：
var elem=document.getElementByid("id值")
特殊：
不使用，留给后端
（2）通过标签：
var elems=document/已经找到的某个父元素.getElementsByTagName("标签名")
（3）通过calss名：
var elems=document/已经找到的某个父元素.getElementsByClassName("calss名"）
*特殊；
1.返回值：找到了返回的是一个类数组DOM集合，没找到则返回一个空数组
2.*Js只能操作DOM元素，不能直接操作DOM集合！
解决：要么下标拿到某一个，要么遍历拿到所有人
3.不一定非要从ducument开始查找，如果document去找，会找到所有的元素，可以换成我们已经找到的某个父元素
2.通过元素之间的关系去查找元素：前提：至少要【先找到一个元素】才可以使用关系网
父元素：elem.parentNode;
子元素：elem.children;
第一个子元素：elem.firstElementChinld;
最后一个子元素：elem.lastElementChinld;
前一个兄弟：elem.previousElementSibling;
后一个兄弟：elem.nextElementSibling;
操作元素：前提就要先找到元素
内容：
（1）*innerHTML--获取或设置开始标签到结束标签之间的内容【支持识别标签的】
获取：elem.innerHTML;
设置：elem.innerHTML="新内容"；
（2）innerText--获取或设置开始标签到结束标签之间纯文本【不支持识别标签的】
获取:elem.innerText;
设置：elem.innerText="新内容"；
（3）value--专门获取或设置input的内容的
获取：inp.value
设置：input.vlaue="新内容"
属性：
*获取属性值：elem.getAttribute("属性名")
*设置属性值：elem.serAttribute("属性名","属性值")
简化版：
elem.属性名；
elem.属性名="属性值"；
缺点：
1.calss必须写为calssName
2.只能操作标准属性，不能操作自定义属性
样式：
获取样式：elem.style.css属性名；
设置样式：elem.style.css属性名="css属性值"；
特殊：
1.css属性名，有横线的地方，去掉横线，换为小驼峰命名法。
2.小缺陷：获取时，只能获取内联样式；
*绑定事件：
elem.onclick=function(){
操作；
***关键字：this这个关键字，目前只能在【事件】内部使用
如果单个元素绑定事件，this--这个元素
如果多个元素绑定事件，this--这个元素
}
一切的获取，都是为了判断
一切的设置，就是修改
