javascript-常用内置对象-随堂

最新推荐文章于 2025-05-25 08:34:49 发布

原创最新推荐文章于 2025-05-25 08:34:49 发布 · 291 阅读

CC 4.0 BY-SA版权

本文深入讲解JavaScript调试技巧，包括三种调试方法：alert、console.log及document.title的应用。同时，详细介绍了document对象和location对象的功能，如获取页面来源、地址及实现页面跳转。此外，还探讨了Math对象的使用，如生成随机数、向上取整和向下取整等实用功能。

小结

js调试有三种方法，如果有一个变量m="hello"，请使用三种方法完成m数值的显示
方法一，alert(m)
方法二，console.log(m)
方法三，document.title=m

document对象，获取当前页面是从哪一个网址跳转进来的
document.referrer

location对象，获取当前所在的页面地址
window.location.href

location对象，让页面跳转到这个网址：http://www.baidu.com
window.location.href="http://www.baidu.com"


location对象,获取url中get方式传递的参数
window.location.search


Math对象，生成随机数，获取一个0到1之间的随机小数
Math.random()

Math对象,向下取整。m="3.6"，请获取m数据的向下取整值
Math.floor(m)

Math对象，向上取整，m="2.6",请获取m数据向上取整的值
Math.ceil(m)

一 js调试方法3种

alert

alert(值）

console.log

适合输出大量的结果

<script>
    for(var i=0;i<100;i++){
        console.log(i);
    }
</script>

document.tiitle

适只测试单个数据

<script>
    var name = "python";
    document.title=name;
</script>

二 document对象

获取来源

获取上一个页面的地址

document.referrer

应用场景
访问一个网站，匿名状态时，可以看到一个页面
比如
有一个商品吸引了我
需要登陆
希望登陆后，回到原来的页面
可以做的操作是

商品页—》登陆页，记录一下是从哪个页面过来的。
通过document.referrer，拿到上一个页面，并保存地址。
登陆成功后，跳转到记录的那个商品页面，用户可以继续操作了

在这里插入图片描述

三 location对象

1 获取当前所在的页面地址

window.location.href

2 页面跳转

window.location.href = 要跳转的页面地址

练习
点击一个按钮
点击后，跳转百度页面

增强版代码，山塞搜索引擎

<body>
<input type="text" id="ipt">
<button onclick="tz()">search</button>
<script>
    function tz() {
        var oIpt = document.getElementById("ipt")
        var sValue = oIpt.value
        var sUrl = "https://www.baidu.com/s?wd="
        var sSearchUrl = sUrl +sValue
        alert(sSearchUrl)
        window.location.href=sSearchUrl;
    }
</script>
</body>

界面
在这里插入图片描述

四获取URL中传递的参数

用法

window.location.search

获得的是url中的参数部分

效果
在这里插入图片描述

熟悉一下url中的参数部分
在这里插入图片描述

在这里插入图片描述

获取页面中的锚点

window.location.hash

五 Math对象

1 生成随机数

0-1之间的浮点数

Math.random()

例子

<script>
    for(var i=0;i<100;i++){
    var num = Math.random();
    console.log(num)
}
</script>

结果
在这里插入图片描述

2 向下取整

用法

Math.floor(参数)

参数说明
参数为数字型，或者为数字型的字符串，都会获得整数部分
例如 3.1 或者 “3.1” 得到的结果是 3

英文
floor
在这里插入图片描述

例子

<script>
    alert(Math.floor(5.1));
</script>

3 向上取整

Math.ceil(参数)

参数说明
参数为数字型，或者为数字型的字符串，都会获得整数部分
例如 3.1 或者 “3.1” 得到的结果是 4

在这里插入图片描述
代码

<script>
    alert(Math.ceil("3.1"));
</script>

4 范围内的随机数

例子
在这里插入图片描述