scss

在 vs code 中安装插件 easy sasseasy sass 2. 在 vs code 中创建一个 xxx.scss 文件 ==(注意这里就是 scss 结尾不是 sass 结尾)== 3. 在 xxx.scss 文件中书写 scss 代码

.scss和.sess 他们的区别在于有没有大括号和分号
使用 scss 的语法, 声明一个变量, 注意, css 中不能这样写

// 单行注释，但是在编译的时候不保留
/*
多行注释
编译的时候可以保留
压缩的时候不保留
*/
/*!
多行注释
编译和压缩的时候都会保留
*/

嵌套

// 后代关系
.wrap{
    div{
        width:$font_size*10;
    }
} 
// 子类关系
ul{
    >li{
        padding:12px;
    }
}
// 大括号中表示自己
.nav{
    &:hover{
        background-color: $color;
    }
    li{
        &:hover{
            color:$color;
        }
    }
}
// 群组嵌套按正常写即可
//  属性嵌套 
.content{
    border: {
        style:solid;
        color:$color;
        width:2px;
    }
}
.left{
    border:1px solid #000{
        left:none;
        bottom:{
            width:3px;
        }
    };
}

JS的变量

变量是计算机内存中存储数据的标识符，根据变量名称可以获得到内存中存储的数据
变量就是一个盒子用来存储数据

如何创建一个变量?

需要借助一个 JS 提供的关键字 var
语法: var 变量的名字

    // 创建/定义    变量
        var box;    // 创建一个变量, 变量的名字为 box       (办了一张银行卡)
        var num;
        var str;

        // 变量赋值
        box = '100万'
        /*
          赋值号的作用, 将符号右边的内容(值) 保存在 符号左边的 变量中
        */
        console.log(box)
        /* 可以直接进行编写 */
        var a = 10
```# 
# scss
 1. 在 vs code 中 安装 插件 easy sass
    2. 在 vs code 中创建一个 xxx.scss 文件 ==(注意这里就是 scss 结尾 不是 sass 结尾)==
    3. 在 xxx.scss 文件中书写 scss 代码
* .scss和.sess    他们的区别在于有没有大括号和分号
* 使用 scss 的语法, 声明一个变量, 注意, css 中不能这样写
```scss
// 单行注释，但是在编译的时候不保留
/*
多行注释
编译的时候可以保留
压缩的时候不保留
*/
/*!
多行注释
编译和压缩的时候都会保留
*/

嵌套

/*后代关系*/
.wrap{
    div{
        width:$font_size*10;
    }
}
/*子类关系*/
ul{
    >li{
        padding:12px;
    }
}
/*大括号中表示自己*/
.nav{
    &:hover{
        background-color: $color;
    }
    li{
        &:hover{
            color:$color;
        }
    }
}
/*群组嵌套按正常写即可*/
/* 属性嵌套 */
.content{
    border: {
        style:solid;
        color:$color;
        width:2px;
    }
}
.left{
    border:1px solid #000{
        left:none;
        bottom:{
            width:3px;
        }
    };
}

JS的变量

变量是计算机内存中存储数据的标识符，根据变量名称可以获得到内存中存储的数据
变量就是一个盒子用来存储数据

如何创建一个变量?

需要借助一个 JS 提供的关键字 var
语法: var 变量的名字

    // 创建/定义    变量
        var box;    // 创建一个变量, 变量的名字为 box       (办了一张银行卡)
        var num;
        var str;

        // 变量赋值
        box = '100万'
        /*
          赋值号的作用, 将符号右边的内容(值) 保存在 符号左边的 变量中
        */
        console.log(box)
        /* 可以直接进行编写 */
        var a = 10

变量

