JavaScript程序设计_读书笔记1

来源:互联网 发布:mysql配置环境变量 编辑:程序博客网 时间:2024/05/22 17:06

一、Web简介

        Web是一种典型的分布式应用架构。Web应用中的每一次信息交换都要涉及客户端和服务器两个层面。客户端层面,主要用于展现信息内容,而服务器层面,则主要用于进行业务逻辑的处理和与数据库的交互等。

       客户端技术,主要包括:HTML、CSS、客户端脚本技术(JavaScript、VBScript等)、Flash。

       服务器端技术,主要有CGI(Common Gateway Interface, 即通用网关接口)、ASP(Active Server Page)、PHP、ASP.NET和JSP。

      网络应用程序的体系结构主要有两种:

      * 基于客户端/服务器的C/S结构(Client/Server)

      * 基于浏览器/服务器的B/S结构(Browser/Server)

两种体系结构的比较:

     * 开发和维护成本方面:C/S结构的开发和维护成本都比B/S结构的高。因为采用C/S结构时,对于不用客户端要开发不同的程序,而且软件的安装、调试和升级需要在所有的客户机上进行。

     * C/S的客户端不仅负责与用户的交互,收集用户信息,而且还需要完成通过网络向服务器请求对数据库、电子表格或文档等信息的处理工作。因此C/S的客户端负载更大。

B/S结构的客户端把事务都交给服务器处理,客户端只负责显示,这样客户端负载就小了,但是服务器的运行数据负荷较重,一旦发生服务器“崩溃”等问题,后果不堪设想。

     * 安全性

     C/S结构适用于专人使用的系统,可以通过严格的管理派发软件,达到保证系统安全的目的,相对来说安全性较高,B/S结构的软件,由于使用的人数较多,且不固定,相对来说安全性就会较低。

    总之,B/S相对于C/S具有更多的优势,也就是Web应用程序。

二、JavaScript简介(JavaScript是为了适应动态网页制作的需要而诞生的一种新的编程语言)

     JavaScript是由Netscape Communication Corporation(网景公司)所开发的。是目前客户端浏览器最普遍的Script语言。是Web页面中的一种脚本编程语言,也是一种通用的、跨平台的、基于对象和事件驱动并具有安全性的解释型脚本语言。

     JavaScript的作用:常用语对用户输入的格式化校验、实时显示添加内容、展示动画效果、文字特效、浮动窗口等。

     JavaScript的特点:

*  解释性

    JavaScript的源代码不需要经过编译,而是直接在浏览器中运行时被解释

* 基于对象

    JavaScript是一种基于对象的语言。能够运用自己已经创建的对象

* 事件驱动

    JavaScript可以直接对用户或客户输入做出响应,无须经过Web服务程序。

* 简单性

    JavaScript是一种基于Java基本语句和控制流之上的简单而紧凑的设计。

* 跨平台

    JavaScript依赖于浏览器本身,与操作环境无关。

* 安全性

    JavaScript是一种安全性语言,它不允许访问本地的硬盘,且不能将数据存入到服务器上,不允许对网络文档进行修改和删除,只能通过浏览器实现信息浏览或动态交互。

三、JavaScript执行环境

1、JavaScript脚本在HTML文件中的位置有以下3种:

* 在HTML的<body>标记中,一般用于输出网页内容

* 在HTML的<head>标记中,一般用于编写JavaScript函数,以便多次使用

* 将JavaScript定义在HTML文件外部的js文件中,在HTML中引用该js文件,例如<script src="ch1-1.js"></script>

2、解决有些浏览器支持JavaScript,而有些则不支持JavaScript(也可能是出于安全考虑关闭对JavaScript的支持)的方法:

* 利用HTML注释符号,在注释符号内编写JavaScript。因为JavaScript不能识别HTML注释的结束部分“-->”,对于不支持JavaScript的浏览器,将会把编写的JavaScript脚本作为注释处理。

* 使用<noscript>标记,如果浏览器支持JavaScript脚本,那么该浏览器将会忽略<noscript>...</noscript>标记之间的任何内容。如果浏览器不支持JavaScript脚本,那么浏览器将会把这两个标记之间的内容显示出来。

3、运行环境

Netscape公司Navigator3.0以上版本、微软公司Internet Explorer3.0以上版本,支持JavaScript

4、调试环境


四、HTML基础

1、<sup></sup>标记 :显示上标

例如:输出X的平方:X<sup>2</sup>, 结果为:输出X的平方:X2

2、单标记:<br>:为换行标记

例如:获得是一种满足<br>给予是一种快乐,

结果是:

       获得是一种满足

       给予是一种快乐

3、单标记:<HR>在页面中画一条水平线

例如:<hr size="8" noshade width="80%" color="#FF6600">

4、标题标记<hn>...<hn>

       标题标记包含6种标记,<H1>到<H6>,分别表示6个级别的标题,每一个级别的字体大小都有明显的区分,1级标题字号最大,6级标题字号最小,每一个标题将独占一行且上下留一空行。

5、文字格式标记<font>...</font>

      文字格式标记用于设置文字大小、字体效果和文字颜色,其常用的属性有:size、face、color

例如:

<font face="黑体,宋体" size="4px" color="#FF00FF">    努力不一定成功,放弃必定失败    </font>

