JavaScript经典教程.ppt

JavaScript教程 JavaScript是由Netscape公司开发并随Navigator导航者一起发布的 介于Java与HTML之间 基于对象事件驱动的编程语言 正日益受到全球的关注 因它的开发环境简单 不需要Java编译器 而是直接运行在Web浏览器中 而因倍受Web设计者的所爱 JavaScript教程语言概况 JavaScript的出现 它可以使得信息和用户之间不仅只是一种显示和浏览的关系 而是实现了一种实时的 动态的 可交式的表达能力 JavaScript脚本正是满足这种需求而产生的语言 它深受广泛用户的喜爱的欢迎 它是众多脚本语言中较为优秀的一种 它与WWW的结合有效地实现了网络计算和网络计算机的蓝图 无凝Java家族将占领Internet网络的主导地位 JavaScript几个基本特点 脚本编写语言基于对象的语言简单性安全性动态性跨平台性 JavaScript和Java的区别 虽然JavaScript与Java有紧密的联系 但却是两个公司开发的不同的两个产品 Java是SUN公司推出的新一代面向对象的程序设计语言 特别适合于Internet应用程序开发 JavaScript是Netscape公司的产品 其目的是为了扩展NetscapeNavigator功能 而开发的一种可以嵌入Web页面中的基于对象和事件驱动的解释性语言 它的前身是LiveScript Java的前身是Oak语言 基于对象和面向对象 Java是一种真正的面向对象的语言 即使是开发简单的程序 必须设计对象 JavaScript是种脚本语言 它可以用来制作与网络无关的 与用户交互作用的复杂软件 它是一种基于对象 ObjectBased 和事件驱动 EventDriver 的编程语言 因而它本身提供了非常丰富的内部对象供设计人员使用 解释和编译 两种语言在其浏览器中所执行的方式不一样 Java的源代码在传递到客户端执行之前 必须经过编译 因而客户端上必须具有相应平台上的仿真器或解释器 它可以通过编译器或解释器实现独立于某个特定的平台编译代码的束缚 JavaScript是一种解释性编程语言 其源代码在发往客户端执行之前不需经过编译 而是将文本格式的字符代码发送给客户编由浏览器解释执行 强变量和弱变量 两种语言所采取的变量是不一样的 Java采用强类型变量检查 即所有变量在编译之前必须作声明 如 Integerx Stringy x 1234 x 4321 其中X 1234说明是一个整数 Y 4321说明是一个字符串 JavaScript中变量声明 采用其弱类型 即变量在使用前不需作声明 而是解释器在运行时检查其数据类型 如 x 1234 y 4321 前者说明x为其数值型变量 而后者说明y为字符型变量 代码格式不一样 Java是一种与HTML无关的格式 必须通过像HTML中引用外媒体那么进行装载 其代码以字节代码的形式保存在独立的文档中 JavaScript的代码是一种文本字符格式 可以直接嵌入HTML文档中 并且可动态装载 编写HTML文档就像编辑文本文件一样方便 嵌入方式不一样 在HTML文档中 两种编程语言的标识不同 JavaScript使用 来标识Java使用 来标识 静态联编和动态联编 Java采用静态联编 即Java的对象引用必须在编译时的进行 以使编译器能够实现强类型检查 JavaScript采用动态联编 即JavaScript的对象引用在运行时进行检查 如不经编译则就无法实现对象引用的检查 编写第一个JavaScript程序 JavaScriptAppearshere alert 这是第一个JavaScript例子 alert 欢迎你进入JavaScript世界 alert 今后我们将共同学习JavaScript知识 编写第一个JavaScript程序 JavaScript代码由 说明 在标识 之间就可加入JavaScript脚本 alert 是JavaScript的窗口对象方法 其功能是弹出一个具有OK对话框并显示 中的字符串 通过标识说明 若不认识JavaScript代码的浏览器 则所有在其中的标识均被忽略 若认识 则执行其结果 使用注释这是一个好的编程习惯 它使其他人可以读懂你的语言 JavaScript以标签结束 JavaScript基本数据结构 JavaScript提供脚本语言的编程与C 非常相似 它只是去掉了 语言中有关指针等容易产生的错误 并提供了功能强大的类库 对于已经具备 或 语言的人来说 学习JavaScript脚本语言是一件非常轻松愉快的事 JavaScript代码的加入 可以直接将JavaScript脚本加入文档JavaScript语言代码 JavaScript语言代码 说明 通过标识 指明JavaScript脚本源代码将放入其间 通过属性Language JavaScript 说明标识中是使用的何种语言 这里是JavaScript语言 表示在JavaScript中使用的语言 基本数据类型 基本数据类型常量变量 基本数据类型 在JavaScript中四种基本的数据类型 数值 整数和实数 字符串型 用 号或 括起来的字符或数值 布尔型 使True或False表示 和空值 常量 整型常量实型常量布尔值字符型常量空值 表达式 在定义完变量后 就可以对它们进行赋值 改变 计算等一系列操作 这一过程通常又叫称一个叫表达式来完成 可以说它是变量 常量 布尔及运算符的集合 因此表达式可以分为算术表述式 字串表达式 赋值表达式以及布尔表达式等 运算符 算术运算符比较运算符布尔逻辑运算符 算术运算符 JavaScript中的算术运算符有单目运算符和双目运算符 双目运算符 加 减 乘 除 取模 按位或 按位与 右移 右移 零填充 单目运算符 取反 取补 递加1 递减1 比较运算符 比较运算符它的基本操作过程是 首先对它的操作数进行比较 尔后再返回一个true或False值 有 个比较运算符 大于 大于等于 等于 不等于 布尔逻辑运算符 在JavaScript中增加了几个布尔逻辑运算符 取反 与之后赋值 逻辑与 或之后赋值 逻辑或 异或之后赋值 逻辑异或 三目操作符 或 等于 不等于 其中三目操作符主要格式如下 操作数 结果 结果 若操作数的结果为真 则表述式的结果为结果 否则为结果 一个跑马灯效果的JavaScript文档 varmsg 这是一个跑马灯效果的JavaScript文档 varinterval 100 varspacelen 120 varspace10 varseq 0 functionScroll len msg length window status msg substring 0 seq 1 seq if seq len seq spacelen window setTimeout Scroll2 interval else 一个跑马灯效果的JavaScript文档 window setTimeout Scroll interval functionScroll2 varout for i 1 i len seq 0 window setTimeout Scroll2 interval Scroll JavaScript程序构成 控制语句函数对象方法属性 if条件语句 基本格式if 表述式 语句段 else语句段 功能 若表达式为true 则执行语句段 否则执行语句段 if语句的嵌套 if 布尔值 语句 else 布尔值 语句 elseif 布尔值 语句 else语句 在这种情况下 每一级的布尔表述式都会被计算 若为真 则执行其相应的语句 否则执行else后的语句 For循环语句 基本格式for 初始化 条件 增量 语句集 功能 实现条件循环 当条件成立时 执行语句集 否则跳出循环体 说明 初始化参数告诉循环的开始位置 必须赋予变量的初值 条件 是用于判别循环停止时的条件 若条件满足 则执行循环体 否则跳出 增量 主要定义循环控制变量在每次循环时按什么方式变化 三个主要语句之间 必须使用逗号分隔 while循环 基本格式while 条件 语句集 该语句与For语句一样 当条件为真时 重复循环 否则退出循环 For与while语句两种语句都是循环语句 使用For语句在处理有关数字时更易看懂 也较紧凑 而while循环对复杂的语句效果更特别 break和continue语句 与C 语言相同 使用break语句使得循环从For或while中跳出 continue使得跳过循环内剩余的语句而进入下一次循环 函数 函数为程序设计人员提供了一个丰常方便的能力 通常在进行一个复杂的程序设计时 总是根据所要完成的功能 将程序划分为一些相对独立的部分 每部分编写一个函数 从而 使各部分充分独立 任务单一 程序清晰 易懂 易读 易维护 JavaScript函数可以封装那些在程序中可能要多次用到的模块 并可作为事件驱动的结果而调用的程序 从而实现一个函数把它与事件驱动相关联 这是与其它语言不样的地方 JavaScript函数定义 Function函数名 参数 变元 函数体 Return表达式 说明 当调用函数时 所用变量或字面量均可作为变元传递 函数由关键字Function定义 函数名 定义自己函数的名字 参数表 是传递给函数使用或操作的值 其值可以是常量 变量或其它表达式 通过指定函数名 实参 来调用一个函数 必须使用Return将值返回 函数名对大小写是敏感的 函数中的形式参数 在函数的定义中 我们看到函数名后有参数表 这些参数变量可能是一个或几个 那么怎样才能确定参数变量的个数呢 在JavaScript中可通过arguments Length来检查参数的个数 例 Functionfunction Name exp1 exp2 exp3 exp4 Number function Name arguments length if Number 1 document wrile exp2 if Number 2 document write exp3 if Number 3 document write exp4 事件驱动及事件处理 JavaScript是基于对象 object based 的语言 这与Java不同 Java是面向对象的语言 而基于对象的基本特征 就是采用事件驱动 event driven 它是在用形界面的环境下 使得一切输入变化简单化 通常鼠标或热键的动作我们称之为事件 Event 而由鼠标或热键引发的一连串程序的动作 称之为事件驱动 EventDriver 而对事件进行处理程序或函数 我们称之为事件处理程序 EventHandler 事件处理程序 在JavaScript中对象事件的处理通常由函数 Function 担任 其基本格式与函数全部一样 可以将前面所介绍的所有函数作为事件处理程序 格式如下 Function事件处理名 参数表 事件处理语句集 主要有以下几个事件 单击事件onClickonChange改变事件选中事件onSelect获得焦点事件onFocus失去焦点onBlur载入文件onLoad卸载文件onUnload 范例1 调用 范例2 functionmakeArray n this length nreturnthis functionhexfromdec num hex newmakeArray 1 varhexstring varshifthex 16 vartemp1 num for x 1 x 0 x hex x Math round temp1 shifthex 5 hex x 1 temp1 hex x shifthex temp1 hex x 1 shifthex 16 for x 1 x 0 x hexstring getletter hex x return hexstring 范例2 functiongetletter num if num text substring i i 2 returnallstring 范例2 functionsizefont text varcolor d1 varallstring varflag 0 for i 0 j 0 i 7 flag 1 if flag 1 j j 1 if j text substring i i 1 returnallstring 范例2 document write document write document write sizefont 这是一个获取WEB浏览器的程序 document write document write 浏览器名称 navigator appName document write 版本号 navigator appVersion document write 代码名字 navigator appCodeName document write 用户代理标识 navigator userAgent 范例2 输出结果图1所示 基于对象的JavaScript语言 JavaScript语言是基于对象的 Object Based 而不是面向对象的 object oriented 之所以说它是一门基于对象的语言 主要是因为它没有提供象抽象 继承 重载等有关面向对象语言的许多功能 而是把其它语言所创建的复杂对象统一起来 从而形成一个非常强大的对象系统 虽然JavaScript语言是一门基于对象的 但它还是具有一些面向对象的基本特征 它可以根据需要创建自己的对象 从而进一步扩大JavaScript的应用范围 增强编写功能强大的Web文档 对象的基础知识 对象的基本结构引用对象的途径有关对象操作语句对象属性的引用对象的方法的引用 对象的基本结构 JavaScript中的对象是由属性 properties 和方法 methods 两个基本的元素的构成的 前者是对象在实施其所需要行为的过程中 实现信息的装载单位 从而与变量相关联 后者是指对象能够按照设计者的意图而被执行 从而与特定的函数相联 引用对象的途径 一个对象要真正地被使用 可采用以下几种方式 1 引用JavaScript内部对象 2 由浏览器环境中提供3 创建新对象 这就是说一个对象在被引用之前 这个对象必须存在 否则引用将毫无意义 而出现错误信息 从上面中我们可以看出JavaScript引用对象可通过三种方式获取 要么创建新的对象 要么利用现存的对象 有关对象操作语句 For in语句with语句this关键字New运算符 For in语句 格式如下 For 对象属性名in已知对象名 说明 1 该语句的功能是用于对已知对象的所有属性进行操作的控制循环 它是将一个已知对象的所有属性反复置给一个变量 而不是使用计数器来实现的 2 该语句的优点就是无需知道对象中属性的个数即可进行操作 例 下列函数是显示数组中的内容 FunctionshowData object for varX 0 X 30 X document write object i 该函数是通过数组下标顺序值 来访问每个对象的属性 使用这种方式首先必须知道数组的下标值 否则若超出范围 则就会发生错误 而使For in语句 则根本不需要知道对象属性的个数 见下 FunctionshowData object for varpropinobject document write object prop 使用该函数时 在循环体中 For自动将的属性取出来 直到最后为此 with语句 使用该语句的意思是 在该语句体内 任何对变量的引用被认为是这个对象的属性 以节省一些代码 withobject 所有在with语句后的花括号中的语句 都是在后面object对象的作用域的 this关键字 this是对当前的引用 在JavaScript由于对象的引用是多层次 多方位的 往往一个对象的引用又需要对另一个对象的引用 而另一个对象有可能又要引用另一个对象 这样有可能造成混乱 最后自己已不知道现在引用的那一个对象 为此JavaScript提供了一个用于将对象指定当前对象的语句this New运算符 使用New运算符可以创建一个新的对象 其创建对象使用如下格式 Newobject NEWObject Parameterstable 其中Newobject创建的新对象 object是已经存在的对象 parameterstable参数表 new是JavaScript中的命令语句 如创建一个日期新对象newData NewData birthday NewData December12 1998 之后就可使NewData birthday作为一个新的日期对象了 对象属性的引用 使用点 运算符 university Name 广西 通过对象的下标实现引用 university 0 广西 通过字符串的形式实现 university Name 广西 对象的方法的引用 在JavaScript中对象方法的引用是非常简单的 ObjectName methods 实际上methods FunctionName方法实质上是一个函数 如引用university对象中的showmy 方法 则可使用 document write university showmy 或 document write university 如引用math内部对象中cos 的方法则 with math document write cos 35 document write cos 80 若不使用with则引用时相对要复杂些 document write Math cos 35 document write math sin 80 常用对象的属性和方法 JavaScript为我们提供了一些非常有用的常用内部对象和方法 用户不需要用脚本来实现这些功能 这正是基于对象编程的真正目的 在JavaScript提供了string 字符串 math 数值计算 和Date 日期 三种对象和其它一些相关的方法 从而为编程人员快速开发强大的脚本程序提供了非常有利的条件 常用内部对象 在JavaScript中对于对象属性与方法的引用 有两种情况 其一是说该对象是静态对象 即在引用该对象的属性或方法时不需要为它创建实例 而另一种对象则在引用它的对象或方法是必须为它创建一个实例 即该对象是动态对象 对JavaScript内部对象的引用 以是紧紧围绕着它的属性与方法进行的 因而明确对象的静动性对于掌握和理解JavaScript内部对象是具有非常重要的意义 串对象 string对象 内部静态性 访问properties和methods时 可使用 运算符实现 基本使用格式 objectName prop methods 串对象的属性 string对象只有一个属性 即length 它表明了字符串中的字符个数 包括所有符号 例 mytest ThisisaJavaScript mystringlength mytest length最后mystringlength返回mytest字串的长度为20 串对象的方法 string对象的方法共有 个 主要用于有关字符串在Web页面中的显示 字体大小 字体颜色 字符的搜索以及字符的大小写转换 其主要方法如下 o锚点anchor 该方法创建如用Html文档中一样的anchor标记 使用anchor如用Html中 AName 一样 通过下列格式访问 string anchor anchorName o有关字符显示的控制方法big字体显示 Italics 斜体字显示 bold 粗体字显示 blink 字符闪烁显示 small 字符用小体字显示 fixed 固定高亮字显示 fontsize size 控制字体大小等 o字体颜色方法 fontcolor color o字符串大小写转换toLowerCase 小写转换 toUpperCase 大写转换 下列把一个给定的串分别转换成大写和小写格式 string stringValue toUpperCase和string stringValue toLowerCase o字符搜索 indexOf charactor fromIndex 从指定formIndtx位置开始搜索charactor第一次出现的位置 返回字串的一部分字串 substring start end 从start开始到end的字符全部返回 算术函数的math对象 功能 提供除加 减 乘 除以外的一引些自述运算 如对数 平方根等 静动性 静态对象主要属性 math中提供了 个属性 它们是数学中经常用到的常数 以 为底的自然对数 以 为底的自然对数LN2 3 14159的PI 1 2的平方根SQRT1 2 2的平方根为SQRT2 算术函数的math对象 主要方法 绝对值 abs 正弦余弦值 sin cos 反正弦反余弦 asin acos 正切反正切 tan atan 四舍五入 round 平方根 sqrt 基于几方次的值 Pow base exponent 日期及时间对象 功能 提供一个有关日期和时间的对象 静动性 动态性 即必须使用New运算符创建一个实例 例 MyDate NewDate Date对象没有提供直接访问的属性 只具有获取和设置日期和时间的方法 日期起始值 年 月 日 获取日期的时间方法 getYear 返回年数getMonth 返回当月号数getDate 返回当日号数getDay 返回星期几getHours 返回小时数getMintes 返回分钟数getSeconds 返回秒数getTime 返回毫秒数 设置日期和时间 setYear 设置年setDate 设置当月号数setMonth 设置当月份数setHours 设置小时数setMintes 设置分钟数setSeconds 设置秒数setTime 设置毫秒数 JavaScript中的系统函数 JavaScript中的系统函数又称内部方法 它提供了与任何对象无关的系统函数 使用这些函数不需创建任何实例 可直接用 1 返回字符串表达式中的值 方法名 eval 字串表达式 例 test eval 8 9 5 2 2 返回字符串ASCI码 方法名 unEscape string 3 返回字符的编码 方法名 escape character 4 返回实数 parseFloat floustring 5 返回不同进制的数 parseInt numbestring rad X 其中radix是数的进制 numbs字符串数 在JavaScript中创建新对象 使用JavaScript可以创建自己的对象 虽然JavaScript内部和浏览器本身的功能已十分强大 但JavaScript还是提供了创建一个新对象的方法 使其不必像超文本标识语言那样 求于或其它多媒体工具 就能完成许多复杂的工作 在JavaScript中创建一个新的对象是十分简单的 首先它必须定义一个对象 而后再为该对象创建一个实例 这个实例就是一个新对象 它具有对象定义中的基本特征 对象的定义 JavaScript对象的定义 其基本格式如下 FunctionObject 属性表 This prop1 prop1This prop2 prop2 This meth FunctionName1 This meth FunctionName2 在一个对象的定义中 可以为该对象指明其属性和方法 通过属性和方法构成了一个对象的实例 如以下是一个关于University对象的定义 Functionuniversity name city creatDateURL This name nameThis city cityThis creatDate NewDate creatDate This URL URL其基本含义如下 Name 指定一个 单位 名称 City 单位 所在城市 CreatDate 记载university对象的更新日期 URL 该对象指向一个网址 创建对象实例 一旦对象定义完成后 就可以为该对象创建一个实例了 NewObject Newobject 其中Newobjet是新的对象 Object已经定义好的对象 例 U1 Newuniversity 云南省 昆明市 January05 199712 00 00 http www YN KM U2 Newuniversity 云南电子科技大学 昆明 January07 199712 00 00 htlp www YNKJ CN 对象方法的使用 在对象中除了使用属性外 有时还需要使用方法 在对象的定义中 我们看到This meth FunctionName语句 那就是为定义对象的方法 实质对象的方法就是一个函数FunctionName 通过它实现自己的意图例在university对象中增加一个方法 该方法是显示它自己本身 并返回相应的字串 functionuniversity name city createDate URL This Name Name This city city This createDate NewDate creatDate This URL URL This showuniversity showuniversity 其中This showuniversity就是定义了一个方法 showuniversity 而showuniversity 方法是实现university对象本身的显示 functionshowuniversity For varpropinthis alert prop this prop 其中alert是JavaScript中的内部函数 显示其字符串 JavaScript中的数组 使用New创建数组JavaScript中没有提供像其它语言具有明显的数组类型 但可以通过function定义一个数组 并使用New对象操作符创建一个具有下标的数组 从而可以实现任何数据类型的存储 定义对象的数组 FunctionarrayName size This length Size for varX X size X this X 0 Returethis 其中arrayName是定义数组的一个名子 Size是有关数组大小的值 1 size 即数组元素的个数 通过for循环对一个当前对象的数组进行定义 最后返回这个数组 创建数组实例 一个数组定义完成以后 还不能马上使用 必须为该数组创建一个数组实例 Myarray NewarrayName n 并赋于初值 Myarray 1 字串 Myarray 2 字串 Myarray 3 字串 Myarray n 字串n 一旦给数组赋于了初值后 数组中就具有真正意义的数据了 以后就可以在程序设计过程中直接引用 创建多维数组 FunctioncreatMArray row col varindx 0 this length row 10 colfor varx 1 x row x for vary 1 y col y indx x 10 y this indx myMArray newcreatMArray 之后可通过myMArray 11 myMArray 12 myMArray 13 myMArray 21 myMArray 22 myMArray 23 来引用 内部数组 在Java中为了方便内部对象的操作 可以使用窗体 Forms 框架 Frames 元素 element 链接 links 和锚 Anchors 数组实现对象的访问 anchors 使用 Aname anchorName 标识来建立锚的链接 links 使用来定义一个越文本链接项 Forms 在程序中使用多窗体时 建立该数组 Elements 在一个窗口中使用从个元素时 建立该数组 Frames 建立框架时 使用该数组anchors 用于窗体的访问 它是通过 formname form1 所指定的 link 用于被链接到的锚点的访问 它是通过 ahref URL 所指定的 Forms 反映窗体的属性 而anchors 反映Web页面中的链接属性 JavaScript对象系统的使用 使用浏览器的内部对象系统 可实现与HTML文档进行交互 它的作用是将相关元素组织包装起来 提供给程序设计人员使用 从而减轻编程人的劳动 提高设计Web页面的能力 编程人员利用这些对象 可以对WWW浏览器环境中的事件进行控制并作出处理 在JavaScript中提供了非常丰富的内部方法和属性 从而减轻了编程人员的工作 提高编程效率 JavaScript对象系统 浏览器对象 Navigator 窗口对象 Window 文档对象 Document 位置对象 Location 历史对象 History 在这些对象系统中 文档对象非常重要 它位于最低层 但对于我们实现Web页面信息交互起作关键作用 因而它是对象系统的核心部分 document对象的主要作用 document对象的主要作用就是把这些基本的元素 如links anchor等 包装起来 提供给编程人员使用 从另一个角度看 document对象中又是由属性和方法组成 文档对象中的attribute属性 document对象中的attribute属性 主要用于在引用Href标识时 控制着有关颜色的格式和有关文档标题 文档原文件的URL以及文档最后更新的日期 这部分元素的主要含义如下 链接颜色 alinkcolor这个元素主要用于 当选取一个链接时 链接对象本身的颜色就按alinkcolor指定改变 链接颜色 linkcolor当用户使用Textstring链接后 Textstring的颜色就会按Linkcolor所指定的颜色更新 浏览过后的颜色 VlinkColor该属性表示的是已被浏览存储为已浏览过的链接颜色 背景颜色 bgcolor该元素包含文档背景的颜色 前景颜色 Fgcolor该元素包含HTML文档中文本的前景颜色 文档对象的基本元素 窗体属性 窗体属性是与HTML文档中 相对应的一组对象在HTML文档所创建的窗体数 由length指定 通过document forms length反映该文档中所创建的窗体数目 锚属性 anchors该属性中 包含了HTML文档的所有标记为Name 的语句标识 所有 锚 的数目保存在document anchors length中 链接属性 links链接属性是指在文档中 的由Href 指定的数目 其链接数目保存在document links length中 JavaScript窗口及输入输出 JavaScript是基于对象的脚本编程语言 那么它的输入输出就是通过对象来完成的 其中有关输入可通过窗口 Window 对象来完成 而输出可通过文档 document 对象的方法来实现 窗口及输入输出 请看下面例子 Vartest window prompt 请输入数据 document write test JavaScript输入输出的例子 其中window prompt 就是一个窗口对象的方法 其基本作用是 当装入Web页面时在屏幕上显示一个具有 确定 和 取消 的对话框 让你输出数据 document writle是一个文档对象的方法 它的基本功能 是实现Web页面的输出显示 窗口对象 该对象包括许多有用的属性 方法和事件驱动程序 编程人员可以利用这些对象控制浏览器窗口显示的各个方面 如对话框 框架等 在使用应注意以下几点 该对象对应于HTML文档中的和两种标识 onload和onunload都是窗口对象属性 在JavaScript脚本中可直接引用窗口对象 如 window alert 窗口对象输入方法 可直接使用以下格式 alert 窗口对象输入方法 窗口对象的事件驱动 窗口对象主要有装入Web文档事件onload和卸载时onunload事件 用于文档载入和停止载入时开始和停止更新文档 窗口对象的方法 窗口对象的方法主要用来提供信息或输入数据以及创建一个新的窗口 创建一个新窗口open 使用window open 参数表 方法可以创建一个新的窗口 其中参数表提供有窗口的主要特性和文档及窗口的命名 具有OK按钮的对话框alert 方法能创建一个具有OK按钮的对话框 具有OK和Cancel按钮的对话框confirm 方法为编程人员提供一个具有两个按钮的对话框 具有输入信息的对话框prompt 方法允许用户在对话框中输入信息 并可使用默认值 其基本格式如下prompt 提示信息 默认值 窗口对象中的属性 窗口对象中的属性主要用来对浏览器中存在的各种窗口和框架的引用 其主要属性有以下几个 frames确文档中帧的数目frames 帧 作为实现一个窗口的分隔操作 起到非常有用的作用 在使用注意以下几点 frames属性是通过HTML标识的顺序来引用的 它包含了一个窗口中的全部帧数 帧本身已是一类窗口 继承了窗口对象所有的全部属性和方法 Parent指明当前窗口或帧的父窗口 defaultstatus 默认状态 它的值显示在窗口的状态栏中 status 包含文档窗口中帧中的当前信息 top 包括的是用以实现所有的下级窗口的窗口 window 指的是当前窗口 self 引用当前窗口 输出流及文档对象 在JavaScript文档对象中 提供了用于显示关闭 消除 打开HTML页面的输出流 创建新文档open 方法write writeln 输出显示关闭文档流close 清除文档内容clear 简单的输入 输出例子 输入 Window prompt 提示信 预定输入信息 输出 document write 方法和document writeln 方法说明 write 和writeln 方法都是用于向浏览器窗口输出文本字串 二者的唯一区别就是writeln 方法自动在文本之后加入回车符 window alert 输出 在JavaScript为了方便信息输出 JavaScript提供了具有独立的对话框信息输出 alert 方法 利用输入 输出方法实现交互 有关交互的例子 my prompt 请输入数据 document write my document close StopHidingfromOtherBrowsers 从上面程序可以看出 可通过write 和prompt 方法实现交互 在JavaScript脚本语言中可以使用HTML标识语言的代码 从而实现混合编程 其中和就是HTML标识符 窗体基础知识 窗体对象可以使设计人员能用窗体中不同的元素与客户机用户相交互 而用不着在之前首先进行数据输入 就可以实现动态改变Web文档的行为 什么是窗体对象 窗体 Form 它是构成了Web页面的基本元素 通常一个Web页面有一个窗体或几个窗体 使用Forms 数组来实现不同窗体的访问 窗体对象的方法 窗体对象的方法只有一个 submit 方法 该方法主要功用就是实现窗体信息的提交 如提交Mytest窗体 则使用下列格式 document mytest submit 窗体对象的属性 窗体对象中的属性主要包括以下 elementsnameactiontargetencodingmethod 除Elements外 其它几个均反映了窗体中标识中相应属性的状态 这通常是单个窗体标识 而elements常常是多个窗体元素值的数组 例 elements 0 Mytable elements 1 访问窗体对象 在JavaScript中访问窗体对象可由两种方法实现 通过访问窗体在窗体对象的属性中首先必须指定其窗体名 而后就可以通过下列标识访问窗体如 document Mytable 通过数组来访问窗体除了使用窗体名来访问窗体外 还可以使用窗体对象数组来访问窗体对象 但需要注意一点 因窗体对象是由浏览器环境的提供的 而浏览器环境所提供的数组下标是由0到n 所以可通过下列格式实现窗体对象的访问 document forms 0 document forms 1 document forms 2 引用窗体的先决条件 在JavaScript中要对窗体引用的条件是 必须先在页面中用标识创建窗体 并将定义窗体部分放在引用之前 窗体中的基本元素 窗体中的基本元素由按钮 单选按钮 复选按钮 提交按钮 重置按钮 文本框等组成 在JavaScript中要访问这些基本元素 必须通过对应特定的窗体元素的数组下标或窗体元素名来实现 每一个元素主要是通过该元素的属性或方法来引用 其引用的基本格式见下 formName elements methadName 窗体名 元素名或数组 方法 formName elemaent propertyName 窗体名 元素名或数组 属性 什么是框架 框架Frames最主要功用是 分割 视窗 使每个 小视窗 能显示不同的HTML文件 不同框架之间可以互动 interact 这就是说不同框架之间可以交换讯息与资料 例如 假设您开了两个frames 第一个frame可显示书的目录 第二个frame则显示章节的具体内容 框架可以将屏幕分割成不同的区域 每个区域有自己的URL 通过Frames 数组对象来实现不同框架的访问 实际上框架对象本身也一类窗口 它继承了窗口对象的所有特征 并拥有所有的属性和方法 一下框架的例子 一下框架的例子 以上HTML标识将屏幕分成三个框架 先将窗口分成以二行为单位的窗口 之后再按分成二个窗口 并在相应的框架中放入自己的HTML文档 通过 Framset 告诉浏览器您要设置几个框架 rows这项参数告诉浏览器您想将视窗分割成几列 而cols这项参数是告诉浏览器您想将视窗分割成几行 可以用很多组的tags将视窗分割得更复杂 可以给每个frame一个 名字 name frame的名字在JavaScript语法中的地位非常重要 可以用告诉浏览器您要载入哪一个HTML文件 如何访问框架 在前面我们介绍过使用document forms 实现单一窗体中不同元素的访问 而要实现框架中多窗体的不同元素的访问 则必须使用window对象中的Frames属性 Frames属性同样也是一个数组 他在父框架集中为每一个子框架设有一项 通过下标实现不同框架的访问 parent frames Index1 docuement forms index2 通过parent frames length确定窗口中窗体的数目 除了使用数组下标来访问窗体外还可以使用框架名和窗体名来实现各元素的访 parent framesName decument formNames elementName m p