JavaScript笔记

第一天

---

Js基础

JavaScript简称： js

Js分为三个部分：

• ECMASscript标准——js的基本的语法
• DOM——Document Object Model 文本对象模型
• BOM——Browser Object Model 浏览器对象模型

JavaScript是什么？

是一门脚本语言：不需要编译，直接运行，
是一门解释型语言：遇到一行代码就解释一行代码，
是一门动态类型的语言，
是一门基于对象的语言，
是一门弱类型的语言：声明变量的时候都使用var

编译语言
需要把代码翻译成计算机所认知的二进制语言，才能够执行
脚本语言
不需要编译，直接执行

• 常见的脚本语言：t-sql、cmd

Js代码可以写在三个位置

1.在html文件中，script标签中写js代码

<script>js代码</script>

2.在html的标签中写js代码

<input type=“button” onclick="alert('被点了')"/>

3.在js文件中写js代码，需要在html的页面中引入

Js代码的注意问题

1.在一对script的标签中有错误的js代码，那么该错误的代码后面的js代码不会执行
2.如果第一对script标签中有错误，不会影响后面script标签中的js代码的执行
3.script标签中写的内容：
标准写法type=“text/javascript”
或者language=“Javascript”
目前在我们的html页面中，type和language都可以省略，因为html是遵循h5标准的
4.

<script type="text/javascript" language="JavaScript">

也是允许的
5.script标签在页面中可以出现多对
6.script标签一般是放在body标签中的最后，有时会放在head标签中
7.如果script标签是引入外部js文件的作用，那么这对script标签中不要写任何javascript代码，如果要写javascript代码，那就重新写一对script标签，在新的script标签中写js代码
8.js中的每一行代码结束都应该有分号 ；
9.js中区分大小写
10.js中的字符串可以使用双引号，也可以使用单引号

变量

变量的作用：

用来操作数据（存储数据、读取数据）

⚠️操作的数据都是在内存中操作

Js中存储数据使用变量的方式（名字，值➡数据）

Js中声明变量：

使用var➡存储数据，数据应该有对应的数据类型

Js中的字符串类型的值都用双引号或者单引号括起来

//eg1.存储一个数字10 
   var num=10;
//eg2.存储一个名字
   var name='小黑';
   或者 var name="小黑";

变量声明与变量初始化的区别

变量声明（有var，有变量的名字，没有值）
变量初始化（有var，有变量的名字，有值）

变量声明的方式：

var 变量的名字；

//例一：声明一个变量，此时是没有赋值的
  var number; 
//例二：声明多个变量，都没有赋值
  var x,y,z,k; 

变量的初始化（变量声明的同时并且赋值了）

var 变量名=值；

var number=10; //存储一个数字10
var number2=5; //存储一个数字5
var name="张濛"; //存储一个名字
var flag=true; //存储真（ture）
var nll=null //存储一个空（null）
var obj=new Object(); //存储一个对象
上述六个例子里的“=”是赋值的含义

变量名的命名规范：

1.变量的名字要有意义，方便其他程序员理解
2.变量名有一定的规范：一般以字母、$符号、下划线开头，中间或者后面可以有$符号、字母、数字
3.变量名一般都是小写的
4.多个单词组成的变量名，第一个单词首字母是小写的，后面的所有的单词的首字母都是大写的，这种命名方式称为：驼峰命名法 eg. bigNumber
5.不能使用关键字，关键字即系统自带的一些单词
6.不会单词用拼音，拼音也要遵循驼峰命名法
⚠️变量的名字不能重名！

声明多个变量，然后一个一个赋值

    var num1,num2,num3;
    num1=10;
    num2=20;
    num3=30;

声明多个变量并赋值

    var num1=10,num2=20,num3=30;

变量交换的第一个方式：借助第三方变量进行交换

    var num1=10;     
    var num2=20;
    var temp=num1;    //把num1这个变量的值取出来放在temp变量中
    num1=num2;        //把num2这个变量的值取出来放在num1变量中
    num2=temp;        //把temp这个变量的值取出来放在num2变量中
    console.log(num1);
    console.log(num2);

变量交换的第二个方式：一般适用于数字的交换

    var num1=10;
    var num2=20;
    //把num1变量的值和num2变量的值取出来想加，将结果重新赋值给num1这个变量
    var num1=num1+num2;   //此时num1这个变量的值为30
    //把num1变量的值和num2变量的值取出来相减，将结果重新赋值给num2
    var num2=num1-num2;   //此时num2这个变量的值为10
    //把num1变量的值和num2变量的值取出来相减，将结果重新赋值给num1
    var num1=num1-num2;   //此时num1这个变量的值为20
    console.log(num1,num2);