6、HTML特殊字符名称都是以一个“&”符号开始,以一个“;”符号结束。

     例如特殊符号“<”用“&lt;”标记表示,特殊符号“>”用“&gt;”标记表示。

7、文字样式标记

      * 粗体字样式

      <b>...</b>  或 <strong>...</strong>

      * 斜体字样式

      <i>...</i>  或 <em>...</em>

      * 带下划线的文字

      <u>...</u>

      * 上标样式

      <sup>...</sup>

      * 下标样式

      <sub>...</sub>

      * 添加删除线

      <s>...</s> 或 <strike>...</strike>

8、段落标记<p>

      语法:<P align="对齐方式">...</P>

其中,align是断楼标记<P>的常用属性,取值为left、center或right。

9、列表标记

     * 无序列表标记 <ul>...<ul>。 属性type表示记录的符号样式,属性值:disc、circle、square

例如:

 <ul type="square">    <li>第一项</li>        <li>第二项</li>        <li>第三项</li>    </ul>

    * 有序列表标记<ol>...</ol>。常用属性有start、type。start属性用来设置列表项的起始值,其属性值为整数,只对type标识的数字项有效。type用来设置列表项的序号样式,可以为1 、a、A、i、I。例如:

例如:

<ul type="square">    <li>第一项</li>        <li>第二项</li>        <li>第三项</li>    </ul>

10、超链接标记

      <a>...</a>被称为超链接标记。常用的属性有:href、name、title、target、accesskey。

href:指定链接文件的相对路径,当设置为“#”时表示一个空链接,即鼠标单击链接后仍然停留在当前页面。

name:链接的名称,常用语书签链接

title:l链接的提示文字

target:指定链接的目标窗口打开方式。共有四个属性值:_parent、_blank、_self、_top

accesskey:超链接热键

例如:<a href="http://www.baidu.com" target="_blank">百度</a>

11、图像标记

    <img>...</img>称为图像标记,常用的属性有:src、height、width、border、hspace、vspace、align、alt。

src:用来设置图像文件所在的路径

height:设置图像的高度

width:设置图像的宽度

border:设置图像边框的宽度。默认为无边框

hspace:设置两个图像之间的水平间距

vspace:设置图像与文字的垂直间距

align:设置图像的对其方式

alt:设置提示文字,当浏览器没有加载上图像或加载图像后鼠标悬停在图片上方时,将显示出提示文字

例如:<img src ="C:\Users\Public\Pictures\Sample Pictures\Desert.jpg" width="100%" height="100%" align="left" alt="hello" />

12、表格标记

    * 表格标记<table>...</table>

常用的属性有:

width:表格宽度    height:表格高度   align:表格在网页中的位置  border:表格边框的宽度  bordercolor:表格边框的颜色

cellspacing : 表格内框的宽度,表格内框的宽度指的是单元格与单元格之间的宽度

cellpadding:表格内文字与边框的距离

bgcolor:表格的背景颜色

background:表格的背景图像

    * 表格标题标记<caption>...</caption> :起到为表格显示标题的作用

    * 表格表头标记<th>...</th>:特殊的单元格,起到标识列名的作用

    * 行标记<tr>...</tr>:用来设置表格中的行,行标记常用的属性如下:

width:行的宽度   height:行的高度   bordercolor:该行的边框颜色   bgcolor:该行的背景颜色  background:该行的背景图像  align:该行文字的水平对其方式,valign:垂直对其方式。

    * 单元格标记<td></td>:标识表格中一个单元格,单元格标记的常用属性如下:

colspan:需要合并单元格的个数    rowspand:需要合并行的个数

表格示例:

 <table border="1">    <caption>表格标题</caption>        <tr>        <th>表头内容</th>            <th>表头内容</th>        </tr>        <tr>        <th>单元格内容</th>            <th>单元格内容</th>        </tr>        <tr>        <th>单元格内容</th>            <th>单元格内容</th>        </tr>    </table>

13、框架标记

      框架主要有两个标记组成,一个是框架容器标记,另一个是框架页面标记。

* 框架容器标记:<frameset>...<frameset>

       在框架页面中,将<frameset>标记置于头部标记之后,以取代<body>的位置。框架容器标记的常用属性:

rows:水平分隔窗口,其值可以取多个值,每个值表示一个框架窗口的水平宽度,单位为像素,也可以是浏览器额百分比数。

cols:垂直分隔窗口,用法与rows类似

frameborder:是否显示框架边框,其属性值只能为0或1.如果为0,边框将会隐藏,1为显示

framespacing:设置边框宽度,默认为1像素

bordercolor:设置边框颜色

* 框架页面标记<frame>...</frame>

     框架页面标记,定义框架内容。常用的属性有:

src:设置框架页面文件的路径,如为设置只显示空白页面

name:设置页面名称便于查找和链接。页面名称不允许包含特殊字符

noresize:禁止改变框架的尺寸

marginwidth:设置页面左右边缘与框架边框的距离

scrolling:是否显示框架滚动条,取值为yes/no/auto。


* 浮动框架 <iframe>...</iframe>

     浮动框架是一种特殊的框架结构。它是在浏览的窗口中嵌套另外的网页文件。iframe常用的属性:

src:指定浮动框架的文件路径

name:设定浮动框架的名称

align:设置浮动框架的对其方式

width:设置浮动框架的宽度

height:设置浮动框架的高度

scrollling:设置浮动框架滚动条的显示方式

