javascript基础速成必备

01-js-介绍及初体验

• 脚本 编程语言；
• 学习特点：首先你要分析逻辑过程；把逻辑写下来
• JS作用：与用户交流互动，交互；

02-js-引入方式

• 内嵌式：demo学习阶段
• 外链式：工作使用
• 行内：了解，一般不用；

<!-- 1.内嵌式 demo学习阶段使用-->
<!-- <script>
  // JS代码
</script> -->


<!-- 2.外链式 工作中-->
<!-- <script src="./02-demo.js"></script> -->

03-js-注释

• 注释：用于把自己的理解步骤要写出来

  // 1.单行注释  ctrl+/ 用于简单说明；


  // 2.多行注释  ctrl+shift+/
  /* 
  * 比较多的注释
  * 比较多的注释
  * 比较多的注释
  * 比较多的注释
  * 比较多的注释
  * 比较多的注释
  * 比较多的注释
  * 比较多的注释
  * 比较多的注释
  */

04-js-输入输出

• 语法：

  // 1.输入 
  // 小括号里面引导信息，必须带单双引号，成对出现；
  // prompt('请输入银行卡密码：');


  // 2.输出
  // 弹出信息：必须带单双引号，成对出现；
  // 不点击 确定，后面不执行；
  // alert("今天天气不错");
  // alert("今天天气不错1");
  // alert("今天天气不错2");
  // alert("今天天气不错3");

  // console：控制台 用于开发调试 
  // console.log("控制台输出");

  // HTML文档 输出信息
  // document.write("123");
  // 可以识别HTML标签；
  // document.write("<h1>123</h1>");

05-js-变量-语法及存储

• 语法：

  // prompt("卡密码：");

  // 变量：用于去接受数据；存数据；
  // var :声明变量的关键字
  // = : 赋值运算符，把右侧的结果，返回给左侧变量里’；
  // 过程：var a 声明变量；a = 10 把数据存入变量；
  // var a = 10;
  // var b = 20;
  // console.log(a);
  // console.log(b);
  // 常用：针对console.log
  // 多个输出的语法，用逗号隔开；
  // console.log(a, b);

  // 过程：a:10    b:20  
  // console.log(a + b);

  // 返回值：用户输入的信息
  // var info = prompt("输入一些信息：");
  // console.log(info);




  // 过程：var a 声明变量；a = 10 把数据存入变量；
  // 声明变量 没有赋值
  var a;
  // 赋值
  a = 10;
  // console.log(a);


  // 使用特点：声明一个新的变量，需要用var ;下面再用，不需要声明；
  // var b = 100;
  // console.log(b);
  // // 再次赋值
  // b = 200;
  // console.log(b);



  // 
  // var c;
  // c = 10;
  // console.log(c);

  // // 1.把右侧的结果，计算出来  c + 10 :  10+10  
  // // 2.把右侧结果赋值给左侧的变量
  // // + ：算术运算符，优先级高于 赋值运算符’
  // c = c + 10;
  // console.log(c);

• 内存中储存：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-awDh7KCP-1576574886099)(imgs/003.png)]

06-js-变量-命名

• 范围：字母、数字、下划线、$符号；
• 市场上，一般用驼峰；
• 根据公司的需要：变量用英文；

  // JS:命名范围：字母、数字、下划线、$符号；

  // 1.不能数字开头
  // var 15a = 10;
  // console.log("abc");

  // 2.不能使用关键字，保留字
  // var var = 10;

  // 区分大小写的；
  // var a = 10;
  // A 当做变量 Uncaught ReferenceError: A is not defined
  // 说 A 没有声明 就用了；
  // console.log(A);

  // 如何关注命名？
  // 1.根据公司业务场景；登录框，用英文；
  // var userName = "zhangsan";
  // 2.格式要求：习惯  驼峰命名规则
  // var userName
  // var getData = 123;
  var get_data = "asdasdas";

07-js-变量-补充

• 可以多次声明和赋值；

  // var a;
  // var b;

  // 声明多个变量；
  // var a, b, c, d;


  // var a = 1;
  // var b = 2;
  // 可以多个声明且赋值；
  // var a = 1,b = 2;


  var a = 10;
  // 把a的值 赋值 给 变量b；
  var b = a;

  console.log(a, b);

08-js-变量-交换两个值

  var a = 10;
  var b = 20;
  console.log(a, b);


  // 两个值互换：
  // 新声明个变量,不要和声明重名
  var c;

  // 把a的值复制了一份给c ,存入 的是就是a的数据；
  c = a;

  // 把b的值给了a；a：20；
  a = b;

  // 把a的值给了b;  把c里面存入的值（a真实的值）赋值给b;
  b = c;
  console.log(a, b);

09-js-数据-5种简单值类型

• 语法：源于生活；

  // 1.Number 类型
  // 
  // NaN:泛指，不是某个数；但是Number 类型；


  // 2.String类型
  // 字符串
  // prompt("引导信息就是字符串")
  // var a = "NaN";


  // 3.Boolean类型 布尔值 true false;
  // 描述事情 或者 状态的成立与否；
  // true:成立。确定。对；
  // > 比较运算符，优先级高于 赋值运算符；
  // var a = 3 > 4;
  // console.log(a);


  // 4.null 复杂数据类型 值为null
  // 空；


  // 5.undefined类型 值undefined

  // 报错：Uncaught ReferenceError: A is not defined
  // console.log(A);

  // 开发人员没有存入值，浏览器会把默认值存入；
  // var a;
  // // undefined 默认值；
  // console.log(a);

09-js-数据-转译字符

  // 字符串单双引号要成对出现；
  // 

  // 解决：
  // 1.单双引号 互用；
  // console.log('我说："今天天气不错！ "     ');
  // 2.转译字符，把一些特别的字符，通过一定的语法格式，输出；
  // 特别的字符："  '  \
  // 格式：第一个位置 \ ;第二个位置：特殊字符；
  console.log('我说："今天天气不错！"  \"  \'  \\  ');

10-js-数据-检查类型

• 语法：返回查看数据类型；

typeof 数据;
typeof(数据);