扩展：变量的交换 ➡ 位运算

    var num1 = 10;
    var num2 = 20;
    num1 = num1 ^ num2;
    num2 = num1 ^ num2;
    num1 = num1 ^ num2;

注释

html中：

 <!--注释内容-->

Javascript中:

 //单行注释
    
 /**
  *多行注释
  */

js中的原始数据类型：

number,string,boolean,null,undefined,object

• number:数字类型（整数和小数）
• string;字符串类型（值用单引号或者双引号括起来）eg. “34”表示字符串34
• boolean:布尔类型（值有两个，true(真1),false(假0))

//方式一
var sex1=true;  //男
var sex2=false;  //女
//方式二
var sex1=1;  //男
var sex2=0;  //女

• null:空类型（值只有一个：null,一个对象指向为空了，此时可以赋值为null）
• undefined:未定义（值只有一个：undefined）

变量声明了，没有赋值，结果是undefined
函数没有明确返回值，如果接收了，结果也是undedined
⚠️注意：如果一个变量的结果是undefined和一个数字进行计算，那么结果将是NaN（not an number 不是一个数字）

• object:对象

如何获取这个变量的数据类型是什么？

使用typeof来获取

typeof的使用方法：
1.typeof 变量名
2.typeof (变量名)

例子：

   var num = 10;
   var str = "张濛"；
   var flag = true;
   var nll = null;
   var undef;
   var obj = new Object();
   console.log(typeof num);  //结果为number
   console.log(typeof str);   //结果为string
   console.log(typeof flag);  //结果为 boolean
   ⚠️console.log(typeof nll);   //结果不是 null
   ⚠️console.log(String(nll))  //结果为null(将变量的值拿出来变为字符串的类型输出)
   console.log(typeof undef);  //结果为 undefined
   console.log(typeof obj);   //结果为 object

number（数字类型）

数字类型分为：整数和小数

	num = 20; //整数
    num = 127.328; //小数

扩展：在其他语言中小数称为浮点型（分为单精度浮点和双精度浮点）
其他语言中：
整数类型：int
单精度浮点型：float
双精度浮点型：double

数字进制：

二进制：逢2进1

00000001——1
00000010——2
00000011——3
00000100——4
00000101——5
00000110——6
00000111——7
00001000——8
00001001——9

八进制：逢8进1

00000001——1
00000002——2
00000003——3
.
.
.
00000007——7
00000010——8
00000011——9
00000012——10

十进制：逢10进1

0
1
2
3
4
5
6
7
8
9
10

十六进制：

00000001——1
00000002——2
.
.
.
00000009——9
0000000a——10
0000000b——11
0000000c——12
0000000d——13
0000000e——14
0000000f——15
00000010——16
00000011——17
00000012——18
0000f12a

js中可以表示哪些进制？

    var num1=10;  //十进制——正常的数字
    var num2=012;  //八进制——0开头
    var num3=0x123;  //十六进制——0x开头

数字类型有范围：最大值和最小值

    console.log(Number.MAX_VALUE);  //数字的最大值
    console.log(Number.MIN_VALUE);  //数字的最小值

⚠️注意：
不要用小数去验证小数
不要用NaN验证是不是NaN
eg.
var num;
console.log(num+10==NaN); //false
如果要验证这个结果是不是NaN，应该使用isNaN()

isNaN(变量名/值)

括号中的内容：
不是一个数字，返回true；是一个数字，返回false
例子：

var num;  //变量声明了，没有赋值，结果是：undefined
console.log(isNaN(num));  

string（字符串类型）

字符串可以使用单引号，也可以使用双引号

    var str="10";   //字符串
    var str2='20';  //字符串

字符串的长度如何获取？字符串的个数有多少个？

变量名.length

    var str = “what are you neng sha lei”;
    console.log(str.length);

转义符

html中的转义符号：< : < > : &go; 空格 :  

js中的字符串里的转义符:
console.log(“张濛\燕荣贤”);
console.log(“张濛\t燕荣贤”);
console.log(“张濛\b燕荣贤”);

字符串的拼接：

使用+可以把多个字符串放在一起形成一个字符串

    //eg1. 
      var str1="张濛";
      var str2="燕荣贤";
      console.log(str1+str2);  //输出结果为 张濛燕荣贤
    //eg2. 
      console.log("亲亲"+"抱抱"+"举高高");  //输出结果为 亲亲抱抱举高高

⚠️只要有一项是字符串，其他的是数字，那么结果也是拼接，不是相加

    //eg1. 
      var str1="10";
      var str2=20;
      console.log(str1+str2);  //输出结果为1020 

