JavaScript教材.ppt

1、第3章 JavaScript脚本语言介绍,3.1 什么是JavaScript 3.2 JavaScript的基本语法 3.3 变量和数据类型 3.3.1 基本数据类型 3.3.2 常量 3.3.3 变量 3.3.4 表达式和运算符 3.4 程序控制语句 3.4.1 选择语句 3.4.2 循环语句 3.5 函数 3.6 对象、方法、属性和事件 3.6.1 基本概念 3.6.2 常用对象的介绍 3.6.3 常用事件的应用 3.7 JavaScript综合举例 3.7.1 页面交互功能的应用 3.7.2 状态栏的应用 3.7.3 鼠标事件的应用 3.7.4 窗口的应用 来自 www.jie-ri.o

2、rg,3.1 什么是JavaScript,JavaScript是由一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言。它是通过嵌入在标准的HTML语言中实现的。它的出现弥补了HTML语言的不足之处，它是Java与HTML的折衷。它的开发环境简单，不需要Java编译器，而是直接运行在Web浏览器中，因而使用它与HTML超文本标记语言、Java脚本语言结合在一起，来实现一个Web页面中链接多个对象，与Web客户交互作用，从而可以开发客户端的应用程序等。 来自 ,3.2 JavaScript的基本语法,【例3-1】利用JavaScr

3、ipt编写的Hello World程序。如图3-1-1、图3-1-2所示。 其代码如下：, exam3-1.htm Hello World! ,通过这个简单的实例，在HTML语言中插入JavaScript脚本语言的语法格式为： 注意：JavaScript语句对大小写比较敏感，因此，在写JavaScript语句时要注意。 来自 ,3.3 变量和数据类型,JavaScript脚本语言同其它语言一样，有它自身的基本数据类型、表达式和算术运算符以及程序的基本框架结构。JavaScript提供了四种基本的数据类型用来处理数字和文字，而变量提供存放信息的地方，表达式则可以完成较

4、复杂的信息处理。 【例3-2】JavaScript的变量定义、声明及赋值的演示。如图3-2所示。 其代码如下：, exam3-2.htm var x1=5; x2=7; x3=x1+x2; x4=x1 ,通过这个实例，可以得到JavaScript变量的定义方法和赋值方法等，其语法格式为： var 变量名=数据的值来自 ,3.3.1 基本的数据类型,在JavaScript中四种基本的数据类型为： 数值（整数和实数） 字符串型（用 或 括起来的字符或数值） 布尔型（使用True或False表示） 空值 在JavaScript的基本类型中的数据可以是常量，也可以是变量。由

5、于采用弱类型的形式，因而一个数据的变量或常量不必首先作声明，而是在使用或赋值时才确定其数据的类型。当然也可以先声明该数据的类型，它是通过在赋值时自动说明其数据类型的。来自 ,3.3.2 常量,JavaScript的常量主要有以下几种： 整型常量（又称字面常量，是不能改变的数据。可以使用十六进制、八进制和十进制表示其值） 实型常量（由整数部分加小数部分表示，如13.48、197.99。可以使用科学或标准方法表示：3E6、2e8等） 布尔常量（只有True或False两种值，主要用来说明或代表是或否状态） 字符型常量（使用单引号或双引号括起来的一个或多个字符。如Java

6、Script、1234567890等 空值（即null，表示什么也没有。如试图引用没有定义的变量，则返回一个null值） 特殊字符（同C语言一样，是一些以反斜杠开头的不可显示的特殊字符。通常称为控制字符）来自 ,3.3.3 变量,变量的主要作用是存取数据、提供存放信息的容器。对于变量必须明确变量的命名、变量的类型、变量的声明及其变量的作用域。 JavaScript中的变量命名同其他语言非常相似，不同之处在于： 必须是一个有效的变量，即变量以字母开头，中间可以出现数字如x1、y2等。除下划线外，变量名不能有空格、+、-和其他符号。 不能使用JavaScript中的关键

7、字作为变量。JavaScript定义了40多个关键字，供内部声明用的，如Var、int、double、true等。 在JavaScript中，变量可以用命令Var声明： var mytest;- 定义一个mytest变量，但没有赋予它的值 var mytest=“This is a test”;- 定义一个mytest变量，同时赋予了它的值 在JavaScript中，变量也可以不作声明，而在使用时再根据数据的类型来确定其变量的类型。如： x1=200 x2=345 x3=True x4=12.34等 其中x1为整数，x2为字符串，x3为布尔型，x4为实型。来自 ,3

