01-JS 基本入门

image-20251125100829463

1. 基础

1.1 发展历史

image-20251204170503752

1.2 基本组成

image-20251204170632221

image-20251204170737072

总结：JS 就是通过固定的语法去操作 浏览器 和 标签结构 来实现网页上的各种效果。

1.3 能干什么

  1. 实现网页效果、表单验证、轮播图…
  2. 实现与H5配合实现游戏，如水果忍者…
  3. 实现应用级别的程序
  4. 实现图表统计效果
  5. 实现人工智能，如面部识别
  6. 后端开发、app开发、桌面端开发…

1.4 代码书写位置

  • 行内式（不推荐）
1
2
3
4
5
6
<body>
    <!-- 行内式(不推荐) -->
    <button onclick="alert('hello world')">点我</button>
    <br>
    <a href="javascript: alert('hello, world!')">点我</a>
</body>
  • 内嵌式
1
2
3
4
5
<!-- script标签可以放在head中，也可以放在body中 -->
<script>
    alert("我是一个弹出层")
    console.log("hello,world")
</script>
  • 外链式【推荐】
1
2
3
<!-- 一个页面可以引入多个js文件 -->
<script src="./js/hello1.js"></script>
<script src="./js/hello2.js"></script>

1.5 注释与规范

  • Ctrl + / 单行注释

    1
    // 单行注释

  • Ctrl + Shift + / 或 Alt + Shit + A 多行注释

    1
    2
    3
    4
    /*
      多行
      注释
    */

  • 每一行书写可以不加分号 ; 也可以加(两句在同一行是必须加)，按照规范全部都不加分号即可

1.6 变量(★)

语法：

1
var 变量名 = 值

示例：

1
2
3
4
5
6
7
8
9
<script>
    // 先定义
    var x
    // 后赋值
    x = 100

    var y = x + 2000
    console.log(y)
</script>

命名规则（必须遵守，不遵守就报错）：

  1. 一个变量名称可以由数字、字母、英文下划线_、美元符号$ 组成
  2. 严格区分大小写
  3. 不能由数字开头
  4. 不能是 保留字 或 关键字
  5. 不能出现空格

命名规范（建议遵守）：

  1. 变量名尽量有意义（语义化，见名知意）
  2. 遵循驼峰命名规则，由多个单词组成的时候，从第二个单词开始首字母大写
  3. 不要使用中文

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script>
    // 先定义
    var x
    // 后赋值
    x = 100

    var y = x + 2000
    console.log(y)


    // 命名规则示例
    var a1, a2, a_, _a, a$b, $a1, $a2, $A2
    var A1, a1
    // 命名规范示例
    var username, password, age, email, name
    var zhanghao, mima
    var productNumber, userInfo //商品数量, 用户信息，驼峰规则

    var 我 = "jerry"
    console.log(我)  //html5后好使，但不建议
</script>

1.7 数据类型(★)

基本类型：

  • Number，数字类型，eg: 18, 12.5(浮点数), 2e3(2*10^3), 十进制, 八进制, 十六进制, 二进制
  • String，字符串类型，需加双引号
  • Boolean，布尔类型，取值 true/false
  • Undefined，声明了未赋值，取值 undefined
  • Null，空值（明确未来做为对象类型使用，提前赋值为null）
  • Symbol，

复杂类型（对象类型）：

  • object

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<script>
    /* Number */
    var age = 18
    console.log(age + 20)

    var price = 12.5
    console.log(price)

    var year = 2e3   //2*10^3
    console.log(year)

    var hex = 0xff   //十六进制：0-9,a-f
    var oct = 0o77   //八进制：0-7
    var dec = 99     //十进制：0-9
    var bin = 0b11   //二进制：0-1
    console.log(hex, oct, dec, bin)

    /* 字符串在浏览器控制台颜色与数字不同，留意观察 */
    var num1 = 10
    var num2 = "20"
    console.log(num1 + num2)  //类型转换了，输出：1020，而不是30

    /* String */
    var str = "hello"
    console.log(str)

    /* Boolean */
    var isChecked = true
    var isVisited = false
    console.log(isChecked, isVisited)

    /* Undefined: 声明了但为赋值的变量 */
    var which
    console.log(which)  //undefined
    which = 100
    console.log(which)  //100

    /* Null: 明确未来做为对象类型使用，提前给null */
    var whichObject = null
    whichObject = {name: "Jerry"}
    console.log(whichObject)      //{name: 'Jerry'}