// 1.Number类型
  var a = NaN;
  // 返回值：返回数据的类型
  // res:result 
  var a_res = typeof(a);
  console.log(a, a_res);


  // 2.String
  // VSC 快速选择：ctrl+d;
  var b = "NaN";
  var b_res = typeof(b);
  console.log(b, b_res);


  // 3.Boolean
  var c = true;
  var c_res = typeof(c);
  console.log(c, c_res);


  // 4.null 复杂类型
  var d = null;
  var d_res = typeof(d);
  console.log(d, d_res);

  // 5.Undefined
  var e;
  var e_res = typeof(e);
  console.log(e, e_res);


  // 数据类型：让保证数据类型一致，参加运算，得到预期结果；

11-js-案例-工资计算1

  // 需求：老板输入绩效工资，加上保底工资，弹窗显示总工资
  // 分析：
  // 1.老板输入绩效工资
  // var jixiao = prompt("请输入铁蛋绩效工资");

  // // 2.加上保底工资
  // var baodi = 3000;

  // // 3.弹窗显示总工资
  // alert(jixiao + baodi);


  // 问题：
  // 1. prompt接受用户输入的信息，返回值是String类型；
  // 2. String类型特点：字符串遇见+ ，把+左右的数据类型转为String类型，形成字符串拼接；

  var a = "1000";
  // console.log(a + 2000);
  console.log(10 + 10 + a);

12-js-转化-转数字

  // 其他 变 数字

  // 其他：string Boolean null undefined

  // 1.String
  // // var a = "1000";
  // var a = "abc";
  // var a_res = Number(a);
  // // "abc" 转化为后 NaN 不是某个数 的Number类型
  // console.log(a_res, a);


  // // 2.Boolean  true---》1；
  // // false----》0；
  // var b = true;
  // var b_res = Number(b);
  // // "abc" 转化为后 NaN 不是某个数 的Number类型
  // console.log(b_res, b);



  // // 3.null 了解
  // var c = null;
  // var c_res = Number(c);
  // console.log(c_res, c);

  // // 4.undefined
  // var d;
  // var d_res = Number(d);
  // console.log(d_res, d);


  // --------------------------------------------------------
  // 1.可以识别字符串内前面的数字 记住
  // var a = "12abc";
  // 
  // var a = "a12bc";
  var a = "12.12";
  // 转为整数
  var a_res = parseInt(a);
  console.log(a_res, a);

  // 其他: true null undefined;------>NaN


  // var b = "12abc";
  // var b_res = Number(b);
  // console.log(b_res, b);


  // 可以识别字符串内前面的数字
  // var c = "12.12abc";

  // 非前面---->NaN
  // var c = "a12.12bc";

  // 
  var c = "12.12";
  // 转为浮点数
  var c_res = parseFloat(c);
  console.log(c_res, c);

12-js-案例-工资计算2

  // 接受的ji_xiao  用户prompt输入数据，默认接受到时string类型；
  var ji_xiao = prompt("请输入铁蛋的绩效工资：");

  // 转之后；
  var ji_xiao_numb = parseFloat(ji_xiao);
  // var ji_xiao_numb = Number(ji_xiao);

  // 基本工资
  var ji_ben = 3000;

  // string类型遇到 + ，把其他类型转为string类型，形成字符串拼接；
  alert(ji_ben + ji_xiao_numb);

13-js-转化-转字符串

• 语法：

// String(  ):字符串
  // 其他：Number类型、Boolean类型、null（值）、undefined（值undefined）

  // Number类型

  // var a = NaN;
  // var a_res = String(a);
  // var a_type = typeof a_res;
  // console.log(a_res, a_type);

  // var b = false;
  // var b_res = String(b);
  // var b_type = typeof b_res;
  // console.log(b_res, b_type);


  // String(  )背后就是把 数据 两边 加 单双引号
  // true -----> "true"
  // undefined  ------>"undefined"



  // var c = 123;
  // .toString  转为字符串
  // 记住：undefined和null不能使用这个方式变成字符串；
  var c;
  var c_res = c.toString();
  console.log(c, c_res);

14-js-转化-转Boolean

• 结果：返回一个Boolean值；

  //  转 Boolean 结果：存在 不存在(不确定)false 返回就是一个布尔值；

  // 1.string 
  // var a = "abc";
  // var res = Boolean(a);
  // console.log(a, res);


  // 2. Number
  // var a = 10;
  // var res = Boolean(a);
  // console.log(a, res);


  // var a = 0;
  // var res = Boolean(a);
  // console.log(a, res);


  // var a = NaN;
  // var res = Boolean(a);
  // console.log(a, res);


  // 3.null
  // var a = null;
  // var res = Boolean(a);
  // console.log(a, res);


  // 4.
  // var a;
  // var res = Boolean(a);
  // console.log(a, res);

• 转化为false的几种情况:前三种情况记住；

var res1 = Boolean(0);
console.log(res1); //输出false

var res3 = Boolean(NaN);
console.log(res3); //输出false


var res2 = Boolean('');// 空字符，里面啥没有，空格也没有；
console.log(res2); //输出false









var res6 = Boolean(false);
console.log(res6); //输出false


var res5 = Boolean(null);
console.log(res5); //输出false

var res4 = Boolean(undefined); 
console.log(res4); //输出false

00-反馈及复习

• 记住学习的知识能实现什么功能

• 怎么用？需要传入什么？返回什么。

• 复习：

  • JS：页面交互；

  • 输入输出：

    • prompt（）
    • alert();
    • console.log(); 调试用；

  • 变量：var 变量名

    • 公司业务：英文；
    • 格式：驼峰命名 （习惯）
    • 作用：存数据；

  • 数据类型：简单数据类型

    • String：字符串
    • Number：数字 NaN（不是某个数，泛指）
    • Boolean：true（成立、确定、存在） 、false；
    • null值：复杂数据类型；
    • Undefined类型、值；var a;

  • 工资：

    • 老板输入的1000是个字符串，遇见+，把+左右临近数据转化为String类型，形成字符串拼接；
    • 把1000字符串转换为Number类型

  • 转化：

    • 转Number类型：

      • Number(“10abc”);------>NaN

      • Number(true);------>1

      • parseInt(“10o”);------->10

      • parseInt(true);------->NaN

      • parseFloat(“10.11o”);------>10.11

    • 转String类型

      • String(数据)----->“数据”
      • 数据.toSting();---->null 、undefined 不能用这个方法

    • 转Boolean类型：

      • Boolean（数据）
      • 转false：
        • 0
        • NaN
        • “”：空字符串，不是空格字符串；
        • false
        • null
        • undefined;

