JavaScript进阶

最新推荐文章于 2024-10-18 17:51:23 发布
最新推荐文章于 2024-10-18 17:51:23 发布
阅读量90 收藏
点赞数
文章标签： javascript 前端 开发语言 python
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qvqqv/article/details/130425402
版权

JavaScript进阶

（一）JS内置对象

JS内部已经内置了不少对象，类似于Python中的内置模块，可以直接使用，并且对象一般不需要导入，可以直接使用。

（1）math对象

Math对象是一个处理数学相关的对象，可以用来执行在数学相关的内容。

<body>
<script>
    // Math对象 数学对象

    // console.log(Math.PI)  // 圆周率
    // console.log(Math.pow(2,3))  // 幂次方
    // console.log(Math.round(1.56))  // 四舍五入 不保留小数位
    // console.log(Math.ceil(1.26))  // 向上取整  2 不保留小数位
    // console.log(Math.floor(1.56))  // 向下取整  1 不保留小数位
    // console.log(Math.max(1,2,3,4,5))  // 5 取最大值
    // console.log(Math.min(1,2,3,4,5))  // 1 取最小值
    // console.log(Math.random())  // 随机数 0-1
    // 0-100
    // console.log(Math.random()*100)  // 随机数 0-100
    // 取出来是一个整数
    // console.log(Math.round(Math.random()*100))  // 随机整数 0-100
    // console.log(Math.random() * 99 + 1)   //0-100随机数
    // console.log(Math.abs(-5)) // 绝对值
</script>

</body>

（2）日期对象

日期也是常用对象之一，基本和常用的方法都是需要了解和熟悉。

<body>
<script>
    // Date 日期对象
    data = new Date() //得到日期对象
    // console.log(data.getTime())  //时间戳
    // console.log(data.getFullYear())  //年份
    // console.log(data.getMonth()+1)  //月份 0-11  加一
    // console.log(data.getDate())  //日期
    // console.log(data.getHours())  //时
    // console.log(data.getMinutes())  //分
    // console.log(data.getSeconds())  //秒
    // console.log(data.getDay())  //周期
    year = data.getFullYear()
    month = data.getMonth()+1
    date = data.getDate()

    document.body.innerText = year+'年' + month+'月'+date+'日'    //得到现在的年月日
</script>

</body>

在这里插入图片描述

（二）JS的windows对象（计时器）

（1）JS计时器

setTimeout(执行的事件，秒数) ---------延迟计时器 只执行一次
setInterval(执行的事件，秒数) ---------间隔计时器 重复执行
①延迟计时器

<body>
<script>
    a = 0
    b = 0

    // 延迟计时器 只执行一次
    setTimeout(function () {
        a++
        console.log(a)
    },2000)  //单位2000毫秒
</script>
</body>

②间隔计时器

<body>
<script>
    a = 0
    b = 0

    // 间隔计时器 重复执行
    setInterval(function () {
        b++
        console.log(b)
    },2000)  //单位2000毫秒

</script>
</body>

③计时器停止

<body>
<button id="btn">计时器停止</button>
<script>

    b = 0
    interval = setInterval(function () {
        b++
        console.log(b)
    },2000)  //毫秒

    //清除计时
    // clearInterval()  间隔
    // clearTimeout()  延迟
    btn = document.getElementById('btn')
    btn.onclick = function () {
        //清除计时
        clearInterval(interval)
    }


</script>
</body>

在这里插入图片描述

（2）计时器实现跳转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计时器实现跳转</title>
</head>
<body>
<div id="box">
    <span id="timer">5s</span>后跳转到百度
</div>

<script>
    box = document.getElementById('box')
    timer = document.getElementById('timer')
    num = 5

    time = setInterval(function () {
        num--
        timer.innerText = num+'s'
        if (num===1){
            clearInterval(time)  //清除计时
            // window.location.href = 'https://www.baidu.com/'  //从当前窗口跳转到一个新的链接
            //打开新的窗口进行跳转
            // w = window.open()
            // w.location = 'https://www.baidu.com/'

            window.open('https://www.baidu.com/')
        }

    },1000)