8、.3.4. 表达式和运算符,在定义完变量后，就可以对它们进行赋值、改变、计算等一系列操作，这一过程通常由表达式来完成，可以说它是变量、常量、布尔及运算符的集合。表达式可以分为算术表达式、字串表达式、赋值表达式及布尔表达式等。 运算符是完成操作的一系列符号，在JavaScript中有： 算术运算符（如+、-、*、/等） 比较运算符（如!=、=等） 逻辑布尔运算符（如!、|、|等） 字串运算符（如+、+=等）来自 ,3.4.1 选择语句,【例3-3】if-else语句的使用。如图3-3所示。 其代码如下：, exam3-3.htm var score=75; if (s

9、core ,通过这个实例，可以得到if-else选择语句结构，其语法格式为： if（条件表达式） 语句段1; else 语句段2; 功能：若条件表达式为true，则执行语句段；否则执行语句段2。 if-else语句是JavaScript中最基本的控制语句。如果有多个分支，则需嵌套使用if-else语句，其语法格式为： if（布尔值）语句1; else（布尔值）语句2; else if（布尔值）语句3; else 语句4; 在这种情况下，每一级的布尔表达式都会被计算，若为真，则执行其相应的语句，否则执行else后的语句。来自 ,3.4.2 循环语句（一）,【例3-4】

10、for循环语句的使用。如图3-4所示。 其代码如下：, exam3-4.htm var n=10,s=0; for(var i=1;i ,通过这个实例，可以得到for循环语句结构，其语法格式为： for（初值;条件;步长表达式） 语句集； 功能：每当进行循环以前都要判断条件，条件为true时，执行语句集，否则跳出循环体，每循环一次计数变量增加或减少步长表达式的值。 初值用来设置计数变量并给它赋值。步长表达式用来说明计数变量的变化规律。三个主要语句之间，必须使用逗号分隔。 for循环是一般目的的循环。而它的一种特殊应用forin循环则用于在对象的所有属性内自动移位，其语法格式为： for（j i

11、n 对象） 语句集； 循环会从0增加j，直到达到该对象中的最后一个属性的下标为止。 来自 ,3.4.2 循环语句（二）,【例3-5】while循环语句的使用。如图3-5-1所示。 其代码如下：, exam3-5.htm var n=10,s=0,i=1; while(i ,通过这个实例，可以得到while循环语句结构，其语法格式为： while（条件） 语句集; break; continue; 功能：每当进行循环以前都要判断条件，条件为true时，执行语句集，否则跳出循环体。其中break语句可以完全终止循环，即使循环没有结束也如此。Continue语句可跳到语句

12、集的第一句进行下一次循环。 若上述代码中，在语句“s=s=i;”后添加语句“if(i=5) break;”，则运行后，浏览器显示如图3-5-2所示。 来自 ,3.5 函数,函数为程序设计人员提供了一个非常方便的能力。通常在进行一个复杂的程序设计时，总是根据所要完成的功能，将程序划分为一些相对独立的部分，每部分编写一个函数。从而，使各部分充分独立，任务单一，程序清晰，易懂、易读、易维护。JavaScript函数可以封装那些在程序中可能要多次用到的模块。并可作为事件驱动的结果而调用的程序。从而实现一个函数把它与事件驱动相关联。这是与其它语言不同的地方。 通常，在进行复杂

13、的程序设计时，总是会发现有些程序段或模块需要多次执行。为了解决此类问题，可以将之定义为一个函数，使之相对独立。JavaScript函数就可以封装那些在程序中可能要多次用到的模块，并可作为事件驱动的结果而调用的程序，从而实现一个函数把它与事件驱动相关联。来自 ,3.5 函数（实例）,【例3-6】函数的定义。如图3-6所示。 其代码如下：, exam3-6.htm function welcome() alert(Hello，欢迎光临本站！); ,通过这个实例，可以得到函数定义的一般格式为： function 函数名(参数1,参数2,) 语句集; 功能：定义一个称为“函

14、数名”的函数。 通常，函数放在HTML文件的头部事先定义，然后被HTML文件部分中的语句调用。需要注意的是： 函数开头必须为关键字function； 函数名是区分大的； 可以通过引用函数名来调用一个函数，同时参数必须放在括号中，用逗号隔开； 在程序结束时必须使用return将值返回。 来自 ,3.6.1 基本概念,1、什么是对象 对象是指世上的任何事物，如汽车、人、计算机等，而在JavaScript语言中，主要是指在计算机中出现的window对象、form对象、date对象以及document对象等。 2、什么是属性和方法 属性是对对象特征的描述，如人的身高、体重等

15、，方法是控制对象动作行为的方式，如人会吃饭、走路等。又如document对象具有属性lastModified和方法write等。 3、什么是事件 事件是指可被一个对象所识别的动作。JavaScript能识别这些动作，并能够建立程序对这些事件进行响应。比如人饿了就要吃饭，我们知道，人是一个对象，饿就是一个事件，而吃饭就是方法。来自 ,3.6.2 常用对象的介绍,1、string对象 属性： length表示字符串中字符个数，包括所有符号。 方法：主要有 锚点anchor()，如同HTML中（a name=）一样； 有关字符显示的控制方法，如big()，small()，

16、italics()，bold()，blink()，fixed()，fontsize(size)等； 字体颜色fontcolor(color)； 字符串大小写转换toLowerCase()和toUpperCase()； 字符搜索indexofcharacter,fromIndex，表示从指定formIndex位置开始搜索character第一次出现的位置； 返回子串substring(start,end)，表示从start开始到end的字符全部返回。来自 ,3.6.2 常用对象的介绍（续上）,2、Date对象 属性：无。 方法： 获取日期和时间，有getYear()、

17、getMonth()、getDate()、getDay()、getHours()、getMintes()、getSeconds()、getTime()等； 设置日期和时间，有setYear()、setMonth()、setDate()、setHours()、setMintes()、setSeconds()、setTime()等。 来自 ,3.6.2 常用对象的介绍（续上）,3、windows对象 windows对象是每个窗口或框架的顶层对象，且是文档、位置及历史对象的父对象。 属性：主要有 frames确定文档中帧的数目，帧作为实现一个窗口的分隔操作，起到非常有用的

18、价值。 Parent指明当前窗口或帧的父窗口。 Defaultstatus默认状态，它的值显示在窗口的状态栏中。 Status包含文档窗口中帧中的当前信息。 Top包括的是用以实现所有的下级窗口的窗口。 Window指的是当前窗口 Self引用当前窗口 方法：主要有 prompt()弹出信息的输入窗口。 Alert()弹出信息的输出窗口。 另外，JavaScript还提供了几个常用的输出方法。如document.write和document.writln()等。来自 ,3.6.3 常用事件的应用,1、Load和Unload事件 Load和Unload事件可以使页面完

19、成下载时生成Load事件，同样，当退出页面时可以发生Unload事件。OnLoad和onUnload事件处理程序能够使JavaScript命令在相应的时间内执行。它们可以控制一些活动的起始时间。 2、Click事件 Click事件和onClick事件处理程序用于单击按钮和链接的地方时执行JavaScript命令。该事件通常在下列基本对象中产生： （1）button（按钮对象） （2）checkbox（复选框）或（检查列表框） （3）radio（单选按钮） （4）reset button（重置按钮） （5）submit button（提交按钮） 例如： 在onChick等号后，可以使用自己编写的

20、函数作为事件处理程序，也可以使用JavaScript中的内部函数。同时，还可以直接使用JavaScript的代码等。又如前面例子中： 来自 ,3.6.3 常用事件的应用（续上）,3、MouseOver事件 通常，当我们将鼠标放到链接上面移动后，则产生MouseOver事件来表达即将要发生的情况。具体在后面的综合实例中做详细介绍。 4、Change事件 一般来说，Change事件与onChange事件处理程序用于当正在进行的动作改变时执行JavaScript命令。比如说，当利用text或textarea元素输入字符值改变时引发该事件，同时当在select表格项中一个选

21、项状态改变后也会引发该事件，例如： 5、onFocus事件和onBlur事件 当用户单击text对象或textarea对象以及select对象时，产生onFocus事件，此时使该对象成为当前对象。而当text对象或textarea对象以及select对象不再拥有焦点时，则该对象退到后台，引发该onBlur事件，它与onFocus事件是对应的关系。 来自 ,3.7.1 页面交互功能的应用,【例3-7】通过用户的输入，显示用户的信息。如图3-7-1、图3-7-2所示。 其代码如下：, exam3-7.htm function getname(str) alert(Hello，+str+ 欢迎光临本