二阶段第一周内容

一、JavaScript介绍

js：运行在浏览器端的解释型弱类型面向对象脚本语言；

自带JavaScript解释器，打开浏览器可以自动运行；
以后会安装一个独立的js解释器-》学习Node.js的时候；

解释型：在程序执行之前，不需要检查语法是否正确，直接运行，碰到错误就停止；

编译型：在程序执行之前，需要先检查语法是否正确，如果不正确，直接不运行；

强类型：变量保存的数据，是由数据的类型来决定的；

弱类型:变量保存的数据是可以随意的，数据类型是由数据来决定的；

面向对象：对象名：属性名/方法名

特点

可以使用一切编辑工具编写
解释型
弱类型
面向对象
可以做一切css完成不了的操作

JS使用

在HTML页面书写一个script标签，直接在里面书写JS代码

创建一个xx.js文件，再在HTML页面引入--正式开发中使用

输出方式打桩输出，帮助检查错误

在控制台输出日志：console.log(),不会影响页面
在页面上输出日志：document.write(),如果搭配点击事件，会把页面上所有东西都替换掉；
在弹窗输出日志：alert()有时候会卡住整个页面，导致用户只能看到一个白板

变量

创建后可以再次修改，以后要反复使用的数据，都要提前把他保存在一个变量之中，使用变量名就等于是在使用变量的值；变量名不是随意的，不能以数字开头；使用驼峰命名法或者下划线命名法；命名尽量要见意知意；

变量名不能是关键字；变量可以只创建，不赋值。默认值是undefined；undefined用来干什么都不可以

常量：创建后不允许更改；语法const常量名=值；其余特点跟变量一样；

数据类型

基本类型：5个

number：数字，取值无数个，直接写，不加任何东西
string：字符串，取值无数个，必须加引号
boolean：布尔，取值;true或false,用于判断
null：空，取值唯一，用于释放内存
undefined：无意义；

查看数据类型：typeof（变量）

引用/对象类型：11个

算数运算符：+ - * / %;特殊%取余，模，任意数%2判断奇偶数；取数字后几位；

带隐式转换：悄悄将数据类型转换，转为数字；

NaN参与任何算数结果仍为NaN；0参与任何比较运算结果都是false

+运算特殊：如果遇到字符串，左右两边都会转换为字符串，然后进行拼接，而不是进行加法运算

2.比较/关系运算符：> < >= <= == != === !==

结果：一定是布尔值；带有隐式转换：默认左右两边都会转换为数字比较大小；特殊：如果左右两边都是一个字符串，则会按位pk每个字符的十六进制的Unicode号：数字<大写字母<小写字母<数字

！isNaN ：结果是一个布尔值，true是有效数字，false是NaN

3.undefined=null 布尔值为true；解决：全等于===，要求数据类型相同；！==，不带隐式转换的不等比较

3.赋值运算符：= += -= *= /= %=

赋值：将等号右边的东西保存到左边变量中；升级写法：i=i+1==>i+=1

4.逻辑运算符：与&&；或||；非！；

5.自增自减运算符：++ -- i++ i--；

自增自减，每次只能加一或减一，单独使用i++和++i没有任何区别，但是参与其他表达式，返回的结果不同；

i++返回加之前的旧值，++i返回加之后的新值；

6.位运算：左移：m<<n,左移n位，m乘以2的n次方；右移：m>>n,右移n位，m除以2的n次方；底数只能是2。

用户输入框：var 变量=prompt("提示文字")；

分支结构

顺序结构-默认从上到下依次执行每一句话
分支结构-通过条件判断，选择部分代码执行
循环结构-通过条件判断，选择要不要重复执行某块代码

if...else 分支

1、if...else三种情况：

一个条件，一件事，满足就做，不满足就不做
一个条件，两件事，满足就做第一件事，不满足就做第二件事
多个条件，多件事，满足谁就做谁；

注意：else if 由自己决定写多少；else可以省略，但是尽量写；分支走一条路就不会走其他路；

switch...case分支

特殊：默认只要一个case满足后，会将后续所有操作全部完成；需要加上break才会结束。

最后一个操作default可以省略break；
如果中间有多个条件，做的操作是一样的，可以省略掉中间部分
case在作比较时候是不带隐式转换的
default可以省略不写，但是尽量写，不写条件，不满足不会发生任何事件；

两者的区别

if...else优点：可以作为范围判断；缺点：执行效率较慢，速度慢；
switch...case优点：执行效率高，速度快；缺点：必须知道结果是什么才可以使用；
代码开发完成后，需要做代码优化；尽量少用if...else,多用switch...case和三目运算