</script>

</body>
</html>

在这里插入图片描述

（三）JS的函数

  • JS函数介绍： JS的函数包裹在花括号当中，使用关键词function来定义。函数可以挂载在一个对象上，作为一个对象的属性，称为对象的方法。
  • JS函数特性： 在JS中，函数即对象，程序可以随意操控它们。比如，JS可以把函数赋值给变量，或者作为参数传递给其他的函数，甚至可以设置属性，调用它们的方法。
  • JS有名函数： 有名字的函数，使用时是：函数名加上括号执行，充当时间函数执行。
  • JS匿名函数：没有名字的函数，匿名函数不能单独出现，一般充当事件函数，比如点击事件调用的函数。

（1）有名函数

    有名函数
    function 函数名(参数1,参数2,...) {
        函数体
        return 返回值
    }

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计时器</title>
</head>
<body>
<script>
    
    //函数的调用
     function func(x, y) {
        alert(x + y)   //弹窗
        return [x, y]  //返回一个值
    }

    a = func(1, 2)
    console.log(a)  //undefined

    
    // 有名函数可以在定义前调用（即下方的方式）
    // a = func(1, 2)
    // console.log(a)  //输出是undefined
    //
    // function func(x, y) {
    //     alert(x + y)   //弹窗
    //     return [x, y]  //返回一个值
    // }
    
    
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计时器</title>
</head>
<body>
<script>

    function f1(x,y){
        alert(x+y)
    }

    // 间隔计时器）（每隔2秒弹窗一次）
    setInterval(function () {
        f1(1,2)
    },2000)


</script>
</body>
</html>

（2）匿名函数

    匿名函数：
    变量 =  function (参数1,参数2,...) {
        函数体
        return 返回值
    }
    变量(值1,值2,....)


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计时器</title>
</head>
<body>
<script>

    fa = function (x,y) {
        alert(x + y)
        return [x, y]  //返回一个值
    }

    a = fa(1,2)
    console.log(a);
    
</script>
</body>
</html>

匿名函数不可以在定义前调用

    // 匿名函数自调用  在function前加上+ - ~ !  匿名函数立即执行
    -function () {
        alert(111)
    }();

（3）函数的参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计时器</title>
</head>
<body>
<script>

    //函数的参数
    // 参数xy可以不给值，不会报错，只是返回undefined
    // 多给参数值也不会报错，会自动传给arguments不定长参数
    function func(x, y) {
        // console.log(x);  //undefined
        // console.log(y);  //undefined
        // console.log(arguments); // 输出arguments，元组形式，包括了参数值，函数本身，参数长度，函数类型（迭代器对象）
        // console.log(arguments.callee);  // 函数本身的内容
        // console.log(arguments.length);  // 函数本身的长度
        //arguments是伪数组，不具有数组实际意义上的一些方法，pop，push

        // 循环取出arguments伪数组当中的参数值
        for (i = 0; i < arguments.length; i++) {
            console.log(arguments[i])
        }
    }

    func(1, 2, 3, 4, 5, 6)

</script>
</body>
</html>

在这里插入图片描述

（4）变量声明与函数作用域（JS作用域）

声明：JS定义(声明)一个变量有三种方式 var、 let 、const

①var

<body>
<script>

    // var 声明
    // var可以在同一作用域下多次声明同一变量
    var num = 1;
    var num = 2;
    console.log(num)  //输出为2

    // var定义的变量可以在声明前调用，返回的是undefined
    // console.log(num)  //undefined
    // var num = 1
    // console.log(num)
    
</script>
</body>

②let

<body>
<script>

    // let 声明
    // let不可以在同一作用域下多次声明同一变量
    let num = 1;
    let num = 2;
    console.log(num)   //会报错

    // let定义的变量不可以在声明前调用
    // console.log(num)
    // let num = 1
    // console.log(num)

</script>
</body>

③const

<body>
<script>

    // const声明变量时，必须赋予值，不可以在同一作用域下多次声明同一变量，不可以在声明前调用
    console.log(num)
    const num = 1
    const num = 2
    console.log(num)    //会报错
    