01-js-操作符-算术操作符-01

• 语法：常规需要Number类型
• 重点：字符串遇见+；

  // + - * / %

  // 取余数：判断一个数是否是偶数
  // var a = 10 % 3;
  // console.log(a);


  // 常规：Number类型参与运算
  // 非常规：Sting遇见+ 把+ 左右临近数据转化为String类型，形成字符串拼接；
  // var a = "10" + 9;
  // console.log(a);



  // 非常规：Sting遇见非+ ，把String类型隐式转化为Number类型，形成字符串拼接；
  // 隐式转化：JS背后做的转化；
  var a = "我" - 9;
  console.log(a);

02-js-操作符-算术操作符-02

// ++  --：在自己的基础上进行自增1，或自减1；
  var a = 10;
  // 语法：
  // a++;
  // ++a;
  // console.log(a);


  // 优先级：++ 优先于 +
  // var b = a++ + 10;

  // 
  // 执行过程（规则）：代码从左往右执行，遇见a有++，看++写a后面，第一个位置上需要个数据参加运算(a计算前的数据)10+10
  // 经过a++后，此时a变为11；
  // console.log(b, a);


  // 
  // var b = ++a + 10;
  // 执行过程（ 规则）： 代码从左往右执行， 遇见a有++，看++写a前面， 第一个位置上需要个数据参加运算(a计算后的数据)11  + 10
  // console.log(b, a);


  // 工作不用：
  var b = a++ + ++a;
  // 执行过程：代码从左往右执行，遇见a++,提供10参与整个运算，经过了a++(此时a：11)，遇见++a,提供为12参与整个运算；
  //
  console.log(b, a);

03-js-操作符-比较运算符

• 常规操作：左右需要Number类型；

  // 比较运算符：> < >= <=

  // 比较运算符：常规左右两边是Number类型，返回值是Boolean类型（true/false）；

  // console.log(5 < 6);

  // 有一个条件成立就可以；
  // console.log(4 >= 5);


  // 非常规：
  // 1.非Number类型和Number比较，把非Number类型隐式转化为Number类型；
  // 
  // console.log("10" > 9);
  // console.log(10 > 9);
  // console.log("我" > 9);


  // 2.字符串 与 字符串比较，比的是ACSII 码值；
  // console.log("我" > "你");


  // -----------------------------------------------------
  // ==：返回true或false;
  //  1.如果两边类型相同，比值的大小；
  // console.log(1 == 1);
  // console.log(NaN == NaN);
  // console.log("abc" == "abc");
  //  2.如果类型不同的话，需要把非Number类型隐式转化为Number类型
  console.log("10" == 10);

  // ===: 如果两边类型不同，不比了，直接返回false;
  console.log("10" === 10);

• 重点: == ===

04-js-操作符-逻辑运算符

• 语法：

   // && 且 ：全部满足；如果有一个条件不满足，直接返回不满足的结果;

  // 返回值：最后成立的那个结果；
  // console.log(true && true);

  // 比较过程：会把每个位置上的数据，隐式转化为Boolean类型，只是参与比较，不进行返回；如果中间出现了一个false，把隐式转化为false的结果要返回；
  // console.log(1 && 2);
  // console.log(true && true);

  // console.log(1 && 2 && 0 && 1);


  // 已经设置好的 admin  123456
  // 
  // var username = prompt("用户名：");
  // var password = prompt("密码：");

  // 优先级：== 优先于 &&
  // console.log(username == "admin" && password == "123456");
  // console.log(true && true);



  // --------------------------------------------
  // || ：或；只要有一个满足就可以了；
  // 只要年龄小5岁 或者 身高小于120cm 就可以免费乘坐

  // var age = prompt("年龄");
  // var h = prompt("身高(cm)");
  // // 优先级：< 优先于 ||
  // console.log(age < 5 || h < 120);


  // 
  var a = true;
  // !:取反，看数据是不是Boolean值，若不是，隐式转化为Boolean；
  console.log(!a);

05-js-操作符-赋值运算符

• 语法：

// = 的作用就是把右边的结果赋值(存储)给左边的变量之类的容器
var a = 10;

// 相当于是 a = a + 2; 就是一个简写的语法
// -=   *=   /=   %= 除了运算规则不同，作用是一样的，都是简写
a += 2; 
console.log(a); // 输出12

// 非常规
var a = 'cc';
a +=2;

06-js-操作符-优先级

  // 1. 第一优先级：()
  // 2. 第二优先级：++ -- !
  // 3. 第三优先级： * /  %
  // 4. 第四优先级： + -
  // 5. 第五优先级： > >= < <=
  // 6. 第六优先级： == != === !==
  //  7. 第七优先级： &&
  //   8. 第八优先级： ||
  //   9. 第九优先级： = += -= *= /= %=  
  var a = 200 === (10 + 10) * 10 > 1;

07-流程控制-三个名词-了解

• 表达式：有返回结果；在浏览器后台可以直接敲表达式，回车返回的就是该表达式的结果；
• 语句：有思考在里面的表达式；思考主要是告诉浏览器要做什么事情；需要用 ** ; ** 隔开
• 结构：
  • 分支：不同的情况，走不同的分支；
  • 循环结构：要求一个流程要有重复的思想在里面；

08-分支结构-if-else

• 语法：不同的情况，走不同的分支；只要进入其中一个分支，其他分支都不会执行；
• 多个分支：只执行一个，或者一个都不执行；

  // 多个分支；
  // 第一个分支:
  if (a == "他") {
    console.log("这是个男的");
  }
  // 第二个分支的表达式
  else if (a == "她") {
    console.log("这是个女的");
  }
  // 表达式返回false,另外一种情况
  else {
    console.log("你这个不男不女的家伙");
  }

