超级完整的JS学习笔记整理2020版本

一、javaScript是什么?
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
二、javaScript能干什么
可以写一些效果，网页增加色彩
表单验证
…
三、javaScript历史

• 开篇
  大概在 1992 年，一家称作 Nombas 的公司开发了一种叫做 C 减减（C-minus-minus，简称 Cmm）的嵌入式脚本语言。
• 创始
  Netscape 发明了 JavaScript在1995年
• 三足鼎立
  微软进军,复制了一个javascript名称为：JScript
• 标准化
  1997 年的全新脚本语言。ECMAScript

一、script标签

类型(type)：text/javascript
路径(scr)：script.js
字符集(charset)：utf-8

<script type="text/javascript" src="script.js" charset="utf-8"></script>

Java书写格式：
方式一:

<script type="text/javascript">

js代码

方式二：

<script type="text/javascript" src="script.js"></script>
Script.js：
alert("易驰web前端")

二、alert 、document.write 、console.log

1》alert() ===》系统弹出框

alert("易驰web前端")

2》document.write() ===》文档输入内容
****文档的输出

<script>
    document.write("易驰js")
    document.write("<hr />")
    document.write("11111111111111111")
</script>

3》console.log() ===》控制台中的console显示内容

<script>
    console.log("今天来易驰学习js了")
</script>

效果在浏览器中查看：

语法构成

1》区分大小写
ECMAScript中的一切,变量,函数和操作符都是严格区分大小写
name和Name或者NAME
2》标识符
1.第一个字符必须是字母、下划线或者$
2.其他字符可以是数字、字母、下划线、$
n11、KaTeX parse error: Expected group after '_' at position 9: a、_a a_̲
3》注释符
1. 单行注释 : //
2. 多行注释 : /**/
二、关键字和保留字
1. ECMAScript关键字：关键字是保留的，不能用作变量名或函数名
2.ECMAScript保留字：保留字在某种意思上是为将来的关键字而保留的单词。因此保留字不能被用作变量名或函数名。

变量

ECMAScript的变量是松散类型的，所谓的松散类型就是用来保存任何类型的数据。
定义变量时要使用var操作符 ，后面跟一个变量名称（变量名就是标识符）。
如果是汉字必须要加上引号（单双都可以）
声明变量：
var name = “易驰”
声明多个变量
var name = “易驰”,
age = 18,
sex = “男”;

分号

每个语句的结尾都要加上;证明语句已经结束
一、js中的数据类型
1》5种简单的
字符串(String)
加引号，引起来的都是字符串(单双引号都可以)
数字(Number)
整数、小数、负数
布尔(Boolean)
true >真（对）
false>假（错）
Undefined（未定义）
一个变量没有赋值就是undefined
Null（空）
****一种特殊的Object类型
2》1种复杂（对象）
Object
***********typeof 检测类型的
typeof返回的结果是字符串
例如:typeof(str) | typeof str

js中的数据类型转换

1》把字符串转换为数字类型
	a>Number()

//把字符串转换为       ---》【数字类型】
var str = "易驰web前端全套课程";   //字符串
var num = Number( str );
alert(num);//NaN
alert(typeof num);

b>parseInt()

//parseInt()
var str = "123.1";
var num = parseInt(str);
alert(typeof num);  // "number"
alert(num);

c>parseFloat()

parseFloat()
var str = "123";
var num = parseFloat(str);
alert(typeof num);  // "number"
alert(num);

2》把字符串转换为布尔类型
a》Boolean
***补充
NaN:属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。可以把 Number 对象设置为该值，来指示其不是数字值。

一、js中的运算符：操作数据值
运算符包括：一元运算符（一目运算符），布尔运算符,算术运算符，三元运算符，赋值运算符，位运算符…
1》算术运算符
+

var num = 10;
var str = 20;
console.log(num/str);

1>如果是字符串类型和数字类型相加，最后返回的结果是连接操作,数字类型会隐式转换为字符串类型
-

var num1 = 8;
var num2 = 3;
console.log(num1%num2);

1》如果是字符串类型和数字类型相减，最后返回的结果是正常减法,字符串类型会隐式转换为数字类型
*

var num = 10;  //数字类型
var str = "20";  //字符串类型
var cont = num+str;     // 这里做了一个隐式的转换,把num转换为了string
console.log(cont);  // 这里的加号就是连接了   1020
console.log(typeof cont); //最后返回的结果是string