</script>
</body>

作用域：一个变量可以生效的范围。 变量不是在所有地方都可以使用的，而这个变量的使用范围就是我们要说的作用域。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计时器</title>
</head>
<body>
<script>

    //js作用域
    var a = 11  //    在函数外声明的叫全局变量
    function func() {
        var a = 22  //    在函数内声明的叫局部变量，外部访问不到
        // a = 22  // 如果把var删掉则是全局变量，能够覆盖外面的a

    }
    func()
    console.log(a)  //11  ==>  删掉var结果变为22
    
</script>
</body>
</html>

优先级

<body>
<script>

    // 优先级，变量>函数
    var a = 123

    function a() {
        console.log(321)
    }
    console.log(a) //输出是123  变量优先级大

</script>
</body>

块级作用域{}：针对let和const

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计时器</title>
</head>
<body>
<script>

    // let和const的块级作用域
    {
        let num = 10
        console.log(num) //10
    }
    console.log(num) //在块级作用域外面无效会报错

    {
        var num = 10
        console.log(num) //10
    }
    console.log(num) //10     块级作用域对var无效
    
</script>
</body>
</html>

（四）JS异常

    js异常
    try{
        可能会出现异常的代码
    }
    catch (e) {
        异常后跳到该作用域下，执行该代码块，e代表错误信息
    }
    finally {
        不管是否异常都会执行的部分
    }

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>异常</title>
</head>
<body>
<script>

    try{
        num = 1
        console.log(num)
    }
    catch (e) {
        console.log(e)       //异常捕获给e，再通过e输出出来
    }
    finally {
        console.log('异常处理完毕！')
    }

