Javascript基础

Javascrip概念：简称js是一个运行在浏览器客户端的解释型，弱类型，面向对象的脚本语言

一、js的运行环境：

1.浏览器自带js解释器，不需要安装任何环境 2.Node.js需要自己安装服务器环境

二、解释型：

程序在执行前，不需要先检查语法是否正确，直接开始运行，碰到错误就会停止后续代码

三、弱类型：

变量保存的数据是随意的，数据类型由数据来决定

四、面向对象：

对象名.属性名对象名.方法名（）现在还没接触到，后续继续补充

五、特点

可以用一起的编辑工具编写js代码解释型弱类型面向对象可以做一切css完成不了的效果和服务器端进行连接和沟通

如何使用JS：

一、使用方法有两种

1.直接在HTML上写一个script标签，在里面书写js代码 2.创建一个xx.js文件在其中写入js代码，最后在HTML中引入

二、输出方式：有三种

1.在控制台打印输入日志：console.log（你想要输出的东西）； 2.在页面上输入日志：document.write（你想要输出的东西）；有个缺点，如果绑定了点击事件，一旦点击会把页面上的内容全部覆盖 3.在浏览器自带的警告框里输出：alert（你想输出的内容）

三、变量与常量

1.变量创建后值可以再次修改使用方法：var 变量名=值；变量名不是随意的不能以数字开头，建议使用驼峰命名法，尽量见名知意“name”是一个关键词不能拿来做变量名，关键词不能做变量名，变量可以只创建不赋值，默认为undefined 常量：创建常量后值不允许改变，语法：const 常量名=值

四、数据类型有哪些，分为两大类

1.原始类型 Number--数字，取值有无数个，直接写不加任何东西（控制台输出为蓝色） string--字符串，取值有无数个，但是必须用""或者''括起来（控制台输出为黑色） Boolean--布尔值，取值只有两个，分别是true（真）或者false（假），一般用于条件判断（控制台输出为蓝色） Null--空，取值只有一个null，唯一的作用就是用来释放变量（控制台输出为灰色） undefined--中尉意思未定义，取值只有一个就是undefined（什么用都没用，控制台输出为灰色）【查看数据类型typeof(变量)】 2.引用类型：暂时只接触到了数组，还有其他10个

运算符

一、算术运算符：+、-、*、/、%

除%以外其它都是正常数学运算，%取余，俗称模，两个数相除，取余，主要用于判断奇数偶数带有隐式转换：悄悄的会把两边数据类型转换为数字，再运算 true-1、false-0、undefined-NaN、Null-0、“100”-100、“100px”-NaN但是必须要是纯数字组成字符串才可以，但凡有非数字字符都会转换成NaN.NaN不是数字但是是数字类型，参与任何算术运算结果都为NaN，参与任何比较运算符结果都为false +运算符：如果碰上一个字符串，左右两边都会转会为字符串，+运算不再是+运算，而是直接拼接

二、关系运算符：>、<、>=、<=、==、!=、===、!==

结果一定是布尔值，带有隐式转换，两边都会悄悄转换成数字再比较大小，如果两边都是字符串，则会按位PK每个字符的十六进制unicode号数值<0-9<大写A-Z<小写a-z<汉字

三逻辑运算符：再2比较运算符的基础上，再进行综合比较：

&&、||、！

四逻赋值运算符：=、+=、-=、*=、%=、/=

=赋值符号，将=右边的大小保存到=左边的变量中，后面五个可以理解为是一种升级写法，一句话两个操作运算后再保存会变量本身！如：i=i+1--i+=1

五、自增自减运算符：==、++

六、位运算符

左移：M<<N,读作m向左移了n位，翻译为m2的n次方右移：M>>N,读作m向右移了n位，翻译为m/2*的n次方

分支结构*

一、程序的流程控制语句：3种

1.顺序结构 2.分支结构 3.循环结构

二、如何使用：3大类

if分支，一件事满足就做不满足就不做1. `if（条件）{操作}`2. `if（条件）{操作}else{操作}`，一个条件两件事，满足就做第一件，不满做就做第二件3. `if（条件）{操作}else if（条件）{操作}`一个条件两件事，满足谁就做谁

switch...case分支，前提是只要知道结果是什么才可以使用

语法：

switch（变量/表达式）{ case 值1：操作1； case 值2：操作2； case 值3：操作3； }

三目运算：纯粹是为了简化【简单的】分支，操作只能有一句话

语法：

条件？操作1：默认操作；=== if....else 条件1？操作1：条件2？操作2：默认操作；===if..else if...else

强制（显示）数据类型转换：

一、转字符串：2种方法

1.var str=x.toString()

2.var str=string(x)//万能的

