网页制作基本知识.ppt

《网页制作基本知识.ppt》由会员分享，可在线阅读，更多相关《网页制作基本知识.ppt（28页珍藏版）》请在三一办公上搜索。

1、JAVASCRIPT常用内置对象,JavaScript是一种解释型的、面向对象的编程语言(OOP)。包含了很多内置 JavaScript 对象：字符串、日期、数组、逻辑、算术等。JavaScript中的对象是由属性(properties)和方法(methods)两个基本元素构成。前者是指与对象有关的值；后者是对象可以执行的行为。,yyy,字符串内置对象方法,1big()用法：stringObject.big()。Var a=“abca”;var b=“def”;a.big()_;作用：将字符串显示为大号字体。2blink()用法：stringObject.blink()。作用：将字符串设置为闪

2、动效果。3bold()用法：stringObject.bold()。A.bold();作用：将字符串设置为粗体。4charAt()用法：stringObject.charAt(index)作用：返回字符串指定位置的字符。5CharCodeAt()用法：stringObject.charCodeAt(index)。作用：返回字符串指定位置字符的Unicode编码。6concat()用法：stringObject.concat(string1，string2，stringN)。作用：对字符串进行连接。,7fixed()用法：stringObject.fixedt()。作用：将字符串显示为打印机字体

3、。8fontcolor()用法：stringObject.fontcolor(color)。作用：指定字符串字体颜色。9fontsize()用法：stringObject.fontsize(size)。作用：指定字符串字体的大小。10indexOf()用法：stringObject.indexOf(searchValue,fromIndex)。作用：检索字符串中字符或子字符串在字符串中的位置，如果没有检索到要检索的字符串值，则返回-1 11italics()用法：stringObject.italics()。作用：将字符串显示为斜体字。12lastIndexOf()用法：stringObjec

4、t.lastndexOf(searchValue,fromIndex)。作用：检索一个指定的字符串值最后出现的位置，在字符串中指定位置从后向前搜索，如果没有检索到要检索的字符串值，则该方法返回-1。参见indexOf()的用法。,13link()用法：stringObject.link(url)作用：字符串显示为超链接。14localeCompare()用法：stringObject.localeCompare(targetStr)。作用：比较两个字符串，如果 stringObject 小于 targetStr，则 localeCompare()返回小于 0 的数。如果 stringObjec

5、t 大于 targetStr，则返回大于 0 的数。如果两个字符串相等，或根据本地排序规则没有区别，返回 0。15match()用法：stringObject.match(searchvalue)。作用：查找指定的字符串，如果没有可匹配的值，则返回null。16replace()用法：stringObject.replace(targetString,newString)。作用：替换字符串中的某些字符。17search()用法：stringObject.search(searchString)。作用：在字符串中找到指定字符或字符串位置。,18slice()用法：stringObject.sli

6、ce(start,end)。作用：将字符串的部分字符提取出来，并返回剩余部分。19small()用法：stringObject.small()。作用：将字符串显示为小号字体。20split()用法：stringObject.split(separator,howmany)。作用：将字符串分割成字符串数组。21strike()用法：stringObject.strike()。作用：用删除线删除指定的字符串。22sub()用法：stringObject.sub()。作用：将字符串显示为下标。23substr()用法：stringObject.substr(start,length)。作用：在字符串

7、中抽取从 start开始的指定数目的字符。24substring()用法：stringObject.substring(start,stop)。作用：抽取字符串中两个指定位置之间的字符。,25sup()用法：stringObject.sup()。作用：为字符串添加上标。26toLowerCase()用法：stringObject.toLowerCase()作用：将字符串转化为小写。27toUpperCase()用法：stringObject.toUpperCase()作用：将字符串转化为大写。28toSource()用法：object.toSource()作用：显示对象的源代码。29toStr

8、ing()用法：stringObject.toString()作用：返回字符串。30valueOf()用法：stringObject.valueOf()。作用：返回字符串对象的原始值。31Constructor用法：object.constructor。作用：创建对象的引用。,32length用法：object.length作用：字符串长度。33prototype用法：=value。作用：允许向对象添加属性和方法。,布尔型内置对象方法,1toSource()用法：object.toSource()。作用：显示对象的源代码。2toString()用法：booleanObject.toString