09-分支结构-案例-求最大值

• 业务需求：用户可以输入两次数，返给我这两个数的最大值；

• 分析：

  • 1.让用户可以输入两次，设置变量进行接受
  • 2.数据类型转换；prompt接受到数据类型是string类型；
  • 3.分支结构；

    // 1.用户可以输入两次数
    var a = prompt("第一个数：");
    var b = prompt("第二个数：");
  
    // 转化
    a = a * 1;
    b = b * 1;
  
  
    // 2.比较后（几种情况--->分支），弹窗
    if (a > b) {
      alert("最大值是" + a);
    }
    // 
    else if (a == b) {
      alert("一样大" + a);
    }
    // a<b
    else {
      alert("最大值是" + b);
    }
  

  ​

  ​

09-分支结构-案例-求最大值-01-补充

00-反馈

• ① 自增的a++与++a没有听懂啊！！晕了！ ② 希望同学们上课放手机的时候都可以把手机调静音、闹钟关掉。

• 循环学完了不知道怎么活用

• var a=1; var b=a++ + ++a + ++a + a++ + ++a + ++a + ++a + a++; console.log(b); 问B是多少，麻烦老师详细的说一下解题思路

  // var a = 10;
  // var b = a++ + ++a;

  // 执行过程：从左往右，每个位置上需要数据
  // ++写在后面：把数据推到位置上，后计算a++;
  // ++写在前面：先计算++a，把计算的数据推到位置上；

• +字符串

• < == ===

• && || |

• 优先级：

01-循环结构-for

  // for 循环 换了语法
  // 先执行初始化表达式（只执行一次）
  // 再执行 条件表达式 
  // 执行循环体；
  // 数据++；

  // for (初始化表达式; 条件表达式; 自增表达式) {
  //   //循环体
  // }


  for (var a = 1; a <= 3; a++) {
    console.log(a);
  }


  // 初始化表达式:只执行一次；
  // var a = 1;
  // // 条件表达式  a <= 10 
  // while (a <= 10) {
  //   console.log(a);
  //   // 自增表达式
  //   a++;
  // }

02-循环结构-案例-求偶数和

• 需求：求1-100之间所有偶数的和；
• 分析：
  • 1-100之间所有数，过一次，循环for;
  • 条件找偶数：a%2 == 0 分支；
  • 进入分支：数绝对是偶数，求和；（把每个数加在某变量上面）；

  // 需求：求1-10之间所有偶数的和；
  // 分析：
  // 1.先看见1-10
  var sum = 0;
  for (var i = 1; i <= 4; i++) {
    // 点击
    // 2.看下当前每个数据是否为偶数
    // console.log(i);
    if (i % 2 == 0) {
      // console.log(i);
      sum += i;
    }

  }

03-循环结构-案例-打印正方形

  // 重复思想：循环for !!!
  // 思路：打印10行；
  // for (var i = 1; i <= 10; i++) {
  //   // 打印一行
  //   document.write("oooooooooo");
  //   // 换行
  //   document.write("</br>");
  // }


  // 
  // 打印一行
  // document.write("oooooooooo");
  // 打10次
  // for (var j = 1; j <= 10; j++) {
  //   document.write("o");
  // }


  for (var i = 1; i <= 10; i++) {
    // 打印一行
    // document.write("oooooooooo");
    for (var j = 1; j <= 10; j++) {
      document.write("o");
    }

    // 换行
    document.write("</br>");
  }


  // 外面的for循环执行一次：里面的for全部执行完成+br ;
  // 外面的for : 控制 第几行 打；
  // 里面的for：每一行的打10个；

03-循环结构-案例-打印金字塔

  // 两个for循环
  // 外面for循环：控制在第几行 打
  // 里面for循环: 每行打几个；
  // 规律：
  // 第一行 ：打1个；
  // 第二行 ：打2个；
  // 第十行 ：打10个；
  // 第i行 ：打i个；

  // --------------------------金字塔
  // 规律：
  // 打第一行，打1个；
  // 打第i行，打i个；
  for (var i = 1; i <= 10; i++) {

    // 打印一行：不是自己控制，由外面行数 i 
    for (var j = 1; j <= i; j++) {
      document.write("o");
    }

    // 换行
    document.write("</br>");

  }

04-循环结构-do-while循环及小结

  // 至少执行一次；了解
  do {
    alert(1)
  } while (false);

• while、do-while 循环不易看出循环的次数，一般用于未知次数的循环
• for循环明显看出循环的次数，一般用于已知次数的循环；使用最多是for；
• while、for循环可能一次循环都不会执行
• do-while 循环至少执行一次；不常用；

05-循环结构-break和continue

• 语法：也同样适用while 和 do while循环；

  // 电梯一共有6层， 现在我们要上电梯， 我们的教室在3楼， 电梯只要到3楼就可以了


  // for (var i = 1; i <= 6; i++) {

  //   console.log(i);
  //   // 如果电梯到了第3层
  //   if (i == 3) {
  //     // 终止循环；下面的代码就不执行；
  //     break;
  //   }

  // }



  // 电梯一共有6层，除了3楼没人下去，其他楼层都有人下去(3楼不停，其他楼层都要停)   除了3不打印，其他都打印；

  for (var i = 1; i <= 6; i++) {


    if (i == 3) {
      // 把本次 循环，本次下面的代码都不执行了；跳过该次，后面继续执行；
      continue;
    }
    console.log(i);
  }

06-数组-介绍-声明-储值

