第8章 JavaScript在项目中.ppt

第8章 JavaScript在项目中的应用 制作：张兴科 技能目标 能正确使用JavaScript的内置对象并进行客户端数据的验证控制。 知识目标 了解JavaScript基本知识； 掌握JavaScript的常用内置对象及用法； 掌握JavaScript中的事件驱动机制。 依托任务 在用户的注册、登录网页中需要用户输入一些数据，为减少网络的数据传输量，常常要求在客户端完成最基本的输入数据的验证。 1. JavaScript概述 通过在浏览器中运行JavaScript可以实现对客户端的控制，例如进行表单验证、生成客户端特效等，从而减少网络流量，减轻服务器的负担。 创建JSP动态网页时，如何对用户通过HTML表单输入的数据进行有效性验证是开发人员需要解决的一个重要问题。例如，必填字段是否输入了内容，输入的数据是否在指定的范围内，密码和确认密码是否相同，电话号码、邮政编码以及电子邮件地址的格式是否正确，等等。通过编写JavaScript客户端脚本可以对用户输入的内容进行检查，如果不符合要求，则向用户显示提示信息，并取消表单提交操作，从而避免不必要的网络传输。至于用户提交的数据（如账号和密码）是否与服务器端的数据库中数据匹配，则需要在表单提交后通过服务器端程序（如JSP、Servlet）进行验证。 2.JavaScript的基本语法（略） 3.JavaScript浏览器对象 （1）window对象 Window 对象描述浏览器窗口特征，它是Document，Location和History对象的父对象。另外Window 对象还可以认为是其他任何对象的假定父对象，例如语句alert(“2008北京—欢迎您”)，相当于语句Window.alert(“2008北京—欢迎您”)。 ① window对象属性 name属性：name属性用于指定窗口的名称。浏览器可同时打开多个窗口，窗口名称可以区分它们。用window 对象的open方法打开一个新窗口时可指定窗口名称；A标记的TARGET属性指定窗口的名称，单击该锚点可链接到该窗口。下例中的超链接将打开一个Name属性为“IE_Window”的window 对象。 A HREF= TARGET=IE_Window山东信息职业学院/A parent属性：parent属性代表当前窗口(框架)的父窗口，可以使用它返回对象的方法和属性。 opener属性：opener属性返回产生当前窗口的窗口对象，可以使用它返回对象的方法和属性。 top属性：top属性代表主窗口，是最顶层的窗口，是所有其他窗口的父窗口，其他窗口都是它的子窗口，可以通过这个对象访问当前窗口的方法和属性。 self属性：self属性返回当前窗口的一个对象，可以通过这个对象访问当前窗口的方法和属性。 defaultStatus属性：defaultStatus属性可以返回或者设置将在浏览器状态栏中显示的缺省内容。 status属性：status属性可以返回或者设置将在浏览器状态栏中显示的内容。 ②window对象的方法 alert方法 Alert方法是用来显示一个警告对话框，包含一条信息和一个“确定”按钮。 语法格式：alert(参数) 它的参数就是提示信息。执行alert方法时，脚本的执行过程暂停下来，直到用户单击“确定”按钮。 Confirm方法 Confirm方法是用来显示一个确认对话框，包含一条指定的信息，还包含“确定”和“取消”按钮。 语法格式：Confirm(参数) 它的参数就是提示信息。如果单击“确定”按钮，返回True；如果单击“取消”按 钮，则返回False。 prompt方法 prompt方法可以显示—个提示对话框，提示用户输入数据。 语法格式：Prompt(参数1, 参数2) 参数1给出提示信息，参数2指定默认响应。执行Prompt时，将显示一个提示对话框，让用户在文本框中输入字符串，完成输入后，如果单击“确定”按钮，则返回所输入的字符串；如果单击“取消”按钮，则不返回任何信息。 open方法 open方法可以打开一个已存在的窗口，或者创建一个新窗口，并在该窗口中加载一个文档。 语法格式： NewWindow=window.open(URL, name, 窗口参数设置表) 其中NewWindow用于接受open方法的返回值，是一个Window对象。 URL：指定要在窗口中显示的文档的URL。 name：指定要打开的窗口的名称。如果指定的窗口已存在，则在该窗口中显示新文档，原有的内容被取代；如果指定的窗口不存在，则以指定的名称创建并打开一个新窗口，并且在该窗口中显示新文档。 窗口参数设置表格式：参数1=值，参数2=值，…… 窗口参数用于描述打开的窗口，参数可以多个，是可选的。 close方