1. 首页
  2. 百科
  3. 前端后端

JavaScript的相关知识点学习与实践一

七微电脑 /bangbangt • • 前端后端

1.数组的学习

1.1利用new创建数组

JavaScript的相关知识点学习与实践一

1.2利用数组字面量来创建数组

JavaScript的相关知识点学习与实践一

必须用逗号进行分割

1.3追加数组元素

JavaScript的相关知识点学习与实践一

2. 函数的学习

2.1 函数的使用

声明函数+调用函数

JavaScript的相关知识点学习与实践一

所需要的东西都在script当中完成。

2.1.1 声明函数

JavaScript的相关知识点学习与实践一

2.1.2 调用函数

JavaScript的相关知识点学习与实践一

JavaScript的相关知识点学习与实践一

形参接受实参传递的值

JavaScript的相关知识点学习与实践一

2.2 函数的使用案例

案例：通过函数调用来判断2月的天数

<!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>Document</title>
    <script>
        // 用户输入年份，输出当前年份2月份的天数
        function backDay() {
            var year = prompt('请您输入年份:');
            if (isRunYear(year)) { // 调用函数需要加小括号
                alert('当前年份是闰年2月份有29天');
            } else {
                alert('当前年份是平年2月份有28天');
            }
        }
        backDay();

        // 判断是否为闰年的函数
        function isRunYear(year) {
            // 如果是闰年我们返回 true  否则 返回 false 
            var flag = false;
            if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
                flag = true;
            }
            return flag;
        }
    </script>
</head>
<body>
</body>
</html>

函数的两种声明方式

JavaScript的相关知识点学习与实践一

<!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>Document</title>
    <script>
        // 函数的2中声明方式
        // 1. 利用函数关键字自定义函数(命名函数)
        function fn() {

        }
        fn();
        // 2. 函数表达式(匿名函数) 
        // var 变量名 = function() {};
        var fun = function(aru) {
            console.log('我是函数表达式');
            console.log(aru);

        }
        fun('pink老师');
        // (1) fun是变量名 不是函数名  
        // (2) 函数表达式声明方式跟声明变量差不多，只不过变量里面存的是值 而 函数表达式里面存的是函数
        // (3) 函数表达式也可以进行传递参数
    </script>
</head>
<body>
</body>
</html>

3.作用域和预解析的学习

3.1作用域

JavaScript的相关知识点学习与实践一

作用域链 ： 内部函数访问外部函数的变量，采取的是链式查找的方式来决定取那个值 这种结构我们称为作用域链 就近原则

<!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>Document</title>
    <script>
        // 案例1 ： 结果是几？
        function f1() {
            var num = 123;

            function f2() {
                var num = 0;
                console.log(num); // 站在目标出发，一层一层的往外查找
            }
            f2();
        }
        var num = 456;
        f1();
        // 案例2 ：结果是几？
        var a = 1;

        function fn1() {
            var a = 2;
            var b = '22';
            fn2();

            function fn2() {
                var a = 3;
                fn3();

                function fn3() {
                    var a = 4;
                    console.log(a); //a的值 ?
                    console.log(b); //b的值 ?
                }
            }
        }
        fn1();
    </script>
</head>
<body>
</body>
</html>

第一个的值是123，第二个的值是数字4和字符串22

3.2预解析

JavaScript的相关知识点学习与实践一

JavaScript的相关知识点学习与实践一注意：预解析过程中，首先进行变量提升（不提升赋值）和函数（不调用函数）提升，然后其他的按顺序写下来即可。

JavaScript的相关知识点学习与实践一

4.对象的学习

4.1创建对象

4.1.1 利用字面量创建对象

<script>
        // 1.利用对象字面量创建对象 {}
        
        // var obj = {};  // 创建了一个空的对象 
        
        var obj = {
                uname: '王小懒',
                age: 22,
                sex: '男',
                sayHi: function() {
                    console.log('你好呀，未来！');

                }
            }
                            
            // 2. 使用对象
            // (1). 调用对象的属性 我们采取 对象名.属性名 .
            
        console.log(obj.uname);
        
        // (2). 调用属性还有一种方法 对象名['属性名']
        
        console.log(obj['age']);
        
        // (3) 调用对象的方法 sayHi   对象名.方法名() 
        
        obj.sayHi();
        
    </script>

JavaScript的相关知识点学习与实践一

变量，属性，函数，方法的相同点与不同点:

JavaScript的相关知识点学习与实践一

4.1.2 利用new Object创建对象

<script>
        // 利用 new Object 创建对象       
        var obj = new Object(); // 创建了一个空的对象
        
        obj.uname = '王小懒';
        obj.age = 24;
        obj.sex = '男';
        obj.sayHi = function() {
                console.log('你好');

            }
            
            // (1) 利用 等号 = 赋值的方法 添加对象的属性和方法

            
        console.log(obj.uname);
        console.log(obj['sex']);
        obj.sayHi();
        
    </script>

4.1.3利用构造函数来创建对象

JavaScript的相关知识点学习与实践一

