有谁帮我解释一段JavaScript代码
发布时间:2025-05-23 07:27:13 发布人:远客网络
一、有谁帮我解释一段JavaScript代码
1、<Script language="Javascript">
2、var x=50,y=60;//浮动图片的初始位置(x,y);
3、//xin表示向右移,yin表示向下移(其实用TurnRight,TurnDown表示这两个变量更易明)
4、var L=T=0;//L=0(left),T(top)=0且都是常量。用来表示外面大框的左上角坐标(0,0)
5、var R=document.body.offsetWidth-document.getElementById("YuId").offsetWidth;
6、//“网页可见域宽度”与“YuId的可见宽度”差,即用R来表YuId可以左右方向移的区间为R(Right,变量名用Horizontal更好)。
7、var B=document.body.offsetHeight-document.getElementById("YuId").offsetHeight;
8、//“网页可见域高度”与“YuId的可见高度”差,即用B来表示YuId上下方向移动的区间为B(Bottom,变量名用vertical更好)。
9、document.getElementById("YuId").style.left=x;
10、document.getElementById("YuId").style.top=y;//这里设YuId的坐标为(x,y)。
11、x=x+step*(xin?1:-1);//如果是向右移,x就加1,不然减1
12、//如果x小于0(即YuId移到了最左边),就开始向右移(即xin=true),x设为0
13、//如果x大于R(即YuId移到了最右边),就开始向左移(即xin=false),x设为可以移动区间的最大值(即R)
14、y=y+step*(yin?1:-1);//如果是向下移,y就加1,不然减1
15、//如果y小于0,(即YuId移到了最上边),就开始向下移(即yin=true),设为0
16、//如果y大于B,(即YuId移到了最下边),就开始向上移(即yin=false),设为可以移动区间的最大值(即B)
17、setTimeout("A()",delay);//延迟delay(10)毫秒后执行这个函数,这样这个函数就可以无限循环下去。
二、JavaScript的目的
1、从今天起我将陆续将 ppk on JavaScript的读书心得发布到这个blog上 ppk是我所景仰的一位web开发者原因无它只是因为作为一个JavaScript的开发者来说他涉及的领域包括web标准可用性无障碍等正是其他开发者所不关注或者故意忽略的并且他写了很多案例测试不同的浏览器总结出JavaScript的接口(API)兼容性成为JavaScript开发者重要参考资料几年如一日这种钻研精神是很多人所缺乏的
2、 ppk在今年月出版了他的书我从去年起就在等的书今天拿到手迫不及待地把第一章阅读完毕果然让人充满惊喜他的功力非同一般虽然只是一个初学者但我认为我已经走在正确的学习道路上我想我若能将学习心得分享能让正在学习的人看到可以一起交流一起进步尽管我不敢确保你能从我这里得到什么启发但我可以确信我这些笔记会比你拷贝粘贴代码的学习方式更正确
3、这本书有十章章名都简洁明了分别是目的背景浏览器准备核心 BOM事件 DOM CSS更改和数据获取从来没有一本书能如此简洁地明确JavaScript的方方面面因此学习不会有太大负担前言不宜过多下面就开始我的第一章学习笔记
4、开篇宗义 JavaScript的目的是为网页增加特别的一层可用性听起来很简单但这条黄金定律经常被人误解就算编写有用的JavaScript开发者可能还是没能结合适当的情景 Web标准运动发展下与当代无障碍的HTML页面的配合更为不妙的是有些开发者不是为网页增加一层可用性而是用整层取代之后果是如果浏览器不支持JavaScript网站就完了
5、 JavaScript是一门由浏览器解释的脚本语言它通过在客户端而不是服务器端处理某些交互比如表单验证创建新菜单来给网站增添可用性传统的网页交互是客户端的一举一动都必须经过服务器端的出来才能反馈回来漫长的等待会让用户崩溃而JavaScript可以在客户端代替服务器端做某些事情(最明显的表单验证)从而提高用户体验
6、随着时代的发展 JavaScript能够处理越来越多的交互问题出现了 JavaScript能做这么多事情到底要多用还是少用?这就有了富与瘦的对决是整个页面都用JavaScript来控制交互还是只增加些许的JavaScript来增强可用性?就是说尽可能地使用JavaScript还是有所节制甚至不用?
7、瘦客户端很大程度上依赖于客户端-服务器的通讯而富客户端尽可能限制额外的数据通讯
8、哪种方式更好?尽管富客户端带来一些可用性益处但瘦客户端可能是更标准的JavaScript用法 Web被认为是文档集合而不是界面集合最明显的证据是浏览器有后退前进的功能让你在文档中跳转而界面会有么?浏览器可以收藏(书签)文档而界面可以么?从无障碍来说瘦客户端也更少出错
9、这种非平衡性是很难解决的富客户端当然也可以在更高级的界面做到前进后退或者收藏也可以做到完美的无障碍这必须需要大量的额外工作但不是每个项目都有超出预算的时间或金钱此外太过专注于可用性而忽略无障碍也是一个问题
10、那么JavaScript的目的是为富客户端还是瘦客户端服务?答案是看情况得看你的网站你的受众你的JavaScript水平
11、 JavaScript分为六个方面分别是核心(Core)浏览器对象模型(BOM)事件(Events)文档对象模型(DOM) CSS变更和数据获取(XMLHttpRequest)
12、上古时代 NetScape领头之时 NetScape是事实标准
13、当代却没有这么简单 ECMA标准化JavaScript Core W C标准化DOM而BOM尚在WHAT WG的标准化中 W C也刚有了XMLHttpRequest的第一份草稿今天 BOM依然遵循NetScape的事实标准而XMLHttpRequest还是遵照Microsoft的原始规范
14、 JavaScript的目的在于为网站增加可用性而不是破坏用户的隐私和安全因此JavaScript不允许读写用户的文件(cookies除外)采取同源策略只允许来自相同域的交互不允许读取历史记录不能为上传文件的表单设置值由JavaScript控制的窗口关闭需经用户确认由JavaScript打开的窗口不能小于×的窗口不能移出屏幕之外
15、探寻历史才能让我们知道JavaScript为什么会被误解得如此深 JavaScript的创造者是Brendan Eich首次在NetScape中实现它的目的是创建一门足够简单的语言让开发者能容易地为网页增加交互只要把代码拷贝过来调整一下就可以这确实令人赞叹很多JavaScript开发者是从拷贝粘贴开始的
16、不幸的是JavaScript生错了名字也生错了语法最初它叫LiveScript但年的时候Java炙手可热 NetScape想搭顺风车于是某产品经理(我想知道她/他是谁呵呵)命令更名命令Brendan Eich让 Javascript像Java这让很多人误认为JavaScript是Java的低级版不能引起严肃程序员的关注
17、年之时 NetScape是王 Microsoft只能照抄这是一个难得的和谐期当然那时候浏览器比起现在来瘦了仅限于表单验证鼠标轮换的一些小花招而已
18、接下来就是影响深远的浏览器大战了为了争夺市场两家浏览器纷纷实现不同的东西谁都想成为事实标准最有名的就是NetScape的document layer和IE的document all(忘记它们吧!)它们让DHTML流行起来
19、年Microsoft以推出良好支持CSS和DOM的IE胜出 NetScape的让位终于有足够的时间让一场革命发生那就是CSS WaSP首先从CSS入手而很多专家也发现/发明了许多浏览器的补救办法让这场革命成为可能
20、年一些先锋们在CSS革命的影响下开始探索新的JavaScript风格更多地关注无障碍改观人们对它的坏名声那就是unobstrusive——把JavaScript从HTML结构层分离出来遗憾的是那些在浏览器大战存活下来的程序员可能还没有发现这条新道路
21、年 Ajax热潮为JavaScript社区注入新的血液但某些方面 Ajax太像DHTML了无障碍是很多Ajax应用的难言之隐这个热潮趋向于关注技术(如何Ajax)而可用性和交互(为何Ajax)却被低估最后各种肿胀的库(现在称为框架)迅速发展起来
22、 Ajax依然全速前进但这会像DHTML一样结果人们渐渐失去兴趣它们会土崩瓦解
三、谁知道JavaScript正则表达式该怎么解析
正则表达式是一个描述字符模式的对象。
JavaScript的RegExp对象和String对象定义了使用正则表达式来执行强大的模式匹配和文本检索与替换函数的方法.在JavaScript中,正则表达式是由一个RegExp对象表示的.当然,可以使用一个RegExp()构造函数来创建RegExp对象,也可以用JavaScript 1.2中的新添加的一个特殊语法来创建RegExp对象.就像字符串直接量被定义为包含在引号内的字符一样,正则表达式直接量也被定义为包含在一对斜杠(/)之间的字符.所以,JavaScript可能会包含如下的代码:var pattern=/s$/;这行代码创建一个新的RegExp对象,并将它赋给变量parttern.这个特殊的RegExp对象和所有以字母"s"结尾的字符串都匹配.用RegExp()也可以定义一个等价的正则表达式,代码如下:var pattern= new RegExp("s$");无论是用正则表达式直接量还是用构造函数RegExp(),创建一个RegExp对象都是比较容易的.较为困难的任务是用正则表达式语法来描述字符的模式.JavaScript采用的是Perl语言正则表达式语法的一个相当完整的子集.正则表达式的模式规范是由一系列字符构成的.大多数字符(包括所有字母数字字符)描述的都是按照字面意思进行匹配的字符.这样说来,正则表达式/java/就和所有包含子串"java"的字符串相匹配.虽然正则表达式中的其它字符不是按照字面意思进行匹配的,但它们都具有特殊的意义.正则表达式/s$/包含两个字符.第一个特殊字符"s"是按照字面意思与自身相匹配.第二个字符"$"是一个特殊字符,它所匹配的是字符串的结尾.所以正则表达式/s$/匹配的就是以字母"s"结尾
的字符串.1.直接量字符我们已经发现了,在正则表达式中所有的字母字符和数字都是按照字面意思与自身相匹配的.JavaScript的正则表达式还通过以反斜杠(\)开头的转义序列支持某些非字母字符.例如,序列"\n"在字符串中匹配的是一个直接量换行符.在正则表达式中,许多标点符号都有特殊的含义.下面是这些字符和它们的含义:正则表达式的直接量字符字符匹配
________________________________
\ XXX由十进制数 XXX指定的ASCII码字符
\ Xnn由十六进制数 nn指定的ASCII码字符
\ cX控制字符^X.例如,\cI等价于\t,\cJ等价于\n如果想在正则表达式中使用特殊的标点符号,必须在它们之前加上一个"\".2.字符类将单独的直接符放进中括号内就可以组合成字符类.一个字符类和它所包含的任何一个字符都匹配,所以正则表达式/ [abc]/和字母"a","b","c"中的任何一个都匹配.另外还可以定义否定字符类,这些类匹配的是除那些包含在中括号之内的字符外的所有字符.定义否定字符尖时,要将一个 ^符号作为从左中括号算起的第一个字符.正则表达式的集合是/ [a-zA-z0-9]/.由于某些字符类非常常用,所以JavaScript的正则表达式语法包含一些特殊字符和转义序列来表示这些常用的类.例如,\s匹配的是空格符,制表符和其它空白符,\s匹配的则是空白符之外的任何字符.正则表灰式的字符类字符匹配
.除了换行符之外的任意字符,等价于[^\n]
\w任何单字字符,等价于[a-zA-Z0-9]
\W任何非单字字符,等价于[^a-zA-Z0-9]
\s任何空白符,等价于[\ t\ n\ r\ f\ v]
\S任何非空白符,等价于[^\ t\ n\ r\ f\ v]
\D除了数字之外的任何字符,等价于[^0-9]
[\b]一个退格直接量(特例)3.复制用以上的正则表式的语法,可以把两位数描述成/\ d\ d/,把四位数描述成/\d\ d\ d\ d/.但我们还没有一种方法可以用来描述具有任意多数位的数字或者是一个字符串.这个串由三个字符以及跟随在字母之后的一位数字构成.这些复杂的模式使用的正则表达式语法指定了该表达式中每个元素要重复出现的次数.指定复制的字符总是出现在它们所作用的模式后面.由于某种复制类型相当常用.所以有一些特殊的字符专门用于表示它们.例如:+号匹配的就是复制前一模式一次或多次的模式.下面的表列出了复制语法.先看一个例子:/\d{2, 4}///匹配2到4间的数字./\w{3}\d?///匹配三个单字字符和一个任意的数字./\s+java\s+///匹配字符串"java",并且该串前后可以有一个或多个空格./[^"]*///匹配零个或多个非引号字符.
正则表达式的复制字符字符含义{n, m}匹配前一项至少n次,但是不能超过m次
?匹配前一项0次或1次,也就是说前一项是可选的.等价于{0, 1}
+匹配前一项1次或多次,等价于{1,}
*匹配前一项0次或多次.等价于{0,}4.选择,分组和引用正则表达式的语法还包括指定选择项,对子表达式分组和引用前一子表达式的特殊字符.字符|用于分隔供选择的字符.例如:/ab|cd|ef/匹配的是字符串"ab",或者是字符串"cd",又或者"ef"./\d{3}|[a-z]{4}/匹配的是要么是一个三位数,要么是四个小写字母.在正则表达式中括号具有几种作用.它的主要作用是把单独的项目分组成子表达式,以便可以像处理一个独立的单元那种用*、+或?来处理那些项目.例如:/java(script)?/匹配的是字符串"java",其后既可以有"script",也可以没有./(ab|cd)+|ef)/匹配的既可以是字符串"ef",也可以是字符串"ab"或者"cd"的一次或多次重复.在正则表达式中,括号的第二个用途是在完整的模式中定义子模式。当一个正则表达式成功地和目标字符串相匹配时,可以从目标串中抽出和括号中的子模式相匹配的部分.例如,假定我们正在检索的模式是一个或多个字母后面跟随一位或多位数字,那么我们可以使用模式/ [a-z]+\ d+/.但是由于假定我们真正关心的是每个匹配尾部的数字,那么如果我们将模式的数字部分放在括号中(/ [a-z]+(\d+)/),我们就可以从所检索到的任何匹配中抽取数字了,之后我们会对此进行解析的.代括号的子表达式的另一个用途是,允许我们在同一正则表达式的后面引用前面的子表达式.这是通过在字符串\后加一位或多位数字来实现的.数字指的是代括号的子表达式在正则表达式中的位置.例如:\1引用的是第一个代括号的子表达式.\3引用的是第三个代括号的子表达式.注意,由于子表达式可以嵌套在其它子表达式中,所以它的位置是被计数的左括号的位置.例如:在下面的正则表达式被指定为\2:
/([Jj]ava([Ss]cript))\sis\s(fun\w*)/
对正则表达式中前一子表达式的引用所指定的并不是那个子表达式的模式,而是与那个模式相匹配的文本.这样,引用就不只是帮助你输入正则表达式的重复部分的快捷方式了,它还实施了一条规约,那就是一个字符串各个分离的部分包含的是完全相同的字符.例如:下面的正则表达式匹配的就是位于单引号或双引号之内的所有字符.但是,它要求开始和结束的引号匹配(例如两个都是双引号或者都是单引号):/['"] [^'"]*['"]/
如果要求开始和结束的引号匹配,我们可以使用如下的引用:/( ['"]) [^'"]*\1/\1匹配的是第一个代括号的子表达式所匹配的模式.在这个例子中,它实施了一种规约,那就是开始的引号必须和结束的引号相匹配.注意,如果反斜杠后跟随的数字比代括号的子表达式数多,那么它就会被解析为一个十进制的转义序列,而不是一个引用.你可以坚持使用完整的三个字符来表示转义序列,这们就可以避免混淆了.例如,使用\044,而不是\44.下面是正则表达式的选择、分组和引用字符:字符含义
|选择.匹配的要么是该符号左边的子表达式,要么它右边的子表达式
(...)分组.将几个项目分为一个单元.这个单元可由*、+、?和|等符号使用,而且还可以记住和这个组匹配的字符以供此后引用使用
\n和第n个分组所匹配的字符相匹配.分组是括号中的子表达式(可能是嵌套的).分组号是从左到右计数的左括号数5.指定匹配的位置我们已经看到了,一个正则表达式中的许多元素才能够匹配字符串的一个字符.例如:\s匹配的只是一个空白符.还有一些正则表达式的元素匹配的是字符之间宽度为0的空间,而不是实际的字符例如:\b匹配的是一个词语的边界,也就是处于一个/w字字符和一个\w非字字符之间的边界.像\b这样的字符并不指定任何一个匹配了的字符串中的字符,它们指定的是匹配所发生的合法位置.有时我们称这些元素为正则表达式的锚.因为它们将模式定位在检索字符串中的一个特定位置.最常用的锚元素是 ^,它使模式依赖于字符串的开头,而锚元素$则使模式定位在字符串的末尾.例如:要匹配词"javascript",我们可以使用正则表达式/^ javascript$/.如果我们想检索"java"这个词自身(不像在"javascript"中那样作为前缀),那么我们可以使用模式/\s java\s/,它要求在词语java之前和之后都有空格.但是这样作有两个问题.第一:如果"java"出现在一个字符的开头或者是结尾.该模式就不会与之匹配,除非在开头和结尾处有一个空格.第二:当这个模式找到一个与之匹配的字符时,它返回的匹配的字符串前端和后端都有空格,这并不是我们想要的.因此,我们使用词语的边界\b来代替真正的空格符\s进行匹配.结果表达式是/\b java\b/.下面是正则表达式的锚字符:
^匹配的是字符的开头,在多行检索中,匹配的是一行的开头
$匹配的是字符的结尾,在多行检索中,匹配的是一行的结尾
\b匹配的是一个词语的边界.简而言之就是位于字符\w和\w之间的位置(注意:[\b]匹配的是退格符)
\B匹配的是非词语的边界的字符6.属性有关正则表达式的语法还有最后一个元素,那就是正则表达式的属性,它说明的是高级模式匹配的规则.和其它正则表达式语法不同,属性是在/符号之外说明的.即它们不出现在两个斜杠之间,而是位于第二个斜杠之后.javascript 1.2支持两个属性.属性 i说明模式匹配应该是大小写不敏感的.属性 g说明模式匹配应该是全局的.也就是说,应该找出被检索的字符串中所有的匹配.这两种属性联合起来就可以执行一个全局的,大小写不敏感的匹配.例如:要执行一个大小不敏感的检索以找到词语"java"(或者是"java"、"JAVA"等)的第一个具体值,我们可以使用大小不敏感的正则表达式/\b java\b/i.如果要在一个字符串中找到"java"所有的具体值,我们还可以添加属性 g,即/\b java\b/gi.以下是正则表达式的属性:
g执行一个全局的匹配,简而言之,就是找到所有的匹配,而不是在找到第一个之后就停止了除属性 g和 i之外,正则表达式就没有其它像属性一样的特性了.如果将构造函数 RegExp的静态属性 multiline设置为 true,那么模式匹配将以多行的模式进行.在这种模式下,锚字符 ^和$匹配的不只是检索字符串的开头和结尾,还匹配检索字符串内部的一行的开头和结尾.例如:模式/Java$/匹配的是"Java",但是并不匹配"Java\nis fun".如果我们设置了 multiline属性,那么后者也将被匹配:RegExp.multiline= true;正则表达式(regular expression)对象包含一个正则表达式模式(pattern)。它具有用正则表达式模式去匹配或代替一个串(string)中特定字符(或字符集合)的属性(properties)和方法(methods)。要为一个单独的正则表达式添加属性,可以使用正则表达式构造函数(constructor function),无论何时被调用的预设置的正则表达式拥有静态的属性(the predefined RegExp object has static properties that are set whenever any regular expression is used,我不知道我翻得对不对,将原文列出,请自行翻译)。创建:
一个文本格式或正则表达式构造函数
正则表达式构造函数: new RegExp("pattern"[,"flags"]);
[注意]文本格式的参数不用引号,而在用构造函数时的参数需要引号。如:/ab+c/i new RegExp("ab+c","i")是实现一样的功能。在构造函数中,一些特殊字符需要进行转意(在特殊字符前加"\")。如:re= new RegExp("\\w+")正则表达式中的特殊字符字符含意
\做为转意,即通常在"\"后面的字符不按原来意义解释,如/b/匹配字符"b",当b前面加了反斜杆后/\b/,转意为匹配一个单词的边界。
对正则表达式功能字符的还原,如"*"匹配它前面元字符0次或多次,/a*/将匹配a,aa,aaa,加了"\"后,/a\*/将只匹配"a*"。
^匹配一个输入或一行的开头,/^a/匹配"an A",而不匹配"An a"
$匹配一个输入或一行的结尾,/a$/匹配"An a",而不匹配"an A"
*匹配前面元字符0次或多次,/ba*/将匹配b,ba,baa,baaa
+匹配前面元字符1次或多次,/ba*/将匹配ba,baa,baaa
?匹配前面元字符0次或1次,/ba*/将匹配b,ba
(x)匹配x保存x在名为$1...$9的变量中
[xyz]字符集(character set),匹配这个集合中的任一一个字符(或元字符)
[^xyz]不匹配这个集合中的任何一个字符
\cX这儿,X是一个控制符,/\cM/匹配Ctrl-M
\d匹配一个字数字符,/\d/=/[0-9]/
\D匹配一个非字数字符,/\D/=/[^0-9]/
\s匹配一个空白字符,包括\n,\r,\f,\t,\v等
\S匹配一个非空白字符,等于/[^\n\f\r\t\v]/
\w匹配一个可以组成单词的字符(alphanumeric,这是我的意译,含数字),包括下划线,如[\w]匹配"$5.98"中的5,等于[a-zA-Z0-9]
\W匹配一个不可以组成单词的字符,如[\W]匹配"$5.98"中的$,等于[^a-zA-Z0-9]。