二、转数字：3种

1.parseInt(str/Num)-parse解析，从左向右转换遇到非数字字符就会停止转换

parseInt(35.5)--35 parseInt("35.5")--35 parseInt("3hello5")--3 parseInt("hello35")--NaN parseInt("35px")--35 parseInt(true)--NaN

2.parseFloat(str)-parse解析-Float浮点型，可以解析小数点

parseInt(35.5)--35.5 parseInt("35.5")--35.5 parseInt("3hello5")--3 parseInt("hello35")--NaN parseInt("35.5px")--35.5 parseInt(true)--NaN

3.Number（x）,万能的，任何都可以转换成数字

三，转布尔

Boolean（x）;万能的任何人都可以转布尔，完全等效于隐式转换，其实Boolean（）就是隐式转换还不如！！x.只有6个会为false：0.undefined.Null.NaN.false.其它的转换布尔都为true

循环结构

一、3种循环结构

1.while循环：

语法：var 循环变量=几； while（循环条件）{ 循环体；循环变量变化起来； } while（true）{ 死循环操作}

2.for循环:和while原理一样的，但是它比while看上去更加简洁，while可以做的事for也可以做

语法佛如（var 循环变量；循环条件；循环变量变化起来） {循环体；}for的死循环：for(；；){循环体}

面试题：while和for区别

while和for从原理上来说没有区别，while更麻烦，一般不确定循环次数的时候使用-死循环，for更简单，一般确定循环彩塑的时候，大部分时候使用它

3.do...while循环...垃圾！！

语法var 循环变量=几； do{循环体；循环变量变化起来； }while（循环条件）

面试题：while和do....while区别的区别，区别只看第一遍，如果第一次条件都满足，两者没有区别，如果条件都不满足，while一次都不会执行，do...while会执行一次

Function的基础：非常重要

一、概念Function--函数，也称之为方法，先【预定义】好，以后可以【反复使用】的代码

二、如何使用函数；2步

1.定义/创建/声明；【声明方式】创建函数`function 函数名（）{函数体/代码段}`/【直接量方式】创建函数：`var 函数名=function（形参）{函数体；return 返回值；}`

2.调用函数：2种

1.直接在JS内部书写，函数名（），写几次就会被调用几次

2.在HTML页面上绑定点击事件：`<div onclick="函数名（）">文字</div>`

3.我们以后何时使用函数

1.不希望打开页面立刻执行

2.希望用户来除法

3.以后每一个独立的功能，都需要封装为一个函数

4.函数的地位很高，js中的第一等公民

4.一阶段我们就见过函数了

rotate（360deg）; url(图片路径)； 这种写法叫做带参数的函数

创建有形参的函数：2种

1.创建有形参的函数其实就是一个变量，只不过不需要写var ，而且不需要复制，所以称之为形式参数 function 函数名（形参，...）{函数体} 2.使用带参数的函数时，记得必须传入实参-实际参数就是你传递过去的值，函数名（实参，...）；比如：function zhazhiji(fruit){ console.log("正在榨"+fruit+"汁")}---->正在榨苹果汁.

注意，传参的时候顺序是不能乱的，必须和形参的顺序一一对应上，数量也不要多不要少，不带参数的函数，用于执行一些固定的操作，带有参数的函数，可以根据我们传入的实参的不同，执行的操作略微不同

总结：循环也可以反复执行，函数也可以反复执行，循环几乎是在打开页面的一瞬间就完成了，函数则需要调用后才会执行

作用域2种

1.全局作用域：全局变量和全局函数在页面上的任何位置都可以访问

2.函数作用域：局部变量和局部函数，只能在【函数调用时内部可用】

带来了变量的使用规则：优先使用局部的，局部没有找全局，全局没有就报错缺点：局部可以使用的全局不能使用局部的

数组Array的基础

数组都是线性排列的，除了第一个元素，每个元素都有唯一的前驱元素，除了最后一个元素，每个元素都有唯一的后继元素每个元素都有自己的位置，称之为叫做下标都是从0开始的，到最大长度-1（arr.length-1）

一，创建数组：2种

1.直接量方式：`var arr=[];//空数组 var arr[数据1，...]；`

2.构造函数方式：`var arr=new Array();空数组 var arr=new Array(数据1，....)；`

二，获取数组之中的数据数组名[i]---i->下标

三，后续添加/替换元素：数组名[i]=新数据，如果下标处没有东西，则为添加，有则为替换

四，数组有三大不限制

1.不限制元素类型 2.不限制元素个数 3.不限制下标越界

遍历数组 `for(var i=0;i<arr.length;i++){arr[i];}`

DOM;Document Object Model:文档对象类型，专门用于操作HTML文档的，提供了一些方法给我们

