一：javascript相关概念
1、javascript的概述
是运行在JS解释器的解释型、弱类型、面向对象的脚本语言
1、js解释器:不需要安装,浏览器自带;在node.js服务器端安装一个独立的js解释器
2、解释型：运行之前需要不需要检查语法是否正确，直接运行，碰到错误就停止运行，比如：javascript、php... (语法较宽松)
3、编译型：运行之前需要检查语法是否正确，如果不正确，直接不能运行，比如：java、c、c#... (语法较严格)
2、javascript的特点
1、代码可用任何编辑器编写
2、解释型 - 不需要检查对错，直接运行，碰到就停止
3、弱类型语言：是由数据决定了数据的类型是什么
3、javascript的使用
1、直接在html中写上一个script标签，再在里面编写代码
例：<script type="text/javascript">编写的代码</script>
2、在外部创建一个js文件，再在html中写上一个script标签，添加属性src引入
例：<script type="text/javascript" src="js文件路径">里面不能写代码</script>
3、js代码注释方法
a:单行注释 //
b:多行注释 /* 内容*/
4、输出方式
a:在控制台上输出(一定要用起来)
console.log(数字/"字符串"/变量);
b:在页面上输出
document.write(数字/"字符串"/变量);
缺点：如果绑定了一个按钮事件，会替换掉页面上所有的东西 c:在弹出框输出
alert();
缺点：会卡住页面，必须关闭弹出框才能看到页面上的内容
4、javascrip的组成
1:ECMAScript（ES3/5/6）
2:DOM - Document Object Model：文档对象模型 - 操作文档（HTML）
树根不是HTML，而是document对象（属性和方法）
3:BOM - Browser Object Model：浏览器对象模型 - 操作浏览器
二：变量与常量
1、变量，是可以被修改的
语法 var 变量名=值；
2、 常量，不能被修改
语法 const 常量名=值；
3、注意
特殊：a: 1、变量名不是随意的：1、不能以数字开头 2、不能使用关键字 3、尽量的见名知意
b:变量名有一个很特殊name - 不管你保存的数据是什么，最后都会变成一个字符串
c:其实你想要创建一个变量只需要：var 变量名;其实就已经创建好了 - 不赋值也没关系，至少创建了不会报错了。但是一般来说我们都要立马跟上赋值操作，因为默认值undefined是无用
d:如果创建了多个变量，可以省略掉中间var，分号都要换为逗号简写
e:其实var关键都可以不写，但是不推荐,会导致全局污染
三：数据类型
1：原始/基本/值类型（共5个）
1:Number 数字，取值有无数个
2:String 字符串，取值有无数个
3:Boolean 布尔值，取值true 或 false
4:Undefined 取值只有一个 undefined
5:Null 取值只有一个 null
2：引用对象类型（11个对象）（对象就有属性和方法）
3：数据类型的强制转换
1:算术运算具有隐式转化，默认转成数字类型
特殊：a: + 运算，如果碰到一个字符串，那么两边会转成字符串，然后做拼接操作
b： - * / % 运算，如果字符串是纯数字组成，字符串则会转成数字，但是只要有一个非数字字符，就会转为NaN
2:强制转换（页面上获取到的数据类型都是字符串，如果你就想转为数字）
a:转字符串：
xx.toString();
转为字符串，但是undefined和null不支持，undefined和null不能使用
b:转数字：
parseInt(str/num)(转为整数)
parseFloat(str);(转为小数)
c:转数字-万能，但是还没有隐式转化方便
Number(x);
四：运算符
1:算术运算符
+ - * / %（模/取余）
1：%（模/取余） 作用
判断奇偶性 取一个数的后n位 使结果永远不超过几
2：算术运算具有隐式转化，默认转成数字类型
2:逻辑运算符
1：&&：与（并且）
只有全部条件都为true，最后结果才为true
只要有一个条件为false，最后结果就为false
2：||：或
只有全部条件都为false，最后结果才为false
只要有一个条件为true，最后结果就为true
3：!：颠倒布尔值：
!true -> false
!false -> true
五、函数(也叫方法)
1：语法
1:创建函数/方法
function 函数名(){若干代码段}
b:调用函数/方法
函数名();//程序员写几次就调用几次
2：带有参数的函数
function 函数名(形参){
函数名(实参);
}
六、分支结构
1、一个条件一件事，满足就做，不满足就不做
if(判断条件){
操作
}
2、一个条件两件事，满足就做第一件，不满足就做第二件
if(判断条件){
操作1
}else{
默认操作
}
3、多个条件多件事，满足谁就做谁
if(条件1){
操作1
}else if(条件2){
操作2
}else if(条件3){
操作3
}else{
默认操作
}
七：循环结构
1：while循环：
1:语法：
var 循环变量=几;
while(循环条件){
循环体;
循环变量变化一下;
}
2:死循环
while(true){
循环体
}
循环退出语句：break; - 出现在循环之中
2：for循环
1:语法：
for(var 循环变量=几;循环条件;变量的变化){
循环体
}
2:死循环
for(;;){循环体} -----两个分号一个不能少
循环退出语句：break;
八：数组
1：概念
数组中每个元素都有一个唯一的位置序号，称之为【下标】，用来表示数组中的每一个元素，下标是从0开始，到最大长度-1
2、创建数组：
1:直接量方式：
var arr=[];//空数组
var arr=[数据,数据,...];
2:构造函数方式
var arr=new Array();//空数组
var arr=new Array(数据,数据,...);
3：访问数组：
a:获取数据
数组名[下标];
特殊：1、下标越界，获取到的是一个undefined
b:添加数据
数组名[下标]=新数据;
特殊：1、如果下标处已有元素，则为替换
2、如果下标越界，会导致你的数组变成一个稀疏数组，中间就会出现很多的undefined，而且下标也不再连续
4、数组对象的属性 ---数组的长度
a:语法：数组名.length - 获取到数组的长度
b:三个固定套路：
i:向末尾添加元素：arr[arr.length]=新值
ii:获取倒数第n个元素：arr[arr.length-n];
iii:删除末尾的n个元素：arr.length-=n
5、遍历数组：将数组中的每个元素都取出来 执行 相同 或 相似的操作
公式：for(var i=0;i<arr.length;i++){
arr[i];//当前次获取到的元素
}
九：获取元素：
1、通过 HTML 的属性去获取元素
1:通过ID：
语法：var elem=document.getElementById("id值");
返回：是一个DOM对象/DOM节点/DOM元素，才可以直接做操作
特殊：1、如果id重复了，只会返回第一个
2、如果没找到，返回的是一个null
2:通过标签名：
语法：var elems=document/parent.getElementsByTagName("标签名");
返回：是一个DOM集合 - 是一个类数组对象：类似数组，也可以使用下标、length、遍历
特殊:1、一个DOM集合是不允许直接做操作的，除非加下标得到某一个 或 遍历得到所有人，才能做操作
2、如果没找到，返回的是一个空集合
3、此方法不一定非要写document,也可以写一个parent（已经找到的某个父元素）
如果是写的document，则会找到页面上所有的标签
而写的是parent，只会找到parent下面的所有的标签
3:通过class名：
语法：var elems=document/parent.getElementsByClassName("class名");
返回：是一个DOM集合 - 是一个类数组对象：类似数组，也可以使用下标、length、遍历
特殊：与通过标签名找元素的一致
2、*通过 节点之间的关系 获取元素
前提：至少先要找到一个元素，才能找关系
1:父元素：xx.parentNode - 单个元素
2:子元素：xx.children - 集合
3:第一个儿子：xx.firstElementChild - 单个元素
4:最后一个儿子：xx.lastElementChild - 单个元素
5:前一个兄弟：xx.previousElementSibling - 单个元素
6:后一个兄弟：xx.nextElementSibling - 单个元素
十：操作元素：
<elem 属性名="属性值" style="样式">内容
1、内容：
1:innerHTML：用于操作双标签，能够识别标签
获取：elem.innerHTML;
设置/修改：elem.innerHTML="新内容";
2:innerText：用于操作双标签，不能识别标签
获取：elem.innerText;
设置/修改：elem.innerText="新内容";
3:value：用于操作input
获取：elem.value;
设置/修改：elem.value="新内容";
2、属性：
1:复杂版
获取属性值：elem.getAttribute("属性名");
设置属性值：elem.setAttribute("属性名","属性值");
2:简化版：
获取属性值：elem.属性名;
设置属性值：elem.属性名="属性值";
注意：class必须写为className；只能操作标准属性，不能操作自定义属性
3、样式：
获取样式：elem.style.css属性名;
设置样式：elem.style.css属性名="css属性值";
特殊：css属性名的写法，如果有横线要去掉横线，变为小驼峰命名法
一切的获取的作用：往往都是用于判断
一切的设置的作用：修改
4、绑定事件：
语法：elem.onclick=function(){
点击后要执行什么代码
this关键字：
单个元素绑定事件，this->这个元素
多个元素绑定事件，this->当前触发事件的元
}
十一：拓展
1、用户输入框：var user=prompt("提示文字","默认值");
2、查看数据类型：typeof(变量/值/表达式);
3、绑定事件
<elem onclick="js语法"></elem><br>
4、随机整数的公式：parseInt(Math.random()*(max-min+1)+min);
5、脱字符串衣服：eval(str);
举例：eval("3*3");//9
eval("[1,2,3,4]");//[1,2,3,4]
