实用页面设计方法——JavaScript全套教学课件

1、实用页面设计方法JavaScript,第一章： JavaScript简介,目标: 本章旨在向学员简要介绍JavaScript的相关概念及核心功能，通过本课的学习，学员应该掌握如下知识： 1）了解JavaScript的基本概念 2）了解JavaScript的核心功能,1.1 JavaScript简介,JavaScript 基于对象的脚本语言 解释执行 代码以纯文本形式存储 类型宽松 Netscape公司和Sun公司联手完成,1.2 JavaScript功能,JavaScript功能 现今WEB上应用最为广泛的客户端脚本，可以处理从表单数据的确认到创建负责用户界面的各种任务： 表单确认 页面修饰以

2、及特殊效果 导航系统 基本数学运算 动态文档生成,1.3 JavaScript历史,JavaScript历史 JavaScript语言本身和Java语言没有任何关系 1995年首次出现，主要处理一些输入的有效性验证，可以直接在客户端处理,1.4 JavaScript特点,JavaScript特点 脚本编写 基于对象 简单 安全 动态 跨平台,1.5 嵌入使用,在HTML中嵌入JavaScript代码 1、在页面中嵌入script代码： 可嵌入到任何位置，建议在head标记中 2、在标记中嵌入script代码 响应标记的某个事件 JavaScriptExample.html,1.5 嵌入使用-示

3、例, document.write(这是以JavaScript印出的！); document.write(); alert(a);/先执行，然后才触发onload代码； var d = new Date(); var time = d.getHours(); if(time Good morning); elsedocument.write(Good day); ,1.6 引入使用,引入外部的JavaScript代码 多个页面使用相同的JavaScript代码 将共用代码保存在以.js为扩展名的文件中 在页面中使用src属性引入外部文件 JavaScriptExternal.html,1.6

4、引入使用-示例, 我是body的内容 ,1.7 不支持JavaScript的处理,不支持JavaScript的浏览器处理 将JavaScript代码隐藏使用 JavaScriptHide.html,1.7 不支持JavaScript-示例, Old Browsers Welcome to NEU!); /Stop Hiding JavaScript from Older Browsers /- ,第二章： JavaScript基本语法,目标: 本章旨在向学员介绍JavaScript的基本语法，通过本课的学习，学员应该掌握如下知识： 1）了解JavaScript的语法 2）了解JavaScrip

5、t的变量命名、转义字符等,2.1 语法,JavaScript语法 区分大小写 变量 myTest、myTEST是不同的变量 变量是弱类型 行结尾加分号 大括号表明代码块 注释通用简单 在浏览器中逐条解释执行，如果某条语句出现错误，后面的语句将不能执行。,2.2 注释,注释 单行：/ /这是注释的内容 块注释：/*/ /*这是多行注释的内容； 可以跨越多行； */,2.3 特殊字符,特殊字符 在字符串中插入特殊字符 如 “ 和 等 使用 +特殊字符 实现 如：You var b=“hello”; 变量 保存程序中的临时值，可被后面的脚本使用 弱类型,2.5 变量声明,变量声明 var 在使用变量

6、前声明 var mytest; 可以声明的同时赋值 var mytest = “This is a book”; 同时声明多个变量（不建议） var a, b=1, c;,2.6 变量命名,变量命名 以字母、下划线（_）或美元符号（$）开头 余下的字符可以是下划线、美元符号或任何的字母、数字 最长为255个字符 不能有空格，大小写敏感 不能使用JavaScript中的关键字或保留字命名,2.7 JavaScript保留字（一）,2.7 JavaScript保留字（二）,2.8 变量类型（了解）,变量类型五种原始类型 Undefined-未定义类型 未被赋值的变量，值为undefined Str

7、ing-字符串类型 值用引号括起来 Boolean-布尔类型 值为true/false Null-空类型 值为null，尚不存在的对象 Number-数字类型NaN.html 任何数字（NaN也是number类型，表示“非数”） 可以使用 typeof(object)来获取object的类型；后面对typeof有详细介绍。,2.9 类型转换,类型转换 JavaScript是弱类型语言，变量的类型对应于其值的类型 可以对不同类型的变量执行运算，解释器强制转换数据类型，然后进行处理 如：,2.9 类型转换,字符串-数值StrToNumber.html parseInt(var) parseFloa

