《JavaScript语言》PPT课件.ppt

第五章 JavaScript语言,第一节 JavaScript简介,JavaScript是一种脚本语言，同时也是 一种解释性语言； 它不像C、C+、VB等语言需要先编译，而是在程序运行过程中被逐行地解释。 它与HTML标识结合在一起，从而弥补了HTML语言的缺陷。 JavaScript程序代码在描述页面的HTML相关区域中出现。由 .说明。 在标识.之间就可加入JavaScript脚本。, / JavaScript 出现在这里 alert(这是第一个JavaScript例子!); alert(欢迎你进入JavaScript世界!); alert(今后我们将共同学习JavaScript知识！); ,第一节 JavaScript简介,第一节 JavaScript简介, Demo4 JavaScript 能够直接写入 HTML 输出流中： document.write(这段文字用标题1控制); document.write(这时一个段落。); ,第二节 JavaScript的基本数据类型,1基本数据类型 在JavaScript中四种基本的数据类型：数值（整数和实数）、字符串型（用“”号或括起来的字符或数值）、布尔型（取True或False值）和空值。 2常量 整型常量 实型常量 布尔值 字符型常量 空值 特殊字符,第二节 JavaScript的基本数据类型,3变量 (1)变量的命名 JavaScript中的变量命名同其他计算机语言非常相似，这里要注意以下两点： 第一，必须是一个有效的变量名，即变量名以字母开头，中间可以出现数字。 第二，不能使用JavaScript中的关键字作为变量。,第二节 JavaScript的基本数据类型,（2）变量的类型 在JavaScript中，变量可以用命令var作声明。如： var mytest; var mytest=“this is a book”; 变量也以可以不作声明，而在使用时再根据数据的类型来确其变量的类型。如： X=100; Y=“125” Xy=true; Cost=19.5,第二节 JavaScript的基本数据类型,（3）变量的声明及其作用域 JavaScript变量可以在使用前通过var命令声明。声明变量的最大好处就是能及时发现代码中的错误。 在JavaScript中同样有全局变量和局部变量。 全局变量是定义在所有函数体之外，其作用范围是整个函数； 局部变量是定义在函数体之内，只对其该函数是可见的，而对其它函数则是不可见的。,第二节 JavaScript的基本数据类型,变量声明示范： var firstname; firstname=mary; document.write(firstname); document.write(); firstname=tom; document.write(firstname); ,第三节 表达式和运算符,1表达式 在表达式可以分为算术表述式、字串表达式、赋值表达式以及布尔表达式等。 2运算符 在JavaScript中有算术运算符、比较运算符、布尔逻辑运算符、字串运算符。 （）算术运算符 双目运算符：,第三节 表达式和运算符,单目运算符： （）比较运算符 比较运算符它的基本操作过程是，首先对它的操作数进行比较，尔后再返回一个true或False值，有6个比较运算符:,第三节 表达式和运算符,（）布尔逻辑运算符 在JavaScript中增加了几个布尔逻辑运算符:,第四节 程序控制流,、if条件语句 基本格式 if（表述式） 语句段； . else 语句段； . 功能：若表达式为true，则执行语句段；否则执行语句段。,第四节 程序控制流,If语句示范： var d=new Date(); var time=d.getHours(); if (time6) document.write(早上好！); else document.write(祝你快乐！); ,第四节 程序控制流,if语句的嵌套 if（布尔值）语句； else if（布尔值）语句； else if（布尔值）语句； else 语句；,第四节 程序控制流,、For循环语句 基本格式： for（初始化；条件；增量） 语句集； 功能：实现条件循环，当条件成立时，执行语句集，否则跳出循环体。,第四节 程序控制流,For语句示范： for(i=0;i); ,第四节 程序控制流,、while循环 基本格式 while（条件） 语句集； 该语句与For语句一样，当条件为真时，重复循环，否则退出循环,第四节 程序控制流,4、break和continue语句 使用break语句使得循环从For或while中跳出，continue使得跳过循环内剩余的语句而进入下一次循环。 如 for(i=1;i) ,第四节 程序控制流,5、函数 函数定义格式： function 函数名（形参表） 函数体; return 表达式; 通过指定函数名（实参表）来调用一个函数，函数名对大小写是敏感的。 如： function f1() return(welcome!); document.write(f1(); ,第五节 事件驱动及事件处理,1基本概念 通常鼠标或热键的动作我们称之为事件，而由鼠标或热键引发的一连串程序的动作，称之为事件驱动。而对事件进行处理程序或调用函数，我们称之为事件处理程序。 2事件处理程序 在JavaScript中对象事件的处理通常由函数担任。其基本格式与函数完全相同。 Function 事件处理名（参数表） 事件处理语句集; ,第五节 事件驱动及事件处理,3事件驱动 （1）单击事件onClick 当用户单击鼠标时，产生onclick事件，同时onClick指定的事件处理程序或代码将被调用执行。 单击事件通常在下列基本对象中产生：button、checkbox、radio、reset、submit； 如： ,第五节 事件驱动及事件处理,（2）改变事件onChange 当利用text或textarea元素输入的字符值改变时引发该事件，或者当select表格项中的一个选项状态改变后也会引发该事件。 如： （3）选中事件onSelect 当text或textarea对象中的文字被加亮后，引发该事件。,第五节 事件驱动及事件处理,（4）获得焦点事件onFocus 当用户单击text、textarea或select对象时，引发该事件。 （5）失去焦点onBlur 当text、textarea或select对象不再拥有焦点而退到后台时，引发该事件。 （6）载入文件onLoad 当载入文件时，引发该事件。 （7）卸载文件onUnload 当Web页面退出时引发该事件。,第五节 事件驱动及事件处理,OnDblclick：在页面中双击使用行为的特定元素（文本、按钮或图像）时，就会触发该事件。 OnError：当浏览器下载页面或图像发生错误时触发该事件。 OnKeydown：当用户在浏览网页时，按下一个键后且尚未释放该键时，就会触发该事件。该事件常与“onKeydown”与“onKeyup”事件组合使用。 OnKeyup：当用户浏览网页时，按下一个键后又释放该键时，就会触发该事件。,第五节 事件驱动及事件处理,OnMouseDown：浏览网页时，单击网页中建立行为的元素且尚未释放鼠标之前，就会触发该事件。 OnMousemove：在浏览器中，当用户将光标在使用行为的元素上移动时，就会触发该事件。 OnMouseover：在浏览器中，当用户将鼠标指向一个使用行为的元素时，就会触发该事件。 OnMouseout：在浏览器中，当用户将光标从建立行为的元素移出后，就会触发该事件。 OnMouseup：在浏览器中，当用户在使用行为的元素上按下鼠标并释放后，就会触发该事件。,在Dreamweaver中使用行为,在Dreamweaver中添加行为的3个步骤： 选择对象 添加动作 调整事件,1、制作层特效,改变属性,1、制作层特效,显示隐藏层,1、制作层特效,拖动层 注意： 选中body标记，添加行为 鼠标事件为onmousedown,2、制作时间轴动画,3、控制时间轴,4、弹出信息,使用弹出信息动作，在事件发生时弹出一个事先指定好的信息提示框，可以为浏览者提供信息，该提示框只有一个“确定”按钮。下面以网页中的按钮为例，单击按钮，弹出信息提示框，单击信息提示框的“确定”按钮，信息提示框关闭。具体操作步骤如下：,5、打开浏览器窗口,使用打开浏览器窗口动作，可以在事件发生时打开一个新浏览器窗口。用户可以设置新窗口的各种属性，如窗口名称、大小等。注意：选择body标记作为对象，事件设置为onload。,6、检查表单,在具有表单的页面中，使用检查表单动作可以验证表单域中输入数据的合法性。使用“OnBlur”事件可以将动作使用于单个文本域，当用户填写完该文本框的内容后立即进行验证。也可以使用“OnSubmit”事件将动作使用于整个表单，当用户单击“提交”按钮提交表单时，对表单中的多个文本域的数据进行验证。（对象选择form标记）,7、交换图像,使用交换图像动作，可以在页面中添加交替显示的图像。例如当鼠标移至设置了行为的图像上时，显示其他的图像，鼠标移开则恢复最初的图像。,8、设置导航栏图像,使用“设置导航栏图像”动作可将某个图像设为导航栏图像，还可以更改导航栏图像的显示和动作。,9、弹出式菜单,