JavaScript概述:
编译型:运行程序之前，需要检查语法是否正确，如果不正确的话直接不运行，更加严格。比如:Java、C、C++. .. 解释型:运行程序之前，不需要检查语法是否正确，直接运行代码碰到错误就会停止，更加自由比如:JavaScript、php、js......
js特点
1、代码可用任何文本编辑器编写: vscode、hbuilder、记事本...
2、解释型语言:无需编译 3、弱类型语言:不需要规定，你想放什么就放什么，比如: javascript 自由
变量的数据类型是由值决定的
强类型语言:先要规定你的变量要保存什么数据类型，才能往里面放什么东西，比如：JAVA
变量的数据是由数据类型来决定的
js作用：
1、客户端的数据计算:购物车 2、表单的数据验证:(手机号、身份证、邮箱、密码、用户名...)
3，提供了事件(点击、鼠标移入移除、键盘。。)
4、网页中一切css实现不了的特效,都由js完成
5、和服务器端进行交互ajax
JavaScript的使用：
1、在HTML页面上写一个标签：-临时测试/上课用
2、创建xx.js文件，在里面书写js代码，最后在HTML页面引入
输出方式
console.log(); document.write(); - 支持标签，但是如果绑定事件后点击触发的话会替换掉整个HTML alert(); - 会卡主页面
变量和常量 变量：var 变量名=值; 常量：const 常量名=值; - 一旦创建后不允许修
算术运算符：+ - * / %
1、判断奇偶性 num%2;//结果为0说明是一个偶数，结果为1说明是一个奇数 2、***自带隐式转换:悄悄地转换，数据类型会发生变化，我们程序员看不见
常理来说只有数字才能参与算术运算，但是其实字符串也可以，一定要切记下面的几句话
默认运算符左右两边都会悄悄转换为一个数字，再运算 特殊: 1、+运算，只要碰上一个字符串，
2、-*/%运算:有字符串也可以转为数字，但是必须是纯数字组成的字符串才可以，只有包含 NaN:Not a Number:不是一个数字，但是确实是数字类型–垃圾 NaN参与任何算术运算结果都为NaN NaN参与任何比较运算结果都为false 以后不希望见到undefined和NaN
数据类型：
1、原始/基本/值类型：String、Number、Boolean、Undefined、Null 2、引用/对象（属性和方法）类型：11种 - Array/Function
数据类型的转换
1、隐式转换 1、算术运算带有隐式转换：默认转为数字，在运算 特殊：1、+运算，如果碰到字符串，变成了拼接操作 2、-*/%，字符串可以转为数字，但是纯数字组成的，但凡包含一个非数字字符，则为NaN 3、true->1 false->0 undefined->NaN null->0 4、NaN：不是一个数字，但是是数字类型 全是缺点：1、参与任何算术运算，结果都为NaN 2、参与任何比较运算，结果都为false，甚至自己都不认识自己 解决：!isNaN(x) true->x是一个有效数字 false->x是一个NaN 2、显式转换：隐式转换出来的结果不是我们想要的，先强制转换一下，再去做操作 1、转字符串：var str=x.toString();//x不是undefined和null，因为undefined和null不能使用.页面上获取到的数据默认都是字符串类型 2、转数字： var num=parseInt/Float(str);//专门为字符串转数字准备的方法 原理：从左向右依次读取每个字符，碰到非数字字符则停止，Int不认识小数点，Float认识第一个小数点，如果一来就不认识，则为NaN Number(x);//x可以是万能的，相当于隐式转换，还不如 *1 /1 -0
函数：
方法：需要预定义的，可以反复使用的代码段 - 要么就是用户触发一次执行一次，要么就是程序员调用一次执行一次 1、创建：function 函数名(形参,...){ 函数体; } 2、调用： 1、程序员在JS里面调好：函数名(实参,...); 2、绑定在页面元素上：<any on事件名="函数名()"> - HTML（内容）和CSS（样式）和JS（行为）要分离 - 以后不要这么使用
分支结构：根据条件的不同，选择一条路执行
比较运算符：> < >= <= == != 逻辑运算符：&& || ! 结果都是一个布尔值，但是比较运算符是直接比较，逻辑运算符是综合比较 if(条件){操作} if(条件){操作}else{默认操作} if(条件){操作}else if(条件){操作}else{默认操作}
循环结构：根据条件满不满足，如果满足就会一直做操作，直到条件不满足才会停止
1、var i=0; while(i<10){ console.log(i); i++; } 2、for(var i=0;i<10;i++){ console.log(i); } 3、死循环： while(true){} for(;;){} 4、循环流程控制语句：退出循环：break;
数组：一个变量可以保存多个数据，以后也可以拿出来使用
1、创建： 直接量：var arr=[1,2,3,4]; 构造函数：var arr=new Array(1,2,3,4);
2、使用 访问：arr[i] 添加：arr[i]=新值;//i处已经有人了，则为替换
3、数组三大不限制： 1、不限制长度 2、不限制类型 3、不限制下标越界
4、数组的属性：arr.length - 得到长度 1、缩容：arr.length-=n; 2、向末尾添加元素：arr[arr.length]=新值; 3、获取倒数第n个元素：arr[arr.length-n];
5、遍历数组： for(var i=0;i<arr.length;i++){ arr[i];//当前次元素}
DOM：树根是document，不需要我们程序员创建，直接可用，一个页面只有一个document
1、查找元素 1、通过HTML的特点 ID：var elem=document.getElementById("id值"); - 单个元素，没找到为null 标签/class名：var elems=document/parent.getElementsByTag/ClassName("标签/class名"); - 集合，没找到为空集合
2、通过节点之间的关系： 父：elem.parentNode; 子：elem.children; - 集合，没找到为空集合 第一个元素儿子：elem.firstElementChild; 最后一个元素儿子：elem.lastElementChild; 前一个元素兄弟：elem.previousElementSibling; 后一个元素兄弟：elem.nextElementSibling; 单个元素可以直接做操作，但是集合不行： 1、要么加下标拿到某一个 2、要么遍历拿到每一个
2、操作元素： 1、内容：innerHTML/innerText/value（转为input准备的） 获取：elem.xxxx 设置：elem.xxxx="新内容" 2、属性： 获取：elem.getAttribute("属性名") 简化：elem.属性名 设置：elem.setAttribute("属性名","属性值") 简化：elem.属性名="属性值"
简化版有两个小缺陷：1、自定义属性不能操作 2、class必须写为className 建议：优先使用简化版，简化版做不到的操作在用复杂版代替 3、样式：JS就要操作【内联样式】 获取：elem.style.css属性名; 设置：elem.style.css属性名="css属性值"; 特殊：css属性名有横线的地方要去掉横线变为小驼峰命名法 获取的目的往往都是为了判断 设置的目的就是修改 3、绑定事件： 1、单个元素：elem.onclick=function(){ //关键字this的指向->这个元素 } 2、多个元素： for(var i=0;i<elems.length;i++){ elems[i].onclick=function(){ //关键字this的指定->当前元素：当前你触发事件的元素 } }