• 数据类型：数组
• 数组：放入大量的数据（类型不限制）
• 特点：
  • 顺序：方便放入，方便拿出来
  • 长度：用于标示放了多少个数据

  // 数组：里面可以放很多数据，这些数据有先后顺序，有长度；
  // 声明一个数组
  // 先后顺序：方便放入，方便拿出来；
  // 长度：用于标示放了多少个数据；


  var arr = [];
  // console.log(arr, typeof arr);

  // 储值：
  // 在位置上存数据：下标 索引 从0开始；
  arr[0] = 91;
  arr[1] = 88;
  arr[2] = 72;
  arr[3] = 45;
  arr[4] = 63;


  // arr[0]  可以理解为变量，来自数组，往数组上第一个位置上存数据
  // 再次赋值
  arr[0] = "abc";

  console.log(arr);



  // 如果一开始知道数组的成员；
  var arr_1 = [10, 10, "abc", null, true];
  arr_1[0] = 20;
  console.log(arr_1);

07-数组-取值-遍历-长度

• 语法：

  // 1.取值：arr[index]
  // 储存：arr[index] = 1;


  // 
  var arr = [10, 20, 30, 40];

  // 取出来值；
  // console.log(arr[0]);
  // console.log(arr[1]);
  // console.log(arr[2]);
  // console.log(arr[3]);



  // 2.发现：重复、有规律的变化; 0-3
  // 遍历：循环的是下标 索引（位置）
  // for (var i = 0; i <= 3; i++) {
  //   // const element = array[i];
  //   console.log(i, arr[i]);
  // }




  // 3.数组的长度；
  // arr.length
  // console.log(arr.length);
  // 最大下标=arr.length-1;
  for (var i = 0; i < arr.length; i++) {
    // const element = array[i];
    console.log(i, arr[i]);
  }

• 最大索引比数组长度少 1 ；i < arr.length;

• 取值：通过下标（索引）

• 遍历数组：遍历的是谁？下标。有规律变化；

08-案例-数组元素的均值

• 求平均成绩：
  • 总和 / 总人数

  // 需求：求数组中所有数字的总和的平均值
  // 平均成绩= 总成绩 / 总人数；


  // 总成绩：
  var arr = [80, 90, 80];

  // arr[0] + arr[1] + arr[2]
  
  // 思路：
  // 1.循环遍历求和（遇到数组，就遍历）
  // 2.总和 / 总数；  

  var sum = 0;
  // 遍历：数组的下标 索引
  for (var i = 0; i < arr.length; i++) {
    // console.log(arr[i]);
    sum += arr[i];
  }
  // 
  // console.log(sum);
  // 
  var junzhi = sum / arr.length;
  console.log(junzhi);

09-案例-数组元素的最大值

• 需求：90个同学的身高都录入数据，存在数组里；找咱们班最高的人；
• 步骤：
  • 1.随机选取一个数组中值为假设的最大值；
  • 2.数组中每一个值都要和这个假设的最大值进行比较;

  // 需求：90个同学的身高都录入数据，存在数组里；找咱们班最高的人；

  // 常规：
  // 1.随机假设一个数据是最大值；
  // 2.每个数据都和假设的进行比较，如果比假设的大，当前这个数据就是最大值；

  var arr = [47, 85, 95, 56, 99, 45, 85];

  // 
  var max = arr[6];

  // 一个一个比：
  for (var i = 0; i < arr.length; i++) {

    // 
    if (arr[i] > max) {
      max = arr[i];
    }

  }
  console.log(max);

10-数组-构造函数

  // 1.构造函数：
  // 
  // var arr_1 = [];
  // var arr = new Array();

  // console.log(arr);

  // arr[0] = 1;
  // arr[1] = "abc";
  // arr[2] = null;

  // console.log(arr.length);



  // 2.清除数组
  // var arr = [1, 2, 3];
  // arr.length = 0;
  // console.log(arr);



  // 3.注意：
  var arr_1 = [2];
  console.log(arr_1);
  // 构造函数方式创建数组，会把数据作为数组的长度
  var arr_2 = new Array(2);
  console.log(arr_2);

11-小娜v1-介绍-循环与退出

• 步骤：

  • 1.无限循环，

    • 死循环
    • 里面放入弹窗 prompt 换行 \n;

  • 2.循环体里面：

    • 拿到用户输入的信息；
    • 判断用户输入的是什么信息，执行不同的功能（分支结构）
    • 分支q：退出无限循环 break;(for while do-while 都适用)

  // 1.啥也不输入，或者输入的不是下面功能；无限弹窗；
  // 
  while (true) {
    var info = prompt("我是小娜，输入下面功能：\n 1:计算总和； \n 2:系统时间 \n 3:讲个笑话 \n q: 退出聊天");
    // 判断用户输入什么信息，走什么不同的路；分支；
    // 输入q  退出弹窗；退出循环；
    if (info == "q") {
      alert("你已经不爱小娜了吗？");
      // 终结 循环；
      break;
    }
    // 
    else if (info == "1") {
		
    }
    // 
    else if (info == "2") {

    }
    // 
    else if (info == "3") {

    }
    // 输入的不是 1 2 3 q 情况
    else {
      alert("对不起，你输入的我听不懂");
    }
  }

12-小娜v1-求和

00-反馈

• 知道怎么去数组中的最大值与最小值，如果想去出最大值以外第二个大的值怎么求？
• 最后讲split时，有点模糊
• 案例小娜的求和不太懂
• 对数组长度应用还是不太了解

  // 方法：
  //   功能：能帮助我做什么事情？
  //   记忆：传入是什么。返回什么；


  var str = "1-1-1";
  // 功能：分隔字符串为数组；
  // 传入：字符串（分隔符，上下对应）
  // 返回：数组（每个成员是字符串）
  var arr = str.split("-");

  // 3个成员：0 1 2；
  // console.log(arr);

  var sum = 0;
  // 求和：数组求和，让每个成员都加到同一个变量上面；
  for (var i = 0; i < arr.length; i++) {
    // 拿到数组的下标，就拿到数组成员；
    // console.log(arr[i]);

    // 转化数据类型
    // arr[i]
    arr[i] = arr[i] * 1;

    sum += arr[i];
  }

  // 上面的循环，如果全部执行完成后，此时i==arr.length


  alert(sum);