三目运算：简化分支；语法：条件？操作：默认操作；

默认操作不能省略，省略了会报错；如果操作复杂，不能使用三目运算；操作只能有一句话；如果操作有多句话还是推荐使用switch或if;

页面上JS获取到的一切数据都是字符串类型

强制数据类型转换

转字符串：两种方法

var str=x.tostring();x不能是undefined和null，会报错；
var str=string(x);万能的；任何数据类型都可以转换为字符串；等效于隐式转化，不如+"";

转数字：三种方法

parseInt(str/num);专门用于将字符串转化为整数；从左向右依次读取转化每个字符，碰到非数字字符就停止转换，如果一开始就不认识则为NaN;
parseFloat(str);专门用于将字符串转换为小数；认识你第一个小数点；
Number(x)万能的，任何人都可以转为数字，完全等效于隐式转换；

转布尔

boolean(x)；万能的，任何人都可以转换为布尔，完全等效于隐式转换；
只有6个为false：0,"",undefined,NaN,null,false;其余的全是true；

循环结构

循环条件：开始-结束，循环的次数
循环体：做的操作
循环变量：记录着我们当前在哪一次，而且他会不断变化；

三种循环

while循环：首先创建出循环变量，判断循环条件，如果条件满足，则做一次循环体操作，并不会退出循环，而是会回过来再次判断条件满不满足啊，如果满足，则再做一次循环体操作，一直到条件不满足才会推出循环；

循环是一次一次执行的；死循环：默认永远不会停下来的循环；使用：不确定循环次数的时候；

停止死循环：break，退出整个死循环；continue退出本次循环，下一次依旧会执行； 2. for循环：和while循环的原理一样，比while循环更简洁；死循环for（；；）{}；确定循环次数的时候才使用for循环； 3. do...while 循环，一般不用； 4. while和do...while循环区别：只看第一次条件，如果都满足，两者没区别；如果第一次条件不满足，while一次都不会执行；do...while会执行一次；

function的基础

概念：function函数/方法，先定义好，以后可以反复使用的代码段；函数创建后不会立马执行，需要调用；

调用函数

在JS内部写函数名（），写几次会调用几次；
在HTML中绑定点击事件；

使用：不希望打开页面就立刻执行；希望用户触发，提高用户体验感；每一个独立的功能都要封装为一个函数，函数是JS的第一等公民；

形参

创建出带有形参的函数，其实就是一个变量，不过不需要赋值
使用带有形参的函数时，必须传入实参，实际参数就是你传递过去的值；
注意：传参的时候，顺序是不能乱的，必须和形参的顺序一一对应，数量不多不少；
不带参数的函数，用于执行一些固定的操作；带参数的函数，根据我们传入的实参不同，做的略微不同；
函数可以反复执行，循环也可以反复执行；两者区别：循环几乎一瞬间就完毕了；函数需要调用后才会执行；

创建函数：

声明方式创建函数：function 函数名（形参列表）{操作；return 返回值/结果}
直接量方式创建函数：var 函数名=function（形参列表）{}
调用:var 接住返回的值=函数名（实参列表）{}

1.return的本意是退出函数，但是如果后面跟着一个数据，顺便将数据返回到函数作用域的外部，但是return只负责返回，不负责保存，所以调用函数时需要自己拿个变量接住他；

2.就算省略return，默认也会有，return一个undefined；具体需不需要得到函数的结果看自己，如果在全局希望拿着函数的结果去做别的操作，需要加上return；

3.作用域：

全局作用域：全局变量和全局函数，在页面的任何一个地方都可以使用
函数作用域：局部变量和局部函数，在当前函数调用时，内部可用；
变量的使用规则：优先使用局部的，局部没有找全局要，全局也没有就会报错；

缺点：

千万不要在函数中对未声明的变量直接赋值
全局污染：全局本身没有这个东西，但是被函数作用域给添加上了
局部可以使用全局的，但是全局不能使用局部的；

声明提前：只会出现在笔试中

规则：在程序员执行之前，将var声明的变量和function声明的函数，都会悄悄的集中定义在当前作用域的顶部，但是赋值会留在原地；
强调：声明方式创建的函数会完整的提前；直接量方式创建的函数不会完整的提前，只有变量名部分会提前
遵守规则：变量名和函数名尽量不要重复；先创建后使用；

重载

在相同的函数名，根据传入的实参不同，自动选择对应的函数去执行，但是JS不支持，如果函数名重复，后面的肯定会覆盖掉前面的；
目的：减轻程序员的压力，记住一个方法就可以执行很多的操作；
解决：在函数内部自带一个arguments的对象（类似数组对象）：不需要我们创建，哪怕没有写任何实参，他也可以接受住所有实参，所以默认他length长度为0；

