JavaScript教案

JavaScript教案 JSP基础课程JavaScript语言本章目标?了解JavaScript的与Java的区别理解JavaScript的使用理解JavaScript的基本语法理解JavaScript的基本对象理解JavaScript的事件处理JavaScript应用JavaScript是一种基于对象(Object)和事件驱动(Event Driven)的脚本语言。 使用它的目的是与HTML超文本标记语言、Java Applet一起实现在一个Web页面中链接多个对象，与Web客户交互作用。 从而可以开发客户端的应用程序等。 它是通过嵌入或调入在标准的HTML语言中实现的。 它的出现弥补了HTML语言的缺陷，它是Java与HTML折衷的选择。 JavaScript和Java的区别两个公司开发的不同的两个产品Java是SUN公司推出的新一代面向对象的程序设计语言，特别适合于Inter应用程序开发,前身是Oak语言。 JavaScript是Netscape公司的产品，是为了扩展Netscape Navigator功能,而开发的一种可以嵌入Web页面中的基于对象和事件驱动的解释性语言,它的前身是Live Script。 JavaScript的特点?使网页增加互动性。 ?使有规律重复的HTML文段简化，减少下载时间。 ?能及时响应用户的操作，对提交表单做即时的检查，无需浪费时间交由服务器验证。 ?特点是无穷无尽的，只要你有创意。 在什么地方插入JavaScript？JavaScript可以出现在HTML的任意地方。 使用标记 ，可以在HTML文档的任意地方插入JavaScript，甚至在之前插入也不成问题。 不过如果要在声明框架的网页（框架网页）中插入，就一定要在之前插入，否则不会运行。 编写第一个JavaScript程序使用language=“JavaScript”属性 编写第一个JavaScript程序使用language=“JavaScript”属性 在HTML中，JavaScript源码用中注释，其好处为对于不能解释的浏览器不执行代码，而对于可以解释JavaScript的浏览器不会受到任何妨碍。 使用两种不同方式进行输出 HTML页面中JavaScript代码位置 JavaScript中的变量?变量的命名变量的命名有以下要求只包含字母、数字和下划线；要以字母开头；不能太长；不能与JavaScript保留字重复。 ?变量区分大小写例如，variable和Variable是两个不同的变量。 ?变量需要声明没有声明的变量不能使用，否则会出错“未定义”。 声明变量可以用var=JavaScript中的变量 注释?JavaScript注释有两种单行注释和多行注释。 单行注释用双反斜杠“/”表示。 当一行代码有“/”，那么，“/”后面的部分将被忽略。 多行注释是用“/*”和“*/”括起来的一行到多行文字。 程序执行到“/*”处，将忽略以后的所有文字，直到出现“*/”为止。 函数的使用函数有返回值的对象或对象的方法。 函数的分类构造函数全局函数自定义函数定义函数用以下语句function函数名(参数集)return;例function addAll(a,b,c)return a+b+c;var total=addAll(3,4,5);函数的使用 OnLoad()当打开一个网页时自动执行OnLoad()事件OnUnLoad()当关闭一个网页时自动执行OnUnLoad事件函数的使用 JavaScript中形参个数/一个参数/两个参数/三个参数/四个参数JavaScript中全局变量的使用 变量的作用域 逻辑运算符 三目运算符的使用 选择结构的使用if语句if()else;是布尔值，必须用小括号括起来；和都只能是一个语句，欲使用多条语句，请用语句块。 例if(a=1)if(b=0)alert(a+b);elsealert(a-b); 选择结构的使用switch结构的使用?switch语句是解决多种条件判断的最好方法。 ?switch(e)case r1:（注意冒号）.break;case r2:.break;.default:. switch结构的使用循环结构 使用JavaScript实现简单交互 使用JavaScript实现简单交互 事件处理的过程可以这样表示发生事件-启动事件处理程序-事件处理程序作出反应。 其中，要使事件处理程序能够启动，必须先告诉对象，如果发生了什么事情，要启动什么处理程序，否则这个流程就不能进行下去。 事件的处理程序可以是任意JavaScript语句，但是我们一般用特定的自定义函数（function）来处理。 事件处理指定事件处理程序方法一直接在HTML标记中指定。 方法例这样的定义标记，能使文档读取完毕的时候弹出一个对话框，写着“网页读取完成，请慢慢欣赏”；在用户退出文档（或者关闭窗口，或者到另一个页面去）的时候弹出“再见”。 事件处理方法二编写特定对象特定事件的JavaScript。 这种方法用得比较少，但是在某些场合还是很好用的。 方法是 例 事件处理方法三在JavaScript中说明。 方法.=;用这种方法要注意的是，“事件处理程序”是真正的代码，而不是字符串形式的代码。 如果事件处理程序是一个自定义函数，如无使用参数的需要，就不要加“()”。 例（见后页）事件处理.function ignoreError()return true;.window.onerror=ignoreError;/没有使用“()”这个例子将ignoreError()函数定义为window对象的onerror事件的处理程序。 它的效果是忽略该window对象下任何错误（由引用不允许访问的location对象产生的“没有权限”错误是不能忽略的）。 事件处理事件详解onBlur事件发生在窗口失去焦点的时候。 应用于window对象onChange事件发生在文本输入区的内容被更改，然后焦点从文本输入区移走之后。 捕捉此事件主要用于实时检测输入的有效性，或者立刻改变文档内容。 应用于Password对象；Select对象；Text对象；Textarea对象事件处理onclick事件发生在对象被单击的时候。 单击是指鼠标停留在对象上，按下鼠标键，没有移动鼠标而放开鼠标键这一个完整的过程。 一个普通按钮对象（Button）通常会有onclick事件处理程序。 按钮上添加onclick事件处理程序，可以模拟“另一个提交按钮”，方法是在事件处理程序中更改表单的action,target,encoding,method等一个或几个属性，然后调用表单的submit()方法。 在Link对象的onclick事件处理程序中返回false值（return false），能阻止浏览器打开此连接。 应用于Button对象；Checkbox对象；Image对象；Link对象；Radio对象；Reset对象；Submit对象事件处理onError事件发生在错误发生的时候。 它的事件处理程序通常就叫做“错误处理程序”(Error Handler)，用来处理错误。 上边已经介绍过，要忽略一切错误，就使用function ignoreError()return true;window.onerror=ignoreError;应用于window对象onfocus事件发生在窗口得到焦点的时候。 应用于window对象事件处理onLoad事件发生在文档全部下载完毕的时候。 全部下载完毕意味着不但HTML文件，而且包含的图片，插件，控件，小程序等全部内容都下载完毕。 本事件是window的事件，但是在HTML中指定事件处理程序的时候，我们是把它写在标记中的。 应用于window对象onMouseDown事件发生在用户把鼠标放在对象上按下鼠标键的时候。 参考onmouseup事件。 应用于Button对象；Link对象onMouseOut事件发生在鼠标离开对象的时候。 参考onmouseover事件。 应用于Link对象事件处理onMouseOver事件发生在鼠标进入对象范围的时候。 这个事件和onmouseout事件，再加上图片的预读，就可以做到当鼠标移到图像连接上，图像更改的效果了。 有时我们看到，在指向一个连接时，状态栏上不显示地址，而显示其它的资料，看起来这些资料是可以随时更改的。 它们是这样做出来的应用于Link对象事件处理onMouseUp事件发生在用户把鼠标放在对象上鼠标键被按下的情况下，放开鼠标键的时候。 如果按下鼠标键的时候，鼠标并不在放开鼠标的对象上，则本事件不会发生。 应用于Button对象；Link对象onReset事件发生在表单的“重置”按钮被单击（按下并放开）的时候。 通过在事件处理程序中返回false值（return false）可以阻止表单重置。 应用于Form对象事件处理onResize事件发生在窗口被调整大小的时候。 应用于window对象onSubmit事