如果一项是字符串，另一项不是字符串，使用 - 号，此时会发生计算

    eg1. var str1="10";
         var str2=5;
         console.log(str1-str2);  //输出结果为5
    eg2. var str1="10";
         var str2=5;
         console.log(str1*str2);  //输出结果为50

浏览器帮助我们自动的把字符串类型转换成了数字类型，这种方式叫做：隐式转换

boolean（布尔类型）

布尔类型的值有两个：一个是true（真），一个是false（假）

undefined（未定义）

undefined表示一个声明了但没有赋值的变量，变量只声明的时候默认是undefined

null（空）

null表示一个空，变量的值如果想为null，必须手动设置

    //eg
    var str1=null;

类型转换

1.其他类型转数字类型：三种方式：

• parseInt(); //转整数

       console.log(parseInt("10"));  //10 ，将字符串类型的10转换成了整数10
       console.log(parseInt("10avmre"));  //10
       console.log(parseInt("g10"));  //NaN
       console.log(parseInt("1snefiov"));  //1
       console.log(parseInt("10.98"));  //10
       console.log(parseInt("10.98cnoifbr"));  //10

• parseFloat(); //转小数

       console.log(parseFloat("10"));  //10
       console.log(parseFloat("10avmre"));  //10
       console.log(parseFloat("g10"));  //NaN
       console.log(parseFloat("1snefiov"));  //1
       console.log(parseFloat("10.98"));  //10.98
       console.log(parseFloat("10.98cnoifbr"));  //10.98

• Number(); //转数字 ➡ 比转整数和转小数严格 ️

       console.log(Number("10"));  //10
       console.log(Number("10avmre"));  //NaN
       console.log(Number("g10"));  //NaN
       console.log(Number("1snefiov"));  //NaN
       console.log(Number("10.98"));  //10.98
       console.log(Number("10.98cnoifbr"));  //NaN

2.其他类型转字符串类型

• .toString()

      var num=10;
      console.log(num.toString());  //数字转字符串类型

• String();

     var num1=20;
     console.log(String(num1));

⚠️如果变量有意义，调用.toString()进行转换,如果变量没有意义，使用String()进行转换

     //eg1 
     var num2;
     console.log(num2.toString());  //报错
     //eg2
     var num3=null;
     console.log(num3.toString());  //报错
     //eg3
     var num2;
     console.log(String(num2));    //undefined
     //eg4 
     var num3=null;
     console.log(String(num3));    //null

3.其他类型转布尔类型

• Boolean(值);

console.log(Boolean(1));  //true
console.log(Boolean(0));  //false
console.log(Boolean(11));   //true
console.log(Boolean(-10));   //true
console.log(Boolean("哈哈"));   //true
console.log(Boolean(""));   //false
console.log(Boolean(null));   //false
console.log(Boolean(undefined));   //false

操作符

操作符的定义：

一些用来计算的符号

算数运算符： + - * / %

var num=10;
var result=num%3;    //num变量与3取余 ➡ 10➗3的余!
console.log(result);   //结果为1

算数运算表达式：

由算数运算符连接起来的表达式

• 一元运算符：这个操作符只需要一个操作数就可以运算 例如：++ - -
• 二元运算符：这个操作符需要两个操作数就可以运算 例如：+ - * / %
• 三元运算符：这个操作符需要三个操作数就可以运算
• 复合运算符：+= -= *= /= %=

	var num=10;
	num+=10;   //就是：num=num+10;
	console.log(num);   //结果为20 

复合运算表达式：

由复合运算符连接起来的表达式

关系运算符：

>  <  >=  <=  ==不严格的相等  ===严格的相等  !=不严格的不等  !==严格的不等

	//例1
	var str="5";
	var num=5;
	console.log(str==num);  //结果为true
	//例2
	var str="5";
	var num=5;
	console.log(str===num);   //结果为false

关系运算表达式：

由关系运算符连接起来的表达式
关系运算表达式的结果是布尔类型

	console.log(5>10);   //false
	console.log(5>=5);   //true 
	console.log(5>3);   //true
	console.log(5==10);   //false

逻辑运算符:

&&逻辑与（并且）
||逻辑或（或者）
！逻辑非（取反）

逻辑运算表达式：

由逻辑运算符连接起来的表达式

• 表达式1 && 表达式2 ：如果有一个为false，整个结果就是false
• 表达式1||表达式2 ：如果有一个为true，整个结果就是true
• !表达式1 ：
  表达式1的结果是true，整个结果就是false
  表达式1的结果是false，整个结果就是true

赋值运算符：=

运算符的优先级

	var result = (4>=6 || '人' != '狗' && !(12*2 == 144) && true);
	console.log(result); // false||true&&true&&true，结果为true

