JavaScript的学习与实践

最新推荐文章于 2024-05-07 16:45:26 发布
最新推荐文章于 2024-05-07 16:45:26 发布
阅读量436 收藏 22
点赞数 25
分类专栏： javascript html css 文章标签： javascript 学习 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51415327/article/details/124940410
版权
javascript 同时被 3 个专栏收录
20 篇文章 1 订阅
订阅专栏
html
20 篇文章 0 订阅
订阅专栏
css
20 篇文章 0 订阅
订阅专栏

1. 函数的学习

案例：通过函数调用来判断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>

函数的两种声明方式
在这里插入图片描述

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

2.作用域和预解析

2.1 作用域

在这里插入图片描述

2.1.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>
        // 案例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

2.2 预解析

在这里插入图片描述
在这里插入图片描述
注意：预解析过程中，首先进行变量提升（不提升赋值）和函数（不调用函数）提升，然后其他的按顺序写下来即可。
在这里插入图片描述
在这里插入图片描述

3. 对象的学习

3.1 创建对象

3.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>

在这里插入图片描述
变量，属性，函数，方法的相同点与不同点
在这里插入图片描述
在这里插入图片描述

3.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>

3.1.3 利用构造函数创建对象

在这里插入图片描述
在这里插入图片描述

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

new 关键字的执行过程
在这里插入图片描述
在这里插入图片描述

3.2 遍历对象

在这里插入图片描述


    <script>
        // 遍历对象 
        var obj = {
                name: '王小懒',
                age: 18,
                sex: '男',
                fn: function() {}
            }
			
            // console.log(obj.name);
            // console.log(obj.age);
            // console.log(obj.sex);
			
            // for in 遍历我们的对象
            // for (变量 in 对象) {

        // }
        for (var k in obj) {
            console.log(k); // k 变量 输出  得到的是 属性名
            console.log(obj[k]); // obj[k] 得到是 属性值

        }
    </script>

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

4.1 MDN

在这里插入图片描述
此处是MDN的网址链接：https://developer.mozilla.org/zh-CN/
在这里插入图片描述
如何使用MDN?

  1. 首先查阅该方法的功能
  2. 查看里边的参数的类型和意义
  3. 查看返回值的类型和意义
  4. 通过demo进行测试
    在这里插入图片描述

4.2 Math对象

在这里插入图片描述

4.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>

4.2.2 常见的公式

在这里插入图片描述

4.2.3 随机数方法random()

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

4.3 班级随机点名的简单制作（由Math对象中的获取随机数random演化而来）

Math对象见上文javascript内置对象一文

  1. 首先将一个班学生的名字当成一个数组进行输入
  2. 其次编写得到两个数之间的随机整数的函数方法
  3. 最后输出时调用该方法即可完成随机点名的操作。
function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }
        // 5. 随机点名  
        var arr = ['张三', '王五', '张四', '李六', '白玉'];
       
        console.log(arr[getRandom(0, arr.length - 1)]);

在这里插入图片描述
在这里插入图片描述

相信光的奥特王小懒
关注
  • 25
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 38
    评论