</script>

1.7.0 typeof() 类型检测

typeof 变量 或 typeof(变量) 变量类型判断，结果一定是个字符串。

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
    var a
    console.log(typeof a)    //写法1
    console.log(typeof(a))   //写法2

    // typeof 的结果是个字符串类型
    console.log(typeof typeof a)  //结果一定是 string 字符串

    var b
    console.log(typeof b)   //undefined
    var c = null
    console.log(typeof c)   //object
</script>

1.7.1 类型转数字

  1. Numnber(变量)
    • 可以把一个变量强制转换成数值类型
    • 可以转换小叔，会保留小数
    • 可以转换布尔值
    • 遇到不可转换的都会返回 NaN
  2. parseInt(变量)
    • 从第一位开始检查，是数字就转换，直到一个不是数字的内容
    • 开头就不是数字，那么直接返回 NaN
    • 不认识小数点，只能保留整数
  3. parseFloat(变量)
    • 从第一位开始检查，是数字就转换，直到一个不是数字的内容
    • 开头就不是数字，那么直接返回 NaN
    • 认识一次小数点
  4. 除了加法以外的数学运算
    • 运算符两边都是可运算数字才行
    • 如果运算符任何一边不是一个可运算的数字，那么就会返回 NaN
    • 加法不可以用

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<script>
    var a = "100"
    var a1 = Number(a)
    console.log(a, a1)                //100 100
    console.log(typeof a, typeof a1)  //string number

    var s = "abc"
    var s1 = Number(s)
    console.log(s, s1)                //abc Nan
    console.log(typeof s, typeof s1)  //string number

    var b = false
    var b1 = Number(b)                //true-1, false-0
    console.log(b, b1)                //false 0
    console.log(typeof b, typeof b1)  //boolean number

    var n
    var n1 = Number(n)
    console.log(n, n1)                //undefined NaN
    console.log(typeof n, typeof n1)  //undefined number

    var c = "125px"
    var c1 = parseInt(c)
    console.log(c, c1)                //125px 125
    console.log(typeof c, typeof c1)  //string number

    var d = "1.25rem"
    var d1 = parseInt(d)
    console.log(d, d1)                //1.25rem 1
    console.log(typeof d, typeof d1)  //string number

    var e = "1.25rem"
    var e1 = parseFloat(e)
    console.log(e, e1)                //123.45rem 1.25
    console.log(typeof e, typeof e1)  //string number

    //非加号即可转数字 -0 /1 *1
    var x = "100"
    var x1 = x - 0
    console.log(x, x1)                //100 100
    console.log(typeof x, typeof x1)  //string number
</script>

1.7.2 类型转字符串

  1. 变量.toString()
    • 有一些数据类型不能使用 toString() 方法，比如 undefined 和 null
  2. String(变量)
    • 所有数据类型都可以
  3. 使用加法运算
    • 在js里面 + 号有两个含义
    • ① 字符串拼接：只要 + 任意一边是字符串，就会进行字符串拼接
    • ② 加法运算：只要 + 两边都是数字的时候，就会进行数学运算

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<script>
    var a = 100
    var a1 = String(a)
    console.log(a, a1)               //100 100
    console.log(typeof a, typeof a1) //number string

    var b
    var b1 = String(b)
    console.log(b, b1)               //undefined undefined
    console.log(typeof b, typeof b1) //undefined string

    var c = null
    var c1 = String(c)
    console.log(c, c1)               //null null
    console.log(typeof c, typeof c1) //object string

    var d = 100
    var d1 = d.toString()
    console.log(d, d1)               //100 100
    console.log(typeof d, typeof d1) //number string

    //var e = null
    //var e1 = e.toString()            //null不支持toString，报错！！！
    //console.log(e, e1)
    //console.log(typeof e, typeof e1)

    var x = 100
    var y = x + ""
    console.log(x, y)                //100 100
    console.log(typeof x, typeof y)  //number string
