第2章 第7节 单体内置对象
定义：由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>
<!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>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构