初识js

111 阅读4分钟

一、JS的组成

    由 ECMAScript 和 DOM 和 BOM 三者共同组成

1.ECMAScript

    定义了 JS 的语法规范, 描述了 语言的基本语法和数据类型

2.DOM(文档对象模型)

    有一套成熟的 操作 DOM 节点的 API, 通过 DOM 可以操作页面中的元素(其实就是标签)

3.BOM(浏览器对象模型)

    有一套成熟的 操作 BOM 的API
        比如: 弹出框
              浏览器跳转
              获取浏览器相关信息
              获取浏览器尺寸

二、JS的书写方法

    JS有三种书写方法

1.行内式

    不推荐, 了解即可, 这种写法, 代码量多了, 不好维护
    例:`<!-- <button onclick="alert('你好 qwer')">按钮</button> -->`

2.内嵌式

    学习阶段推荐使用, 因为代码量少, 如果代码量多, 不推荐
    例:`<!-- <script>
            alert('我是内嵌的 js')
         </script> -->`

3.外联式

    目前公司都是外链式, 因为公司项目代码量肯定比较大
    例:`<script src="外联js代码.js"></script>`

三、JS的变量

1.JS的变量是什么

     变量 是计算机中存储数据的一个标识符, 通过这个标识符可以找到内存中存储的数据
     变量就相当于是一个容器, 内部可以存储任意类型的值, 使用变量的时候, 用的是内部存储的数据

2.如何使用变量

    1. 定义变量
      语法: `var 变量名`
    2. 赋值变量
       变量名 = 值    //JS中 = 符号叫做赋值号
                     //简写 `var 变量名 = 值`
    3. 打印变量
        `console.log(变量名)`
      例: ` var a
            var b
            a = 100
            b = 200
            console.log(a)
            console.log(b) 
            var c = 300
            var d = 400
            console.log(c) 
            console.log(d) `

3.变量的命名规则与规范

    1.规则:**必须遵守的, 如果不遵守会报错**
             在书写变量名的时候, 只能由 数字 字母 下划线 $符号(英文的) 组成, 并且 不能以数字开头
             *书写时区分大小写*
             书写变量名时, 不能使用关键字或者保留字作为变量名
                 关键字: 在 js 中具有特殊含义的 字母组合
                    例:var     if      for     function
                 保留字: 在 js 中目前没有特殊含义, 但在将来的某个版本可能会用到, 所以此时也不能使用
                      在 ES6 还没出现之前具有的保留字
                    例:let     const     promise
     2.规范:**建议遵守, 如果不遵守也不会报错**
              变量名具有含义, 符合见名知意
                    尽量不要用字母作为变量名, 除非是练习
              多个单词的组合名时, 使用驼峰命名法(多个单词拼接时, 后一个单词的首字母大写)
                    bigbox -> bigBox

四、JS的数据类型

1.JS中数据类型的分类

    JS 中变量可以存储 任意类型的值
    基本数据类型:
        1.Number 类型
          数字类型: 不区分 整数浮点数
        2.String 类型
          字符串类型: 只要是引号包裹的内容, 就是字符串类型(引号不区分单双引号)
        3.undefined 类型
          undefined 类型: 他是一个数据, 表明未定义
              变量只定义, 不赋值的时候, 默认的值就是 undefined 表明未定义
        4.Boolean 类型
          只有两个值 一个是 true 一个 是 false
              true: 代表真, 正确的
              false: 代表假, 错误的
        5.Null 类型
          代表空
          本身是一种数据类型, 只不过代表的是 空(啥也没有)
          与undefined类型不同
          使用场景: 在创建 对象 的时候, 如果开始不知道对象内部有什么, 可以给一个 null

2.JS中数据类型的检测

    语法: typeof(要检测的数据类型的值)
          问题: 不能正确检测出 null 这个类型的实际类型, 检测 null 的时候打印结果为 object
          原因:null 代表的含义是 空, 也就是空对象, 所以 typeof 会把他当成一个对象去输出
        例: `var str1 = '100'
            var str2 = 100
            var str3
            var str4 = true
            var str5 = false
            var str6 = null 
            
            console.log(typeof(str1))   // string
            console.log(typeof(str2))   // number
            console.log(typeof(str3))   // undefined
            console.log(typeof(str4))   // boolean
            console.log(typeof(str5))   // boolean
            console.log(typeof(str6))   // object`

3.JS的数据类型转换

    1.转化为Number类型
             1. Number(数据)
                   可以用于任何数据类型, 将其转换为 数字类型
                       字符串转数字
                           如果转换的字符串是纯数字组成的, 那么直接转换为 数字
                           如果转换的字符串是 空字符串或者空白字符串, 那么直接转换为 数字0
                           其他类型的字符串(不是  空---空白---纯数字字符串) 会转换为 NaN
                               NaN: 表示的是一个 number 的数字, 但是没有办法通过常规的数字表明它, 所以只能使用 NaN 来代替(坏掉的数字)
                       布尔值转数字
                           true 转换为 1
                           false 转换为 0
                       undefined 转数字
                           会直接转换为 NaN
                       null 转数字
                           会直接转换为 0
               2. parseInt(数据)       转换为整数
                   会将数据转换为 number类型, 并且值是整数(直接忽略掉小数点以后的值, 并不是四舍五入)
                   在转换的时候, 如果数据是纯数字字符串或者是数字开头的字符串, 那么会转换为数字, 否则就是转换为 NaN
               3. parseFloat(数据)     转换为小数
                   转换结果于 parseInt 类似, 但是在转换小数的时候会保留小数点后的数字
      
               4. 扩展: 在实际开发中  数据 - 0