Python全栈最全学习之路-WEB前端（六）

最新推荐文章于 2025-07-16 23:02:18 发布

原创最新推荐文章于 2025-07-16 23:02:18 发布 · 222 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #js #python

python全栈学习专栏收录该内容

36 篇文章

订阅专栏

本文深入讲解JavaScript中的内置对象、Window对象、函数特性及作用域等内容，同时介绍了如何处理异常，帮助读者全面掌握JavaScript的关键知识点。

JavaScript进阶

一、JS的内置对象

JS内置对象
JS内部已经内置了不少对象，类似于Python中的内置模块，可以直接使用，并且对象一般不需要导入，可以直接使用
Math对象
Math对象是一个处理数学相关的对象，可以用来执行在数学相关的内容
日期对象
日期也是常用对象之一，基本和常用的方法都是需要了解和熟悉

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS的内置对象</title>
</head>
<body>
<script>
    // Math对象
/*    console.log(Math.pow(2,4)); // 2的4次方
    console.log(Math.round(5.5)); // 四舍五入
    console.log(Math.ceil(1.5)); // 向上取整
    console.log(Math.floor(1.5)); // 向下取整
    console.log(Math.max(1,2,3,4)); // 取参数中的最大值
    console.log(Math.min(1,2,3,4)); // 取参数中的最小值
    console.log(Math.random()); // 0-1的随机数【0,1】
    console.log(Math.random()*10+10); // 生成n~（m+n）
    console.log(Math.PI); // π
    console.log(Math.abs(-10)); // 求绝对值*/
    // Date对象
    var data = new Date();
    document.write(data + '<br>');
    var strap = data.getTime();
    document.write(strap + '<br>');
    var year = data.getFullYear();
    document.write(year + '<br>');
    var month = data.getMonth() + 1;
    document.write(month + '<br>');
    var date = data.getDate();
    document.write(date + '<br>');
    var hour = data.getHours();
    document.write(hour + '<br>');
    var min = data.getMinutes();
    document.write(min + '<br>');
    var sec = data.getSeconds();
    document.write(sec + '<br>');
    var day = data.getDate();
    document.write(day + '<br>');
    // document.body.innerHTML = year + '年' + month + '月' + data + '日' + hour + '时' + min + '分' + sec + '秒' + '星期' + day;
</script>
</body>
</html>

在这里插入图片描述

二、JS的windows对象

windows对象：
window对象是所有客户端JS特性和API的主要接入点。它表示web浏览器的一个窗口或窗体，并且可以用标识符window来引用它。
window属性和方法：
window对象定义了一些属性和方法，比如：alert（）方法，非常重要的document属性等
计时器：
计时器就是window中的一个方法，可以用来实现计时的一些操作。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS的window对象</title>
</head>
<body>
<div class="box">
    <span id="timer">5s</span>后跳转到百度
</div>
<div class="box"></div>
<script>
  /*  // 延迟定时器，4000毫秒之后执行一次且只执行一次
    setTimeout(function() {
        document.write(1 + '<br>')
    },4000); //毫秒数
    // 时隔3000毫秒执行一次，不停地执行
    setInterval(function(){
        document.write(2 + '<br>')
    },3000);*/
  // 定时器的使用
    var oTime = document.getElementById('timer');
    var oBox = document.getElementsByClassName('box');
    var num = 5;
    var time;
    time = setInterval(function(){
        num --;
        console.log(num);
        oTime.innerHTML = num + 's';
        if(num === 1){
            clearInterval(time); // 清楚定时器
            // clearTimeout(); // 另一种定时器的清楚方法
            window.location.href = 'https://www.baidu.com';
        }
    },1000);
</script>
</body>
</html>

定时器可以实现定时操作，并且通过window对象来实现跳转操作

