前端 | 萧井陌JS学习笔记Ⅰ：变量、循环、函数



== 好吧，现在返回来看，乱七八糟也不知道在讲什么，记录也还是放着吧

js的变量

  • 变量名（函数名也是变量名的一种）命名规则
  • 变量名只能包含字母（汉字也是字母）、下划线、数字、$
  • 不能以数字开头
  • 现代的 JavaScript 中汉字才是合法的变量名字母
  • 变量名不能是系统保留字（while、function、var等）

js的数据类型

  • 程序中的数据不仅仅只有数字一种
  • 还有很多其他类型的数据，可以将它们显示出来
  • 数字类型是 Number，又可以分为 整型(整数) 和 浮点型(小数)
  • 双引号或单引号包起来的字符就是字符串

js实例讲解循环、函数、判断

var变量的用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 普通画一个三角形
forward(50)
right(120)
forward(50)
right(120)
forward(50)
right(120)

// 使用变量简介表达
var x = 50
var angle = 120
// 执行三次
forward(x)
right(angle)
forward(x)
right(angle)
forward(x)
right(angle)

循环

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 使用循环画一个三角形
var n = 3
var angle = 120
var x = 50
var i = 0
while (i < n) {
    i = i + 1
    forward(x)
    right(angle)
}

// 使用循环画一个多边形
var x = 50
var angle = - ((n - 2) * 180 / n) + 180
var n = 9
var i = 0
while (i < n) {
    forward(x)
    right(angle)
    i = i + 1
}

函数

定义一个函数square

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 画一个三角形
var square = function() {
    var x = 50
    var n = 3
    var angle = 120
    var i = 0
    while (i < n) {
        forward(x)
        right(angle)
        i = i + 1
    }
}

square()
// 可以多次调用函数
forward(50)
square()

可以定义函数的参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 画一个三角形
// square(length)
var square = function(length) {
    // length 作为函数的参数，只能在函数内部可见
    var x = length
    var n = 3
    var angle = 120
    var i = 0
    while (i < n) {
        forward(x)
        right(angle)
        i = i + 1
    }
}

square(50)

函数可以有多个参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 多个参数用逗号隔开
// 画一个正方形，x, y 是正方形左上角坐标，len为边长
// square(x, y, len)
var square = function(x, y, len) {
    jump (x, y)
    setHeading(0)
    var i = 0
    while (i < 4) {
        forward(len)
        right(90)
        i = i + 1
    }
}

square(0, 0, 50)

在其他函数中调用之前的函数

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
// 从 0, 0 点开始，边长为30，正方形间隔为 10 像素，画五个
// x, y 为第一个正方形左上角坐标 
// n 是正方形个数 
// space 是正方形间距
// len 是正方形的边长
// square5(x, y, n, space, len)
var square = function(x, y, len) {
    jump(x, y)
    setHeading(0)
    var i = 0
    while (i < 4) {
        forward(len)
        right(90)
        i = i + 1
    }
}

var square5 = function(x, y, n, space, len) {
    jump(x, y)
    setHeading(0)
    // 0 40 80 120 160
    var i = 0
    while (i < n) {
        // 画 n 个正方形
        var x = i * (len + space)
        var y = 0
        square(x, y, len)
        i = i + 1
    }
}

square5(0, 0, 5, 10, 30)


// 以上边函数为基础，画 3 * 3 正方形矩阵
// x, y 为第一个正方形左上角坐标 
// n 是横向正方形个数 
// m 是纵向正方形个数
// space 是正方形间距
// len 是正方形的边长
// square_square(x, y, space, len, n, m)
var square = function(x, y1, len) {
    jump(x, y1)
    setHeading(0)
    var i = 0
    while(i < 4) {
        forward(len)
        right(90)
        i = i + 1
    }
}

var square5 = function(x, y1, n, space, len) {
    jump(x, y1)
    setHeading(0)
    // 0 40 80 120 160
    var i = 0
    while(i < n) {
        // 画 n 个正方形
        var x = i * (len + space)
        var y = 0
        square(x, y1, len)
        i = i + 1
    }
}

var square_square = function(x, y, space, len, n, m) {
    jump(x, y1)
    setHeading(0)
    var i = 0
    while(i < m) {
        // 对新的坐标进行赋值，相应的改变上边两个变量的参数、jump值
        var x1 = x
        var y1 = i * (len + space) + y
        square5(x1, y1, n, space, len)
        i = i + 1
    }
}

square_square(0, 0, 10, 30, 3, 3)

调用函数画正多边形

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// length 表示边长，bmuu 表示边数
// polygon(length, bmuu)
var polygon = function(length, bmuu) {
    // length 作为函数的参数，只能在函数内部可见
    var x = length
    var n = bmuu
    var angle = 180 - ((n - 2) * 180 / n)
    var i = 0
    while(i < n) {
        forward(x)
        right(angle)
        i = i + 1
    }
}

polygon(50, 4)

定义函数两种形式

1
2
3
4
5
6
// 函数申明语句
function square () {
}
// 函数表达式
var square = function() {
}

判断

选择控制

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
// if 可以根据情况选择性执行某些语句
var grade = 3
if(grade < 7) {
    // 采用浏览器的console.log, 得到返回值
    var log = function() {
        console.log.apply(console, arguments)
    }
    log('小学生')
}


// 选择控制的多种用法

// 只有 if
if (1 > 2) {
    log('条件成立')
}

// if 带 else
if (1 > 2) {
    log('条件成立')
} else {
    log('条件不成立')
}

// 多个 if else
var grade = 8
if (grade < 7) {
    log('小学生')
} else if (grade < 10) {
    log('初中生')
} else {
    log('高中生')
}

判断语句的用途

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
43
44
45
46
// 求绝对值
var n = -1
if (n < 0) {
    n = -n
}

// 判断奇偶
var n = 1
if (n % 2 == 0) {
    log('偶数')
} else {
    log('奇数')
}

// 比较运算和逻辑操作
// if 判断的条件其实是一个值, 叫布尔值
// 布尔值只有两种结果: 真, 假
// JavaScript 中, 这两种值为: true, false

// 一共有 7 种比较运算
//    ===   严格相等
//    ==    相等
//    !=    不等
//    <     小于
//    >     大于
//    <=   小于等于
//    >=   大于等于
1 === '1'
false

1 == '1'
true


// 三中逻辑操作
//    &&    与 
//    ||    或
//    !     非
1 == 1 && 2 == 2
true
1 == 1 && 1 == 2
false
1 == 1 && 1 == 2
true
! 1 == 1
false

函数返回值

  • 函数不仅可以合并操作重复性的代码, 还可通过计算得到一个结果
  • 返回值的意思是函数调用的结果是一个值, 可以被赋值给变量, 这个结果就是函数的返回值