javascript基础
###一、javascript介绍: 简称：js，是一门运行在浏览器端的解释型弱类型面向对象脚本语言
由三部分组成：ECMAScript（核心语法3/5/6/7/8/9/10/11/12） DOM（和网页挂钩的） BOM（和浏览器挂钩）
1浏览器端：
打开浏览器就可以自己运行
2、类型
编译型：在程序执行执行之前，语法如果有错误，直接不运行 解释性：在程序运行之前，不需要检查语法是否正确直接运行，遇到错后续代码直接不运行 强类型：变量保存的数据，是由数据的类型来决定的 弱类型：变量保存的数据是可以随意的，数据类型由数据来决定 例：1--数字 "1"--表示字符串
3面向对象常见写法
对象名.属性名;
对象名.方法名();
4特点
1、可以使用一切编辑工具编写js代码 2、在程序运行之前，不需要检查语法是否正确直接运行，遇到错后续代码直接不运行 3、变量保存的数据，是由数据的类型来决定的 4、变量保存的数据是可以随意的，数据类型由数据来决定 5、可以完成css完成不了的操作
二、javascript的使用
1使用方式：
①在HTML页面上书写一个script标签，再在里面书写js代码
②创建一个xx.js的文件，再在HTML进行引入
2输出方式（打桩输出） ①在控制台输出日志：console.log（想要输出的东西）;推荐 ②在页面上输出document.write(想要输出的东西); ③在弹出框输出日志：alert(想要输出的东西); 3变量 创建后可以修改 语法： var 变量名=变量值； 注： ①变量名不是随意的
②建议使用驼峰命名
③命名要见名知意
④变量值不可以是关键字
⑤变量可以创建，不可以赋值，默认值为undefined
⑥变量名可以连续写多个
例：var 变量名=值，变量名=值，变量名=值，变量名=值；
4常量：
于变量相反创建后不可修改生活中常见的常量有一小时为60分钟
语法：const 常量名=常量值；
其余特点于变量一样
5数据类型：原始/基本/值类型：5个，查看数据类型：typeof(变量);
①number - 数字：取值有无数个，
②string - 字符串：取值有无数个，但是必须加上："" 或 ''
③boolean - 布尔：取值只有2个，分别叫true（真|对） 或 false（假|错）
④null - 空，取值只有1个，就是null，
⑤undefined - 取值只有1个，就是undefined，
6运算符
①*算术运算符：+ - * / %
②比较/关系运算符：> < >= <= == != === !==
③赋值运算符：= += -= *= /= %=
④逻辑运算符：综合比较 - 用于写条件
1，&&：与（并且）
全部条件都满足，结果才为true，只要一个不满足，结果就为false
2，||：或者 全部条件都不满足，结果才为false，只要一个满足，结果就为true
3，!：颠倒布尔值
5自增自减运算符： ++ -- i++ ===> i+=1 ===> i=i+1 自增：固定的每次只能+1
6、位运算：
左移：m<<n，读作m左移了n位，翻译：m*2的n次方
右移：m>>n，读作m右移了n位，翻译：m/2的n次方
二、分支结构
1、程序的控制语言；三种
1、顺序结构 - 默认：从上向下依次执行每一句话
2、分支结构 - 通过条件判断，选择部分代码执行
3、循环结构 - 通过条件判断，选择要不要重复执行某块代码
1、if...else...如何使用：3种情况
1、一个条件，一件事，满足就做，不满足就不做
if(条件){
操作;
}
2、一个条件，两件事，满足就做第一件，不满足就做第二件
if(条件){
操作;
}else{
默认操作;
}
3、多个条件，多件事，满足谁，就做谁
if(条件1){
操作1;
}else if（条件2）{
操作2;
}else{
默认操作;
}
2、switch...case 分支：默认只要一个case满足后，会将后续所有的操作全部做完
解决：break;建议：每一个case的操作后面都跟上一个break
语法：
switch(变量/表达式){
case 值1:
操作1;
break;
case 值2:
操作2;
break;
default:
默认操作;
}
3、三目运算：简化分支
语法：
条件？操作1：默认操作；===if...else...
条件1？操作1；条件2？操作2：默认操作===if...else...
注：默认操作不可以省略，省略会报错，如果比较复杂不建议用三目运算，
页面上一切数据js获取到后都是字符串类型
1、强制转换：
①转字符串：2种方法
1、var str=x.toString();
2、万能的：var str=String(x);
2、转数字：3种方法
1、parseInt(str/num);
console.log(parseInt("35.5"));
2、parseFloat(str);
console.log(parseFloat("35.5"));
3、Number(x);
3、转布尔值；得到的结果只有6个为false：0,"",undefined,NaN,null,false，其余全部都是true
Boolean(x);
3、循环结构：反复执行 相同 或 相似的操作
循环的三要素：
①循环条件：开始 - 结束，循环的次数
②循环体：做的操作是什么
③循环变量：记录着我们当前在哪一次，而且他会不断的变化
1、while循环：首先创建出循环变量，判断循环条件，如果条件满足，则做一次循环体操作，并不会退出循环，而会回过头再次判断循环条件满不满足，如果满足，则做一次循环体操作，...直到条件不满足，才会退出循环
var 循环变量=几;
while(循环条件){
循环体;
循环变量变化;
}
2、for循环：和while的原理是一样的，但是他比while看上去更加的简洁
for(var 循环变量=几;循环条件;循环变量变化){
循环体;
}
3、do...while循环
var 循环变量=几;
do{
循环体;
循环变量的变化
}while(循环条件)
函数：Function的基础：
1、Function 也叫函数也叫方法，【先预定义】好，以后可以【反复使用】的【代码段】
2、如何使用函数：2步
1定义/创建/声明：
function 函数名(){
函数体/代码段;
}
函数名()//调用函数
2、在html绑定事件<elem onclick="函数名()"></elem> 什么元素都可以用
3、何时使用函数
①、不希望打开页面立刻执行
②、希望用户来触发提升用户的体验感
1、在css中见过的函数
带参数的函数
1、rotate(180deg)
2、url(2.jpg)
4、自定义函数（function）
1、创建：（两种）
1、function 函数名(形参列表){
操作;
return 返回值/结果;
}
2、var 函数名=function(形参列表){
操作;
return 返回值/结果;
}
2、调用： var 接住返回的结果=函数名（实参列表）;
3、作用域：两种
①全局作用域：全局变量 和 全局函数，在页面的任何一个位置都可以使用。
②函数作用域：局部变量 和 局部函数，在【当前函数调用时，内部可用】
4、申明提前：在程序正式执行之前，将var声明的变量（轻）和function声明的函数（重），都会悄悄的集中定义在当前作用域的顶部，但是赋值留在原地
5、重载：相同的函数名，根据传入的实参的不同，自动选择对应的函数去执行
数组的基础
1、创建数组：2种
1、直接量方式：var arr=[];//空数组
var arr=[数据1，数据2，...];
2、构造函数方式：var arr=new Array();//空数组
var arr=new Array(数据1,...);
2获取数组之中的元素： 数组名[arr]
3、后续添加/替换元素：
数组名[i]=新数据;
如果下标处没人则为添加，如果下标处有人则为替换
4、数组具有三大不限制
1、不限制元素的类型
2、不限制元素的长度
3、不限制下标越界
5、数组中有一个唯一的属性：length==>作用：获取到数组的长度，长度是从1开始的
语法：数组名.length
三个固定套路：
1、向末尾添加元素：arr[arr.length]=新数据;
2、获取数组的倒数第n个元素：arr[arr.length-n];
3、缩容：删除倒数n个元素：arr.length-=n;
6、遍历数组：往往很多情况，我们不会拿出某个元素来使用，而是拿出每个元素来进行 相同 或 相似的操作 - 搭配上循环
固定公式：
for(var i=0;i<arr.length;i++){
arr[i];//当前次元素
}
DOM：Document Object Model：文档对象模型
1、DOM树概念：DOM将我们的HTML看作了是一个倒挂的树状结构，但是树根不是html标签，而是document的对象
document对象：由浏览器的js解释器自动创建，一个页面只有一个document树根DOM会将页面上的每个元素、属性、文本、注释等等都会被视为一个DOM元素/节点/对象
2、元素查找：两大方面：
1、直接通过HTML的特点去查找元素：
①、通过ID查找元素：var elem=document.getElementById("id值");
特点： 1、找到了返回当前找到DOM元素，没找到返回的一个null
2、如果出现多个相同id，只会找到第一个
3、通过标签名查找:var elems=document/已经找到的父素.getElementsByTagName("标签名");
4、通过class名查找
特点：1、返回值，找到了返回一个类数组DOM集合，没找到得到空集合
2、js只能直接操作DOM元素，不能直接操作DOM集合，解决：要么下标拿到某一个，要么遍历拿到每一个。
3、不一定非要从document开始查找，如果从document去找，会找到所有的元素，可以换成我们已经找到的某个父元素
5、通过关系去获取元素：前提条件：必须先找到一个元素才可以使用关系
父元素：elem.parentNode; - 单个元素
子元素：elem.children; - 集合
第一个子元素：elem.firstElementChild; - 单个元素
最后一个子元素：elem.lastElementChild; - 单个元素
前一个兄弟：elem.previousElementSibling; - 单个元素
后一个兄弟：elem.nextElementSibling; - 单个元素
6、操作元素：前提：先找到元素，才能操作元素
1、内容：前面两种为双标签准备得
1、*elem.innerHTML - 获取和设置开始标签到结束标签之间的内容，支持识别标签的
获取：elem.innerHTML;
设置：elem.innerHTML="新内容";
2、elem.innerText - 获取和设置开始标签到结束标签之间的纯文本，不识别标签的
获取：elem.innerText;
设置：elem.innerText="新内容";
单标签例：input标签
3、input.value - 专门获取/设置input里的内容
获取：input.value;
设置：input.value="新内容";
2、属性：
获取属性值：elem.getAttribute("属性名");
设置属性值：elem.setAttribute("属性名","属性值");
简化版：
获取属性值：elem.属性名;
设置属性值：elem.属性名="属性值";
简化版的缺点：
1、class必须写为className - ES6(2015年)class变成了一个关键字
2、不能操作自定义属性
3、样式：
使用样式的方式：3种
1、*内联样式
2、内部样式表
3、外部样式表 - 一阶段做开发用的都是外部样式表
获取样式：elem.style.css属性名;
设置样式：elem.style.css属性名="css属性值";
特殊点：
1、css属性名，有横线的地方，去掉横线，变为小驼峰命名法
border-radius ----- borderRadius
2、小缺陷：获取时，我们只能获取到内联样式，因为我们目前学的就是内联样式的操作
4、绑定事件：
elem.on事件名=function(){ 操作;
*关键字this - 这个
如果单个元素绑定事件，this->这个元素
如果多个元素绑定事件，this->当前触发事件元素 }*
一切的获取，往往都是为了判断
一切的设置，可以说是添加也可以说是修改
