文档库 最新最全的文档下载
当前位置:文档库 › JavaScript是一种基于对象(Object)和事件驱动(Event

JavaScript是一种基于对象(Object)和事件驱动(Event

JavaScript是一种基于对象(Object)和事件驱动(Event
JavaScript是一种基于对象(Object)和事件驱动(Event

JavaScript 简介 JavaScript 开发环境和编写工具 在HTML 中嵌入JavaScript 的方法 JavaScript 的说明语句 在不兼容的浏览器中隐藏 JavaScript 代码

JavaScript 概述 1 第 章 随着Internet 的飞速发展,越来越多的人每天都要访问各种不同的Internet 站点。

使用浏览器访问到的站点,既有静态的文本、图像,也有动态的动画、信息框以及变化

的状态栏提示、动态变换的时钟信息等。有的页面甚至还有需要填写并提交的消息框,

以及非常新颖的网页特效。页面上这些实时的、动态的、可交互的网页效果就可以通过使用JavaScript 语言编写代码来实现。

1.1 JavaScript简介

JavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言。它可以嵌入到HTML文档中使网页更加生动活泼,并具有交互性。HTML语言是网页设计普遍采取的一种超文本标记语言,但HTML自身不能为网页提供很多动态支持,它只能创建超链接以允许用户浏览不同的HTML文档。HTML也不能接受用户输入,更不能对用户请求作出反应。JavaScript的出现弥补了HTML语言的缺陷,是Web上新的、强大的编程语言。

1.1.1 JavaScript语言简史

一种编程语言通常是由另外一种编程语言演变而来的,JavaScript的发展历史还得从Java谈起。

Java最初是Sun Microsystems公司为了在实时嵌入式系统中使用而开发的。最初只有HotJava支持Java,而HotJava正是Sun公司为支持Java而开发的一种实验性Web浏览器。当Netscape公司在认识到Java的巨大潜力后,便把它和自己开发的Web浏览器——Netscape Navigator结合到一起。

Netscape公司最初开发了一个LiveScript语言,在Navigator和Web服务器产品中加进了基本的脚本功能。当Navigator 2.0中加进了Java小程序支持后,Netscape公司便把最初的LiveScript更名成了JavaScript。

接着,Microsoft公司的浏览器Internet Explorer 3.0也开始支持JavaScript。此后,许多公司相继宣布承认JavaScript为Internet上的开放式脚本编写标准,并且把它添加到了自己的产品中。因此,目前流行的浏览器都支持JavaScript。JavaScript因而也日益流行起来。

1.1.2 JavaScript和Java的区别

尽管Java与JavaScript名称相似,但这两种语言却有许多显著的差别。首先,它们是两个公司开发的两个不同的产品。Java是Sun公司推出的新一代面向对象的程序设计语言,特别适合Internet应用程序的开发。而JavaScript是Netscape公司的产品,它是为了扩展Netscape Navigator功能而开发的一种可以嵌入Web页面中的基于对象和事件驱动的解释性语言。其次,它们有各自的特点。例如,JavaScript是用于HTML功能的,提供了能够响应Web页面事件的脚本。这样,它可以完全访问浏览器窗口的各个部分。而Java是用于实现嵌入Web页面的可执行内容的。因此,它具有更强大的编程功能,但这些功能限制在有限的浏览器窗口区中。下面从以下几个方面对这两种语言作一下比较。

1.编译与解释

Java与JavaScript之间最显著的区别是执行方式的不同。

?Java是编译语言,用于开发安全的、高性能的Web应用程序。Java的源代码在传递到客户端执行之前,必须经过编译,因而客户端上必须具有相应平台上的仿真器或解释器,Java可以通过编译器或解释器实现独立于某个特定的平台编译代码的束缚。

?JavaScript是一种解释性编程语言。其源代码在发往客户端执行之前不需经过编译,而是将文

本格式的字符代码发送给客户端由浏览器解释执行。JavaScript是用于创建嵌入HTML文档的

脚本的。这些脚本可以控制文档的布局,还可以定义处理用户事件的函数。因此,JavaScript

可以看成是HTML的扩展。从这个角度看,JavaScript必须作为源程序代码放在HTML中,

以便浏览器检查。所以JavaScript是解释性语言,而不是与Java类似的编译语言。

2.面向对象与基于对象

Java和JavaScript支持面向对象编程的程度不同。

?Java是完全的面向对象的语言,支持除多重继承以外的所有面向对象的编程特征。即使如此,Java仍用单一继承与接口结构的组合提供了多重继承的特点,并且保持了单一继承所具有的

简单类结构。利用Java语言即使是开发简单的程序,也必须设计对象。

?JavaScript则并不完全支持面向对象编程,而是采用最实用的面向对象编程特征。例如,JavaScript支持对象类型、实例化、合成、复合和多态,但不支持分类和继承,它是一种基于

对象(Object Based)和事件驱动(Event Driver)的编程语言,因而,它本身提供了非常丰富

的内部对象供设计人员使用。

3.强分类和松散分类

JavaScript是松散分类的语言,而Java是强分类的语言。松散分类和强分类的差别表明了两种语言用途上的不同。

?Java的目标是开发安全可靠的语言,必须用强分类来达到这种目标。将对象操作限制在显式定义的对象上,这是Java安全性的基础。在Java中所有变量在编译之前必须作声明,强分类

语言不能自动进行数据类型转换,它会把不适当的类型转化称为错误。

?JavaScript与大多数脚本语言一样,是一种松散分类语言。变量在使用前不需要作声明,这样可以减少脚本的总长度。解释器在运行时会检查其数据类型,并自动从一种类型转化为另外

一种类型。通过松散分类,脚本语言为编程人员提供了更多的权利和责任。

4.代码格式和嵌入方式

Java是一种与HTML无关的格式,必须通过像HTML中引用多媒体那样进行装载,其代码以字节代码的形式保存在独立的文档中。将Java代码嵌入HTML文档中,必须使用来标识。

JavaScript代码是一种文本字符格式,可以直接嵌入HTML文档中,并可动态装载。编写HTML 文档就像编辑文本文件一样方便。在HTML文档中嵌入JavaScript代码时,要使用来标识。

1.1.3 JavaScript的主要特点

JavaScript是一种简单的脚本编程语言,主要适用于简单、小型的程序。它可以与HTML超文本标记语言、Java脚本语言(Java小程序)一起实现在一个Web页面中链接多个对象,与Web客户交互作用,从而开发出客户端的应用程序等。它是通过嵌入或调入到标准的HTML语言中实现的,它的出现弥补了HTML语言的缺陷。JavaScript语言有以下特点。

1.JavaScript是一种脚本编写语言

脚本(Script)是一种能够完成某些特殊功能的指令序列(小程序段)。这些指令序列不像一般程序那样需要被编译才能执行,而是在程序运行过程中被逐行地解释。在脚本中所使用的命令与语句集称为脚本语言。

JavaScript是一种脚本语言,它采用小程序段的方式实现编程。像其他脚本语言一样,JavaScript 同样也是一种解释性语言,它提供了一个开发过程,它的基本结构形式与C、C++、VB十分类似,但它不像这些语言那样,需要先编译,而是在程序运行过程中被逐行地解释。它通过与HTML标识结合在一起来方便用户的使用操作。

2.JavaScript是一种基于对象的语言

JavaScript是一种基于对象的语言,这意味着它能运用已经创建的对象,但不能派生新的对象,也就是没有面向对象程序设计语言(如Java就是一种面向对象的程序设计语言)所具有的继承、多态等特点,这使JavaScript更容易学习。

3.简单性

JavaScript的简单性主要体现在:第一,它是一种基于Java基本语句和控制流之上的简单而紧凑的设计,从而对学习Java是一种非常好的过渡;第二,它的变量类型采用弱类型,并未使用严格的数据类型;第三,JavaScript可以用很小的程序做大量的事,如创建交互式网页、控制浏览器的行为等。用户无须有高性能的电脑,也无须安装复杂的软件,仅需一个字处理软件及一个浏览器,即可使用JavaScript进行程序设计。JavaScript不需要耗时的编译过程,从而使脚本程序的开发周期比较短。JavaScript的大多数界面特征,均由浏览器和HTML代码处理,因此更加提高了开发速度。

4.安全性

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

5.动态性

JavaScript是动态的,它可以直接对用户或客户输入作出响应,无须经过Web服务程序。它对用户反映的响应是采用事件驱动的方式进行的。在主页(Home Page)中执行了某种操作所产生的动作,就称为“事件”(Event)。如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后,就可能会引起相应的事件响应。

6.跨平台性

JavaScript是依赖于浏览器本身的,与操作环境无关,只要能运行浏览器的计算机,并有支持JavaScript的浏览器就可以正确执行,从而实现了“编写一次,走遍天下”的梦想。

正是以上的这些JavaScript的特点,使JavaScript在Web编程领域中得到了广泛的普及和运用,具有广阔的发展前景。

1.1.4 JavaScript在Web页面中的应用

Web(World Wide Web,WWW,又称万维网)是目前Internet上应用得最广泛也是最重要的信息

服务类型,它的影响已经进入了Internet上的广告、新闻、电子商务和展示信息等各个服务领域。作为一种脚本语言,JavaScript在这些领域都得到了广泛的应用。使用JavaScript可以创建动态HTML页面,用来处理用户的输入及使用特殊的对象、文件和关系数据库维护稳固的数据。从内部的协作信息管理和内联网发布到大型超市的电子交易和商务,都可以应用JavaScript。通过JavaScript的LiveConnect 功能,用户程序可以访问Java和CORBA发布的应用程序。

在使用JavaScript语言进行网页制作时,JavaScript不但可以用于编写客户端的脚本程序,实现在Web浏览器端解释并执行脚本程序的功能;而且还可以编写在服务器端执行的脚本程序,以实现服务器端处理用户提交的信息,并相应地更新浏览器显示的Web服务器程序的功能。因此,可以说JavaScript 是非常成功的。

1.JavaScript在客户端的应用

JavaScript最典型最常用的应用就是开发客户端的Web应用程序,即客户端的JavaScript脚本程序。

客户端的JavaScript脚本程序是被嵌入到HTML文件中或链接到HTML页面的。当用户使用浏览器请求HTML文件时,JavaScript脚本程序就会与HTML一起被下载到客户端,由客户端的浏览器读取HTML文件,并分辨其中是否含有JavaScript脚本。如果有,就解释并执行它,并以页面方式显示出来。这个过程将产生用户看到的结果,如图1-1所示。

浏览器发出URL请求

服务器返回HTML文件,

由浏览器解释执行

图1-1 客户端JavaScript

客户端JavaScript具有很多功能。在HTML中使用JavaScript可以利用表单元素和超链接使网页直接对用户作出响应;也可利用警告、提示和确认信息向用户提示所发生的错误;还可利用JavaScript 程序改变浏览器窗口的外观等。

2.JavaScript在服务器端的应用

最初,Netscape公司把它们的服务器端JavaScript产品称为LiveWire,不过现在只用服务器端JavaScript来称呼它了。微软公司也支持在网络服务器上用JavaScript进行的服务器端程序设计,它使用的是ASP框架。由于这只是对服务器端脚本的一个纵览,所以这里只讨论Netscape实现的服务器端JavaScript。

在服务器端,JavaScript也是嵌入HTML页面的。JavaScript服务器端脚本通常用来替代传统的CGI 程序。JavaScript在客户端进行了某些处理,因此服务器端程序可以简化,然而,仍然需要某些服务器端程序来支持高级Web应用,如访问数据库信息、支持电子商务和进行一些专业化处理等。服务器端的语句可以连接到不同的关系数据库中,共享同一应用的用户之间的信息、访问服务器上的文件系统或者通过LiveConnect和Java与其他应用程序通信。一个已经编译好的JavaScript应用除了服务器端

JavaScript之外还可包含客户端JavaScript。

服务器端JavaScript有一个显著的能力,那就是能够动态地生成要显示给客户的HTML文件。不过,它最为强大的特性还是来自于它能够访问的服务器端对象。例如,File对象就允许服务器端的脚本对服务器上的文件进行读写操作,Database对象则允许脚本执行SQL的数据库查询和更新操作。

CGI程序和服务器端JavaScript的处理方式是不同的,对于CGI程序,form包含了action属性,它指定了包含CGI程序的URL。当提交窗体时,Web服务器就会调用CGI程序来处理窗体数据、执行搜索或者实施用户自定义Web应用程序。对于支持JavaScript的Web服务器,它激活一个已经定义好的JavaScript脚本来进行必要的处理。Web服务器自动创建JavaScript对象后,告诉脚本它将如何被调用,以及请求服务的浏览器类型是什么,它也能自动将用户提供的数据传到浏览器。脚本处理浏览器提供的数据后,通过服务器将信息返回浏览器进行显示。

在类似的注册页面中,要求用户输入用户名和密码。当用户填写信息并提交窗体后,信息会被传输到服务器端,然后,调用服务器端的JavaScript脚本进行用户名和密码的验证,最后将响应返回客户端。

对比标准的通用网关接口(CGI)程序,所有的JavaScript都是直接集成到HTML页面中的,这将使开发和维护变得更加容易。

由于服务器端JavaScript是厂商特有的服务端技术,而且使用它的程序设计者远远少于客户端JavaScript,所以本书没有对它详细进行介绍。不过,本书中一些讨论JavaScript语言的核心章节对于服务器端JavaScript程序设计者来说仍然是非常有价值的。

1.2 JavaScript开发环境和编写工具

在编写JavaScript脚本程序之前,必须先了解JavaScript的开发环境和编写工具。

1.2.1 JavaScript开发环境

使用JavaScript脚本语言进行开发时,对于环境的要求有以下两个方面。

1.对软件环境的要求

(1)操作系统:Windows 95/98/NT/2000/Me/XP等。

(2)浏览器:Netscape公司的Navigator 2.0以上版本的浏览器;微软公司的Internet Explorer 3.0以上版本的浏览器。

(3)编辑器:用于编辑HTML文档的字符编辑器或者HTML文档编辑器。

2.对硬件配置的要求

(1)电脑内存:至少为32MB。

(2)CRT:至少需要256颜色,分辨率在640×480以上。

(3)CPU:至少为256MB。

使用JavaScript脚本语言开发动态网页时,如果要开发基于Web的应用程序,还需要对Web服务器和数据库系统进行一些设置。因此,只要拥有满足以上版本条件的浏览程序,就可以执行本书中的

大部分JavaScript程序示例。

1.2.2 JavaScript编写工具

JavaScript语句可以通过标签来嵌入到HTML文档中,当HTML文件嵌入JavaScript程序代码后,浏览程序在读取HTML文件时,在解释HTML标记的同时也会解释JavaScript 程序代码,并且马上执行程序代码或进行事件处理。

由于HTML文档属于标准的ASCII文本文件,所以,可以使用文字编辑器(如Window记事本),也可以使用专业化的脚本编辑器或者Microsoft Office 2000的Script Editor进行程序代码的编辑。下面简单介绍几种JavaScript编写工具。

1.纯文本编辑工具

使用纯文本编辑器来编写脚本,如Windows的Notepad,是脚本编程人员常用的一种方法。用这种方式编写脚本,是一种比较艰苦的方式,但它具有以下一些不可否认的优点:

?用纯文本编辑器编写JavaScript脚本,方式简单、价格便宜,而且不需要花费很大的精力去学习如何使用编辑软件,只要拥有Windows操作系统软件,就可以使用其自带的Notepad。

?用纯文本编辑器编写JavaScript脚本,可以直接接触那些放置到软件包之中的JavaScript技术,并且可以通过亲自编写代码做JavaScript能够实现的所有事情。

?用纯文本编辑器编写JavaScript脚本的格式是自由的,可以在适当的地方添加注释,因而使脚本程序具有很好的可读性,也使JavaScript代码容易修改。

?用纯文本编辑器编写JavaScript脚本,用户可以保留自己编写的所有JavaScript小片段,建立自己的JavaScript库。

写一个显示“Hello Word!”字样的程序是许多编程语言的最初的经典练习,这个程序用来说明如何形成显示输出。如图1-2所示,显示了在记事本中编写这个小程序的代码,将代码文件的后缀.txt改为.html后,通过双击该文件,即可直接在浏览器中查看运行结果,如图1-3所示。

图1-2 “Hello Word!”程序代码图1-3 程序运行结果

该代码段的主体在和标志之间,包含一个元素Script,用标志表示。其中,Script标志的属性“language="JavaScript"”,表示脚本为JavaScript。这个脚本只有一个语句“document.write("Hello Word!!!!!")”,用于向屏幕输出内容。对于JavaScript语法的使用方法在后面章节将详细介绍。

由上面的实例可以看出,虽然用记事本编写JavaScript程序非常简单易学,但其中所有的代码都必

须一一输入,如果不小心输错了,检查起来也不容易查找。使用专业化的脚本工具就可以解决这个问题。

2.专业化脚本编辑工具

要想更方便地编写JavaScript程序,就要使用专业化的脚本编辑工具,如UltraEdit和EditPus。这里给大家推荐的是Adobe Dreamweaver CS3,它是Macromedia公司推出的最新版本的网页设计软件。使用它提供的语法校对、代码提示、代码自动完成等功能,以及方便的编译和运行环境,可以快速地完成包括JavaScript脚本程序在内的程序编写、运行和调试,从而大大提高编程效率。

在网上下载安装最新的Adobe Dreamweaver CS3软件,启动软件后,会出现一个初始页面,提示选择网页类型。在选择HTML页面后,进入代码编写页面,如图1-4所示。

图1-4 Dreamweaver CS3界面

图1-4中红色边框区域表示代码编辑窗口。由于在初始启动时,选择了HTML页面,Dreamweaver CS3会自动将部分HTML代码显示在编辑窗口中。在这种模式下,可以继续添加完成具体功能的HTML 代码或者JavaScript脚本程序,也可以将这部分自动显示的代码清除,完全按照个人的需要来具体编写程序。通过Dreamweaver CS3生成的文件,其后缀名都是.html。保存文件后,可以通过键盘上的F12键,直接在浏览器中进行预览。

Dreamweaver CS3还提供了可视化的编程工具,只需输入少量的代码就可以完成程序的编写,大大方便了编程。不过,使用时它也会生成许多冗余代码,容易使初学者感觉一团雾水,所以,建议读者先掌握了JavaScript的基本语法后再使用这类软件,会更加得心应手。

Dreamweaver CS3工具的最大的优点在于有代码提示和代码自动完成功能。例如,编写HTML文件经常要用的标签、标签等,在代码区都会自动把这些常用标签显示出来,这样可以使程序的结构一目了然。

对于Dreamweaver CS3更多详细的优越的功能还有待于在进一步的使用中慢慢体会。

3.Windows脚本编辑器

JavaScript Editor虽然功能强大,但是必须要安装相应的软件,这种软件还是英文版的,这多少给用户带来一些不便。实际上,在我们身边就有一个非常好用的JavaScript编辑器,那就是预置在Microsoft

FrontPage中使用方便而功能强大的调试工具,称为Microsoft脚本编辑器(Microsoft Script Editor)。

Microsoft Script Editor是一套附属在Office 2000上的Script程序代码编辑器,它就是微软整合的网页开发软件Visual Studio 6.0的编辑器,可以在FrontPage 2000或Office 2000编辑的网页上加上客户端或服务器端的VBScript、JavaScript或ASP程序代码。Office软件是最常用的软件之一,使用它即可编写JavaScript程序(安装Office 2000时,若选择典型安装,并不安装Microsoft Script Editor,需要再添加上)。

除此之外,还可以使用其他的编辑工具,如Antechinus JavaScript Editor、NetScape Navigator Gold 等,有兴趣的读者可以在今后的学习中慢慢尝试,这里不再作详细介绍。

1.3 在HTML中嵌入JavaScript的方法

为了能够让浏览器识别HTML文档中的脚本代码行,每个脚本必须包含在Script容器标识符(也称为标签)内,换言之,要用打开标签来结束脚本。无论是表单或者段落,在HTML中,都要使用首尾标记对标记内容进行封装,使用方法如下所示:

在HTML文件中嵌入JavaScript的方法,可以通过标签对的位置并不是固定的,可以出现在HTML文档的…或者…标签对之间,也可以出现在文档的多个位置。通过标签对来嵌入多段JavaScript代码,该

其中,把

其中文件aaa.js是JavaScript程序文件。文件名是随意的,但必须用扩展名.Js;src属性的值也可以是URL地址,但提供源文件的Web服务器必须指出,否则浏览器不会装入源文件。下面仍以记事本作为编辑器,来看一个利用

在代码中,通过src属性,对保存在外部文件中的JavaScript脚本进行了引用。

(3)运行结果。启动Internet Explorer浏览器,在地址栏中输入刚才建立的程序文件的路径和文件名(即d:\javascript\chapt1\js1-2.html)或直接双击js1-2.html文件,即可在浏览器中看到刚才程序的运行效果,如图1-9所示。

图1-9 js1-2.html的运行效果

从上面的两个小程序实例中可以看出,Script标志可以放在HTML文档的头部或者本体中,多数情况下,最好是把Script标志放在文档头部,以确保脚本中的所有JavaScript定义均显示在文档主体之前。对于JavaScript的语法,将在后面章节详细介绍。

1.3.3 利用onLoad方式

如果JavaScript脚本是在文档载入后或者响应用户动作时才运行,这样的脚本称为延时脚本,可以通过onLoad方式来实现。Window对象有一个事件处理叫做onLoad,和多数事件处理不一样的是,它由用户的动作(如单击一个按钮)触发,在页面的所有组成部分(包括图片、Java Applet和嵌入多媒体)载入浏览器时onLoad事件处理被激活。一个事件处理能直接运行脚本语句,如果事件处理必须运行几个脚本语句,可以把这些语句放在一个函数定义中(函数的具体定义将在后面的章节中详细介绍),然后让事件处理激活这个函数。

一个函数定义是以Function(后面是函数名和括号)开始的,所以函数在

页面原始内容不包含任何脚本语句.

代码运行结果如图1-10和图1-11所示。

图1-10 页面载入后的效果(一)图1-11 页面载入后的效果(二)

在整个载入页面的过程中没有运行任何脚本语言,页面将done()函数载入内存中,以便它可随时准备运行。载入文档后,通过代码“onLoad="done()"”,浏览器激活onLoad事件处理,它使done()函数运行,然后即可看到提示对话框。

1.4 JavaScript的说明语句

JavaScript语言提供了自己的说明语句。为程序添加说明可以用来解释程序的某些部分的作用和功能,提高程序的可读性,否则一段时间后开发者也不一定能够轻松地读懂自己编写的代码。另外,还可以使用说明语句来暂时屏蔽某些程序语句,让浏览器暂时不处理这些语句,等到需要时,只需要简单地取消注释标记,这些代码又可以发挥作用了。说明语句用于插入说明或者处理脚本中的描述信息。支持JavaScript的浏览器在解析脚本语句时忽略说明语句。

JavaScript的说明语句使用了类似C++和Java的语法,“//”字符串表示说明语句直到行末,单行的说明语句如下:

//此JavaScript代码表示对前面所定义函数的调用

“/*”和“*/”字符串可以用来表示两者当中的内容为说明信息。例如:

/*以下多行文字是对代码的详细注释*/

在前面介绍的实例中,代码部分都用到了JavaScript的说明语句,这些语句不会被浏览器执行。

1.5 在不兼容的浏览器中隐藏JavaScript代码

随着更多的脚本浏览器版本在用户中的广泛使用,已经安装的或者旧的非脚本浏览器逐渐减少,但是访问公共Web站点的浏览器中,仍然有很多可以追溯到1996年之前的版本,同时许多新设备(如掌上电脑)使用简单的浏览器并没有内置JavaScript解释器。旧的浏览器如Internet Explorer 2.0和基于字符的Lynx浏览器并不能识别Script标志,因此,它们将之间的所有JavaScript语句显示为字符串。为了避免这种情况的发生,HTML提供了处理方法,使不支持JavaScript的浏览器不再采用直接显示JavaScript语句的处理办法。

具体做法是,用HTML的说明标志括起JavaScript语句。HTML说明只是把代码显示在生成的Web 页面中,而不是在浏览器中。使用HTML说明标志的方法如下:

JavaScript 声明

//结束JavaScript隐藏- ->

”标志是说明语句的结束。“//”字符串表示JavaScript 自身语法的说明语句。

说明标志使不支持JavaScript的浏览器把JavaScript语句看成说明语句,而支持JavaScript的浏览器则知道要忽略该说明标志,并处理其中的JavaScript语句。在程序实例1-2中,外部文件aaa.js的代码就含有这种语句。

1.6 小结

本章内容主要对JavaScript语言从演变到发展、基本特点、功能作用等方面作了简要介绍,并结合实例,演示了在HTML文档中嵌入JavaScript代码的方法。JavaScript是由Netscape公司开发的LiveScript 语言发展而来的,广泛应用于客户端和服务器端编程,具有安全性、跨平台性、交互性等特点,可以嵌入到HTML文档中使网页更加生动活泼,是目前非常流行的一种开发动态网页的脚本语言。开发JavaScript程序的工具很多,用户可以根据自己的需要选择简单易学的纯文本编辑器,也可以选择功能强大的专业化脚本编辑工具或可视化的Microsoft脚本编辑器。

本章的学习重点在于在了解JavaScript语言特点的基础上,掌握在HTML文档中嵌入JavaScript 代码的几种方法,并能够利用简单的文本编辑工具写出简单的JavaScript程序。

.

Javascript前台捕获浏览器关闭事件,后台处理一些善后工作

Javascript前台捕获浏览器关闭事件,后台处理一些善后工作 1.使用onbeforeunload 事件捕获浏览器关闭事件 IE和火狐都支持onbeforeunload事件,但是opera不支持。 注意:不仅关闭浏览器时会触发onbeforeunload事件,刷新等事件也会触发onbeforeunload事件。 2.事件注册方法 3.使用Ajax技术向服务器异步发送需要做的善后工作 这里以登陆为例:当用户关闭浏览器时,需要把用户登陆的状态修改为‘已退出’。由于用户登陆的状态存放在服务器的数据库中,所有必需在客户端捕获浏览器关闭动作,在浏览器关闭之前,向服务器发送一个请求,当然这个的请求是异步发送的(Ajax技术);服务器收到请求后,把当前用户的登陆状态修改为‘已退出’。 function CloseBrowse()//用户关闭浏览器 { var n = window.event.screenX - window.screenLeft; var b = n > document.documentElement.scrollWidth - 20; //可以捕获点击小差和 Alt+F4 时浏览器关闭的情况,但是不能捕获在多窗口浏览模式下,用户点多窗口模式的小差关闭浏览器的情况 if (b && window.event.clientY < 0 || window.event.altKey) { var url = "Service.asmx/UpdateLoginState"; UpdateLoginState(url); } } //使用Ajax 向服务器发送异步请求,要求服务器修改登录状态 function UpdateLoginState() { var url = "Service.asmx/UpdateLoginState"; SendRequestToWebService(url); } function SendRequestToWebService(url){ createXmlhttp(); xmlhttp.open("POST", url, true); //xmlhttp.onreadystatechange = handleStateChange; xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;"); xmlhttp.send(); } //创建XMLHttpRequest对象 function createXmlhttp() {

Javascript鼠标触发事件大全

Javascript鼠标事件大全 一般事件 事件浏览器支持描述 onClick IE3|N2|O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击 onDblClick IE4|N4|O 鼠标双击事件onMouseDown IE4|N4|O 鼠标上的按钮被按下了onMouseUp IE4|N4|O 鼠标按下后,松开时激发的事件 onMouseOver IE3|N2|O3 当鼠标移动到某对象范围的上方时触发的事件 onMouseMove IE4|N4|O 鼠标移动时触发的事件 onMouseOut IE4|N3|O3 当鼠标离开某对象范围时触发的事件 onKeyPress IE4|N4|O 当键盘上的某个键被按下并且释放时触发的事件.[注意:页面内必须有被聚焦的对象] onKeyDown IE4|N4|O 当键盘上某个按键被按下时触发的事件[注意:页面内必须有被聚焦的对象] onKeyUp IE4|N4|O 当键盘上某个按键被按放开时触发的事件[注意:页面内必须有被聚焦的对象] 页面相关事件 事件浏览器支持描述 onAbort IE4|N3|O 图片在下载时被用户中断 onBeforeUnload IE4|N|O 当前页面的内容将要被改变时触发的事件 onError IE4|N3|O 捕抓当前页面因为某种原因而出现的错误,如脚本错误与外部数据引用的错误 onLoad IE3|N2|O3 页面内空完成传送到浏览器时触发的事件,包括外部文件引入完成 onMove IE|N4|O 浏览器的窗口被移动时触发的事件onResize IE4|N4|O 当浏览器的窗口大小被改变时触发

JavaScript事件

我的记录(JavaScript事件)JavaScript 事件冒泡简介及应用实例 一、什么是事件冒泡 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window)。 打个比方说:你在地方法院要上诉一件案子,如果地方没有处理此类案件的法院,地方相关部门会帮你继续往上级法院上诉,比如从市级到省级,直至到中央法院,最终使你的案件得以处理。 二、事件冒泡有什么作用 (1)事件冒泡允许多个操作被集中处理(把事件处理器添加到一个父级元素上,避免把事件处理器添加到多个子级元素上),它还可以让你在对象层的不同级别捕获事件。 【集中处理例子】

控制台输出: keydown keypress keyup 2、浏览器的兼容性

(1)FireFox、Opera、Chrome 事件对应的函数有一个隐藏的变量e,表示发生事件。 e有一个属性e.which指示哪个键被按下,给出该键的索引值(按键码)。 静态函数String.fromCharCode()可以把索引值(按键码)转化成该键对应的的字符。eg: [html]view plaincopyprint? 1. 2. FireFox、Opera、Chrome中输入:a 输出:按键码:97 字符:a (2)IE IE不需要e变量,window.event表示发生事件。 window.event有一个属性window.event.keyCode指示哪个键被按下,给出该键的索引值(按键码)。 静态函数String.fromCharCode()可以把索引值(按键码)转化成该键对应的的字符。eg: [html]view plaincopyprint?

理解JavaScript中函数的使用

理解JavaScript中函数的使用 函数是进行模块化程序设计的基础,编写复杂的Ajax应用程序,必须对函数有更深入的了解。 JavaScript中的函数不同于其他的语言,每个函数都是作为一个对象被维护和运行的。通过函数对象的性质,可以很方便的将一个函数赋值给一个变量或者将函数作为参数传递。在继续讲述之前,先看一下函数的使用语法: function func1(…){…} var func2=function(…){…}; var func3=function func4(…){…}; var func5=new Function(); 这些都是声明函数的正确语法。它们和其他语言中常见的函数或之前介绍的函数定义方式有着很大的区别。那么在JavaScript中为什么能这么写?它所遵循的语法是什么呢?下面将介绍这些内容。 认识函数对象(Function Object) 可以用function关键字定义一个函数,并为每个函数指定一个函数名,通过函数名来进行调用。在JavaScript解释执行时,函数都是被维护为一个对象,这就是要介绍的函数对象(Function Object)。 函数对象与其他用户所定义的对象有着本质的区别,这一类对象被称之为内部对象,例如日期对象(Date)、数组对象(Array)、字符串对象(String)都属于内部对象。这些内置对象的构造器是由JavaScript本身所定义的:通过执行new Array()这样的语句返回一个对象,JavaScript内部有一套机制来初始化返回的对象,而不是由用户来指定对象的构造方式。 在JavaScript中,函数对象对应的类型是Function,正如数组对象对应的类型是Array,日期对象对应的类型是Date一样,可以通过new Function()来创建一个函数对象,也可以通过function关键字来创建一个对象。为了便于理解,我们比较函数对象的创建和数组对象的创建。先看数组对象:下面两行代码都是创建一个数组对象myArray: var myArray=[]; //等价于 var myArray=new Array();

实验项目21—JAVASCRIPT内置函数和对象

实验难点 实验内容实验目的 实验重点实验步骤 实验内容 1、JavaScript 内置函数的应用 2、JavaScript 内置对象的应用 3、JavaScript 浏览器对象的应用

实验难点实验内容实验目的实验重点实验步骤 实验目的 1、掌握JavaScript 内置函数的使用方法 2、掌握JavaScript 常用内置对象的属性和方法 3、掌握JavaScript 浏览器对象的含义 4、掌握使用浏览器对象提供的信息来完成一定功能的网页设计。

实验难点 实验内容实验目的实验重点实验步骤 实验重点 1、掌握JavaScript 内置函数的使用方法 2、掌握JavaScript 常用内置对象的属性和方法 3、掌握JavaScript 浏览器对象的含义

实验难点 实验内容实验目的实验重点 实验步骤 实验难点 1、掌握使用浏览器对象提供的信息来完成一定功能的网页设计。

实验难点 实验内容 实验目的 实验重点 实验步骤实验内容一:JavaScript 内置函数的应用 1、eval( ):计算字符串表达式的值 2、parseFloat( )和parseInt( ):将字符串开头的整数或浮点数分解出来,转换为整数或浮点数 3、isNaN( ):确定一个变量是否为NaN (Not a Number ) 4、escape( ):将字符串中的非字母数字字符转换为按格式%XX 表示的数字 5、unescape( ):将字符串格式为%XX 的数字转换为字符 6、程序案例1_1:求用户在提示对话框中输入的表达式的值。 7、思考题: 判断用户输入的字符是不是数字,如果是,分别将其转换成浮点数和整数,并显示到网页上。

JavaScript试题集

.单选题 1. 我们可以在下列哪个HTML元素中放置javascript代码? A.< script > B.< javascript > C.< js > D.< scripting > ★标准答案:A 2. 预测以下代码片段的输出结果: var str ; alert(typeof str); A.. string ; B.. undefined; C.. object ; D.. String; ★标准答案:B 3. 下列哪个不是Javascript中注释的正确写法:() A.< !-- …… -- > B. *……*/ D. /* …… */ ★标准答案:A 4. 以下哪项不属于Javascript的特征? 是一种脚本语言 是事件驱动的 代码需要编译以后才能执行

是独立于平台的 ★标准答案:C 5. 关于以下两个陈述的描述中,正确的是:() 陈述1:Javascript是弱类型语言 陈述2:Javascript的常用类型包括:int、string、boolean A.陈述1正确,陈述2错误 B.陈述1错误,陈述2正确 C.两个陈述都正确 D.两个陈述都错误 ★标准答案:A 6. 阅读下面的JavaScript代码: < HTML > < BODY > < SCRIPT LANGUAGE="JavaScript" > function f(y) { var x=y*y; return x; } for(x=0;x< 5;x++) { y=f(x); (y); } < /SCRIPT > < /BODY > < /HTML > 输出结果是()。 1 2 3 4 1 4 9 16 1 4 9 16 25 D.以上答案都不对 ★标准答案:B 7. 在Javascript中,需要声明一个整数类型的变量num,以下哪个语句能实现上述要求? num;

javascript常用函数集

javascript常用函数集 javascript提供了许多函数供开发人员使用,下面给出一个简单介绍,更详细的信息请参考Visual InterDev提供的在线关心。 javascript函数一共可分为五类: ·常规函数 ·数组函数 ·日期函数 ·数学函数 ·字符串函数 1.常规函数 javascript常规函数包括以下9个函数: (1)alert函数:显示一个警告对话框,包括一个OK按钮。 (2)confirm函数:显示一个确认对话框,包括OK、Cancel按钮。 (3)escape函数:将字符转换成Unicode码。 (4)eval函数:运算表达式的结果。 (5)isNaN函数:测试是(true)否(false)不是一个数字。 (6)parseFloat函数:将字符串转换成符点数字形式。 (7)parseInt函数:将符串转换成整数数字形式(可指定几进制)。 (8)prompt函数:显示一个输入对话框,提示等待用户输入。例如: 你好!这是一个简单事件处理程序!

计算机科学与技术系 Web 前端开发技术 11.1 事件编程(续) 1.网页访问中常见的事件 鼠标单击:例如单击button 、选中checkbo x 和radio 等元素;鼠标进入、悬浮或退出页面的某个热点:例如鼠标停在一个图片上方或者进入table 的范围; 键盘按键:当按下按键或释放按键时;页面或图像载入:例如页面body 被加载时;在表单中选取输入框或改变输入框中文本的内容:例如选中或修改了文本框中的内容;确认表单:例如当准备提交表单的内容。 事件类型:1.鼠标事件2.键盘事件3.浏览器事件

javascript试题

在HTML中,表单中的input元素的()属性用于指定表单元素的名称。 A. value B. name C. type D. caption 当表单各项填写完毕,鼠标单击提交按钮时可以触发()事件。 A. onenter B. onsubmit C. onmouseDrag D. onmouseOver 分析下面的JavaScript代码段,输出结果是()。 var a=15.59; document.write(Math.round(a)); A. 15 B. 16 C. 15.5 D. 15.4 要求用JavaScript实现下面的功能:在一个文本框中内容发生改变后,单击页面的其他部分将弹出一个消息框显示文本框中的内容。下面语句正确的是()。 A. B. C. D. 假定今天是2006年4月1日星期六,请问下列JavaScript代码在页面上的输出结果是()。var time=new Date(); document.write(time.getDate()); A. 2006 B. 4 C. 1 D. 6 下面描述正确的是()。 A. switch语句用于重复执行一个语句块的操作 B. switch语句根据表达式的值执行若干语句块之一,如果没有匹配项,则执行默认语句块中的语句 C. switch语句表达式中的值不能与后面case语句中的常量相匹配时将出现运行错误 D. switch语句又叫循环语句 分析如下JavaScript代码,b的值为()。 var a=1.5 ,b; b=parseInt(a); A. 2 B. 0.5 C. 1 D. 1.5 在HTML中,使用JavaScript中的浏览器对象实现在当前窗口打开链接"https://www.wendangku.net/doc/ef9990602.html,"的javascript语句是()。 A. window.open("https://www.wendangku.net/doc/ef9990602.html,"); B. document.write("https://www.wendangku.net/doc/ef9990602.html,"); C. location.replace("https://www.wendangku.net/doc/ef9990602.html,"); D. location.reload("https://www.wendangku.net/doc/ef9990602.html,"); 如果今天是2006年5月14日,分析下列JavaScript代码运行后,在网页上显示()。 var now = new Date(); var year = now.getYear(); var month = now.getMonth(); var date = now.getDate(); document.write(year+" "+month+" "+date); A. 2006 05 14 B. 2006 5 14 C. 2006 04 14 D. 2006 4 14 在HTML中有如下代码,运行后页面显示结果为()。

Javascript事件

获取事件对象的全家 事件对象的获取很简单,很久前我们就知道IE中事件对象是作为全局对象( window.event )存在的,Firefox中则是做为句柄( handler )的第一个参数传入内的。所以一行代码就可以搞定 view sourceprint? 1var evt = window.event || arguments[0]; 下面分三种添加事件的方式讨论,你也许会看到以前没有看到过的获取方式。 1,第一种添加事件的方式,直接在html的属性中写JS代码 view sourceprint? 1

Div1 Element
大概这是上世纪90年代的写法,那时候直接把js代码写在网页中很普遍,也许那时候的js并不太重要,只是用来做做验证或一些花哨的效果而已。如何在这种添加事件方式下获取到事件对象?IE中很简单,因为event是作为全局对象的,所以直接使用event即可,如下 view sourceprint? 1
Div1 Element
点击该Div后,IE中会弹出'click'字符的信息框。说明事件对象获取到了,如果在 Opera/Safari/Chrome 中也测试了,会发现效果和IE一样,说明Opera/Safari/Chrome 中也支持IE方式( window.event )获取事件对象。 Firefox中会报错,提示:window.event is undefined,说明Firefox不支持IE方式获取事件对象而是以句柄的第一个参数传入的,文章开头意见提到了。 上面的用window.event 来获取事件对象,其实window可以省略的,就像使用alert而不是window.alert一样。如 view sourceprint? 1
Div1 Element
在IE/Opera/Safari/Chrome 中测试,和刚刚不会有什么区别。在Firefox中再测,会有个惊喜,你会发现居然弹出的是"click"信息框,而不是"undefined"。 两次测试区别仅仅一个用window.event.type,一个用event.type。这个问题下面详细讨论。

项目18—JAVASCRIPT内置对象和函数

教学方法教学目标教学重点教学难点 教学过程 教学目标 1、掌握JavaScript 内置函数的应用 2、掌握JavaScript 内置对象的应用 3、掌握JavaScript 浏览器对象的应用

教学方法教学目标教学重点 教学难点 教学过程 教学重点 1、掌握JavaScript 内置函数的使用方法 2、掌握JavaScript 常用内置对象的属性和方法 3、掌握JavaScript 浏览器对象的含义

教学方法教学目标教学重点 教学难点 教学过程 教学难点 1、掌握使用浏览器对象提供的信息来完成一定功能的网页设计。

教学方法教学目标教学重点 教学难点 教学过程 教学方法 1、项目工程互动式教学法 2、“讲、学、观察”相结合

教学方法教学目标教学重点教学难点教学过程 一、JavaScript 内置函数的应用 JavaScript 中的系统函数又称内部方法。它提供了与任何对象无关的系统函数,使用这些函数不需创建实例,可以直接用。 1、eval( ):计算字符串表达式的值 2、parseFloat( )和parseInt( ):将字符串开头的整数或浮点数分解出来,转换为整数或浮点数 3、isNaN( ):确定一个变量是否为NaN (Not a Number ) 4、escape( ):将字符串中的非字母数字字符转换为按格式%XX 表示的数字 5、unescape( ):将字符串格式为%XX 的数字转换为字符

教学方法 教学目标教学重点教学难点 教学过程 6、程序案例1:求用户在提示对话框中输入的表达式的值。 eval( )内置函数的用法:计算字符串表达式的值。

javaScript,页面自动加载事件详解

javaScript,页面自动加载事件详解 篇一:javascript 动态添加事件 往往我们需要在 JS 中动态添加事件,这就涉及到浏览器兼容性问题了,以下谈及的几 种方法,我们也常常混合使用。 方法一、setAttribute var obj = document.getElementById("obj"); obj.setAttribute("onclick", "javascript:alert('测试');"); 这里利用 setAttribute 指定 onclick 属性,简单,很好理解, 但是: IE 不支持, IE 并不是不支持 setAttribute 这个函数, 而是不支持用 setAttribute 设 置某些属性, 包括对象属性、 集合属性、 事件属性, 也就是说用 setAttribute 设置 style、 onclick、 onmouseover 这些属性在 IE 中是行不通的。 LEO:在 IE6 下尝试成功 方法二、用 attachEvent 和 addEventListener IE 支持 attachEvent obj.attachEvent("onclick", Foo); function Foo() { alert("测试"); } 也可写在一起 obj.attachEvent("onclick", function(){alert("测试");}); 其它浏览器支持 addEventListener obj.addEventListener("click", Foo, false); function Foo() { alert("测试"); } 同样也可写在一起 obj.addEventListener("click", function(){alert("测试");}, false); 注意 attachEvent 的事件带 on,如 onclick,而 addEventListener 不带 on,如 click。 顺便说一下 addEventListener 的第三个参数(虽然很少用) useCapture - 如果为 true, 则 useCapture 指示用户希望启动捕获。启动捕获后,所有指定类型的事件将在被指派到树中 其下面的任何 EventTargets 之前指派给已注册的 EventListener。 正在通过树向上 bubbling 的 事件将不触发指定的使用捕获的 EventListener。 1 / 11

javascript如何封装函数

本文由我司收集整编,推荐下载,如有疑问,请与我司联系 javascript 如何封装函数 2017/02/28 81 通常写js 组件开发的,都会用到匿名函数的写法去封装一个对 象,与外界形成一个闭包的作用域。封装,全天下漫天遍野的封装,JQuery,EXT 和Prototype.js 封装的是javascript,jQuery uI 和jQuery mobile 封装着jQuery,java 中的JDBC 在spirng,Hibernate 等框架封装着。 1 !doctype html 2 html lang=“en” 3 head 4 meta charset=“UTF-8” 5 meta name=“viewport”content=“width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0” 6 meta http-equiv=“X-UA-Compatible”content=“ie=edge” 7 title Document /title 8 /head 9 body 10 script type=“text/javascript”11 var beibei = {12 init:function () {13 console.log(‘come in here!’);15};16 beibei.init();18 //构造函数19 function Person() {20 https://www.wendangku.net/doc/ef9990602.html, = “beibei”;21 this.age = 26;22 this.getName = function () {23 return https://www.wendangku.net/doc/ef9990602.html,;26 var person = new Person();27 console.log(person.age);28 console.log(person.getName());30 function Person(name,age) {31 https://www.wendangku.net/doc/ef9990602.html, = name;32 this.age = age;33 this.getName = function () {34 return https://www.wendangku.net/doc/ef9990602.html,;38 var p1 = new Person(“beibei”,10);39console.log(https://www.wendangku.net/doc/ef9990602.html,);40 console.log(p1.age);41 console.log(p1.getName());43 //这样写是没问题的但是有一点 缺陷就是每个对象都维护相同的方法实例而其实它们可以共享此方法而不必每 个对象都生成此实例44 //在java 语言中面向对象的思想中有一条“继承”既然此方 法对于每个对象来说是公用的那么可以在它的父类中实现45 //在javascript 中继承 是基于原型对象的继承在原型对象中实现此方法,那么每个对象调用次方法时首 先查看自己是否有此方法如果有调用自己的方法46 //如果没有去原型对象中查 询调用原型对象的方法是不是和java 中的继承差不多呢?这是修改后的代码。 48 function Person(name,age) {49 https://www.wendangku.net/doc/ef9990602.html, = name;50 this.age = age;53 Person.prototype.getName = function () {54 return https://www.wendangku.net/doc/ef9990602.html,;57 var p1 = new Person(“beibei”,10);58console.log(https://www.wendangku.net/doc/ef9990602.html,);59 console.log(p1.age);60 console.log(p1.getName());62 //对象字面量的形式构造对象63 var p1 = {64

相关文档