9、()。作用：将布尔型转换为字符串，并返回结果。var a=“1”,b=“2”;var c=a+b;c=“ab”;3valueOf()用法：booleanObject.valueOf()。作用：返回布尔对象的原始值。,数组内置对象方法,1concat()用法：arrayObject.concat(array1，array2，arrayN)。作用：将一个或多个数组连接成一个数组。var a=new Array();实例化 2join()用法：arrayObject.join(separator)。作用：将数组元素合并成一个字符串。3pop()用法：arrayObject.pop()。作用：删除并返

10、回数组的最后一个元素。4push()用法：arrayObject.push(newelement1,newelement2,.,newelementN)。作用：向数组的末尾添加一个或更多元素，并返回新的长度值。5reverse()用法：arrayObject.reverse()。作用：将数组中的元素反向排列。,5reverse()用法：arrayObject.reverse()。作用：将数组中的元素反向排列。6shift()用法：arrayObject.shift()。作用：删除并返回数组的第一个元素。7slice()用法：arrayObject.slice(start,end)。作用：返回一

11、个新的数组，包含从 start 到 end的 arrayObject 中的所有元素。8sort()用法：arrayObject.sort()。作用：对数组元素排序。9splice()用法：arrayObject.splice(index,howmany,element1,.,elementN)。作用：为数组删除并添加新元素。10toString()用法：arrayObject.toString()。作用：将数组转换为字符串，并返回结果。,数学内置对象方法,1abs(x)用法：Math.abs(x)。a=-1;Math.abs(a)=1;作用：返回数的绝对值。2acos(x)用法：Math.ac

12、os(x)。作用：返回数的反余弦值。3asin(x)用法：Math.asin(x)。作用：返回数的反正弦值。4atan(x)用法：Math.atan(x)。作用：返回数的反正切值。5atan2(y,x)用法：Math.atan2(y,x)。作用：计算两个变量的反正切值。,6ceil(x)用法：Math.ceil(x)。作用：返回对一个数进行四舍五入后的值。7cos(x)用法：Math.cos(x)。作用：返回数的余弦值。8exp(x)用法：Math.exp(x)。作用：返回e为底的x指数。9floor(x)用法：Math.floor(x)。作用：返回四舍五入的最小值。10log(x)用法：Ma

13、th.log(x)。作用：返回数的自然对数（底为e）。11max(x,y)用法：Math.max(x.)。作用：返回参数中的最大值。,12min(x,y)用法：Math.min(x.)。作用：返回参数中的最小值。13pow(x,y)用法：Math.pow(x,y)。作用：返回x的y次幂。14random()用法：Math.random()。作用：返回0至1的随机函数。15round(x)用法：Math.round(x)。作用：对数进行四舍五入后取整。16sin(x)用法：Math.sin(x)。作用：返回数的正弦值。17sqrt(x)用法：Math.sqrt(x)。作用：返回数的平方根。,18

14、tan(x)用法：Math.tan(x)。作用：返回数的正切值。19valueOf(x)用法：mathObject.valueOf()。作用：返回一个 Math 对象的原始值。,日期内置对象方法,1Date()用法：Date()。作用：返回当天的时间日期。2getDate()用法：dateObject.getDate()。作用：返回当月中的第几天，返回值为1至31，且该方法需要与Date对象配合使用。3getDay()用法：dateObject.getDay()。作用：返回一周中的第几天，返回值为0至6，该方法需要与Date对象配合使用。4getMonth()用法：dateObject.get

15、Month()。作用：返回当前的月份，返回值为0至11，且该方法需要与Date对象配合使用。5getFullYear()用法：dateObject.getFullYear()。作用：返回一个表示年份的 4 位数字。6getYear()用法：dateObject.getYear()。作用：返回表示年份的两位或四位的数字。,yyy,7getHours()用法：dateObject.getHours()。作用：返回日期对象的小时数，即返回值是 0（午夜零点）到 23（晚上 11 点）之间的一个整数。8getMinutes()用法：dateObject.getMinutes()作用：返回日期对象的分钟