frameborder:指定是否显示浮动框架的边框,yes代表显示边框,no:代表隐藏边框

marginwidth:设置浮动框架中内容额左右边缘与边框 的距离

marginheight:设置浮动框架中内容的上下边缘与边框的距离


* 多媒体标记<embed>...</embed>

多媒体主要包括文字、声音、图像和动画等各种形式。常用属性有:

src:多媒体文件路径

width:播放多媒体文件区域的宽度

height:播放多媒体文件区域的高度

hidden:控制播放面板的显示和隐藏

autostart:控制多媒体内容是否自动播放

loop:控制多媒体内容是否循环播放

五、JavaScript语言基础

     JavaScript是一种基于对象和事件驱动并具有安全性能的解释型脚本语言,不仅可以写客户端的脚本程序,由Web浏览器解释执行,而且还可以编写在服务器端执行的脚本程序,在服务器端处理用户提交的信息并动态地向浏览器返回处理结果。

(一)、数据类型、常量、变量

1、数据类型

       * 数字型数据

       数字(number)是最基本的数据类型。JavaScript不区分整数数值和浮点型数值。在JavaScript中,所有的数字都是浮点型表示的。JavaScript采用IEEE754标准定义的64位浮点格式表示数字。

       数值直接量(numbericliteral),直接以数字形式出现在JavaScript程序中的数字称为数值直接量

      * 字符串型

     字符串(string)是由Unicode字符、数字、标点符号等组成的序列。单引号定界的字符串中可以含有双引号,双引号定界的字符串中可以含有单引号。

      * 布尔型

     JavaScript中布尔型有两个值:ture、false

     * 特殊数据类型

     转义字符、

    未定义值 :

    未定义类型的变量是undefined,表示变量还没有被赋值,或者赋予一个不存在的属性值(如var a = String.notProperty;),此外,数字常量NaN,表示“非数字”

    空值:null, 注意null不等于空的字符串(“”)或0

    null与undefined的区别是,null表示一个变量被赋予了一个空值,而undefined则表示该变量尚未被赋值。

2、变量

    JavaScript中变量的命名规则:

    * 必须以字母或下划线开头,中间可以是数字、字母或下划线

    * 变量名不能包含空格或加号、减号等符号

    * 不能使用JavaScript中的关键字

    * 变量名严格区分大小写

   JavaScript的声明与赋值:

在JavaScript中,使用变量前需要先声明变量,变量声明使用关键字var声明。例如var variable

如果变量没有被赋值,那么其默认值就是undefined

当给一个尚未声明的变量赋值时,JavaScript会自动用该变量名创建一个全局变量。(如果是在函数内部,就是局部变量而非全局变量)

建议在使用变量前就对其声明,因为声明变量的最大好处就是能及时发现代码中的错误。

3、常量

常量使用const来声明

(二)、 表达式与运算符

1、运算符

       * 算术运算符

      加(+)、减(-)、乘(*)、除(/)、取模(%)、自加(++)、自减(--)

       * 比较运算符

     小于(<)、大于(>)、小于等于(<=)、大于等于(>=)、等于(==)、绝对等于(===)、不等于(!=)、绝对不等于(!==)

其中等于是指只根据表面值进行判断,不涉及数据类型,例如:“27” == 27 的值为true

       绝对等于是指根据表面值和数据类型同时进行判断。例如:“27” === 27 的值为false

     * 逻辑运算符

    逻辑非(!)、逻辑与(&&)、逻辑或(||)

     * 赋值运算符

    = 、+=、-=、*=、/=、%=

     * 布尔运算符

    !、&=、&&、|=、^=、?:、||、==、!=

     * 位运算符

     & 、|、^、~、<<(左移)、>>(带符号右移)、>>>(填0右移)

     * typeof

     typeof运算符返回它的操作数当前所容纳的数据的类型。结果可能是:“number”、“string”、“boolean”、“object”、“function”、“undefined”共6中可能值。

    * new

    创建一个新对象

2、运算符优先级

    与其他语言相同


3、基本语句

     * 赋值语句

     变量名 = 表达式

     * 条件语句

    if语句、switch语句

     * 循环语句

    while 、do ... while、for

     * 跳转语句

     break、continue

     * 异常处理语句

    try... catch ...finally语句、throw语句

(三)、函数

      1、定义

      函数是由关键字function、函数名加一组参数以及置于大括号中需要执行的一段语句定义的。

<script language="javascript">function functionName(parameters) {some statements;}</script>

其中:functionname:函数名称     parameter:参数名称

      注:函数的定义语句通常被放在HTML文件的<HEAD>标记中,而函数的调用语句通常放在<BODY>标记中,如果在函数定义之前调用函数,执行将会出错。

     2、调用

     在事件响应中调用函数,例如:

<script language="javascript">function test() {alert("在事件响应中调用函数")}</script><body><form action="" method="post" name="forml">    <input type="button" value="提交" onClick="test();"></form></body>

     上述代码在按钮onClick事件中调用test()函数。

    通过链接调用函数,例如:

<script language="javascript">function test() {alert("通过链接调用函数")}</script><body><a href="javascript:test();">测试</a></body>

       上述代码在点击超链接“测试”时,调用test()函数

(四)、常用的内置对象

       JavaScript是一种基于对象(Object)的语言,它支持3种对象:内置对象、用户自定义对象和浏览器对象

1、数学类(Math)

      该类的所有属性和方法都是静态的。

