初识JS（一）一、初识SASS 1、在SASS中定义变量：在sass中$来定义变量 2、在 sass 中如何书写嵌套(

一、初识SASS

1、在SASS中定义变量：在sass中$来定义变量
2、在 sass 中如何书写嵌套(如何书写后代? 如何书写子类)

.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是一种运行在客户端的脚本语言，最早是在HTML (标准通用标记语言下的一个应用)网页上使用，用来给HTML网页增加动态功能。

浏览器是一种运行JS脚本语言的客户端，JS的解释器被称为JS引擎，为浏览器的一部分。

三、JS 的组成

JavaScript 是由 ECMAScript，DOM 和 BOM 三者组成的。

1. ECMAScript: 定义了JavaScript 的语法规范,描述了语言的基本语法和数据类型

2. DOM (Document Object Model): 文档对象模型

有一套成熟的可以操作页面元素的 API，通过 DOM 可以操作页面中的元素。比如：增加个 div，减少个 div，给 div 换个位置等
API:application programming interface 的简写;
翻译：应用程序编程接口；大白话：别人写好的代码，或者编译好的程序，提供给你使用，就叫作api

3. BOM (Browser Object Model): 浏览器对象模型

有一套成熟的可以操作浏览器的 API，通过 BOM 可以操作浏览器。比如：弹出框、浏览器跳转、获取分辨率等。

四、js 的三种书写方式

1、行内式

<input type="button" value="按钮" onclick="alert('hello world')" />

2、内部式

     <body>
       <script>
            alert('hello')
       </script>
    </body>

3、外部式

<script src="main.js"></script>

五、js 定义变量

1、什么是变量？

变量是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据；
翻译为大白话，我有一个东西需要暂时存储起来，比如说就是一个数字 100，我把它存放到了变量 a 中，我后续想要使用他的时候就可以直接通过变量 a 获取到数字 100
变量其实就相当于一个容器，内部可以存储任意类型的数据，使用变量时，用的是内部存储的数据。

2、为什么要定义变量？

使用变量可以方便的获取或者修改内存中的数据

3、如何定义变量

使用一个 var 的关键字进行定义，后面必须加一个空格，空格后面自定义变量名

var a; 
var b;
var c;

4、变量赋值

变量定义之后，初始时没有进行赋值，内部有一个默认存储的值叫 undefined(未定义) 表示内部未赋值，但可以存储数据了
变量赋值的方式：

通过等号 = 赋值，等号右边的值赋值给左边的变量（等号在 JS 中叫做赋值号；书写时，等号 = 两侧习惯书写一个空格）

// 变量定义 
var a; 
// 变量赋值
a = 1;
// 变量定义并赋值 
var b = 2;

5、变量命名规则（必须遵守，不遵守会报错）

由字母、数字、下划线、$符号组成，不能以数字开头
字母区分大小写
不能是关键字和保留字
- 关键字指的是js中有特殊功能的小词语，比如var、for等
- 保留字指的是现在没有特殊功能，但是将来新语法中有可能作为关键字使用

6、变量命名规范（建议遵守的，不遵守不会报错）

变量名必须有意义
遵守驼峰命名法

六、js 数据类型

JS中的值，无论是字面量还是变量，都有明确的类型

1、数据类型分类(以基本数据类型为主)

1-1、简单数据类型（基本数据类型）

1）Number 数字类型

不区分整数、浮点数、特殊值，都是 Number 类型

2）String 字符串类型

所有的字符串都是 String 类型

3）undefined undefined类型

undefined本身就是一个数据，表示未定义，变量只声明不赋值的时候，值默认是 undefined

4）Boolean 布尔类型

Boolean 字面量：只有 true 和 false 两个字面量的值，必须是小写字母
计算机内部存储：true 为 1，false 为 0

5）null类型

null 本身就是一个数据
从逻辑角度，null 值表示一个空对象指针
如果定义的变量准备在将来用于保存对象，最好该变量初始化为 null

1-2、复杂数据类型（引用数据类型）

1）Object 对象类型（后续课程详细讲解）

2）Array 数组

3）function 函数

2、为什么要有数据类型检测？

JS语言是一门动态类型的语言，变量并没有一个单独的数据类型，而是会随着内部存储数据的变化，数据类型也会发生变化；
变量的数据类型，与内部存储数据有关；
将来使用变量时，需要知道内部存储的数据是什么类型，避免程序出错；

3、使用 typeof 的方法进行数据检测

检测方式：在 typeof 后面加小括号执行，将要检测的数据放在小括号内部

4、数据类型转换(转数值 / 转字符串 / 转布尔)

1）转数值

1-1. Number(数据)方法

1.转型函数Number()可以用于任何数据类型，将其他数据类型转为数字

2.字符串：纯数字字符串转为对应数字，空字符串和空白字符串转为0，非空非纯数字字符串转为NaN

3.布尔值：true转为1，false转为0

4.undefined：转为NaN

5.null：转为0

1-2. parseInt()方法：字符串转整数方法

对浮点数进行取整操作
- 对数字取整直接舍弃小数部分，只保留整数
将字符串转为整数数字
- 将字符串转为整数数字，也包含取整功能
- 字符串中，必须是纯数字字符串或者数字字符开头的字符串，才能转换为正常数字，且只取整数部分
- 如果不是数字打头的字符串，会转换为NaN

        console.log(parseInt('12px'))//12
        console.log(parseInt('12.34px'))//12
        console.log(parseInt('12.99px'))//12
        console.log(parseInt('123abc'))//123
        console.log(parseInt('abc234'))//NaN
        console.log(parseInt('123abc456'))//123

1-3. parseFloat()方法：字符串转浮点数方法

将字符串转为浮点数数字
满足浮点数数字字符必须在字符串开始，如果不在开始返回值都是NaN

        console.log(parseFloat('13px'))//13
        console.log(parseFloat('12.34px'))//12.34
        console.log(parseFloat('12.94px'))//12.94
        console.log(parseFloat('abc234.456'))//NaN
        console.log(parseFloat('123.456abc456.789'))//123.456

1-4. 隐式转换（`-`/`*`/`/`/`%`)

        var a = '123'
        var b = a - 0
        console.log(a, b)//123 123
        console.log(typeof (a), typeof (b))//string number
        var c = 'abc'
        var d = c * 1
        console.log(c, d)//abc NaN
        console.log(typeof (c), typeof (d))//string number
        var e = '345'
        var f = e / 1
        console.log(e,f)//345 345
        console.log(typeof(e),typeof(f))//string number
        var g = '123'
        var h = g % 1
        console.log(g, h)//123 0
        console.log(typeof (g), typeof (h))//string number