字面量：

把一个值直接赋值给一个变量

	var num=10;      //是字面量
	var flag=true;    //是字面量
	var str="哈哈";   //是字面量
    
	var y=10;   //是字面量
	var n=y;    //不是字面量，因为y是一个变量，不是值

第一天复习

---

• NaN代表不是一个数字，不是一个数字和一个数字计算
• isNaN( ) —> 判断这个变量或者这个值是不是 不是一个数字
  如果不是一个数字，那么结果是true
  如果是一个数字，那么结果是false
• 整数和小数都属于number数据类型
• 获取字符串的长度的方法：变量名.length
• 一个变量声明了但没有赋值，是undefined

运算符

算术运算符

+  -  *  /  %  

一元运算符

一元运算符：只有一个操作数的运算符

5 + 6 两个操作数的运算符 二元运算符

++ 自身加1

– 自身减1

• 前置++

      var num1 = 5;
      ++ num1; 
  
      var num2 = 6;
      console.log(num1 + ++ num2);
  

• 后置++

      var num1 = 5;
      num1 ++;    
      var num2 = 6 
      console.log(num1 + num2 ++);
  

  总结
  前置++：先加1，后参与运算
  后置++：先参与运算，后加1
  上面两个理解后，下面两个自通
  前置-- ：先减1，后参与运算
  后置-- ：先参与运算，后减1后置-- ：先参与运算，后减1
  ​

逻辑运算符(布尔运算符)

&& 与 两个操作数同时为true，结果为true，否则都是false
|| 或 两个操作数有一个为true，结果为true，否则为false
! 非 取反

关系运算符(比较运算符)

<   >   >=   <=  ==  !=  ===  !==

==与===的区别：==只进行值得比较，===类型和值同时相等，则相等

var result = '55' == 55;  	// true
var result = '55' === 55; 	// false 值相等，类型不相等
var result = 55 === 55; 	// true

赋值运算符

= += -= *= /= %=

例如：
var num = 0;
num += 5;	//相当于  num = num + 5;

第二天

---

流程控制：代码执行的过程

流程控制的三种方式：

1. 顺序结构：从上到下，从左到右执行的顺序
2. 分支结构：if语句，if-else语句，if -else if - else if -else if…else…语句，switch-case语句，三元表达式语句
3. 循环结构：while循环，do-while循环，for循环，for-in循环

if相关语句

语法：

if (/* 条件表达式 */) {
  // 执行语句
}

if (/* 条件表达式 */){
  // 成立执行语句
} else {
  // 否则执行语句
}

if (/* 条件1 */){
  // 条件1成立，执行代码1，
  // 条件1不成立，判断条件2
} else if (/* 条件2 */){
  // 条件2成立，执行代码2
  // 条件2不成立，判断条件3
} else if (/* 条件3 */){
  // 条件3成立，执行代码3
  // 条件3不成立，执行代码4
} else {
  // 最后默认执行代码4
}

if-else语句例子

例一：判断年龄

var age = parseInt(prompt("请您输入年龄"));
if(age >= 18){
console.log("可以看电影了，嘿嘿...");
}else{
	console.log("看什么看，回家写作业去");
}

例二：判断输入的数字是奇数还是偶数

var number = parseInt(prompt("请输入一个数字"));
if(number%2==0){
	console.log("您输入的数字是偶数");
}else{
	console.log("您输入的数字是奇数");
}

例三：判断一个年份是不是闰年

var year = parseInt(prompt("请输入年份"));
if(year%4==0&&year%100!=0||year%400==0){
	console.log("闰年");
}else{
	console.log("平年");
}

if - else if - else if -else if…else…语句

• else if这种结构可以写多个
• else结构可以不用写，最多写一个

例子

var score = parseInt(prompt("请您输入成绩"));
if(!isNaN(score)){
	if(score>90&&score<=100){
		console.log("A级");
	}else if(score>80){
		console.log("B级");
	}else if(score>70){
		console.log("C级");
	}else if(score>=60){
		console.log("D级");
	}else{
		console.log("E级");
	}
}else{
	console.log("您输入有误")
} 

三元表达式

语法：

var 变量 = 表达式1 ? 表达式2 : 表达式3

是if-else语句的一种简化写法

执行过程：

表达式1的结果是true，则执行表达式2，然后把结果给变量；如果表达式1的结果是false，则执行表达式3，然后把结果给变量

例子：

var age = 20;
var result = age > 18 ? "成年了" : "未成年";
console.log(result);

总结:
大多数情况下，使用if-else的语句都可以用三元表达式来表示

switch-case语句——分支语句——多分支语句

语法：

