javascript返回页面顶部_计算机二级Web(5):Javascript语言基础 (下)

五.JavaScript内置对象

内置对象都有自己的方法和属性,访问方法如下

对象名.属性名称对象名.方法名称(参数表)

1.String对象

此对象提供了对字符串的支持,此对象只有一个属性,即length,表示字符串中的字符个数

一个例子:

9d652a13bbf8b15824020ef975454cce.png

上面的代码输出为:

aaa623d0f459ebe3656f353af913a48e.png

2.Math对象

Math对象提供了一组数学常数的定义和数学函数。

下面代码进行一个数的四舍五入:

document.write(Math.round(1.8))

代码结果输出为:

2

下面则用方法floor()和random()来返回一个介于0~10之间的随机数

document.write(Math.floor(Math.random()*11)

3.Date对象

Date对象提供了与日期,时间相关的操作功能

5f296b15d3a448cf8933dc6281f42922.png

4,Array对象

它提供了对数组的支持

以下几种方法都可以创建一个Array对象

a4e4491d95a16c5ec90959d4b40fb049.png

一个例子:

576ef690cbaef755868f4c1fad5e4fd5.png
53fd56366f99f96bbb7b2532d2660658.png

5.Global对象

Global对象是一种由Javascript脚本引擎在初始化时创建的特殊对象。在浏览器中,Global对象就是浏览器对象模型中的window对象。

使用Global对象的属性和方法无须引用Global。

6.其它内置函数

  • 对象(Object)对象
  • 正则表达式(RegExp)对象
  • 数字(Number)对象
  • 函数(Function)对象
  • 布尔(Boolen)对象
  • 错误(Error)对象

六.浏览器对象模型BOM

在JavaScript中对象之间不是独立存在的,对象与对象之间有着层次关系。BOM就是用于描述这种对象与对象之间层次关系的模型,其中window对象是BOM的顶层对象,其它对象都是该对象的子对象。

1.window对象

window对象表示浏览器中打开的窗口,提供关于窗口状态的信息。

(1)调整窗口的大小和位置

  • window.moveBy:~(20,20)就是将窗口右移和下移20px
  • window.moveTo:~(20,20)是将窗口移动到(20,20)的位置
  • window.resizeBy:~(20,20)是将窗口宽度和高度增大20px
  • window.resizeTo:~(20,20)是将窗口宽度和高度设置为20px

(2)打开新窗口

用法如下:

window.open(url,target,options)

url:打开的浏览器窗口加载的URL

target:新打开的浏览器窗口的定位目标或者名称

option参数可选包括:

82a9449778068c205b655c773aaced4a.png

(3)系统对话框

  • window.alert:该方法将显示消息提示框
  • window.confirm:显示一个确认对话框
  • window.prompt:显示一个对话框,其中包含一个文本输入框

(4)状态栏控制

  • window.status:显示浏览器状态栏的信息

(5)定时操作

  • window.setInterval:用于设置定时器,每隔一段时间执行指定代码
  • window.clearInterval:清除setInterval函数设置的定时器
  • window.setTimeout:在一段时间之后执行指定代码
  • window.clearTimeout:清除setTimeout设置的定时器

2.document对象

document对象实际上window的属性

187a72116d0649752a25c51089478b7f.png

3.location对象

  • location对象中包含了当前窗口的url信息。
  • location.hostname 返回 web 主机的域名
  • location.pathname 返回当前页面的路径和文件名
  • location.port 返回 web 主机的端口 (80 或 443)
  • location.protocol 返回所使用的 web 协议(http:// 或 https://)

4.navigator对象

  • navigator对象保存浏览器厂家,版本和功能的信息
  • appCodeName 返回浏览器的代码名
  • appName 返回浏览器的名称
  • appVersion 返回浏览器的平台和版本信息
  • browserLanguage 返回当前浏览器的语言

5.screen对象

screen对象的属性保存最终用户的屏幕分辨率和屏幕绘制文档的功能信息

b97d64c779454b98fea11b2759d0aade.png

6.history对象

history对象保存当前对话中用户访问的url信息

ff7e1903d2f82ea496f1519ac7c50253.png

七.Javascript事件及处理

利用Javascript可以对这些事件进行处理,创建动态页面。

4156fb7cb5a38923978bd7ae80a24e3b.png

在对HTMl文档进行动态修改时需要了解对象的位置,这里介绍使用元素名称进行元素定位。

f2530019db2f91fb9e3c6bfb7cbe7c8b.png

获取表单中第一个输入框的定位格式如下:

var myname = documnet.myForm.firstname
0fa34971e67ea2e8b29ab29e44d012da.png

获取表单中value=male的单选按钮及其属性定位格式如下

var sex = document.myForm.sex[0].value

1.事件处理程序的引入

(1)静态引入

事件处理程序的句柄名以属性名的形式在HTML标记实体对象中出现,而对应的属性值为事件响应的代码,如下面这个例子:

(2)动态引入

将事件响应的函数名直接复制给HTML页面中某个标记元素的事件属性

b3f57b8ba8b0a9327ff99b392c16a7de.png

2.常用事件

2.1.鼠标单击事件onclick

当操作者的鼠标指向某个HTML标记元素对象并单击鼠标时将触发onclick事件

2.2.onmousedown事件

当按下鼠标的某一个键时触发该事件

2.3.onmouseup事件

释放鼠标时触发改事件

2.4.onmouseover事件

当鼠标移动到一个对象上面时触发该事件。下面代码实现在鼠标移动到超链接上时在状态栏中显示“你好吗”。

请点击

2.5.onmouseout事件

当鼠标离开一个对象时触发该事件,这个事件适用于区域,层及超链接对象。

2.6.文本输入框及选择域的内容变化事件onchange

当表单文本域(如单行或者多行文本输入框)中的选择发送改变是触发事件,当在选择域(如下拉选择框)中选择某个选项时也会触发该事件,支持该事件的标记由

2.7.选择事件onselect

当操作者在单行或多行文本输入框中对其中的字符选择时触发该事件

2.8.获得焦点事件onfocus

页面元素获得焦点时会触发该事件,如用户选中了单行或者多行文本输入框时

2.9.失去焦点事件onblur

如在文本框中输入结束并单击文本框以外的部分时触发该事件

2.10.页面文档的载入事件onload和卸载事件onunload

当浏览器加载完某个页面文档中的各个标记内容时触发该事件。只适用于`

2.11.图像事件(image events)

图形事件只能应用于标记元素中,并且只提供了一个onabort事件,当某个图象文件加载中断时触发事件

2.12.键盘事件(keyboard events)

主要有onkeydown(按下),onkeypress(按下后松开),onkeyup(松开)

八.Javascript表单处理

表单提交事件onsubmit

当用户单击表单中的提交按钮来提交表单中的各个请求时,就会触发表单的onsubmit事件。

1.text单行元素和textarea多行元素

其属性由:

  • name:设定提交信息时的信息名称
  • value:设定HTML文档中的value信息
  • defaultvalue:设定默认值
  • 对应的主要事件有:onfocus,onblur,onselect,onchange

2.select选择元素

对应的主要事件有:onblur,onfocus,onchange

3.checkbox复选框

对应的主要事件:onclick

4.radio单选按钮

对应的主要事件有onclick

九.文档对象模型DOM

HTML DOM定义了访问和操作HTML文档的标准方法。

  • D(文档):当创建一个网页并将其加载到Web浏览器中时,DOM便根据这个网页创建出一个文档对象
  • O(对象):一种独立的数据集合
  • M(模型):文档对象的树状模型,元素与内容表现为一个个相互连接的结点(node)
  • DOM中的结点类型包括:
  • 1.元素结点
  • 2.文本结点
  • 3.属性结点

计算机二级Web(5):Javascript语言基础 (上)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值