</script>

1.7.3 类型转布尔

  1. Boolean(变量)
    • 在js中，只有''、0、null、undefined、NaN，这些是 false
    • 其他都是 true（空格也是 true）

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
    var a = ""
    var b = 0
    var c = null
    var d
    var e = NaN
    console.log("Boolean(a) = ", Boolean(a))        //false
    console.log("Boolean(b) = ", Boolean(b))        //false
    console.log("Boolean(c) = ", Boolean(c))        //false
    console.log("Boolean(d) = ", Boolean(d))        //false
    console.log("Boolean(e) = ", Boolean(e))        //false

    var space = " "
    console.log("Boolean(space) = ", Boolean(space)) //true
</script>

1.8 运算符

1.8.1 数学运算符

+

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

-

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

*

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

/

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

%

  • 执行取余运算
  • 会自动把两边都转换成数字进行运算
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
    /* + - * / */
    var a = 10
    var b = 20
    console.log(a + b) //30

    console.log(1 + "2"*3 + 4)  //11

    /* % */
    var x = 10
    var y = 3
    console.log(x % y) //1 (余数)
    //应用：时间转换
    var d = 1000 //分钟
    var h = parseInt(d / 60)  //小时
    var m = d % 60            //分钟
    console.log(h + ":" + m)  //16:40
</script>

1.8.2 赋值运算符

=

  • 就是把 = 号右边的赋值给等号左边的变量
  • var num = 100，就是把100赋值给num变量，那边num变量的值就是100

+=

  • a += 10 等价于 a = a + 10

-=

  • a -= 10 等价于 a = a - 10

*=

  • a *= 10 等价于 a = a * 10

/=

  • a /= 10 等价于 a = a / 10

%=

  • a %= 10 等价于 a = a % 10
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
    var a = 10
    console.log(a) //10

    //交换两个数
    var m = 5
    var n = 6
    var c
    c = m
    m = n
    n = c
    console.log(m, n)  //6 5

    /* += -= *= /= %= */
    var num = 1
    num += 1
    console.log(num)  //2
</script>

1.8.3 比较运算符

结果一定是 boolean 值，即 true 或 false

== 等于，只比较值

===等于，比较的是值和数据类型

!= 不等于，只比较值

!== 不等于，比较的是值和数据类型

> 大于

< 小于

>= 大于等于

<= 小于等于

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script>
    var sum = 100
    console.log(sum > 200) //false

    var age = "22"
    console.log(age == 22)  //true
    console.log(age === 22) //false
    //强制转换
    console.log(parseInt(age) === 22) //true

    console.log("----------")
    console.log(true == 1)  //true
    console.log(true === 1) //false

    console.log("----------")
    console.log(""==0)         //true
    console.log(""===0)        //false
    console.log(undefined==0)  //false
    console.log(undefined===0) //false
</script>

1.8.4 逻辑运算符

&& 与 运算

|| 或 运算

! 非，即取反 运算，true 变 false，false 变 true

  • 特殊1：!!a 这种写法是为了，把 a 转换为布尔值
  • 特殊2：&&， || 短路用法，与 遇到第一个条件为假，则不执行后面的条件运算；或 遇到第一个条件为真，则不执行后面的条件运算

1.8.5 自增自减运算符

++ 自增运算，前置++ 和 后置++

  • 前置++，即 ++a，会先+1，再返回
  • 后置++，即 **a++**，会先返回，再+1

-- 自减运算，前置– 和 后置 –

  • 前置–，即 –a，会先-1，再返回
  • 后置–，即 **a–**，会先返回，再-1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
    /* ++ 与 -- 同理 */
    var a = 10
    console.log(++a) //11
    console.log(a++) //11
    console.log(a)   //12
    /* 考验1 */
    var n = 10
    var res = ++n + n++ + ++n;  //11 + 11 + 13
    console.log(n, res);        //13 35
    /* 考验2 */
    var m = 10
    res = m++ + --m + m-- + ++m;      //10 + 10 + 10 + 10
    console.log(m, res)               //10 40