8、t(var) Number(var) 注意： parseInt方法和parsefloat方法只对string类型有效，且需要是数字开头的字符串 如： parseInt (“100”);,2.10 语句,语句 区分大小写 语句由一个或多个表达式、关键字或运算符组成 多条语句可以写在同一行上，之间使用分号隔开 单独一行中只有一条语句，可以省略分号 但是我们要求，每行结尾必须加分号,2.11 运算符,运算符 赋值运算符 数学运算符 比较运算符 逻辑运算符,2.11.1 赋值运算符,2.11.2 数学运算符,2.11.3 关系运算符,2.11.4 逻辑运算符,2.11.5 typeof运算符,type

9、oftypeof.html 对变量或值调用typeof运算符将返回下列的值之一 “undefined” 变量是undefined类型的 “boolean” 变量是boolean类型的 “number” 变量是number型的 “string” 变量是string型的 “object” 变量是一种引用类型或null “function” 变量是一个函数 例： var i=2; alert(typeof(i); /返回number,2.11.6 条件运算符,条件运算符 (condition) ? trueVal : falseVal,status = (age = 18) ? adult : mi

10、nor,2.12 异常捕获（了解）,try/catchtry_catch.html try /代码 catch(e) /处理 finally ,第三章： 流程控制和函数,目标: 本章旨在向学员介绍JavaScript的流程控制和函数，通过本课的学习，学员应该掌握如下知识： 1）了解JavaScript的流程控制 2）了解函数构成，可以使用函数实现基本功能,3.1 流程控制,JavaScript语言构成 主要由控制语句、函数、对象、方法、属性等来实现编程 控制语句 条件语句 if switch for循环语句 while循环语句 break和continue语句,3.1.1 条件语句-if,if

11、条件语句js_if.html,3.1.2 条件语句-switch,switch条件语句js_switch.html,3.1.3 循环语句-for,for循环语句js_for.html,3.1.4 循环语句-while,while循环语句js_while.html dowhile循环语句,3.1.5 break/continue,break语句 让执行语句从循环语句或其它程序块中跳出 continue语句 让执行语句跳过本次循环的剩余语句进入下一次循环,3.2 函数,JavaScript函数 完成某个功能的一组语句，把常用的功能写成一个函数 定义函数 function关键字 函数名称 参数列表

12、函数体,3.2.1 arguments对象,arguments对象arguments.html 函数可以接受任意个数的参数，通过arguments来访问 如： function sayHi() if(arguments1 != Hello) alert(arguments0); else alert(arguments1); alert(arguments.length);/返回参数个数 调用： sayHi(111,Hello);,3.2.2 函数使用（一）,普通调用JavaScriptFunction.html 带参数调用 myFunction(arg1,arg2,etc) 无参数调用 my

13、Function(),3.2.3 函数使用（二）,链接调用JavaScriptFunctionLink.html 在链接中调用函数 用户点击链接后，即调用该函数,3.2.4 函数使用（三）,事件触发调用JavaScriptFunctionTrigger.html 由事件触发调用函数 其它内部函数 Number()、parseInt()、parseFloat() 将数字字符串转换为数字 如果转换失败，则返回“NaN” isNaN() 判断是否不是数字 eval() 把字符串当作JavaScript表达式来执行 eval(“2+3”),1、做一个乘法表JavaScriptExercise.html

14、 在网页上用javascript函数，在网页上打印出乘法九九表。 1*1=1 1*2=2 2*2=4 . 1*9=9 2*9=18 .9*9=81,3.2.5 练习一,2、JavaScriptExerciseTwo.html 使用prompt(”,”)获取用户输入的字符串，直到实现输入“STOP”时停止。并打印所有的输入：其他字符使用红色字体输出，“STOP”使用蓝色字体输出。 prompt()的使用如下： var inputStr = prompt(请输入一串字符,“default); alert(inputStr);,3.2.6 练习二,第四章： JavaScript对象,目标: 本章旨在

15、向学员介绍JavaScript的对象，通过本课的学习，学员应该掌握如下知识： 1）了解JavaScript对象的概念 2）了解Array、Date、Math、String对象 3）会创建自己的对象,4.1 对象,JavaScript对象 属性（properties） 描述对象的外观特征 用“.”把属性和对象连接起来 方法（methods） 描述对象的行为动作 用“.”连接,4.2 对象创建及废除,对象创建 使用new关键字来创建对象 var oObject = new Object(); var oStringObject = new String(); 如果构造函数无参数，则不必加括号 对象

16、废除 不必专门销毁对象来释放内存 当没有针对该对象的引用时，被自动废除 把对象的所有引用设置为null时也可以废除对象,4.3 JavaScript内部对象,常用的内部对象 Array Date Math String,4.3.1 Array对象,数组对象 数组是一组变量的有序集合 通过数组索引来使用一个变量 创建数组 新建一个长度为0的数组 var array_name = new Array(); 长度为100的数组 var array_name = new Array(100); 新建一个指定长度的数组，并赋初值 var array_name = new Array(“red”,”gre

17、en”,1,2,3); 数组长度不固定，赋值即可改变长度（动态）, 赋值,数组的使用 赋值 直接赋值 tmpArray0 = “value1”; tmpArray1 = “value2”; 通过for循环赋值 for(var i=0;itmpArray.length;i+) tmpArrayi = “2000”+i; 数组的主要属性length 返回数组长度的整数值, 取值,数组的使用 取值 直接使用 document.write(tmpArray0); 通过for循环取值 同赋值的for循环 或者 forin循环（了解即可） for(var i in book)

18、document.write(book + i + + booki + ); , Array-示例-Array.html, / Create an Array object var book = new Array(6); / Assign values to its elements book0 = War and Peace; book1 = Huckleberry Finn; for(var i in book) document.write(book + i + + booki + ); , Array-应用-ArraySim.html, var color

19、s = new Array(red, green,blue, purple); for(var i in colors) document.write(); document.write(colors + i + = + colorsi + ); , Array对象的常用方法,concat 返回一个新数组；由两个或者更多数组组合而成 var newArray = tmpArray.concat(tmpArray) join 返回字符串；由数组中的所有元素连接到一起，元素间的间隔符由参数指定，省略参数则用逗号分隔 var newString = tmpArray.join(“.”)

20、 reverse 返回一个新数组；由原来的数组反转而成 var newArray = tmpArray.reverse();, Array对象的常用方法,pop 移除数组中的最后一个元素并返回该元素 var newString = tmpArray.pop() push 给数组中增加新元素，并返回数组的新长度 var newLength = tmpArray.push(“a”,”b”) shift 移除数组中的第一个元素并返回该元素 var newString = tmpArray.shift(), Array对象的常用方法,slice 返回一个新数组，为原数组中的

21、一段 var newArray = tmpArray.slice(1，3) sortArraySortNew.html 返回一个排序后的新数组 var newArray = tmpArray.sort() toString 返回将Array中的元素转为由逗号分隔的字符串 var newString = tmpArray.toString(),4.3.2 Date对象,Date对象 可以用来表示任意的日期和时间，获取当前系统日期以及计算两个日期的间隔 给出星期、月份、天数、年份、小时、分钟和秒表示的时间 要使用new运算符创建一个新的Date对象, Date对象的构造方法,构造方法

22、, 创建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)/ 2004年8月4日 var date = new Date(2004,7,4)/ 2004年8月4日 var date = new Date(“2004/7/4”) var date = new Date(Milliseconds) var date = new Date(); 如上面语句，当不指

