Zephon Blog
0%

第六天

发表于 更新于 分类于
本文字数： 10k 阅读时长 ≈ 10 分钟

第六天

Javascript

javascript输出

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript</title>
</head>
<body>
    <script>
        alert("hello word");//不推荐使用
        document.write("hello word");
        document.writeln("hello word");
        document.write("<h2>Hello<h2>")
        //控制台输出
        console.log("控制台信息")
        //控制台输出对象
        console.dir(document);
        prompt("请输入年龄：");
        confirm("确认提交么？");//不推荐使用
    </script>
</body>
</html>

javascript数据类型

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
81
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript基础-数据类型</title>
</head>

<body>
    <script>
        //var 定义变量，var可以不写，不推荐，严格模式不可以不写，不写就是全局变量
        var bar = 1,
            foo = 10,
            o = {
                name: "a"
            };
        console.log(bar * foo % 3);
        console.log(bar++ + (++bar)); //bar++=1,bar->2,++bar=3
        //此时bar=6
        bar += 6;
        foo = 5 ? 3 : 6;
        console.log(bar + foo);
        console.log(1 && 1 && 0);
        console.log(1 || 0 != 0);

        //javascript数据类型
        //布尔、数值、字符串、对象、null、undefined
        var bar = 1,
            foo = "str",
            arr = [1, 2, 3];
        // 返回变量数据类型
        console.log(typeof bar);
        console.log(typeof foo);
        console.log(typeof true);
        console.log(true + false); //结果是1，自动转换成1+0
        console.log(typeof o); // 对象
        console.log(typeof arr); //数组
        var u;
        console.log(typeof u);
        console.log(typeof null); //结果是object 但null是null数据类型
        hw();
        console.log(typeof hw); //结果是function
        function hw() {
            return "hello";
        }
        // 数据类型转换
        console.log(isNaN("123")); //"123"自动转换成123
        console.log(isNaN(true)); //true自动转换成1
        console.log("11" + 2); // "112" 字符串+数字->数字自动转字符串
        console.log(2 - "1"); //1 数字-字符串->字符串自动转数字
        console.log(2 + "a"); //"2a"

        console.log(typeof NaN); //number，巨坑...
        console.log(typeof "123"); //string

        //引用类型与普通值类型
        var a = [1, 2]; //a的数据类型是数组，a是引用类型
        var b = a; //b就相当于a的别名，和a指向同一内存空间
        b[0] = 1000;
        console.log(a[0]); //1000;

        //作用域
        var foo = 5;

        function main() {
            //alert(m);//报错，未定义过
            console.log(foo); //输出undefined,后定义的变量 变量提升
            var foo = 2;
        }
        main();

        (function () {
            var a = b = 5;//a是局部变量，b是全局变量(b的前面没有var)
        })(); //自执行函数:定义一个函数并执行它
        console.log(b); //5
    </script>
</body>

</html>

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript 逻辑</title>
    <style>
        div {
            width: 150px;
            height: 150px;
            border: 1px solid #c00;
            font-size: 40px;
            text-align: center;
            line-height: 150px;
            float: left;
            margin: 8px;
        }
    </style>
</head>

<body>
    <script>
        for (var i = 0; i < 100; i++) {
            if (i % 7 != 0 && i % 10 != 7 && parseInt(i / 10) != 7)
                document.write("<div>" + i + "</div>");
            else
                document.write("<div></div>");
        }

        //作业：使用while写一个函数，求和，参数为n，返回值是1到n的和
        function sum(n){
            var s=0;
            var i=1;
            while(true){
                if(i==n+1)break;
                s+=i;
                i++;
            }
            return s;
        }
        alert(sum(100));
    </script>
</body>

</html>

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
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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript 事件</title>
    <style>
        #box {
            width: 300px;
            height: 300px;
            color: #fff;
            background-color: #c00;
            font-size: 16px;
            margin: 10px;
        }
    </style>
</head>

<body>
    <button>变宽</button>
    <button>变窄</button>
    <button>出现</button>
    <button>消失</button>
    <button>随机变</button>
    <div id="box"></div>

    <script>
        var box = document.getElementById("box"); //获得#box，结果唯一
        var button = document.getElementsByTagName("button"); //根据标签名称获得所有button，结果是类数组(array-like)
        button[0].onclick = function () {
            // font-size->fontSize 复杂的css属性在js里要改成驼峰式命名
            // style是html属性，可修改css，名称和html属性相同，例外的是class(className) 和for(For);
            box.style.width = 100 + "%";
        }
        button[1].onclick = function () {
            box.style.width = 300 + "px";
        }
        button[2].onclick = function () {
            box.style.display = "block";
        }
        button[3].onclick = function () {
            box.style.display = "none";
        }
        button[4].onclick = function () {
            //Math.random()//生成一个[0,1)的随机数
            //Math.floor:取整
            //Math.round:四舍五入
            var w = Math.floor(Math.random() * 900 + 100) + "px";
            var h = Math.floor(Math.random() * 900 + 100) + "px";
            box.style.width = w;
            box.style.height = h;
            //作业：随机字体大小(1-90)，随机背景颜色，随机margin
            box.style.fontSize = Math.floor(Math.random() * 90 + 1) + "px";
            var r = Math.floor(Math.random() * 256);
            var g = Math.floor(Math.random() * 256);
            var b = Math.floor(Math.random() * 256);
            box.style.backgroundColor = "rgb(" + r + "," + g + "," + b + ")";

            var m = Math.floor(Math.random() * 10);
            box.style.margin = m + "px";

            box.innerHTML = "width:" + w + "<br>height:" + h + "<br>color:" + "rgb(" + r + "," + g + "," + b +
            ")"; //Dom元素内部的html
            //box.innerText//内部文字
        }
    </script>
