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.html JavaScript代码嵌入到标记中 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 comments that 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变量，但是没有赋值，自动取值为undefined var 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、undefined in 测试对象中是否存在该属性 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.html while循环语句 示例：js_while.html,34,break/continue,dowhile循环语句 示例：js_dowhile.html break语句 示例：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.html var 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.html String是和原始字符串类型相对应的内置对象，它包含了很多方法以实现字符串的操作、检查和抽取等 声明一个字符串 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 Math document.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,window objects,Navigator objects,Array of window objects,History objects,Location objects,Document objects,Screen objects,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 = “”; 有以下方法,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方法选中文本 当文本域中的文本被选中时内容会加亮显示，这时输入字符会用新字符