</script>

1.8.6 三目运算符

三目运算，即由两个运算符号组成的逻辑运算语句。

语法：条件 ? 条件为true时执行运算1 : 条件为false的时候执行运算2

1
2
3
4
5
var age = 18;
age > 18 ? alert('已经成年') : alert('没有成年')

//满200减10，满100减5
sum >= 200 ? sum - 10 : (sum >= 100 ? sum - 5 : sum)

1.9 分支结构

js 代码都是从上往下，从左往右执行的顺序，条件分支可以控制代码执行的逻辑。

1.9.1 if-else 分支语句

语法：

1
2
3
if (条件1) {
  条件1为true，要执行的代码
}

扩展：

1
2
3
4
5
6
7
8
9
if (条件1) {
  条件1为true，要执行的代码
} else if (条件2) {
  条件2为true，要执行的代码
} else if (条件n) {
  条件n为true，要执行的代码
} else {
    条件1,2,n都为false，要执行的代码
}

1.9.2 switch-case 分支语句

语法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
switch (变量) {
    case 值1:
        变量===值1时，要执行的代码
        break
    case 值2:
        变量===值2时，要执行的代码
        break
    case 值n:
        变量===值n时，要执行的代码
        break
    default:
        没有匹配的值时，默认执行的代码
        break
}

注意：

  • switch 的判断变量 与 值是否相等时，使用的是 === 值和类型都相等
  • switch 语句中判断的变量 和 值 中尽量不要写表达式，写具体的值是规范，根据情况使用
  • break 尽可能不能省略，除非要匹配多个 case 条件，但是可读性会降低，根据情况使用，如加注释

1.9.3 while 循环语句

先进行条件判断，决定是否执行以及执行次数。

组成：①初始化 ②条件判断 ③要执行的代码 ④自身改变

语法：

1
2
3
while (条件) {
    满足条件就执行的代码
}

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script>
    var n = 0

    while(n < 10) {
        console.log("hello")
        n++
    }
    /* 案例1：求1-100所有数字的和 */
    var x = 1
    var sum = 0
    while(x <= 100) {
        sum += x
        x++
    }
    console.log(sum) //5050

    /* 案例2：求一个数字的阶乘 */
    var y = 5
    var res = 1
    while(y > 0) {
        res *= y
        y--
    }
    console.log(res);  //120
</script>

1.9.4 do-while 循环语句

先不管条件，先执行一次，然后再开始进行条件判断。

语法：

1
2
3
do {
   第一次执行和条件成立循环执行的代码
} while (条件)

示例：

1
2
3
4
5
6
7
8
9
10
<script>
    do{
        var res = prompt("请输入你的名字：")
        if (res) {
            document.write(res)
        } else {
            alert("你还没有输入名字！")
        }
    } while(!res)
</script>

1.9.5 for 循环语句

语法：

1
2
3
for (var i = 0; i < 10; i++) {
    要执行的代码
}

示例：

1
2
3
4
5
6
7
8
9
for(var i = 0; i < 10; i++) {
    console.log("i = ", i)
}

var sum = 0
for(var i = 1; i <= 100; i++) {
    sum += i
}
console.log(sum)

1.9.6 break 终止循环

在循环没有进行完毕的时候，可以根据其他条件通过break进行提前终止循环。

跳出循环，就可以使用该关键字。

示例：

1
2
3
4
5
6
for (var i = 0; i < 10; i++) {
    if (i === 5) {
        break
    }
    要执行的代码
}

1.9.7 continue 结束本次循环

在循环中，把循环的本次跳过去，继续执行后续的循环。

跳过本次循环，就可以用该关键字。

示例：

1
2
3
4
5
6
for (var i = 0; i < 10; i++) {
    if (i === 5) {
        continue
    }
    要执行的代码
}

案例1：求质数

质数，只能被1和自身整除的自然数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
    var n = 19;
    var isZhiShu = true
    for(var i = 2; i <= n/2; i++) {
        if (n % i === 0) {
            isZhiShu = false
            break
        }
    }
    if (isZhiShu) {
        console.log("是质数")
    } else {
        console.log("不是质数")
    }