00-作业1-乘法表

  // 金字塔
  // 外循环：控制行数
  // 内循环：控制每行输出什么东西；

  // 控制行数`
  for (var i = 1; i <= 9; i++) {

    // 控制一行的输出
    for (var j = 1; j <= i; j++) {
      document.write(j + "*" + i + "=" + i * j + "&nbsp;&nbsp;");
    }

    document.write("</br>")

  }


  // 第几个 * 第几行 = 真实计算的结果
  // 2 * 3=6
  // 3 * 3=9
  // j+"*"+i+"="+i*j

00-作业2-质数

• 2-100: 质数：只能被1和自己整除进去；
• 76 / （2~75）不是质数；

  // 需求：打印1-100所有 质数
  // 质数：只能被1 和 自己 整除的数；


  // 验证7是否为质数；
  // 7/2  7/3  7/4  7/5  7/6  取余，看余数是否为0；如果余数为0，意味整除进去，7不是质数；
  // 分母上的数，递增，有规律变量；
  // for (var j = 2; j < 7; j++) {
  //   if (7 % j == 0) {
  //     break;
  //   }
  // }


  // // 如果上面的for循环中途断了，意味着分母有一个被整除进去，意味循环没有执行完成，j:必定不是7
  // // 如果上面的for循环没有中断，意味着分母这些数没有一个被整除进去，意味循环执行完成，j:7
  // if (j == 7) {
  //   console.log(7);
  // }




  // 外循环：控制验证 分子 2-100 每个数；
  // 内循环：分子 % 输出每个分母  
  // 分子：7  分母：2~6
  // 分子：8  分母：2~7
  // 分子：i  分母：2~i-1
  // 


  // 每个验证的分子：
  // for (var i = 2; i <= 100; i++) {

  //   // 提供每个分母
  //   for (var j = 2; j < i; j++) {
  //     if (i % j == 0) {
  //       break;
  //     }
  //   }

  //   // 看上面的for 循环是否中断：
  //   // 若中断：有一个分母被整除进去，意味为i不是质数；
  //   // 若全部执行完成：没有中断，没有分母被整除进去。意味为i是质数；
  //   if (j == i) {
  //     console.log(i);
  //   }

  // }




  // 开关方法：
  var flag;
  for (var i = 2; i <= 100; i++) {
    // 1.先假设 提供的每个分子 都是质数；
    flag = "是质数";


    // 2.验证：
    // 提供每个分母
    for (var j = 2; j < i; j++) {
      if (i % j == 0) {
        // 验证结果
        flag = "不是质数";
        break;
      }
    }


    // 3.看flag
    if (flag == "是质数") {
      console.log(i);
    }
  }

01-小娜v1-系统时间

// 创建Date对象
var date = new Date();
console.log(data); // 系统时间不同，输出的结果也会不同，但是都是输出当前系统的时间

// 获取时间对象的各个部分，对象.方法();

// 获取年份
var year = date.getFullYear();
console.log(year);

// 获取月份 ， 得到的月份是从0开始的 ，使用 0-11 表示 1-12 月
var month = date.getMonth();
console.log(month);

// 获取天 have a date;
var day = date.getDate();

date.getDay();
console.log(day);

// 获取小时
var hour = date.getHours();
console.log(hour);

// 获取分钟
var minute = date.getMinutes();
console.log(minute);

// 获取秒数
var second = date.getSeconds();
console.log(second);

• es6 模板字符串

// es6: 模板字符串  ``  ${变量名}
alert(`${year}-${month}-${riqi} ${hour}:${Minute}:${Second}`);

02-小娜v1-随机笑话

  // 如何获取一个随机笑话
  // 内置一组的笑话：数组
  var arr = [
    "笑话1~~哈哈哈~~~~~~~~",
    "笑话2~~哈哈哈~~~~~~~~",
    "笑话3~~哈哈哈~~~~~~~~",
    "笑话4~~哈哈哈~~~~~~~~",
    "笑话5~~哈哈哈~~~~~~~~",
    "笑话6~~哈哈哈~~~~~~~~",
  ];


  // 随机的讲一个笑话：随机获取数组的一个下标；
  // 0 1 2 3 4 随机 任意给我一个就行了；


  // 如何获取随机数
  // var date = new Date();
  // Math：内置好的一个对象
  // random：返回一个 [0,1) 小数  表现形式  0~1 随机小数；
  var a = Math.random();
  // console.log(a);


  // 0-5随机小数
  // 原来是 0~1 放大了5倍 0-5
  a = a * arr.length;
  // console.log(a);


  // 向下取整
  // var b = Math.floor(1.999999999999);
  // console.log(b);
  a = Math.floor(a);

03-函数-介绍-语法-调用

• 函数：方法；
• 特点：随时随地；可以在你想调用方法地方执行核心（封装好）代码；
• 前面学习过好多方法，那是系统内置好的，现在是我们自己创建方法；
• 把重复的功能封装起来；

function 函数名() {
// 要封装的代码，函数体
}

// 调用
函数名();

• 注意：函数名不要重名（变量名一样）；

04-函数-参数-配置

• 如何配置参数：
• 1.先根据业务需求，把你需要变化的数据，替换为变量(函数内部的变量，声明函数的时候，内部变量声明) 注意变量名命名、变量与数据直接拼接；
• 2.把你替换后的变量名放在 函数后面的（）里；

  // 形参：形式上参与运算的参数；
  function tellStory(a, b) {
    // 要封装的代码，函数体
    console.log("山上有庙");
    console.log("庙里有人");
    console.log(a + "对" + b + "说：");
  }
  
  // 调用有传入参数的函数
  // 实际参与运算参数：实参；
  tellStory("熊大", "熊B");

  // 函数不是那么死了，有参数可配置，
  tellStory("大猫", "二毛");

05-函数-参数-不赋值

• 语法

  // 声明函数，创建方法
  function tellStory(a, b) {
    // 优化:如果参数不传入；外面自己设计默认值；
    // if (a == undefined) {
    //   a = "熊大";
    // }

    // if (b == undefined) {
    //   b = "熊2";
    // }


    // 优化：三元表达式；
    a = a == undefined ? "熊大" : a;
    b = b == undefined ? "熊2" : b;





    // a,b 函数内部声明的变量
    // 重复的功能放入
    console.log("从前有座山，山里有座庙");
    console.log("庙里有个" + a + "," + b);
    console.log("讲的是什么呢？");
    console.log(a + "对" + b + "说：");
  }

  // 设置参数，实际没有给你传入，系统默认会设置为undefined
  tellStory();
  tellStory(true, 5);