switch(表达式){
	case 值1:
		代码1;
		break;
	case 值2:
		代码2;
		break;
	case 值3:
		代码3;
		break;
	case 值4:
		代码4;
		break;
	...
	default:
		代码5;
		break;//最后一个break可写可不写
}

执行过程：

获取表达式的值，和值1比较，
如果一样，则执行代码1，遇到break则跳出整个语句，后面的代码不执行；
如果不一样，则和值2比较，如果相同则执行代码2，遇到break则跳出；
否则和值3比较，相同则执行代码3，遇到break则跳出；
否则和值4比较，相同则执行代码4，遇到break则跳出；
否则直接执行代码5

例子：获取成绩级别

如果是A级，则显示90到100之间
如果是B级，则显示80到90之间
如果是C级，则显示70到80之间
如果是D级，则显示60到70之间
否则显示0到59之间

var jiBie = "C"
switch(jiBie){
	case"A":console.log("90到100之间");break;
	case"B":console.log("80到90之间");break;
	case"C":console.log("70到80之间");break;
	case"D":console.log("60到70之间");break;
	default:console.log("0到59之间");break;
}

注意问题：

• default后面的break可以省略
• default也可以省略
• case后的break在特定情况下可以省略

例子:

var month = parseInt(prompt("请输入月份"));
switch(month){
	case 1:
	case 3:
	case 5:
	case 7:
	case 8:
	case 10:
	case 12:console.log("31天");break;
	case 4:
	case 6:
	case 9:
	case 11:console.log("30天");break;
	case 2:console.log("28天");break;
}

分支语句总结：

• if语句：一个分支
• if-else语句：两个分支，只执行一个
• if - else if - else if…else…：多个分支，只执行一个
• switch-case语句：多分支语句，只执行一个
• 三元表达式：和if-else语句一样
• 什么时候使用if - else if - else if…else…？
  如果是有多个分支，且是针对范围的判断时使用
• 什么时候使用switch-case语句？
  如果是有多个分支，且是针对具体的值的判断时使用

循环语句

• 循环：一件事不停的或者重复的做
• 循环要有结束条件和计数器

while循环

语法：

var 变量 = 0; //计数器
while(循环条件){
	循环体；
	计数器++;
}

执行过程：

1. 判断循环条件是否成立（循环条件的结果是true还是false）
2. 如果是false，那么循环的代码（while大括号中的代码）都不执行
3. 如果是true，则先执行循环体，然后执行计数器，然后回到循环条件，再次判断循环条件是否成立，
   成立则继续执行循环；不成立则跳出循环
   执行完循环体后，计数器加1，然后再回到循环的条件，判断是否成立，成立则执行循环；否则跳出循环

例子1：输出10次哈哈

//i从0开始计数，0到9共10次
var i=0;
while(i<10){
	console.log("哈哈");
	i++;
}

例子2:计算1～100之间所有数字的和

var sum = 0;
var i = 0;
while(i<=100){
	sum = sum+i;
	i++;
}
console.log("和为"+sum);

例子3:求1～100之间所有偶数的和

var i = 1;  //计数器
var sum = 0;  //存储和的
while(i<=100){
	if (i%2==0){
		sum+=i;
    }
        i++;
}
console.log("和为"+sum);

例子4:输出1～100之间所有能被7整除的数字

var i = 1;
while(i<=100){
	if (i%7==0){
		console.log(i);
	}
i++;
}

例子5:求100以内所有是3的倍数的数字的和

var i = 1;
var sum = 0;
while(i<=100){
   if(i%3==0){
     sum+=i
   }
   i++;
}
console.log(sum);

例子6:提示用户输入账号和密码，如果账号或者密码不对，则一直提示用户输入账号和密码
账号——admin
密码——123（字符串类型：因为密码有可能包含字母，字母不属于数字）

var userName=prompt("请您输入用户名");
var userPsw=prompt("请您输入密码");
while(userName!="admin"||userPsw!="123"){
    userName=prompt("请您输入用户名");
    userPsw=prompt("请您输入密码");
}
console.log("登录成功");

do-while循环

语法

do{
	循环体
}while(条件);

执行过程：

1. 先执行一次循环体
2. 判断条件是否成立
3. 若不成立，则跳出循环
4. 若成立，则执行循环体，然后再次判断条件是否成立，成立则继续循环，不成立则跳出循环…

例子1：输出哈哈，我又变帅了（10次）

var i = 0;
do{
    console.log("哈哈，我又变帅了");
    i++;
}while(i<10);

例子2:
问用户：您觉得我帅吗？
提示用户输入Y/N，如果N就一直问，我帅不帅，如果输入Y，则结束，并提示用户，您真有眼光

