SASS

简介

css编写时嵌套层级多导致代码编写不方便。sass的出现就是为了解决css的缺点
sass是世界上最好的css扩展语言。
sass不能直接被浏览器识别，所以需要进行编译成正常的css文件才能被浏览器识别

<div class="box">
   <div class="left">我是left</div>
   <div class="right">我是right</div>
</div>

.box{}
.box left{}
.box right{}

.box{
     width:200px;
     height:200px;
     background-color:red
      .left{
      font-size:22px;
      background-color:blue;}
      .right{
      font-size:25px;
      background-color:green}
      }

编译sass成css:

1.在 VS code中安装插件 easy sass。

在 vs code 中创建一个 xxx.scss文件（注意是scss结尾，不是sass结尾）
在xxx.scss 文件中书写scss代码

4.保存代码后，当前的 xxx.scss文件旁边会自动生成两个文件

*xxx.css：文件内容为编译后的css代码 *xxx.min.css：文件内容为编译后并且压缩过的css代码

sass的学习

sass文件的后缀分两种：'.sass'和'.scss',相对来说，'.scss'使用的比较多。 '.scss'的文件写法：

.box{
    width:100px;
}

'.sass'的文件写法：

.box 
     width:100px

sass的注释

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

变量

在sass中用$来定义变量。

JS

JS是什么

JS是一种运行在客户端的脚本语言，最早出现在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
浏览器就是一种运行JS脚本语言的客户端，JS的解释器被称为JS引擎，为浏览器的一部分。

JS的组成

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