1》如果是字符串类型和数字类型相乘，最后返回的结果是正常乘,字符串类型会隐式转换为数字类型
/

var num1 = 30;     //数字类型
var str1 = "20";  //字符串类型
var count = num1-str1;  //这里的str1原来是字符串类型， 在这里呢隐式转换为了number
console.log(count);
console.log(typeof count);  //number

1》如果是字符串类型和数字类型相除，最后返回的结果是正常除,字符串类型会隐式转换为数字类型
%

var num2 = 5;
var str2 = "3";
var count = num2 % str2;
console.log(typeof count );

1》如果是字符串类型和数字类型求模，最后返回的结果是正常求模,字符串类型会隐式转换为数字类型

一、js中的赋值运算符
=

var num = 1;
alert(num);

+= : x+=y ====> x=x+y

var num1 = 1;
var num2 = 2;
num1+=num2;  // num1 = num1+num2      num1 = 1+2
alert(num1);
字符串和数值相加默认将转为字符串连接：
var num7 = 7;   //alert(typeof  num7);   // "number"
var str8 = "8";
num7+=str8;  //  num7 = 7+"8"
alert(num7);

-= : x-=y ====> x=x-y

var num3 = 3;
var num4 = 4;
num3-=num4 ;  // num3 = 3-4   ===> -1
alert(num3);
数值和字符串相减，默认将字符串转为数值：
var num9 = 9;
var str1 = "1";
num9-=str1;  //  num9 = 9-"1" 
alert(num9);

1 * = : x*=y ====> x=x*y

var num5 = 5;
var num6 = 6;
num5*=num6;   //  num5 = 5*6   (30)
alert(num5);

/= : x/=y ====> x=x/y

var num7 = 5;
var num8 = 6;
num7/=num8;   //  num5 = 5/6   (0.8333)
alert(num7);

%= : x%=y ====> x=x%y（求余）

var num7 = 5;
var num8 = 6;
num7%=num8;   //  num5 = 5%6   5
alert(num7);

js中的比较运算符

== ：只比较值

var num1 = 3;
var num2 = 4;
document.write(  num1 == num2  ); //false

数值和字符串比较：

var num1 = 3;  //数字类型
var num2 = "3"; //字符串类型
document.write(   num1 == num2  );

// 因为num1可以比喻为3块钱 num2比喻为:我在纸上写了一个数字3
// 而num1和num2不是一个数据类型，根本就不是一个概念 ，但是结果是true？？？ 因为js是弱变量类型所以结果是true
===：比较值还比较类型

var num1 = 3;  //数字类型
var num2 = "3"; //字符串类型
document.write(  num1 === num2 );   //false

!= ：非等（不等于）

var num1 = 6;
var num2 = 5;
document.write(   num1!=num2 );  // num1不等于num2

>

var num1 = 3;
var num2 = 4;
alert(  num1 > num2 );

< 

var num1 = 3;
var num2 = 4;
alert(  num1 < num2 );

>=
<=

var num3 = 7;
var num4 = 7;
alert(  num3<=num4 );   // 7>=7              num3>num4      num3==num4

比较运算符返回结果：布尔值(false,true)

一、js中的一元运算符（一目运算符）
i++：先赋值,再自加1

var num1 = 3;
var num2 = 4;
num1=num2++;
// 1>把num2的值赋值给num1   ===>num1 = num2
// 2>num2自加1             ===>num2+1
document.write(  num1+"======>"+num2);  // num1:4             num2:5

i–：先赋值,再自减1

var num1 = 3;
var num2 = 4;
num1 = num2--;
//1>num1=num2
//2>num2-1
alert( num1 +"====>" +num2);  // num1===>4      num2 ===>3

++i：先自加1 ，再赋值

var num1 = 5;
var num2 = 8;
num1=++num2;
//1> num2+1
//2> num2赋值给num1
alert(  num1 +"===>"+ num2);   // 9,9*/

–i : 先自减1，再赋值

var num6 = 12;
var num7 = 20;
num6=--num7;
//1>num7-1
//2>num7赋值给num6;
alert(  num6 +"===>"+num7 );    //19,19

//如果是–i这种情况结果是19,19 , 如果是i–这种情况结果是 20,19

JS中的二元运算符（二目运算符）[逻辑运算符]

