初识JS初识SASS sass不能直接被浏览器识别，所以需要进行编译成正常的css文件才能被浏览器使用。编译sass成

初识SASS

sass不能直接被浏览器识别，所以需要进行编译成正常的css文件才能被浏览器使用。

编译sass成css：
1. 在 vs code 中安装插件 easy sass
2. 在 vs code 中创建一个 xxx.scss 文件 ==(注意这里就是 scss 结尾不是 sass 结尾)==
3. 在 xxx.scss 文件中书写 scss 代码
4. 保存代码后，当前的 xxx.scss 文件旁边会自动生成两个文件
  - xxx.css：文件内容为编译后的 css 代码
  - xxx.min.css：文件内容为编译后并且压缩过的 css 代码

sass注释

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

变量

在sass中$来定义变量：

$color:red;
$font_size:12px;
.header{
    background-color: $color;
    font-size:$font_size*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是什么

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 的简写;
3. BOM (Browser Object Model): 浏览器对象模型
  - 有一套成熟的可以操作 ==浏览器的 API==，通过 BOM 可以操作浏览器。比如：弹出框、浏览器跳转、获取分辨率等

三、JS的书写方式

1)行内式

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

2)内部式

<script>
    console.log('hello world')
</script>

3)外部式

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

注意：JS(script)推荐书写在body标签的末尾

四、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值表示一个空对象指针
如果定义的变量准备在将来用于保存对象，最好该变量初始化为null

1.2 复杂数据类型（引用数据类型）

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

2. 数据类型检测

为什么要有数据类型检测？
- JS语言是一门动态类型的语言，变量并没有一个单独的数据类型，而是会随着内部存储数据的变化，数据类型也会发生变化
- 变量的数据类型，与内部存储数据有关
- 将来使用变量时，需要知道内部存储的数据是什么类型，避免程序出错
使用typeof 的方法进行数据检测
- 检测方式：在typeof 后面加小括号执行，将要检测的数据放在小括号内部

3. 数据类型转换(转数值/转字符串/转布尔)

3.1 转数值

1）Number(数据)方法

转型函数Number()可以用于任何数据类型，将其他数据类型转为数字
字符串：纯数字字符串转为对应数字，空字符串和空白字符串转为0，非空非纯数字字符串转为NaN
布尔值：true转为1，false转为0
undefined：转为NaN
null：转为0

        var box = '100'
        console.log(box)           // string   100
        console.log(Number(box))   // number   100
        console.log(Number(''))    // 0
        console.log(Number(' '))   // 0

2）parseInt()方法:字符串转整数方法

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

        console.log(parseInt('10.99'))        // 10
        console.log(parseInt('100.123'))      // 100
        console.log(parseInt('abc100'))       // NaN
        console.log(parseInt('123abc'))       // 123 
        console.log(parseInt('123abc456'))    // 123

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

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

        console.log(parseFloat('abc100'))       // NaN    
        console.log(parseFloat('123abc'))       // 123
        console.log(parseFloat('10086.123'))    // 10086.123
        console.log(parseFloat('100.123.456'))  // 100.123
        console.log(parseFloat(true))           // NaN

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

        console.log(null - 0)        // 0
        console.log(false - 0)       // 0
        console.log(true - 0)        // 1
        console.log(undefined - 0)   // NaN
        console.log('abc' - 0)       // NaN
        console.log('123abc' * 0)    // NaN
        console.log('abc123' / 0)    // NaN
        console.log('!@#$%' % 0)     // NaN

3.2 转字符串

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

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

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

        console.log(typeof(100),typeof(String(100)))  //number string
        console.log(typeof(true),typeof(String(true)))  //boolean string
        console.log(typeof(String(undefined)))  //string
        console.log(typeof(String(null)))  //string

3） + 号拼接字符串方式

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

        console.log(100 + '',typeof(100 + ''))   // 100 string
        console.log(typeof(true + ''))           //string
        console.log(typeof(undefined + ''))      //string
        console.log(typeof(null + ''))           //string

3.3 转布尔

1） Boolean(变量)方法

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

        //数字转布尔类型      非0即真
        console.log(Boolean(0),typeof(Boolean(0)))    // false
        console.log(Boolean(100))                     // true
        console.log(Boolean(123.45))                  // true
        console.log(Boolean(-1985))                   // true
        
        //字符串转布尔类型    只有空字符串会转为false 其余都为true
        console.log(Boolean(''))               //false
        console.log(Boolean(' '))              //true
        console.log(Boolean('hello'))          //true
        console.log(Boolean('123abc'))         //true
        console.log(Boolean('!@#$%'))          //true
        
        //undefined和null   转换后都为false
        console.log(Boolean(undefined))
        console.log(Boolean(null))

2）!!变量/数据

       //一个! 表示得到这个数据取反后的布尔值
        console.log(!!0)
        console.log(!!' ')
        console.log(!!undefined)

初识JS

初识SASS

sass注释

变量

嵌套

初识JS

一、JS是什么

二、JS的组成

三、JS的书写方式

四、js 定义变量

1.什么是变量？

2.为什么要定义变量？

3.如何定义变量

4.变量赋值

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

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

五、JS数据类型

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

1.1 简单数据类型（基本数据类型）

1) Number 数字类型

2) String 字符串类型

3) undefined undefined类型

4) Boolean 布尔类型

5) null null类型

1.2 复杂数据类型（引用数据类型）

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

2. 数据类型检测

3. 数据类型转换(转数值/转字符串/转布尔)

3.1 转数值

1）Number(数据)方法

2）parseInt()方法:字符串转整数方法

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

4) 隐式转换（-/*///%)

3.2 转字符串

1） 变量.toString()方法

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

3） + 号拼接字符串方式

3.3 转布尔

1） Boolean(变量)方法

2）!!变量/数据

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

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

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