2、转字符串

1. `变量.toString()`方法

        var a = 100
        console.log(typeof (a), typeof (a.toString()))//number string
        console.log(typeof (true.toString()))//string
        console.log(typeof (undefined.toString()))//不能使用
        console.log(typeof (null.toString()))//不能使用

2. `String(变量)`方法，有些值没有`toString()`，这个时候可以使用`String()`。比如`undefined`和`null`

        console.log(typeof(String(a)))//string
        console.log(typeof(String(true)))//string
        console.log(typeof(String(false)))//string
        console.log(typeof(String(undefined)))//string
        console.log(typeof(String(null)))//string

3. `+` 号拼接字符串方式

num + “” ,当 + 两边一个操作符是字符串类型，一个操作符是其他类型的时候，会先把其他类型转换成字符串在进行字符串拼接，返回字符串;

        var a=100
        console.log(a+'')//100
        console.log(typeof(a+''))//string
        console.log(typeof(undefined), typeof(undefined + ''))//undefined string
        console.log(typeof(null), typeof(null + ''))//null string

3、转布尔

1. Boolean(变量)方法

转型函数Boolean()可以用于任何数据类型，将其他数据类型转为布尔类型的值
转为false：NaN、0、“”空字符串、null、undefined

        console.log(Boolean(''))//flase
        console.log(Boolean(0))//flase
        console.log(Boolean(null))//false
        console.log(Boolean(undefined))//flase
        console.log(Boolean(NaN))//flase

转为true：非0 非NaN数字、非空字符串

2. !!变量/数据

一个!表示得到这个数据取反后的布尔值

        console.log(!undefined)//true
        console.log(!!undefined)//flase

七、运算符

就是在代码里面进行运算的时候使用的符号，不光只是数学运算，我们在 js 里面还有很多的运算方式

1、数学运算符

1）. `+`

> 只有符号两边都是数字的时候才会进行加法运算
>
> 只要符号任意一边是字符串类型，就会进行字符串拼接

2）. `-`

> 会执行减法运算
>
> 会自动把两边都转换成数字进行运算

3）. `*`

> 会执行乘法运算
>
> 会自动把两边都转换成数字进行运算

4）. `/`

> 会执行除法运算
>
> 会自动把两边都转换成数字进行运算

5）. `%`

> 会执行取余运算
>
> 会自动把两边都转换成数字进行运算

2、赋值运算符

1）. `=`

> 就是把 `=` 右边的赋值给等号左边的变量名
>
> `var num = 100`
>
> 就是把 100 赋值给 num 变量
>
> 那么 num 变量的值就是 100

2）. `+=`

> ```
> var a = 10;
> a += 10;
> console.log(a); //=> 20
> ```
>
> `a += 10` 等价于 `a = a + 10`

3）. `-=`

> var a = 10;
>
> ```
> a -= 10;
> console.log(a); //=> 0
> ```
>
> `a -= 10` 等价于 `a = a - 10`

4）. `*=`

> ```
> var a = 10;
> a *= 10;
> console.log(a); //=> 100
> ```
>
> `a *= 10` 等价于 `a = a * 10`

5）. `/+`

> ```
> var a = 10;
> a /= 10;
> console.log(a); //=> 1
> ```
>
> `a /= 10` 等价于 `a = a / 10`