</body>

</html>

数组

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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript array</title>
</head>

<body>

    <script>
        // 数组的创建
        var arr = [1, 2, 3, 4];
        var arr2 = new Array(1, 2, 3, 4);
        var arr3 = new Array(8); //8个元素的数组
        //es6 array
        var arr4 = Array.of(8); //定义只有一个元素并且是8的数组

        console.log(arr);
        console.log(arr2);
        console.log(arr3);

        // 数组的成员和函数
        arr[8] = 2000;
        // 数组的成员之间的数据类型可以不同
        arr['a'] = 'b'; //正确，非数字下标的数组成员不计算在数组长度内
        console.log(arr.length);

        // 数组的循环
        for (var i = 0; i < arr.length; i++) {
            console.log(i, arr[i]);
        }

        //值为undefined的不输出，index为字符串的可以输出
        //es6
        for (var v in arr) {
            console.log(v);
        }

        // i从1开始
        for (var i of arr2) {
            console.log(i - 1, arr2[i - 1]);
        }

        // 值为undefined不输出
        var narr = arr.forEach(function (v, i) {
            console.log(i, v);
        });

        console.log(arr.constructor == Array); //true 通过构造函数判断一个变量是否为数组
        console.log(arr instanceof Array); //true 判断一个变量是否是一个对象的实例
        console.log(Array.isArray(arr)); //es6,判断是否是数组

        console.log(typeof arr); //输出object，无法判断是否是数组

        //数组的方法
        arr.push("10"); //在数组的后面加
        arr.pop(); //从数组里删除最后一个元素
        arr.unshift("99"); //在数组的最前面增加
        arr.shift(); //在数组的前面删除
        console.log(arr.indexOf(4)); //当没找到时，indexof()返回-1
        var n = arr.slice(2, 4, arr);//从arr中截取数组的片断，从[2,4)，返回值为截取的新数组，不影响的原有的数组
        console.log(n);
        var n = arr.splice(2,3,arr);//从arr中删除数组的片段，从2开始，删除3个元素，返回删除的元素组成的数组，影响原有的数组
        console.log(n);
        console.log(arr.join("-"));//将数组的元素用连接符“-”连接
        console.log(arr.concat(arr).reverse()
        );//concat 将两个数组合并为一个数组 reverse倒序

        console.log(arr);

        var arr = [33,23,66,77,88,54,32];
        var rs = arr.some(function(v,i){//some存在v>60的元素; every每个元素都>60
            return v>60;
        });
        var rs = arr.sort(function(a,b){
            return a-b;//升序
        });

        var rs = arr.filter(function(v,i){
            return v>70&&v<90;//找出>70且<90的元素
        });

        //根据已有数组生成一个该数组的映射(新的数组)
        var rs = arr.map(function(v,i){
            return v*i+2;
        });

        var rs = arr.reduce(function(pre,cur){
            return pre+cur;
        });
        console.log(rs);
    </script>
</body>

</html>

字符串

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript string</title>
</head>
<body>
    <script>
        var str = "hello word js,js is good";
        console.log(str.length);
        str[5]="Y";//不能修改字符串的内容
        console.log(str.charAt(6));
        console.log(str[6]);//只能读，不能写
        console.log(str.indexOf("js"));
        console.log(str.substring(3,5));//截取[3,5)内容，第二个参数不写代表到最后，不推荐substr，不标准
        console.log(str.slice(3));

        var arr = str.split(" ");
        var arr = str.split();
        var arr = str.split("");//拆成一个个字母
        console.log(arr);
        //题目：写一个方法判断输入的参数是不是回文
        function fun(str){
            return str==str.split("").reverse().join("");
        }
        console.log(fun("abcba"));
        console.log(str.trim())//去空格
        console.log(str.toUpperCase);//变大写字母
    </script>
</body>
</html>

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
43
44
45
46
47
48
49
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Object</title>
</head>

<body>
    <script>
        var o = {
            name: 'Auer',
            age: 18,
            gender: 'm',
            bir:function(){
                return 2001;
            }
        };
        console.log(o.name, o['age']);//对象的属性
        console.log(o.bir());//对象的方法
        console.log(o.__proto__);
        //对象的遍历，k:key，键
        for( k in o){
            console.log(k,o[k]);
        }
        //JS内部对象，Math、Date
        var date = new Date();//获得当前时间，获得的是客户端时间
        console.log(d);
        //显示当前时间，格式为yyyy-mm-dd hh:mm:ss
        //d.getMonth()返回值从0开始
        //d.getDay()返回星期几
        //d.getDate()返回几日
        var y = date.getFullYear();
        var m = date.getMonth()+1;
        var d = date.getDate();
        var h = date.getHours();
        var M = date.getMinutes();
        var s = date.getSeconds();
        function fun(num){
            if(num<10)num='0'+num;
            return num;
        }
        document.write(y+"-"+fun(m)+"-"+fun(d)+" "+fun(h)+"-"+fun(M)+"-"+fun(s));
    </script>
</body>

</html>