Math类的属性有:

      constructor:构造函数的引用                                              E:常量e,自然对数的底数(约等于2.718)

      LN2:返回2的自然对数(约等于0.693)                            LN10:返回10的自然对数(约等于2.302)

      LOG10E:返回以10为底的e的对数(约等于0.434)         PI : 返回圆周率(约等于3.14159)

      prototype:向对象添加自定义属性和方法                        SQRT1_2:返回2的平方根除1(约等于0.707)

      SQRT2: 返回2的平方根(约等于1.414)
Math类的方法:

      abs(x) : 返回一个数的绝对值                                           acos(x):返回指定参数的反余弦值

      asin(x):返回指定参数的反正弦值                                     cos(x):返回指定参数的余弦值

      sin(x):返回指定参数的正弦值                                           tan(x):返回一个角的正切值

      atan(x):以介于-PI/2与PI/2弧度之间的数值来返回x的反正切值       ceil(x):对一个数进行上舍入

      exp(x):返回e的指数                                                          floor(x):对一个数进行下舍入

      log(x):返回数的自然对数(底为e)                                  max(x, y) :返回x和y中的最大值

      min(x, y) : 返回x和y中的最小值                                        pow(x, y) : 返回x的y次幂

      random(): 返回0~1之间的随机数                                      round(x):将一个数四舍五入为最接近的整数

      sqrt(x):返回数的平方根

2、日期类(Date)

     Date类的属性:

constructor属性的用法:例如

var newDate = new Date();if (newDate.constructor == Date)document.write("日期型对象");


prototype属性的用法:

例如:用自定义属性来记录当前日期是本周的周几,代码如下:

var newDate = new Date(); // 当前日期Date.prototype.mark = null; // 向对象中添加属性newDate.mark = newDate.getDay(); // 从Date对象返回一周中的某一天alter(newDate.mark)

     Date类的方法:


3、字符串类(String)

String类的属性:length、constructor、prototype

注:prototype属性是一个公共属性,在Array、Date、Boolean和Number类中都可以调用该属性,用法与String对象相同

String类的方法:

anchor() : 创建HTML锚                                          big(): 用大号字体显示字符串                                  small():使用小字号来显示字符串

fontsize():使用指定的尺寸来显示字符串                bold():使用粗体显示字符串                                     italics():使用斜体显示字符串

link():将字符串显示为链接                                     strike():使用删除线来显示字符串                            charAt():返回指定位置的字符

charCodeAt():返回指定位置的字符                       concat():连接字符串                                             fontcolor():使用指定的颜色来显示字符串

indexOf() : 检索字符串                                          match():在字符串内检索指定的值 ,或匹配正则    replace():替换与正则表达式匹配的子串

search():检索与正则表达式相匹配的值                 split():把字符串分隔为字符串数组                          substr():从起始索引号提取字符串中指定数目的字符

sub() :把字符串显示为下标                                   sup():把字符串显示为上标                                      toLowerCase():把字符串转换为小写

toUpperCase():把字符串转换为大写                     valueOf():返回某个字符串对象的原始值

slice() : 提取字符串的片段,并在新的字符串中返回被提取的部分

substring():提起字符串中两个指定的索引号之间的符号                          

4、数组(Array)

  Array也有3个属性:length、constructor和prototype

其中protoytpe属性的示例用法如下:

<script languate="javascript">Array.prototype.outAll = function(ar) {for(var i =0; i<this.length; i++) {document.write(this[i]);document.write(ar);}}var arr = new Array("I", "like", "study", "JavaScript", "!");arr。outAll(" ");</script>// 结果:I like study JavaScript !

 Array类的方法:

concat():连接两个或更多的数组,并返回结果                     pop():删除并返回数组的最后一个元素                  push() : 向数组的末尾添加一个或多个元素,并返回新的长度

shift():删除并返回数组的第一个元素                                 unshift():向数组的开头添加一个或多个元素,并返回新的长度

reverse():颠倒数组中元素的顺序                                         sort():对数组的元素进行排序                                 slice():从某个已有的数组返回选定的元素

toString():把数组转换为字符串,并返回结果                       toLocaleString():把数组转换为本地数组,并返回结果 

join(): 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。


(五)、事件处理

 1、为事件指定事件处理程序的指定方式:

(1)、直接在HTML标记中指定

         语法:<标记 ... ... 事件=“事件处理程序” [事件=“事件处理程序” ... ]>

         例如:<body onLoad="alert('欢迎进入本页面')" onunLoad="alert('谢谢浏览')" >

(2)、指定特定对象的特定事件

         该方法在JavaScript的<script> 标记中指定特定的对象,以及该对象要执行的时间名称,并在<script>和</script>标记中编写事件处理程序代码

         语法:

<script language="JavaScript" for="对象" event="事件">...// 事件处理程序代码...</script>

        例如:

<script language="javascript" for="window" event="onLoad">alert("欢迎进入本网页");</script><script language="javascript" for="window" event="onunLoad">alert("谢谢浏览");</script>

(3)、在JavaScript中说明

     在JavaScript脚本中直接对各对象的事件及事件所调用的函数进行声明,不用再HTML标记中指定要执行的事件。

语法:<事件主角 - 对象>.<事件> = <事件处理程序>;

例如:

<input type="button" name="Button" value="Button"><script language="javascript">function pp() {alert("JavaScript");}Button.onClick=pp;</script>


