JavaScript介绍：简称JS，是一个运行在【客户端/浏览器】的【解释型】【弱类型】【面向对象】脚本语言 想要运行JS是需要由运行环境的 1、浏览器自带js解释器 2、node.js需要安装环境 ** **编译型：在程序正式运行之前，会检查有没有报错，如果有报错直接不运行，比如：Java、c++、c#... - 严格的 解释型：在程序正式运行之前，不会检查有没有报错，直接运行，碰到错误后就会停止了，比如：JavaScript、node.js、php... - 自由的 ]
**弱类型：再创建一个变量时，你想放入什么数据，就放入什么数据，非常的自由
** 强类型：再创建一个变量之前，必须先规定，此变量可以保存什么数据类型，才能再往里面放入什么数据，比如：Java - 严格的******** js运行方式：2种 1、直接在html上写一个script的双标签，里面书写js代码 - 临时测试玩法 2、在外部创建有个js文件，在其中写入js代码，html进行引入 - 正式开发玩法
1、打桩输出的三种方式： 作用：检测代码是否有问题，找错，找bug *1、在控制台输出：console.log(想要输出的东西); //console控制台 log日志 2、在页面上输出：document.write(想要输出的东西);//document文档 write写入，能够识别标签，但是是个垃圾：如果搭配上点击事件，会调换掉原有的页面 3、在警告框输出：alert(想要输入的东西); //垃圾：卡住整个html页面，用户不关掉，是看不见html的，只能看到一个白板
2、js注释：作用：方便以后阅读代码（维护），玩 单行注释：// 多行注释：/**/
3、变量和常量： 硬盘：外部存储器：外存，保存文件/数据 CPU：中央处理器，计算速度 内存：内部存储器，保存的是应用程序在执行过程中，所需要用到的一些数据，变量其实就一个内存，我们取得变量名就是一个内存地址
*变量：可以保存数据，如果数据繁琐，以后可以使用变量名，相当于就是在使用变量的值，变量顾名思义，值以后是可以改变的 何时使用：只要反复出现/反复使用的数据，都要先提前保存在变量之中 语法：var 变量名=变量值; 特殊：1、变量名其实不是随意的： 1、不能是数字开头，可以数字结尾 2、建议：尽量的见名知意 name xingming - 不太推荐，逼格太low了，影响你装逼的速度，也影响你以后谈薪的资本 a - 最不推荐，不能见名知意，而且会用完，以后维护也不方便 3、name其实是一个关键字，不管你保存的数据类型是什么，最后都会悄悄地变成一个字符串 4、千万不要拿着关键字当变量名 2、可以不保存数据，会有一个默认值undefined，undefined是个垃圾，拿来干什么都要不得 - 非常不推荐大家创建变量不赋值 3、创建多个变量时可以简写，var只写一次，每个变量之间使用，进行分割
常量：一旦创建，值不允许修改 现实生活中哪些是常量？但是常量其实很少，代码中也会很少使用 1、一周7天 2、pi - 3.1415926.... 3、一年12个月 4、地球的公转速度/自转速度 5、一年365/366天 语法：const 常量名=值;
4、数据类型： 1、原始/基础/值类型：5个 *1、number - 数字类型，取值有无数个 *2、string - 字符串类型，取值有无数个，但是需要加上""或''括起来 *3、boolean - 布尔类型，取值只有两个：true（真/对） 或 false（假/错），一般用于做比较判断是才会出现 4、null - 空，释放你不再需要的内存/变量，节约内存空间 5、undefined - 拿来干什么都要不得，这是我们祖师爷犯下的一个错误
2、引用/对象类型：11个对象，有很多很多的属性和方法等待我们去学习
5、运算符： 赋值运算符：= 算术运算符：+ - * / % 特殊：1、%：取余，俗称模，两个数相除，不去商，而且除不尽的余数 5%2 -> 1 3%5 -> 3 作用： 1、最大的作用就是判断奇偶性，num%2，如果等于0说明是偶数，如果等于1说明是奇数 2、获取某个数字的后几位 console.log(1234%10);//4 console.log(1234%100);//34 console.log(1234%1000);//234 3、控制一个数字永远不超过某个数字 num%3 -> 结果永远不会超过3 2、*算数运算都具有隐式转换：悄悄地都会转为数字，再运算 特殊：+运算，只要碰上一个字符串，则悄悄的两边都会转为字符串，+运算不再是+运算，变成了一个拼接操作
扩展： 1、用户输入框：var user=prompt("提示文字"); 2、分支结构 1、只有条件满足是才会执行操作，一个条件一件事，满足就做不满足就不做 if(条件){ 操作 }
2、条件满足是才会执行操作，条件不满足则执行默认操作，一个条件两件事，满足就做第一件，不满足就做第二件 if(条件){ 操作 }else{ 默认操作 }
3、多个条件多件事，满足谁就做谁 if(条件1){ 操作1 }else if(条件2){ 操作2 }else{ 默认操作 }
注意：1、第三种写法：else if可以有多个 2、分支只要走了一条路，就不会再看其他路了 3、else其实可以省略不写，但是不推荐，如果条件都不满足，则什么都不会执行
***数据类型的转换：不同的数据类型做操作可能出来的结果是不一样的 Number + Number = Number Number + String = String
js获取到的页面上的一切东西，一定都是一个字符串
如果你想要查看数据类型：typeof(查看的东西)：
1、***隐式转换：悄悄地，我们程序员看不见的 1、算术运算符的隐式转换： 默认：悄悄的将左右两边的东西，转为一个数字，在运算 特殊：1、+运算，碰上一个字符串，两边都会悄悄的变成一个字符串，+运算，不再是+运算，而是一个拼接操作 2、原来别的数据类型也可以转为数字 true->1 false->0 null->0 undefined->NaN //只要是转为数字，但是我有知道该转为什么数字，结果一定为NaN 3、其实- * / %字符串也可以转为数字，前提要是一个纯数字组成的字符才可以，但凡包含了一个非数字字符则为NaN "100"->100 "100px"->NaN 4、NaN：Not A Number，不是一个数字，但是确实是数字类型，不再三界之中，不是一个有效数字 没得优点，但是有2个缺点： 1、NaN参与任何算术运算，结果仍为NaN 2、NaN参与任何比较运算，结果永远为false，带来了一个问题：我们没有办法使用普通的比较运算来判断x是不是NaN，连自己都不认识自己 解决：个人更爱反用：!isNaN(x); true->是一个有效数字 false->是一个NaN
记住：不同场景会有不同的数据类型的转换，学会了这一块，就算不console，我心里也知道最终结果是什么
学完隐式转换，我们没依然没解决一个事 "100px"*2=NaN "100px"+100="100px100"
2、显示/强制转换：隐式转换出来的结果不是我们想要的，我们就可以手动调用一些方法，强制转为我们需要的数据 1、转字符串：var str=x.toString();//x不能是undefined和null，undefined和null不能使用.去访问任何东西 页面上一切的数据默认都是字符串
2、转数字：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("10.5.5.5"))//10.5 console.log(parseFloat(".555"))//0.555
3、Number(any);//此方法事万能的，任何人都可以转为数字 //垃圾：完全等效于隐式转换，还不如x-0 *1 /1 %1
2、*****Function函数： 1、Function：函数，也称之为方法，需要【预定义】好的，以后就可以【反复使用】的【代码段】
其实一阶段你就见过很多函数了，比如 rotate(720deg); - 完成了一个顺时针旋转360度的功能 url(1.jpg); - 完成了一个根据图片路径显示图像的功能
js中要学习自定义函数：完成了一个。。。。。。。。的功能
2、如何使用：2步 1、创建/定义/封装函数： function 函数名(){ 若干操作/代码段; }
2、调用/使用函数 函数名();
注意：1、程序员在js里写死，调用几次，就会执行几次 2、交给用户来触发，只需要在某个元素上绑定点击事件： 内容
3、何时使用： 1、不希望打开页面立刻执行，而在需要时调用，或者由用户来触发 2、希望能够反复执行，不需要刷新页面 3、以后任何一个独立的功能体，都要单独封装在一个函数之中（你做的每一个作业） 4、函数在js中的地位最高：第一等公民地位，以后要有封装的思想，函数里面的变量会自动释放
4、带参数的函数： 榨汁机 -> 函数：榨汁 原材料 -> 参数 何时使用：如果我的函数体，希望根据传入的实参的不同，做的略微不同 创建：形参：形式参数，其实就是一个变量名，但是不需要写var，而且默认保存的也是undefined function 函数名(形参,...){ 若干操作/代码段; }
调用：实参：实际参数，真正的值，需要在你调用函数时从外部传入进去 函数名(实参,...)
特殊：1、传参的顺序一定要一一对应上，并且数量也要对应 2、不是一定要带参数的函数，才是好函数，具体要不要带参数，要看我们的需求 如果你的函数体事固定的 - 则普通函数就够了 如果你的函数体是根据参数的不同，做的略微不同 - 则带参数的函数完成
3、***分支结构： 1、程序的流程控制语句：3种 1、顺序执行 - 默认，从上向下依次执行 2、分支结构 - 通过判断条件，选择部分代码执行 3、循环结构 - 通过判断条件，选择要不要重复执行某块代码
2、比较运算符：> < >= <= == != 用于做判断的 结果：一定是一个布尔值 强调：1、=，不是比较，而叫做赋值，把等号右边的东西保存到等号左边 2、如果你想要判断多个条件，绝对不能像小时候数学的写法：18<=age<=65，语法错误，解决：逻辑运算符
3、逻辑运算符： &&：与、并且，要求全部条件都满足，结果才为true 只要有一个条件不满足，结果则为false
||：或者，要求全部条件都不满足，结果才为false 只要有一个条件满足，结果则为true
!:颠倒布尔值 ****循环： 问题：在控制台打印输出1000句hello world? console.log("1hello world"); ... console.log("1000hello world");
生活中的循环？ 1、吃饭 2、上课 3、上班 4、自转 5、公转 7、活着
循环结构：反复执行 【相同 或 相似】 的操作 循环三要素： 1、循环条件：开始 到 结束，循环得次数 2、循环变量：记录我们当前在哪一次，而且他一定会不断的变化 3、循环体：做的操作是什么
1、while循环： 语法： var 循环变量=几; while(循环条件){ 循环体; 循环变量变化起来 } 执行原理：首先创建了循环变量，判断循环条件，如果条件满足，则执行一次循环体，并不会结束循环，会回过头，继续判断循环条件，满足的话，则再做一次 ...... 直到循环条件不满足false时，才会退出循环 宏观上看循环感觉一瞬间就结束了，但是微观上看其实是一次一次执行的
特殊： 1、有的时候真有可能需要使用死循环：永远不会停下来的循环 何时使用：不确定循环次数的时候 while(true){ 循环体 }
2、退出循环语句：break - 只能用在循环中，多半都是搭配死循环使用的
2、*for循环：和while原理是一样的，但是他比while看上去更加的整洁，简单，舒服 语法： for(var 循环变量=几;循环条件;循环变量变化起来){ 循环体; }
死循环： for(;;){ 循环体 } 面试题：for 和 while的区别？ 几乎没区别： 一般来说我们不确定循环次数的时候，会使用while循环 - 死循环 一般来说我们确定循环次数的时候，会使用for循环 - 大部分情况
2、*****数组的基础： 问题：保存1000个同学的姓名? var name1="杨都1"; ... var name1000="杨都1000";
不推荐，变量其实就是我们所谓的内存，你的变量创建的越多，那么我们开辟的内存空间就越大，消耗也就越大，网站的性能就会越差
解决：数组：创建一个变量可以保存【多个数据】 数组都是线性排列，除了第一个元素，每个元素都有唯一的前驱元素 除了最后一个元素，每个元素都有唯一的后继元素 ***每个元素都有一个自己的【唯一的】位置，称之为下标，下标从0开始的，到最大长度-1结束
1、创建数组：2种 1、*直接量方式：var arr=[];//空数组 var arr=[数据,....];
2、构造函数方式：var arr=new Array();//空数组 var arr=new Array(数据,....);
2、获取数组中的数据： 数组名[i];
3、后续添加/替换元素 数组名[i]=数据; 具体就看i位置有没有数据
4、数组具有三大不限制： 1、不限制元素的个数 2、不限制元素的类型 3、不限制下标越界 - 不是个好东西 如果获取元素时下标越界，得到undefined 如果添加元素时下标越界，得到一个稀疏数组
5、数组有一个唯一的属性：length - 长度 语法：数组名.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：文档对象模型，专门用于操作html文档的，提供了一些方法
2、DOM树概念：DOM将我们的HTML看作了是一个倒挂的树状结构，但是树根不是html标签，而是document对象 document对象：不需要程序员创建，由浏览器的js解释器自动创建，一个页面只有一个document对象 作用：只要是对象就提供了属性和方法，等待我们学习，【找到】想要的任何DOM元素/对象/节点，甚至进行【操作】 DOM会将页面上的每个元素、属性、文本、注释都当作一个DOM元素/对象/节点
3、查找元素： 1、通过 ID 查找元素： var elem=document.getElementById("id值"); 特殊： 1、如果页面有多个重复的id，只会返回第一个 2、没找到，返回null 3、其实id根本不用查找，直接可用 4、你们不准用，id留给后端使用
2、*通过 标签名 查找元素： var elems=document/parent.getElementsByTagName("标签名"); 特殊： 1、返回值，返回了一个类数组对象，没找到，返回空类数组 2、js不能直接操作DOM集合，解决：要么使用下标得到某一个元素，要么使用遍历得到每一个元素 3、parent->代表的是你已经找到的某个父元素
3、*通过 class名 查找元素 var elems=document/parent.getElementsByClassName("标签名"); 特殊： 1、返回值，返回了一个类数组对象，没找到，返回空类数组 2、js不能直接操作DOM集合，解决：要么使用下标得到某一个元素，要么使用遍历得到每一个元素 3、parent->代表的是你已经找到的某个父元素
4、*通过关系找元素：前提：必须先找到一个元素才可以用调用关系 父元素：elem.parentNode; 子元素：elem.children; - 集合 第一个子元素：elem.firstElementChild; 最后一个子元素：elem.lastElementChild; 前一个兄弟：elem.previousElementSibling; 后一个兄弟：elem.nextElementSibling;
4、操作元素：前提：找到元素才可以操作 1、内容： 1、*innerHTML - 获取和设置开始标签到结束标签之间的内容，支持识别标签 获取：elem.innerHTML; 设置：elem.innerHTML="新内容";
2、innerText - 获取和设置开始标签到结束标签之间的文本，不支持识别标签 获取：elem.innerText; 设置：elem.innerText="新内容";
3、*value - 专门为input准备的 获取：input.value; 设置：input.value="新内容";
2、*属性： 获取属性值：elem.getAttribute("属性名"); 设置属性值：elem.setAttribute("属性名","属性值");
简化版： 获取属性值：elem.属性名 设置属性值：elem.属性名="属性值"; 特殊：1、class需要写为className 2、自定义属性操作不了
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->当前触发事件的元素 }
一切的获取，都是为了做判断，一切的设置，都是在修改|添加