JavaScript的相关知识点学习与实践一

<script>
        // 利用构造函数创建对象
    
    
        // 构造函数的语法格式
        // function 构造函数名() {
        //     this.属性 = 值;
        //     this.方法 = function() {}
        // }
        
        // 调用：new 构造函数名();
        function Star(uname, age, sex) {
            this.name = uname;
            this.age = age;
            this.sex = sex;
            this.sing = function(sang) {
                console.log(sang);

            }
        }
        var wlh = new Star('王力宏', 18, '男'); // 调用函数返回的是一个对象
        console.log(wlh.name);
        console.log(wlh['sex']);
        wlh.sing('大城小爱');
        
        var wf = new Star('汪峰', 19, '男');
        console.log(wf.name);
        console.log(wf.age);
        wf.sing('北京北京')
        // 1. 构造函数名字首字母要大写

        // 3. 我们调用构造函数 必须使用 new
        // 4. 我们只要new Star() 调用函数就创建一个对象 wlh  {}
        // 5. 我们的属性和方法前面必须添加 this
    </script>

5.内置对象（ 通过MDN查阅文档进行学习）

5.1 ＭＤＮ

JavaScript的相关知识点学习与实践一

此处是MDN的网址链接：​​https://developer.mozilla.org/zh-CN/​​

JavaScript的相关知识点学习与实践一

如何使用MDN?

  • 首先查阅该方法的功能
  • 查看里边的参数的类型和意义
  • 查看返回值的类型和意义
  • 通过demo进行测试

JavaScript的相关知识点学习与实践一

5.2 Math对象

JavaScript的相关知识点学习与实践一

5.2.1 封装自己的数学对象

<!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>Document</title>
    <script>
        // 利用对象封装自己的数学对象  里面有 PI 最大值和最小值
        var myMath = {
            max: function() {
                var max = arguments[0];
                for (var i = 1; i < arguments.length; i++) {
                    if (arguments[i] > max) {
                        max = arguments[i];
                    }
                }
                return max;
            },
            min: function() {
                var min = arguments[0];
                for (var i = 1; i < arguments.length; i++) {
                    if (arguments[i] < min) {
                        min = arguments[i];
                    }
                }
                return min;
            }
        }
        console.log(myMath.max(1, 5, 55));
        console.log(myMath.min(1, 5, 66));
    </script>
</head>
<body>
</body>

5.2.2 常见的公式

JavaScript的相关知识点学习与实践一

5.2.3 随机数random()

5.2.3.1 得到一个两数之间的随机整数，包括两个数在内
function getRandomIntInclusive(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值 
}
5.2.3.2 得到一个两数之间的随机整数
function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min)) + min; //不含最大值，含最小值
}
5.2.3.3 得到一个两数之间的随机数
function getRandomArbitrary(min, max) {
  return Math.random() * (max - min) + min;
}

5.3 猜数字游戏的简单算法通过使用random()

要求用户猜 1~50之间的一个数字 但是只有 10次猜的机会

<!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>Document</title>
    <script>
        // 猜数字游戏
        // 1.随机生成一个1~10 的整数  我们需要用到 Math.random() 方法。
        // 2.需要一直猜到正确为止，所以需要一直循环。
        // 3.while 循环更简单
        // 4.核心算法：使用 if  else if 多分支语句来判断大于、小于、等于。
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }
        var random = getRandom(1, 50);
        
            var i=10;
        while (i--&&i>0) { // 死循环
            var num = prompt('请输入1-50之间的一个数字');
            if (num > random) {
                alert('猜大了');
            } else if (num < random) {
                alert('猜小了');
            } else {
                alert('猜对了');
                break; // 退出整个循环结束程序
            }

        }
       
    </script>
</head>
<body>
</body>
</html>

5.4 Date()对象

JavaScript的相关知识点学习与实践一

5.4.1格式化年月日星期

JavaScript的相关知识点学习与实践一

JavaScript的相关知识点学习与实践一

这样可以取到2022年5月16日星期一

5.4.2 获取毫秒数的一种方式

注意：电脑获取时间均自1970年1月1日开始向后

JavaScript的相关知识点学习与实践一

文章版权声明

 1 原创文章作者：七微电脑 /bangbangt，如若转载，请注明出处： https://www.52hwl.com/36283.html

 2 温馨提示：软件侵权请联系469472785#qq.com（三天内删除相关链接）资源失效请留言反馈

 3 下载提示：如遇蓝奏云无法访问，请修改lanzous(把s修改成x)

 4 免责声明：本站为个人博客，所有软件信息均来自网络 修改版软件，加群广告提示为修改者自留，非本站信息，注意鉴别

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
0 0

关于作者

七微电脑 /bangbangt的头像

七微电脑 /bangbangt注册用户

32 文章
3 评论
0 粉丝
这个人很懒，什么都没有留下～
上一篇 2023年7月15日 上午8:04
下一篇 2023年7月15日 上午8:04
磁力链接 广告招租 广告招租 广告招租 广告招租 广告招租

相关推荐