2、JavaScript的相关事件

(1)、鼠标键盘事件

onClick : 单击鼠标时触发该事件                                  ondblclick : 双击鼠标时触发该事件                         onmousedown:按下鼠标时触发该事件

onmouseup:鼠标按下后松开鼠标时触发该事件           onmouseover:当鼠标移动到某对象范围的上方时触发该事件

onmousemove:鼠标移动时触发此事件                        onmouseout:当鼠标离开某对象范围时触发此事件

onkeypress:当键盘上某个按键被按下并且释放时触发此事件      onkeydowm:当键盘上某个按键被按下时触发此事件

onkeyup:当键盘上某个按键被按下后松开时触发该事件              

(2)、页面相关事件

onabort:图片在下载时被用户中断时触发此事件          onbeforeunload:当前页面的内容将要被改变时触发此事件

onerror:出现错误时触发此事件                                    onload:页面内容完成时触发此事件(也就是页面加载事件)

onresize:当浏览器的窗口大小被改变时触发此事件     onunload:当前页面将被改变时触发此事件

(3)、表单相关事件

onblur:当前元素失去焦点时触发此事件                       onchange:当前元素失去焦点并且元素的内容发生改变时触发此事件

onfocus:当某个元素获得焦点时触发此事件                 onreset:当表单中RESET的属性被激活时触发此事件

onsubmit:一个表单被提交时触发此事件

(4)、滚动字幕事件

onbounce:在Marquee内的内容移动至Marquee显示范围之外时触发此事件

onfinish:当Marquee元素完成需要显示的内容后触发此事件

onstart:当Marquee元素开始显示内容时触发此事件

(5)、编辑事件

onbeforecopy:当页面当前被选择内容将要复制到浏览器系统的剪贴板前触发此事件

onbeforecut:当页面中的一部分或全部内容被剪切到浏览器系统剪贴板时触发此事件

onbeforeeditfocus:当前元素将要进入编辑状态时触发此事件

onbeforepaste:将内容从浏览者的系统剪贴板中粘贴到页面上时触发此事件

onbeforeupdate:当浏览者粘贴系统剪贴板中的内容时通知目标对象

oncontextmenu:当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发此事件

oncopy:当页面当前的被选择内容被复制后触发此事件

oncut:当页面当前的被选择内容被剪切时触发此事件

ondrag:当某个对象被拖动时触发此事件(活动事件)

ondragend:当鼠标拖动结束时触发此事件,即鼠标的按钮被释放时

ondragenter:当对象被鼠标拖动进入其容器范围内时触发此事件

ondragleave:当对象被鼠标拖动的对象离开其容器返回时触发此事件

ondragover:当被拖动的对象在另一对象容器范围内拖动时触发此事件

ondragstart:当某对象将被拖动时触发此事件

ondrop:在一个拖动过程中,释放鼠标键时触发此事件

onlosecapture:当元素失去鼠标移动所形成的选择焦点时触发此事件

onpaste:当内容被粘贴时触发此事件

onselect:当文本内容被选择时触发此事件

onselectstart:当文本内容的选择将开始发生时触发此事件

(6)、数据绑定事件

onafterupdate:当数据完成由数据源到对象的传送时触发此事件

oncellchange:当数据来源发生变化时触发此事件

ondataavailable:当数据接收完成时触发此事件

ondatasetchanged:数据在数据源发生变化时触发此事件

ondatasetcomplete:当数据源的全部有效数据读取完毕时触发此事件

onerroruodate:当使用onbeforeupdate事件触发取消了数据传送时,代替onafterupdate事件

onrowenter:当前数据源的数据发生变化并且有新的有效数据时触发此事件

onrowexit:当前数据源的数据将要发生变化时触发此事件

onrowsdelete:当前数据源记录将被删除时触发此事件

(7)、外部事件

onafterprint:当文档被打印后触发此事件

onbeforeprint:当文档即将被打印时触发此事件

onfilterchange:当某个对象的滤镜效果发生变化时触发此事件

onhelp:当浏览者按下(F1)键或者浏览器的帮助菜单时触发此事件

onpropertychange:当对象的属性之一发生变化时触发此事件

onreadystatechange:当对象的初始化属性发生变化时触发此事件

3、鼠标事件和键盘事件

     单击事件一般应用于Button对象、Checkbox对象、Image对象、Link对象、Radio对象、Reset对象和Submit对象。

     键盘事件
4、页面相关事件
     加载事件(onload)是在网页加载完毕后触发相应的事件处理程序,它可以在网页加载完成后对网页中的表格样式、字体、背景颜色等进行设置。
     卸载事件(unload)是在卸载网页时触发相应的事件处理程序,卸载网页是指关闭当前页面或从当前页跳转到其他网页中,该事件常被用于子关闭当前页或跳转其他网页时,弹出询问提示框
     页面的大小事件(onresize)是用户改变浏览器的大小时触发事件处理程序,它主要用于固定浏览器的大小。
