js基础

78 阅读3分钟

js的组成部分

  1. ES: 定义了 JS 的语法规范, 描述了 语言的基本语法和数据类型
  2. DOM(文档对象模型) 有一套成熟的 操作 DOM 节点的 API, 通过 DOM 可以操作页面中的元素(其实就是标签)
  3. BOM(浏览器对象模型) 有一套成熟的 操作 BOM 的API

js的书写方式

  1. 行内式(不推荐, 了解即可, 这种写法, 代码量多了, 不好维护)

    例: onclick="要执行的 JS 代码" onclick: 单击这个标签的时候 会触发

<button style="width: 100px; height: 100px; background-color: aquamarine;">按钮</button>

  1. 内嵌式 (学习阶段推荐使用, 因为代码量少, 如果代码量多, 不推荐)

    内嵌式的 script 标签一般推荐写在 BODY 标签的尾部

    例:

    当页面打开时, 会从上往下执行时发现, 有一个 alert 弹出框, 弹出的 内容是 小括号里 引号包裹的内容

<script> alert('我是内嵌的 js') </script>

  1. 外链式 ( 目前公司都是外链式, 因为公司项目代码量肯定比较大)

在外部创建一个js文件,通过 引入 例:

<script src="02_测试.js"></script>

js的变量

变量 是 计算机中存储数据的一个标识符, 通过这个标识符可以找到内存中存储的数据

变量就相当于是一个容器, 内部可以存储任意类型的值, 使用变量的时候, 用的是内部存储的数据

使用变量需要用两步
1. 定义变量
    语法: var 变量名
2. 赋值变量
    变量名 = 值

备注: JS 中 一个等号, 叫做 赋值号 例:

    var a  // 定义一个变量, 变量名为 a
    a = 100 //给变量a赋值为100
    //定义变量与赋值变量的简化写法
    var q = 666 // 定义一个变量, 变量名为 q, 并且给这个变量赋值为 666
</script>

变量的命名规则与规范 (面试可能会问)

  1. 规则 (必须遵守的, 如果不遵守会报错)

    在书写变量名的时候, 只能由 数字、字母、下划线、 $符号(英文的) 组成, 并且不能以数字开头

    书写时 区分大小写

    书写变量名时, 不能使用关键字或者保留字作为变量名

    关键字: 在 js 中具有特殊含义的 字母组合
        var     if      for     function
    

    保留字: 在 js 中目前没有特殊含义, 但在将来的某个版本可能会用到, 所以此时也不能使用

  2. 规范 (建议遵守, 如果不遵守也不会报错)

    变量名具有含义, 符合见名知意

    尽量不要用字母作为变量名, 除非是练习

    多个单词的组合名时, 使用驼峰命名法(多个单词拼接时, 后一个单词的首字母大写) bigbox -> bigBox

js的基本数据类型

1. Number 类型

数字类型: 不区分 整数浮点数

例:

<script>
        var a = 100
</script>

2. String 类型

字符串类型: 只要是引号包裹的内容, 就是字符串类型(引号不区分单双引号)

例:

<script>
        var a = '你好'
        var b = "你好"

</script>

3. undefined 类型

undefined 类型: 他是一个数据, 表明未定义

变量只定义, 不赋值的时候, 默认的值就是 undefined 表明未定义

例:

<script>
        var a = undefined
        var b

</script>

4. Boolean(布尔类型) 类型 (后续更多的使用在 判断上)

只有两个值 一个是 true 一个 是 false

true: 代表真, 正确的

false: 代表假, 错误的
例:
<script>
        var a = true
        var b = false

</script>

5. Null 类型

代表空

本身是一种数据类型, 只不过代表的是 空(啥也没有)
<!-- !Null 和 undefined 不同!!!
使用场景: 在创建 对象 的时候, 如果开始不知道对象内部有什么, 可以给一个 null
类似于在创建 变量的时候, 只定义, 不赋值默认是一个 undefined -->

例:

<script>
var nu = null   // 定义一个变量, 名为 nu, 值为 null类型, 代表空
</script>

js的数据类型检测

语法: typeof(要检测的数据类型的值)

问题: typeof 的问题, 不能正确检测出 null 这个类型的实际类型, 检测 null 的时候打印结果为 object

null 代表的含义是 空, 也就是空对象, 所以 typeof 会把他当成一个对象去输出

例:

<script>
 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

</script>