JavaScript——ppt讲解

第9章JavaScript单击此处编辑母版标题样式单击此处编辑母版文本样式第二级第三级第四级第五级教学目标1.理解JavaScript语言的作用和运行方式。2.掌握在网页中使用客户端脚本的方法。3.掌握JavaScript语言的基本语法（语句和语句块、函数）。4.掌握消息对话框的使用方法。5.掌握JavaScript语言的基本语法（标识符和变量、运算符和表达式）6.掌握顺序结构程序的编写。7.掌握选择结构程序的编写。8.掌握循环结构程序的编写。单击此处编辑母版标题样式单击此处编辑母版文本样式第二级第三级第四级第五级教学目标9.理解面向对象编程（OOP）的优点。10.熟悉JavaScript的对象类型。11.掌握常用核心对象的使用方法。12.掌握文档对象模型（DOM）的使用方法。13.掌握窗口对象的使用方法。14.熟悉JavaScript的事件类型。15.掌握指定事件处理程序的两种方法。16.掌握表单事件、鼠标事件、键盘事件、页面载入和离开事件的使用方法。单击此处编辑母版标题样式单击此处编辑母版文本样式第二级第三级第四级第五级教学内容9.1JavaScript简介9.2JavaScript程序9.3标识符和变量9.4运算符和表达式9.5JavaScript程序控制结构9.6常用对象9.7事件编程9.8利用JS实现在线订购功能单击此处编辑母版标题样式单击此处编辑母版文本样式第二级第三级第四级第五级教学重点和难点重点：在网页中使用客户端脚本的方法、函数的定义和调用、标识符和变量的使用、运算符和表达式的使用、程序控制结构、常用对象、事件编程。难点：函数的定义和调用、分支程序、循环程序、常用对象的理解和使用。单击此处编辑母版标题样式单击此处编辑母版文本样式第二级第三级第四级第五级导入：为什么要学习JavaScript前面我们已经系统学习了Html和CSS，其中Html是基础架构，CSS用来美化页面，而Javascript是实现网页动态效果的的基石,在web开发中扮演重要的角色，被广泛的应用到各个领域：①地图搜索(google，baidu)②用户注册、验证③网上购物④web聊天.....单击此处编辑母版标题样式单击此处编辑母版文本样式第二级第三级第四级第五级JavaScript是一种被嵌入HTML网页之中的基于对象和事件驱动编程的脚本语言。脚本实际上是一段程序，用来完成某些特殊功能。JavaScript功能：（1）可以将文本动态的放入HTML页面。（2）可以对事件做出响应。（3）可以读写HTML元素。9.1JavaScript简介单击此处编辑母版标题样式单击此处编辑母版文本样式第二级第三级第四级第五级（4）可被用来验证用户输入的数据。（5）可被用来检测访问者的浏览器，并根据所检测到的浏览器，为这个浏览器载入相应的页面。（6）可被用来创建cookies，用来存储和取回位于访问者的计算机中的信息。（7）可利用Ajax技术来完成和服务器的直接通信，无刷新的修改当前HTML页面内容。9.1JavaScript简介单击此处编辑母版标题样式单击此处编辑母版文本样式第二级第三级第四级第五级基本语法：scripttype=text/javascript[src=“外部js文件”]…/script语法说明：（1）script：脚本标记。它必须以scripttype=text/javascript开头，以script结束，界定程序开始的位置和结束的位置。（2）script在页面中的位置决定了什么时候装载它们，如果希望在其他所有内容之前装载脚本，就要确保脚本在head部分。（3）src属性不是必要的。它指定了一个要加载的外部js代码文件，一旦应用了这个属性，则script标签中的任何内容都将被忽略。9.1JavaScript简介单击此处编辑母版标题样式单击此处编辑母版文本样式第二级第三级第四级第五级JavaScript程序本身不能独立存在，它是依附于某个HTML页面，在浏览器端运行的。1.位于head部分的脚本如果把脚本放置到head部分，在页面载入的时候，就同时载入了代码。通常这个区域的JavaScript代码是为body区域程序代码所调用的事件处理函数。如示例。9.1JavaScript简介单击此处编辑母版标题样式单击此处编辑母版文本样式第二级第三级第四级第五级9.1JavaScript简介单击此处编辑母版标题样式单击此处编辑母版文本样式第二级第三级第四级第五级2.位于body部分的脚本放置于body中的脚本，通常是一些在页面载入时需要同时执行的一些脚本，这些代码执行后的输出就成为页面的内容，在浏览器中可以即时看到。如示例。9.1JavaScript简介单击此处编辑母版标题样式单击此处编辑母版文本样式第二级第三级第四级第五级3.直接位于事件处理部分的代码中9.1JavaScript简介单击此处编辑母版标题样式单击此处编辑母版文本样式第二级第三级第四级第五级4.位于网页之外的单独脚本文件示例：先建立一个名为test.js的文件，内容如下：9.1JavaScript简介单击此处编辑母版标题样式单击此处编辑母版文本样式第二级第三级第四级第五级然后，再建立一个html文件，内容如下：9.1JavaScript简介单击此处编辑母版标题样式单击此处编辑母版文本样式第二级第三级第四级第五级优点：复用、共享。注意：（1）外部的JavaScript程序文件中不需要使用script标签，此文件的内容仅含有JavaScript程序代码。（2）使用src属性后，那么在该script元素内部的任何内容都将被忽略。如果需要嵌入其他的代码，可以继续在文件中添加一对新的script标签。（3）src属性指定外部文件所在的位置时，默认是在页面所在目录下。9.1JavaScript简介单击此处编辑母版标题样式单击此处编辑母版文本样式第二级第三级第四级第五级JavaScript脚本语言的基本构成是由语句、函数、对象、方法、属性等来实现编程的，在程序结构上同样是有顺序、分支和循环三种基本结构。9.2JavaScript程序单击此处编辑母版标题样式单击此处编辑母版文本样式第二级第三级第四级第五级JavaScript语句是发给浏览器的命令，这些命令的作用是告诉浏览器要做的事情。1.语句在JavaScript程序中，语句的类型一般包括：（1）变量声明语句。（2）输入输出语句。（3）表达式语句。（4）程序流向控制语句。（5）返回语句。9.2.1语句和语句块单击此处编辑母版标题样式单击此处编辑母版文本样式第二级第三级第四级第五级2.语句块语句块就是用“{”和“}”封闭起来的若干条语句。如：说明：用“{…}”把相关代码封闭在一起的做法是一个很好的编程习惯，有助于更清晰和准确地定义逻辑边界。9.2.1语句和语句块单击此处编辑母版标题样式单击此处编辑母版文本样式第二级第三级第四级第五级3.代码代码就是由若干条语句或语句块构成的执行体。浏览器按照代码编写的逻辑顺序逐行执行，直至碰到结束符号或者返回语句。9.2.1语句和语句块单击此处编辑母版标题样式单击此处编辑母版文本样式第二级第三级第四级第五级4.注释与CSS中的注释方法相同。注释的作用是为代码添加阅读说明，但有时也会用来屏蔽某些语句行的执行。①单行注释单行注释以//开始，一般对语句的含义进行说明，也可以跟在代码后，放在同一行中。②多行注释多行注释以“/*”开头，以“*/”结尾，经常用来对一个函数或者语句块进行说明。9.2.1语句和语句块单击此处编辑母版标题样式单击此处编辑母版文本样式第二级第三级第四级第五级JavaScript的函数有系统本身提供的内部函数，也有系统对象定义的函数，还包括程序员自定义的函数。一个函数代表了一个特定的功能。1.函数的构成基本语法：function函数名(参数1,参数2,...参数N){函数体；}9.2.2函数单击此处编辑母版标题样式单击此处编辑母版文本样式第二级第三级第四级第五级语法说明：（1）function是关键字，组成一个函数必须有function关键字开始。（2）函数名用来在调用时使用，命名必须符合有关标识符的命名规则。（3）一个函数可以没有参数，但括号必须保留，函数也可以有1到多个参数，声明参数不必明确类型。（4）大括号界定了函数的函数体。9.2.2函数单击此处编辑母版标题样式单击此处编辑母版文本样式第二级第三级第四级第五级示例：9.2.2函数单击此处编辑母版标题样式单击此处编辑母版文本样式第二级第三级第四级第五级9.2.2函数单击此处编辑母版标题样式单击此处编辑母版文本样式第二级第三级第四级第五级运行结果：9.2.2函数单击此处编辑母版标题样式单击此处编辑母版文本样式第二级第三级第四级第五级2.函数声明时的参数形参：color，用来接收函数调用者传递过来的参数。实参：red,orange,yellow,…，函数调用时的实际参数值。9.2.2函数单击此处编辑母版标题样式单击此处编辑母版文本样式第二级第三级第四级第五级3.调用函数函数必须被调用才能发挥作用，前面多个程序已经展示了函数的调用过程。具体调用规则是：（1）函数必须通过名字加上括号才能调用。（2）函数调用时，必须满足参数传递的要求，按照形式参数的声明要求，保证类型、顺序和个数（不是必须的）的统一。9.2.2函数单击此处编辑母版标题样式单击此处编辑母版文本样式第二级第三级第四级第五级4.用return返回函数的计算结果函数可以在执行后返回一个值来代表执行后的结果，当然有些函数基于功能的需要并不需要返回任何值。函数返回一个值非常简单，一般在一个函数代码的最后一行是return语句。当然，一个函数也可以没有返回值，但并不妨碍最后添加一条return语句，明确表示函数执行结束，如show函数一样。9.2.2函数单击此处编辑母版标题样式单击此处编辑母版文本样式第二级第三级第四级第五级单击此处编辑母版标题样式单击此处编辑母版文本样式第二级第三级第四级第五级9.2.2函数单击此处编辑母版标题样式单击此处编辑母版文本样式第二级第三级第四级第五级5.函数的作用域（1）局部变量当代码在函数内声明了一个变量后，就只能在该函数中访问该变量，它们被称为“局部变量”。当退出该函数后，这个变量会被撤销。可以在不同的函数中使用名称相同的局部变量而互不影响，这是因为一个函数能够识别它自己内部定义的每个变量。（2）全局变量如果程序在函数之外声明了一个变量，则页面上的所有函数都可以访问该变量，它们被称为“全局变量”。这些变量的生存期从声明它们之后开始，在页面关闭时结束。9.2.2函数单击此处编辑母版标题样式单击此处编辑母版文本样式第二级第三级第四级第五级6.常用系统函数系统函数又称内部方法，与任何对象无关，可直接使用。①返回字符串表达式中的值：eval()函数②返回字符的编码：escape()函数③返回字符串ASCII码：unescape()函数④返回实数：parseFloat()函数⑤返回不同进制的数：parseInt()函数⑥判断是否为非数值：isNaN()函数9.2.2函数单击此处编辑母版标题样式单击此处编辑母版文本样式第二级第三级第四级第五级9.2.3消息对话框1.弹出对话框方法：alert(文本)功能：实现了一个简单的信息告知的功能。例：单击此处编辑母版标题样式单击此处编辑母版文本样式第二级第三级第四级第五级2.确认框方法：confirm(文本)功能：确认框是一个带有显示信息和“ok/确认”及“cancel/取消”两个按钮对话框，用户可以验证或者接受某些信息。当确认框出现后，用户需要单击确定或者取消按钮才能继续进