5、表单相关事件
       获得焦点事件(onfocus)是当某个元素获得焦点时触发事件处理程序。
       失去焦点事件(onblur)是当前元素失去焦点时触发事件处理程序。
       失去焦点修改事件(onchange)是当前元素失去焦点并且元素的内容发生改变是触发事件 处理程序。该事件一般在下拉文本框中使用。
       表单提交事件(onsubmit)是在用户提交表单时(通常使用“提交”按钮,也就是将按钮的type属性设置为submit),在表单提交之前被触发,该事件的处理程序通过返回false值来阻止表单的提交。该事件可以用来验证表单输入项的正确性。
       表单重置事件(onreset)与表单提交事件的处理过程相同,该事件只是将表单中的各元素的值设置为原始值。一般用于清空表单中的文本框。
6、滚动字幕事件
     字幕滚动事件主要是在<marquee>标记中使用。
     onbounce事件是在<marquee>标记中的内容滚动到上下或左右边界时触发的事件处理程序,该事件只有在<marquee>标记的behavior属性设为aloernate时才有效。
     onstart事件是在<marquee>标记中的文本开始显示时触发事件处理程序。通过该事件在滚动内容显示时,设置其颜色、样式、滚动方向等。

 7、编辑事件
     注:如果在onbeforecopy和oncopy事件中调用的是自定义函数名,那么必须在函数名的前面加return语句。
     如果只是简单地屏蔽复制功能,可以在onbeforecopy或oncopy事件中用javascript语句来实现,如:<body oncopy="return false"></body>
     剪切事件:onbeforecut、oncut
     粘贴事件:onbeforepaste、onpaste
     选择事件:onselect、onselectstart
---对象拖动事件
     分两类:被拖动对象事件、放置目标对象事件
被拖动对象事件:ondrag、ondragend、ondragstart事件
放置目标对象事件:ondragover、ondragenter、ondragleave、ondrop事件

六、JavaScript常用文档对象
      文档对象(ducument)是浏览器窗口对象(window)的一个主要部分。它包含了网页显示的各个元素对象。该对象是window对象的子对象
(一)、文档对象
      
注:window对象是DOM对象模型中的默认对象,因此window对象中的方法和子对象不需要使用window来引用。
      通过document对象可以访问HTML文档中包含的任何HTML标记并可以动态地改变HTML标记中的内容。
     document对象层次结构图如下:
1、document对象的属性:
      alinkColor:链接文字的颜色,对应于<body>标记中的alink属性
      all[] : 存储HTML标记的一个数组(该属性本身也是一个对象)
      anchors[]:存储锚点的一个数组。(该属性本身也是一个对象)
      bgColor:文档的背景颜色,对应于<body>标记中的bgcolor属性
      cookie:表示cookie的值
      fgColor:文档的文本颜色(不包含超链接的文字)对应于<body>标记中的text属性值
      forms[]:存储窗体对象的一个数组(该属性本身也是一个对象)
      fileCreatedDate:创建文档的日期
      fileModifiedDate:文档最后修改的日期
      fileSize:当前文件的大小
      lastModified:文档最后修改的时间
      images[]:存储图像对象的一个数组(该属性本身也是一个对象)
      linkColor:未被访问的链接文字的颜色,对应于<body>标记中的link属性
      links[]:存储link对象的一个数组(该属性本身也是一个对象)
      vlinkColor:表示已访问的链接文字的颜色,对应于<body>标记的vline属性
      title:当前文档标题对象
      body:当前文档主体对象
      readyState:获取某个对象的当前状态
      URL:获取或设置URL
2、document对象的方法:
     close:关闭一个文档输出流,并显示选定的数据
     open:打开一个文档输出流并接收write和writeln方法的创建页面内容
     write:向文档中写入HTML或JavaScript语句
     writeln:向文档中写入HTML或JavaScript语句,并以换行符结束
     createElement:创建一个HTML标记
     getElementById:获取指定id的HTML标记
3、document对象的事件
     文档对象有onload事件和onunload事件

4、示例应用:在页面中点击“打开一个新文档”按钮,就会打开一个新的页面,该页面的内容是document写进入的.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>打开新窗口并输出内容</title><script language="javascript"><!--function oc() {var dw;dw = window.open();dw.document.open();dw.document.write("<html><head><title>一个新的窗口</title>");dw.document.write("</head><body>");dw.document.write("<img name='i1' src='duola-a-meng_30.png' width='400' height='200'><br>");dw.document.write("多啦A梦<br>");dw.document.write("</body></html>");dw.document.close();}--></script></head><body><input type="button" value="打开一个新文档" onclick="oc();"/></body></html>

(二)、窗体及其元素对象
       窗体对象是文档对象的一个元素,它含有多种格式的对象存储信息,使用它可以在JavaScript脚本中编写程序进行文字输入,并可以用来动态改变文档的行为。
form对象包含一个elements数组,elements[]数组中的每个元素用于表示表单元素的值。
       一个Document对象可以包含多个Form对象,一个Form对象也可以包含多个Elements对象。

窗体对象的属性:
       action:表示表单数据所要提交的URL
       method:表示表单以何种方式进行提交,提交表单包括get与post方式
       enctype:数据提交的格式
       target:指定服务器返回的结果在哪里显示
       name:表单的名称
       elements[]:表示表单元素的数组
       length:表单的个数
窗体对象方法:
      submit():用于提交一个表单
      reset():用于清除一个表单的数据
      当表单使用这两个方法时,不会触发onSubmit和onReset事件
窗体对象事件:
      onSubmit事件是当用户单击“提交”按钮时触发,onReset事件是当用户单击“重置”按钮时触发。
      onSubmit事件和onReset事件与<form>标记一起使用,并且必须放在</form>标记之前。