6）. `%=`

> ```
> var a = 10;
> a %= 10;
> console.log(a); //=> 0
> ```
>
> `a %= 10` 等价于 `a = a % 10`

        var a = 10
        a += 10
        console.log(a)//20
        var b = 10
        b -= 5
        console.log(b)//5
        var c = 10
        c *= 10
        console.log(c)//100
        var d = 10
        d /= 10
        console.log(d)//1
        var e = 20
        e %= 3
        console.log(e)//2

3、比较运算符

1）. `==`

-   比较符号两边的值是否相等，不管数据类型

    > `1 == '1'`
    >
    > 两个的值是一样的，所以得到 `true`

2）. `===`

-   比较符号两边的值和数据类型是否都相等

    > `1 === '1'`
    >
    > 两个值虽然一样，但是因为数据类型不一样，所以得到 `false`

3）. `!=`

-   比较符号两边的值是否不等

    > `1 != '1'`
    >
    > 因为两边的值是相等的，所以比较他们不等的时候得到 `false`

4）. `!==`

-   比较符号两边的数据类型和值是否不等

    > `1 !== '1'`
    >
    > 因为两边的数据类型确实不一样，所以得到 `true`

5）. `>=`

-   比较左边的值是否 **大于或等于** 右边的值

    > `1 >= 1` 结果是 `true`
    >
    > `1 >= 0` 结果是 `true`
    >
    > `1 >= 2` 结果是 `false`

6）. `<=`

-   比较左边的值是否 **小于或等于** 右边的值

    > `1 <= 2` 结果是 `true`
    >
    > `1 <= 1` 结果是 `true`
    >
    > `1 <= 0` 结果是 `false`

7）. `>`

-   比较左边的值是否 **大于** 右边的值

    > `1 > 0` 结果是 `true`
    >
    > `1 > 1` 结果是 `false`
    >
    > `1 > 2` 结果是 `false`

8）. `<`

-   比较左边的值是否 **小于** 右边的值

    > `1 < 2` 结果是 `true`
    >
    > `1 < 1` 结果是 `false`
    >
    > `1 < 0` 结果是 `false`

4、逻辑运算符

1）&& （逻辑与逻辑且）

语法：变量1/数据1 && 变量2/数据2
运行规则：会判断符号左边的变量的值, 转换为布尔值后，如果符号左边布尔值为 true, 那么运行符号右边的代码或者返回符号右边的代码；如果符号左边布尔值为 false, 那么直接运行符号左边的代码或者返回符号左边的代码。
逻辑与: 满足条件1 并且满足条件2

     //console.log(变量1/数据1 && 变量2/数据2)
     console.log(true&&flase)//flase-相当于写了: console.log(false)
     console.log(1&&0)//0
     console.log(0&&100)//0-相当于写了: console.log(0)
     true&&console.log('可以打印出来')//可以打印出来
     flase&&console.log('打印不出来')//会报错

2）|| （逻辑或）

语法: 变量1/数据1 || 变量2/数据2
运行规则: 会判断符号左边的变量的值, 转换为布尔值后，如果符号左边布尔值为 true, 那么运行符号左边的代码或者返回符号左边的代码；如果符号左边布尔值为 false, 那么直接运行符号右边的代码或者返回符号右边的代码。
逻辑或: 满足条件1 或者满足条件2

   console.log(true||flase)//true
   console.log(1||0)//1-相当于写了: console.log(1)
   console.log(0||100)//100-相当于写了: console.log(100)
   true || console.log('左边为 true 右边就不会执行了')
   false || console.log('左边为 false 右边才会执行')

3）！（逻辑非）

进行取反运算
本身是 true 的，会变成 false；本身是 false 的，会变成 true

     console.log(!true)//flase
     console.log(!false)//true

5、自增自减运算符

1）. `++`

-   进行自增运算

-   分成两种，**前置++** 和 **后置++**

-   前置++，会先把值自动 +1，在返回

    ```
    var a = 10;
    console.log(++a);
    // 会返回 11，并且把 a 的值变成 11
    ```

-   后置++，会先把值返回，再自动+1

    ```
    var a = 10;
    console.log(a++);
    // 会返回 10，然后把 a 的值变成 11
    ```

2）. `--`

-   进行自减运算
-   分成两种，**前置--** 和 **后置--**
-   和 `++` 运算符道理一样

6、三元运算符

三元运算，就是用 两个符号 组成一个语句
语法： 条件 ? 条件为 true 的时候执行 : 条件为 false 的时候执行

        var age = 18;
        age >= 18 ? alert('已经成年') : alert('没有成年')

7、运算符的优先级

1、（）的优先级最高
2、自增、自减运算符++/--
3、算数运算符：先*/% 后+-
4、关系运算符 < > <= >=
5、相等运算符 == === != !==
6、逻辑运算符：先&&后|| ！优先级最高
7、赋值运算符 = += -= *= /= %=

初识JS（一）