16、数，返回值是 0 59 之间的一个整数。9getSeconds()用法：dateObject.getSeconds()。作用：返回日期对象的秒数，返回值是 0 59 之间的一个整数。10getMilliseconds()用法：dateObject.getMilliseconds()。作用：返回日期对象的毫秒数，返回值是 0 999 之间的一个整数。11getTime()用法：dateObject.getTime()。作用：返回自1970年1月1日午夜零点到现在的毫秒数。12getTimezoneOffset()用法：dateObject.getTimezoneOffset()。作用：返回本地时

17、间和格林威治时间之间的时差，以分钟为单位。,13getUTCDate()用法：dateObject.getUTCDate()。作用：根据国际时间确定返回Date对象是月中的第几天，返回值为1至31。14getUTCDay()用法：dateObject.getUTCDay()。作用：根据国际时间返回Date对象的星期数，返回值为0至6。15getUTCMonth()用法：dateObject.getUTCMonth()。作用：根据国际时间返回Date对象的现在月份，返回值为0至11。16getUTCFullYear()用法：dateObject.getUTCFullYear()。作用：根据国际时

18、间返回Date对象的完整4位数年份。17getUTCHours()用法：dateObject.getUTCHours()。作用：根据国际时间返回Date对象的小时，返回值为0至23。18getUTCMinutes()用法：dateObject.getUTCMinutes()。作用：根据国际时间返回Date对象的分钟，返回值为0-59。,19getUTCSeconds()用法：dateObject.getUTCSeconds()。作用：根据国际时间返回Date对象的秒数，返回值为0至59。20getUTCMilliseconds()用法：dateObject.getUTCMilliseconds

19、()。作用：根据国际时间返回Date对象的毫秒，返回值为0至999。21parse()用法：Date.parse(datestring)作用：返回自1970年1月1日午夜零点至指定日期的毫秒数。22setDate()用法：dateObject.setDate(day)。作用：设定Date对象的某一日。23setMonth()用法：dateObject.setMonth(month,day)作用：设置Date对象的月份。24setFullYear()用法：dateObject.setFullYear(year,month,day)。作用：设置Date对象的年份。,25setYear()用法：da

20、teObject.setYear(year)。作用：设置Date对象的年份。26setHours()用法：dateObject.setHours(hour,min,sec,millisec)。作用：设置Date对象的小时数。27setMinutes()用法：dateObject.setMinutes(min,sec,millisec)。作用：设置Date对象的分钟数。28setSeconds()用法：dateObject.setSeconds(sec,millisec)。作用：设置Date对象的秒数。29setMilliseconds()用法：dateObject.setMillisecond

21、s(millisec)。作用：设置Date对象的毫秒数。30setTime()用法：dateObject.setTime(millisec)。作用：要设置的日期和时间据 GMT 时间 1997 年 1 月 1 日午夜之间的毫秒数。,31setUTCDate()用法：dateObject.setUTCDate(day)。作用：根据国际日设定某一天。32setUTCMonth()用法：dateObject.setUTCMonth(month,day)。作用：根据国际日设置Date对象的月份。33setUTCFullYear()用法：dateObject.setUTCFullYear(year,mo

22、nth,day)。作用：根据国际日设置Date对象的年份。34setUTCHours()用法：dateObject.setUTCHours(hour,min,sec,millisec)。作用：根据国际日设置Date对象的小时。35setUTCMinutes()用法：dateObject.setUTCMinutes(min,sec,millisec)。36setUTCSeconds()用法：dateObject.setUTCSeconds(sec,millisec)。作用：根据国际日来设置Date对象的秒数。,37setUTCMilliseconds()用法：dateObject.setUTCM

23、illiseconds(millisec)。作用：根据国际日设置Date对象的毫秒数。38toString()用法：dateObject.toString()。作用：将Date对象转换为字符串。39toGMTString()用法：dateObject.toGMTString()。作用：根据格林威治时间把Date对象转换为字符串，并返回结果。40toUTCString()用法：dateObject.toUTCString()。作用：根据国际时间把Date对象转换为字符串，并返回结果。41toLocaleString()用法：dateObject.toLocaleString()。作用：根据本地时

