[计算机软件及应用]JavaScript技术-v课件.ppt

1、Javascript概述Javascript语法Javascript对象及事件关键对象及客户端验证正则表达式Javascript特效脚本语言运行机制 脚本是一种能够完成某些功能的小程序段。这些程序段在程序运行过程中被逐行解释执行，脚本语言可嵌入HTML页面，并被浏览器解释执行。 服务器端脚本：在服务器上运行的脚本程序 客户端脚本：在客户机上运行的脚本程序公司公司类型类型语法风格语法风格JavaSun半编译半编译半解释型半解释型强类型语言，强类型语言，语法比较严谨语法比较严谨JavaScript Netscape解释型解释型比较自由比较自由 在网页中引入JavaScript，只需加入元素，然后再

2、设置所用语言即可。例如： document.write(欢迎进入Web世界，建立自己的网站！); alert(我跳出来了！); 注意：JavaScript区分大小写，而HTML不区分大小写。 代码说明(1)“ onsubmit=”return checkform(this)” 鼠标点击submit事件onclick=“ChangeImage()”,onclick 鼠标事件,鼠标左键在部件上单击时发生,完成赋值号右边操作ChangeImage() (2) 和标记把脚本程序嵌入页面，浏览器遇到script标记，将脚本程序交付脚本引擎执行。标记的使用格式： JavaScript或VBScript程序

3、源代码标记位于和标记之间，在标记中的脚本段将在页面主体(即在标记中的内容)被浏览器载入之前解释执行。 标记位于和标记之间时,这一段脚本程序将在HTML文档被浏览器载入过程中被解释执行属性language是script标记的必须指定的基本属性。一般被指定为JavaScript或VBScript。 脚本代码放在HTML的注释标记之间，这样做既不影响支持脚本的浏览器正确解释执行脚本程序；也可以使不支持脚本的浏览器把这段程序当作注释而旁路掉。JavaSrcipt是一种高级的脚本语言，它具有以下3个优点： （1）JavaScript采用在HTML文本中嵌入小程序段的方式，开发过程非常简单，并且提高了响应

4、速度。（2）JavaScript可以直接对用户或者客户的输入做出响应，而不需要经过Web服务器的程序，减少了客户浏览器与服务器之间的通信量、提高了速度。（3）JavaScript是一种与平台无关的解释性脚本语言，依赖于浏览器，而与操作系统无关，只要计算机能运行浏览器，而且该浏览器支持JavaScript，就可以执行JavaScript脚本程序。 Javascript概述Javascript语法Javascript对象及事件关键对象及客户端验证正则表达式Javascript特效1. JavaScript嵌入HTML文件语法规则：JavaScript代码language 默认值：JavaScrip

5、tJavaScript基本语法2. 将JavaScript调入HTML文件 将代码以扩展名“.js”单独存放，再用标记的 “src”属性把该代码调入HTML文档。语法规则：JavaScript书写格式区分大小写 没有可见行结束标志，用换行符作为一行终止符。 C语言、C和Java语言中，使用分号(;)作一行的结束标志。如果需要把几行代码写在一行，使用分号(;) 分开。 var a=3 var b=6 var c=0var a=3; b=6; c=0为了使程序清晰易读，采用缩进格式来书写。可以用两种方法进行注释。注释方法与C相同。 /：从注释标记“/”起直到行尾的字符都被忽略。 /* */：在“/

6、*”与“*/”之间的字符都被忽略。数据类型 在JavaScript语言中，常见的数据类型有：Number：数值型 ，该类型包含整数和浮点数。整数可以为正整数或负整数，浮点数可以包括小数点，如“5.33” 或“7E-2” string ：字符串型，字符串数据应加上单引号或双引号boolean：布尔型，可以为true或false两个值object：对象型，该类型是JavaScript的重要组成部分变量 JavaScript中的数据也分为常量和变量。JavaScript对变量的数据类型要求并不严格，可以不必声明每一个变量的类型。例如：var isBanana = false; 变量命名需要遵守以下5

7、个规则： （1）变量命名必须以一个英文字母或是下划线为开头，也就是变 量名第一字符必须是A到Z或a到z之间的字母，或是“_”。（2）变量名长度在0255字符之间。（3）除了首字符，其他字符可以使用任何字符、数字或下划线， 但不能使用空格。（4）不能使用JavaScript用的保留字。（5）不能使用JavaScript的运算符。 数组 数组就是由一组数值按照顺序排列在一起，并放在同一个变量中，而每个数值都可以通过索引得到数组中所存储的信息。例如：var arrUserInfo = new Array(2) 声明数组时，使用new和Array关键字。new代表建立一个新的对象，Array是Java

8、Script内置的一个对象，由于JavaScript区分大小写，因此Array的首字母必须是大写。第一个数索引下标是0 。 返回函数定义语句 JavaScript函数定义格式如下： function 函数名称(参数) 函数执行部分 return 表达式 return语句表示函数的返回值，如果没有返回值可以省略。通过JavaScript函数格式定义一个函数的代码如下： function xieyg()alert(“欢迎来到北京科技大学！”) 开始开始语句语句1语句语句2结束结束顺序结构顺序结构条件语句 条件语句通过ifelse用来完成程序流程块中的分支功能，具体格式如下： if(条件)执行语句1

