本文由andygaobokee贡献
pdf文档可能在WAP端浏览体验不佳。建议您优先选择TXT,或下载源文件到本机查看。
JavaScript --从入门到精通
JavaScript 是由 Netscape 公司开发并随 Navigator 导航者一起发布的、介于 Java 与 HTML 之间、基于对象事件驱动的编程语言,正日益受到全球的关注。 因它的开发环境简单,不需要 Java 编译器,而是直接运行在 Web 浏览器中,因 此倍受 Web 设计者的所爱。 这一套 JavaScript 教程分九个章节从什么是 JavaScript、JavaScript 的简单应 用一直介绍到如何用 JavaScript 实现复杂的交互,对于 JavaScript 初学者和进阶 者来说,都是一部不可多得的优秀教程。
JavaScript 教程语言概况
Internet 时代,造就了我们新的工作和生活方式,其互联性、开放性和共享 信息的模式,打破了传统信息传播方式的重重壁垒,为我们带来了新的机遇。随 着计算机和信息时代的到来,人类社会前进的脚步在逐渐加快,每一天都有新的 事情发生,每一天都在创造着奇迹。随着 Internet 技术的突飞猛进,各行各业都 在加入 Internet 的行业中来。无论从管理方面,还是从
商业角度来看,Internet 都可以带来无限生机。通过 Internet,可以实现地区、集体乃至个人的连接,从 而达到一种“统一的和谐”。那么怎样把自己的或公司的信息资源加入到 WWW 服务器,是广大用户日益关心的问题。采用超链技术(超文本和超媒体技术)是 实现这个目标最简单的、最快速的手段和途径。具体实现这种手段的支持环境, 那就是 HTML 超文本标识语言。通过它们可制作所需的 Web 网页。 通过超文本(Hyper Text)和超媒体(Hyper Media)技术结合超链接(Hyper link) 的链接功能将各种信息组织成网络结构(web),构成网络文档(Document),实现 Internet 上的“漫游”。通过 HTML 符号的描述就可以实现文字、表格、声音、 图像、动画等多媒体信息的检索。 然而采用这种超链技术存在有一定的缺陷, 那就是它只能提供一种静态的信 息资源,缺少动态的客户端与服务器端的交互。虽然可通过 CGI(Common Gateway Interface)通用网关接口实现一定的交互,但由于该方法编程较为复杂, 因而在一段时间防碍了 Internet 技术的发展。 JavaScript 的出现, 而 无凝为 Internet 网上用户带来了一线生机。 可以这样说,JavaScript 的出现是时代的需求,是当今的 信息时代造就了 JavaScript。 JavaScript 的出现,它可以使得信息和用户之间不仅只是一种显示和浏览的 关系,而是实现了一种实时的、动态的、可交式的表达能力。从而基于 CGI 静 态的 HTML 页面将被可提供动态实时信息,并对客户操作进行反应的 Web 页面 的取代。JavaScript 脚本正是满足这种需求而产生的语言。它深受广泛用户的喜 爱和欢迎。它是
众多脚本语言中较为优秀的一种,它与 WWW 的结合有效地实 现了网络计算和网络计算机的蓝图。 无凝 Java 家族将占领 Internet 网络的主导地 位。因此,尽快掌握 JavaScript 脚本语言编程方法是我国广大用户日益关心的。 一、什么是 JavaScript JavaScript 是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性 能的脚本语言。 使用它的目的是与 HTML 超文本标记语言、 Java 脚本语言 (Java 小程序)一起实现在一个 Web 页面中链接多个对象,与 Web 客户交互的作用。 从而可以开发客户端的应用程序等。它是通过嵌入或调入在标准的 HTML 语言
中实现的。 它的出现弥补了 HTML 语言的缺陷, 它是 Java 与 HTML 折衷的选择, 具有以下几个基本特点: 脚本编写语言 JavaScript 是一种脚本语言,它采用小程序段的方式实现编程。像其它脚本 语言一样,JavaScript 同样已是一种解释性语言,它提供了一个简易的开发过程。 它的基本结构形式与 C、C++、VB、Delphi 十分类似。但它不像这些语言一 样,需要先编译,而是在程序运行过程中被逐行地解释。它与 HTML 标识结合 在一起,从而方便用户的使用操作。 基于对象的语言 JavaScript 是一种基于对象的语言,同时也可以看作一种面向对象的。这意 味着它能运用自己已经创建的对象。因此,许多功能可以来自于脚本环境中对象 的方法与脚本的相互作用。 简单性 JavaScript 的简单性主要体现在:首先它是一种基于 Java 基本语句和控制流 之上的简单而紧凑的设计,
从而对于学习 Java 是一种非常好的过渡。 其次它的变 量类型是采用弱类型,并未使用严格的数据类型。 安全性 JavaScript 是一种安全性语言,它不允许访问本地的硬盘,并不能将数据存 入到服务器上,不允许
一个介于0至5之间的字符串是什么对网络文档进行修改和删除,只能通过浏览器实现信息浏 览或动态交互。从而有效地防止数据的丢失。 动态性 JavaScript 是动态的,它可以直接对用户或客户输入做出响应,无须经过 Web 服务程序。它对用户的反映响应,是采用以事件驱动的方式进行的。所谓 事件驱动,就是指在主页(Home Page)中执行了某种操作所产生的动作,就称为 “事件”(Event)。比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事 件发生后,可能会引起相应的事件响应。 跨平台性 JavaScript 是依赖于浏览器本身,与操作环境无关,只要能运行浏览器的计 算机,并支持 JavaScript 的浏览器就可正确执行。从而实现了“编写一次,走遍 天下”的梦想。 实际上 JavaScript 最杰出之处在于可以用很小的程序做大量的事。无须有高 性能的电脑,软件仅需一个字处理软件及一个浏览器,无须 WEB 服务器通道, 通过自己的电脑即可完成所有的事情。 综合所述 JavaScript 是一种新的描述语言,它可以被嵌入到 HTML 的文件 之中。JavaScript 语言可以做到回应使用者的需求事件 (如:form 的输入),而不 用任何的网路来回传输资料,所以当一位使用者输入一项资料时,它不用经过传 给服务端 (server)处理,再传回来的过程,而直接可以被客户端 (client)
的应用 程序所处理。 JavaScript 和 Java 很类似, 但到底并不一样! Java 是一种比 JavaScript 更 复杂许多的程式语言,而 JavaScript 则是相当容易了解的语言。JavaScript 创作 者可以不那么注重程式技巧,所以许多 Java 的特性在 Java Script 中并不支援。 二、JavaScript 和 Java 的区别 虽然 JavaScript 与 Java 有紧密的联系, 但却是两个公司开发的不同的两个产 品。 是 SUN 公司推出的新一代面向对象的程序设计语言, Java 特别适合于 Internet
应用程序开发; JavaScript 是 Netscape 公司的产品, 而 其目的是为了扩展 Netscape Navigator 功能,而开发的一种可以嵌入 Web 页面中的基于对象和事件驱动的解 释性语言,它的前身是 Live Script;而 Java 的前身是 Oak 语言。下面对两种语 言间的异同作如下比较: 基于对象和面向对象 Java 是一种真正的面向对象的语言, 即使是开发简单的程序, 必须设计对象。 JavaScript 是种脚本语言,它可以用来制作与网络无关的,与用户交互作用 的复杂软件。它是一种基于对象(Object Based)和事件驱动(Event Driver)的 编程语言。因而它本身提供了非常丰富的内部对象供设计人员使用。 解释和编译 两种语言在其浏览器中所执行的方式不一样。 Java 的源代码在传递到客户端 执行之前, 必须经过编译, 因而客户端上必须具有相应平台
上的仿真器或解释器, 它可以通过编译器或解释器实现独立于某个特定的平台编译代码的束缚。 JavaScript 是一种解释性编程语言,其源代码在发往客户端执行之前不需经 过编译,而是将文本格式的字符代码发送给客户端由浏览器解释执行。 强变量和弱变量 两种语言所采取的变量是不一样的。 Java 采用强类型变量检查,即所有变量在编译之前必须作声明。如: Integer x; String y; x=1234; y="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 程序运行环境 Java 运行环境 软件环境:
Windows 95/98 或 Windows NT。 Netscape Navigator x.0 或 Internet Explorer x.0。 用于编辑 HTML 文档的字符编辑器(WS、WPS、Notepad、WordPad 等)或 HTML 文档编辑器。 硬件配置: 首先必须具备运行 Windows 95/98 或 Windows NT 的基本硬件配置环境。推 荐: 基本内存 32M。 CRT 只少需要 256 颜,分辨率在 640X480 以上。 CPU 只少 233 以上。 鼠标和其它外部设置(根据需要选用)。 四、编写第一个 JavaScript 程序 下面我们通过一个例子,编写第一个 JavaScript 程
序。通过它可说明 JavaScript 的脚本是怎样被嵌入到 HTML 文档中的。 test.html 文档: 在 Internet Explore5.0 中运行后的结果见图 1-1 所示。
图1-1 程序运行的结果 说明: test.html 是 HTML 文档, 其标识格式为标准的 HTML 格式; 如同 HTML 标识语言一样,JavaScript 程序代码是一些可用字处理软件浏览的文本,它在描 述页面的 HTML 相关区域出现。
JavaScript 代码由 说明。在标识 之间就可加入 JavaScript 脚本。
alert()是 JavaScript 的窗口对象方法, 其功能是弹出一个具有 OK 对话框并显 示()中的字符串。 通过标识说明: 若不认识 JavaScript 代码的浏览器, 则所有在其中 的标识均被忽略;若认识,则执行其结果。使用注释这是一个好的编程习惯,它 使其他人可以读懂你的语言。 JavaScript 以 标签结束。 从上面的实例分析中我们可以看出,编写一个 JavaScript 程序确实非常容易 的。
JavaScript 基本数据结构
JavaScript 提供脚本语言的编程与 C++非常相似,它只是去掉了C语言中有 关指针等容易产生的错误,并提供了功能强大的类库。对于已经具备C++或C 语言的人来说,学习 JavaScript 脚本语言是一件非常轻松愉快的事。 一、JavaScript 代码的加入 JavaScript 的脚本包括在 HTML 中, 它成为 HTML 文档的一部分。 HTML 与 标识相结合,构成了一个功能强大的 Internet 网上编程语言。可以直接将 JavaScript 脚本加入文档: 说明: 通过标识指明 JavaScript 脚本源代码将放入其间。 通过属性 Language ="JavaScript"说明标识中是使用的何种语言,这里是 JavaScript 语言, 表示在 JavaScript 中使用的语言。 下面是将 JavaScript 脚本加入 Web 文档中的例子: Test2.html 在浏览器的窗口中调用 test2.html,则显示“这是赛迪网互动学校”字串。 见图 2 所示。
图2 说明: Document.write()是文档对象的输出函数,其功能是将括号中的字符或变量 值输出到窗口;document.close()是将输出关闭。 可将标识放入或 ……之 间。将 JavaScript 标识放置在头部之间,使之在主页和其余部 分代码之前装载,从而可使代码的功能更强大;可以将 JavaScript 标识放置在 …… 主体之间以实现某些部分动态地创建文档。 二、基本数据类型 JavaScript 脚本语言同其它语言一样,有它自身的基本数据类型、表达式和 算术运算符以及程序的基本框架结构。JavaScript 提供了四种基本的数据类型用 来处理数字和文字, 而变量提供存放信息的地方, 表达式则可以完成较复杂的信 息处理。 1、基本数据类型 在 JavaScript 中四种基本的数据类型:数值(整数和实数)、字符串型(用 “”号或‘’括起来的字符或数值)、布尔型(使 True 或 False 表示)和空值。 在 JavaScript 的基本类型中的数据可以是常量,也可以是变量。由于 JavaScript 采用弱类型的形式,因而一个数据的变量或常量不必首先作声明,而是在使用或 赋值时确定其数据的类型的。当然也可以先声明该数据的类型,它是通过在赋值 时自动说明其数据类型的。 2、常量 整型常量 JavaScript 的常量通常又称字面常量,它是不能改变的数据。其整型常量可以使 用十六进制、八进制和十进制表示其值。 实型常量 实型常量是由整数部分加小数部分表示,如 12.32、193.98。可以使用科学或标 准方法表示:5E7、4e5 等。 布尔值 布尔常量只有两种状态: True 或 False。 它
主要用来说明或代表一种状态或标志, 以说明操作流程。它与C++是不一样的,C++可以用1或0表示其状态,而 JavaScript 只能用 True 或 False 表示其状态。 字符型常量
使用单引号(‘)或双引号(“)括起来的一个或几个字符。如 "This is a book of JavaScript "、"3245"、"ewrt234234" 等。 空值 JavaScript 中有一个空值 null,表示什么也没有。如试图引用没有定义的变量,则返 回一个 Null 值。 特殊字符 同C语言一样,JavaScript 中同样有些以反斜杠(/)开头的不可显示的特殊字 符。通常称为控制字符。 3、变量 变量的主要作用是存取数据、提供存放信息的容器。对于变量必须明确变量 的命名、变量的类型、变量的声明及其变量的作用域。 变量的命名 JavaScript 中的变量命名同计算机语言非常相似,这里要注意以下两点: A、 必须是一个有效的变量, 即变量以字母开头, 中间可以出现数字如 test1、 text2 等。除下划线(-)作为连字符外,变量名称不能有空格、 (+)、 (-)、 (,) 或其它符号。 B、不能使用 JavaScript 中的关键字作为变量。 在 JavaScript 中定义了40多个关键字,这些关键字是 JavaScript 内部使用的, 不能
作为变量的名称。如 var、int、double、true 不能作为变量的名称。 在对变量命名时,最好把变量的意义与其代表的意思对应起来,以免出现错 误。 变量的类型 在 Java
Script 中,变量可以用命令 var 作声明: var mytest; 该例子定义了一个 mytest 变量。但没有赋予它的值。 var mytest=“This is a book” 该例子定义了一个 mytest 变量, 同时赋予了它的值。 在 JavaScript 中,变量可以不作声明,而在使用时再根据数据的类型来确定其变 量的类型。 如: x=100 y="125" xy= True cost=19.5 等。 其中 x 整数,y 为字符串,xy 为布尔型,cost 为实型。 变量的声明及其作用域 JavaScript 变量可以在使用前先作声明,并可赋值。通过使用 var 关键字对变量 作声明。 对变量作声明的最大好处就是能及时发现代码中的错误; 因为 JavaScript 是采用动态编译的,而动态编译是不易发现代码中的错误,特别是变量命名的方 面。 对于变量还有一个重要性──那就是变量的作用域。在 JavaScript 中同样有全局 变量和局部变量。全局变量是定义在所有函数体之外,其作用范围是所有函数; 而局部变量是定义在函数体之内,只对该函数是可见的,而对其它函数则是不可 见的。
三、表达式和运算符 1、表达式 在定义完变量后,就可以对它们进行赋值、改变、计算等一系列操作,这一 过程通常又由表达式来完成,可以说它是变量、常量、布尔及运算符的集合,因 此表达式可以分为算术表述式、字串表达式、赋值表达式以及布尔表达式等。 2、运算符 运算符是完成操作的一系列符号,在 JavaScript 中有算术运算符,如+、-、 *、/等;有比较运算
符如!=、==等; 有逻辑布尔运算符如!(取反)、|、||; 有 字串运算如+、+=等。 在 JavaScript 主要有双目运算符和单目运算符。其双目运算符由下列组成: 操作数1 运算符 操作数2 即由两个操作数和一个运算符组成。如 50+40、"This"+"that"等。单目运算 符,只需一个操作数,其运算符可在前或后。 (1)算术运算符 JavaScript 中的算术运算符有单目运算符和双目运算符。 双目运算符: +(加) 、-(减)、 *(乘)、 /(除)、 %(取模) 、|(按位或)、&(按 位与)、<<(左移)、 >>(右移)、 >>>(右移,零填充)。 单目运算符: -(取反)、 ̄(取补)、++(递加 1)、--(递减 1)。 (2)比较运算符 比较运算符它的基本操作过程是,首先对它的操作数进行比较,再返回一个 True 或 False 值,有 6 个比较运算符: <(小于)、>(大于)、<=(小于等于)、>=(大于等于)、==(等于)、!=(不等于)。 (3)布尔逻辑运算符 在 JavaScript 中增加了几个布尔逻辑运算符: !(取反)、&=(与之后赋值)、 &(逻辑与)、 |=(或之后赋值)、 |(逻辑 或)、 ^=(异或之后赋值)、 ^(逻辑异或)、 ?:(三目操作符)、||(或)、 ==(等于)、|=(不等于)。 其中三目操作符主要格式如下: 操作数?结果1:结果2 若操作数的结果为真,则表述式的结果为结果1,否则为结果2。 四、范例 下面是一个跑马灯效果的 JavaScript 文档。 Test2_1.html 本文介绍了 JavaScript 脚本是如何加入 Web 页面, 并学习了 JavaScript 语言 中的基本数据类型、变量、常量、操作运算符等。可以看出,对于已经掌握C+ +语言的人来说,学习 JavaScript 真是一件非常轻松愉快的事。
JavaScript 程序构成
JavaScript 脚本语言的基本构成是由控制语句、函数、对象、方法、属性等, 来实现编程的。 一、程序控制流 在任何一种语言中,程序控制流是必须的,它能使得整个程序减小混乱,使 之顺利按其一定的方式执行。下面是 JavaScript 常用的程序控制流结构及语句: 1、if 条件语句 基本格式 if(表述式) 语句段1; …… else 语句段2;
…… 功能:若表达式为 true,则执行语句段1;否则执行语句段2。 说明: if -else 语句是 JavaScript 中最基本的控制语句,通过它可以改变语句的执行顺 序。 表达式中必须使用关系语句,来实现判断,它是作为一个布尔值来估算的。 它将零和非零的数分别转化成 false 和 true。 若 if 后的语句有多行,则必须使用花括号将其括起来。 if 语句的嵌套 if(布尔值)语句1; else(布尔值)语句2; else if(布尔值)语句3; …… else 语句4; 在这种情况下, 每一级的布尔表述式都会被计算, 若为真, 则执行其相应的语句, 否则执行 else 后的语句。 2、For 循环语句 基本格式 for(初始化;条件;增量) 语句集; 功能:实现条件循环,当条件成立时,执行语句集,否则跳出循环体。 说明: 初始化参数告诉循环的
开始位置,必须赋予变量的初值; 条件:是用于判别循环停止时的条件。若条件满足,则执行循环体,
否则跳出。 增量:主要定义循环控制变量在每次循环时按什么方式变化。 三个主要语句之间,必须使用逗号分隔。 3、while 循环 基本格式 while(条件) 语句集; 该语句与 For 语句一样,当条件为真时,重复循环,否则退出循环。 For 与 while 语句 两种语句都是循环语句,使用 For 语句在处理有关数字时更易看懂,也较紧 凑;而 while 循环对复杂的语句效果更特别。 4、break 和 continue 语句 与 C++语言相同,使用 break 语句使得循环从 For 或 while 中跳出,continue 使得跳过循环内剩余的语句而进入下一次循环。 二、函数 函数为程序设计人员提供了一个丰常方便的能力。 通常在进行一个复杂的程 序设计时,总是根据所要完成的功能,将程序划分为一些相对独立的部分,每部 分编写一个函数。从而,使各部分充分独立,任务单一,程序清晰,易懂、易读、 易维护。JavaScript 函数可以封装那些在程序中可能要多次用到的模块。并可作 为事件驱动的结果而调用的程序。从而实现一个函数把它与事件驱动相关联。这 是与其它语言不一样的地方。
1、JavaScript 函数定义 Function 函数名(参数,变元){ 函数体;. Return 表达式; } 说明: 当调用函数时,所用变量或字面量均可作为变元传递。 函数由关键字 Function 定义。 函数名:定义自己函数的名字。 参数表, 是传递给函数使用或操作的值, 其值可以是常量, 变量或其它表达式。 通过指定函数名(实参)来调用一个函数。 必须使用 Return 将值返回。 函数名对大小写是敏感的。 2、函数中的形式参数:
在函数的定义中,我们看到函数名后有参数表,这些参数变量可能是一个或 几个。那么怎样才能确定参数变量的个数呢?在 JavaScript 中可通过 arguments .length 来检查参数的个数。 例: Function function_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); …… 三、事件驱动及事件处理 1、基本概念 JavaScript 是基于对象(object-based)的语言。这与 Java 不同,Java 是面向对象 的语言。而基于对象的基本特征,就是采用事件驱动(event-driven)。它是在有形 界面的环境下,使得一切输入变化简单化。通常鼠标或热键的动作我们称之为事 件 (Event) 而由鼠标或热键引发的一连串程序的动作, , 称之为事件驱动 (Event Driver)。而对事件进行处理的程序或函数,我们称之为事件处理程序(Event Handler)。 2、事件处理程序 在 JavaScript 中对象事件的处理通常由函数(Function)担任。 其基本格式与函 数全部一样,可以将前面所介绍的所有函数作为事件处理程序。 格式如下: Function 事件处理名(参数表){ 事件处理语句集; …… }
3、事件驱动 JavaScript 事件驱动中的事件是通过鼠标或热键的动作引发的。它主要有以 下几个事件: (1)单击事件 onClick 当用户单击鼠标按钮时,产生 onClick 事件。同时 onClick 指定的事件处理 程序或代码将被调用执行。通常在下列基本对象中产生: button(按钮对象) checkbox(复选框)或(检查列表框) radio (单选钮) reset buttons(重置按钮) submit buttons(提交按钮) 例:可通过下列按钮激活 change()文件:
在 onClick 等号后,可以使用自己编写的函数作为事件处理程序,也可以使 用 JavaScript 中内部的函数。还可以直接使用 JavaScript 的代码等。例: (3)选中事件 onSelect 当 Text 或 Textarea 对象中的文字被加亮后,引发该事件。 (4)获得焦点事件 onFocus 当用户单击 Text 或 textarea 以及 select 对象时,产生该事件。此时该对象成 为前台对象。 (5)失去焦点 onBlur 当 text 对象或 textarea 对象以及 select 对象不再拥有焦点、而退到后台时, 引发该文件,他与 onFocas 事件是一个对应的关系。 (6)载入文件 onLoad 当文档载入时,产生该事件。onLoad 一个作用就是在首次载入一个文档时 检测 cookie 的值,并用一个变量为其赋值,使它可以被源代码使用。 (7)卸载文件 onUnload 当 Web 页面退出时引发 onUnload 事件,并可更新Cookie
的状态。 四、范例 范例 1: 下例程序是一个自动装载和自动卸载的例子。 即当装入 HTML 文档 时调用 loadform()函数,而退出该文档进入另一 HTML 文档时则首先调用 unloadform()函数,确认后方可进入。 test3_1.htm
调用 范例 2:这是一个获取浏览器版本号的程序。该程序首先显示一个波浪
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论