1、JS基础
html标签就是dom部分
浏览器用到的部件是bom部分
js脚本可以写在head部分
可写在body里面//内部脚本
对于html来说，从上往下同步解释文档，head中上面的代码无法调用到下面的标签或者script，在页面DOM元素加载完之前，js脚本就已经执行完了。
body里的js等页面元素加载完成了再执行。
JS的组成 核心ECMAScript 文档对象模型DOM 浏览器对象模型BOM
内部书写
在html文件中直接进行代码的书写，下面的代码可以调用上面的标签或者script，标签中行内javascript执行
外部JS
载入的外部js，可以在head和body部分
<script src="./a.js"></script>
禁止使用绝对路径
如果加载的JS中，变量或者函数相同时，就会覆盖，我们称之为变量污染
直接写在标签内
<p onclick="alert('你好');">点击我</p>
代码的注释
ctrl+/用来注释一行的代码
块状注释shift+alt+a
/**/
块状注释可以用来注释一行当中的部分内容，可以注释掉一个函数和大量的代码块
注释可以让不用的代码不执行
注释可以用来解释代码的作用
调试控制台
Elements的Computed是所有计算后样式
Properties指的是继承链
sources中加断点排错
performance用来录屏，如果页面崩溃，最大原因是内存，短时间内的内存管理 会产生快照可以发network现当前什么东西占用比较高
application:记录网站加载的所有钻信息，包括存储数据、缓存、字体、图片、脚本、样式表等。
常用方法
console.log()
alert()警告提示框
confirm()确认消息框
prompt() 提示消息框--就是专门用来给用户提供输入窗口的
2、常用变量和方法
关键字可用于表示控制语句的开始或结束，或者用于执行特定操作等。
按照规则，关键字也是语言保留的，不能用作标识符！
break do instanceof typeof
case else new var
catch finally return void
continue for switch while
function this with default
if throw delete in
try
保留字有可能在将来被用作关键字来使用，不能用作标识符！
abstract int short boolean
export interface static byte
extends long super char
final native class float
throws const goto private
double import public
注意事项
js语言每行结束时，必须使用连接数，必须是半角
JS代码中大小写必须严格按照规定
一般首字母都是小写，除了类。都是用驼峰命名规则：除了第一个以外，每个单词的首字母大写，其他的小写
alert()方法一般包括方法名（参数）
alert(message?:any):void提示：
message参数名称？可以不写值，any这个参数的类型可以是任意的，void表示不返回任何值。
alert("你好");//将字符串以弹窗形式弹出，并且暂停到当前行
弹出确认消息框 confirm（"是否继续"）返回值是boolean类型
document.write("10","20");表示在文档中写入字符
除此之外， document.write("<a href='#'>超链接</a>");
JS语法
js是点语法，表示某个对象的方法和属性
document.body.innerHTML="ihao"；对象的属性需要赋值
对象有两种模式，一种是属性，属性使用=赋值，一种是方法，方法需要用括号
<div id="div0">aaa</div>
var div0=document.getElementById("div0");
div0.style.color="red";
write仅属于document的方法，可以给整个文档加属性
如 var str="hello world";
document.write(str);
innerHTML是所有body内标签的属性，可以给这些标签
<div id="div0">aaa</div>
var div0=document.getElementById("div0");
div0.onclick=function(){
div0.innerHTML="点击了";
}
ES5和ES6
为了让所有浏览器都可以用js，定义了一个标准ECMAScript，各大浏览器按照该标准渲染页面
ES5 IE8时代支持的JS标准
2015 正式使用ES6 又称为ES2015
ES5之前 a=b=3;属于连等，先赋值给=最左边的元素，再逐级向右
a=b=3;
console.log(a); 不需要定义，随手写，所以属于弱类型
=号复制也是可以有返回值的，代码遵循从左到右的原则
b=1;
console.log(a=b++); 结果a=1;
ES5 不允许直接使用变量的赋值
如果不适用var声明的话，这个变量就一定是window的属性
在函数以外的地方使用var声明也是设置了windows的属性
变量命名规则
1.变量必须驼峰式命名法
2.临时变量必须使用_起头，后面接驼峰式命名，有时候也会在函数的参数中使用到临时变量命名。
3.变量的命名不可以使用关键词和保留字
全局变量名不能与window下的属性和方法同名
console.log(var a=3);一旦使用var是不可以返回值的 字符串是黑色 数字是蓝色
ES6
const常量 变量定义后可以变化值，常亮定义后就不可以变换值了
常
量定义时命名必须全部大写，并且使用_区分单词，目的是不会被别人修改或者变量污染
如const EVENT_ID="changese";
console.log(EVENT_ID);
3.数据类型和数据类型转换
数据类型的分类 字符类型，数值类型，布尔类型，未定义型，空值，对象型
字符型
所有使用'' "" ''都是字符型
var a='a';
var b='b';
var c='true';
console.log(a,b,c);
数值型
小数叫浮点数
var a=3;
var b=3.1;
var c=-5;
var e=0xff; 十六进制
var f=065; 八进制
var g=3.1e+5;科学计数法 相当于3.1*10的5次幂
查看类型
console,log(typeof(g)); number类型
定义的不一定和打印的结果完全相同，全部会转换为10进制
布尔类型
true,false 对和错，是和否，还可以是任何事情的两面
var
var bool=true;
开关案例
background-color: aqua;
width:50px;
height:50px;
}
var bool=true;
var div0=document.getElementById('div0');
div0.onclick = function () {
bool=!bool;
div0.style.backgroundColor=bool ? "red":"blue";
}
未定义值undefined
var a;定义了变量没有设置值
var b=undefined;定义了变量并且设置为underfined;
console.log(a===b);从值来说是相同的，形态不同，实际上一个赋值了underfined，一个没有赋值。
如果以后用到数组，就没有办法分辨
比如 var arr=[1,2,,undefined,3]
console.log(arr);
var a;用于全局定义，然后根据需要时赋值，初始是没有值的
var b=undefined用于初始值必须是underfined，或者将原有值的变量修改为undefined;
var x=10;
x=undefined;
console.log(typeof(x));//undefined类型
空值null
null空值 打印的时候是object类型
var a=null;
console.log(typeof a);
空值是将所有引用地址标记清空，用于清理内存 垃圾回收机制
对象清空引用地址 var obj={a:1};
obj=null;
console.log(typeof(obj));
字符类型，数值类型，布尔类型，未定义型都不需要null清除
对象类型
var obj={};空对象
obj=null;设置为空这样连盒子都不存在了
var d="names";
obj={
a:1,
b:'ab',
c:true,
[d]:"xietian"
console.log(obj.a);
console.log(obj.b);
console.log(obj.c);
console.log(obj[d]);
console.log(obj["a"]);
key:value关键词和值
关键词是指不可重复唯一匹配 对象中不能出现重复的属性
key不需要加""
变量作为key必须在外层添加[]
//获取对象的key的值时， 有两种方法
//一种是点语法，点语法使用范畴仅限于key属性固定，并且明确
//另一种是[]语法，如果是固定的key就使用字符串方式来设定，如果不固定，直接使用[变量]
数据类型转换
数据类型分为强制转换和隐式转换两种
1、数值转换为字符串
var a=15.546;
强制类型转换 var b=String(a);
console.log(b);属于字符串类型
a=String(a);将a转换为字符串并且覆盖原有变量
String无法进行进制转换
a=a+"";//利用隐式转换方式，并没有强制转换，根据运算的特征，自动转换为字符串
隐式转换所使用的转换方式是自动执行String(a);
toString()实际上是Object对象的方法，因此，万物皆对象，任何类型都可以调用这个方法。
var a=15.546;
a.tostring(radix?: number)可以没有值，可以选数字类型
a=a.toString(16);转成16进制的 //参数必须是2-36之间否则报错，转换为指定的进制数
console.log(a);
toFixed表示给该数增加浮点位，保留小数点后两位
var a=15.546;
a=a.toFixed(2);
console.log(a); 15.55 toFixed(小数点位数)转换为字符串，并且保留小数点位数
a.toExponential();
a.toPrecision();
数值转换为布尔值
除了0以外所有的数值转换为布尔值都是true
0转换为布尔值是false
var a=0;
a=Boolean(a);
console.log(a);
数值转换为对象
var a=0;
a=Object(a);
console.log(a.toFixed(2));
console.log(typeof a);
字符串转换为数值
var a="a";
var a="101";
var b="3.2";
a=Number(a); 强制转换为数值型 number不能进行进制转换
b=parseInt(b); parseInt可以进行进制转换
console.log(a);
console.log(b);
将字符串转换为2进制
var a="101";
a=parseInt(a,2);
console.log(a);
var color="FF0000";
color=parseInt(color,16);
console.log(color);
a=parseFloat();不能转换进制
var b="32 1";
var b="32 "; 32
b=Number(b);
console.log(b); NaN
字符串转换为布尔值
仅空字符串转换为为布尔值的时候，是false，除此之外全是true;
空格不是空字符串
var str="";值是false
var str=" ";
str=Boolean(str);
console.log(str);true
字符串转换为对象
var str="aaa";
str=Object(str);
console.log(str);
清除字符串前后空格
var str=" a a a";
str=str.trim();//清除字符串前后空格
console.log(str);
布尔转换为数值
true转换为1. false转换为0
var b=true;
b=Number(b);
console.log(b); b=1;
布尔转换为字符
转换后就是字符串true和false
布尔转换为对象
转换后就是布尔值对象
任何类型转换为布尔值
var a="";
var b=0;
var c=NaN;
var d=flase;
var e=null;
var f=undefined;
以上六种转换布尔值是false，其他的都是true
var a;
隐式转换if(a){
}
var a="32a";
if(Number(a)){
}
var a="32a";
var b=(Number(a));
console.log(b);NaN
underfined null转换为数值型
//var a;
var b=null;
a=String(a);
b=String(b);
console.log(a);undefined字符型
console.log(b);null字符型
var a;
var b=null;
a=Number(a);//转换为数值是NaN
b=Number(b);//转换为数值是0
console.log(a);
console.log(b);
var a;
var b=null;
a=parseInt(a);//NaN
b=parseInt(b);//NaN
console.log(a,b);
var a,b,c;
var a1=3,
b1=4,
c1="a",
d1=true;
5.算数运算符
+ - * / %
var a=3;
var b=5'
var s=a+b;浮点运算会有误差
console.log((0.1+0.2)); 0.3000000004
如果在算术运算符中 前后出现字符串并且使用+ 必须使用字符串首尾相连的方式将内容链接
String（） Number（） boolean() object()都是隐式转换字符串
和字符串并且是+ 都会转换为字符串
var a=3; a+b 3a
var a="bbb";//因为a不是字符串，所以会隐式转换为字符串 a+b bbba
var b="a";
var a=true; truea
var a=null; nulla
console.log(a+b);
如果运算过程中没有使用字符串，使用+符号，其他类型都会转换为数值，并且想加
var a=3;
var b=true; 3+true=4
var b; 3+undefined= NaN
var b=null; 3+null=3
var a;
var b=null; undefined+null=NaN
var a;
console.log(a+b);
var a="bbb"; var b=null; console.log(a-b); NaN
console.log(a+b);
所有类型遇到- * / %都会隐式转换为数值，然后运算的，包括字符串
var a="5";
var a='3';
var b="6";
console.log(a*b); 10
var a="wo";
var b="6";
console.log(a*b); NaN
六种数据类型转Number规则：
1、Number转Number，本来多少就是多少；
2、String转Number：数字字符串转成对应数字，空字符串转为0，其他均为NaN；
3、Boolean转Number：true为1，false为0；
4、null为0，undefined为NaN；
5、Object（包括对象、函数、数组、正则等）转Number调用其valueof（）方法，如果为NaN，调用toString（）方法，如果还是NaN，则结果为NaN。
null与undefined在与其他数相等运算时不进行类型转换，
null与undefine单独与别的值比较都为false,但undefined为null的衍生对象，所以两个比较为true
6.一元运算符和赋值运算符
var a=3;
var b=4;
var s=0;
console.log(s=a+b);7
a+=7 a=a+7 7就是步长step;
var a=3;
a+="";
console.log(a);
//利用隐式转换完成字符串转换
赋值运算符的优先级最低
var a=3;
a-=2;
console.log(a); 1;
var a=3;
a*=2; 6
a+=a+1;6+ 6+1
console.log(a); 13
var a=3;
var b=a+3+(a+=4) ;
console.log(a); 7
console.log(b);13
var s=1;
var d= s=s+1；先将s+1的结果给了d然后 s赋值了 d=2
var a=3;
var b=(a++)*3; 9
var b=(++a)*3; 12
console.log(b
如果将a++或者++a作为返回值参与运算或者赋值时
++a是+1以后的 结果先参与运算或者赋值
a++是将a先参与运算或者赋值
对于++和==我们 通常都会直接使用算数运算来处理，就是说我们将内容先隐式转换为数值，然后再运算
var a=3; 3+4+5+5+6+6
b=a++ +a+ ++a+a+ ++a+a;
console.log(b,a);29 6
++ --比乘除取模运算优先级高
var a=3;
var b=a+++(a+=a)+a++; 3+8+8
console.log(b,a); 19 9
var a=3;
var b=a+++(a+=a)+a++*2; 3+8+8*2
console.log(b,a); 27 9
关系运算符
关系运算是返回布尔值的一种运算表达式
var a=3;
var b=4;
var c=a>b? 0 :1;
console.log(c); 1
var c=Number(a>b); a>b返回false
console.log(c); 0
运算符 < > <= >=
==判断是否相等 ===全等 判断值和类型是否相等
以后所有代码必须使用===
console.log(Number(""),Number(false)); 0 0
console.log(""==false); true
console.log(0==""); true
console.log(0==false);true
console.log(undefined==null); 都是NaN，因为两者都不是数据 所以都是对应的NaN，独立相等；
console.log(NaN==NaN);false NaN和任何都不相等
var a="3a";
isNaN将这个字符串转换为书之后判断是否为NaN；
if(isNaN(a)){
alert("nihao")
} 3a不是一个数 所以isNaN(a)t
var a=0;
if(a==false){
console.log("aa");
a-> 0 false ""
}
var a=0;
if(a===false){
console.log("aa");
a-->false
if(!a){
console.log("aa");
//a--> 0 null underfined false ""NaN
}
if(a==null){
a-->underfined null
}
if(a==underfined){
a-->underfined
}
var a=null;
if(a==undefined){
a-->null undefined
}
8.逻辑运算符
&& || ！
var a=3;
var b=4;
console.log(a>0&&b<5); true
true && true=(第二个值)
true && false=(第二个值)
false &&true=(第一个值)
false &&false=（第一个值）
var a=1
a=a-- && a++; 第一个1 第二个0 取第二个值
console.log(a); 0
true || true=(第一个值)
true || false=(第一个值)
false ||true=(第二个值)
false || false=（第二个值）
var obj={a:2};
obj=obj||{a:1};
console.log(obj);
var a=3;
var b=a===3||0; true和0
console.log(b); true
取反例
如 开关
var bool=false;
var bn=document.getElementById("bn");
bn.onclick=function(){
bool=!bool;
bn.innerHTML=bool?"开":"关";
}
var a;
if(!a){
}