9、else执行语句2 在上述代码中，如果条件成立，则执行语句1，否则执行语句2。 单分支选择和双分支选择结构单分支选择和双分支选择结构语句语句1语句语句2结束结束开始开始逻辑条件逻辑条件truefalse开始开始逻辑条件逻辑条件truefalse语句语句1结束结束false条件条件1语句语句1truefalse开始开始语句语句2true条件条件2false条件条件3语句语句3true条件条件nfalse语句语句ntrue语句语句n+1结束结束多分支选择结构多分支选择结构分支语句 分支语句switch是根据一个表达式取值的不同而采用不同的处理方法，具体格式如下： switch(表达式)case 1

10、:执行语句1;case 2:执行语句2;case 3:执行语句3; 在上述代码中，表达式的值与case值都不匹配，将执行省略号后面的语句。 循环语句 在JavaScript语言中，循环语句包含for语句、fonin语句及while语句。 for(变量初始化;条件;更新变量)执行语句; （1）for语句 for语句功能是只要循环条件成立，就反复执行循环体中的语句，具体格式如下： 循环结构循环结构当型循环当型循环开始开始逻辑条件逻辑条件truefalse循环体循环体结束结束直到型循环直到型循环开始开始逻辑条件逻辑条件truefalse循环体循环体结束结束循环语句 for(变量 in 对象或数组)执

11、行语句; （2）forin语句 forin语句与for语句相似，不同的是forin循环的范围是一个对象的所有属性或是一个数组中的所有元素，具体格式如下： while(条件)执行语句 （3）while语句 while语句中的条件如果始终成立，则一直循环下去，直到条件不再成立。该语句具体格式如下： 返回Javascript概述Javascript语法Javascript对象及事件关键对象及客户端验证正则表达式Javascript特效时间对象Date var date=new Date() Date对象是JavaScript中非常重要的对象，Date对象的主要作用是获取当前的系统时间，使用该对象必须

12、使用关键字new来创建。例如： Date对象的方法见下表 ：名称含义名称含义getYear()/setYear()获取或赋值当前的年份getMonth()/setMonth()获取或赋值当前的月份getDate()/setDate()获取或赋值当前的日期getDay()/setDay()获取或赋值当前的星期getHours()/setHours()获取或赋值当前的小时getMinutes()/setMinutes()获取或赋值当前的分钟getSeconds()/setSeconds()获取或赋值当前的秒getTime()/setTime()获取或赋值当前的时间（以毫秒为单位）数学对象Math

13、Math对象可以用来处理各种数学运算。Math对象的内置方法定义了各种数学运行，可以直接调用。Math对象的方法见下表：名称含义名称含义abs(x)返回x的绝对值acos(x)返回x的反余弦值asin(x)返回x的反正弦值atan(x)返回x的反正切值ceil(x)返回大于或等于x的最小整数cos(x)返回x的余弦值exp(x)返回e的x次方floor(x)返回小于或等于x的最大整数Max(x,y)返回x、y中的最大值min(x,y)返回x、y中的最小值pow(x,y)返回x的y次方round(x)返回x的整数部分sin(x)返回x的正弦值sqrt(x)返回x的平方根tan(x)返回x的正切值

14、 字符串对象String String是字符串对象，也是使用较多的对象，该对象只有一个属性：length属性表示字符串中包含的字符数目。String对象常用的方法如下：名称含义名称含义big()设置字符串为大字体small()设置字符串为小字体italics()设置字体为斜体fixed()设置固定字体bold()设置字体为粗体substring()获取自start到end的子串toUpperCase()转换字符串为大写toLowerCase()转换字符串为小写fontsize(size)设置字体的大小，参数size为整数，数越大字体就越大fontcolor(color)设置字体的颜色，参数co

15、lor可以使用bule、red等表示，也可以使用ff0233等6位十六进制数表示indexOf(char,start)在字符串中从start处开始查找第一出现的char字符，并返回其位置返回 事件就是由某个对象发出的消息，这个消息标志着某个特定的行为发生，或某个特定的条件成立。例如，单击鼠标、单击按钮或者打开窗口时，都会触发相应的事件。 当用户单击鼠标按钮时，产生onClick事件。同时onClick指定的事件处理程序或代码将被调用执行。鼠标单击事件 鼠标单击事件是常见的事件，事件对应的方法名是onclick，具体使用格式如下： 例如 ： onclick=函数或处理语句 程序运行结果如图所示

16、：下拉列表事件 下拉列表是常用的一种HTML元素，通常情况下，利用onChange事件来处理，具体使用格式如下： 例如 ：北京上海天津重庆 onChange=函数或处理语句 程序运行结果如图所示 ：判断输入框是否为空 在进行“注册”或“登录”操作时，需要校验表单中输入框是否为空。这时，可以利用元素中的onsubmit属性进行设置，该事件用于发生在表单的“提交”按钮被单击（按下并放开）时，可以使用该事件来验证表单的有效性。通过在事件处理程序中返回false值（return false）可以阻止表单提交。例如：function userCheck() /校验用户名表单是否为空 if (document.form1.username.value = ) window.alert(“请输入用户名”); return false; 如果表单中用户名为空，运行结果如图所示：返回Javascript概述Javascript语法Javascript对象及事件关键对象及客户端验证正则表达式Javascript特效Javascript概述Javascript语法Javascript对象及事件关键对象及客户端验证正则表达式Javascript特效Javascript概述Javascript语法Javascript对象及事件关键对象及客户端验证正则表达式Javascript特效