<form action="" method="post" name="form1" onsubmit="somestatements" onReset="somestatements"></form>
      当使用onSubmit和onReset事件处理器时,需要返回true和false.
(三)、锚点(anchor)与链接(link)对象
1、锚点对象
     JavaScript中的锚点对象是文档对象的一个属性,它通常以数组 的形式表示网页中所有的锚点。
      anchors数组中包含了文档中定义的所有的锚点标记,存储锚点的顺序是以锚点在文档中出现的顺序存储的,下标从0开始
      anchors数组常用的属性:
      * length属性:获取文档中锚点的总数  ,例如:number=document.anchors.length
      * name属性:获取某个锚点的name参数值,语法:gName=document.anchors[i].name
      * id属性:获取锚点的id参数值,语法:gId=document.anchors[i].id


2、链接对象
     JavaScript中每一个链接对象偶读存储在links[]数组中。链接对象是以在页面中出现的顺序存储在links[]数组中的。
链接对象的属性:
       hash:链接URL中锚的部分并包括“#”符号
       host::链接URL中的主机名称和端口号
       hostname:链接URL中的主机名称
       href:完整的链接URL
       pathname:链接URL中的路径名部分
       port:链接URL中的端口号
       protocol:链接URL中的协议部分并包括冒号
       search:链接URL中条件部分并包括“?”符号
       target:链接的目标窗口打开方式
target的取值:
       _parent:表示在上一级窗口中打开。一般使用框架页时经常使用
       _blank:表示在新窗口中打开
       _self:表示在同一个窗口中打开
       _top:表示在浏览器的整个窗口中打开,忽略任何框架

(四)、图像(image)对象
     1、网页中的图像(HTML文件中使用<img>标签)
     border:表示图片边界宽度,以像素为单位
     height:表示图像的高度
     hspace:表示图像与左边和右边的水平空间大小,以像素为单位
     lowsrc:低分辨率显示候补图像的URL
     name:图片名称
     src:图像URL
     vspace:表示上下边界垂直空间的大小
     width:表示图片的宽度
     alt:鼠标经过图片是显示的文字
2、JavaScript中的图像对象
     当HTML文件中以<img></img>标签创建了一个图像,相应的图像对象也将被创建,可以通过JavaScript代码控制图像对象。
     document.images[]是一个数组,包含了所有页面只能够的图像对象
    
图像对象的事件:
     onLoad:当一个图像被加载之后触发的事件
     onAbord:当用户取消了图像加载后触发的事件
     onError:当图像加载过程中发生错误时触发的事件
     onClick:当单击图像时触发的事件
     onMouseOver:当鼠标经过时触发的事件
     onMouseOut:当鼠标离开是触发的事件

七、JavaScript常用窗口对象
     window对象即为窗口对象,是一个全局对象,是所有对象的顶级对象。
(一)、屏幕对象(Screen)
      screen对象是javaScript中的屏幕对象,反映了当前用户的屏幕设置。这些信息是只读的,不能设置。属性如下:
width:用户整个屏幕的水平尺寸,以像素(px)为单位
height:用户整个屏幕的垂直尺寸,以像素(px)为单位
pixelDepth:显示器的每个像素的位数
colorDepth:当前颜色设置所用的位数。1代表黑白、8代表256色、16代表增强色,24/32代表真彩色
availHeight:返回窗口内容区域的垂直尺寸,以像素为单位
avaliWidth:返回窗口内容区域的水平尺寸,以像素为单位

例如:以下代码会在网页中显示屏幕的信息:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>SCREEN</title></head><body><script language="javascript">w=window.screen.width;document.writeln("屏幕宽度是:"+w+"<br>");h=window.screen.height;document.writeln("屏幕高度是:"+h+"<br>");cd=window.screen.colorDepth;document.writeln("屏幕色深是:"+cd+"<br>");aw=window.screen.availWidth;document.writeln("屏幕可用宽度是:"+aw+"<br>");ah=window.screen.availHeight;document.writeln("屏幕可用高度是:"+ah+"<br>");</script></body></html>

控制窗口在屏幕边缘反弹的示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><body><script language="JavaScript">window.resizeTo(300, 300)window.moveTo(0,0)inter=setInterval("go()", 20);var aa=0;var bb=0;var a=0;var b=0;function go() {try{if(aa==0)a=a+2;if(a>screen.availWidth-300)    aa=1;if(aa==1)    a=a-2;if(a==0)    aa=0;if(bb==0)b=b+2;if(b>screen.availHeight-300)bb=1;    if(bb==1)b=b-2;if(b==0)bb=0;window.moveTo(a, b);} catch(e){}}</script></body></html>

(二)、浏览器信息(navigator)对象
      navigator是存储浏览器信息的对象。浏览器信息对象主要包含了浏览器及用户使用的计算机操作系统的有关信息,这些信息也只能读取,不能设置。
navigator对象的常用属性如下:
appCodeName:浏览器内码名称
appName:浏览器名称
appVersion:浏览器版本号
platform:用户操作系统
userAgent:该字符串包含了浏览器的内码名称和版本号,它被包含在向服务器端请求的头字符串中,用于识别用户
language:浏览器设置的语言,IE浏览器除外
userlanguage:操作系统设置的语言,仅限于IE浏览器
systemLanguage:操作系统默认设置的语言,仅限于IE浏览器
browserLanguage:浏览器设置的语言,仅限于IE浏览器