06-函数-参数-形参与实参

00-反馈

• function xitongdate(a) { var a = new Date; var year = a.getFullYear(); alert(year); } xitongdate(shijian);

• Date对象的3个方法不清楚呢 var date = new Date(); 还有函数形参与实参互不影响还有点模糊

• ​

• 函数：方法

• 方法：功能;记忆：传入什么，返回什么；

• 特点：充当设计者，设计自己函数，方便使用；

• 形参与实参相互不影响：实参把数据复制了一份给形参；

• 形参不传入实参：默认值系统会给undefined，自己设计默认值；

01-函数-返回值

• 语法：
  • 不设置返回的返回值，默认返回undefined；
  • return 返回值；返回出去；
  • 特点：return 后面代码不再执行，意味着遇见return终止函数执行；

// 方法：传入 返回’
  // 
  // 形参是否设置？看外面的数据是否要经入内部计算；
  // 形参：不赋值，系统给默认值 undefined；
  function number_cc(a) {
    a = a + 10;
    return a;


    console.log(1);

  }

  // 返回值：undefined 系统给默认设置；
  // 语法：return 后面可以跟着一个数据或者变量；
  var res = number_cc(10);
  console.log(res);


  // 特点：return 可以不用跟返回值，返回还是默认undefined；return 下面的代码不再执行；

• 是否设置形参？看外面数据是否要进入内部参加运算；
• 是否设置返回值？看函数内部的计算数据，外面需不要这个数据；

02-函数-案例-求n-m和

• 需求：通过函数，把n-m之间所有的数的和，返回给我；
• 步骤：
  • 1.实际过程实现出来
  • 2.封装函数：
    • 是否设置形参？看外面数据是否要进入内部参加运算；
    • 是否设置返回值？看函数内部的计算数据，外面需不要这个数据

  // 需求：求n-m 数字的和；

  // 实际开发步骤：
  // 1.把实际过程实现。1-10
  // 2.封装函数：
  //  2.1 是否设置形参？看外面的数据是否要进过函数内部的加工；
  //  2.2 是否设置返回值？看外面是否需要我函数内部加工后的结果


  // 1.把实际过程实现
  // var sum = 0;
  // for (var i = 1; i <= 10; i++) {
  //   sum += i;
  // }
  // alert(sum);



  // 2.封装函数，设置形参后，在小括号写入；
  function getSum(n, m) {
    var sum = 0;
    for (var i = n; i <= m; i++) {
      sum += i;
    }

    return sum;
  }


  // 类似Number方法；
  var res = getSum(1, 2);
  console.log(res);

• 练习：函数，返回一个数组中最大值；

  function getArrMax(arr) {
    // var arr = [10, 58, 99, 78, 56];
    var max = arr[0];
    for (var i = 0; i < arr.length; i++) {
      if (arr[i] > max) {
        max = arr[i];
      }
    }
    // console.log(max);
    return max;
  }


  var arr = [10, 58, 99, 78, 56];
  var res = getArrMax(arr);
  console.log(res);

03-函数-参数-arguments

• 解决：参数数量不确定的时候，使用arguments
• 使用：
  • 函数内部的变量，内置。不需要我们声明；不需要放入小括号；
  • 只能内部使用，外面不能使用；

// 求两个数的和；
  // function fn(a, b) {
  //   return a + b;
  // }


  // 求三个；
  // function fn(a, b, c) {
  //   return a + b + c;
  // }


  // 问题：参数的数量不确定怎么办?
  // 知识：arguments
  //   函数内部的变量，内置的，不需要我们声明；
  //   只能在函数内部使用；
  //   可以接收到实参传入的数据，不需要写在小括号内；

  function fn() {
    // 伪数组：有下标、有长度；可循环；
    console.log(arguments);
    // 
    var sum = 0;
    for (var i = 0; i < arguments.length; i++) {
      sum += arguments[i];
    }
    return sum;
  }

  fn(1, 2, 3, 4, 5, 6);

  // 解决：当参数的数量不确定的时候，使用arguments；

04-函数-函数表达式-匿名函数

//  匿名函数：没有名字函数，JS不允许单独存在，需配合其他语法；

  // 函数表达式：
  // var fn = function() {
  //   console.log(1);
  // }
  // fn();


  // 自调用函数:自执行函数,在JS执行时候,函数自己就执行了;
  (function() {
    console.log("撒大声地");
  })();

05-函数-函数类型-回调函数

 // 
  // function fn() {}
  // var fn = function() {}


  // 函数类型: function
  // console.log(typeof fn);
  // console.log(typeof fn());

  // 
  function fn(a, b) {
    console.log(a);
    b();
  }
  // 实参可以传入任何数据类型：传入函数；

  // 如果：传入参数有函数，这个函数就叫回调函数；
  // var demo = function() {};
  // fn(1, demo);

  // ajax：
  fn(1, function() {
    // 
    console.log(2);
  });

06-js-作用域

 // 全局作用域: 在script双标签内部声明的 范围；script标签
  // 全局变量：在全局作用域下声明的变量和函数  function fn(){}
  //     特点：可以在任何地方访问全局变量；

  // 局部作用域：在函数内部范围；
  // 局部变量：在函数内部声明的变量；（形参、var sum）,只能在局部作用域访问；外面拿不到；


  // var a = 1;
  // function fn() {
  //   console.log(a);
  // }
  // fn();



  function fn(b) {
    var a = 1;
  }

  console.log(a, b);

• 全局作用域: 在script双标签内部声明的 范围；script标签
• 全局变量：全局作用域声明的变量，可以在任何地方访问；
• 局部作用域：函数内部；
• 局部变量：在函数内部声明的变量；只能在函数内部访问；

07-js-预解析-01

• 预解析（规则）：把var a; function fn(){} 声明的函数和变量，提升到当前作用域最顶端；
• 作用域：
  • 全局：script标签内部范围；
  • 局部：函数内部；