24、间把Date对象转换为字符串。并返回结果。42UTC()用法：Date.UTC(year,month,day,hours,minutes,seconds,ms)。作用：根据国际时间计算，为从1970年1月1日午夜至今所经过的时间，以毫秒为单位。43valueOf()用法：dateObject.valueOf()作用：返回日期对象的原始值。,14.10 校验,通常情况下，用户通过submit按钮提交表单，收集的信息发送到Web服务器上。JavaScript可用来在数据被送往服务器前对 HTML表单中的输入数据进行验证。验证表单中的数据主要包括：表单的是否为空。表单的输入日期是否合法。密码表单于确

25、认密码表单是否一致。用户名和密码表单与数据库注册密码是否一致。Email表单的输入是否合法。,14.11 JavaScript事件,JavaScript的程序使用事件驱动模型进行网页的动态交互。网页中的每个元素都可以产生某些可以触发JavaScript函数的事件，发生事件的类型不同，生成事件类型也不同。JavaScript包括以下事件：onabort中断图像加载时触发 onbur元素失去焦点时触发 onchange用户改变元素值时触发 onclick鼠标单击对象时触发 ondblclick鼠标双击对象时触发 onerror装载图像过程中出现错误时触发 onfocus元素获得焦点时触发 onke

26、ydown键盘键，返回false取消默认动作时触发 nkeypress按下或按住键盘键，响应几个键的组合时触发 onkeyup释放键盘键时触发,14.11 JavaScript事件,onload加载某个页面、图像或文件时触发 onmousedown按下鼠标按键时触发 onmousemove移动鼠标时触发 onmouseout鼠标从某元素上移开时触发 onmouseover鼠标被移到某个元素之上时触发 onmouseup释放鼠标键时触发 onreset单击表单请求的重置按钮时触发 onresize调整窗口或框架的尺寸时触发 onselect选中文本时触发 onsubmit单击表单提交按钮时触发

27、onunload退出页面时触发,14.12 Cookie脚本,cookie是存储于客户端浏览器的信息，可以记录用户的用户名、密码、以及浏览的网页和日期等信息。例如，当用户首次访问某些需要动态交互的网页时（典型的是在注册/登录论坛中使用），需要填写用户名和密码，用户名和密码将存储在客户端的cookie中。当再次访问该网页时，用户名和密码会从cookie中取出，这样可以提高效率，给用户带来方便。但是，这就对系统的安全性提出了较高的要求。cookie中的内容大多数经过了加密处理，因此一般用户看到的只是一些毫无意义的字母数字组合，只有服务器的处理程序才知道它们真正的含义。,Cookie的属性,cook

28、ie是Document对象的属性，可以对网页的cookie进行创建操作、读取操作、修改操作以及删除操作。cookie包含了4个可选属性expires、path、domain、secure，分别控制它的生存周期、可见性、安全性。expires用于指定cookie生存周期，默认情况下，cookie是暂存的，也就是说当关闭浏览器后信息值将消失，可以使用expires指定cookie的终止信息的时间，一旦超过了这个终止时间，cookie将存储在cookie中的信息删除。path用于指定与cookie关联在一起的网页。取值可以是一个目录或路径。domain用于指定有效域名。secure指定了cookie

29、的值如何在用户和服务器间传递。,Cookie的存储、读取和删除,1.Cookie的存储function setCookie(c_name,value,expiredays)var exdate=new Date()exdate.setDate(exdate.getDate()+expiredays)document.cookie=c_name+=+escape(value)+(expiredays=null)?:;expires=+exdate.toGMTString()2.Cookie的读取function getCookie(c_name)if(0)c_start=document.coo

30、kie.indexOf(c_name+=)if(c_start!=-1)c_start=c_start+c_name.length+1 c_end=document.cookie.indexOf(;,c_start)if(c_end=-1)c_end=return unescape(document.cookie.substring(c_start,c_end)return,3.Cookie的删除function delCookie(c_name,value)var exdate=new Date()exdate.setTime(exdate.getTime()-1)document.cookie=c_name+=+escape(value)+;expires=+exdate.toGMTString(),Cookie的存储、读取和删除,yyy,