第4章第7节单体内置对象

最新推荐文章于 2021-11-28 08:36:51 发布

szmtjs10

最新推荐文章于 2021-11-28 08:36:51 发布

阅读量123

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/szmtjs10/article/details/102776095

版权

JavaScript 专栏收录该内容

48 篇文章 6 订阅

订阅专栏

定义：由ECMAScript实现提供的，不依赖于宿主环境的对象，这些对象在ECMAScript程序执行之前就已经存在了。不必显示地实例化内置对象，因为它们已经实例化了。Object，Array，String，Global，Math都是内置对象

Global对象
Math对象

Global对象

全局对象，不属于任何其他对象的属性和方法，最终都是它的属性和方法，所有在全局作用域中定义的属性和函数，都是Global对象的属性。如：isNaN()，isFinite()，parseInt()，parseFloat()，都是Global对象的方法。
1.URI 编码方法
encodeURI()：对整个URI(如：http://www.hehe.com/illegal value.htm)，不会对冒号，正斜杠，问号和井号编码
encodeURIComponent()：对URI中某一段(如：illegal value.htm) 进行编码，对所有非标准字符进行编码
有效的URI中不能包含某些特殊字符，通过上面的方法，可以对URI进行编码，用UTF-8编码替换无效的字符。
在这里插入图片描述
2.eval()方法

当调用eval()方法时，解析器会将参数当作ECMAScript语句来解析，然后将执行结果插入到原位置。通过eval()执行的代码作用域就是当前执行的环境。因此被执行的代码具有与当前执行环境相同的作用域链。如：
在这里插入图片描述
3.Global对象的属性
undefined，NaN，Infinity，Object，Array，Function，Boolean，String等等

4.window对象
说明：ECMAScript虽然没有指出如何直接访问Global对象，但Web浏览器都是将这个全局对象作为window对象的一部分加以实现的。因此，在全局作用域中声明的所有变量和函数，就都成为了window对象的属性。在这里插入图片描述
另一种获取global对象的方法：

上面创建了一个立即调用的函数表达式，返回this。在没有给函数明确指定this值的情况下(无论是通过将函数添加为对象的方法，还是通过调用call(),apply())，this值等于Global对象。

Math对象

max()和min()方法：
在这里插入图片描述

舍入方法：将小数值舍入为整数值
Math.ceil()：向上舍入
Math.floor()：向下舍入
Math.round()：四舍五入
在这里插入图片描述
random()方法：返回介于0和1之间的一个随机数，不包括0和1

小结：

引用类型与传统面向对象程序设计中的类相似，但实现不同
Object是一个基础类型，其他所有类型都从Object继承了基本的属性和方法
Array类型是一组值的有序列表，同时还提供了操作和转换这些值的功能
每个包装类型都映射到同名的基本类型；
在读取模式下访问基本类型值时，会创建对应的基本包装类型的一个对象，方便数据的操作
操作基本类型值的语句一旦执行完毕，创建的包装对象就会销毁

函数实际上是Function类型的实例，因此函数也是对象；函数也拥有方法，来增强其行为

在所有代码执行之前，作用域中就已经存在两个内置对象：Global和Math。在大多数ECMAScript的实现中都不能直接访问Global对象；不过，web浏览器实现了承担该角色的window对象。全局变量和函数都是Global对象的属性。

案例-表单随机验证码

用户名
密码
验证码——>（数字）4位数随机或者（混合：数字，字母）4位数随机
以上所有内容都完成了（true）——>登录按钮，跳转页面

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

<!--用户名
密码
验证码——>（数字）4位数随机   或者（混合：数字，字母）4位数随机
以上所有内容都完成了（true）——>登录按钮，跳转页面-->
<form action="">
    用户名：<input type="text">
    <hr/>
    密码：<input type="password">
    <hr/>
    验证码：<input type="text">
    <span id="spans">123</span>
    <hr/>
    <input type="button" value="登录">

</form>

要求：用户名：admin 密码：admin 验证码：要每次刷新页面时随机出现四位数字：1000-9999

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

<!--用户名
密码
验证码——>（数字）4位数随机   或者（混合：数字，字母）4位数随机
以上所有内容都完成了（true）——>登录按钮，跳转页面-->
<form action="">
    用户名：<input type="text">
    <hr/>
    密码：<input type="password">
    <hr/>
    验证码：<input type="text">
    <span id="spans">123</span>
    <hr/>
    <input type="button" value="登录">

</form>

<script>
    //1)验证码随机
    var spans=document.getElementById("spans");
    spans.innerHTML=Math.floor(Math.random()*9000)+1000;
</script>
</body>
</html>

1）验证码随机 innerHTML 向元素中写入内容
2）用户名和密码必须是：admin
3）验证码必须是页面中的随机数
4）以上用户名对了，才去验证密码；用户名和密码都对了，才去验证随机数
5）如果以上内容都对，点击登录按钮，跳转到login.html页面中

先加ID名
在这里插入图片描述

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

<!--用户名
密码
验证码——>（数字）4位数随机   或者（混合：数字，字母）4位数随机
以上所有内容都完成了（true）——>登录按钮，跳转页面-->
<form action="">
    用户名：<input type="text" id="username">
    <hr/>
    密码：<input type="password" id="userPwd">
    <hr/>
    验证码：<input type="text" id="yzm">
    <span id="spans">123</span>
    <hr/>
    <input type="button" value="登录" id="btn">
</form>

<script>
    //1)验证码随机
    var spans=document.getElementById("spans");
    spans.innerHTML=Math.floor(Math.random()*9000)+1000;

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

在这里插入图片描述

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

<!--用户名
密码
验证码——>（数字）4位数随机   或者（混合：数字，字母）4位数随机
以上所有内容都完成了（true）——>登录按钮，跳转页面-->
<form action="">
    用户名：<input type="text" id="userName">
    <hr/>
    密码：<input type="password" id="userPwd">
    <hr/>
    验证码：<input type="text" id="yzm">
    <span id="spans">123</span>
    <hr/>
    <input type="button" value="登录" id="btn">
</form>

<script>
    //1)验证码随机
    var spans=document.getElementById("spans");
    btn=document.getElementById("btn");
    userName=document.getElementById("userName");
    userPwd=document.getElementById("userPwd");
    yzm=document.getElementById("yzm");
    spans.innerHTML=Math.floor(Math.random()*9000)+1000;

    btn.onclick=function () {
        if(userName.value=="admin"){
            if(userPwd.value=="admin"){
                if(yzm.value==spans.innerHTML){
                    location.href="http://www.aku.edu.cn"
                }
                else {
                    alert("验证码不对")
                }
            }
            else{
                alert("密码不对")
            }
        }
        else{
            alert("用户名不对")
        }
    }
</script>
</body>
</html>

验证码是字母和数字的混合体
从一个字母和数字的长字符串中随机选四个数

字符串中也可加入汉字

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

<!--用户名
密码
验证码——>（数字）4位数随机   或者（混合：数字，字母）4位数随机
以上所有内容都完成了（true）——>登录按钮，跳转页面-->
<form action="">
    用户名：<input type="text" id="userName">
    <hr/>
    密码：<input type="password" id="userPwd">
    <hr/>
    验证码：<input type="text" id="yzm">
    <span id="spans">123</span>
    <hr/>
    <input type="button" value="登录" id="btn">
</form>

<script>
    //1)验证码随机
    var spans=document.getElementById("spans");
    btn=document.getElementById("btn");
    userName=document.getElementById("userName");
    userPwd=document.getElementById("userPwd");
    yzm=document.getElementById("yzm");

    var str="adjfslkdjfoijdf98wuoruf9rufohdiz762358glrjfgln";
    var str1="";
    for(var i=0;i<4;i++)
    {
        str1+=str[Math.floor(Math.random()*str.length)];
    }


    spans.innerHTML=str1;
        //Math.floor(Math.random()*9000)+1000;

    btn.onclick=function () {
        if(userName.value=="admin"){
            if(userPwd.value=="admin"){
                if(yzm.value==spans.innerHTML){
                    location.href="http://www.aku.edu.cn"
                }
                else {
                    alert("验证码不对")
                }
            }
            else{
                alert("密码不对")
            }
        }
        else{
            alert("用户名不对")
        }
    }
</script>
</body>
</html>