ECMAScript:定义了javascript的语法规范，描述了语言的基本语法和数据类型。
DOM(Document object Model）：文档对象类型

有一套成熟的可以操作的API，通过DOM可以操作页面中的元素。
API *application programming interface的简写; *翻译：引用程序编程接口

3.BOM（Brower Object Model）:浏览器对象模型

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

JS的书写

行内，不推荐，了解即可

onclick 在鼠标单击元素的时候会执行alert('hello world')打开一个弹窗矿弹出框内部的文本为小括号内引号包裹的内容。

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

内部，必须书写在script标签内部

文本内容会被打印到浏览器的控制面板（控制台）

 <script>
 console.log('哈哈哈哈哈哈哈哈')
 </script>

外部，在代码量比较多的情况下（也就是在工作的时候）好处是能够让单一的某一个文件内的代码量更少，结构更加清晰

在某一个位置新建一个后缀为 .js 文件
在html文件中通过 src 属性，引入刚才书写的.js 文件

JS的变量

什么是变量：

变量是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据

如何创建一个变量？

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

创建/定义变量

创建一个变量，变量的名字为box

  var box;

变量赋值

  box='100万'

在 JS 中, 一个等号= 我们叫做赋值号
赋值号的作用, 将符号右边的内容(值) 保存在符号左边的变量中

其实在 JS 中还有一种方式能够更简单的书写变量

       var box1 = '200万'
        console.log(box1)

当我们只定义了变量但是没有赋值的时候此时变量的值为 undefined

变量的命名

变量的命名规则（必须遵守，不遵守容易报错）

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

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

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

Js的数据类型

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

数字类型（number）:所有的整数和浮点数

        var num1 = 1
        var num2 = 100
        var num3 = 10086
        var num4 = 10086.965

字符串类型（string）:在JS中，只要是引号包裹的内容，统称为字符串

        var str1 = 'qwer'
        var str2 = '!@#$%'
        var str3 = '10086'

布尔类型（boolean）：表明对/错（真/假）

  var boo1 = true 
  var boo2 = false

undefined类型（undefined）:表明未定义，通常我们不会给一个变量赋值为undefined,因为变量声明但不赋值就是一个undefined,因为变量定义但不赋值就是一个undefined

        var und1 = undefined
        var und2

null类型（null）表明为空对象指针，一般很少使用，但是如果创建了一个对象，但是不知道对象的值是什么的时候可能会给一个null

    var nul = null

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

数据类型检测

为什么要检测类型？

在JS中，一个变量内部可以保存的值，是可以任意更改的
所以在使用的时候为了放置因为数据类型不对，导致的错误，所以需要在使用前检测一次数据的类型
getUserInfo 获取用户详细信息的一个接口函数

数据类型判断的语法

需要借助一个关键字typeof
假设要检测的变量名为box

  typeof(box)
  typeof box
  
  var box = '我是一个字符串类型的数据'
  console.log(typeof(box))
  console.log(typeof box)
  
   var num = 10086
   console.log(typeof(num))
   console.log(typeof num)
   
   console.log(typeof('我是一个字符串类型的数据'))
   console.log(typeof (true))
   console.log(typeof (undefined))

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

数据类型转换

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

借助一个转型函数Number（数据）

Number

   var box = '10086'
   console.log('box 原本的数据类型',typeof(box),box)
   var newbox = Number(box)
   console.log('box 通过转型函数转换后的值',typeof(newbox),newbox)

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

   console.log(Number(' '))  空字符串---0
   console.log(Number('  ')) 空白字符串---0
   console.log(Number('qwertyui')) 没有数字的字符串---Nan（此时已经将这个字符串转换为数字类型了，但是没有一个合适的数字能够表达他，所以使用一个统一的Nan）
   console.log(Number("123456789"))  只有数字的字符串----123456789 直接转成数字了

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

    console,log(Number(true))  1
    console.log(Number(false))  0

undefined: 转为Nan 转为0

  console.log(Number(undefined))  Nan
  console.log(Number(null)) 0

parseInt(数据)

parseInt 如果传递的是一个数字，那么会忽略小数点以后得所有内容

  console.log(parseInt(100))  100
  console.log(parseInt(100.12345)) 100

如果不是数字开头的字符串，换转为Nan

console.log(parseInt('')) 空字符串---Nan
console.log(parseInt('  ')) 空白字符串---Nan
console.log(parseInt('qwerty')) 非空非空白字符串---Nan
console.log(paresInt('@#$%'))非空非空白字符串---Nan   
console.log(paresInt('qwerty10086'))非空非空白字符串---Nan  
console.log(parseInt('10086qwerty')) 数字开头的字符串---10086

字符串中，必须是纯数字字符串或者数字字符开头的字符串，才能转换为正常数字，且只取整数部分

console.log(parseInt('10086qwerty')) 字符串开头为数字，那么直接保留数字并忽略数字以后得所有内容----10086

console.log(parseInt('10086we999rty'))  字符串开头为数字，那么直接保留数字并忽略数字以后得内容 ---10086

console.log(pasreInt('100')) 直接将字符串中的数字转为数字类型 ---100

3 parseFloat(数据)（和parseInt一样） 4. 开发中的一个方式

  var box = '10086'
  console.log(box)
  console.log(box-0)

转字符串类型

变量/数据 .toString()

问题：undefined 和 null 不能同时使用？
undefined 不能使用toString 去转换，null也不能通过toString 去转换

变量/数据.toString()

   var box = 100
   console.log('box 原本的值：',typeof(box),box)
   console.log('box 转换数据类型后: ', typeof (box.toString()), box.toString())

布尔值的转换

   console.log(typeof(true),typeof(true.toString()))
   console.log(true,true.toString())
   console.log(type(false),typeof(flase.toString()))
   console.log(flase,false.toString())

String(变量/数据)

什么类型能转换为字符串？

console.log(typeof(undefined),typeof(String(undefined))) ---undefined  String
console.log(typeof(null),typeof(String(null)))----object,String
console.log(typeof(String(100))) ----string
console.log(typeof(String(true)))----string

变量/数据 +''

  console.log(typeof(undefined),typeof(undefined +''))---undefined string
   console.log(typeof(null),typeof(null +''))  object string

转布尔类型

一般开发的时候不会主动的转换布尔类型
一般是隐式转换，也就是由JS帮我们完成了数据的转换，一般做判断的时候比较常见

借助一个转型函数Boolean(变量/数据）

数字转布尔值非0即为真

  console.log(Boolean(0))----flase
  console.log(Boolean(1))----true
  console.log(Boolean(-1))----true
  console.log(Boolean(100))----true
  console.log(Boolean(-10000))----true
  console.log(Boolean(1.567))----true

字符串转布尔值只有空字符串会转为false

    console.log(Boolean(''))---false
    console.log(Boolean(' '))---true
    console.log(Boolean('1234567'))---true
    console.log(Boolean('!@#$'))---true
    console.log(Boolean('qwerts'))---true
    console.log(Boolean('你好!@#$%qwert12345'))---true

undefined和 null

    console.log(Boolean(undefined)) ----false
    console.log(Boolean(null))---flase
    console.log(!undefined)--- true
    console.log(!!undefined)    --- false

！！变量/数据

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

JS的算术运算符

也叫操作符, 是 JS 中发起一个运算的最简单的方式
算数运算符

- - - / %

加减乘除取余

运算符本身就是给数字类型使用的

   + 就是将 符号左右两边的值, 相加 得到一个新的值
   
   这个也叫做表达式, 表达式就是会计算出一个值, 然后参与周围程序的运行
   
   注意: + 一般是给数字使用的, 但是如果 符号的任意一边有字符串类型的, 那么不在计算求和, 而是计算一个拼接  并且拼接后的值是字符串类型的  这也是为什么 一个数据 + ''      能够转换为 字符串类型
   
   console.log(1 + 1)----2
   console.log(undefined+null)---Nan
   console.log(1 + '1')----11

    - 就是将 符号两边的值 相减 得到一个新的值
    
    运算的时候, 如果符号两边有字符串. 那么 JS 会将 字符串转换为 数字 然后参与运算
    
    这也是为什么 数据 - 0 能够转换为 number 类型
    
    console.log(100 - 50)---50
    console.log('100'- 50)---50
    
    console.log(100 * 5)---500
    console.log(100 * '5')---500

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

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

赋值运算符

  =   赋值号
  +=      当要给一个变量重新赋值, 赋值为他本身加一个内容, 就可以使用 +=
        var a = 100
        // a = a + 500
        a += 500
        console.log(a)---600
        
        var b = 100
        // b = b - 50
        b -= 50
        console.log(b)---50
        
         var c = 10
        // c = c * 10
        c *= 10
        console.log(c)--100
        
        var d = 9
        d /= 3
        console.log(d)---3
        
        var q = 9
        q %= 4
        console.log(q)----1

比较运算符

   大于 >
   小于 <
   大于等于 >=
   小于等于 <=
   等于 == 对比两边是否相等, 不会区分数据类型 
        === 对比两边是否相等, 区分数据类型  推荐写 ===
   
    不等于  !=  对比两边是否不相等, 不会区分数据类型
           !==  对比两边是否不相等, 区分数据类型 推荐写 !==
           
      console.log(100 > 99) --- true
      console.log(100 < 99) ---false
      console.log(100 < 100)---false
      console.log(100 > 100)---false
      console.log(100 >= 100)--- true
    
      console.log(1 == 1)---true
      console.log(1 === 1)---true

      console.log(1 == '1')---true
      console.log(1 === '1')--- false
      
        console.log(100 != 100) false
        console.log(100 != 99) true

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

JS