变量命名规则：只能使用字母，数字，下划线，以及$命名，
使用数字时候不能以数字开头
字母区分大小写
不能使用关键字和保留字
关键字指的是js中有特殊功能的小词语，比如var、for等
保留字指的是现在没有特殊功能，但是将来新语法中有可能作为关键字使用
```
 变量命名规范
     变量名必须有意义
     可以使用驼峰命名法
```

        var box = 1
        var str = 1
        var box1 = 1
        var box2 = 1
        var $box2 = 1
        var $box10086 = 1
        var $box_10086 = 1
        
        // var 10086box = 1

        var num = 100
        var NUM = 200
        console.log(num, NUM

类型检测

typeof null 的类型就是 null
但是 typeof 这个方法有一点小问题, 它会将 null 识别为 object 类型
在使用 typeof 检测的时候, 不要用来检测 null 这个类型, 因为检测结果不准确

数值类型转换

JS 转换的时候任意类型都能够转换为数字使用, 主要是字符串转数字

借助一个转型函数 Number(数据)
parseInt(数据)
parseFloat(数据) 参考上述的 parseInt 自己整理练习
字符-0

  //     var a=Number("adasdad") //任意字符串
    //     console.log(typeof(a),a);// NaN

    //     var a=Number("123")     //数字字符串
    //     console.log(typeof(a),a);// 123

    //     var a=Number("")        //空字符串
    //     console.log(typeof(a),a); //0

    //     var a=Number(" ")       //空白字符串
    //     console.log(typeof(a),a); //0

    //    // 布尔值:true转为1，false转为0
    //     console.log(Number(true))    // 1
    //     console.log(Number(false))   // 0

    //     //undefined：转为NaN null：转为0
    //     console.log(Number(undefined))   // NaN
    //     console.log(Number(null))    // 0



       // parseFloat
        var a=parseFloat("adasdad") //任意字符串
        console.log(typeof(a),a);// NaN

        var a=parseFloat("123.25")     //数字字符串
        console.log(typeof(a),a);//123.25

        var a=parseFloat("123.25adasdad")     //数字开头字符串
        console.log(typeof(a),a);//123.25

        // 如果不是数字打头的字符串，会转换为NaN
        var a=parseFloat("adas2323dad331")     //字母开头字符串
        console.log(typeof(a),a);//NaN
        
        console.log(parseInt(''))   // 空字符串 --- NaN
        console.log(parseInt(' '))   // 空白字符串 --- NaN


      
        // 可以使用: 数据 - 0;
        var box = '10086'
        console.log(box)
        console.log(box - 0)

转化为字符串类型

调用tostring方法
使用string函数
直接+""

        // 1.调用tostring方法
            var box=56
            console.log(typeof(box.toString()),box.toString()); //string 56

            //布尔值转换为字符串
            console.log(typeof(true.toString()),true.toString());   //string true
            console.log(typeof(false.toString()),false.toString()); //string false

        //2.使用string函数  
            console.log(typeof(undefined), typeof(String(undefined)))//undefined string
            console.log(typeof(null), typeof(String(null)))     //null string

            console.log(typeof(String(100)))    //string
            console.log(typeof(String(true)))   //string
            
        //3. 直接+""  
            console.log(typeof(undefined), typeof(undefined + ''))
            console.log(typeof(null), typeof(null + ''))

进行布尔值的转化

一般不会主动进行布尔值的转化，
一般是隐性转化，也就是由js来帮助我们完成数据转化为布尔值，一般做判断的时候比较常见

借助一个函数Boolean(变量/数据)
!!变量/数据

      // 1.Boolean函数
      //数字转布尔值      非0即真
      console.log(Boolean(132123),typeof(Boolean(132123)));//true 'boolean'
      console.log(Boolean(0))  //false
      
       //字符串转布尔值      只有空字符串会转为false
      console.log(Boolean(""))  //false
      console.log(Boolean(" "))  //true
      console.log(Boolean("!@5156阿萨德qweqwe"))  //true

      //undefined和null
      console.log(Boolean(undefined))  //false
      console.log(Boolean(null))  //false

      // 使用!!
      console.log(!undefined) // true
       console.log(!!undefined)    // false

07_算数运算符

```
 + - * / %
```
注意: + 一般是给数字使用的, 但是如果符号的任意一边有字符串类型的, 那么不在计算求和, 而是计算一个拼接并且拼接后的值是字符串类型的
这也是为什么一个数据 + '' 能够转换为字符串类型

- 就是将 符号两边的值 相减 得到一个新的值

运算的时候, 如果符号两边有字符串. 那么 JS 会将字符串转换为数字然后参与运算
这也是为什么数据 - 0 能够转换为 number 类型

           console.log(100 - 50)
        console.log('100' - 50)

        console.log(100 * 5)
        console.log(100 * '5')

        console.log(900 / 3)
        console.log(900 / '3')

        console.log(9 % 4)
        console.log(9 % '4')

赋值号

 //  =赋值号
            var a=10
                console.log(a);

        // +=
            var b=30
                b=b+10
                console.log(b);
                console.log(b+=10);
        // -=
            var c=40
                c=c-10
                console.log(c);
                console.log(c-=10);
        // *=
            var d=50
                d=d*10
                console.log(d);
                console.log(d*=10);
        // /=
            var e=30
                e=e/10
                console.log(e);
                console.log(e/=10);
        // %=
            var f=30
                f=f%4
                console.log(f);
                console.log(f%=4);

比较运算符

小于 < 大于 > 大于等于 >= 小于等于 <=

等于

== 对比两边是否相等, 不会区分数据类型了解或者特殊情况下书写
=== 对比两边是否相等, 区分数据类型推荐写 ===
一定要注意, 等于最少要两个 == 千万不要写成 =

不等于

!= 对比两边是否不相等, 不会区分数据类型
!== 对比两边是否不相等, 区分数据类型 *推荐写 !==

       console.log(1>2);    // false
       console.log(1<2);    // true
       
       console.log(1>2);
       console.log(1<2);


        // console.log(1 == 1) // true
        // console.log(1 === 1)    // true

        // console.log(1 == '1') // true
        // console.log(1 === '1')    // false

       console.log(100 != 100)
        console.log(100 != 99)

        console.log(100 !== 100)
        console.log(100 !== '100')  // 因为区分数据类型, 所以 条件成立, 返回 true
        console.log(100 != '100')   // 不区分类型, 条件不成立, 返回 false

初入js

scss

嵌套

JS的变量

如何创建一个变量?

嵌套

JS的变量

如何创建一个变量?

变量

类型检测

数值类型转换

转化为字符串类型

进行布尔值的转化

07_算数运算符

赋值号

比较运算符

等于

不等于