DOM概念：DOM将我们的HTML看做了一个倒挂的树状结构，但是树根不是HTML标签，而是Domcument对象，document：不需要程序员创建，由浏览器的js解释器自动创建，一个页面只有一个document树根作用：可以通过树根对象找到我们想要的任何一个DOM元素/节点/对象（属性和方法），DOM会将页面上的每一个元素，属性，文本，注释等等都会被视为一个DOM元素/节点/对象

查找元素：两大方面

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

通过ID去查找元素：var elem=document.getElementById("id值")返回值，找到了返回当前的DOM元素，没找到返回一个null，如果出现了多个相同的id，那么只会找到第一个但是！！！这个方法不要使用，要把id留给后端使用

通过标签名去查找元素 var elem=document/已找到的某个父元素.getElementByTagname("标签名")；返回值：找到了的返回的是一个类数组DOM集合，没找到返回一个空数组，JS只能直接操作DOM元素，不能直接操作DOM集合，要么下标拿到某个，要么遍历拿到所有

通过class名去查找元素 var elem=document/已找到的父元素.getElementByClassName（"class名"）；返回值：找到了返回的是一个DOM集合，没找到返回一个空数组，JS只能直接操作DOM元素，不能直接操作DOM集合，要么下标拿到某个，要么遍历拿到所有

通过元素之间的关系去找元素，前提是至少先【找到一个元素】才可以使用关系网，父亲：elem.parentNode;//单个元素儿子：elem.children;//集合第一个儿子：elem.firstElementChild;单个元素最后一个儿子：elem.lastElementChild;//单个元素前一个兄弟：elem.previousElementSibling;//单个元素后一个兄弟：elem.nextElementSibling;单个元素

2.操作元素：前提是要找到元素

1.内容

innerHTML--获取或设置开始标签到结束标签之间的内容。【支持识别标签的！！】获取：elem.innerHTML;设置：innerHTML="新内容"

innerText--获取或设置开始标签到结束标签之间的内容。【不支持识别标签的！！】获取：elem.innerText;设置：innerText="新内容"

以上两个属性都是专门为了双标签准备的，而有个但标签也可以写内容value-专门用于获取或设置input的内容，获取input.value；设置input.value="新值"

2.属性

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

简化版：获取属性值：elem.属性名；设置属性值：elem.属性名="属性值"简化版有两个缺陷：1.class必须写为className2.只能操作标准属性，不能操作自定义属性

3.样式二阶段我们就只用js来操作【内部样式】

获取样式：elem.style.css属性名；设置样式：elem.style.css属性名="css属性值"css属性名，有横线的地方换位小驼峰命名法比如：background-color------》backgroundColor、border-radius----》borderRadius

4.绑定事件

