【JavaScript】对象的应用

对象的概述

面向对象的编程方法被越来越多的人接受,使用也越来越广泛和成熟,不管是web开发还是其他软件的开发都需要使用面向对象的程序设计,对象包含数据的属性和允许对数据属性进行访问并操作的方法俩个部分,标准的面向对象编程一般有以下几个特点:

1、封装:在面向对象的程序设计中,封装是一个重要的原则,所谓“封装”,就是将对象中的各种属性和方法按照一定的安排,可任意提供一组给外部使用者访问权限,更直接的说,就是将一段可以实现某一功能的程序段“打包”。例如:Navigator对象中appName属性包含了一段实现特定功能的程序段,将这些程序段调试好,然后将这些程序段封装起来,用于显示浏览器名称。

2、继承:在程序开发过程中,为了保持某些窗口或者其他属性的一致性,将该对象的属性和方法引用到其他对象,最好的方法就是继承。例如A对象继承B对象,那么A对象就是B对象的子对象,A对象将拥有B对象的属性和方法。

3、多态:在面向对象程序设计中,由于对象的继承,各对象附属的方法也有一定的层次关系,因此对那些功能相同的方法就可以使用相同的名称,可以大大简化对象方法的调用。

JavaScript脚本语言是一门基于面向对象的编程语言,它也支持一些预定义对象支持的简单对象模型。JavaScript的对象有属性和方法俩个基本元素组成。

浏览器内部对象

浏览器内部对象系统,可以与HTML文档实现交互作用,它将相关的元素进行封装,从而提高了开发人员设计web页面的能力。

1、Navigator对象

navigator对象管理着浏览器的基本信息,例如版本号,操作系统等一些基本信息。navigator对象中也包括了一些常用的属性,具体如下表。

属性说明
appName显示浏览器名称
appVersion浏览器版本好
platform客户端操作系统
onLine浏览器是否在线
JavaEnabled()是否启用Java

例子:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Navigator对象</title>
</head>
<body>
    浏览器名称:
    <script>
        document.write(navigator.appName)
    </script><br />
    浏览器版本:
    <script>
        document.write(navigator.appVersion)
    </script><br />
    操作系统:
    <script>
        document.write(navigator.platform)
    </script><br />
    在线情况:
    <script>
        document.write(navigator.onLine)
    </script><br />
    是否启用Java
    <script>
        document.write(navigator.javaEnabled())
    </script>
</body>
</html>

效果显示:

2、Location对象

Location对象是浏览器内置的一个静态的对象,它显示的是一个窗口对象所打开的地址。使用location对象是要考虑权限问题,不同的协议或者不同的主机不能相互引用彼此的location对象。location对象包括的一些常用对象如下:

属性说明
hostname返回地址主机名
port返回地址端口号
host返回主机名和端口号

Location对象还包含了reload()重新装载和replace()替换两个方法。

例子:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>location对象</title>
</head>
<body>
    <script type="text/javascript">
        document.write("地址主机名:");
        document.write(location.port);
    </script>
</body>
</html>

运行程序之后会显示当前网页的主机名称。

3、Window对象

window对象是一个优先级很高的对象,window对象包含了丰富的属性,方法和其他时间驱动,通过对属性和方法的操作,可以实现对浏览器显示窗口进行控制。

window对象常用属性如下:

属性说明
self当前窗口
parent主窗口
top顶部窗口
status浏览器状态栏

window对象方法如下:

方法说明
close()关闭
alert()消息框
confirm()确认框
prompt()提示框
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    弹出实例2的页面
    <a href="例子10.html">例子10.html</a>
    <script type="text/javascript">
        window.open("例子10.html","newwindow","height=200,width=300,top=50,left=50")
    </script>
</body>
</html>

效果显示:

4、Document对象

JavaScript既是一门脚本的编程语言,又是基于面向对象的编程。JavaScript的输入和输出都必须通过对象来完成,document就是输出对象的其中之一。document对象最主要的方法是write()。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <script type="text/javascript">
        document.write("<font color=red>今天你学JavaScript了吗?</font>");
    </script>
</body>
</html>

网页效果:

5、History对象

在JavaScript脚本语言中,History对象表示的是浏览历史,他包含了浏览器以前浏览过的网页的网络地址。

方法说明
Forward()相当于浏览器工具栏上的“前进”按钮
Back()相当于浏览器工具栏上的“后退”按钮
Go()相当于浏览器工具栏上的“转到”按钮

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <script type="text/javascript">
        document.write("<font color=red>今天你学JavaScript了吗</font>");
    </script>
    <form action="">
        <input type="button"  name="前进" value="前进" onclick="history.go(1)"/>
        <input type="button" name="后退" value="后退" onclick="history.go(-1)" />
        <input type="button" name="转到" value="转到" onclick="history.go(2)" />
    </form>
</body>
</html>

6、内置对象和方法

JavaScript语言提供的内置对象的属性和方法与其他面向对象编程语言的调用方式相同,格式如下:

对象名.属性名称

对象名.方法名称(参数)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 7
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值