• 基础面试题：

 var a = 10;
 fn();
 console.log(a);

 function fn() {
    console.log(a);
    var a = 20;
 }



// 模拟预解析执行后结果：
// -----------------------------最顶端开始
  var a;

  function fn() {
    var a;
    console.log(a);
    a = 20;
  }


  // -----------------------------最顶端结束


  a = 10; // 全局变量a 赋值为10；
  fn(); // 进入函数内部，预解析：只要进入一个新的作用域，预解析；再执行，输出undefined；给  局部变量的a 赋值为20
  console.log(a); // 全局a --->10

07-js-预解析-02

• 变形：

 var a = 10;
  fn();
  console.log(a);

  function fn() {
    console.log(a);
    a = 20;
  }

• 预解析：

// 模拟预解析执行后结果：
  // -----------------------------最顶端开始
  var a;

  function fn() {
    console.log(a); // 看局部有没有声明a,局部没有，有可能是全局a;    a:10
    a = 20; // 全局a:20;
  }


  // -----------------------------最顶端结束
  a = 10; // 全局 a:10
  fn(); // 进入局部作用域，预解析，
  console.log(a); // 全局a:20

08-小娜v2-函数封装

00-反馈

• 封装步骤：

  // 函数封装：

  // 1.实际过程实现；

  // 2.函数封装：

  // 2.1 是否需要设置形参？看外面的数据是否要进入内部 运算；

  // 2.2 是否需要设置返回值？看外面是否需要我加工后的数据；

  // 外面和里面:全局和局部;

• 回调函数：把一个函数作为参数传入另外一个哈数内部，这个被传入的函数叫回调函数

• 作用域：

  // 作用域：生效范围；
  // 分几个：全局、局部（函数内部）；
  // 预解析：把声明的var a;function fn(){} 提升到 当前 作用域最顶端；

• 为什么有些对象获取时需要new一下，有的不需要？如果说因为Math是内置的对象，那Date什么的不也是js的内置的对象吗？
  • new Date() ：构造函数的方式，jS高级如何自己创建自己的构造函数’；
  • Math

01-对象-介绍及声明

• 对象：把方法集合管理；
• 怎么学习新对象？关注对象上有什么方法，能帮助我做什么事，完成什么效果就可以；
• 语法：

// 字面量
var obj = {};

// 构造函数 （高级）
var obj_1 = new Object();

02-对象-添加属性及方法

// 对象：属性和方法的集合体；
  // Math 
  // 设计者：对象；

  // 添加属性和方法；
  var obj = {};

  // 1.对象.属性名 = 属性值；
  obj.a = 1;
  obj.name = "zhangs";

  // 添加方法：
  obj.fn = function() {
    console.log(1);
  };
  console.log(obj);



  // 2.如果你一开始都知道有哪些属性和方法，可以在初始化的时候写入；
  var obj_1 = {
    name: 1,
    b: "zhangs",
    fn: function() {
      console.log(1);
    },
  };


  // 3.键值对
  // 对：name: 1,
  // 键：属性名、方法名；
  // 值：属性值、匿名函数；
  var obj_2 = {};
  obj_2["name"] = "zhangs";
  obj_2["age"] = 12;
  obj_2["fn"] = function() {};



  // console.log(obj_2);


  // 数组：数据的集合；
  // 对象：属性和方法的集合；

  // obj.key = "a";
  // obj["key"] = "a";
  // key is not defiend;
  var key = "a";
  obj[key] = "asdasdasdasd";

• 变量：存数据；

• 数据类型：不同类型有不同意义；

• 数组：

  • 大量数据管理，数据集合体；
  • 循环遍历：for;

• 函数：把一段代码封装了，可以随时随地；

• 对象：

  • 属性和方法的集合体；
  • 循环遍历 for in;

03-对象-获取及遍历属性

• 获取：两种形式

  // 获取属性和方法；
  var obj = {
    a: 1,
    b: 2,
    fn: function() {
      console.log("-----------------");
    }
  };

  // 1.点方式；
  // console.log(obj.a);
  // console.log(obj.fn);
  // obj.fn();


// 2.键值对；
  // console.log(obj["a"]);
  // obj[fn]();


  // 对象遍历 for in
  // var key: 语法 单独声明的一个变量；作用：把每一次的循环的键值对中的键（名字）给了key;
  // for (var key in obj) {
  //   // key = "a";

  //   console.log(key, obj[key]);
  // }

  // 如果获取一个对象不存在的名字，返回默认的undefined；

04-实战案例v3-对象化

• 步骤：

  • 目标：创建对象（方法的集合体）；
  • 方法：
    • 实际过程实现
    • 函数封装（是否配置参数？是否设置返回值？）
  • 创建对象：把函数作为对象上方法；obj.fn = function(){}
  • 使用对象上的方法：obj.fn();

05-对象-拓展Math的n-m的随机整数

• 注意：按照步骤实现

 // 拓展一个功能’
  // 需求：/给Math对象添加一个可以求指定范围 n,m 随机整数数的功能（方法）
  // 方法： 60-70 随机整数；
  // 思路： 0- 10

  function getRandom(n, m) {
    // 0-1小数
    var a = Math.random();

    // 0-11范围；
    a = a * (m - n + 1);
    // 0-10;
    a = Math.floor(a);
    // 
    a = a + n;

    return a;
  }
  //

  Math.getRandom = function(n, m) {
    // 0-1小数
    var a = Math.random();

    // 0-11范围；
    a = a * (m - n + 1);
    // 0-10;
    a = Math.floor(a);
    // 
    a = a + n;

    return a;
  };

  // 测试：
  // Math["getRandom"]();
  var res = Math.getRandom(10, 30);
  alert(res);

06-实战案例-拓展-添加笑话功能

• 步骤：

  • 封装为函数：

• 把函数作为Na的方法进行设置：

  // 作业：
  // 输入4:
  // 1.新的弹窗，引导用户输入笑话组；（接受，转化，添加）
  // 2.填入旧的笑话里；
  // 测试3，可以发现已经你自己添加的笑话；