elem.onclick=function()[{操作***关键字 this 这个目前只能在【事件】内部使用如果单个元素绑定事件，this-->这个元素，如果多个元素绑定事件，this-->当前元素}

数组的基础2：

一、创建数组：

1.直接量创建法：`var arr=[值1，.......]；`

2.构造函数方式：`var arr=new Array(值1，.......);`

面试题：按值传递，var a=x var b=a,修改a或者b，a和b变不变。解答：如果传递的是原始类型，其实是复制了一份给对方，两者互不影响，如果传递的是引用类型，因为引用类型很大，不可能保存到本地，只是保存了一个地址值而已，其实是吧地址吗赋给了对方，两者使用同一个地址名，一个修改另一个也会变化

hash(关联属猪)：下标可以自己定义

一、创建：先创建一个空数组var arr=[];,为数组添加自定义下标且赋值：arr[自定义下标]=新值；

二、访问：arr[自定义下标]；

三、强调hash数组的length会失效，永远为0，遍历hash数组，不能再使用for循环了，而是用for in循环，它不需要设置从哪里开始哪里结束，纯自动化，专门为了遍历hash数组而存在的

语法： for(var i in arr){ i是小标 arr[i]当前次元素 }

hash数组的原理

hash算法，将字符串，计算出一个尽量不重复的数字（地址值），字符串内容兄台，则计算出的数字也相同添加元素：js解释器会将自定义小标交给hash算法得到一个和当初保存时完全相同的数字（地址值），通过此地址值就可以找到你当初保存的数据了

数组的API：

一、`arr to str:`

var str=arr.join("自定义连接符")； 有两个固定套路：1.var arr["h","e","l","l","o"];console.log(arr.join(" "))输出得到hello 2.将数组拼接为Dom页面元素：var arr["-请选择-"，"北京""，"上海""，"成都""，"重庆"]；var str"<option>"+arr.join("</option><option>")+"</option>";sel.innHTML=str:就可以在页面中得到一个select表单

二、拼接数组：添加元素的新方式

将你要传入的实参全部拼接到数组的末尾语法：var newArr=arr.concat(新值，......)；不修改原数组，只会返回一个新数组，concat支持传入数组参数，悄悄的将你传入的数组打散为单个元素再拼接

三、截取子数组；取出想要的某一部分

根据你传入的开始小标，一直截取到结束小标
语法：var subArr=arr.slice(stari,endi);
特殊：
1.不会修改原数组，只会返回一个新数组
2.含头不含尾
3.endi可以省略不写默认截取stari到后面的全部
4.strai和endi都可以不写，默认复制一份给新数组，此操作也叫深度拷贝，两者互不影响
5.支持参数为负数，-1就是倒数第一个
以上三个都是不修改原数组的，只会生成新数组的API

四、删插替：

删除：var dels=arr.splice(stari,n);n代表你要删除几个
特殊：虽然他直接修改原数组，但是也有返回值，返回的是被删除的数组成的数组，哪怕一个都没删除也会返回一个空数组。
插入：var dels=arr.splice(stari,0,新值，.....)；
特殊：
原stari位置元素，以及后续元素都会被向后移动，尽量不要插入一个数组，会导致我们的数一些是一维一些是二维，导致我们遍历的时候不方便
替换：var dels=arr.splice(stari,n,新值....)；
特殊：插入的元素和删除的元素，个数不必相等

五、反转数组：arr.reverse(); 用不到

六、！！！！数组的排序`arr.sort();`

默认：将数组中的元素转为字符串，然后再按位PK每个字符的Unicode号
希望按照数字升序排序：
arr.sort(function(a,b){此函数叫做匿名回调函数回调函数不需要我们调用
//console.log(a)后一个，console.log（b）前一个
return a-b升序，return b-a降序})

七、栈和队列：添加元素和删除元素的新方式

1.栈：其实就是数组，只不过是封闭的只能从一端进出
开头进：arr.unshift(新值1，......)添加元素的新方式，向前添加，缺点导致其它元素的小标都会发生变化
开头出：var first=arr.shift()；删除元素的新方式向前删除，一次只能删除一个，也有返回值，返回删除的那个元素，也会导致其它元素小标变化
结尾进：arr.push(新值，....)；添加元素的新方法，向后添加
结尾出：var last=arr.pop();从后删除，一次只能删除一个，返回被删除的元素
2.队列：其实就是数组，只不过只能从一段进，从另外一段出，何时使用，按照先来后到的顺序拿数据，如何使用：第一种开头进结尾出第二种结尾进开头出

八、ES5为数组提供了新的3组6个API；

1.判断：2个判断的结果一定为一个布尔值
every:每一个，要求所有的元素都满足条件，结果才为true，只要有一个不满足就为false，非常类似于&&
var bool=arr.eveery(function(val,i,arr){ var表示当前值、i当前值的下标、arr数组本身、return 判断条件 })
some：有一些，要求只要有一些元素满足，则为true，全部满足才为false非常类似我们以前学的||
var bool;=arr.some(function(val,i,arr){ 操作})<br> 2.遍历:拿到数组中的每一个元素做相同或相似的操作
forEach---直接修改原数组
arr.foEach(function(val,i,arr){操作})
map---不修改元数组，返回一个新数组
var newArr=arr.map(function(val,i,arr){ return 操作})
3.过滤和汇总：
过滤：筛选出你需要的部分，但是和现实不太一样，原数组是不会变化的
var subArr=arr.filter(function(val,i,arr){ return 判断条件})
汇总：
var sum=arr.reduce(function(prev,val,i,arr){ return prev+val})
以上6个都是为了简化for循环
ES6箭头函数，专门简化一切的匿名回调函数：
公式：function去掉，（）和{}之间添加一个=>,如果形参只有一个，那么（）可以省略，如果函数只有一句话，那么{}省略，如果函数体只有一句话，并且是return，那么return和{}一期省略
二维数组：数组的元素，又引用着另外一个数组
创建：
var arr=[
["张云龙"，18，3500]
["张云龙"，18，3500]
["张云龙"，18，3500]
]
访问：arr[行下标][列下标]
特殊：面试题，列下标越界，返回undefined，行下标越界，得到一个报错，因为行下标越界其实已经得到undefined了，undefined没有资格加[]做操作
遍历二维数组，必然需要两层循环，外循环控制行，内层循环控制列

for(var r=0;r<arr.length;r++){
for(var c=0;c<arr[r].length;c++){
console.log(arr[r][c]);
}
}

!!!!!string的概念、

什么是字符串：多个字符组成的【只读】字符【数组】
和数组有相同点：
1.字符串的个数，str.length;
2.获取字符串中的某个字符：str[i];
3.遍历字符串
4.所有数组不修改原数组的API,字符串也可以使用（concatenate，slice）
和数组也有很多不同的地方：所有数组直接修改原数组的API,字符串都不可以使用，比如排序就只有数组可以使用

！！！！引用/对象类型：11个

*String Number Boolean -> 这三个人具有包装类型 *Array *Function Date（日期） Math（数学） *RegExp（正则：验证） Error（错误） *Object（面向对象） Global（全局对象）- 全局对象，不需要我们创建，只不过在浏览器端被window对象代替了，自然保存着全局变量和全局函数，只不过window可以省略不写，而有一天我们会去学习后端/服务器端Node.js的时候，你会发现global的存在

！！！包装类型：专门用于将原始类型的值封装为一个引用类型的对象的

包装类型：专门用于将原始类型的值封装为一个引用类型的对象的为什么：原始类型的值原本是没有任何属性和方法，意味着原始类型本身是不支持.去做任何操作的但是前辈们发现字符串经常会被我们程序员所操作，为了方便我们程序员所以为这三个人提供了包装类型，变成了对象（提供了属性和方法）何时使用：只要你试图使用原始类型的值去调用任何属性或方法时，他会自动包装何时释放：方法调用完毕后，自动释放包装类型，又变成了一个原始类型的值

****** stringAPI

一、转义字符

作用： 1、将字符串中和程序冲突的字符转为原文 """ ''' 2、包含特殊功能的符号换行：\n 制表符：\t 大空格，跟你敲tab效果是一样的 3、*输出unicode编码的字符汉字的第一个字：\u4e00 -> ascii码：19968 汉字的最后一个字：\u9fa5 -> ascii码：40869

二、*大小写转换：将字符串中每个英文字符统一的转为大写或小写

何时：只要程序不区分大小写，就要【先统一】的转为大写或小写，再比较（做验证码）如何： var 大写=str.toUpperCase(); var 小写=str.toLowerCase();

三、获取字符串中的指定位置的字符：str.charAt(i) === str[i]

四、*获取字符串中的指定位置的字符的ASCII码：

var ascii=str.charCodeAt(i); 通过ASCII码转回原文 var 原文=String.fromCharCode(ascii);

五、检索字符串：检查索引 - 检查下标，获取关键字的下标

var i=str/arr.indexOf("关键字",starti); 从starti位置开始，查找右侧第一个关键字的第一个字符的下标 starti可以省略，默认从0位置开始查找返回值：找到了，返回的第一个关键字的第一个字符的下标 没找到，返回-1，其实我们根本不关心下标为多少，我们只管下标为不为-1
作用：判断有没有，只要你不希望有重复的就用它
强调：数组也能使用此方法，数组这个方法其实是后期才添加上的，原本此方法只有字符串可用，比如老IE（8以前）的数组就没有此方法
鄙视题：默认只能获取第一个关键字的下标，如何才能获取到所有的关键字的下标呢？

var str="no zuo no die no can no bibi";
var index=-1;
while((index=str.indexOf("no",index+1))!=-1){
console.log("找到了关键字no，下标为："+index);
}

六、拼接字符串：var newStr=str.concat(新字符串,...) === 还不如+运算

七、截取字符串：3个

ar newStr=str/arr.slice(starti,endi+1);//和数组的用法一摸一样
str.substring(starti,endi+1);//几乎和slice一样，但是不支持负数参数
str.substr(starti,n);//n代表截取的个数，不必考虑含头不含尾

八、替换字符串，本身这个方法非常强大，但是由于我们暂时不会使用正则，所以我们只能替换固定关键字

var newStr=str.replace("固定关键字"/RegExp,"新内容")

九、去掉开头结尾的空白字符：

str.trim(); str.trimStart(); str.trimEnd();

十、切割/分割字符串：

作用：将字符串切割为数组：str<=>arr
var arr=str.split("自定义切割符");
特殊：
1、切割后，切割符就不存在了
2、如果你的切割符写的就是一个空字符串""，切散每一个字符

Math对象：专门提供了数学计算的API

强调：Math不需要创建，直接使用，由浏览器的JS解释器自动创建
属性：Math有一些属性，涉及到科学计数法，但是几乎用不到，只有Math.PI可能会用到 === 3.1415926.... 这一串数字不需要你自己创建

Math的API

一、取整

1、上取整：超过一点点，就会取下一个整数 Math.ceil(num);//小数点位数不能超过15位，否则会失效

2、下取整：无论超过多少，都会省略小数点部分 Math.floor(num);

3、四舍五入取整： Math.round(num);//只看第一位小数

//以上三个方法都是垃圾：都是在取整，而且只能取整
//目前我们学过的取整方式：以上三个+*parseInt(str)+*num.toFixed(d);
//num.toFixed(d);

优点：
1、d代表保留的效数位数，而且也带有四舍五入的功能
2、解决浏览器带来的舍入误差，计算机很笨，但是他的记忆力很强，而且速度很快，笨在何处？比如：2-1.6 === 0.3999999999999

缺点：
1、返回的结果是一个字符串，建议搭配parseFloat使用

二、乘方和开方

乘方：Math.pow(底数,幂) === ES9提供了简化：底数xx幂开方：Math.sqrt(num);//只能开平方

三、最大值和最小值：

var max/min=Math.max/min(a,b,d,c,e,f,g...........);//自动在你传入的数字中找到最大值或最小值
问题：默认不支持数组参数
解决：固定用法：
Math.max/min.apply(Math,arr);//apply具有打散数组的功能

四、绝对值：把负数变成整数

Math.abs(num)

五、随机数：`Math.random();` - 在0~1之间取一个随机小数

搭配上parseInt，只能取到0，不可能取到1，意味着可以取到最小值，而取不到最大值
公式：parseInt(Math.random()*(max-min+1)+min);

Date对象：日期对象，提供了可以操作日期和时间的API

一、创建：4种

1、*创建当前时间：
var now=new Date();
 2、*创建一个自定义时间：
var birth=new Date("yyyy/MM/dd hh:mm:ss");
3、创建一个自定义时间：
var birth=new Date(yyyy,MM-1,dd,hh,mm,ss);//修正月份，从0~11月，0代表1月
4、*复制一个日期：
为什么：日期的所有的API都是直接修改原日期的，无法获得修改之前的日期
所以，在执行API之前都要先进行一次复制，然后再操作复制后的日期
var end=new Date(start);

二、操作：2类

1、*两个日期对象之间可以相减，得到一个毫秒差（大-小），换算出自己想要的任何一部分 -
日期的本质其实就是保存了一个毫秒数（做出倒计时的关键）
创建日期的最后一种方式，绝对没人使用：var date=new Date(毫秒数);//计算机的元年是1970年1月1日 8点

2、API：
	分量：时间的单位
	年月日星期：FullYear Month Date Day
	时分秒毫秒：Hours Minutes Seconds Miiliseconds
	每一个分类都有一对儿getXXX/setXXX
	   其中getXXX负责获取一个分量的值
	   其中setXXX负责设置一个分量的值

	特殊：
		1、取值范围：日期还会自动进制
		FullYear - 当前年份的数字
		Month - 0~11
		Date - 1~31
		Hours - 0~23
		Minutes、Seconds：0~59
		Day：0~6，0代表星期天，外国人的眼里星期天是一周的第一天
		2、任何人都可以set，唯独Day没有set操作
		3、如果希望对某个分类进行加减操作的话
		date.setXXX(date.getXXX()+/-n)
		4、格式化日期为本地字符串：
                date.toLocaleString(); - 垃圾，具有兼容性问题，我们一般会选择自己封装一个format函数来进行格式化
		用了此方法会失去一些东西：日期的自动进制，以及日期所有的API
		但是你也会得到一些东西：字符串所有的API，你可以解锁更多的操作（替换、截取、切割...）

三、定时器：

1、周期性定时器：每过一段时间就会执行一次，先等再做，会反复执行，需要自己写停止才能停止
开启：timer=setInterval(callback,间隔毫秒数);
停止：clearInterval(timer);

2、一次性定时器：等待一段时间，执行一次就结束了
开启：timer=setTimeout(callback,间隔毫秒数);
停止：clearTimeout(timer);
两个定时器，看起来是不同的操作，其实底层是一模一样的，没有谁好谁坏这一说，甚至两者可以相互转换！

介绍概念：
同步技术：代码必须一行一行的执行，前面的没做完，后面的只能等着，目前为止，几乎所有的代码，都属于同步技术

异步技术：无论我们这一块代码多么耗时，也不会卡住后续代码，目前这个技术只有定时器，以后有更牛逼的（ajax）

扩展：如何使用JS创建页面元素：3步 - 深入数据渲染
	1、创建空标签：
		var elem=document.createElement("标签名");

	2、为其设置必要的属性和事件
		elem.属性名="属性值";
		elem.on事件名=function(){}

	3、渲染到DOM树 - 上树
		父元素.appendChild(elem);

BOMBrowser Object Model：浏览器对象模型，专门用于操作浏览器的，但是她使用的不多，远不如ES和DOM，浏览器很多操作都是自带的

而且BOM没有标准，各个浏览器都有自己的定义，但是大部分浏览器都是一致规范，除了老IE BOM的所有东西，都不需要创建，直接使用，浏览器的JS解释器会自动创建

window对象：扮演着两个角色:一个页面只有一个window

1、代替全局对象global，保存着全局变量和全局函数
2、【指代当前窗口本身】
   属性：专门用于获取大小
     1、获取浏览器的完整大小：outerWidth/outerHeight;
     2、*获取浏览器的文档显示区域(用户能看到的部分)的大小：innerWidth/innerHeight;
	3、获取屏幕的完整大小：screen.width/height;
   方法：
   1、*打开链接的新方式：
      1、当前窗口打开，可以后退
           HTML：<a href="">内容</a>
           JS：open("url","_self");
      
      2、当前窗口打开，禁止后退，使用场景：比如电商网站，结 账后禁止后退
       HTML做不到，只有JS可以，但是也不是window能做到，而是另外一个人
       history：【当前窗口】的历史记录（打开过的url），他其实可以做的事儿就是前进和后退
        location：【当前窗口】的正在打开的url，而他有一个API：
          location.replace("新url");//叫做替换，不叫作跳转，是不会产生历史记录的，自然也就不能后退前进，但是网址都替换了，网页必然也会发生变化
      3、新窗口打开，可以打开多个
      HTML：<a href="" target="_blank">内容</a>
      JS：open("url","_blank");
      4、新窗口打开，只能打开一个，使用场景：比如电商网站，只允许用户打开一个结账页面
       HTML：<a href="" target="自定义name">内容</a>
       JS：open("url","自定义name");
解释：其实窗口的底层都有一个名字，如果打开了一个已经开着的名字的窗口，新打开的就会把旧的给替换掉，但是给大家的感觉有一点刷新的感觉
   2、打开新窗口/新链接：var newW=open("url","target","width=?,height=?,left=?,top=?");
       特殊：
           1、如果你没有传入第三个参数，那么窗口会和浏览器融为一体，浏览器多大，窗口就多大
           2、如果你传入了第三个参数，那么窗口会和浏览器分离开，独立存在
           3、可以拿个变量保存住此窗口，以后用于其他操作
   3、关闭窗口：window/newW.close();
   4、改变新窗口的大小：newW.resizeTo(新宽,新高);
   5、改变新窗口的位置：newW.moveTo(新x,新y);
   6、*window还提供了三个弹出框：具有兼容性问题，换一个浏览器长相就不一样了
               警告框：alert("警告文字");
               输入框：var user=prompt("提示文字");
               确认框：var bool=comfirm("提示文字");
   7、***定时器其实也是window的
   8、***window的专属事件：
       1、window.onload - load：加载，等待其他所有的资源加载完毕后才会执行的代码，放在里面的代码其实是最后才会执行的，只要我们把JS放在HTML的后面，就不需要此操作
       2、window.onresize - 创建如果大小发生了变化，就会触发，搭配上上面的innerWidth，我就可以判断现在窗口的大小不同，做不同的操作，他就是css3媒体查询的底层原理
       3、window.onscroll - 滚动事件，一旦滚动就会触发
            1、获取滚动条当前的位置：window.scrollY
            2、获取元素举例页面顶部有多远：elem.offsetTop/offsetLeft
    9、*****本地/客户端存储技术：
       cookie：淘汰了，存储大小只有2kb，而且操作极其复杂，尤其需要到处切割，最多只能保存30天
       webStorage：H5（概念统称）带来的一个新特性：存储大小有8mb，永久保存，而且操作非常简单！
           分2类：
             1、sessionStorage - 会话级，只要浏览器一旦关闭，数据就会死亡
             2、localStorage - 本地级，只要你不清空他，他就永久存在
           操作：
             1、添加：xxxStorage.属性名="属性值";
             2、读取：xxxStorage.属性名;
             3、删除：xxxStorage.removeItem("属性名");
             4、清空：xxxStorage.clear();

Javascript基础

Javascript基础

Javascrip概念：简称js是一个运行在浏览器客户端的解释型，弱类型，面向对象的脚本语言

一、js的运行环境：

二、解释型：

三、弱类型：

四、面向对象：

五、特点

如何使用JS：

一、使用方法有两种

二、输出方式：有三种

三、变量与常量

四、数据类型有哪些，分为两大类

运算符

一、算术运算符：+、-、*、/、%

二、关系运算符：>、<、>=、<=、==、!=、===、!==

三逻辑运算符：再2比较运算符的基础上，再进行综合比较：

四逻赋值运算符：=、+=、-=、*=、%=、/=

五、自增自减运算符：==、++

六、位运算符

分支结构*

一、程序的流程控制语句：3种

二、如何使用：3大类

if分支，一件事满足就做不满足就不做1. if（条件）{操作}2. if（条件）{操作}else{操作}，一个条件两件事，满足就做第一件，不满做就做第二件3. if（条件）{操作}else if（条件）{操作}一个条件两件事，满足谁就做谁

switch...case分支，前提是只要知道结果是什么才可以使用

语法：

三目运算：纯粹是为了简化【简单的】分支，操作只能有一句话

语法：

强制（显示）数据类型转换：

一、转字符串：2种方法

1.var str=x.toString()

2.var str=string(x)//万能的

二、转数字：3种

1.parseInt(str/Num)-parse解析，从左向右转换遇到非数字字符就会停止转换

2.parseFloat(str)-parse解析-Float浮点型，可以解析小数点

3.Number（x）,万能的，任何都可以转换成数字

三，转布尔

循环结构

一、3种循环结构

1.while循环：

2.for循环:和while原理一样的，但是它比while看上去更加简洁，while可以做的事for也可以做

面试题：while和for区别

3.do...while循环...垃圾！！

面试题：while和do....while区别的区别，区别只看第一遍，如果第一次条件都满足，两者没有区别，如果条件都不满足，while一次都不会执行，do...while会执行一次

Function的基础：非常重要

一、概念Function--函数，也称之为方法，先【预定义】好，以后可以【反复使用】的代码

二、如何使用函数；2步

1.定义/创建/声明；【声明方式】创建函数function 函数名（）{函数体/代码段}/【直接量方式】创建函数：var 函数名=function（形参）{函数体；return 返回值；}

2.调用函数：2种

1.直接在JS内部书写，函数名（），写几次就会被调用几次

2.在HTML页面上绑定点击事件：<div onclick="函数名（）">文字</div>

3.我们以后何时使用函数

1.不希望打开页面立刻执行

2.希望用户来除法

3.以后每一个独立的功能，都需要封装为一个函数

4.函数的地位很高，js中的第一等公民

4.一阶段我们就见过函数了

创建有形参的函数：2种

注意，传参的时候顺序是不能乱的，必须和形参的顺序一一对应上，数量也不要多不要少，不带参数的函数，用于执行一些固定的操作，带有参数的函数，可以根据我们传入的实参的不同，执行的操作略微不同

总结：循环也可以反复执行，函数也可以反复执行，循环几乎是在打开页面的一瞬间就完成了，函数则需要调用后才会执行

作用域2种

1.全局作用域：全局变量和全局函数在页面上的任何位置都可以访问

2.函数作用域：局部变量和局部函数，只能在【函数调用时内部可用】

数组Array的基础

一，创建数组：2种

1.直接量方式：var arr=[];//空数组 var arr[数据1，...]；

2.构造函数方式：var arr=new Array();空数组 var arr=new Array(数据1，....)；

二，获取数组之中的数据 数组名[i]---i->下标

三，后续添加/替换元素：数组名[i]=新数据，如果下标处没有东西，则为添加，有则为替换

四，数组有三大不限制

遍历数组 for(var i=0;i<arr.length;i++){arr[i];}

DOM;Document Object Model:文档对象类型，专门用于操作HTML文档的，提供了一些方法给我们

查找元素：两大方面

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

2.操作元素：前提是要找到元素

1.内容

2.属性

3.样式二阶段我们就只用js来操作【内部样式】

4.绑定事件

数组的基础2：

if分支，一件事满足就做不满足就不做1. `if（条件）{操作}`2. `if（条件）{操作}else{操作}`，一个条件两件事，满足就做第一件，不满做就做第二件3. `if（条件）{操作}else if（条件）{操作}`一个条件两件事，满足谁就做谁

1.定义/创建/声明；【声明方式】创建函数`function 函数名（）{函数体/代码段}`/【直接量方式】创建函数：`var 函数名=function（形参）{函数体；return 返回值；}`

2.在HTML页面上绑定点击事件：`<div onclick="函数名（）">文字</div>`

1.直接量方式：`var arr=[];//空数组 var arr[数据1，...]；`

2.构造函数方式：`var arr=new Array();空数组 var arr=new Array(数据1，....)；`

二，获取数组之中的数据数组名[i]---i->下标

遍历数组 `for(var i=0;i<arr.length;i++){arr[i];}`

1.直接量创建法：`var arr=[值1，.......]；`

2.构造函数方式：`var arr=new Array(值1，.......);`

一、`arr to str:`

六、！！！！数组的排序`arr.sort();`

二、*大小写转换：将字符串中每个英文字符统一的转为大写或小写

五、随机数：`Math.random();` - 在0~1之间取一个随机小数