JavaScript语言.docx

JavaScript语言第一章 JavaScript入门 第二章 使用变量和内置函数自动更新网页第三章 满足浏览器的需要第四章 制作翻转图第五章 打开和操纵窗口第六章 编写自己的JavaScript函数第七章 通过表单提供和接收信息第八章 通过数组和循环记录信息第九章 计时事件第十章 使用框架和图像地图第十一章 验证表单、消息字符串及与服务器端程序协作第十二章 通过cookie保存访客信息第十三章 DHTML第十四章 AJAX基础第十五章 JavaScript和Ajax中的XML第十六章 服务器端Ajax第十七章 综合应用实例：共享的To Do列表第十八章 调试JavaScript和Ajax附录B：学习资源附录C：JavaScript对象和函数参数附录D 第15章的意大利语翻译程序和第17章的To Do列表应用程序本书代码都可以在中找到第一章 JavaScript入门JavaScript嵌入于Html页面文件中，主要功能有1、使页面产生动态效果。2、根据访问者操作执行相应的任务。3、获取用户和网页的信息。4、改变网页属性，如游览窗口的尺寸、页面的背景色或文字颜色等。5、控制各种表单（Form），可在访问者机器上检查表单填写项的错误，如填写邮箱的格式等等。【重要】嵌入于HTML文本的.或.中。javascript的内容以上格式虽然在所有的游览器中也有效，但最好还是遵循官方的格式： JavaScript的形态JavaScript的内容如果你觉得需要更清晰一点，还可以显示声明脚本需要那个版本的JavaScript支持。如：但是，并非所有的游览器都会检测language属性中的版本号。当然，不检测版本号的浏览器。就是不支持JavaScript1.5。在一般情况下，使用JavaScript有两种方法：一种是直接将JavaScript所有的源代码嵌入HTML中使用，另一种是将JavaScript的源代码保存至”*js”外部文件，然后再HTML文本的指定位置进行使用。下面这个标签演示如何对外部JavaScript文件进行读取。 能防止JavaScript源代码泄露。？JavaScript可以嵌入HTML的任何部分，只是在传统上将JavaScript嵌入至head部分或body部分当在方法中写入字符串是，必须用双引号将字符串包起来，而当在双引号中还要再次使用双引号时，就应该使用单引号。与HTML不同，JavaScript区分字母的大小写。DUAM网站的Cafe不适用JavaScript.【游览器版本不符或不支持运行时，可将JavaScript源代码编写在注解内，这样就不会运行JavaScript代码，以防发生错误】JavaScript的注解处理方法1/注解内容一般用于一行的注解(没有结束标志)方法2/*注解内容*/用于两行的注解方法3用于两行以上的注解补充知识点处理不支持JavaScript脚本的情况尽管绝大多数浏览器都支持JavaScript脚本，但仍有少量的浏览器不支持它，也有些用户为了安全性将JavaScript脚本设置为禁用状态。在进行JavaScript脚本编程时，使用注释标记对和标记对可以解决这一问题。你的浏览器不支持JavaScript。空格与换行在JavaScript中会忽略程序中的空格、换行和制表符，除非这些符号是字符串或正则表达式中的一部分。因此可以在排版的程序中随意使用这些符号来进行排版，让代码更加易于阅读和理解。可由可无的分号在JavaScript中，可以使用分号来代表一个语句结束，也可以使用回车代表一个语句的结束；做JS开发非常麻烦。因为各个厂商的浏览器，甚至同一厂商的不同版本的浏览器，对JS的支持程度以及支持内容都有差异。所以我们今后在做JS开发时，要注意同时测试多个主流浏览器。第二章 使用变量和内置函数自动更新网页【声明变量】var 变量名=属性值 ；-属性值若是字符串用 标注。变量的命名规则：(1) 初始字符必须是一个字母、下划线或一个美元符号，但后续字符也可以使用数字(2) 不允许使用空格(3) 变量区分大小写(4) 不能使用保留字。即不能使用JavaScript语言本身使用的一些术语。【注意】var name=cloud;var age=20;var age1=22;var age2=23;document.write(name+年龄是+age);/完整的是window.document.write(name+.);document.write(age1+age2);/-若括号内是同一个数值型，则他们自动能累加！或相乘。显示为cloud年龄是2045-输出不是 2223，而是他们的和！JavaScript中的引号如果你写了下面这样的代码：onClick = “alert(“off to Book of JavaScript”);”JavaScript就会认为第2个双引号与第一个双引号时对应的，就会混淆。因此，当需要在引号中使用引号时，一定要确保一个使用双引号，另一个使用单引号。此外，撇号也可能会引起问题例：onClick=”alert(Heres the Book of JavaScript page, youre gonna love it);”遗憾的是，JavaScript会把Heres和youre中的撇号当成单引号，并导致混淆。如果确实需要显示撇号，那么需要对他们使用反斜杠()来进行转义，如下：onClick=”alert(Heres the Book of JavaScript page, youre gonna love it);”把一个反斜杠放在一个特殊字符前面，是告诉JavaScript输出该字符，而不是解释该字符。部分函数【检测变量类型】-typeof()var age=10;var name=cloud;var c;document.write(age变量是+typeof(age)+类型);document.write(name变量是+typeof(name)+类型);document.write(c变量是+typeof(c)+类型);显示为age变量是number类型name变量是string类型c变量是undefined类型 【消息提示框】-alert()【警告信息提示】alert(信息内容)；【确认信息提示】confirm(信息内容)；var ret= confirm(你喜欢小舟吗？);if (ret=true)alert(喜欢);thenalert(不喜欢);【接收输入】-prompt().只接收字符串形式的var name=prompt(你的名字？);alert(name);var age=prompt(你几岁了？);alert(age);【调用时间日期】-Date()function showDate()var today =new Date();var year =today.getFullYear();/年份，但具体格式在各浏览器间都各不相同var month =today.getMonth();/以整数011表示月份var day =today.getDate();/以整数131表示每月中的天var week =today.getDay();/以整数表示的星期几，0表示星期日，1表示星期一var hour =today.getHours();/以整数023表示的小时var minute=today.getMinutes();/以整数059表示的分钟var second=today.getSeconds();/以整数059表示秒var time =today.getTime();/以毫秒表示的当前时间，其中0表示1970年1月1日00:00:00alert(year+年+(month+1)+月+day+日+hour+:+minute+:+second+星期+week);第三章 满足浏览器的需要检测浏览器方法快捷但粗糙的浏览器检测var browser_name = navigator.appName;输出browser_name得到浏览器名，例：微软的IE浏览器为”MicrosoftInternetExplorer”但这些字符串在浏览器之间也存在差异，例如后面的5.0，6.0什么的，如果你只关心某人是否在使用4.0或以上版本的浏览器，可以使用parseFloat()函数从navigator.appVersion字符串中找出版本号。parseFloat()函数会查找并从字符串中取得一个类似浮点数(带小数点的数)的字符，因此，下面这行代码：var browser_version=paresFloat(navigator.appVersion); 更精确的浏览器检测JavaScript中还有另一个包含与在用浏览器相关信息的变量-navigator.userAgent。这个变量同时标识了浏览器制造商和版本号。但是，与navigator.appVersion的情况类似，这个字符串的格式同样在浏览器之间存在差异。由于navigator.userAgent字符串之间的差异，通过简单的方法不能提取出我们想要的信息。有人已写出了浏览器嗅探程序-替你完成了艰苦的浏览器识别任务的JavaScript代码。可以在/Chapter03中找到从http:/jsbrwsniff,strings下载到的brwsniff.js文件。使用这个文件需把它放在包含脚本的网页所在的同一个文件夹中再添加以下几行JavaScript代码：var browser_info = getBrowser();var browser_name = browser_info0;var browser_version = browser_info1;brwsniff.js中的一个函数取得navigator.userAgent字符串，并将该字符串与函数已知的不同浏览器版本进行比较。确定了浏览器名称和版本之后，函数会把相应的信息装载到变量browser_info中网页重定向window.location.href = “网页名”;if-then语句if-then语句和Java类似，几乎一样。判断大小符号含义也一样，可嵌套。或“|”和 与”&”表达式操作也一样。if( )else if( )else可循环嵌套；【条件运算符】-“？”和“：”的组合var age=10;var name=”cloud”;var status=(age=18)?成人:孩子;/-判断语句，是否大于等于18，若是则定义为“成人”，若否定义为孩子document.write(他是个+status);var thisIsThau =(name=”sun”);/-判断赋值语句，若相等，则返回true，若否则返回false.document.write(“判断为”+thisIsThau);显示为他是个孩子 判断为 false /?没验证 第四章 制作翻转图触发鼠标事件onClick()鼠标单击事件；onMouseOver()鼠标覆盖或是进入到了组件事件；onMouseOut()鼠标离开组件事件；onMouseMove()鼠标在组件上移动时调用(事件);onMouseUp()鼠标键抬起来时触发；onMouseDown()鼠标键按下时触发；例：【鼠标左键按下去、放开事件改变字体大小】-onMouseDown/onMouseUpfunction down()text1.style.fontSize=50pt;function up()text1.style.fontSize=20pt;Cloud【替换图像】/name=“”命名.onClick=”window.document.my_image.src=ooxx.gif ; ”. /触发事件变换图片路径【单击链接而不离开当前页面】ClickMe在onClick后面的引号中放入”return false;”，就是告诉JavaScript阻止浏览器打开连接的href属性中的URL，这种方式在禁用了JavaScript的浏览器依旧“有用”，document对象和对象的属性document对象包含网页中的所有图像、链接、表单和其他元素。要编写图像属性替换等代码，必须要告诉JavaScript在窗口中找到document对象，然后再在document对象中找到要修改的image对象，最后再修改图像的src属性：window.document.my_image.src=”oxoxo.gif” ;在document对象中包含image对象，而document对象也有自己的属性。例如，document对象的背景颜色属性叫bgColor，这就是我们为什么能通过window.document.bgColor=red改变文档背景颜色的原因。每个对象都有自己的一组属性。图像的预载如过图像比较大或者是网速比较慢时，替换图像等动作会出现延迟，解决它可以预载图像，将它们保存在浏览器的缓存中，当光标移动到以图像上时，浏览器会首先检查它的缓存中是否存在替换图像。如果有，浏览器就不需要再下载图像，因此替换速度会更快。var new_image=new Image();/或 var new_image=new Image(width,height);/创建新的image对象。new_image.src=”my_good_image.gif”;设置new_image对象的src，强制浏览器把相应的图像下载到它的缓存中。当图像保存到浏览器的缓存中后，就可以在替换图像时避免延迟了。第五章 打开和操纵窗口由于窗口也是对象，我们可以像操纵其他对象一样操纵窗口，通过使用JavaScript的据点可以调用你命名的window对象的一个方法：window_name.method_name();打开设置新窗口打开新窗口：car widow_name=window.open(“some_url”,”html_name”, “feature1,feature2,feature3.”);操纵外观window.open(“参数1”,”参数2”,”参数3”);参数1=URL参数var window_name=window.open(“”,”html_name”)参数2=HTML名称参数窗口的HTML名称只有当你希望用户在一个不同的页面上单击HTML链接时，把页面载入该窗口时有用。参数3=特性参数：JavaScript窗口特性location设定是否显示地址输入栏(yes , no)directories定义是否显示目录按钮(yes , no)resizable定义是否可以通过它的边界进行大小缩放控制status定义是否在窗口下端添加状态栏toolbar定义是否显示浏览器的工具栏menubar定义是否显示菜单条width,height定义新窗口的宽与高(单位：pixel)scrollbars定义是否激活垂直和水平滚动条height=x定义窗口的高度为x像素left=x窗口距离屏幕左边x像素位置top=x窗口距离屏幕定边x像素位置width=x窗口宽度为x像素隐藏或显示窗口focus()将窗口提到前面blur()将窗口放到后面例：Navigation window窗口属性status属性：通过status属性修改出现在状态栏中的内容例：opener属性：一个窗口打开一个新窗口时，新窗口会通过opener属性记住它的父窗口。可以通过这个属性访问其父类窗口，并对其进行操作。例：在新窗口的一个链接中改变父窗口中状态栏的内容。put howdy into the status bar of the original window其他window对象的方法缩放窗口：window.resizeTo(500,200);/改变宽度和高度window.resizeBy(10,-5);/宽度增加10像素，高度减少5像素移动窗口:window.moveTo(0,0); /移动到窗口左上角window.moveBy(5,10);/移动窗口的当前位置，向上移动10像素，向左移动5像素。获取用户屏幕的大小：window.screen.availHeightwindow.screen.availWidth 第六章 编写自己的JavaScript函数JavaScript函数的基本结构。function functionName()lines of JavaScript;参数的传递类似Java【函数的定义和调用】function message()alert(测试函数);/-单击时调用函数,【type=button】自定义按钮，type=submit、提交专用按钮。第七章 通过表单提供和接收信息表单基础文本输入框密码输入框复选框 选项单选按钮选项1选项2选项3 /name相同为同一组的，选择时只能在其中选择一个 checked表示已选的按钮下拉菜单和滚动列表/表示可选择的数量option1option2option3读取和设置表单元素window.document.my_Forms_name.text_name.value/读取window.document.表单名.文本框名.文本框输入的值。window.document.my_Forms_name.text_name.value= ?/设置文本框text,密码框password,文本域textarea都符合上述规则复选框：它没有value属性，却有一个checked布尔值属性，如果单击了某个复选框，该复选框的值会变成true,若单击前就处于选中状态，则checked会等于falsewindow.document.表单名.复选框名.checked;/读取选项true/false单选按钮：同一列名的单选按钮会组成一个同名列表，要引用某个单选按钮，可以使用radio_button_name项目符号这样表示，且第一个选项为0;window.document.formName.readio_button_group0.checked;也可以设置value并获取它。下拉菜单和滚动列表类似上述单选按钮，但其选择的属性是selectedwindow.document.formName.the_group0.selected;注：如果一个选项框的checked因某种原因不存在，JavaScript会以特殊关键字underfined作为响应，然后要求JavaScript查找未定义元素的checked值时，会导致JavaScript因混乱而出错。为确保存储在数组中的元素有定义来防止出现此类错误：if(window.document.the_form.element5!=underfined)var checked_value=window.document.the_form.element5.checked;但也可以设置value.并且获取他不同表单元素可以处理的事件表单元素事件触发事件的操作按钮onClick()鼠标单击复选框onClick()鼠标单击单选按钮onClick()鼠标单击文本框onChange()修改文本框的内容，然后单击文本框的外部文本区onChange()同上下拉菜单或选择列表onChange()改变了下拉菜单或选择列表中的选项表单onSubmit()在某个文本框中按了回车键或单击了提交按钮缩短引用是否注意到上述的第一行window.document.the_form.the_url.value标记太长了，事实上，在标记中，查找其中的the_url值可以用 this.the_url.value来代替。且只要是在范围内都可以这么表示。表单的简写形式 设置id=”?”可以在表单或是任何HTML元素带上id属性，并通过相同的getElementById()方法来引用或是设置这个值。但还是建议在JavaScript操纵表单时使用前面的方法。【表单引用】例：function calc()var num1,num2,sum;num1=document.myform.n1.value;/-.value可读可写num2=document.myform.n2.value;sum=add(num1,num2);document.myform.n3.value=sum;function add(a,b)var num3;num3=Number(a)+Number(b);return num3; 求和：x: y: 结果：第八章 通过数组和循环记录信息JavaScript的内置数组：即单选按钮复选框会自动创建很多数组while循环基本形态类似：while(条件)循环体；【数组声明】var week=new Array(7);/-var 数组名=new Array(数组个数)week0=星期日;/-数组名从0开始，定义数组document.write(week0);例：设置全选按钮：设置一个命名为selectAll的复选框（名字可自定义），设定时间onClick()触发事件函数。编写函数，主要思路：用循环语句一个一个循环选择，并将各个复选框.checked=window.document.formName.selectAll.checked; 88关联数组使用字符串（而不是数字）来保存值。例：var phone_book=new Array();phone_book“dave_thau”=”(415) 555-5555”;phone_book“information”=”(415) 555-1212”;第九章 计时事件 通过setTime()设置警报：setTime(“alert(you have been on this page for 3 seconds！);”,3000);第一个参数是执行的程序，3000毫秒(即3秒)设置倒计时运行时间通过clearTimeout()取消警报、要取消setTimeout()，首先要对计时对象进行命名，将其保存在一个变量中：var my_timeout=setTimeout(“gotoAnswerPage();”,10000);创建时的这行代码名为my_timeout。除非使用clearTimeout()在取消计时，否则JavaScript会在10秒后调用函数gotoAnswerPage(),要取消计时可用下面的代码：clearTimeout(my_timeout);这行代码会找到名为my_timeout的计时并取消它。重复计时操作function myFunction()语句体the_timeout=setTimeout(“myFunction()”,1000);/每1秒循环执行一次；对表单元素使用parseInt()例：var first_number =2;var second_number=first_number+1;变量second_number中保存的值为21var first_number=2;var second_number=parseInt(first_number)+1;变量second_number中保存的值为3.在重新计时之前清除计时如果单击一次按钮会触发一次计时器，那么多次单击会多次触发计时器而导致计时器运行速度加快，要避免这个问题就要修改这个按钮，在重新设置计时之前清除旧计时。例：onClick=”clearTimeout(the_timeout); upDate();”/清除之后再运行程序。在函数外部声明保存计时的变量在使用变量的函数内部不使用var在声明内部变量，这个变量就可以被页面中所有的JavaScript脚本所修改。计时器也可以随时被clearTimeout;第十章 使用框架和图像地图框架基础/行分左30% .具体看HTML文档具体略。第十一章 验证表单、消息字符串及与服务器端程序协作字符串处理1indexOf()方法用于查找特定字符串(称作子字符串)在字符串中的位置。告诉我们子字符串开始的位置(字符串中的第一个字符位置是0，第二个字符的位置是1，依次类推)。如果字符串中不包含指定的子字符串，indexOf()返回-1.作为对indexOf()的补充，lastIndexOf()方法会给出一个字符或子字符串最后出现的位置。2chatAt()方法在字符串中查找一个特殊位置上的字符。要查找保存在某一字符串中第1个位置上的字符，可以使用下面的代码：var the_character = the_word.charAt(1);/返回在此位置上的字符3subString()方法与chatAt()方法类似，但它可以从一个字符串中取得一个完整的子字符串，而不只是一个字符串。其格式如下：var the_subString = the_string.substring(from, until);/from是要取得的字符串的第一个字符在字符串中的位置，而until是比要去的的字符串的最后位置大1的数，换句话说，子字符串会从调用的第一个参数指示的位置开始截取到(但不包含)调用的第二个参数的位置为止。4split()方法可以使URL中提取域名稍微容易点。split()方法使用一个字符或一组字符，将一个字符串分成一组字符串，然后把这些子字符串载入到一个数组中，例：var my_friends =”eenie,meenie,miney,mo”;var friend_array=my_friends.split(“,”);这个例子把my_friends字符串按逗号分开，创建了一个friend_array数组，这个数组中的元素0是eenie，元素1是meenie，元素2是miney，元素3是mo.通过正则表达式匹配字符串模式正则表达式就是字符串的模式，下面这行代码定义了一个非常简单的字符串模式：var my_first_expression = /yellow/;首先，正则表达式与数值和字符串一样，也是保存在一个变量中，其次，正则表达式以斜杠字符为开头和结尾。这与定义字符串的引号字符有几分相似。也可以像下面这样定义一个正则表达式：var my_first_expession = new RegExp(“yellow”);如何使用：通过正则表达式能做的最基本的事情，就是测试一个字符串中是否包含这个正则表达式，为此，需要使用test()方法，如下：var my_regexp = /yellow/;var my_string = “they call me mellow yellow.”;if(my_regexp.test(my_string) =true)alert(“String contains yellow.”);elsealert(“Nothing yellow here”);具体的说，正则表达式中可以包含文本字符、占位符合可能的操作符的组合。可以使用点(.)来匹配任意字符。例如：下面的正则表达式：/r.n/会匹配包含r后跟任意字符，然后跟n的任一字符串，比如： he ran home、see dick run、I dont konw what rn means 和hair net。注意最后一个字符-因为空格也是一个字符，而hair net 中的rn会匹配r空格n。因为句点(.)匹配任意字符，所以通常称它为通配符。如果不想匹配任意字符，而只是想匹配小写字母，可以使用下面的正则表达式：/ra-zn/有时，你可能想匹配点(.)字符本身，那怎么办呢？要匹配特殊的字符，需要使用反斜杠在正则表达式中对他进行转义：/a . marks the end of a sentence/1重复项目匹配两个字符，可以使用/ye . . ow/或是使用*、+和?中的任何一个操作符。其中,*字符的含义是”零或多个前面的项目”，+匹配一个或多个前面的项目，而？匹配零个或一个前面的项目。例：对电子邮件地址进行简单检查的例子var mail_checker=/.+.+. .+/;var the_mail = prompt(“Whats your email address?”,”);if(my_regexp.test(the_mail)=true)alert(“Nice address!”);elsealert(“Thats not legal!”);*、+和？字符可以放在任意字符后面，而不限于通配符。如果出于某些原因，想要检查零个或多个x，那么就可以使用正则表达式/x*/。也可以精确地指定重复多少次，而这需要把表示次数的数字，放到位于要匹配的字符后面的花括号中。例如，可以使用/x3/匹配3个x.如果想匹配3，4或5个x,可是使用/x3,5/,花括号中的顺序是最小次数后跟一个逗号，然后是最大次数。2.开始和结尾正则表达式中有特殊的字符来标记模式的开始和结尾: 标记开始，$标记结尾要匹配以r开头，以n结尾的字符串，而且字符串中间包含零个或多个任意字符，可以使用下面的正则表达式：/r .*n$/3.分组最后一种在验证表单输入时应该知道的正则表达式字符类型是分组字符。假设我们要匹配以com、org、edu或net结尾的字符串。可以定义4个正则表达式每个正则表达式匹配上述的一种字符串然后，通过if-then-else语句检查输入字符串是否与其中的一个匹配。然而，也可以定义一个正则表达式，测试这些子字符串是否存在与字符串中。为此，可以在正则表达式中使用|字符：var good_domains = /(com|org|edu|net)$/;如果写成：var good_domains =/(com|org|edu|net$)/正则表达式会认为结尾的字符$只有在net子字符串后面，因此它会匹配任何位置上的com、org或edu,但只匹配位于字符串结尾处的net。移上介绍的只是验证表单输入时常用的一些正则表达式字符，还有很多没有介绍到。下面附录C中包含更多的正则表达式字符。4.match()方法正则表达式除了能够用来检查字符串中是否包含字符模式，还可以做很多其他的事情，比如，它可以告诉我们匹配的字符是什么，可以将字符串中匹配的部分替换成其他字符串等。要检查字符串中的字符是否与某个正则表达式匹配，可以使用String对象的match()方法。match()通过一个数组返回匹配的值。例：var matches=”hokey pokey”.match(/.ok/);会得到一个数组matches，其中只包含一个项目字符串hok。换句话说，matches0等于hok。但是，在字符串中实际上有两个字符串匹配正则表达式/.ok/; hokey中的hok何pokey中的pok。要通过match()方法找到这两个匹配项，需要在正则表达式后面的反斜杠后添一个g。g表示global（全局匹配），表示正则表达式在匹配时应该查找整个字符串，而不是简单地返回一个匹配项。在这种情况下：var matches =”hokey pokey”.match(/.ok/g);将返回包含两个值的数组：matches0=”hok”和matches1=”pok”。在使用match()方法时，还有一些技巧。有时，正则表达式会匹配一个字符串中的两部分，而你想知道这两部分都是什么.如果字符串是”dave_”，而你的脚本需要记住正则表达式匹配的第一部分”dace_thau”、第二部分”hotmail”以及第三部分”com”。如果想分别保存这些值，需要使用圆括号将希望记住的正则表达式部分括起来：var matches=”dave_”.match(/(.+)(.+).(.+)/);当圆括号中的模式匹配时，数组中的第一个项目是正则表达式匹配的整个字符串，即matches0=应该是dave_。数组中后续的项目将是匹配的字符串：matches1=”dave_thau”, matches2=”hotmail”, matches3=”com”。 第十二章 通过cookie保存访客信息什么是cookieCookie是网站在访客硬盘上保存的少量信息。在你自己的计算机中可以找到cookie，对于Netscape是cookie.txt文件，对于IE则是Cookie文件夹。无论是文件还是文件夹中，你都会看到一长列站点名称，每个站点名称都是一个文本字符串。处于效率和保密的考虑，其中的多数站点文本都是压缩至可能是加密的格式。通过下面的代码，你可以找一找自己查看过的网站，看看它们是否在你的计算机中保存了cookie，为此，在浏览器中输入下面的代码：javascript:alert