23、定参数时，会创建一个表示当前系统时间的对象, Date对象的get方法,Date方法date.html Date没有直接访问的属性，只有获取和设置的方法 获取日期和时间的方法 getYear()：返回年数；（小于2000年返回两位） getFullYear()：返回年数； getMonth()：返回当月号数；（比实际小1） getDate()：返回当日号数； getDay()：返回星期几；（0表示星期日） getHours()：返回小时数； getMinutes()：返回分钟数； getSeconds()：返回秒数； getTime()：返回毫秒数；, Date对象

24、的set方法,Date方法 设置日期和时间的方法 setYear()：设置年数； setMonth()：设置当月号数；（set7表示8月） setDate()：设置当日号数； setDay()：设置星期几； setHours()：设置小时数； setMinutes()：设置分钟数； setSeconds()：设置秒数； setTime()：设置毫秒数；, 其它方法（了解）,Date的To方法 Date的Parse和UTC方法, Date对象-练习,Date练习date_exercise.html 计算2025年的圣诞节是星期几，距我们现在的时间还有多少毫秒，距今天还

25、有多少天？ 110254121000毫秒对应的日期 （以 yyyy-MM-dd hh:mm:ss格式显示） 思路：先获取2025年圣诞节的日期对象，再获取当前时间的日期对象，两者相减即获得毫秒数；可以根据毫秒数计算天数； PS： var a=1.5; Math.ceil(a);/对a取整，会返回2,4.3.3 Math对象,Math对象math.html 全局对象 使用时不需要创建实例 Math对象的属性,4.3.3 Math对象的方法,4.3.4 String对象,String对象 和原始字符串类型对应的内置对象 声明字符串：string.html var string_name = “st

26、ring of text”; var string_name = new String(“string of text”) 属性 length：返回String对象的长度,4.3.4 String对象的方法,4.3.4 String对象的方法,一、定义一个字符串，然后对字符串操作所有String对象的方法。如：var tmpString = 123456789,abcdefgABCDEFG,a; StringExercise.html（说明：这里不做了，课堂演示） 二、定义一个函数，功能是去除字符串开头及末尾的空格 如：10个空格abc2空格def6空格，返回：abc2空格def String