固定套路：

通过下标去获取传入的一个实参：arguments[i];i从0开始；
通过length去获取到底传入了几个实参：arguments.length通过判断传入的实参不同，在内部去写判断，从而变相的实现重载；

数组的基础

变量其实就是内存，变量创建的越多，内存空间消耗越大，网站的性能就越差

数组创建一个变量可以保存多个数据，数组都是线性排列，除了第一个元素，每个元素都有唯一的前驱元素，除了最后一个元素，每个元素都有一个后继元素；每个元素都有一个自己的位置，称为下标，下标都是从0开始的，到最大长度-1结束；

创建数组
直接量方式：var arr=[];空数组；var arr=[数据1，数据2....];
构造函数方式var arr=new Array();
获取数组中的元素：数组名[i];
后续添加/替换元素：数组名[i]=新数据；如果下标处没人则为添加，有则为替换；

数组具有三大不限制：不限制元素的类型；不限制元素的长度；不限制下标越界

获取元素时，下标越界，返回的是一个undefined；如果添加元素时，下标越界，会得到一个稀疏数组，如果我们搭配上循环去遍历获取每个元素，那么会得到很多很多的undefined；

自己数下标可能会数错，导致下标越界，解决：数组的唯一属性；length；获取的数组长度从1开始；

固定套路：

向尾部添加元素：arr[arr.length]=新数据；
获取数组的倒数第n个元素：arr[arr.length-n];
缩容：删除倒数n个元素：arr.length-=n;

遍历数组：需要拿出每个元素进行相同或者相似的操作--搭配上循环

DOM

DOM:Document Object Model:文档对象模型;专门用于操作HTML文档的，提供一些方法给你；
DOM树：DOM将我们的HTML看做一个倒挂的树状结构，树根不是html，而是document的对象；
document对象，不需要我们创建，由浏览器的JS解释器自动创建，一个页面只有一个document树根；
作用：可以通过树根找到我们想要的任何一个DOM元素；DOM会将页面上的每个元素/文本/属性/注释等视为一个DOM元素；

查找元素

直接通过HTML的特点查找元素

通过ID查找元素;var elem=document.getElementById("ID值")；

特殊：返回值，找到了返回当前找到DOM元素，没找到返回null；
如果出现多个相同的ID，只会找到第一个
记住控制台输出的样子，这个样子才会叫作一个DOM元素；
此方法不建议使用，一次只能找到一个元素；

通过标签名查找元素：var elem=document.getElenmentByTagName（"标签名"）；

返回值，找到返回一个类数组元素集合，没有找到则为空集合；
JS只能直接操作DOM元素，不能直接操作DOM集合；要么通过下标拿到某一个，要么遍历拿到每一个；
不一定非要从document开始查找，如果从document去找，会找到所有的元素，可以换成我们已经找到的某个父元素； 3.通过class名查找元素：var elems=document.getElementByClassName（"class名"）；特殊：与标签名查找元素一致；

通过关系获取元素：前提，必须先找到一个元素才可以使用关系

父元素：elem.parentNode;单个元素；
子元素：elem.children;集合；
第一个子元素：elem.firstElementChild;单个元素；
最后一个子元素：elem.lastElementChild;单个元素；
前一个兄弟：elem.previousElementSibling;单个元素；
后一个兄弟：elem.nextElementSibling;单个元素；

不希望影响到别人，只希望影响到自己的关系网；

操作前提：先找到元素，才能进行操作；

elem.innerHTML获取和设置开始标签和结束标签之间的内容，支持识别标签：elem.innerHTML="新内容"；《都是双标签》
单标签：input.value--专门获取和设置input里的内容;input.value="新内容"；

获取和设置属性

获取：elem.getAttribute("属性名")；
设置：elem.getAttribute("属性名"，"属性值")；

简化版：elem.属性名="属性值"；

简化版缺点：class必须写为className---class变成了一个关键字，关键字不能直接使用；2、不能使用自定义属性；

样式：内联样式，内部样式表，外部样式表

JS操作内部样式：不会牵一发而动全身；优先级最高；
获取/设置样式：elem.style.css名="css属性值";
特殊点：

css属性名，有横线的地方，去掉横线，改为驼峰命名法：border-radius--borderRadius
小缺陷：获取时只能获取内联样式

绑定事件：elem.on事件名=function(){操作；关键字this}

如果单个元素绑定事件，this表示这个元素
如果多个元素绑定事件，this表示当前触发事件元素

JavaScript第一周学习总结