三、JS的函数

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS的函数</title>
</head>
<body>
<div><p>我是一个标签</p></div>
<script>
    // var aDiv = document.getElementsByTagName('div');
    /*aDiv[0].onclick = function(){
        alert(1);
    };*/
   /* function fn(){
        alert(2);
    }
    // fn();
    aDiv[0].onclick = fn; // 当作点击事件时，不能加上括号*/
  /* function fn(){
       alert(3);
   };*/
   // fn(); fn 可以放在函数定义前，也可以放在函数定义后执行
   /* var fa = function(){
        alert(4);
    };*/
    // fa(); 函数表达式只能在定义之后调用
    // + - ! ~ () 让匿名函数立即执行
 /*   +function(){
        alert(5);
    }();
    -function(){
        alert(6);
    }();
    ~function(){
        alert(7);
    }();
    (function(){
        alert(8);
    }());*/

 // 函数的表达式
/*    function fa(x){
        alert(x);
        // x 是形参，在函数局部内工作，命名规则和var相同
    };
    var v = 3;
    fa(3); // 3是实参，可以传递，是已知的变量或者数据
    function sum(q,w){
        alert(q+w);
    };
    sum(1,2,3) // 实参个数可以和形参个数不等；参数个数不取决于定义，而是函数内部执行的代码
    function arg(){
        console.log(arguments.length); // 默认存放在arguments中
        console.log(arguments[2]); //  同样可以通过下标来存放
        var x = 0;
        var len = arguments.length
        for(var i = 0;i < len;i++){
            x += arguments[i];
        }
        console.log(x);
    }
    arg(1,2,3,4,5,6,7,8,9);*/

// js函数返回值
    function fn(){
        alert(1);
        // return "ok" // 和Python类似
    }
    var x = fn();
    alert(x); // JS 中函数默认返回值是 undefined
</script>
</body>
</html>

JS作用域

js解析顺序
1、（定义）先解析var function参数
A.该步骤的var只定义变量，后面的=赋值不解析
B.该步骤的函数值定义函数，函数的执行不解析
C.重名的只留一个，var和函数重名，函数优先
2、（执行）再从上至下执行其他代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS作用域</title>
</head>
<body>
<script>
    // alert(a); // 先找a，不存在则为undefined
    // var a = 5;
    // alert(a); // 找完之后，再会执行
    // alert(a); // 先找a,
    function a(){
        alert(1);
    };
    a(); // 解析完之后才会调用a
    alert(a); // a解析为函数
/*    var a = 1;
    function fn(){
        alert(2);
        var a = 5; // a在内部，不会影响外面
    };
    fn();
    alert(a);
    var a = 1;
    function fn(){
        alert(2);
        a = 5; // 此函数没有的话，就会从里往外去找，去父级作用域
    };
    fn();
    alert(a);*/
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS作用域</title>
</head>
<body>
<script>
    // alert(a); // 先找a，不存在则为undefined
    // var a = 5;
    // alert(a); // 找完之后，再会执行
    // alert(a); // 先找a,
    // function a(){
        // alert(1);
    // };
    // a(); // 解析完之后才会调用a
    // alert(a); // a解析为函数
/*    var a = 1;
    function fn(){
        alert(2);
        var a = 5; // a在内部，不会影响外面
    };
    fn();
    alert(a);
    var a = 1;
    function fn(){
        alert(2);
        a = 5; // 此函数没有的话，就会从里往外去找，去父级作用域
    };
    fn();
    alert(a);*/

// JS函数属性
    // 利用callee，实现函数的递归
    function factorial(x){
        if (x<=1) return 1;
        return x * arguments.callee(x-1);
    }
    console.log(fi(5));
</script>
</body>
</html>

四、JS异常

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS异常</title>
</head>
<body>
<script>
    try{
        //先执行这里，没有问题的话就会执行
        var n = Number(prompt("请输入一个正整数","")); // prompt 是输入
        var f = factorial(n);
        alert(f)
    }catch(e){
        // 如果输入不合法，将执行这里的逻辑
        alert(e); // 告诉用户发生了什么错误
        throw new Error("输入错误") // 或者自己主动抛出错误，在终端中展示出来
    }
    finally{
        // 不管是否抛出异常，都会执行
        alert('执行完毕！')
    }
</script>
</body>
</html>