</script>
</body>
</html>
等猫的鱼qv
关注
javascript进阶
u012536120的博客
08-13 568
【背景】 工作是用VS，感觉太笨重，随便安装下就10G+，后来接触了JS，python这些只用几M的解释型语言，就很喜欢。 后来看过很多JS的教程，包括w3cschool的教程、JS权威指南、JS语言精粹...... 写得不好，感觉没有说到点子上（仅代表个人感受） 最近看了《JavaScript启示录》英文版的。跟我们平常看的语法书思考角度不同，有一些【进阶】意义，所以就想把里面的一些东西...
Javascript进阶内容
triggerV的博客
04-08 1009
JavaScript的一些进阶内容：作用域、函数进阶、解构赋值、深入对象、内置构造函数、深入面向对象、深浅拷贝、异常处理、处理this、防抖节流
JavaScript进阶部分知识总结
guai_guai_guai的博客
04-22 1027
局部作用域分为函数作用域和块作用域。
前端之JavaScript进阶篇
Queen_is_king的博客
07-30 1305
随着我们深入的学习JavaScript，我们知道了使用JavaScript可以增加行为，为网页添加动态效果，使我们做出来的网页更加好看。让我们去进入JavaScript的新境界吧！JavaScript能做什么？JS进阶篇学习什么？在JavaScript入门篇中，我们学习了如何插入JS、输出内容及简单的DOM操作，JavaScript进阶篇让您进一步的了解JS的变量、数组、函数、语法、对象、事件、DOM操作，制作简单的网页动态效果。什么是变量? 从字面上看，变量是可变的量；从编程角度讲，变量是用于存储某种/某
Javascript 进阶案例
小陈从不熬夜
08-12 407
JS进阶案例详解~
JavaScript 进阶
lsp54188的博客
04-24 1357
学习作用域、变量提升、闭包等语言特征，加深对 JavaScript 的理解，掌握变量赋值、函数声明的简洁语法，降低代码的冗余度。
JavaScript进阶：如何写出优雅的JavaScript代码
热门推荐
学Java，找哪吒
04-05 1万+
目录一、可维护性代码二、编码规范-可读性三、变量和函数命名四、松散耦合1、解耦HTML和JavaScript2、解耦CSS和JavaScript3、解耦应用程序逻辑和事件处理程序五、编码惯例六、作用域意识1、避免全局查找2、不适用with语句七、优化循环1、简化终止条件2、简化循环体3、使用后测试循环4、展开循环八、语句最少化1、多个变量声明2、插入迭代性值3、使用数组和对象字面量九、优化DOM交互1、实时更新最小化2、使用innerHTML3、使用委托事件4、注意HTMLCollection 一、可维护性
JavaScript进阶篇（汇总+详解）
Ifeng_iPhone的博客
07-26 7337
个人总结了关于JavaScript的基础、进阶以及小项目，包括基础语法、对象、内置对象、BOM、DOM等知识点，小项目有省市选择栏、用户注册校验、计算器的实现等。
JavaScript进阶篇之高级程序设计
2401_84437170的博客
04-26 907
为了跨浏览器兼容，请使用 window.pageYOffset 代替 window.scrollY。另外，旧版本IE（
JavaScript进阶面试题_30题.pdf_前端面试题
09-01
JavaScript进阶面试题_30题.pdf_前端面试题 从这份文件中，我们可以总结出以下的知识点： 1. ECMAScript6 中的类语法糖：ECMAScript6 中引入了类语法糖，这使得有 OOP 基础的人更容易上手 JavaScript。虽然对熟悉 ...
JavaScript 进阶问题列表，包含完整答案
05-10
《JavaScript进阶问题列表》是一份全面覆盖JavaScript高级知识点的问题集合，旨在帮助开发者深入理解JavaScript语言的各个方面，并掌握进阶技巧。每个问题都提供了详细的答案和解析，涵盖了JavaScript的高级特性、...
javascript进阶版纯手写课件
04-09
### JavaScript进阶知识点详解 #### 1. 函数防抖与节流 在JavaScript中，函数防抖（debounce）和节流（throttle）是两种常见的性能优化手段，主要应用于处理高频触发的事件。 **防抖**技术是通过设置一个延时器，...
Javascript 面向对象的JavaScript进阶
08-13
### JavaScript面向对象进阶知识点详解 #### 8.1 面向对象编程的基本特性 在探讨面向对象的JavaScript之前，我们首先需要了解面向对象编程（Object-Oriented Programming, OOP）的基本特性：封装性、抽象性、继承...
JavaScript进阶基础-3
12-20
【JavaScript进阶基础-3】 在JavaScript中，进阶基础涉及到很多重要的概念，尤其是面向对象、前后端交互、Cookie以及JSONP。以下是对这些概念的详细解析： **面向对象基础** 面向对象是一种编程范式，它关注的是...
ECMAScript标准解析及其发展历史与技术演进
qq_20245171的博客
10-15 765
ECMAScript（简称ES）是由ECMA国际（欧洲计算机制造商协会）制定的一种脚本语言规范。它是JavaScript、JScript等语言的基础，并为现代Web开发提供了强大的支持。ECMAScript标准不仅定义了语言的语法和语义，还涵盖了数据类型、对象模型和执行环境等内容，极大推动了JavaScript语言的发展。本文将全面介绍ECMAScript标准的起源、各个版本的演变、关键特性以及未来趋势，深入探讨其对Web开发及编程语言设计的影响。
深入解析：React中的信号组件与细粒度更新
Fisher的专栏
10-15 803
介绍了前端大火的signal原理，引入AutoStore为React提供了信号组件，帮助实现细粒度更新
基于Java微信小程序的水果销售系统详细设计和实现(源码+lw+部署文档+讲解等)
源码好优多
10-16 927
请联系我获取更详细的演示视频。
2024 Bootstrap 秘籍：基础详解、实战案例与优化技巧
最新发布
weimengen的博客
10-18 646
本文介绍了使用 Bootstrap 构建网站的技巧。涵盖了 Bootstrap 的基础知识，包括响应式设计原理、HTML 结构、CSS 类作用和 JavaScript 插件。详细阐述了安装与使用方法、布局规划、组件选择及自定义样式等方面，并为每个知识点提供了丰富案例。掌握这些技巧，开发者能构建出高质量、美观且响应式的网站。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值