(三)、窗口(window)对象

     Window对象代表的是打开的浏览器窗口。通过window对象可以控制窗口的大小和位置、由窗口弹出的对话框、打开窗口与关闭窗口,还可以控制窗口上是否显示地址栏、工具栏和状态栏等栏目等。
       window对象的属性:
       document:对话框中显示的当前文档
       frames:表示当前对话框中所有frame对象的集合
       location:指定当前文档的URL
       name:对话框的名字
       status:状态栏中的当前信息
       defaultstatus:状态栏中的当前信息
       top:表示最顶层的浏览器对话框
       parent:表示包含当前对话框的父对话框
       opener:表示打开当前对话框的父对话框
       closed:表示当前对话框是否关闭的逻辑值
       self:表示当前对话框
       screen:表示用户屏幕,提供屏幕尺寸,颜色深度等信息
       navigator:表示浏览器对象,用于获得与浏览器相关的信息
       window对象的方法:
       alert() // 弹出一个警告对话框                                                                             confirm()  :在确认对话框中显示指定的字符串
       prompt() : 弹出一个提示对话框                                                                          open() : 打开新浏览器对话框并且显示由URL或名字引用的文档,并设置创建对话框的属性
       close() : 关闭被引用的对话框                                                                             focus():将被引用的对话框放在所有打开对话框的前面
       blur():将被引用的对话框放在所有打开对话框的后面                                          scrollTo(x,y):把对话框滚动到指定的坐标
       scrollBy(offsetx, offsety):按照指定的位移量滚动对话框                                     setTimeout(timer):在指定的毫秒数过后,对传递的表达式求值
       setInterval(interval):指定周期性执行代码                                                           moveTo(x, y):将对话框移动到指定的坐标处
       moveBy(offsetx, offsety):将对话框移动到指定的位移量处                                 resizeTo(x, y):  设置对话框的大小
       resizeBy(offsetx, offsety):按照指定的位移量设置对话框的大小                         print() : 相当于浏览器工具栏中的“打印”按钮
       navigate(URL): 使用对话框显示URL指定的页面                                             status():状态条,位于对话框下部的信息条
       Defaultstatus() : 状态条,位于对话框下部的信息条

1、多窗口控制
** 新建窗口:窗口对象=window.open([网页地址,窗口名,窗口特性]);
    窗口名也可以是保留的窗口名,例如:“_self”、“_top”、“_parent”、“_blank”.

    窗口特性的格式为:“特姓名1=特性值1;特性名2=特性值2;....特性名n=特性值n”的字符串
窗口特性名及特性值如下:
weight:窗口宽度(像素)                                            height:窗口高度(像素)                                                top:窗口左上角到屏幕左上角的高度距离(像素)
left:窗口左上角至屏幕左上角的宽度距离(像素)      location:是否有网址栏                                                     menubar:是否有菜单栏
scrollbar:是否有滚动条                                               toolbar:是否有工具栏                                                       status:是否有状态栏
resizable:是否可改变窗口尺寸
** 滚动网页:使用window对象的scroll()方法可以指定窗口的当前位置:scroll(x, y);
** 窗口的尺寸及位置
moveTo():用来将窗口移动到指定坐标(x,y)处
resizeTo():用来将当前窗口改变成(x,y)大小。x,y分别为宽度和高度
resizeBy():用来将当前窗口改变指定的大小(x,y).当x、y的值大于0时为扩大,小于0时为缩小

** 状态栏的文字设置
     status()方法:语法:window.status=str
     defaultstatus()方法:window.defaultstatus=str
     status()方法与defaultstatus()方法的区别在于信息显示时间的长短。defaultstatus()方法的值会在任何时间显示,而status()方法的值只在某个事件发生的瞬间显示。
** 关闭窗口
     close()方法
     例如在弹窗显示一段时间后自动关闭:<body onload=“window.setTimeout('window.close(), 5000')”>
2、输入/输出信息
     在window对象中可以创建3种不同的对话框,分别为警告对话框(alert()方法)、确认对话框(confirm()方法)和提示对话框(prompt()方法)。

注意:警告对话框是由当前运行的页面弹出的,在对该对话框进行处理之前,不能对当前页面进行操作,并且其后面的代码也不会被执行。只有将警告对话框进行处理后(如单击“确定”或关闭对话框),才可以对当前页面进行操作,后面的代码也才能继续执行。
(四)、网址(location)对象
      网址对象的常用属性和方法
      hash:URL的散列参数部分
      host:主机名
      hostname:主机名和domain名
      pathname:路径名
      href:URL的全名(hostname+pathname)
      port:通信端口号
      protocol:协议部分,例如:http、ftp等
      search :查询字符串部分,也就是后来送与服务器的参数
      reload():刷新当前页面
      replace():用传送 的URL支持的页面替代当前页面
(五)、历史记录(history)对象
      history对象是一个只读的URL字符串数组,该对象主要用来存储一个最近所访问网页的URL地址的列表
      语法:window.history.property|method([parameters])
  ***历史记录对象的常用属性:
      length:历史列表的长度,用于判断列表中的入口数目
      current:当前文档的URL
      next:历史列表的下一个URL
      previous:历史列表的前一个URL
  ***history对象的方法:
      back() : 退回前一页
      forword():重新进入下一页
      go():进入指定的网页

0 0
原创粉丝点击