do{
	var result=prompt("您觉得我帅吗？Y/N");
}while(result!="Y");
console.log("您真有眼光");

总结while循环和do-while循环

1.while循环的特点：

• 先判断，后循环，有可能一次循环体都不执行

2.do-while循环

• 先循环，后判断，至少执行一次循环体

for循环

语法：

for(表达式1;表达式2;表达式3){
	循环体；
}

执行过程

• 先执行一次表达式1，
• 然后判断表达式2 ，
• 如果表达式2不成立则直接跳出循环，
• 如果表达式2成立，则执行循环体的代码，
• 结束后执行表达式3，
• 然后跳到表达式2，
• 判断表达式2是否成立，
• 如果表达式2不成立则直接跳出循环，
• 如果表达式2成立，则执行循环体的代码，执行结束后跳到表达式3，然后再跳到表达式2，判断是否成立…

例子1：打印10次哈哈

for(var i=0;i<10;i++){
    console.log("哈哈");
}

例子2:求1到100之间所有数字的和

sum = 0;
for(var i=1;i<=100;i++){
  sum+=i;
}
console.log(sum);

例子3:求1-100之间所有偶数的和

sum = 0;
for(var i=1;i<=100;i++){
  if(i%2==0){
    sum+=i
  }
}
console.log(sum);

例子4:求1-100之间所有奇数的和

sum = 0;
for(var i=1;i<=100;i++){
  if(i%2!==0){
    sum+=i
  }
}
console.log(sum);

例子5:求1-100之间所有能被3整除的数字的和

sum = 0;
for(var i=1;i<=100;i++){
  if(i%3==0){
    sum+=i
  }
}
console.log(sum);

例子6:画五角星

//一共有五行星星
for (var i=0;i<5;i++) {
    //每一行有5颗星星
    for (var j=0;j<5;j++){
      document.write("⭐️");
    }
    document.write("<br/>");

  }

例子7:阶梯形五角星

//一共有五行星星
for (var i=0;i<=5;i++) {
    //每一行有5颗星星
    for (var j=0;j<=i;j++){
      document.write("⭐️");
    }
    document.write("<br/>");
  }

例子8:乘法口诀表

document.write("<table border='1' cellpadding='0' cellspacing='0'>");
  for (var i=1;i<=9;i++){
    document.write("<tr>");
    for (var j=1;j<=i;j++) {
      document.write("<td>");
        document.write(i+"*"+j+"="+i*j);
      document.write("</td>");
    }
    document.write("</tr>");
  }
  document.write("</table>");

调试

调试的过程：

• 写代码
• 打开谷歌浏览器
• 打开开发者工具
• Sources
• 双击文件
• 在某一行代码前面点击一下（出现的东西就是断点）

第二天复习

---

a++和++a

• ++在后面，先参与运算，然后再自身加1
• ++在前面，先自身加1，然后再参与运算
  ##总结分支
• 如果有两个分支，就用if-else
• 如果有多个分支（一般是范围的），推荐使用if - else if
• 如果有多个分支（一般是具体的值），推荐使用switch-case
  ##总结循环
• while：先判断后循环，有可能一次循环都不执行
• do-while：至少执行一次循环，再判断
• for循环：知道循环次数的情况下，推荐使用for循环
  #第三天
  ##break关键字
  在循环中，如果遇到了break，则立刻跳出当前所在的循环
  例子：找到100-200之间第一个可以被7整除的数字

for(i=100;i<=200;i++){
    if(i%7==0){
      console.log(i);
      break;
    }
  }

第三天

---

continue关键字

在循环中，如果遇到continue关键字，直接开始执行下一次循环

例子：求100-200之间所有的奇数的和

var sum=0;
  var i=100;
  while(i<=200){
    if(i%2==0){
      i++;
      continue;
    }
    sum+=i;
    i++;
  }
  console.log(sum);

continue案例

  //案例1:求100-200之间所有的奇数的和（用continue）

   var sum=0;
   var i=100;
   while(i<=200){
     //判断是不是偶数
     if(i%2==0){
     //如果是偶数----->跳过这个数字
       i++;//102
       continue;
     }
     sum+=i;
     i++;
   }
   console.log(sum);


  //案例2:求整数100～200的累加值，但要求跳过所有个位为3的数

   var sum=0;
   var i=100;
   while(i<=200){
     if(i%10==3){
       //个位数是3,不要
       i++;
       continue;
     }
     sum+=i;
     i++;
   }
   console.log(sum);


    var sum=0;
    var i=1;
    while(i<=10){
      if(i%10==3){
        //个位数是3,不要
        i++;
        continue;
      }
      sum+=i;
      i++;
    }
    console.log(sum);

数组

一组有序的数据