</script>

案例2：九九乘法表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
    span{
        display: inline-block;
        width: 100px;
        height: 30px;
        font-size: 20px;
    }
</style>
<script>
    for(var m = 1; m <= 9; m++) {
        for(var n = 1; n <= m; n++) {
            document.write("<span>" + n + " * " + m + " = " + m*n + "</span>")
        }
        document.write("<br>")
    }
</script>

效果：

image-20251205174952687

1.10 函数

1.10.1 语法

定义一个函数：

  • 声明式：【推荐】(会预解析) ，定义与调用无所谓先后，先调用或后调用都可以生效
1
2
3
function fn() {
    //代码
}
  • 赋值式：只能先定义后调用
1
2
3
var fn = function() {
    //代码
}

作用：代码块进行封装，方便使用时，随时调用。

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
    /* ①声明式 */
    function test1() {
        console.log("我是test1函数")
    }
    /* 函数调用 */
    test1()

    /* ②赋值式 */
    var test2 = function() {
        console.log("我是test2函数")
    }
    /* 函数调用 */
    test2()
</script>

1.10.2 参数

函数传递值使用 参数，分为

  • 形参：函数定义时()内写的参数，用于接收实参
  • 实参：调用时可以传参，可以不传参
1
2
3
4
5
6
/* 函数定义 */
function fn (形参) {
    //代码
}
/* 函数调用 */
fn(实参)

示例：

1
2
3
4
5
6
7
8
9
function fn (a, b) {
    if (a === undefined || b === undefined) {
        //console.error("请传入参数a,b")
        a = 0
        b = 0
    }
    console.log("函数fn的参数值是：", a, b)
}
fn(1, 2)

函数内对与参数传递时，习惯的两种操作：

  1. 给默认值
  2. 给提示和警告

1.10.3 返回值

return 返回的意思，给函数一个 返回值 和 终端函数

  • 如果函数不需要返回值时，可以不写
  • return 后面的代码，不会执行
1
2
3
4
function fn() {
    var res = 代码
    return res
}

1.10.4 预解析

js 代码在运行的时候，会经理两个环节 解释代码 和 执行代码

  • 解释代码：预解析，会将声明和定义提前进行解析，调用时则不分先后，预解析有两类
    • 声明式函数
    • var 关键字
  • 执行代码

1.10.5 重名问题

重名时，同一个script标签内才有同名覆盖效果：

  • 同为函数的情况，在预解析阶段逐个解析，后来的会覆盖前面的。切记声明提升(覆盖)无法跨 script 标签。
  • 变量与函数名相同时
    • ① 变量先被赋值的话，此时变量定义和函数定义预解析完后，名字继续被赋值，则为赋值结果
    • ② 函数先被调用的话，此时变量定义和函数定义预解析完后，先执行函数调用，再继续赋值

1.10.6 作用域

全局作用域

  • 最大的作用域
  • 定义的变量可以在任何地方使用，可以跨script标签
  • 页面打开的时候，浏览器会自动给我们生成一个全局作用域 window
  • 这个作用域会一直存在，直到页面关闭才销毁

局部作用域

  • 局部作用域只能在局部作用域的内部使用
  • 在JS中只有函数能生成一个局部作用域，别的都不行
  • 每一个函数，都是一个局部作用域

访问规则 就近访问原则。

访问规则：

自己的作用域 >> 上一级作用域 >> 继续上一级作用域 >> 全局作用域 >> 都没有就报错(该变量 is not defined)

赋值规则 就近赋值原则。

赋值规则：

自己的作用域 >> 上一级作用域 >> 继续上一级作用域 >> 全局作用域 >> 都没有就将其定义为全局变量，再给它赋值

2. 复杂数据类型

2.1 对象数据类型

04_大前端 > 02_CSS
#JavaScript #JS
01-JS 基本入门
https://janycode.github.io/2017/04/28/04_大前端/03_JavaScript/01-JS 基本入门/
作者
Jerry(姜源)
发布于
2017年4月28日
许可协议