WEB前台技术3JavaScript.ppt

1,WEB前台技术3-JavaScript,2,课程结构,3,第一章：JavaScript简介,学时：0.5学时教学方法：讲授ppt,目标:本章旨在向学员介绍JavaScript的相关概念及核心功能，通过本课的学习，学员应该掌握如下知识：1）了解JavaScript的概念2）了解JavaScript的核心功能,4,JavaScript简介,JavaScript简介JavaScript是一种基于对象的脚本语言它是解释执行的代码以纯文本的形式存储在文件中可以使用任何一种文本编辑器来编辑JavaScript程序它是一种宽松类型的语言。不必显示定义变量的数据类型，实际上也无法明确地定义其数据类型。在大多数情况下，数据类型会根据需要进行自动转换JavaScript是赋予网页活力与交互性的主要手段之一Netscape公司和Sun公司联手完成,5,JavaScript功能,JavaScript是现在在Web上应用最为广泛的客户端脚本，它能处理相当多的任务，包括从对表单数据的确认到创建复杂的用户界面1、表单确认2、页面修饰以及特殊效果3、导航系统4、基本数学运算5、动态文档生成,6,JavaScript历史,JavaScript的历史JavaScript的名字本身就是令人感到困惑的，除非能够考虑它的历史，这是因为在名字上有所相似，但JavaScript与Java没有太多联系，事实上Netscape公司最初把这种语言定为LiveScript。这种语言更名为JavaScript语言更主要的原因是当时整个行业对Java相当看重，非常希望两种语言能够结合起来构造网页应用程序JavaScript语言本身和Java语言没有关系1995年首次出现时，主要是处理一些输入的有效性验证，可以直接在客户端处理,7,JavaScript的特点,JavaScript的特点是一种脚本编写的语言小程序段方式实现编程，是解释性语言是一种基于对象的语言把页面中的各个元素看作对象简单基本语句和控制简单，变量为弱类型安全不允许访问本地硬盘，只能实现信息浏览或动态交互动态可以直接对客户的输入做出响应，事件驱动跨平台依赖于浏览器本身，与操作环境无关,8,JavaScript的相关概念,JavaScript相关概念ECMAScript：是一个描述，定义了脚本语言的所有属性、方法和对象。每个浏览器都有它自己的ECMAScript接口的实现，然后这个实现又被扩展，包含了DOM文档对象模型和BOM浏览器对象模型DOM文档对象模型：DOM将整个页面规划成由节点层级构成的文档；通过创建树来表示文档，从而使开发者对文档的内容和结构具有空前的控制力BOM浏览器对象模型：对浏览器窗口进行访问和操作,9,JavaScript版本,JavaScript版本介绍ECMAScript 国际标准JScirpt微软JavaScript Netscape公司Netscape公司的JavaScript和微软公司的JScript是对ECMAScript标准的实现HTML&JavaScript,10,JavaScript的嵌入使用,在HTML中嵌入JavaScript代码：在HTML页面中嵌入script代码language属性：定义脚本语言，一般设置为JavaScript，从HTML4.0开始，已经淘汰language属性，可以不写type属性：用于指定脚本语言和Internet内容类型，一般设置为 text/javascript。注意，旧版本浏览器不支持type属性JavaScript脚本代码可以嵌入到HTML文档的任何地方在head部分在body部分也可以head和body中都有HTML推荐将标记放在标记中浏览器执行HTML页面的过程是自上而下的线性过程,11,JavaScript示例,JavaScript的简单示例示例：JavaScripthead.html不支持JavaScript的浏览器处理有的浏览器不识别JavaScript代码，可以将JavaScript代码隐藏，使用将代码包含示例：hideOldBrowser.html,12,JavaScript的引入使用,引用外部JavaScript代码如果多个页面使用相同的JavaScript代码，可以将代码保存在文件中，供页面调用保存JavaScript代码的文件要以.js为扩展名在页面中用的src属性引入链接文件示例：runExternalJS.htmlJavaScript代码嵌入到标记中JavaScript代码不仅可以做为标记存在于HTML页面中，还可以直接嵌入到一个标记中，响应标记的某个事件示例：JavaScriptBody.html,13,第二章：JavaScript语言基础,学时：0.5学时教学方法：讲授ppt,目标:本章旨在向学员介绍JavaScript的基本语法，通过本课的学习，学员应该掌握如下知识：1）了解JavaScript的语法2）了解JavaScript的变量命名、转义字符,14,语法,JavaScript语法JavaScript区分大小写变量是弱类型的变量无特定类型即变量在使用前不需要声明，而是解释器在运行时检查其数据类型每行结尾的分号可有可无括号表明代码块使用大括号括住多条语句形成一个语句块注释与Java、C和PHP语言的注释相同,15,注释/特殊字符,注释单行的注释使用“/”/This is a comment块注释使用”/*/”/*This is a block of commentsthat continues for a number of lines*/语法在字符串中插入特殊字符如“;&使用+特殊字符如：You&I sing“Happy Birthday”.document.write(“You&I sing”Happy Birthday”.”),16,变量/常量,常量在运行过程中保持不变的值JavaScript没有命名常量的概念JavaScript中的常量指直接在代码中输入的值var a=1;var b=“hello”;var c=3.1415926;变量在程序中经常需要保存一些临时值，以便被后面的脚本所使用，需要提供一个空间来存储这些值，并可以在以后取出来使用或修改变量是弱类型的,17,声明变量,声明变量用命令var做声明声明语句可以出现在任何位置，但一定要在使用该变量的语句之前声明的同时也可以用赋值操作符给变量赋初始值var mytest,mytest2;上面语句中定义了一个mytest变量，但是没有赋值，自动取值为undefinedvar mytest=“This is a book”上面语句定义了 mytest变量，同时赋予初始值了,18,变量命名,声明变量在一条声明语句中可以同时声明多个变量var a,b=1,c;在JavaScript中重复声明一个变量也是可以的，但应尽量避免在JavaScript中也可以直接使用一个变量而无须声明，但也应该尽量避免变量的命名变量必须以字母、下划线（_）或美元符号（$）开头余下的字符可以是下划线、美元符号或任何的字母或数字不能使用JavaScript中的关键字或者保留字做为变量名称,19,保留字,保留字 将来的保留字,20,变量类型,变量类型在JavaScript中有五种原始类型Undefined未定义类型（变量值为undefined）任何未被赋值的变量字符串类型（用”或者括起来的字符或数值）Boolean布尔类型（变量值为true或false）Null空类型（变量值为null）Number数字类型（特殊值NaN非数）Infinity正无穷大-Infinity负无穷大NaN（Not a Number）不能用于算术计算它与自身不相等函数isNan(),21,类型转换,类型转换JavaScript是一种自由类型的语言。它的变量没有预定类型，变量的类型相对应于它们包含的值的类型。这种操作的好处是能将值作为另一类型处理任何未被赋值的变量可以对不同类型的值执行运算，解释器自动将数据类型之一改变（强制转换）为另一种数据类型，然后执行运算如,22,语句,语句JavaScript区分大小写一条语句由一个或者多个表达式、关键字或者运算符（符号）组成两条或者更多条语句可以写在同一行上，语句之间用分号”;”隔开；单独一行中只有一条语句时，可以省略分号,23,运算符,运算符赋值运算符=+=，-=，*=，/=，%=数学运算符加法运算符（+）减法运算符（-）乘法（*）除法（/）取余（%）一元取反运算符（-）递增（+）递减（-）,24,运算符,运算符比较运算符相等运算符（=）不等运算符（!=）大于（）小于（=）小于等于（=）,25,运算符,运算符逻辑运算符逻辑与运算符（&）逻辑或运算符（|）逻辑非运算符（!）typeof返回一个用来表示表达式的数据类型的字符串typeof返回值有六种可能：number、string、boolean、object、function、undefinedin测试对象中是否存在该属性result=property in object,26,第三章：JavaScript流程控制和函数,学时：2.5学时教学方法：讲授ppt+上机练习,目标:本章旨在向学员介绍JavaScript的流程控制和函数，通过本课的学习，学员应该掌握如下知识：1）了解JavaScript的流程控制2）了解函数构成，可以使用函数实现功能,27,流程控制,JavaScript脚本语言的基本构成是由控制语句、函数、对象、方法、属性等来实现编程的控制语句条件语句if条件语句switch条件语句for循环语句while循环语句break和continue语句,28,流程控制语句,语句,29,流程控制语句,语句 示例：forInStatements.html,30,流程控制语句,语句,31,if,if条件语句 示例：js_if.html,32,switch,switch条件语句 示例：js_switch.html,33,for/while,for循环语句 示例：js_for.htmlwhile循环语句 示例：js_while.html,34,break/continue,dowhile循环语句 示例：js_dowhile.htmlbreak语句 示例：js_break.html使用break语句让执行过程从for或while循环中跳出continue语句 示例：js_continue.html使用continue让执行过程跳过本次循环的剩余语句进入下一次循环,35,函数,JavaScript函数函数是完成某个功能的一组语句，通常将常用的功能写成一个函数定义函数function关键字函数名称参数列表，以括号()括起来，中间以,分隔以大括号把函数体括起来,36,函数嵌套,JavaScript函数可以嵌套定义一个函数内部可以定义另外一个函数,37,函数调用,函数调用函数只有在被调用后才生效带有参数的函数调用myFunction(arg1,arg2,etc)没有参数的函数调用myFunction(),38,函数调用,在链接中调用函数函数可以在链接中被调用，使用javascript:，当用户点击链接后，即调用对应的函数 示例：JavaScriptBody.html,39,第四章：JavaScipt对象,学时：1.5学时教学方法：讲授ppt+上机练习,目标:本章旨在向学员介绍JavaScript的对象，通过本课的学习，学员应该掌握如下知识：1）了解JavaScript对象的概念2）了解Array、Date、Math、String对象3）会创建自己的对象,40,对象,JavaScript对象属性（properties）描述对象的属性用“.”把属性与对象连接起来方法（methods）一般是面向对象语言中用于描述对象的行为动作也是用”.”连接JavaScript对象的声明和实例化对象是用关键字new后面跟要实例化的类的名字创建的var oObject=new Object();var oStringObject=new String();如果构造函数无参数，可以没有括号,41,对象的废除,对象的废除在ECMAScript中有无用存储单元收集程序JavaScript不必专门销毁对象来释放内存当再没有针对某对象的引用时，该对象被废除把对象的所有引用设置为null，可以强制废除对象当运行无用存储单元收集程序时，所有废除对象都被销毁JavaScript支持多种对象用户自定义的对象内部对象浏览器和文档对象,42,内部对象,内部对象Array对象Date对象Math对象String对象Array对象数组是一组变量的有序集合，可以通过数组索引使用一个变量创建一个数组 示例：array.htmlvar array_name=new Array();var array_name=new Array(100);var array_name=new Array(“red”,”green”,1,2,3);,43,Array,Array对象的使用通过for循环赋值通过for循环显示Array对象的属性,44,Array,Array对象的方法 示例：arrayMethod.html,45,Array,Array对象的方法-续,46,Array,Array对象的方法-续,47,Date,Date对象构造方法,48,Date,Date对象必须用New运算符创建一个实例var date=new Date(“July 4,2004,6:25:22”)var date=new Date(“July 4,2004”)var date=new Date(2004,7,4,6,25,22)var date=new Date(2004,7,4)var date=new Date(Milliseconds)var date=new Date();如上面语句，当不指定参数时，会创建一个表示当前系统时间的对象,49,Date,Date没有提供直接访问的属性，只具有获取和设置日期和时间的方法获取日期和时间的方法getYear()：返回年数；getMonth()：返回当月号数；getDate()：返回当日号数；getDay()：返回星期几；getHours()：返回小时数；getMinutes()：返回分钟数；getSeconds()：返回秒数；getTime()：返回毫秒数；设置日期和时间的方法setYear()：设置年数；setMonth()：设置当月号数；setDate()：设置当日号数；setDay()：设置星期几；setHours()：设置小时数；setMinutes()：设置分钟数；setSeconds()：设置秒数；setTime()：设置毫秒数；,50,Date,Date API介绍 1、JavaScript自1970年1月1日以来一直以毫秒的形式在内部存储日期2、在读取当前日期和时间时，代码依赖的是客户机的时钟，如果客户机的时间有误，代码会如实反映3、星期的天数以及年的月数是从0开始的。因此，第0天是星期日，第6天是星期六；第0月是1月。但是每月的天数是从1开始计数的4、Date对象的setDate、setMonth方法的参数可以为负值，会导致从年或者月借位练习：获得现在的日期和时间，并进行简单的逻辑判断，2025年的元旦是星期几？,51,Math,Math对象是全局对象在引用该对象的属性或者方法时不需要为它创建实例Math对象的属性,52,Math,Math对象的方法Math.random()产生的伪随机数介于 0 和 1 之间（含 0，不含 1),53,String,String对象 示例：string.htmlString是和原始字符串类型相对应的内置对象，它包含了很多方法以实现字符串的操作、检查和抽取等声明一个字符串var string_name=“string of text”;var string_name=new String(“string of text”)String对象的属性,54,String,String对象的方法,55,定义类或对象,创建自己的对象使用new运算符可以创建一个新的对象在JavaScript中有构造函数Object()用于创建自己的对象var newObject=new Object;工厂函数-无参数function createCar()var oTempCar=new Object;oTempCar.color=“red”;oTempCar.doors=4;oTempCar.showColor=function()alert(this.color);return oTempCar;使用：var oCar=creatCar();,56,工厂函数,工厂函数-有参数function createCar(sColor,iDoors)var oTempCar=new Object;oTempCar.color=sColor;oTempCar.doors=iDoors;oTempCar.showColor=function()alert(this.color);return oTempCar;使用：var oCar=creatCar(“red”,4);,57,构造函数,构造函数在构造函数内部无创建对象，而是使用this关键字function Car()this.color=“red”;this.doors=4;this.mpg=23;this.showColor=function()alert(this.color);使用：var oCar=new Car();,58,操纵对象,with语句在该语句体内，任何对变量的引用都被认为是这个对象的属性，以节省一些代码with(object)如：对于：document.write(Math.cos(35);document.write(Math.sin(80);使用with：with Mathdocument.write(cos(35);document.write(sin(80);,59,事件驱动及事件处理,基于对象的基本特征，采用事件驱动（event-driven）通常鼠标或热键的动作事件（Event）由鼠标或热键引发的一连串程序的动作事件驱动（Event Driver）对事件进行处理的程序或函数事件处理程序（Event Handler）窗口或页面的事件,60,事件驱动及事件处理,鼠标和键盘的基本事件,61,事件驱动及事件处理,表单元素的事件,62,事件驱动及事件处理,事件驱动及事件处理在JavaScript中对事件的处理通常由函数（Function）担任Function 事件处理名(参数表)事件处理语句集；事件 事件驱动 事件处理程序示例：event.html,63,第五章：BOM浏览器对象模型,学时：1.5学时教学方法：讲授ppt+上机练习,目标:本章旨在向学员介绍BOM浏览器对象模型相关概念，通过本课的学习，学员应该掌握如下知识：1）了解浏览器对象模型2）了解Window、Document、History、Location等对象,64,BOM,BOM提供了 独立于内容而与浏览器窗口进行交互的对象,Current Window,windowobjects,Navigatorobjects,Array ofwindowobjects,Historyobjects,Locationobjects,Documentobjects,Screenobjects,65,window,window对象window对象是整个BOM的核心，所有对象和集合都以某种方式回接到window对象window对象表示整个浏览器窗口，但不表示其包含的内容如果页面使用框架集合，每个框架都由它自己的window对象表示，存放在frames集合中,Window object,Frames0,Frames1,Frames2,66,window,window对象JavaScript提供了许多方法来改变窗口大小和移动窗口,67,导航/新窗口,导航和打开新窗口window.open()方法打开新窗口有四个参数：要载入新窗口的页面的URL新窗口的名字特性字符串说明是否用新载入的页面替换当前载入的页面的Boolean值示例：js_windowopen.html,68,open方法,window.open()方法特性字符串用逗号分隔练习：在原来页面的基础上打开新窗口，不要菜单栏和状态栏，大小默认（500，300）；然后在原页面中设置4个按钮，分别可以控制新窗口改变大小和移动（前面的4个方法）；,69,与用户交互,window对象window对象是整个BOM的中心，所以它享有特权，即不需要明确引用它，在引用函数、对象或集合时，解释程序都会查看window对象与用户交互的方法alert()prompt()confirm(),70,alert,alert()创建一个提示框，弹出给用户提示某些信息在提示信息下是一个“确定”按钮当提示框弹出后，直到用户点击“确定”按钮后页面程序才会继续执行alert(“文本字符串”);示例：alert.html,71,prompt,prompt()弹出一个可以输入信息的文本框有提示信息，提示信息下是一个可输入信息的文本框，并有“确定”和“取消”按钮当用户输入信息后，该文本框会返回用户输入的信息prompt()可以有两个参数第一个参数是要用户输入那些信息的提示第二个参数是待输入信息的文本框中的默认值使用方法prompt(message);prompt(message,defaultText);练习：实现对身份证号码的解析,72,confirm,confirm()弹出一个对话框，向用户确认某个信息有提问信息，提问信息下有“确定”和“取消”按钮如果用户点击“确定”按钮，会返回true；如果用户点击“取消”按钮，会返回false；只有一个参数，就是向用户确认的信息使用方法confirm(message);示例：confirm.html,73,定时执行,setTimeout函数让函数在一定的时间内重新执行setTimeout(函数名,时间间隔,重复次数);时间间隔：单位是毫秒重复次数：是大于0的整数clearTimeout函数清除已经设置的setTimeout对象示例：setTimeOut.html,74,状态栏,状态栏在窗口底部边界内的区域，用于向用户显示信息一般来说，状态栏告诉了用户何时在载入页面，何时完成载入页面用window对象的属性设置它的值status属性使状态栏的文本暂时改变window.status=“文本字符串”;示例：statusbar.html,75,history,历史用户访问过的站点的列表有length属性和三个方法：go()，back()，forward()history对象只对已经访问过的页面有效果history.go(-3);/向后返回三个访问过的页面histroy.go(3);/向前返回三个访问过的页面back();/与history.go(-1);功能相同forward();/与history.go(1);功能相同练习：实现历史页面前进和后退的功能,76,location,location对象表示载入窗口的 URL属性见下,77,location,location对象可以获取或设置浏览器当前浏览的页面window.location.href=“http:/”;有以下方法,78,navigator,navigator对象 用于提供用户所使用的浏览器以及操作系统等信息在判断浏览器页面采用的是哪种浏览器，navigator对象非常有用有以下属性,79,screen,screen对象 用户获得某些关于用户屏幕的信息有以下属性,80,document,document对象页面中的各元素的信息有以下方法,81,document,document对象表示页面文档本身document对象不仅包含了文档本身的一些属性，还包括了几个重要的结合属性anchors，forms，images，links，它们都是文档中特定的标记的集合document对象-anchors属性用于返回页面文档中所有书签标记（）组成的数据,82,document,document对象-forms属性用于返回一个页面中所有表单组成的数组document对象-images属性可以很方便的引用一个页面中所有的图片标记，从而对它们进行一些通用的处理document对象-links属性返回页面中所有链接标记所组成的数组document对象-向页面写入数据document.write(string1,string2,);,83,第六章：表单编程入门,学时：1.5学时教学方法：讲授ppt+上机练习,目标:本章旨在向学员介绍表单编程基础知识，通过本课的学习，学员应该掌握如下知识：1）使用表单中的各元素进行页面设计2）验证表单,84,表单,表单通常由一个或多个表单域组成，表单域接收用户的输入，并通过表单的提交功能将数据传递到服务器端，由服务器对这些数据进行处理在JavaScript中可以很方便地操作表单每对标记被解析为一个form对象表单域表单域指用来接收用户输入或操作的一些页面元素，如：文本框、按钮、复选框等,85,表单示例,86,表单示例,87,表单域,表单域的通用属性form属性-获取该表单域所属的表单name属性-获取或设置表单域的名称type属性-获取表单域的类型value属性-获取和设置表单域的值表单域的通用的方法focus方法-让表单域获得焦点blur方法-让表单域失去焦点表单域的通用的事件onfocus，onblur，onclick，onkeydown，onkeyup，onkeypress，onmouseover，onmouseout，onmousedown，onmouseup，onchange,88,表单元素,89,文本域,文本域text对象,90,文本域-text,Text对象有以下属性Text对象有以下方法,91,文本域-password,password对象password对象的属性和方法与text的基本相同,92,文本域-textarea,textarea对象textarea对象的属性和方法与text的基本相同,93,文本域的使用,获取和设置文本域的内容value属性value获得的文本域的值是字符串类型可以使用parseInt()，parseFloat()，eval()函数将字符串转换为数字类型练习：有两个输入框，输入数字后，点击“求和”按钮把两个输入框的值求和；文本域的使用-defaultValue文本域对象通常是在HTML标记中定义的，如果在标记中指定了value属性，则在脚本中可以用defaultValue来获得这个值在调用reset方法时，实际上就是用这个值来重新填充到文本域中这是一个只读属性，不能通过脚本进行修改,94,文本域事件,使用select方法选中文本当文本域中的文本被选中时内容会加亮显示，这时输入字符会用新字符清空原有内容用户在修改表单内容时，内容自动被选中使用onselect事件处理用户的选中操作当用户使用鼠标或键盘选中文本框中的一段文本时，会触发onselect事件,95,文本域事件,使用select方法选中文本当文本域中的文本被选中时内容会加亮显示，这时输入字符会用新字符清空原有内容用户在修改表单内容时，内容自动被选中使用onselect事件处理用户的选中操作当用户使用鼠标或键盘选中文本框中的一段文本时，会触发onselect事件,96,使用按钮类表单,使用简单按钮一个按钮对应于一段数据处理逻辑按钮最常用的操作是捕获click事件，来执行一段数据处理程序在按钮操作中，有时需要确认该操作，可以通过给单击事件返回true或false来实现,97,checkbox,使用复选框-checkbox每个复选框有两种状态：选中和未选中通过checked属性来获取checked返回true：表示选中checked返回false：表示未选中练习：全选功能,98,radio,使用单选按钮-radio单选按钮通常以组的形式出现，属于同一个组的单选按钮只能有一个被选中对于一个单选按钮有两种状态：选中和未选中通过checked属性来获取或者设置单选按钮的状态Checked返回true：表示选中Checked返回flase：表示未选中,99,radio,使用单选按钮-radio,100,radio,使用单选按钮单选按钮没有value属性表示当前被选中的单选按钮的值，只能遍历单选按钮来获取被选择的值,101,select,使用下拉列表框-示例：select.html对应于HTML中的标记，每个标记由一个或多个标记组成，在JavaScript中称为option对象,102,select,使用下拉列表框-select下拉列表框的值为被选中的 option标记中的value指定的值,103,select,使用下拉列表框-select使用length属性获取选项的个数使用selectIndex属性获取当前选项的索引每个选项都有一个索引，selectedIndex表示当前被选中的选项的索引号当下拉列表框可多选时，selectedIndex属性返回第一个被选中项的索引selectIndex是一个只读的属性使用option属性获取选项集合,104,select,使用下拉列表框-select使用option对象的value属性和text属性Value属性表示标记中value所指定的值，可以通过脚本获取或设置该值Text属性表示显示于界面中的文本，即之间的部分，同样可以通过脚本获取或设置该值为select对象添加一个选项在下拉列表框中，每个选项都是一个option对象，所以为了增加选项，必须先创建一个option对象，并将其添加到下拉列表框的末尾练习：参考select.html，当选项变更时，alert出变更后的选项的值和显示的文本,105,验证表单,验证E-Mail地址在用户名后面有“”符号在地址中至少有一个“.”符号验证密码域不能为空长度要大于等于6只能是字母或数字示例：check_pass.html,106,第七章：练习,学时：1.0学时教学方法：上机练习+讲师指导,目标:本章旨在使学员学会JavaScript的使用，通过本课的学习，学员应该掌握如下知识：1）使用JavaScript实现页面验证及特效,107,练习,表单验证,