1.js的组成
核心（ECMAScript)、DOM、BOM
2.js的引入及写法
1.在head里插入script标签，引入外部js代码
2.在body标签最末尾引入script标签，直接在html内部书写js代码
在html标签后引入script，浏览器会自动修正,将script标签引入回body标签里（一般不这么引用，当页面需要植入内容时使用，但是会增加浏览器消耗）
几点注意：
变量污染：载入的js文件里变量或函数相同时，会覆盖
src地址里./代表当前文件夹，../代表上一级目录，引用外部js不要使用绝对路径，可以使用网址
head标签里的script有async defer(后面学习)
body里的js会污染head里引入的js，但是可以调用head里js的函数
3.标签里的javascript
<button onclick="console.log('aaaaa');" id='bn'>按钮</button>
<!-- 标签中行内JavaScript执行 -->
<button onclick="clickHandler()">按钮</button>
<a href="javascript:console.log('aaaaa')">超链接</a>
<!-- 不跳转 -->
<a href="javascript:void(0)">超链接</a> /*src没有这种用法*/
<script>
function clickHandler(){
console.log("aaaaa");
}
</script>
3.js注释和调试
注释可以让不用的代码不执行
注释可以用来解释代码的作用
1. ctrl+/ 行注释，注释一行的代码
2.shift+alt+a 块状注释
块状注释可以用来注释一行中的部分内容
块状注释可以用来注释掉一个函数和大量代码块
块状注释对于函数的注释说明在函数部分讲解
3.ctrl+shift+i控制面板里可以调试代码：
elements可查看html和css并修改，有断点，事件侦听，属性继承链（Properties，可查看一个标签有哪些属性）
console控制台
sources代码源，帮助排错，可设置断点
network是本地应用缓存
performance相当于录屏，网页崩溃时（内存泄漏）看看有哪些操作导致了
memory当前快照，当前页面系统内存占有
二、常用方法属性和变量
对象有两种模式，一种是属性，属性使用=赋值，一种是方法，方法需要()执行
1.方法
alert("你好");//将字符串以弹窗弹出，并且暂停到当前行
alert(message?:any):void
提示 message 参数名称 ?可以不写值 :any 这个参数的类型可以是任意的， :void 不返回任何值
var a=confirm("是否继续？");//弹出确定取消框
var s=prompt("你今年多大了?","20");//弹出输入框
document.write("10","20","30");*//文档中写入字符
document.write("<a href='#'>超链接</a>")
2.属性
document.body.innerHTML="你好"; document.body.innerHTML="<div></div>";
注意：document.write和innerHTML的区别
write仅属于document的方法，可以给整个文档中增加内容
innerHTML是所有body内（含body）标签的属性，可以给这些标签内局部增加内容和标签
3.变量
1.变量的赋值
a=b=3; //连等，先赋值给=号最左边的元素，再逐级向右 // =号左侧是变量名称，=号右侧是值 // 不需要定义，随手写，不需要类型（弱类型） // =号赋值也是有返回值 console.log(a=3);//结果为3 a=b=3; 相当于 a=(b=3); //代码遵从从左至右的执行方式 b=1; console.log(a=b++); //结果为1
2.变量的命名规则
1、变量必须驼峰式命名法
2、临时变量必须使用_起头，后面接驼峰式命名,
有时候也会在函数的参数中使用临时变量命名
var _a=3;
3、变量不可以使用关键词和保留字
var if=3; var public=10;//保留字 var static=20;
4、全局的变量名不能与window下的属性和方法同名
var alert=10;
console.log(alert);
alert("aaaa");
var status=10;
console.log(status);//返回字符型10，而非数字型
console.log(var a=3);//一旦使用var是不可以返回的
console.log(a=3); 没有使用var会被赋值的结果返回3
3.常量
const 常量是一旦定义值就不能改变值了 常量定义是名称必须全部大写，并且使用_区分单词 使用常量目的是不会被别人修改或者变量污染改变
const EVENT_ID="changes";
三、数据类型
1.字符型string
所有使用 '' "" ``都是字符型 string
var a="a"; var b='1'; var c=`true`; var d='你好这个非常"不错"'; console.log(a,b,c,d); console.log(typeof a); console.log(typeof(a));
2.数值型number
var a=3; var b=3.1; var c=-5; var d=-5.6; var e=0xFF;//16进制 var f=065;//8进制 var g=3.1e+5;//科学计数法 3.1*10(5)5次幂 var h=3.5e-5;//科学计数法 3.5*10(-5) -5次幂 console.log(typeof g,g); 定义的不一定和打印的结果完全相同，全部都会转换为10进制
3.布尔型boolean
<style>
div{
100px;
height: 100px;
}
</style>
<div id="div0"></div>
<script>
var div0=document.getElementById("div0");
var bool=true;//这就是布尔值;
div0.onclick=function(){
bool=!bool;//将bool取反，因为这个bool值的值域只有true和false
div0.style.backgroundColor=bool ? "red" : blue";
}
</script>
4.未定义undefined
var a;//仅定义变量未设置值 var b=undefined; //定义变量并且设置值为undefined; 值是相同的但是形态不同 console.log(a===b);//true var arr=[1,2,,undefined,3]; var a; // 用于全局定义，然后根据需要时赋值，初始是没有值的 var b=undefined //用于初始值必须是undefined，或者将原有有值的变量修改为undefined var x=10; x=undefined;
5.空值null
var a=null;
console.log(typeof a); //object对象类型
console.log(a===undefined);//false
//空值是将所有引用地址标记清空，用于清理内存 垃圾回收
var obj={a:1};
obj=null;
//字符类型，数值类型，布尔类型，未定义型都不需要null清除
6.对象类型object
var obj={};//空对象
obj=null;//将obj引用地址清空
var d="names";
obj={
// key:value关键词和值，对象不能出现重复的key，key不需要加""
a:1,
b:"ab",
"c":true, //变量作为key必须在外层增加[]
[d]:"xietian"
}
console.log(obj.a);//1
console.log(obj.b);//ab
console.log(obj.names);//xietian
console.log(obj[d]);//xietian
console.log(obj["a"]);//1
// 获取对象中key的值时有两种方法
// 一种是点语法，点语法使用范畴仅限于key属性固定，并且明确
// 另一种是[]语法，如果是固定的key，就使用字符串方式来设定，
// 如果不固定，直接[变量]就可以
四、数据类型转换
1.数值转字符串
String(a)、a.toString(16)、a.toFixed(2)、a.toExponential()、a.toPrecision()
var a=15.452;
var b=String(a);//类型强制转换
a=String(a);将a转换为字符串覆盖原有变量a
a=a+"";//利用隐式转换方式，没有强制转换，根据运算特征自动转换为字符串，隐式转换
// 隐式转换所使用的的转换方法是自动执行String(a);
// toString()实际上是Object对象的方法，因此，万物皆对象，任何类型都可以调用这个方法
a=a.toString(16);//参数必须是2-36之间，否则报错,转换为指定的进制数
console.log(a);
var color=0x0000FFFF;
var div0=document.getElementById('div0');
div0.style.color="#"+(color<<8).toString(16);
//toFixed(小数点位数) 转换为字符串，并且保留小数点位数，自动四舍五入
a=a.toFixed(2);
console.log(a);
a.toExponential();
a.toPrecision();
2.数值转换为布尔值
Boolean(a)
除了0以外所有的数值转换为布尔值都是true 0转换为布尔值是false var a=0; a=Boolean(a); console.log(a);
3.数值转换为对象
Object(a)
var a=0; a=Object(a);//数值型对象，存储在堆中 console.log(typeof a);
4.字符串转换为数值
Number(a)、parseInt(a,16)、parseFloat(a)
var a="a";
var a="3.2"
a=Number(a);//强制转换为数值类型
a=parseInt(a);//转换为整数
a=parseFloat(a);//转换为浮点数
var a="101";
a=parseInt(a,2);//将字符串转换为2进制
var color="FF0000";
color=parseInt(color,16);
console.log(color);
a=parseFloat();//不能转换进制
var b="32 1";
var b="32 "
b=Number(b);
b=parseInt(b);
b=parseFloat(b);
console.log(b);
//NaN 数值类型中的非数值
// 隐式转换遵从Number()转换方法
5.字符串转换为布尔值
Boolean(a)
// 仅空字符串转换为布尔值时，是false，除此之外全部是true var str=""; str=Boolean(str); console.log(str);
6.字符串转换为对象
Object(a)
var str="aaa"; str=Object(str); //转换为字符串对象 console.log(str); var str=" a a "; str=str.trim();//清除字符串前后空格 console.log(str);
7.布尔转换为数值
Number(a)
//true转换为1，false转换为0 var b=true; b=Number(b); console.log(b);
8.布尔转换为字符
转换后就是字符串true和false
9.布尔转换为对象
转换后就是布尔值对象
10.任何类型转换为布尔值
var a="";
var b=0;
var c=NaN;
var d=false;
var e=null;
var f=undefined;
//以上6种转换布尔值是false，其他都是true
var a="32a";
if(Number(a)){
}
//undefined null转换为字符串和数值
var a;
var b=null;
a=String(a);
b=String(b);
console.log(b);
a=Number(a);//转换为数值是NaN
b=Number(b);//转换为数值是0
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;
var a=b=3;//尽量不要使用连等赋值
五、算术运算符
+ - * / %(取模运算符)
var a=3;
var b=5;
var s=a+b;
var s=a-b;
var s=a*b;
var s=a/b;
var s=b%a;
// 运算浮点数运算是会有误差
console.log(0.1+0.2); //0.300000004 用slice不能用toFixed
var bn0=document.getElementById("bn0");
var sum=1;
bn0.onclick=function(){
sum=sum+1;//先计算=号右边，完成后的结果赋值给等候左边
if(sum%2){
bn0.innerHTML="开";
}else{
bn0.innerHTML="关";
}
}
// 如果在算术运算符中前后出现字符串，并且使用+
// 必须使用字符串首尾相连的方式将内容连接
String() Number() Boolean() Object();
var a=3;//因为a不是字符串，所以就会隐式转换为字符串
var a="bbb";
var a=true;
var a;
var a=null;
var b="a";
console.log(a+b);
// 如果运算过程中没有使用字符串，使用+符号，
// 其他类型都会转换为数值，并且相加
var a=3;
var b=true;
var b;
var b=null;
var a;
var b=null;
var a=true;
var b=null;
console.log(a+b);//1
// 所有类型遇到 - * / %都会隐式转换为数值，然后运算的
var a="5";
var b=2;
console.log(a*b);//10
六、一元运算符和赋值运算符
var a=3;
var b=4;
var s=0;
console.log(s=a+b);//7
var a=3;
a+=7;//a=a+7; 7就是步长 step
console.log(a+=7);//17
var a=3;
a+="";
console.log(a);//字符串类型的3
//利用隐式转换完成字符串转换
var a=3;
a-=2;
console.log(a);//1
var a=3;
a*=2;//6
a/=2;//3
a%=2;//1
a+=a+1;//3
// 赋值运算符的优先级最低
var b=a+3+(a+=4)
console.log(b);//13
var a=3;
a<<=2;
console.log(a);//12
var a=1;
for(var i=0;i<5;i++){
a<<=1;
console.log(a);//2 4 8 16 32
}
var a=5;
a>>=1;
console.log(a);//2
// 一元运算符
var a=3;
a++;//3下一次运算才为4
a=a+1;//4
a+=1;//4
var a=3;
var b= (a=a+1) *3;//12
var b=(a++)*3;//先把a返回 9
var b=(++a)*3;//把a运算的结果返回 12
var s=1;
var d=s=s+1;
console.log(d);//2
a++;++a; 对于a来说，这两个公式运算结果都是相同
var a=1;
a++;
++a;
console.log(a);//2;
// 如果将a++或者++a作为返回值参与运算或者赋值时
// ++a 是+1以后的结果先参与运算或者赋值
// a++ 是将a先参与运算或者赋值
var a="3";
var b=a++;
// 对于++ 和 -- 通常都会直接使用算术运算来处理，
// 也就是说我们会将内容先隐式转换为数值，然后再运算
console.log(b);//数值型3
var a=3;
var b=a++ + a++ +a + a++ + a + a;//29
//3+8+16
var b=a+++(a+=a)+a++*2;
console.log(b,a);//27,9
七、关系运算符
// 关系运算是返回布尔值的一种运算表达式
var a=3;
var b=4;
var c=10;
console.log(a<b);
console.log(c+(a<b));//11
c+=a<b;
console.log(c);//11
var c=a>b ? 0 : 1; //1
var c=Number(a>b); //0
// 运算符 < > <= >=
// == 判断值是否相等 === 判断值和类型是否相等
//以后所有代码必须使用===
var a=3;
var b="3";
console.log(a==b);//自动隐式转换
// 优先隐式转换为数值，并且比较
console.log(""==false);//true
console.log(0=="");//true
console.log(0==false);/true
console.log(undefined==null);//因为两者都不是数据true
console.log(NaN==NaN);//false
var a="3a"; //isNaN 将这个字符串转换为数值后判断是否是NaN非数值
if(isNaN(a)){
console.log(123);//123
}
var a=0;
if(a==false){
console.log("aa");
// a-> 0 false ""
}
if(a===false){
console.log("aa");
// a-->false
}
if(!a){
console.log("aa");
// a-->0 null undefined false "" NaN
}
if(a==null){
// a-->undefined null
}
if(a===undefined){
//a-->undefined
}
// != !==
八、逻辑运算符
// && || !
var a=3;
var b=4;
console.log(a>0 && b<5);//true
// true && true = (第二个值)
// true && false = （第二个值）
// false && true = （第一个值）
// false && false = （第一个值）
console.log(3 && 0);//0
console.log(3 && 4);//4
console.log(0 && 4);//0
console.log(0 && "");//0
var a=1;
a=a-- && a++;
console.log(a);//0
// true || true = (第一个值)
// true || false = （第一个值）
// false || true = （第二个值）
// false || false = （第二个值）
var obj={a:2};
// 如果obj转换为布尔值是true，直接熔断
// 如果是false，取第二个值
obj=obj || {a:1};
console.log(obj);
class Box{
static _instance;
static getInstance(){
return Box._instance || (Box._instance=new Box());
}
}
var a=3;
var b=a===3 || 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){
console.log(123);//123
}