一些关于JavaScript对象的一些学习总结、笔记与练习。
关于JavaScript对象？JavaScript是一门基于对象的脚本语言，它不仅可以自定义并创建对象，也能使用现有的对象。面向对象的编程语言都会具有封装性的特点，一般只需简单调用一下封装好的面向对象的函数 （代码块），就能实现相关功能，使用方便的同时，也减少代码量。
文章目录
1、构建自定义对象
在网页中，我们可以直接在< script >标签中使用 function 构建函数来自定义对象，然后创建新的对象实例。
如下代码，使用函数创建并自定义一个对象实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script language="JavaScript">
function Person(name,age) //创建一个名为Person的函数
{
this.name=name;
this.age=age;
this.setAge=function(age){
this.age=age;
}
}
var pl=new Person("Lin WIT",18); //传入参数并实例化对象
pl.setAge(19);
document.write(pl.name,": ",pl.age);
</script>
</body>
</html>
运行结果如下图：
arguments对象?
JavaScript 函数有一个内置的对象——arguments 对象。如果定义了一个函数，但是这个函数在不同地方执行时所传入的参数是不同的，即这个参数不确定，所以无法在函数中声明具体的参数。这时，通过arguments 对象就能解决这个问题。
通过arguments对象获取传入的实参的操作类似于数组，用下标（索引）来定位到每个值上面，此外arguments对象还具有一些其他的属性。
如下实例（计算传入参数的数值和):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script language="JavaScript">
function sum(){
var s=0;
for(var i=0;i<arguments.length;i++){ //通过length属性可获得传入参数的个数
s+=arguments[i]; //通过下标获取参数的值
}
return s;
}
document.write(sum(1,2,3,4,5,6,7,8,9,10));
</script>
</body>
</html>
运行结果如下图：
在介绍JavaScript自有的客户端对象属性及其方法的相关知识前，需要对客户端对象之间的层次结构（BOM、DOM）有一定的认识，这样方便理解。
2、Window对象
Window 对象表示浏览器中打开的窗口。
- open()方法：用于打开一个新的浏览器窗口或者查找一个已命名的窗口
- close()方法：关闭浏览器窗口
?window 对象方法
window对象方法表:
| 方法 | 描述 |
|---|---|
| alert() | 显示带有一段消息和一个确认按钮的警告框 |
| setInterval() | 按指定的周期（以毫秒计）来调用函数或表达式 |
| setTimeout() | 在指定的毫秒后调用函数或计算表达式 |
| clearInterval() | 取消setInterval()方法设置的 timeout |
| clearTimeout() | 取消setTimeout()方法设置的 timeout |
| confirm() | 显示带有一段消息，以及确认按钮和取消按钮的对话框 |
| moveBy() | 可相对窗口的当前坐标把它移动指定的像素 |
| moveTo() | 把窗口的左上角移动到一个指定的坐标 |
| print() | 打印当前窗口的内容 |
| prompt() | 显示可提示用户输入的对话框 |
| scrollBy() | 按照指定像素来滚动内容 |
| scrollTo() | 把内容滚动到指定的坐标 |
下面利用setInterval()、setTimeout()、clearInterval()、clearTimeout()这四个方法实现一个计时实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script language="JavaScript">
var a=0;
var t;
function timedCount(){
document.getElementById('text').value=a;
a=a+1;
t=setTimeout("timedCount()",1000); //利用嵌套，每一秒钟调用一次函数实现计数
}
</script>
<form>
<input type="button" value="开始计时" onclick="timedCount()" />
<input type="text" id="text" />
<input type="button" value="停止计时" onclick="clearTimeout(t)" /> <!-- 利用参数t取消timeout -->
</form>
<script>
var dt=setInterval("time()",1000) //不停地每隔一秒 调用函数显示时间
function time(){
var t=new Date(); //Date()为内置的获取时间的方法
document.getElementById("time").value=t;
}
</script>
<input type="text" id="time" size="50" />
<Button onclick="clearInterval(dt)">停止时间</Button> <!-- 利用参数dt取消timeout -->
</body>
</html>
运行效果如下图：
?window 对象属性
window对象属性表:
| 属性 | 描述 |
|---|---|
| closed | 返回窗口是否已关闭 |
| document | 对 Document 对象的只读引用 |
| history | 对 History 对象的只读引用 |
| location | 用于窗口或框架的 Location 对象 |
| name | 设置或返回窗口的名称 |
| navigator | 对Navigator 对象的只读引用 |
| opener | 返回此窗口的父窗口的引用 |
| parent | 返回父窗口 |
| self | 返回当前窗口的引用 |
| top | 返回最顶层的先辈窗口 |
| screen | 对 Screen 对象的只读引用 |
3、屏幕Screen对象
每个Window对象的screen属性都引用一个Screen对象。Screen对象中存放着有关显示浏览器屏幕的信息。通过获取这些屏幕信息，可以利用JavaScript程序来优化输出与显示效果。
Screen对象属性表:
| 属性 | 描述 |
|---|---|
| availHeight | 返回显示屏幕的高度（除Windows任务栏外） |
| availWidth | 返回显示屏幕的宽度（除Windows任务栏外） |
| colorDepth | 返回目标设备或缓冲器上调色板的比特深度 |
| height | 返回显示屏幕的高度 |
| pixelDepth | 返回显示屏幕的颜色分辨率（比特每像素） |
| width | 返回显示屏幕的宽度 |
例如（在页面打印出屏幕分辨率）：document.write(screen.width+"*"+screen.height)
4、浏览器Navigator对象
Navigator 对象包含的属性描述了正在使用的浏览器，可以使用这些属性进行平台专用配置。同时，注意Navigator对象的实例是唯一的。
Navigator对象属性表:
| 属性 | 描述 |
|---|---|
| appCodeName | 返回浏览器的代码名 |
| appMinorVersion | 返回浏览器的次级版本 |
| appName | 返回浏览器名称 |
| appVersion | 返回浏览器的平台和版本信息 |
| browserLanguage | 返回当前浏览器的语言 |
| cookieEnabled | 返回致命浏览器中是否使用cookie的布尔值 |
| cpuClass | 返回浏览器系统的CPU等级 |
| onLine | 返回浏览器是否处于脱机模式的布尔值 |
| platform | 返回运行浏览器的操作系统平台 |
| systemLanguage | 返回OS使用的默认语言 |
| userAgent | 返回客户机发送服务器的user-agent头部的值 |
| userLanguage | 返回os的自然语言设置 |
5、文档Document对象
Document 对象是Window 对象的一个对象属性，可以通过window.document 属性对其进行访问。并且，Document 对象是HTML文档的根节点，可以对HTML页面中的所有元素进行访问。
Document对象的主要属性表:
| 属性 | 说明 |
|---|---|
| document.title | 获取或设置文档标题 |
| document.bgColor | 设置页面背景色 |
| document.linkColor | 设置未点击过的链接颜色 |
| document.alinkColor | 设置激活链接（焦点在其上）的颜色 |
| document.fgColor | 设置前景色（文本颜色） |
| document.vlinkColor | 设置已点击过的链接颜色 |
| document.URL | 设置URL属性，从而在同一窗口中打开另一网页 |
| document.fileCreateDate | 文件建立日期，只读属性 |
| document.fileModifiedDate | 文件修改日期，只读属性 |
| document.filesize | 文件大小只读属性 |
| document.charset | 设置字符集，（简体中文为：gb2312） |
…
Document对象常用集合表:
| 集合 | 描述 |
|---|---|
| all | 返回对象所包含的元素集合 |
| anchors | 获取所有带有name和（或）id属性的 a 对象的集合 |
| applets | 获取文档中所有applet 对象的集合 |
| childNodes | 获取作为指定对象直接后代的 HTML 元素和 TextNode 对象的集合 |
| forms | 获取以源顺序排列的文档中所有form 对象的集合 |
| frames | 获取给定文档定义或与给定窗口关联的文档定义的所有 Windows 对象的集合 |
| images | 获取以源顺序排列的文档中所有img对象的集合 |
| links | 获取文档中所有指定了 href 属性的 a 对象和所有 area 对象的集合 |
| scripts | 获取文档中所有 script 对象的集合 |
…
Document对象常用方法表:
| 方法 | 说明 |
|---|---|
| document.createElement(Tag) | 创建一个HTML 标签对象 |
| document.getElementById(id) | 获取指定ID值的对象 |
| document.getElementByTagName(tagname) | 获取指定标签名的对象 |
| document.getElementByName(name) | 回去指定name值的对象 |
| document.getElementByClassName(classname) | 获取指定类名的对象 |
…
6、document.Cookie对象
Cookie 是由服务器保存在客户端上的小文本文件，它一般可以包含与用户有关的账号密码等信息。
?创建Cookie
创建cookie的语法如下：
document.cookie="cookiename=cookievalue;expires=Thu, 3 May 2022 12:00:00 GMT;path=/";
- 参数cookiename用于添加cookie的值；
- 参数expires用于添加一个过期时间（以 UTC 或 GMT 时间），
- 参数path 用于告诉浏览器 cookie 的路径
此外，cookie的修改与删除类似于创建，语法格式基本一致。而删除cookie时则不必指定cookie的值，只需要设置expires参数为以前的时间即可。
如 删除cookie：document.cookie = "username=; expires=Thu, 01 May 2022 00:00:00 GMT; path=/"; 这里如果不指定路径有些浏览器可能会不让删除cookie。
?Cookie的应用示例
利用Cookie实现登录，当用户输入完用户名后点击 非登录输入框 之外的地方（即登录输入框失去焦点）时，触发绑定在用户名输入框上的onblur事件，然后触发检验cookie的函数，判断用户是否已经保存密码，如果保存则会自动填写密码。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cookie</title>
</head>
<body>
<form action="">
用户名：<input type="text" id="username" onblur="checkCookie(username.value)"/>
<br />
密 码：<input type="password" id="password"/>
<br />
<input type="submit" value="登录" onclick="setCookie(username.value,password.value,30)"/>
<input type="button" value="清除cookie" onclick="clearCookie(username.value)"/>
</form>
</body>
<script>
function setCookie(username,password,exdays){
var d= new Date(); //获取当前日期
d.setTime(d.getTime()+(exdays*24*60*60*1000)); //将日期转换成毫秒再加上过期时间
var expires='expires='+d.toGMTString(); //将过期时间转换成字符串用变量存储
document.cookie=username+"="+password+";"+expires;
}
function getCookie(cname){
var name=cname+"=";
var ca=document.cookie.split(';'); //获取cookie 将其分割成一个数组
for(var i=0;i<ca.length;i++){
var c=ca[i].trim(); //trim()用于去除字符串头尾空白字符
if(c.indexOf(name)==0){ //通过值查找索引位置来判断是否再cookie中已存储
return c.substring(name.length,c.length); //返回密码的值
}
}
return "";
}
function checkCookie(username){ //判断是否在cookie
var pass=getCookie(username);
if(pass!=""){
document.getElementById("password").value=pass;
}
}
function clearCookie(cookiename){
var t= new Date();
var expires=t.toGMTString();
document.cookie=cookiename+"="+";"+expires+"path=C:/Users/LXM15211152645/AppData/Local/Google/Chrome/User Data/Default";
}
</script>
</html>
运行如下图：
7、历史Hostory对象
History 用于记录用户在浏览器窗口中访问过的URL。一般情况，开发人员无法得到用户访问的URL历史记录，但可以借助 History 实现前进和后退的功能。
?length属性：用于获取浏览器列表中的元素数量
history.length
?back() 方法：用于从用户的历史列表中加载出上一个页面的URL，前提是存在上一个页面。
history.back()，调用这个方法相当于点击后退按钮或调用history.go(-1)
?forword()方法：用于从用户的历史列表中加载出下一个页面的URL，前提是存在下一个页面。
history.forword()，调用这个方法相当于点击前进按钮或调用history.go(1)
?go()方法：用于从用户的历史列表中加载出某一个页面，由方法内参数决定。正数前进，负数后退，或者将参数设置为字符串，字符串内容为局部或完整的URL。
history.go(number|URL)
8、地址Location对象
Location地址对象表示某一窗口所打开的地址，使用它可以表示当前窗口的地址。
Location对象常用属性表:
| 属性 | 描述 |
|---|---|
| hash | 返回一个URL的锚部分，即“#”后的部分 |
| host | 返回URL的主机名和端口 |
| hostname | 返回URL主机名 |
| href | 返回完整的URL |
| pathname | 返回URL的路径名 |
| port | 返回一个URL服务器使用的端口号 |
| protocol | 返回一个URL协议 |
Location对象方法
?assign()方法：使窗口载入并显示所指定的URL中的文档
location.assgin(URL)
?reload()方法：用于刷新当前文档，类似浏览器刷新页面按钮
location(true|false)，参数为true时会从服务器上重新下载该文档，类似于单击浏览器刷新按钮时按住shift键的效果。
?replace()方法：用于加载一个新的页面，类似于location.href的功能
location.replace(newURL)，该方法会将新页面的地址在History的地址列表中删除。