2022-7-11 第三小组- (≧∇≦)(≧∇≦)(≧∇≦) 学习笔记

1.JavaScript（JS）

脚本语言：需要运行或依赖于某种容器来运行。（浏览器来解释执行）

• 编程语言的分类

  1. 解释型：JavaScript,python

  2. 编译型：C++，C#

  3. 半解释半编译：Java

JavaScript是运行在浏览器上的，帮助我们控制页面。

JavaScript解释器：每个浏览器都不一样

1.1 JS引入标签形式：

script放在</body>上边
​
<script src="../JS/js1.js"></script>

属性：链接	src	href	url
	img script	a	css

1.2 JS的数据类型

• 数字（number）——整数，小数，负数等。

• 字符串（String）—— a，中文，特殊符号等。

• 布尔型（Boolean）——用来进行判断的 true（真/1）和false（假/0）

• 空（null）——相当于声明了值为空

• 未定义（undefined）——没有值

1.3 定义(声明)变量

开发中尽量减少写字面量，后期维护困难的问题。

 <script>
        //变量
        // number类型——字面量
        var a=2;
        // 字符串类型
        // 加引号（单双都行）能把变量变成字面量
        var v1="你好";
        // 布尔类型——字面量
        var v2=true;
        //  空——字面量
        var v3=null;
        //  未定义（undefined）——字面量
        var v4;
        alert(v4);
        //字面量
        // alert(1);
    </script>

• 在ES6（JS的新版本）中，新推出了两个词代替var

  • let——变量用let声明是无法重复定义的

  • const——有let的特点，const声明的变量就是一个常量

1.4 JS的复杂数据类型

1.4.1 数组：一个变量对应多个值

• 使用数组函数

  <script>
          // 1.使用数组类型
          let v1=Array();
          // 2.使用new关键字
          let v2=new Array();
          // 3.使用字面量的方式
          let v3=[];
          // 赋值
          // 下标（索引）
          // 给数组的第一个元素赋值
          v3[0]=100;
          v3[1]=90;
          console.log(v3[1]);        
      </script>
  ​
   

1.4.2函数

函数——定义一个函数，执行一系列的代码，函数定义以后不会自己执行。需要我们手动调用函数。

• 无参无返回值

• 无参有返回值

• 有参无返回值

• 有参有返回值

函数内部不可以在声明函数，但是可以在调用函数！

return除了有返回值的作用，还有一个结束函数执行的作用，开发中尽量不要再return后面继续写语句

<script>
        // 全局变量
        let vi = 10;
        // 定义函数
        // 作用域（大括号里）：起作用的区域 vi只在函数里有用
        function hello() {
            console.log("我是hello函数");
            // 局部变量
            let vi = 10;
        }
        // 调用函数
        hello();
        // 带有返回值的函数
        function add() {
            let num1 = 10;
            let num2 = 20;
            return num1 + num2;
        }
        let result = add();
        console.log(result);
        // 带有参数的函数
        function sub(num12, num22) {
            return num12 - num22;
        }
        // 给参数赋值
        console.log(sub(8, 2));
        function start() {
            console.log(sub(8 - 2));
        }
        function end() {
            console.log("haha");
            return;
            console.log("amdaksf");
        }
        end();
    </script>

1.4.3弹窗——实质上就是函数

• alert ——警告弹窗 \n；\r代表换行（弹窗里的回车） \t制表符

• confirm——带有确认和取消的弹窗，有返回值，点击确定返回true，点击取消返回false

• prompt——带有文本框的弹窗，有返回值，就是文本框输入的内容

• //      prompt(水印，默认值)
          let f=prompt("fsaf","1000");
          console.log(f);

1.5 逻辑判断 流程控制

所有的非空的变量都会解析成1（true）

1.5.1 运算符

<script>
        // 算术运算符   + - * / %（取余） 
        // 后四个运算符（—*/%）：数字与字符串运算时，把字符串类型转换成数字，转不了的化会出现Nan
        // 赋值运算符   = += —= *= /= %= **（幂运算）
        // 比较运算符   < > <= >= != == ===(理解为去掉引号)   得到的结果是布尔类型
        let a=10;
        let b='10';
        console.log(a===b);
        // 逻辑运算符   &&（与，并且，且） ||（或，或者） ！（非） 
         // 三目运算符（三元运算符）：
        let c=10;
        let d=20;
        // 语法格式：  条件表达式 ？ 表达式1：表达式2  结果是true走表达式1，是false走表达式2  
        //    条件（必须要得到一个布尔类型的结果） 
        //      语法是固定的
        // 求c和d的最大值
        console.log((c>d?c:d));
        let e=50;
        let f=-1;
        //求c,d,e,f四个数最大值
       let max= (c>d?c:d)>(e>f?e:f)?(c>d?c:d):(e>f?e:f)
    </script>

（+）的特殊性——除了可以进行加法之外，可以作为连接符,如果先入为主认定+是连接符，那它就一直是连接符

<script>
        let a=10;
        // 获取数据类型
        console.log(typeof a); //number
        // 判断是否为数字
        console.log(!isNaN(a));  ..true
        // 字符串的拼接
        let x="abv";
        x+="edf";
        console.log(x);  //abvedf
    </script>

1.5.2 if...else（最多写3层）

• 语法：

if(条件表达式){
   满足条件：    要执行的代码
   }else{
   不满足条件： 要执行的代码
}

• else条件与if条件互补

• if....else结构和多重if结构的区别

 <script>
        let a=10,b=20,c=50,d=-1;
        if(a>b){
            console.log("das");
        }else    if(a<b){
            console.log("snjkfsa");
        } else{
            console.log("打赏va41");
        }
​
        function max(n1,n2){
            if(n1>n2){
                return n1;
            }
                return n2;
        }
        console.log(max(max(a,b),max(c,d)));
    </script>

1.5.3 switch...case结构

语法：

switch(表达式){
       case 选项1 :
                    要执行的代码
       case 选项2 :
                    要执行的代码
       ....
       default  除了以上选项的所以可能 :
                    要执行的代码
       }

• 当表达式的值在case中匹配成功，会执行对应代码，但停不下来，后面的代码会继续执行。

• if...else与switch...case选哪个？

  • 当需求是区间范围时，switch根本无法使用。

  • if...else...基本上啥都能干

  • switch...case效率高

  • 当需求为固定值，且值不多，用switch...case

  • 能用switch解决的不要用if...else

• 相似之处

  • 几乎所有的switch都可以转化为if...else

  • default几乎相当于else

  • case几乎相当于if

• 不同之处

  • switch...case需要break；

  • switch...case里面的选项可以杂乱无章的（不要写的杂乱）

知识点掌握情况：理解

学习心情（心路历程）：(≧∇≦)