27、Trim.html 思路：使用charAt和substring去除头尾的空格；（掌握此方法）,4.3.4 String练习,4.4 定义对象（了解）,创建自己的对象 在JavaScript中可以使用构造函数Object()来创建自己的对象 var newObject = new Object;,4.4.1 工厂方法（一）-无参数（了解）,无参数工厂函数 function createCar() var oTempCar = new Object; oTempCar.color = “red”; oTempCar.doors = 4; oTempCar.showColor = function(

28、)alert(this.color); return oTempCar; 使用： var oCar = creatCar();,4.4.1 工厂方法（二）-有参数（了解）,有参数工厂函数 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

29、”,4);,4.4.2 构造函数（了解）,构造函数 构造函数内部不创建对象，而是使用this关键字 function Car() this.color =“red”; this.doors = 4; this.mpg = 23; this.showColor = function() alert(this.color); ; 使用 var oCar = new Car();,4.4.3 原型方式（了解）,对象的原型属性prototype.html 使用prototype来扩展对象 Ototype.method=function;,4.4 操作对象,使用with语句 在with

30、语句体内，任何对变量的引用都被认为是这个对象的属性 with(object)直接使用对象的属性/方法 如： 默认：document.write(Math.cos(35); 使用with： with (Math) document.write(cos(35); document.write(sin(35); ,第五章：对象模型,目标: 本章旨在向学员介绍JavaScript对象模型的概念，通过本课的学习，学员应该掌握如下知识： 1）了解浏览器对象模型 2）了解Window、Document、History、Location等对象,5.1 浏览器对象模型,浏览器对象模型-BOM 提供独立于内容而与

31、浏览器窗口进行交互的对象,5.1 浏览器对象模型,Window 窗口对象,location 地址对象,document 文档对象,form 表单对象,window.document.myForm.text1,5.2 window对象,window对象 整个BOM的核心，是顶层对象 在使用框架时，每个框架都由它自己的window对象表示,Window object,Frames0,Frames1,Frames2,5.2.1 操作窗口,window对象提供了多个操作窗口的方法 使用：window.moveBy(20,20);,5.2.2 打开新窗口,打开新窗口 window.open()方法 三个

32、参数 要载入新窗口的页面的URL 新窗口的名字 特性字符串 使用：var winObj=open(house.jpg, house_1,width=500,height=300,scrollbars=no); 示例：windowOpen.html、windowMove.html 说明：如果提示权限不足，可以把文件拷贝到Tomcat中，通过IE访问服务器的文件。,5.2.2 打开新窗口,特性字符串，使用逗号分隔,练习： 在原来页面的基础上打开新窗口，要菜单栏和状态栏，大小默认（500，300）；然后在原页面中设置4个按钮，分别可以控制新窗口改变大小和移动（前面的4个方法）； 按钮的单击事件（仅供

33、参考）： windowControl.html,5.2.3 练习,alert() 弹出一个提示框 使用：alert(“文本字符串”); 示例：alert.html,5.2.4 与用户交互,prompt() 弹出可以输入信息的文本框 参数： 用户输入信息的提示 文本框的默认值 使用： prompt(message,defaultText); 示例：prompt.html,5.2.4 与用户交互,confirm() 弹出对话框，确认信息 使用：confirm(message); 示例：confirm.html,5.2.4 与用户交互,setTimeout函数 让函数在一定时间内重新执行，递归调用

34、如果不递归调用则仅执行一次 setTimeout(函数名,时间间隔,重复次数); 时间间隔：毫秒为单位 重复次数：大于0的整数 var timeId = setTimeout(hello(),2000); clearTimeout函数 清除设置的setTimeout函数 clearTimeout(timeId); 示例：setTimeOut.html,5.2.5 定时执行（一）,setInterval函数 让函数在一定时间内重新执行，外部调用 setInterval(函数名,时间间隔); 时间间隔：毫秒为单位 var timeId = setInterval(hello(),2000); cl

35、earInterval函数 清除设置的setInterval函数 clearInterval(timeId); 示例：setInterval.html,5.2.5 定时执行（二）,练习：使用setTimeout()函数实现在页面显示时钟，实时刷新时间。 说明：可以使用文本框来显示时间； function do_test()document.myform.myclock.value=hh:mm:ss; do_test(); 如：setTimeOut_exercise.html,5.2.5 定时执行-练习,状态栏-status 窗口底部边界内的区域，向用户显示信息 使用window对象的属性设置s

36、tatus的值 window.status = “文本字符串”; 示例：status.html,5.3 状态栏,5.4 history对象,历史 用户访问过的站点的列表 属性：length 方法：go()、back()、forward() 只对已经访问过的页面有效 history.go(-3);/向后返回三个访问过的页面 histroy.go(3);/向前返回三个访问过的页面 back();/与history.go(-1);功能相同 forward();/与history.go(1);功能相同,5.5 location对象,location 载入窗口的URL,5.5 location对象,lo

37、cation 包含有关当前 URL 的信息。 方法： location.href = about:blank;/清空页面 示例：location.html,5.6 navigator对象（了解）,navigatornavigator.html 提供用户使用的浏览器及操作系统等信息,5.7 screen对象,screenscreen.html 获取用户屏幕信息 有以下属性,5.8 document对象,对象集合,5.8 document对象,对象集合document.html 使用： for(var i=0; i); 也可以： document.write(document.anchors“na

38、me”.src); document.write();,5.8 document对象,对象方法document_2.html 有以下方法 获取表单域的方法：document_3.html,第六章： 操作HTML,目标: 本章旨在向学员介绍表单编程的基础知识，通过本课的学习，学员应该掌握如下知识： 1）事件处理 2）使用表单中各元素进行页面数据录入及提交 3）验证表单域的输入,6.1 事件处理,事件处理 事件：鼠标或热键的动作 事件处理：对事件进行处理的程序、函数 窗口或页面的事件处理,6.1.1 事件处理,键盘或鼠标的事件处理,6.1.2 事件处理,表单元素的事件处理,6.1.3 事件处理,事

39、件处理 在JavaScript中对事件的处理通常由函数担任， 事件=“函数名”，如： 函数： function myfunction(txt) alert(txt); 事件处理： ,6.1.4 事件处理-示例,事件处理示例 onfocus、onblur EventHandler_1.html onmouseover、onmouseout EventHandler_2.html,6.2 表单,表单的用途 用户注册某种服务时，收集其姓名、地址、电话号码、电子邮件地址和其他信息。 收集购买物品所需的信息。例如，如果想通过 Internet 购买一本书，就需要填写姓名、邮政地址和付款方式等。 表单属性

40、,6.2 表单元素,元素通用属性form_element_properties.html form属性-获取该表单域所属的表单 name属性-获取或设置表单域的名称 type属性-获取表单域的类型 value属性-获取和设置表单域的值 通用方法 focus方法-让表单域获得焦点 blur方法-让表单域失去焦点 通用事件 onfocus，onblur，onclick，onkeydown，onkeyup，onkeypress，onmouseover，onmouseout，onmousedown，onmouseup，onchange,6.2.1 文本域,文本域form_txt.html value属

41、性获得的值是字符串类型 defaultValue属性 练习 有两个输入文本框，输入数字后，点击“求和”按钮把两个输入框的值求和，并写到第三个文本框中； textFormNew.html,6.2.1 文本域的事件,示例：text_example.html,6.2.2 checkbox,复选框 checked属性 checkbox.html， CheckBoxSelectAll.html 练习 参考CheckBoxSelectAll.html做出反向选择的页面CheckBoxSelectExercise.html,6.2.2 checkbox-事件,示例：checkbox_example_1.ht

42、ml、 checkbox_example_2.html,6.2.2 checkbox-练习,练习 多个文本框求和: 每个文本框后面对应有复选框，只有复选框被选中才生效； 使用取值，name为一组控件的名称； computeAll.html,6.2.3 radio,单选按钮 以组的形式存在，只能选中一个 checked属性 radio.html 另：单选按钮没有value属性表示被选中的单选按钮的值，需要通过遍历取得被选择的值，如下：,6.2.3 radio-事件,示例：radio_example.html,参考前页的示例函数和raido.html，完成： 点

43、击按钮后alert出radio.html中选中的单选按钮的值； radio_value.html,6.2.3 radio-练习,6.2.4 select,下拉列表框 选项由option提供 值为被选中的option标记的value值 select.html 属性： length属性：选项个数 selectedIndex属性：当前被选中选项的索引,6.2.4 select应用,应用 使用options获得选项集合,6.2.4 select应用,应用-option的value和text属性 value：标记中value所指定的值 text：显示于界面中的文本，即之间的部分 为select对象增加选项 每个选项都是一个option对象，可以创建option对象，然后添加到select的末尾 select.optionsselect.length = new Option(text,value);,6.2.4 select-事件,示例：select_example.html,6.2.4 select-练习,练习一 参考sele