《We编程开发基础(JavaScript)课件》由会员分享，可在线阅读，更多相关《We编程开发基础(JavaScript)课件（42页珍藏版）》请在金锄头文库上搜索。
1、Web编程开发基础(JavaScript),JavaScript介绍,JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言； JavaScript旨在使网页开发人员能对网页的功能进行管理和控制； 学习JavaScript基于： 表单验证 页面动态效果,简单易用 简洁易用，与Java有类似的语法 可以使用任何文本编辑工具编写 只需要浏览器就可以执行程序 解释执行 事先不编译 逐行执行 无需进行严格的变量声明 基于对象 内置大量现成对象，编写少量程序可以完成目标,JavaScript的特点,适合做哪些事情 客户端数据计算 客户端表单合法性验证 浏览器对象的调用 浏览器事件的
2、触发 网页特殊显示效果制作 不适合做哪些事情 大型应用程序 图像、多媒体处理 网络实时通讯应用,JavaScript的特点,JavaScript介绍,Web三层结构 JavaScript编程 文档访问 CSS样式特效 事件 表单,Web三层结构,用户体验的丰富程度,Web三层结构,用HTML设置内容 在网页中需要阅读和理解的内容都应该放在改页面的HTML代码中； HTML文档应包括负责传递页面内容的意思或语义的所有信息，但要避免出现与这些内容展现效果先关的信息；,Web三层结构,CSS描述页面展现效果 页面的展现效果应该全部通过页面的CSS代码来进行完整的描述； CSS样式应用到网页中有3中方
3、式： 内联样式 嵌入样式 外部样式,Web三层结构,JavaScript实现行为 JavaScript添加到网页中方法： 可以在HTML中直接嵌入JavaScript代码； 在HTML文档头部通过标签嵌入代码； 将JavaScript代码放在一个独立的文件中，然后再需要使用该代码的多个HTML文档中连接该文件；,JavaScript编程,Script标签 language=“JavaScript” 可以出现在Head中，也可以出现在Body体内 注释 在Script标签内的JavaScript代码一般用HTML的注释括起来，防止浏览器不支持Script标签而造成显示错误 JavaScript语
4、言自身的注释为/*.*/,JavaScript基本语法,变量 JavaScript是一门弱类型的语言，所有的变量定义均以var来实现 JavaScript的变量建议先定义，再使用 JavaScript区分大小写 虽然JavaScript可以不需定义即可直接使用变量，但不建议这么做 数组定义 var arr = new Array(3); 通过arr.length取得数组的长度 注释的写法和java的一样,数组,使用方式： myarray=new Array(num) myarray=new Array(value1,value2) aa = new Array(3); aa20 = 444;
5、document.write (aa20); num不设定，则按数组默认的最大长度自动设定。例如： aa = new Array(); aa20 = 444; document.write (aa.length); ,JavaScript基本语法运算符,算术运算 +、-、*、/ 、=、=、= (7.htm) 逻辑运算 与： 日期起始值:9年月日: 主要方法 getYear(): 返回年数 setYear(): 设置年数 getMonth(): 返回月数 setMonth():设置月数 getDate(): 返回日数 setDate():设置日数 getDay(): 返回星期几 setDay()
6、:设置星期数 getHours():返回小时数 setHours():设置小时数 getMinutes():返回分钟数 setMintes():设置分钟数 getSeconds():返回秒数 setSeconds():设置秒数 getTime() : 返回毫秒数 setTime() :设置毫秒数,函数(一),函数定义 function f(形参列表)语句 f是函数名，参数之间用“,”分隔 函数不能嵌套定义 函数调用 f(实参列表) 函数可以互相调用 没有参数时，()不能少,函数(二),形参和实参 函数定义时的参数是形参 函数调用时的参数是实参 形参一定是变量 实参可以是任意表达式 对形参的修改
7、不影响实参,函数(三),函数的返回值 return语句 return x或return(x) 函数的返回值可以象变量一样参与运算，但不能被赋值 系统预定义的函数 主要是各种系统预定义对象中的函数,JavaScript编程,注释 单行注释 以/开始 多行注释 以/*开始，*/结束 类型转化 基本类型转换 从一个值中提取另一种类型值 parseInt（） parseFloat（）,JavaScript编程,对象 对象实际上就是属性和方法的集合； 属性只是能通过对象访问的变量，方法是只能通过对象访问的函数； 对象所包含的属性和方法都只能通过对象来访问，通过javaScript中的对象可以对程序的管理
8、变得更加容易； 变量名以小写字母开头，对象名以大写字母开头；var Ob = new object（）；,文档访问,浏览器把对HTML代码的解释作为一种JavaScript对象结构存储起来，这种结构就称为文档对象模型，简称DOM; 在DOM中，HTML文档的每一个元素都是一个对象，属性和文本也都是对象，JavaScript能够独立访问每个对象，通过使用内建的函数也能轻松地发现或改变所需要的对象；,文档访问,浏览器对象的分层结构,文档访问,Window对象介绍,文档访问,定时器函数 该方法表示每隔多长时间，循环调用某个函数； 语法格式 setTimeout（”disptime()”,1000）,
9、setTimeout(),补充： setInterval（）；,文档访问,History对象 History对象是通过JavaScript运行时引擎自动创建的，并且是由一系列URLS组成的； 方法 Back（） Forward（） Go（） Location对象 History对象是通过JavaScript运行时引擎自动创建的，包含了关于当前URL地址的信息；,文档访问,Document对象 Document对象表示给定浏览器窗口中的HTML文档； 常用方法：,文档访问,操作元素属性 属性主要用于读取和修改与元素相关的数据 获取属性值 getAttribute() 设置属性值 setAttri
10、bute（）,CSS样式特效,通过DOM可以修改页面中的各种内容，当然也包括页面的样式； 每个元素都有一个style属性，style属性是一个功能强大的对象，应用该属性可以从各个方面来改变元素的显示效果； 对于元素中所应用的各个CSS属性，style中都有一个相应的属性，通过它就可以修改该属性的值；,CSS样式特效,用JavaScript改变元素显示效果的最佳方法是修改样式类： 实现了页面行为与样式的分离； 修改样式时无须查找整个JavaScript文件； 修改样式的工作应该由样式的设计人员而不是JavaScript程序员来完成； 在CSS中编写样式将更加简洁；,CSS样式特效,层的显示/隐藏
11、特效 用到CSS样式中的display属性，它主要用来控制页面中的元素（如层，图片，表格，段落等）是否显示，从而实现页面中元素的显示和隐藏效果。 Object.style.display=“value”; Value取值 Block None inline,CSS样式特效,Display指定区域是否在浏览器中显示，设置为display：none的对象根本就不会显示，在页面中仿佛没有该对象一样； Visibility指定区域是否可见，设置visibility ：didden的对象仍占据着页面的空间，知识该空间看上去是空的。,事件,JavaScript是一种基于对象和事件驱动并具有相对安全性的客户
12、端脚本语言； 事件句柄是通过JavaScript代码响应事件的最简单的方式； 事件句柄是一个JavaScript函数，该函数将”插接”在一个DOM节点上，当发生与该元素相关的特定事件时该函数就能自动调用。,JavaScript事件处理,onFocus：在用户为了输入而选择select、text、textarea等时 (onFocus.htm) onBlur：在select、text、password、textarea失去焦点时 (onBlur.htm) onChange：在select、text、textarea的值被改变且失去焦点时 (onChange.htm/SelectionChange
13、.htm) onClick：在一个对象被鼠标点中时（button,checkbox,radio,link,reset,submit,text,textarea等） (onClick.htm),onLoad：出现在一个文档完成对一个窗口的载入时 (onLoad.htm) onUnload：当用户退出一个文档时 (onload.htm) onMouseOver：鼠标被移动到一个对象上时 (onMouse.htm) onMouseOut：鼠标从一个对象上移开时 (onMouse.htm) onSelect：当form对象中的内容被选中时 (onSelect.htm) onSubmit：出现在用户通过
14、提交按钮提交一个表单时 (onSubmit.htm),JavaScript事件处理,表单验证,为什么需要表单 避免信息无法更新或出现新错误； 减轻服务器端的压力； 客户端验证实际上就是包含在已下载的页面中，当用户提交表单的时候，它直接在已下载到本地的页面中调用脚本来进行验证，这样可以减少服务器端的运算。,表单验证,表单验证的内容 检查表单元素是否为空； 验证是否为数字； 验证用户输入的邮件地址是否有效； 检查用户输入的数据是否在某个范围； 验证用户输入的信息长度是否足够； 检查用户输入的出生日期是否有效；,表单验证,String对象,表单验证,文本框对象的事件处理程序,表单验证,数组介绍,趣味
15、JavaScript程序,黑客帝国(ex1/matrix.htm) 鼠标跟随(ex2/mouseTrace.htm) 找相同图片游戏(ex1/game/game.htm) 飘浮的云(ex1/floating.htm) 打字效果(ex1/printer.htm) TicTacToe游戏(ex1/tictactoe.htm) 星球大战(ex1/starcraft/),实用JavaScript程序,图片下拉列表(ex2/DropDown/) 相互关联的列表(ex2/relative.htm) 抽屉式菜单(ex2/drawer.htm) 滑入式菜单（ex2/slip.htm） 滚动下拉菜单 (ex2/pulldown.htm) 日历(ex2/calendar) 输入判断js函数(ex2/pd.*) window.open教程(window.open.htm),