数组的作用：

可以一次性存储多个数据

数组的定义：

//方式1:通过构造函数创建数组
var 数组名 = new Array();
var array = new Array();

var 数组名 = new Array(长度);
1.如果数组中没有数据，但是有长度，那么数组中的每个值就是undefined
2.构造函数的方式创建数组的时候：
如果在Array(一个数字)=>数组的长度（数组元素的个数）
如果在Array(多个值)=>这个数组中就有数据了，数组的长度就是这些个数据的个数

//方式2:通过字面量的方式创建数组
var 数组名 = [];
var arr = [];

数组元素：

数组中存储的每个数据，都可以叫数组的元素
比如：数组中存储了三个数据，那么就可以说数组中有三个元素

数组长度：

数组中元素的个数
比如：有三个元素，就可以说这个数组的长度是3

数组索引（下标）：

用来处处或者访问数组中的数据的
索引从0开始，到长度减1结束

数组的索引和数组的长度的关系：

长度减1 就是最大的索引值

如何设置数组中某个位置的值

数组名[下标] = 值;

如何获取数组中某个位置的值

var result = 数组名[下标];

例子

//构造函数的方式定义一个数组——空数组
var arr1 = new Array();

//构造函数的方式定义了一个数组，数组中有5个元素，数组长度是5，每个数据是undefined
var arr2 = new Array(5);

//数组的下标
var arr = new Array(10,20,1000,40,50,60);
console.log(数组名[下标]);

数组的注意问题

• 数组中存储的数据类型可以不一样

var arr = [10,"哈哈",true, null, undefined, new Object()];
console.log(arr);

数组总结

• var 数组名=new Array(); //空数组
• var 数组名=new Array(值); //数组定义了,有长度
• var 数组名=new Array(值1,值2,值3…); //定义数组并且有多个数据
• var 数组名=[]; //空数组
• var 数组名=[值1,值2,值3]; //有三个数据

var arr1=new Array();//空数组
var arr2=new Array(5);//长度为5的数组,每个数据的值是undefined
var arr3=new Array(1,2,3,4,5);//长度为5分数组,
var arr4=[];//空数组
var arr5=[1,2,3];//长度为3的数组
var arr6=["red","blue","green",1,true];//数组中元素的值的类型可以不一样

var arr7=[];
//设置数组的元素的值
arr7[0]=10;
arr7[1]=20;

for循环遍历数组

var arr=[10,20,30,40,50,60,70,80,90,100];
for(var i=0;i<arr.length;i++){
  console.log(arr[i]);
}

