JavaScript及Web基础知识培训


3 Sept. 2008 © NEUSOFT SECRET JavaScript及Web基础知识培训 赵欣 zhaoxin@dragonsoft.com.cn 巨龙软件 总工办 副总工程师 3 Sept. 2008 NEUSOFT SECRET 培训内容介绍 • JavaScript部分内容 • 1.JavaScript概述 • 2.数据类型 • 3.变量和常量 • 4.表达式与运算符 • 5.控制语句 • 6.函数 • 7.数组 • 8.JavaScript的对象层次 • Web基础知识部分内容 • 9.窗口和框架 • 10.屏幕和浏览器对象 • 11.文档对象document • 12.Ajax高级应用 JavaScript 第一部分 JavaScript概述 3 Sept. 2008 NEUSOFT SECRET JavaScript概述 • 主要内容如下: • 简单的脚本语言 • 第一个JavaScript程序 • 注意事项 3 Sept. 2008 NEUSOFT SECRET 简单的脚本语言 • 什么是脚本语言 – 脚本语言是一种应用程序扩展语言,用于系统的扩展,使其 按用户的意愿去运行。 – 所有的基础功能由系统提供,脚本语言在更高一层次描述如 何调用系统的接口。 – 解释执行。 • JavaScript能做什么 • JavaScript和其它语言的异同 • JavaScript同Java的异同 3 Sept. 2008 NEUSOFT SECRET 第一个JavaScript程序 预备知识 • document对象的write方法将字符串“Hello World”输出 显示在浏览器客户区里。 • 使用window对象的alert方法以消息框的形式输出信息。 • JavaScript程序嵌入HTML文档的常用方法就是将代码放 在“ • • • 例如 • document.write("Hello World!"); 3 Sept. 2008 NEUSOFT SECRET 注意事项 浏览器对JavaScript的支持 • 在互联网发展的过程中,几大浏览器之间也存在激烈的竞争。JavaScript是 Netscape公司的技术,其它浏览器并不能和Navigator一样良好的支持 JavaScript,因为得不到使用许可。微软公司为能使其IE浏览器能抢占一定市 场份额,于是在IE中实现了称为JScript的脚本语言,其兼容JavaScript,但是 和JavaScript间仍然存在版本差异。因此,编程人员在编码时仍然考虑不同浏 览器间的差别。 检测当前所用的浏览器 • 其实,对于mis系统来说,没有必要兼容浏览器。 3 Sept. 2008 NEUSOFT SECRET 注意事项 • 大小写敏感 – JavaScript代码是大小写敏感的,Name和name是不同的标识符,编码时应当予以注意。 同一个词如果如果各个字母间大小写不同时,系统将当作不同的标识符来处理,相互之间 没有任何联系 • 空格与换行 – 代码中多余的空格会被忽略, – 一行代码可以分成多行书写。 – 单行:代码写于一行中,用分号作为语句结束标志 • 更多的内容请阅读 •\\192.168.130.234\software\Unieap3.X相关资料\04 界面开发资料\javascript教程\ 帮助文件\01.微软的脚本语言参考.CHM JavaScript 第二部分 数据类型 3 Sept. 2008 NEUSOFT SECRET 数据类型 • 主要内容如下: 基本数据类型 复合数据类型 数据类型的转换 3 Sept. 2008 NEUSOFT SECRET 基本数据类型 • 1.在JavaScript中,字符串型数据是用引号括起的文本字符串。 – 在JavaScript中不区分“字符”和“字符串”,字符也被当作字符串处理。字符串中可 以包含用于特殊目的字符。 • 2.数值型数据 – JavaScript中用于表示数字的类型称为数字型,不像其它编程语言那样区分整型、 – 浮点型。 • 3.布尔 – 尽管字符串和数字类型可以有无数不同的值,Boolean 数据类型却只有两个值。它们是 文字 true 和 false。Boolean 值是一个真值,它表示一个状态的有效性(说明该状态为 真或假)。 • 4.Null 数据类型 – 在 Jscript 中数据类型 null 只有一个值:null。关键字 null 不能用作函数或变量的名称。 • 5.Undefined 数据类型 – 如下情况使返回 undefined 值: • 对象属性不存在, • 声明了变量但从未赋值。 – 注意不能通过与 undefined 做比较来测试一个变量是否存在, 3 Sept. 2008 NEUSOFT SECRET 复合数据类型 对象的概念。 在面向对象的设计模式中,将数据和处理数据的方法捆绑在一起形成的 整体,称为对象。它封装了数据和操作数据的方法 ,使用时要先创建这个 对象,用new运算符来调用对象的构造函数。 日期对象 • JavaScript将与日期相关的所有特性封装进Date对象,主要用来进行一些与时间相关的操作,比 如获取当前系统时间,使用前要先创建该对象的一个实例: 全局对象 • 全局对象是所有全局方法的拥有者,用来统一管理全局方法,全局方法也就是指全局函数。该对 象不能使用new运算符创建对象实例,所有方法直接调用即可。 数学对象 • 数学对象(Math)封装了与数学相关的特性,包括一些常数和数学函数,主要使用简单一些基 本的数学计算。比如求正弦、正切、余弦、取绝对值等。 • 下面是这个对象的应用实例。 字符串对象 • String对象封装了与字符串有关的特性,主要用来处理字符串。通过String对象,可以对字符串 进行剪切、合并、替换等等。可以调用该对象的构造函数创建一个实例,其实在定义一个字符串 类型变量时就也创建了一个String对象实例。 数组对象 • 数组是JavaScript中另一重要的基本数据类型。内部对象Array封装了所有和数组相关的方法和属 性,其内存在多个数据段组合存储。可以形象的理解为一种有很多连续房间的楼层,每个房间都 可以存放货物,提取货物时只需要给出楼层号和房间编号即可 。 • 且javascript数组中的每个元素都可以存放不同的数据类型数据 3 Sept. 2008 NEUSOFT SECRET 数据类型的转换 隐式转换 • 在程序运行时,系统根据当前上下文的需要,自动将数据从一种类型转换为另 一种类型的过程称为隐式类型转换。其实这个转换很多时候都在我们身边悄悄 发生,比如我们使用document.write和alert方法时,很多时候就发生了隐式转 换,也就是无论你向这两个方法 中输入什么类型的数据,最后都被转换为字 符串型数据。 显式 转换 • 与隐式类型转换相对应的是显式类型转换,此过程需要手动转换到目标类型。 要将某一类型的数据转换为另一类型的数据需要用到特定的方法。如 parseInt(xxx)和 parseFloat(xxx) JavaScript 第三部分 变量和常量 3 Sept. 2008 NEUSOFT SECRET 变量和常量 • 常量的种类 – 在数学和物理学中,存在很多种常量,它们都是一个具体的数值或一个数学表 达式。然而在编程语言中基于数据类型的分类,常量包括字符串型、布尔型、 数值型和null等。 • 什么是变量 – 顾名思义,变量是指在程序运行过程中值可以发生改变的量。更为专业的说是 指可读写的内存单元。可以形象的理解为一个个可以装载东西的容器,变量名 代表着系统分配给它的内存单元,如图所示。 – 变量的定义方式 – JavaScript中,用如下方式定义一个变量。 – var 变量名 = 值; 3 Sept. 2008 NEUSOFT SECRET 变量和常量 • 变量的命名规则 – JavaScript变量的命名必须以字母或下划线开始,后可跟下划线或数字, 但不能使用特殊符号。 • 变量的作用范围 – 作用域是指有效范围,JavaScript变量的作用域有全局和局部之分。全 局作用域的变量在整个程序范围都有效,局部作用域指作用范围仅限于 变量所在的函数体。JavaScript不像其它语言那样有块级作用域。变量 同名时局部作用域优先于全局作用域 • 关键字 – 关键字为系统内部保留的标识符,其用途特殊,用户的标识符不能与关键字相同。 下面列出JavaScript中常见关键字 。所列出的是一些常用的关键字,其中大部分 内容读者现在不必去详细了解,以后用到相关内容时将再作讲解。 3 Sept. 2008 NEUSOFT SECRET 变量和常量 JavaScript 第四部分 表达式与运算符 3 Sept. 2008 NEUSOFT SECRET 表达式与运算符 表达式 • 表达式是产生一个结果值的式子,JavaScript的表达式 是由常量、变量和运算符等组成。 • 表达式可以作为参数传递给函数,或将表达式结果赋予 给变量保存起来。 • 表达式的结果值有多种类型,比如布尔型、字符串型或 数值型等,因此常有逻辑表达式、数值表达式和布尔表 达式之说。 运算符内容较多,且比较基础,自行查看手册即可 3 Sept. 2008 NEUSOFT SECRET 运算符的优先级 . [] () 字段访问、数组下标、函数调用以及表达式分组 ++ —- ~ ! delete new typeof void 一元运算符、返回数据类型、对象创建、未定义 值 * / % 乘法、除法、取模 + - + 加法、减法、字符串连接 << >> >>> 移位 < <= > >= instanceof 小于、小于等于、大于、大于等于、instanceof == != === !== 等于、不等于、严格相等、非严格相等 & 按位与 ^ 按位异或 | 按位或 && 逻辑与 || 逻辑或 ?: 条件 = oP= 赋值、运算赋值 , 多重求值 JavaScript 第五部分 控制语句 3 Sept. 2008 NEUSOFT SECRET JS控制语句概述 – JS控制语句概述 – 选择语句 • if语句 、if-else语句 、if-else-if语句、switch语句 – 循环语句 • for语句 、while语句 、do-while语句 、for-in语句、 break和continue语句 – 异常处理语句 • try-catch语句 、try-catch-finally语句 、throw语句 JavaScript 第六部分 函数 3 Sept. 2008 NEUSOFT SECRET 函数概述 • 函数是完成特定任务的可重复调用的代码段,是JavaScript组织代码的单位 。 • 函数的功能 – 函数的主要功能是将代码组织为可复用的单位,可以完成特定的任务并 返回数据 – JavaScript的函数属于Function对象,因此可以使用Function对象的构造 函数来创建一个函数 。 – 可以使用function关键字以普通的形式来定义一个函数 – 普通定义方式使用关键字function,也是最常用的方式,形式上跟其它编 程语言一样。语法格式如下: – function 函数名( [ 参数1, [ 参数2, [ 参数N ] ] ] ) –{ •[ 语句组 ]; •[ return [表达式] ]; –} 3 Sept. 2008 NEUSOFT SECRET 函数的作用域 • 公有函数:是指定义在全局作用域中,每一个代码都可以调用的函数 。 • 私有函数 :是指处于局部作用域中的函数 。 – 当函数嵌套定义时,子级函数就是父级函数的私有函数。外界不能调用私有函数, 私有函数只能被拥有该函数的函数代码调用 。 • this关键字引用运行上下文中的当前对象, – JavaScript的函数调用通常发生于某一个对象的上下文中。如果尚未指定当前对象, 则调用函数的默认当前对象是Global,使用call方法可以改变当前对象为指定的对象 – 在下面示例中,this 指的是新创建的 Car 对象,并给三个属性赋值。 – function Car(color, make, model){ • this.color = color; • this.make = make; • this.model = model; –} – 对于 JScript 的客户版本,如果在其他所有对象的上下文之外使用 this, – 则它指的是 window 对象。 JavaScript 第七部分 数组 3 Sept. 2008 NEUSOFT SECRET 数组介绍 • 实际开发中,总是面临大量数据存储的问题。JavaScript语言不像 C/C++那样合适用于数据结构的设计,因此需要系统内部提供针对大 量数据存储的工具,数组因此而产生。JavaScript数组的目标是能组 织存储各种各样的数据,并且访问方式和其它语言一样,特点是能混 合存储类型不相同的数据。 • 数组的概念 :JavaScript数组是指将多个数据对象编码存储、提供一 致的存取方式的集合 。 • 与其它程序语言不同的是,JavaScript的数组元素的数据类型可以不 相同。 • 数组元素:是指存储在数组中并赋予唯一索引号的数据段 。 • 各元素的数据类型可以是任意有效的JavaScript数据类型,元素按添 加进数组的顺序存储于数组中。 3 Sept. 2008 NEUSOFT SECRET 创建数组 • 提供对创建任何数据类型的数组的支持。 – arrayObj = new Array() – arrayObj = new Array([size]) – arrayObj = new Array([element0[, element1[, ...[, elementN]]]]) • 参数 – arrayObj – 必选项。要赋值为 Array 对象的变量名。 – size – 可选项。可选项数组的大小。由于数组的下标是从零开始,创建的元素的下标将从零 到 size -1。 – element0,...,elementN – 可选项。要放到数组中的元素。这将创建具有 n + 1 个元素的长度为 n + 1 的数组。 使用该语法时必须有一个以上元素。 • 说明 – 创建数组后,能够用 [ ] 符号访问数组单个元素,例如: my_array[2] = “a”; • 直接创建数组 – JavaScript创建数组的另一种简便的方式是使用“[]”运算符直接创建,数组的元素也 是创建时被指定。这种方法的目标也是创建数组,与前面的方法相比仅仅是语法上的 不同 3 Sept. 2008 NEUSOFT SECRET 数组可以使用的方法 • concat 方法:返回一个新数组,这个新数组是由两个或更多数组组合而成的。 • join 方法:返回字符串值,其中包含了连接到一起的数组的所有元素,元素由指定的分隔 符分隔开来。 • pop 方法:移除数组中的最后一个元素并返回该元素。 • push 方法:将新元素添加到一个数组中,并返回数组的新长度值。 • reverse 方法:返回一个元素顺序被反转的 Array 对象。 • shift 方法:移除数组中的第一个元素并返回该元素。 • slice 方法:返回一个数组的一段。 • sort 方法:返回一个元素已经进行了排序的 Array 对象。 • splice 方法:从一个数组中移除一个或多个元素,如果必要,在所移除元素的位置上插入 新元素,返回所移除的元素。 •………..…. JavaScript 第八部分 JavaScript的对象层次 3 Sept. 2008 NEUSOFT SECRET JavaScript的对象层次 – JavaScript包含几大部分 • 包括语言核心:变量常量、运算符、表达式、数据类型、 控制语句等 。 • 基本的内置对象:String、Date、Math等 。 • 浏览器对象:window、Navigator、Location等 。 • 文档对象 :Document、Form、Image等。 3 Sept. 2008 NEUSOFT SECRET JavaScript的对象层次 • html客户端对象层次图 Web基础知识 第一部分 窗口和框架 3 Sept. 2008 NEUSOFT SECRET window对象 window对象介绍 • 简而言之,window对象是浏览器窗口对文档提供一个显示的容器,是每 一个加载文档的父对象。window对象还是所有其他对象的顶级对象,通 过对window对象的子对象进行操作,可以实现更多的动态效果。 window对象的使用方法 • window对象代表当前打开的浏览器窗口,其作为顶级对象。window对象 的方法和属性的调用和其它对象一样,区别是window对象不需要创建即 可直使用。需要注意的是window对象名称是小写,下面是其属性和方法 的调用语法。 window.属性名 window.方法名(参数列表) • 具体参见 IE 的sdk 3 Sept. 2008 NEUSOFT SECRET 窗口操作 • 打开新窗口 – 使用window对象的open方法可以打开一个新的浏览器窗口,新窗口作为本 窗口的子窗口。相应的本窗口作为新窗口的次窗口,并持有对新窗口的一 个引用,通过该引用可以适度的操作新窗口。open方法的语法如下: – window.open(url,name,features,replace) – 其中,features是描述窗口的特征, replace指明是否允许url替换窗口的 内容。 • 窗口名字 – 窗口的名字在窗口打开时可以设定,仍然用open方法,只是充分运用它的 参数的设置。window.open方法可以设置新开窗口的名称,该窗口名称在a 元素和form元素的target属性中使用 。 • 关闭窗口 – 如果获得一个window对象的引用时,通过该引用去调用其close方法就可 以关掉一个与之相关的窗口。通常情况下,父窗口通过这种方式关闭子窗 口。语法如下: – 窗口名.close() • 窗口的引用 – 上文已经提到通过窗口的引用可以操作内容,同时可以操作窗口的内容。 使用些特性可以在一个窗口中控制另一个窗口的内容,例如向一个新开的 浏览器窗口中输出内容 3 Sept. 2008 NEUSOFT SECRET 超时与时间间隔 • 延迟代码执行 – 使用window对象的setTimeout方法可以延迟代码的执行时间,也可以用该方法来指 定代码的执行时间。setTimeout方法的语法代码如下所示: – window.setTimeout(code,delay) • 取消延迟执行 – window对象中的clearTimeout方法也可以取消延迟执行的代码。因为在实际应用中, 如果有时出现特殊情况,不再需要程序自延迟执行的时候,就得想办法取消延迟。 clearTimeout方法可以做到这一点。语法如下所示: – window.clearTimeout(id) • 周期性执行代码 – 代码延迟执行机制在执行一次后就失效,而在应用中,有时希望某个程序能反复执 行,比如说倒计时等,需要每秒执行一次。为此可以使用window方法的setInterval 方法,该函数设置一个定时器,每当定时时间到时就调用一次用户设定的定时器函 数。 • 停止周期性执行代码 – 使用setInterval方法可以可以设定计时器,设定计时器时将返回一个计时器的引用。 当不再需要的时候可以使用clearInterval方法移除计时器,其接收一个计时器ID作为 参数,语法如下: – window.clearInterval(id) 3 Sept. 2008 NEUSOFT SECRET 框架操作 • 框架介绍 – 框架是指一个浏览器窗口中,同时显示的多个相互独立的网 页。简单的说,在上网浏览网页时,时常会看到一些特别的 页面,这种页面将网页分割成不同的几个区域,这些区域是 相对独立但又有一定的联系的,可以在不同的地方加载不同 的网页,这里所应用的正是框架。 • 父窗口与子窗口 – 在window对象中有一个frames属性,该属性返回一个数组, 数组中的元素代表着框架中所包含的窗口。因此,在框架页 中可以使用frames[0]表示第1个子窗口、frames[1]表示第2个 子窗口,依此类推。如果一个窗口中没有包含框架,那么 frames[]数组中的元素个数为0。 3 Sept. 2008 NEUSOFT SECRET 框架操作 • 窗口之间的关系 – 对于一个复杂的框架,窗口之间可以相互访问,它主要包 括对框架自身的引用、对父窗口对子窗口的引用、子窗口 对父窗口及其他窗口的引用、对顶级窗口的引用。下面是 一个对父窗口的引用的例子的演示。 • 窗口的名字 – 每一个窗口都有一个name属性,其表示一个窗口名,可 以通过窗口来索引一个窗口的引用。在多框架页中name 属性使用的比较多,通过name属性可以取得框架窗口的 引用 • 具体演示 Web基础知识 第二部分 屏幕和浏览器对象 3 Sept. 2008 NEUSOFT SECRET 屏幕对象 • 屏幕对象介绍 – 屏幕对象(screen)提供了获取显示器信息的功能,显示器信息的主要用途是确定网页 在客户机是所能达到的最大显示空间。很多情况下,用户的显示器大小尺寸不尽相同, 以同一尽寸设计的网页往往得不到期望的效果。为此需得知用户显示器的信息,在运行 时确定网页的布局 • 检测显示器参数 – 检测显示器参数有助于确定网页在客户机上所能显示的大小,主要使用screen对象提供 的接口。显示的参数一般都包括显示面积的宽、高度和色深等,其中宽、高度是比较有 意义的,直接与网布局相关,色深只是影响图形色彩的逼真程度 。 • 客户端显示器屏幕的有效宽度和高度 – 有效宽度和高度,是指打开客户端浏览器,所能达到的最大宽度和高度。在不同的操作 系统中,操作系统本身也要占用一定的显示区域,所以在浏览器窗口以最大化打开时, 不一定占满整个显示器屏幕。因此,有效宽度和高度就是指浏览器窗口所能占据的最大 宽度和高度 • 网页可见区域宽:document.body.clientWidth • 网页可见区域高:document.body.clientHeight • 网页可见区域宽:document.body.offsetWidth • 网页可见区域高:document.body.offsetHeight • 网页正文全文宽:document.body.scrollWidth • 网页正文全文高:document.body.scrollHeight • 网页被卷去的高(ie):document.documentElement.scrollTop • 网页被卷去的左:document.body.scrollLeft 3 Sept. 2008 NEUSOFT SECRET 浏览器对象 • 获取浏览器对象的属性值 – 在进行Web开发时,通过Navigator对象的属性来确定用户浏览器的版本, 进而编写有针对某一浏览器版本的代码。appCodeNam,浏览器的代码 名称 。 – appName,浏览器的实际名称 。 – appVersion,浏览器的版本号和平台信息 。 • MimeType对象和Plugin对象 – MimeType对象提供当前浏览器所支持的MIME类型信息,其中MIME类 型信息以数组的形式保存。Plugin主要管理当前浏览器中已经安装的插件 或外挂程序的信息,在应用中该对象非常重要。例如检测当前浏览器是 否已经安装FLASH播放器插件,如果还没有则可以提醒用户下载并安装, 这对包含FLASH内容的网页非常重要。下面通过例子说明如何枚举浏览 器所支持的MIME类型。 Web基础知识 第三部分 文档对象document 3 Sept. 2008 NEUSOFT SECRET 文档对象概述 • 文档对象 – 文档对象即document对象,为操作HTML文档提供接口,拥有大量的属性和方 法,它有大量的子级对象,例如图像对象、超级接对象、表单对象等等 。 – 不需要手工创建,在文档初时化时就已经由系统内部创建。直接调用其方法或 属性即可。 • 引用标签中的值 – 可以使用getElementById方法,他的功能比前面那种更强,是通过标签的id来 访问标签中的值 。 • 引用文档中对象的方法。 – 引用这些对象的方法如下所示 : – document.forms[0] – document.forms[1] • 一般地,文档中的
标记确定了文档中文档对象的顺序,这种 引用对象的方法就是引用表单的一种方法,因此可以使用表单名来 引用。如果页面中只有一个表单,则使用下面这两种方法都可以。 – document.entryForm.entry.value – document.forms[0].entry.value 3 Sept. 2008 NEUSOFT SECRET 文档对象的应用 • 在网页中输出所有的HTML元素 – IE浏览器为Document对象扩展了一个all属性,该属性可以 返回一个数组,数组中的元素为HTML文档中的所有HTML 元素。document.all[]是文档中所有标签组成的一个数组变 量,包括了文档对象中所有元素。 • 引用文档元素中的子元素 – 在现实运用中,很少有需要获得所有元素的情况,通常需要 获得某个元素下的子元素。为此IE浏览器又扩展了一个 children属性,该属性用来返回一个文档中的某个元素的所 有子元素。 Web基础知识 第四部分 Ajax高级应用 3 Sept. 2008 NEUSOFT SECRET 浏览器和服务器间的交互 3 Sept. 2008 NEUSOFT SECRET Ajax技术的组成部分 • Ajax技术的组成部分 – Ajax并不是什么新技术,而是一些老技术的组合。 • JavaScript – Ajax引擎就是运行于浏览器中的一组JavaScript程序 。 • XMLHttpRequest – XMLHttpRequest允许以异步方式从服务器中获取数据,而 不需要每次都刷新网页,也不需要将所有的数据都交付给服 务器处理。 • CSS – 控制数据在浏览器中呈现的样式 。 • DOM – 脚本程序通过DOM来操作文档。 • XML – 用于描述和服务器间交换的数据。 3 Sept. 2008 NEUSOFT SECRET XMLHttpRequest对象 • XMLHttpRequest对象是浏览器中实现通过http协议和服务器 交换DOM数据的程序集合 。 • Ajax应用中主要使用它和服务器间的异步调用机制 。 • XMLHttpRequest创建 • 创建XMLHttpRequest的方式和其它JavaScript对象一样,只 是针对IE浏览器时稍有差别,因为其在IE中是以ActiveX控件 的形式出现 。语法如下: • var xmlHttpRqObj = new XMLHttpRequest(); •// 普通创建方式 • var xmlHttpRqObj = new ActiveXObject(“Microsoft.XMLHTTP”); •// IE浏览器中的方式 3 Sept. 2008 NEUSOFT SECRET 实现Ajax • 实现Ajax的步骤 : – 创建XMLHttpRequest对象 。 – 创建一个HTTP请求。 – 设置响应HTTP请求回调函数。 – 发送HTTP请求。 – 等待请示的响应。 – 使用DOM实现局部刷新。 3 Sept. 2008 NEUSOFT SECRET
还剩50页未读

继续阅读

下载pdf到电脑,查找使用更方便

pdf的实际排版效果,会与网站的显示效果略有不同!!

需要 10 金币 [ 分享pdf获得金币 ] 0 人已下载

下载pdf

pdf贡献者

bluedrame

贡献于2012-06-14

下载需要 10 金币 [金币充值 ]
亲,您也可以通过 分享原创pdf 来获得金币奖励!
下载pdf