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

实用页面设计方法JavaScript,第一章： JavaScript简介,目标:本章旨在向学员简要介绍JavaScript的相关概念及核心功能，通过本课的学习，学员应该掌握如下知识：1）了解JavaScript的基本概念2）了解JavaScript的核心功能,1.1 JavaScript简介,JavaScript基于对象的脚本语言解释执行代码以纯文本形式存储类型宽松Netscape公司和Sun公司联手完成,1.2 JavaScript功能,JavaScript功能现今WEB上应用最为广泛的客户端脚本，可以处理从表单数据的确认到创建负责用户界面的各种任务：表单确认页面修饰以及特殊效果导航系统基本数学运算动态文档生成,1.3 JavaScript历史,JavaScript历史JavaScript语言本身和Java语言没有任何关系1995年首次出现，主要处理一些输入的有效性验证，可以直接在客户端处理,1.4 JavaScript特点,JavaScript特点脚本编写基于对象简单安全动态跨平台,1.5 嵌入使用,在HTML中嵌入JavaScript代码1、在页面中嵌入script代码：可嵌入到任何位置，建议在head标记中2、在标记中嵌入script代码响应标记的某个事件JavaScriptExample.html,1.5 嵌入使用-示例,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 引入使用-示例,我是body的内容,1.7 不支持JavaScript的处理,不支持JavaScript的浏览器处理将JavaScript代码隐藏使用JavaScriptHide.html,1.7 不支持JavaScript-示例,Old BrowsersWelcome to NEU!);/Stop Hiding JavaScript from Older Browsers /-,第二章： JavaScript基本语法,目标:本章旨在向学员介绍JavaScript的基本语法，通过本课的学习，学员应该掌握如下知识：1）了解JavaScript的语法2）了解JavaScript的变量命名、转义字符等,2.1 语法,JavaScript语法区分大小写变量 myTest、myTEST是不同的变量变量是弱类型行结尾加分号大括号表明代码块注释通用简单在浏览器中逐条解释执行，如果某条语句出现错误，后面的语句将不能执行。,2.2 注释,注释单行：/这是注释的内容块注释：/*/*这是多行注释的内容；可以跨越多行；*/,2.3 特殊字符,特殊字符在字符串中插入特殊字符如 “ 和 等使用 +特殊字符 实现如：You & I sing “Happy Birthday”.代码如下：document.write(“You & I sing ”Happy Birthday”.”),2.4 常量/变量,常量JavaScript中没有常量概念通常指直接在代码中给定的值var a=3.1415926;var b=“hello”;变量保存程序中的临时值，可被后面的脚本使用弱类型,2.5 变量声明,变量声明var在使用变量前声明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-未定义类型未被赋值的变量，值为undefinedString-字符串类型值用引号括起来Boolean-布尔类型值为true/falseNull-空类型值为null，尚不存在的对象Number-数字类型NaN.html任何数字（NaN也是number类型，表示“非数”）可以使用 typeof(object)来获取object的类型；后面对typeof有详细介绍。,2.9 类型转换,类型转换JavaScript是弱类型语言，变量的类型对应于其值的类型可以对不同类型的变量执行运算，解释器强制转换数据类型，然后进行处理如：,2.9 类型转换,字符串-数值StrToNumber.htmlparseInt(var)parseFloat(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运算符,typeoftypeof.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 : minor,2.12 异常捕获（了解）,try/catchtry_catch.htmltry/代码catch(e)/处理finally,第三章： 流程控制和函数,目标:本章旨在向学员介绍JavaScript的流程控制和函数，通过本课的学习，学员应该掌握如下知识：1）了解JavaScript的流程控制2）了解函数构成，可以使用函数实现基本功能,3.1 流程控制,JavaScript语言构成主要由控制语句、函数、对象、方法、属性等来实现编程控制语句条件语句ifswitchfor循环语句while循环语句break和continue语句,3.1.1 条件语句-if,if条件语句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.htmldowhile循环语句,3.1.5 break/continue,break语句让执行语句从循环语句或其它程序块中跳出continue语句让执行语句跳过本次循环的剩余语句进入下一次循环,3.2 函数,JavaScript函数完成某个功能的一组语句，把常用的功能写成一个函数定义函数function关键字函数名称参数列表函数体,3.2.1 arguments对象,arguments对象arguments.html函数可以接受任意个数的参数，通过arguments来访问如：function sayHi()if(arguments1 != Hello)alert(arguments0);elsealert(arguments1);alert(arguments.length);/返回参数个数调用：sayHi(111,Hello);,3.2.2 函数使用（一）,普通调用JavaScriptFunction.html带参数调用myFunction(arg1,arg2,etc)无参数调用myFunction(),3.2.3 函数使用（二）,链接调用JavaScriptFunctionLink.html在链接中调用函数用户点击链接后，即调用该函数,3.2.4 函数使用（三）,事件触发调用JavaScriptFunctionTrigger.html由事件触发调用函数其它内部函数Number()、parseInt()、parseFloat()将数字字符串转换为数字如果转换失败，则返回“NaN”isNaN()判断是否不是数字eval()把字符串当作JavaScript表达式来执行eval(“2+3”),1、做一个乘法表JavaScriptExercise.html在网页上用javascript函数，在网页上打印出乘法九九表。1*1=11*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对象,目标:本章旨在向学员介绍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();如果构造函数无参数，则不必加括号对象废除不必专门销毁对象来释放内存当没有针对该对象的引用时，被自动废除把对象的所有引用设置为null时也可以废除对象,4.3 JavaScript内部对象,常用的内部对象ArrayDateMathString,4.3.1 Array对象,数组对象数组是一组变量的有序集合通过数组索引来使用一个变量创建数组新建一个长度为0的数组var array_name = new Array();长度为100的数组var array_name = new Array(100);新建一个指定长度的数组，并赋初值var array_name = new Array(“red”,”green”,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) document.write(book + i + + booki + );, Array-示例-Array.html,/ Create an Array object var book = new Array(6); / Assign values to its elementsbook0 = War and Peace; book1 = Huckleberry Finn;for(var i in book)document.write(book + i + + booki + );, Array-应用-ArraySim.html,var colors = 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(“.”)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返回一个新数组，为原数组中的一段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对象的构造方法,构造方法, 创建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();如上面语句，当不指定参数时，会创建一个表示当前系统时间的对象, Date对象的get方法,Date方法date.htmlDate没有直接访问的属性，只有获取和设置的方法获取日期和时间的方法getYear()：返回年数；（小于2000年返回两位）getFullYear()：返回年数；getMonth()：返回当月号数；（比实际小1）getDate()：返回当日号数；getDay()：返回星期几；（0表示星期日）getHours()：返回小时数；getMinutes()：返回分钟数；getSeconds()：返回秒数；getTime()：返回毫秒数；, Date对象的set方法,Date方法设置日期和时间的方法setYear()：设置年数；setMonth()：设置当月号数；（set7表示8月）setDate()：设置当日号数；setDay()：设置星期几；setHours()：设置小时数；setMinutes()：设置分钟数；setSeconds()：设置秒数；setTime()：设置毫秒数；, 其它方法（了解）,Date的To方法Date的Parse和UTC方法, Date对象-练习,Date练习date_exercise.html计算2025年的圣诞节是星期几，距我们现在的时间还有多少毫秒，距今天还有多少天？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.htmlvar string_name = “string 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空格defStringTrim.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()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”,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语句体内，任何对变量的引用都被认为是这个对象的属性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提供独立于内容而与浏览器窗口进行交互的对象,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()方法三个参数要载入新窗口的页面的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个方法）；按钮的单击事件（仅供参考）：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函数让函数在一定时间内重新执行，递归调用如果不递归调用则仅执行一次setTimeout(函数名,时间间隔,重复次数);时间间隔：毫秒为单位重复次数：大于0的整数var timeId = setTimeout(hello(),2000);clearTimeout函数清除设置的setTimeout函数clearTimeout(timeId);示例：setTimeOut.html,5.2.5 定时执行（一）,setInterval函数让函数在一定时间内重新执行，外部调用setInterval(函数名,时间间隔);时间间隔：毫秒为单位var timeId = setInterval(hello(),2000);clearInterval函数清除设置的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对象的属性设置status的值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对象,location包含有关当前 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“name”.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 事件处理,事件处理在JavaScript中对事件的处理通常由函数担任，事件=“函数名”，如：函数：function myfunction(txt)alert(txt);事件处理：,6.1.4 事件处理-示例,事件处理示例onfocus、onblurEventHandler_1.htmlonmouseover、onmouseoutEventHandler_2.html,6.2 表单,表单的用途用户注册某种服务时，收集其姓名、地址、电话号码、电子邮件地址和其他信息。收集购买物品所需的信息。例如，如果想通过 Internet 购买一本书，就需要填写姓名、邮政地址和付款方式等。表单属性,6.2 表单元素,元素通用属性form_element_properties.htmlform属性-获取该表单域所属的表单name属性-获取或设置表单域的名称type属性-获取表单域的类型value属性-获取和设置表单域的值通用方法focus方法-让表单域获得焦点blur方法-让表单域失去焦点通用事件onfocus，onblur，onclick，onkeydown，onkeyup，onkeypress，onmouseover，onmouseout，onmousedown，onmouseup，onchange,6.2.1 文本域,文本域form_txt.htmlvalue属性获得的值是字符串类型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.html、 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，完成：点击按钮后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 s