&&（与）：格式:表达式1 &&表达式2…
1>表达式1和表达式2有一个为false，整体的结果为false

var a = 10;
var b = 20;
var c = 30;
alert(  a>b && b>c   ); //  10 > 20 && 20 > 30
or
var a = 10;
var b = 20;
var c = 30;
alert(  a<b && b<c   ); //  10 < 20 && 20 > 30

||（或）：格式：表达式1 || 表达式2
1>表达式1和表达式2有一个为true，整体的结果为true

var a = 10;
var b = 20;
var c = 30;
alert(  a>b || b<c  ); //  10<20 || 20>30
//表达式1为true  表达式2为false    整体结果为true
//表达式1为false  表达式2为true    整体结果为true

!（非） ： 取反

var bool = true;
alert(!bool);

JS中的三元运算符（三目运算符）

格式：
条件？执行结果1（true）:执行结果2（false）

var a = 10;
var b = 20;
// a<b?alert("对"):alert("错");
a>b?alert("对"):alert("错");

一、JS中的流程控制语句（if语句）
格式：
if(条件1){
如果条件1成立，执行这里代码
}else{
如果条件不成立,则执行这里代码
}

var num1 = 10;
var num2 = 20;
if(num1<num2){
     //  10 < 20
    alert("您说的对");
}else{
   
    alert("您可能不对");
}

格式:
if(条件1){
如果条件1成立，执行这里代码
}else if(条件2){
如果条件2成立，执行这里代码
}else if(条件3){
如果条件3成立，执行这里代码
}…
else{
如果条件1到条件n都不成立，执行这里代码
}

var str = "晴天";
if(str=="阴天"){
   
    alert("阴天");
}else if(str=="晴天"){
   
    alert("11111111111111");
}else if(str=="雪天"){
   
    alert("雪天");
}else{
   
    alert("雾霾");
}

   嵌套格式：
			if(条件1){
				if(条件){
					如果条件成立,执行这里代码
				}
			}else{
				如果条件1不成立，执行这里代码
			}
		var num = 10;

var str = "您好";
if( num == 10 ){
   
    if(str=="您好"){
   
        alert("您好啊啊啊啊啊");
    }
}else{
   
    alert(2222);
}		

流程控制例子：

 橙汁
橙子===》装瓶====》瓶子广告===》卖
橙子===》瓶子广告===》装瓶====》卖
一、js中的系统输入框
prompt()
isNaN():
如果isNaN(10)写的是数字返回结果为false
如果isNaN(“哈哈”)写的不是数字返回结果为true

var str = prompt("判断您的成绩是否符合要求");
if(isNaN(str)){
   
    alert("必须输入数字");
}else if(str==100){
   
    alert("满分");
}else if(str>=60){
   
    alert("及格");
}else if(str<=59){
   
    alert("不及格");
}

JS中流程控制语句（switch语句）

	格式：
			switch(条件表达式){
				case 常量1:
					执行;
					break;
				case 常量2:
					执行;
					break;
				case 常量3:
					执行;
					break;
				......
				default:
					执行
			}

var str = "晴天";
switch (str){
   
    case "阴天":
        alert("阴天");
        break;
    case "晴天":
        alert("1111111111111111111");
        break;
    case "雨天":
        alert("雨天");
        break;
    default:
        alert("都不满足执行:default");
}

JS中的循环语句（for循环）

循环语句：在有限的条件内，反复不断的执行一些事
for循环格式：
for(起始条件;终止条件;步长值){
循环体;
}

for(var i=1;i<=100;i++){
   
    document.write(i+"<br />");
}

比喻：

（起始条件）        （终止条件）			（步长值）
发车时间			末班车时间				发车周期
5:00					23:00						每5分钟一趟车
5:05					23:00						每5分钟一趟车
5:10					23:00						每5分钟一趟车

…
22:50 23:00 每5分钟一趟车
22:55 23:00 每5分钟一趟车
23:00 23:00 每5分钟一趟车
23:05(没有车)

for(var i=0;i<3;i++){
   
    document.write(i);
}
alert(i);

JS中的for循环语句嵌套

格式：
for(起始条件; 终止条件;步长值){
for(起始条件;终止条件;步长值){
循环体;
}
循环体;
}

for(var i=1;i<=100;i++){
   
    if(i%10==0){
   
        document.write(i+"<br />");
    }
}
or
for(var i=0;i<