数组的案例

    //案例1:求数组中所有元素的和

    var arr1 = [10, 20, 30, 40, 50];
    var sum = 0;
    for (var i = 0; i < arr1.length; i++) {
      sum += arr1[i];
    }
    console.log(sum);

    //案例2:求数组中所有元素的平均值

    var arr2 = [1, 2, 3, 4, 5];
    var sum2 = 0;
    for (var i = 0; i < arr2.length; i++) {
      sum2 += arr2[i];
    }
    console.log(sum2 / arr2.length);

    //案例3:求数组中所有元素中的最大值

    var arr3 = [1, 3, 2, 5, 10, 100, 50];
    //假设max变量中存储的是最大值
    var max = arr3[0];
    for (var i = 0; i < arr3.length; i++) {
      //判断这个变量的值和数组中每个元素的值是不是最大值
      if (max < arr3[i]) {
        max = arr3[i];
      }
    }
    console.log("最大值:" + max);
    //案例4:求数组中所有元素的最小值
    var arr4 = [100, 10, 20, 30, 40, 50];
    var min = arr4[0];//假设min里存储的就是最小值
    for (var i = 0; i < arr4.length; i++) {
      if (min > arr4[i]) {
        min = arr4[i];
      }
    }
    console.log("最小值:" + min);


    //案例5:倒序遍历数组

    var arr5 = [10, 20, 30, 40, 50, 100];
    //正序
    for (var i = 0; i < arr5.length; i++) {
      console.log(arr5[i]);
    }
    //倒序
    for(var i=arr5.length-1;i>=0;i--){
      console.log(arr5[i]);
    }

    //案例6:把数组中每个元素用|拼接到一起产生一个字符串并输出

       var names=["卡卡西","佐助","鸣人","大蛇丸","雏田","小苏","凤姐","黑崎一护"];
       var str="";//空的字符串
       for(var i=0;i<names.length-1;i++){
         str+=names[i]+"|";
       }
    
       console.log(str+names[names.length-1]);

       var names=["卡卡西","佐助","鸣人","大蛇丸","雏田","小苏","凤姐","黑崎一护"];
       var str="";//空的字符串
       for(var i=1;i<names.length;i++){
         str+="|"+names[i];
       }
    
       console.log(names[0]+str);


    //案例7:去掉数组中重复的0，把其他的数据放在一个新的数组中

       var arr = [10, 0, 20, 0, 30, 0, 50];
       var newArr=[];//新数组,用来存放第一个数组中所有非0的数字
       for(var i=0;i<arr.length;i++){
         if(arr[i]!=0){
           newArr[newArr.length]=arr[i];
         }
       }
       //把新数组的长度作为下标使用,数组的长度是可以改变的
       console.log(newArr);


    //案例8:反转数组---把数组中的数据的位置调换
       var array = [10, 20, 30, 40, 50];
       //循环的目的是控制交换的次数
       for (var i = 0; i < array.length / 2; i++) {
         //先把第一个元素的值放在第三方变量中
         var temp = array[i];
         array[i] = array[array.length - 1 - i];
         array[array.length - 1 - i] = temp;
       }
       console.log(array);


       for(var i=array.length-1;i>=0;i--){
         console.log(array[i]);
       }
    console.log(array);//50 40 30 20 10


    //案例9:提示用户输入班级人数,求总成绩,平均值,最高分,最低分---扩展

    //提示用户输入人数,并转成数字类型
    var perCount = parseInt(prompt("请输入班级人数"));
    //定义数组存储班级的每个人的成绩
    var perScores = [];
    //循环的方式录入每个人的成绩
    for (var i = 0; i < perCount; i++) {
      //把每个人的成绩存储到数组中
      perScores[perScores.length] = parseInt(prompt("请输入第" + (i + 1) + "个人的成绩:"));
    }
    console.log(perScores);
    //求总成绩
    var sum = 0;
    var avg = 0;//平均值
    var max=perScores[0];//最大值
    var min=perScores[0];//最小值
    for (var i = 0; i < perScores.length; i++) {
      sum += perScores[i];//求和
      //求最大值
      if(max<perScores[i]){
        max=perScores[i];
      }
      //求最小值
      if(min>perScores[i]){
        min=perScores[i];
      }
    }
    //平均值
    avg = sum / perScores.length;
    console.log("和为:"+sum);
    console.log("平均值:"+avg);
    console.log("最大值:"+max);
    console.log("最小值:"+min);

    //案例10: 冒泡排序

冒泡排序：

把所有的数据按照一定的顺序进行排序（从小到大或从大到小）

var arr = [10, 0, 100, 20, 60, 30];
    //循环控制比较的轮数
    for (var i = 0; i < arr.length - 1; i++) {
      //控制每一轮的比较的次数
      for (var j = 0; j < arr.length - 1 - i; j++) {
        if (arr[j] < arr[j + 1]) {
          var temp = arr[j];
          arr[j] = arr[j + 1];
          arr[j + 1] = temp;
        }
      }
    }
    console.log(arr);

函数

把一坨重复的代码封装，在需要的时候直接调用即可

函数的作用

代码的重用

函数的定义（语法）

function 函数名(){
	函数体——一坨重复的代码
}

例子：

function cook() {
      console.log("切菜");
      console.log("放油");
      console.log("炒菜");
      console.log("放盐");
      console.log("装盘");
}

函数的调用

函数名();

例子：

	console.log("早上======");
    cook();
    console.log("中午======");
    cook();
    console.log("晚上======");
    cook();
    console.log("半夜======");
    cook();
    console.log("后半夜");
    cook();

函数参数

在函数定义的时候，函数名字后面的小括号里的变量就是函数的参数，目的是函数在调用的时候，用户传进来的值操作
形参:函数在定义的时候小括号里的变量叫形参
实参:函数在调用的时候小括号里传入的值叫实参,实参可以是变量也可以是值
例子

//函数定义
function consoleSum(x, y) {
      var sum = x + y;//计算和----功能
      console.log(sum);//输出和---第二个功能
}
//函数调用
//在函数调用的时候,按照提示的方式,给变量赋值--->就叫传值,把这个值就传到了变量(参数)中
var shuzi1=parseInt(prompt("请输入第一个数字"));
var shuzi2=parseInt(prompt("请输入第二个数字"));
consoleSum(shuzi1,shuzi2);

⚠️⚠️函数注意问题

1. 函数必须先定义，然后才能使用
2. 函数名字：要遵循驼峰命名法
3. 函数不能重名！函数一旦重名，后面的会把前面的覆盖
4. 一个函数最好就是一个功能

函数的返回值

在函数内部有return关键字,并且在关键字后面有内容,那么这个内容就被返回了
当函数调用之后,需要这个返回值,那么就定义变量接收,即可

函数案例练习