专栏目录
javascript学习与实践
03-16
javascript
作用域、对象
znhyXYG的博客
11-16 515
作用域： 1、全局作用域 2、局部作用域 全局作用域 作用于所有代码执行的环境 局部作用域 作用于函数内的代码环境，就是局部作用域。 因为跟函数有关系，所以也称为函数作用域。 JS没有块级作用域 块作用域由 { } 包括。 在其他编程语言中（如 java、c#等），在 if 语句、循环语句中创建的变量，仅仅只能在本 if 语句、本循环语句中使用，如下面的Java代码： java有块级作用域： if(true){ int num = 123; system.out..
JS 复习（5-2）函数案例
Puppy_CQ的博客
05-14 284
// 案例 1： 利用函数封装方式，翻转任意一个数组 function reverseArr(arr) { var newArr = []; for(var i = arr.length-1; i>=0; i--){ newArr[newArr.length] = arr[i]; } return newArr; } ..
js中的作用域以及代码的预解析
m0_61122217的博客
04-11 227
js中的作用域以及代码的预解析作用域全局作用域和局部作用域全局变量和局部变量作用域链预解析变量预解析函数预解析案例 作用域 全局作用域和局部作用域 全局作用域：整个script标签中的区域 局部作用域：函数内部的区域，代码只在函数内部起效果 全局变量和局部变量 全局变量：在全局都可以使用，在全局作用域下声明的变量或者在函数内部未声明直接使用（不推荐使用）的变量成称为全局变量 局部变量：只能在函数内部使用；在函数内部声明的变量叫局部变量；函数的形参实际上也是局部变量 注意：当前的js中是没有块级作用域的。块级
JavaScript学习（基础）
m0_49034593的博客
08-19 1234
js基础
05 JavaScript学习：语法
sixpp的博客
04-19 2252
在 JavaScript 中，变量定义是指声明一个变量并为其分配一个值。varlet和const。varvar是 JavaScript 最早引入的声明变量的关键字。使用var声明的变量具有函数作用域，而不是块级作用域。var x = 10;// 使用 var 定义变量 xletlet是 ES6（ECMAScript 2015）引入的声明变量的关键字。使用let声明的变量具有块级作用域，只在声明的块内部有效。let y = 20;// 使用 let 定义变量 yconstconst。
学习JavaScript 数据结构与算法
我是一只蘑菇17的博客
11-10 2365
学习链接：https://github.com/XPoet/js-data-structures-and-algorithms JavaScript 数据结构与算法 1.数据结构(data structure) 数据结构是数据对象，以及存在于该对象的实例和组成实例的数据元素之间的各种联系 ​ 是计算机中存储、组织数据的方式。通常情况下，精心选择的数据结构可以带来最优效率的算法 2.解决问题方法的效率，根据数据的组织方式有关 3.常见的数据结构：数组，栈，链表，图，散列表，队
手把手带你学习 JavaScript 的 ES6 ~ ESn
程序边界
11-15 6276
主要内容涵盖ES2015~ES2020中JavaScript的所有新特性以及下一版的预览。探索新的语法：空值合并、可选链、let和const、类语法、私有方法、私有字段、new.target、数字分隔符、BigInt、解构、默认参数、箭头函数、异步函数、await、生成器函数、…(rest和spread操作符)、模板字面量、二进制和八进制字面量、**(求幂运算符)、计算属性/方法名、for-of、for-await-of、属性的简写语法等。
JavaScript学习手册五：JS数组
qq_45823118的博客
04-18 5425
JS数组1、数组的创建、读写和长度任务描述相关知识代码文件2、数组元素的增减任务描述相关知识代码文件3、数组的遍历和多维数组任务描述相关知识代码文件4、数组的常用方法任务描述相关知识代码文件数组的创建、读写和长度任务描述相关知识代码文件 1、数组的创建、读写和长度 任务描述 本关任务：掌握创建数组的方法，获取数组的元素和长度。 本关的编程任务是补全右侧代码片段中begin至end中间的代码，具体要求如下： 已知两个数组array1和array2，参数a是一个整数，先判断a的值与数组array1的长度值
《JavaScript设计模式与开发实践》
Gyoung杨广
04-04 1771
《JavaScript设计模式与开发实践》
JavaScript 学习手册二
qq_46675545的博客
05-27 3902
JavaScript 学习手册二：JS 数据类型 第1关：JavaScript 数据类型介绍 任务描述 本关任务：在函数 objectTest() 内部定义了六个变量 a、b、c、d、e、f，并已经赋值，你需要判断它们各是什么数据类型。变量 aType、bType、cType、dType、eType、fType 分别表示上面六个变量的数据类型的名字，你需要给他们赋值。比如变量 a 如果是数字类型，需要给变量 aType 赋值字符串 number。可选的数据类型名如下： number、string、b
JavaScript完全学习手册
07-22
资源名称：Javaｓｃｒｉｐｔ完全学习手册内容简介：本书分4篇14章，介绍Javaｓｃｒｉｐｔ的知识，全书内容包括：Javaｓｃｒｉｐｔ语法基础、流程控制、函数、内置对象编程、文档对象模型DOM与事件驱动、处理XML、...
JS实践：JavaScript学习和实践
03-04
JavaScript实践 一个介绍 1.1 1.2 1.3 1.4 JavaScript基础知识 2.1 任务： 1 2.2 2.3 2.4任务： 2 2.5 2.6任务： 3 2.7 2.8任务： 4 2.9 2.10 任务： 5 2.11任务： 6、7 2.12 2.13 任务： 8、9、10、11 ...
头歌教学实践平台 Web前端开发基础 JavaScript学习手册十：正则表达式
01-20
头歌教学实践平台 Web前端开发基础 JavaScript学习手册十：正则表达式。源码txt格式。
javascript 设计模式与开发实践
02-26
javascript 设计模式与开发实践 作者 曾探 本书字体清晰，学习起来舒服。和张容铭的javascript设计模式相比，个人觉得有以下不同之处： 1、需要对原型链和闭包有一定的基础 2、案例比较经典并且通熟易懂，讲解特别...
基于Springboot的旅游管理系统（有报告）。Javaee项目，springboot项目。
XING的博客
05-03 1279
基于Springboot的旅游管理系统（有报告）。Javaee项目，springboot项目。数据库作为系统数据储存平台，实现了基于B/S结构的Web系统。界面简洁，操作简单。采用M（model）V（view）C（controller）三层体系结构，通过。
使用 js 类封装项目中音频播放功能的工具方法utils
最新发布
qq_40868156的博客
05-07 189
封装音频播放功能的工具方法，js，es6，前端，工程化
vue3引入element-plus完整步骤
zzx262625的博客
05-06 420
如果你的项目需要在低版本浏览器上运行，你可能需要使用一些转换工具（如Babel、ESBuild）和polyfill来确保兼容性。在你的Vue项目中配置一个编译器（如Vue CLI、Vite等），然后运行你的项目。你可以尝试在你的组件中使用一些Element Plus的组件来确保它们正常工作。使用npm（或cnpm，如果你在中国并且希望使用淘宝的npm镜像）来安装Element Plus。这样，你就可以在你的Vue组件中使用Element Plus的图标了。在你的Vue 3项目的入口文件（通常是。
菜鸡学习netty源码（三）—— Reactor 模型
u013127325的博客
05-03 738
我们先进行理解一下Reactor模型，知道什么是Reactor模型，它有什么特别之处。我们先来简单介绍一下这个Reactor模型。Reactor模型的核心思想：就是将所关注的I/O事件进行注册到一个多路复用器上，一旦有I/O事件的发生，将事件进行分发到对应的事件处理器中，执行I/O事件对应的函数。Rector模型有3中模型的实现：单Reactor单线程模型，单Reactor多线程模型，多Reactor多线程模型。
javascript设计模式与开发实践
03-16
JavaScript设计模式与开发实践是一本介绍JavaScript设计模式的书籍。它详细介绍了JavaScript中常用的23种设计模式，并提供了实际的代码示例和应用场景。这本书不仅适合初学者学习，也适合有一定经验的开发者深入了解...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 38
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值