引子
q去Qh们对于Javascript一直报着轻视的态度Qh们认为它又慢又容易出错，而且在不同浏览器中解释也不一P但是现在QJavascript确实实的在改变我们的网l，来多的网l和APP应用开始用Javascript。今天，我们来讲讲我们Z么会有这U观念，回顾Javascript的历史来诊断他的现状Q同旉过一些片D|表明Javascript同其他开发语a的本质不同，唯有如此我们才能明白ZJavascriptq么重要?/p>
早期的迷?/strong>
从某U程度上来讲QJavascript是Java的恶兄?Java’s evil twin)。他们同岁，都于1995q以Beta的版本出玎ͼq且都在ơ年1996q推Z1.0版本。在语法上他们也很相q，从名UC来看他们像是一家h一栗?br />
我们W一ơ听说Javascript是在1995q_当时Netscape推出了Navigator 2.0的Beta版本Q这个版本中没有包含JavascriptQ但是有对于Java Applet的支持。同ӞNetscape 宣布面内嵌的语aLiveScript?br />
q个声明q没有引起太多的注意Q在当时Java Applet是一个热门的技术，当时对于Z么Netscape要在览器中内嵌两种语言也不是十分清楚，N有什么事情LiveScript能做而Java做不了的?
2个月以后QLiveScript看到了曙光，在Navigator 2.0B3中，它被重新命名为JavaScript。这ơ改动吸引了众多人的x?#8220;OhQ他肯定不能体现他的价倹{?#8221;?#8220;Z么Sun要让q么个玩h搭Java的RQ?#8221;我至今仍Zؓq次改名是一个失败的LQ因Z引v了无的困惑Q很多非~程人员从来都没有明白过Java和Javascript是两个不同的东西?br />
改名字的另外一个媄响是l微的，但是我认为改善了q个语言的接受程度。与Java的关pMɘq门语言看v来ƈ不是一个全新的东西。事实上Q当时Java本n都还不是十分成熟Q也q没有到1.0Q但是外界对于Java成熟状况的认知要比本w高出很多。例如，?995q_时代杂志Java选ؓ当年的十大新产品之一。同Ӟ市面上已l有很多关于Java的书c。所以，当Netscape这Ҏ术命名ؓJavaScriptQ其意图很明昑ְ是表明当时的Java开发团体是使用和评价JavaScript的最佳h选?br />
在怀疑的潮中，凭借JavaScript与Java Applet的通信和控制能力，JavaScript开始出现在一些应用中。所以，那些对Java感兴的人开始觉得有了学习JavaScript的必要?br />
Javascript像一个玩P它是面向对象的，所有的东西都是公有的，没有装。另外，你无法创建真正的子类Q在实例变量和方法之间ƈ没有真正的区别，q就像一个灾难。你可以在Q何时候将一个变量变成一个方法。在q方面我q不是孤独的Q虽然对于面向对象的l节每个人的理解都有所不同Q但是JavaE序员几乎无一例外的认为，JavaScriptq不是一门严肃的~程语言Q我们也不像用它来做些什么?/p>
附加的伤?/strong>
在早期的时候，JavaScriptq没有什么真正的技术问题，它是~慢又充满风险的Qƈ且只在Netscape下工作。后来IE也支持了Q但q不是完全兼宏Vh们吹捧他用来~写面的appletsQ但是它q不能检applet的失败。它从来没有被广泛的使用q，很快他就成ؓ了一个分母，Z仅仅用它来完成那些可靠的dQƈ且避免在其他的地方用?br /> 什么是JavaScript能够可靠的支持的Q闪动的、基于图像的视觉效果。h们开始制造一些炫目的效果。Netscape引导了这个趋势，在页面中使用令h生厌的图层干CZҎ常内容的览。那些各U各样闪动、滚动的效果让我们认个标{直就是网l的原罪。到处都充斥着闪动的Banner、滚动的Banner、状态栏里蟩动的文字、随时可能弹出的对话框?#8230;各种各样的滥用还在不断l。Miscorsoft也开始谈论DHTMLQ但是不久DHTML变成了Buggy、Slow、Unmaintable|站的代名词?br /> 对了Q不要忘记安全问题。一般来Ԍ当你构徏一个图灵完?Turing-Complete)的编E语aӞ你就需要特别小心安全问题。Netscape做的不够好，早期的Javascript中存在漏z，而且׃很长旉才完全解x?br /> l果是什么？很多的有技术头脑的用户关闭了浏览器的Javascript支持。要知道Q在1996q的时候可以被UCؓ?#8220;技术头脑（Technically Savvy)”的h员站的比重相当的高。所以，q些Z不再依赖于JavaScriptQ因会导致用户不使用你的|站?br /> 那些使用JavaScript的用户做的也不够好。那些严谨的E序员完全抛弃了JavaScriptQ但是设计师和页面h员补充了q来。早期的书籍中都提供了糟p的JavaScript实例Q但是很去从语义上对它q行分析、阐q。（David Flanagan是个例外Q让事情更糟p的是，有些人（也许是大多数人）Ҏ没从书中学习过JavaScriptQ他们只是从一个网站现有的代码中拷贝，修改Q然后粘贴到自己的网站上让它工作Q到最后都不知道ؓ何这些代码能够正常运行?br /> 即大家都是从例子开始学习JavaScriptQ只要保证两件事情这也许会成Z个很好的{略。第一个就是大安学习好的例子Q但昄JavaScriptq不属于q种情况。第二种情况是q种语言应该和学习它的h所知道的另外一U语a怼Q但是很不幸Q虽然JavaScript从语义上看来和Java非常相近Q但实际上JavaScript来自一个和Java完全不同的编E语a家族。JavaScript是NewtonScript、Self、Smalltalk…和Lisp语言的一个直pd裔。Waldemar HorwatQ一位在JavaScript早期产生重大影响的工Eh员说Q我更愿意把JavaScript认ؓ是Common Lisp的另一UŞ式。这个说法有些夸张，但是如果你知道这两种语言Q你׃很容易发C者之间确实存在很多相g处?br /> 所以状况就变的来不好，一门与之前q泛传播的语a有很大不同的新语aQ被一些没有经验的~程者推q，其他的编Eh员Follow了他们的例子。更多的用户Z安全考虑关闭了JavaScript的支持，q有有经验的E序员推荐大安免用JavaScript?br /> 上面的这些还不够Q浏览器大战g一触即发，儿JavaScript被选作了一U武器。战争中的双斚w不断的发展JavaScriptQ有时候甚x意引入了很多不兼容特性。JavaScript此时已经变得更庞大，但同时也更容易引起问题?br /> 也难怪没有h会喜Ƣ她?/p>
帝国的重?/strong>
在那D|_我还是不断听到更多关于JavaScript的消息。关于基于prototype和面向对象的Ҏ的介绍L让我很好奇，我曾l看到过的教材里从来没有提到q这些，也许是作者本Z没有必要的语a背景dq些概念联系h。同ӞZ开始指出由于浏览器造成了多错误，而不是JavaScript本n?br /> 后来QIE赢了QNetscape投降了，q一阶段的浏览器大战l束了。Miscrosoft开始将他们的bug光芒覆盖到CSS领域QQ何处理过IE6下页面开发的工程师都应该深有感受Q，而Mozila的团队则开始认真的考虑兼容性的问题。除了一些根p固的区别Q想要修改他们必d量的修改源码Q这个小l修复大多数的不同，于是IE和Mozilla/Firefox下的JavaScript变得更可控了。其他的开发者也更加的有q可循?br /> JavaScript和浏览器的内|支持开始进入了一D늨固的发展时期。在我们大家都忙着写自qJavaScript代码的时候，几乎没有人注意到一个具有传奇色彩的Ҏ引?XMLHttpRequest。最重要的DHTMLҎ，Ajax的重要部分，悄悄的加入到了IE中来。Microsoft的Outlook组引入了这个ActiveX控g来Outlook支持|络讉K?00q的Ajax Experience的大会上QDion Almaer和Ben Galbraith做了很多关于XMLHttpRequest的工作，但是在MozillaW一ơ引入XMLHttpRequest支持的时候的官方文g中，他的Ҏ根本就没有提到?br /> 那段旉有很多JavaScript的活动，在JavaScript的支持下QMacromedia为Flash提供了脚本语a支持。Adobe也在不断努力使他们的很多E序可以使用JavaScript来控制和扩展。AppleJavaScript嵌入了它的Sherlock应用中。当ӞMozilla目也做Z一个重要决定，他们大部分的览器都可以支持JavaScript。很明显QJavaScript已经不再仅仅是一个网语aQ而成ZE序中嵌入的动态的、运行时扩展的编E语a的首选。其中的原因也许是当时大家或多或的都会一些JavaScriptQ还有当时存在两个高质量的嵌入扩展（SpiderMonkey c语言~写QRhino Java语言~写Q?/p>
?000q的时候，一些hQ著名的Brent Ashley、Alex Russell、Douglas CrockfordQ开始注意到JavaScriptI竟能做什么。Brend开始研IJavaScript与服务器通信的方法，提出了我们现在公认的Ajax Style。而且在当时浏览器对于XMLHttpRequest支持不是很完善的时候，他增加或者Ş成了很多完成q项处理的很多y妙的Ҏ。他建立了一个网?#8220;Remote Scripts Resources”Qƈ且编写了一个JavaScript Remote Scripting (JSRS)库来支持不同览器的兼容性?br /> Alex Russel建立了一个netWindow目Q意囑־立一个支持富UI、可~程、图形环境的|页Q同时带有完全可拖动的窗口和其他组ӞnetWindows变成了nWigetsQƈ且最l催生了Dojo ProjectQ一个当前重要的Ajax框架?br /> Douglas Crockford一直在研究JavaScript语言的丰富性，最后他发布了一pd有徏设性的文章Q例如：The World’s Most Misunderstood Programming LanguageQ在q些文章中，他指ZJavaScript在用中的一些技巧和一些缺炏V?br /> Brent、Alex和Doug当时的声音都很薄弱，像旷野中的呼声Q但是当最后其他的Web开发社区准备将注意力投向JavaScript的时候，他们所作的q些工作让我们的生活变得更加单了?br /> 我在2000q到2003q中D늚时候，对于JavaScript的关注都只是一些零星的片段Q我实没有投入太多的关注，我沉在Java的乐土中Q闲暇的时候研I一下RubyQ而正是这D늻历ؓ我再一ơ的认识JavaScript提供了准备?br /> ?003q的6月，我的朋友l我演示了netWindowsQ当我从地板上捡h的下巴来以后QAfter i pick my jaw up off the floorQ作者还真是q默Q，我朋友告诉我说Alexq个Z是疯子，我如梦方醒开始认真的研究JavaScriptQ现在看来，当时Google也有一帮h在做同样的事情?/p>
伟大的革?/strong>
每个看这文章的人都应该知道一些AjaxW一ơ引爆屏q的情景Q今天我来简短的说一些完整的情节?/p>
W一个引h注意的Ajax应用是Gmail。很明显Q他先是下蝲了很多的JavaScriptQ然后在后台不断C服务器进行通信Q避免页面的h。他实lh非常q印象Q同时也l其他的技术团队带来不知所措的感觉。我当时在想Google一定是有一个非常成熟的定制化工h开发如此复杂的客户/服务器端理?br /> 真正让我明白的是Google的Google Suggest。现在的Z定很熟悉Q当我们输入的时候，通过与服务器的交互将我们可能需要的词条昄出来供我们选择?br /> Google Suggest在两个方面让我印象深刻，W一是他是如此简单以至于大多数的技术h员都能够明白他的工作原理q且应用到自q|络目中；另外一个是Google Suggest针对用户的每ơkeyup事gq行相应和通信Q让我看到同服务器通信是如此的单，我完全被折服了?br /> 不久以后又袭来了Google MapsQJess James Garret形成了Ajaxq个术语Q从此以后讨论变得更加方ѝ?br /> 从此以后QAjax变成了我们处理网l应用的的标准方法。而且现在我们有了更多的工具和W三方库选择Q但我们又陷入另一个难题：选择太多了?/p>
停止担心Q爱上DOM
我已l阐明了Z么JavaScript有这个名声的众多原因Q其中有好的也有坏的Q在q众多的原因中，我只想重复一条，他是如此重要Q能够解释ؓ什么很多有l验的程序员l给被自ql验所蒙蔽?br />
q一部分作者以一个例子来说明了JavaScript的编写方式和Java是多么的不同Q最后提Z一些有意义的ȝQ?br />
Functions are first-class objects.
Methods are just functions attached to objects.
You can add methods to classes at any time (even after instances have been created).
Individual objects can have their own methods.
“Class constructors” are just functions.
Functions, being objects, can have their own properties.
You can call functions with fewer (or more) arguments than the function is declared to take.
If no value is passed for a function argument, it gets the value undefined.
ȝ
最后让我们每一位JavaScript开发者来正确的认识JavaScriptQ用它来完成他应当完成的d?/p>
Ajax is a gateway drug for JavaScript.
[参考资料]
1、Learn To love Javascript http://vanderburg.org/Writing/LearningToLoveJavaScript/
2、NewtonScript http://en.wikipedia.org/wiki/NewtonScript
3、Java In Best Top Ten of 1995 http://www.time.com/time/magazine/article/0,9171,983903,00.html
]]>
框架Frames最主要功用?分割"视窗Q每个"视H?能显CZ同的HTM L文gQ不同框架之间可以互?interact)Q这是说不同框架之间可以交换讯息与资料。例?假设您开了两个framesQ第一个frame可显CZ的目录，W二个frame则显C章节的具体内容?br /> 框架可以屏q分割成不同的区域，每个区域有自qURLQ通过Frames[]数组对象来实C同框架的讉K。实际上框架对象本n也一cȝ口，它承了H口对象的所有特征，q拥有所有的属性和Ҏ。下面我们先看一下框架的例子。见?-1所C?br />
?-1 框架对象
| <HTML> <HEAD> </HEAD> <Frameset Rows="20%,80%"> <frame src="test9_1.html"> <Frameset Cols="50%,50%"> <frame src="test9_2.html"> <frame src="test9_3.html"> </Frameset> </Frameset> </HTML> |
以上HTML标识屏q分成三个框架。先窗口分成以二行为单位的H口Q之后再按分成二个窗口。ƈ在相应的框架中放入自qHTML文档?br /> 通过[Framset ]告诉览器您要设|几个框Ӟrowsq项参数告诉览器您惛_视窗分割成几列；?colsq项参数是告诉浏览器您想视H分割成几行?br /> 可以用很多组?<frameset...> tags 视H分割得更复杂?br /> 可以l每个frame一?名字" (name)。frame的名字在JavaScript语法中的C非常重要? 可以?<src> 告诉览器您要蝲入哪一?HTML文g?br />
二、如何访问框?/strong>
在前面我们介l过使用document.forms[]实现单一H体中不同元素的讉K。而要实现框架中多H体的不同元素的讉KQ则必须使用window对象中的Frames属性。Frames属性同样也是一个数l，他在 父框枉中ؓ每一个子框架设有一V通过下标实现不同框架的访?
parent.frames[Index1].docuement.forms[index2]
通过parent.frames.length定H口中窗体的数目?除了使用数组下标来访问窗体外q可以用框架名和窗体名来实现各元素的访Q?br /> parent.framesName.decument.formNames.elementName.(m/p)
三、范?/strong>
下面我们通过一个具体的实例, 来说明利用JavaScript脚本在WEB中实现更为复杂的信息交互。该例子是在一个多H口中实现窗体信息的动态交?在程序中首先在浏览器H口中制作三个用于窗体交互的H口,每个H体H口实现不同信息的动态交互?br /> tset9.htmlZ调用文档它首先将H口划分为具有二行的H体,后再将W二行的H体划分为具有二列的H体Q?br /> test9-1.html为显C标题文档；
test9_2.html为第二框架文档其中需要注意的?
通过JavaScript脚本所C的“云南?#8221;?#8220;四川?#8221;分别改ؓ“昆明?#8221;?#8220;成都?#8221;Q?br /> test7_3.html为第三框架文档?br />
主调文档
主要作用是将H口划分为具有二行的H体,后再将W二行的H体划分为具有二列的H体?br /> Test9.htm
| <HTML> <HEAD> </HEAD> <Frameset Rows="10%,90%"> <frame src="test9_1.htm"> <Frameset Cols="40%,60%"> <frame src="test9_2.htm"> <frame src="test9_3.htm"> </Frameset> </Frameset> </HTML> W一个框?br /> 主要作用是显C标题文档?br /> Test9_1.htm <HTML> <HEAD> </HEAD> <H2>使用框架实现WEB交互</H2> </HTML> |
W二个框?br /> 主要作用是实C互。可以通过JavaScript脚本所C的“云南?#8221;?#8220;四川?#8221;分别改ؓ“昆明?#8221;?#8220;成都?#8221;?br /> Test9_2.htm
| <HTML> <HEAD> </HEAD> <Body> <Form name="test9_1"> 请选择城市Q?lt;BR> <Select name="select1" Multiple> <Option>云南?br /> <Option>四川?br /> <Option>贵州?br /> <Option>׃?br /> <Option>江苏?br /> <Option>江?br /> <Option>安徽?br /> <Option>沛_?br /> </select><BR> <HR> <Input Type="Submit" name="" value="提交"> <Input Type="reset" name="" value="复位"> </Form> <pre> <script language="JavaScript"> document.test9_1.elements[0].options[0].text="昆明?; document.test9_1.elements[0].options[1].text="成都?; </script> </pre> </Body> </HTML> |
W三个框?br /> 主要作用是实C互?br /> Test9_3.htm
| <HTML> <HEAD> </HEAD> <Body> <Form name="test9_2"> 误入用户名Q?br /> <Input Type="text" name="text1" Value="" Size=20><BR> <HR> 请选择: <Input Type="Checkbox" name="checkbox1" Value="qb">全部信息<BR> <Input Type="Checkbox" name="checkbox2" Value="bf">部分信息<BR> <Input Type="Checkbox" name="checkbox3" Value="sy">所有城?lt;br> <HR> <Input Type="Submit" name="" value="提交"> <Input Type="reset" name="" value="复位"> <BR> </Form> <script language="JavaScript"> document.test9_2.elements[0].value="力_和社会保?; document.test9_2.elements[1].checked=true; document.test9_2.elements[2].checked=true; document.test9_2.elements[3].checked=false; </script> </Body> </HTML> |
?9-2 在浏览器中结?br />
本讲介绍框架中的基本元素的主要功能和使用Q利用JavaScript脚本可以非常方便、灵zd实现Web面更ؓ复杂的信息交互，q是HTML标识语言所不能具备的。从中可以看出JavaScript是多么的吸引众多的Web设计人员?/span>
]]>
一、窗体基知识
H体对象可以使设计h员能用窗体中不同的元素与客户机用L交互Q而用不着在之前首先进行数据输入，可以实现动态改变Web文档的行为?br />
Q、什么是H体对象
H体QFormQ?它构成了Web面的基本元素。通常一个Web面有一个窗体或几个H体Q用Forms[]数组来实C同窗体的讉K?br />
| <form Name=Form1> <INPUT type=text...> <Input type=text...> <Inpup byne=text...> </form> <form Name=Form2> <INPUT type=text...> <Input type=text...> </form> |
在Forms[0]中共有三个基本元素，而Forms[1]中只有两个元素?br /> H体对象最主要的功能就是能够直接访问HTML文档中的H体Q它装了相关的HTML代码Q?
<Form Name ="表的名称" Target ="指定信息的提交窗? action ="接收H体E序对应的URL" Method =信息数据传送方?get/post) enctype ="H体~码方式" [onsubmit ="JavaScript代码"]> </Form> |
Q、窗体对象的Ҏ
H体对象的方法只有一?-submit()ҎQ该Ҏ主要功用是实现H体信息的提交。如提交MytestH体,则用下列格式：
document.mytest.submit()
Q、窗体对象的属?/font>
H体对象中的属性主要包括以下：elements name action target encoding method.
除Elements外，其它几个均反映了H体中标识中相应属性的状态，q通常是单个窗体标识；而elements常常是多个窗体元素值的数组Q例Q?br /> elements[0].Mytable.elements[1]
Q、访问窗体对?/font>
在JavaScript中访问窗体对象可׃U方法实玎ͼ
Q１Q通过讉KH体
在窗体对象的属性中首先必须指定其窗体名Q而后可以通过下列标识讉KH体如：document.Mytable()?br /> Q２Q通过数组来访问窗?br /> 除了使用H体名来讉KH体外，q可以用窗体对象数l来讉KH体对象。但需要注意一点，因窗体对象是由浏览器环境的提供的Q而浏览器环境所提供的数l下标是?到n。所以可通过下列格式实现H体对象的访问：
document.forms[0]
document.forms[1]
document.forms[2]...
Q、引用窗体的先决条g
在JavaScript中要对窗体引用的条g是：必须先在面中用标识创徏H体Qƈ定义窗体部分放在引用之前?br />
二、窗体中的基本元?/strong>
H体中的基本元素由按钮、单选按钮、复选按钮、提交按钮、重|按钮、文本框{组成?br /> 在JavaScript中要讉Kq些基本元素Q必通过对应特定的窗体元素的数组下标或窗体元素名来实现。每一个元素主要是通过该元素的属性或Ҏ来引用。其引用的基本格式见?
formName.elements[].methadName (H体?元素名或数组.Ҏ)
formName.elemaent[].propertyName(H体?元素名或数组.属?
下面分别介绍Q?br />
Q、Text单行单列输入元素
功能Q对Text标识中的元素实施有效的控制?br /> 基本属性：
NameQ设定提交信息时的信息名U。对应于HTML文档中的Name?br /> ValueQ用以设定出现在H口中对应HTML文档中Value的信息?br /> defaultvalueQ包括Text元素的默认?br /> 基本ҎQ?br /> blur()Q将当前焦点Ud后台?br /> select()Q加亮文字?br /> 主要事gQ?br /> onFocusQ当Text获得焦点Ӟ产生该事件?br /> OnBlurQ从元素失去焦点Ӟ产生该事件?br /> OnselectQ当文字被加亮显C后Q生该文g?br /> onchangeQ当Text元素值改变时Q生该文g?br /> 例：...
| <Form name="test"> <input type="text" name="test" value="this is a javascript" > </form> ... <script language ="Javascirpt"> document.mytest.value="that is a Javascript"; document.mytest.select(); document.mytest.blur(); </script> |
Q、textarea多行多列输入元素
功能Q实施对Textarea中的元素q行控制?br /> 基本属?br /> nameQ设定提交信息时的信息名Uͼ对应HTML文档Textarea的Name?br /> ValueQ用以设定出现在H口中对应HTML文档中Value的信息?br /> Default valueQ元素的默认倹{?br /> ҎQ?br /> blur()Q将输入焦点失去
select()Q将文字加亮?br /> 事gQ?br /> onBlur:当失去输入焦点后产生该事?br /> onFocus:当输入获得焦点后Q生该文g
Onchange:当文字值改变时Q生该事g
Onselect:当文字加亮后Q生该文g
Q、Select选择元素
功能Q实施对滚动选择元素的控制?br /> 属性：
name:讑֮提交信息时的信息名称Q对应文档select中的name?br /> Length:对应文档select中的length
options:l成多个选项的数l?br /> selectIndex;该下标指明一个选项
select在中每一选项都含有以下属性：
Text:选项对应的文?br /> selected:指明当前选项是否被选中
Index:指明当前选项的位|?br /> defaultselected:默认选项
事gQ?br /> OnBlurQ当select选项失去焦点Ӟ产生该文件?br /> onFocas:当select获得焦点Ӟ产生该文件?br /> Onchange:选项状态改变后Q生该事g?br />
Q、Button按钮
功能Q实施对Button按钮的控制?br /> 属性：
Name:讑֮提交信息时的信息名称Q对应文档中button的Name?br /> Value:用以讑֮出现在窗口中对应HTML文档中Value的信息?br /> ҎQ?br /> click()该方法类g一个按下的按钮?br /> 事gQ?br /> onclick当单击button按钮Ӟ产生该事件?br /> ?Q?br />
| <Form name="test"> <input type="button" name="testcall" onclick=tmyest()> </form> ... <script language="javascirpt"> document.elements[0].value="mytest"; //通过元素讉K ?br /> document.testcallvalue="mytest"; // 通过名字讉K </script> ..... |
Q、checkbox查框
功能Q实施对一个具有复选框中元素的控制?br /> 属性：
name:讑֮提交信息时的信息名称?br /> Value:用以讑֮出现在窗口中对应HTML文档中Value的信息?br /> Checked:该属性指明框的状态true/false.
defauitchecked:默认状?br /> ҎQ?br /> click()该方法得框的某一个项被选中?br /> 事gQ?br /> onclick:当框的选被选中Ӟ产生该事件?
Q、radio无线按钮
功能Q实施对一个具单选功能的无线按钮控制?br /> 属性：
name:讑֮提交信息时的信息名称Q对应HTML文档中的radio的name相同
value:用以讑֮出现在窗口中对应HTML文档中Value的信息，对应HTML文档中的radio的name?br /> length:单选按钮中的按钮数目?br /> defalechecked:默认按钮?br /> checked:指明选中q是没有选中?br /> index:选中的按钮的位置?br /> ҎQ?br /> chick():选定一个按钮?br /> 事gQ?br /> onclick:单击按钮Ӟ产生该事件?br />
Q、hidden:隐藏
功能Q实施对一个具有不昄文字q能输入字符的区域元素的控制?br /> 属性：
name:讑֮提交信息时的信息名称Q对应HTML文档的hidden中的Name?br /> Value:用以讑֮出现在窗口中对应HTML文档中Value的信息，对应HTML文档hidden中的value?br /> defaleitvalue:默认?br />
Q、Password口o
功能Q实施对h口o输入的元素的控制?br /> 属性：
Name:讑֮提交信息时的信息名称Q对应HTML文档中password中的name?br /> Value:用以讑֮出现在窗口中对应HTML文档中Value的信息，对应HTML文档中password中的Value?br /> defaultvalu:默认?br /> Ҏ
select():加亮输入口o域?br /> blur():使这丢失passward输入焦点?br /> focus():获得password输入焦点?br />
Q、submit提交元素
功能Q实施对一个具有提交功能按钮的控制?br /> 属性：
name:讑֮提交信息时的信息名称Q对应HTML文档中submit?br /> Value:用以讑֮出现在窗口中对应HTML文档中Value的信息，对应HTML文档中value?br /> Ҏ
click()相当于按下submit按钮?br /> 事gQ?br /> onclick()当按下该按钮Ӟ产生该事件?br />
三、范?/strong>
下面我们演示通过点击一个按钮（redQ来改变H口颜色Q点?#8220;调用动态按钮文?#8221;调用一个动态按钮文档?br /> test8_1.htm
| <html> <head> <Script Language="JavaScript"> //原来的颜?br /> document.bgColor="blue"; document.vlinkColor="white"; document.linkColor="yellow"; document.alinkcolor="red"; //动态改变颜?br /> function changecolor(){ document.bgColor="red"; document.vlinkColor="blue"; document.linkColor="green"; document.alinkcolor="blue"; } </script> </HEAD> <body bgColor="White" > <A href="test8_2.htm"> 调用动态按钮文?lt;/a> <form > <Input type="button" Value="red" onClick="changecolor()"> </form> </BODY> </HTML> |
?
动态按钮程序?br /> test8_2.htm
<HTML> <HEAD> </HEAD> <p align="center"> </p> <div align="center"><center> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td width="100%"><form name="form2" onSubmit="null"> <p><input type="submit" name="banner" VALUE="Submit" onClick="alert('You have to put an \'action=[url]\' on the form tag!!')"> <br> <script language="JavaScript"> var id,pause=0,position=0; function banner() { // variables declaration var i,k,msg=" q里输入你要的内?;// increase msg k=(30/msg.length)+1; for(i=0;i<=k;i++) msg+=" "+msg; // show it to the window document.form2.banner.value=msg.substring(position,position-30); // set new position if(position++==msg.length) position=0; // repeat at entered speed id=setTimeout("banner()",60); } // end --> banner(); </script></p> </form> </td> </tr> </table> </center></div> <p> </p> <BODY> <A href="test8_1.htm"> q回</a> </BODY> </HTML> |
?
本讲介绍了用JavaScript脚本实现Web面信息交互的方法。其中主要介l了H体中的基本元素的主要功能和使用?/span>
]]>
一、对象的定义
JavaScript对象的定义，其基本格式如下：
Function ObjectQ属性表Q?br /> This.prop1=prop1
This.prop2=prop2
...
This.meth=FunctionName1;
This.meth=FunctionName2;
...
在一个对象的定义中，可以对象指明其属性和Ҏ。通过属性和Ҏ构成了一个对象的实例。如以下是一个关于University对象的定义：
Function university(name,city,creatDate URL)
This.name=name
This.city=city
This.creatDate=New Date(creatDate)
This.URL=URL
其基本含义如下：
NameQ指定一?#8220;单位”名称?
CityQ?#8220;单位”所在城市?
CreatDateQ记载university对象的更新日期?
URLQ该对象指向一个网址?br />
二、创建对象实?/strong>
一旦对象定义完成后Q就可以对象创徏一个实例了Q?br /> NewObject=New object();
其中Newobjet是新的对象，Object已经定义好的对象。例Q?br />
| U1=New university(“云南?#8221;Q?#8220;昆明?#8221;Q?January 05,199712:00:00","http://www.YN.KM") U2=New university(“云南电子U技大学”Q?#8220;昆明”,"January 07,1997 12:00:00","htlp://www.YNKJ.CN") |
三、对象方法的使用
在对象中除了使用属性外Q有时还需要用方法。在对象的定义中Q我们看到This.meth=FunctionName语句Q那是为定义对象的Ҏ。实质对象的Ҏ是一个函数FunctionNameQ通过它实现自q意图?br /> 例在university对象中增加一个方法，该方法是昄它自己本w，q返回相应的字串?br /> function university(name,city,createDate,URL)
This.Name=Name;
This.city=city;
This.createDate=New Date(creatDate)Q?br /> This.URL=URLQ?br /> This.showuniversity=showuniversity;
其中This.showuniversity是定义了一个方法－Q－showuniversity()?br /> 而showuniversity()Ҏ是实现university对象本n的显C?br /> function showuniversity()
For (var prop in this)
alert(prop+="+this[prop]+"");
其中alert是JavaScript中的内部函数Q显C其字符丌Ӏ?br />
四、JavaScript中的数组
使用New创徏数组
JavaScript中没有提供像其它语言h明显的数l类型，但可以通过function定义一个数l，q用New对象操作W创Z个具有下标的数组。从而可以实CQ何数据类型的存储?br /> a、定义对象的数组
Function arrayName(size){
This.length=Size;
for(var X=; X<=size;X++)
this[X]=0;
Reture this;
}
其中arrayName是定义数l的一个名子，Size是有xl大的|1-sizeQ，xl元素的个数。通过for循环对一个当前对象的数组q行定义Q最后返回这个数l?br /> 从中可以看出QJavaScript中的数组是从1到sizeQ这与其它０到size的数l表C方法有所不同Q当然你可根据需要将数组的下标由Q到size调整刎ͼ到sizeQ１,可由下列实现:
Function arrayName (size)
For (var X=0; X<=size;X++)
this[X]=0;
this.lenght=size;
Return this;
从上面可以看Ҏ是只是调整了this.lenght的位|，该位|是用于存储数组的大的。从而调整后的数l的下标与其它语言一致。但误者注意正是由于数l下标顺序由Q到sizeQ得JavaScript中的对象功能更加强大?br /> b、创建数l实?/font>
一个数l定义完成以后，q不能马上用，必须数组创徏一个数l实例：
Myarray=New arrayName(n);
q赋于初|
Myarray[1]=“字串Q?#8221;Q?br /> Myarray[2]=“字串Q?#8221;Q?br /> Myarray[3]=“字串Q?#8221;Q?br /> ...
Myarray[n]=“字串n”Q?br /> 一旦给数组赋于了初值后Q数l中具有真正意义的数据了，以后可以在E序设计q程中直接引用?br /> 创徏多维数组
Function creatMArray(row,col){
var indx=0;
this.length=(row*10)+col
for(var x=1;x<=row;x++)
for(var y=1;y<=col;y++)
indx=(x*10)+y;
this[indx]=””;
}
myMArray=new creatMArray();
之后可通过myMArray[11]、myMArray[12]、myMArray[13]、myMArray[21]、myMArray[22]、myMArray[23]?br /> …来引用?br /> 内部数组
在Java中ؓ了方便内部对象的操作,可以使用H体(Forms)、框?Frames)、元?element)、链?links)和锚(Anchors)数组实现对象的访问?br /> anchors[]:使用《A name=“anchorName“》标识来建立锚的链接?br />
links[]: 使用<A href=”URL”>来定义一个越文本链接V?br />
Forms[]: 在程序中使用多窗体时,建立该数l?br />
Elements[]:在一个窗口中使用从个元素?建立该数l?br />
Frames[]:建立框架?使用该数l?br />
anchors[]用于H体的访?它是通过《form name=“form1”》所指定?,link[]用于被链接到的锚点的讉K(它是通过《a href=URL》所指定?。Forms[]反映H体的属?而anchors[]反映Web面中的链接属性?br /> 有关锚数l的文档Q?br /> <HTML>
<HEAD>
<BODY>
<A NAME=”MyAnchorsName1”> 定义W一个锚?br /> HTML Code
<A NAME=”MyAnchorsName2”> 定义W二个锚?br /> HTML Code
<A HREF=”#MyAnchorsName1”>建立锚的链接
<A HREF=”#MyAnchorsName2K?gt; 建立锚的链接
….
该文档段建立了两面全锚的链接,可通过Anchors[]讉Kq些锚。document.Anchors[0]反映W一个锚,而document.Anchors[1]反映W二个锚的有关信息?br />
五、范?/strong>
范例1Q一个动态文字滚动的例子?br /> test5_1.htm
| <html> <head> <title></title> <script LANGUAGE="JavaScript"> with (top.window.location) {baseURL = href.substring (0,href.lastIndexOf ("/") + 1)} total_toc_items = 0; current_overID = ""; last_overID = ""; browser = navigator.appName; version = parseInt(navigator.appVersion); client=null; loaded = 0; if (browser == "Netscape" && version >= 3) client = "ns3"; function toc_item (img_name,icon_col,width,height) { if (client =="ns3") { img_prefix = baseURL + img_name; this.icon_col = icon_col; this.toc_img_off = new Image (width,height); this.toc_img_off.src = img_prefix + "_off.gif"; this.toc_img_on = new Image (width,height); this.toc_img_on.src = img_prefix + "_on.gif"; } } function new_toc_item (img_name,icon_row,width,height) { toc_item [img_name] = new toc_item (img_name,icon_row,width,height); } function toc_mouseover (itemID) { if (client =="ns3") { current_overID = itemID; if (current_overID != last_overID) { document [current_overID].src = toc_item [current_overID].toc_img_on.src; if (last_overID != "") { document.images [last_overID].src = toc_item[last_overID].toc_img_off.src; } last_overID = current_overID; } } } function toc_mouseout () { if (client =="ns3") { if (current_overID != "") { document.images [current_overID].src = toc_item [current_overID].toc_img_off.src; } current_overID = ""; last_overID = ""; } } new_toc_item ("1",2,120,20); <!-- Begin function bannerObject(p){ this.msg = MESSAGE this.out = " " this.pos = POSITION this.delay = DELAY this.i = 0 this.reset = clearMessage} function clearMessage(){ this.pos = POSITION} var POSITION = 50; var DELAY = 150; var MESSAGE = "q是一个动态JavaScript文字昄的例?; var scroll = new bannerObject(); function scroller(){ scroll.out += " "; if(scroll.pos>0) for (scroll.i = 0; scroll.i < scroll.pos; scroll.i++) { scroll.out +=" " ; } if (scroll.pos>= 0) scroll.out += scroll.msg else scroll.out = scroll.msg.substring(-scroll.pos,scroll.msg.length) document.noticeForm.notice.value = scroll.out scroll.out = " "; scroll.pos--; scroll.pos--; if (scroll.pos < -(scroll.msg.length)) { scroll.reset(); } setTimeout ('scroller()',scroll.delay);} </script> </head> <body onload="scroller()" bgcolor="#000000" link="#C0C0C0" vlink="#C0C0C0" alink="#008080" text="#C0C0C0"> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td width="100%"><form NAME="noticeForm"> <p><input TYPE="text" name="notice" size="40" style="background-color: rgb(192,192,192)"></p> </form> </td> </tr> </table> </center></div> </body> </html> |
范例2:颜色变化的例子?br /> test5_2.htm
| <html> <head> <script> <!-- function makearray(n) { this.length = n; for(var i = 1; i <= n; i++) this[i] = 0; return this;} hexa = new makearray(16); for(var i = 0; i < 10; i++) hexa[i] = i; hexa[10]="a"; hexa[11]="b"; hexa[12]="c"; hexa[13]="d"; hexa[14]="e"; hexa[15]="f"; function hex(i) { if (i < 0) return "00"; else if (i > 255) return "ff"; else return "" + hexa[Math.floor(i/16)] + hexa[i%16];} function setbgColor(r, g, b) { var hr = hex(r); var hg = hex(g); var hb = hex(b); document.bgColor = "#"+hr+hg+hb;} function fade(sr, sg, sb, er, eg, eb, step) { for(var i = 0; i <= step; i++) { setbgColor( Math.floor(sr * ((step-i)/step) + er * (i/step)), Math.floor(sg * ((step-i)/step) + eg * (i/step)), Math.floor(sb * ((step-i)/step) + eb * (i/step))); }} function fadein() { fade(255,0,0,0,0,255,100); fade(0,0,255,0,255,0,100); fade(0,255,0, 0,0,0, 100);} fadein(); // --> </script> <body> </body> </html> |
本讲介绍了用戯行创建对象的Ҏ, 用户可根据需要创q对象。ƈ介绍了JavaScript中徏数组的方法?br />
]]>
一、对象的基础知识
1、对象的基本l构
JavaScript中的对象是由属?properties)和方?methods)两个基本的元素的构成的。前者是对象在实施其所需要行为的q程中，实现信息的装载单位，从而与变量相关联；后者是指对象能够按照设计者的意图而被执行Q从而与特定的函数相联?br />
2、引用对象的途径
一个对象要真正地被使用Q可采用以下几种方式获得Q?br /> o 引用JavaScript内部对象Q?br /> o 由浏览器环境中提供；
o 创徏新对象?br /> q就是说一个对象在被引用之前，q个对象必须存在Q否则引用将毫无意义Q而出现错误信息。从上面中我们可以看出JavaScript引用对象可通过三种方式获取。要么创建新的对象，要么利用现存的对象?br />
Q、有兛_象操作语?/font>
JavaScript不是一U面向对象的语言Q它设有提供面向对象语言的许多功能，因此JavaScript设计者之所以把它你“Z对象”而不是面向对象的语言Q在JavaScript中提供了几个用于操作对象的语句和关键字及q算W?br /> Q?Q?For...in语句
格式如下Q?br /> ForQ对象属性名 in 已知对象名）
说明Q?br /> o 该语句的功能是用于对已知对象的所有属性进行操作的控制循环。它是将一个已知对象的所有属性反复置l一个变量；而不是用计数器来实现的?br /> o 该语句的优点是无需知道对象中属性的个数卛_q行操作?/font>
例：下列函数是显C数l中的内容：
| Function showData(object) for (var X=0; X<30;X++) document.write(object[i])Q?br /> |
| Function showData(object) for(var prop in object) document.write(object[prop])Q?br /> |
使用该语句的意思是Q在该语句体内，M对变量的引用被认为是q个对象的属性，以节省一些代码?br /> with object{
...}
所有在with语句后的花括号中的语句，都是在后面object对象的作用域的?br /> Q?Q?this关键?br /> this是对当前的引用，在JavaScript׃对象的引用是多层ơ，多方位的Q往往一个对象的引用又需要对另一个对象的引用Q而另一个对象有可能又要引用另一个对象，q样有可能造成混ؕQ最后自己已不知道现在引用的那一个对象，为此JavaScript提供了一个用于将对象指定当前对象的语句this?br /> Q?Q?Newq算W?br /> 虽然在JavaScript中对象的功能已经是非常强大的了。但更强大的是设计h员可以按照需求来创徏自己的对象，以满x一特定的要求。用Newq算W可以创Z个新的对象。其创徏对象使用如下格式Q?br /> Newobject=NEW Object(Parameters table);
其中Newobject创徏的新对象Qobject是已l存在的对象Q?parameters table参数表；new是JavaScript中的命o语句?br /> 如创Z个日期新对象
newData=New Data()
birthday=New Data (December 12.1998)
之后可使NewData、birthday作ؓ一个新的日期对象了?br />
Q、对象属性的引用
对象属性的引用可由下列三种方式之一实现Q?br /> Q?Q用点Q?Q运符
| university.Name=“云南?#8221; university.city=“昆明?#8221; university.Date="1999" |
| university[0]=“云南” university[1]=“昆明?#8221; university[2]="1999" |
| function showunievsity(object) for (var j=0;j<2; j++) document.write(object[j]) |
| Function showmy(object) for (var prop in this) docament.write(this[prop]); |
| university["Name"]=“云南” university["City"]=“昆明?#8221; university["Date"]="1999" |
Q、对象的Ҏ的引?/font>
在JavaScript中对象方法的引用是非常简单的?br /> ObjectName.methods()
实际上methods()=FunctionNameҎ实质上是一个函数?如引用university对象中的showmyQ）ҎQ则可用：
document.write (university.showmy())
或：document.write(university)
如引用math内部对象中cos()的方?br /> 则：
with(math)
document.write(cos(35));
document.write(cos(80));
若不使用with则引用时相对要复杂些Q?br /> document.write(Math.cos(35))
document.write(math.sin(80))
二、常用对象的属性和Ҏ
JavaScript为我们提供了一些非常有用的常用内部对象和方法。用户不需要用脚本来实现这些功能。这正是Z对象~程的真正目的?br /> 在JavaScript提供了stringQ字W串Q、mathQ数D）和DateQ日期）三种对象和其它一些相关的Ҏ。从而ؓ~程人员快速开发强大的脚本E序提供了非常有利的条g?br />
1、常用内部对?/font>
在JavaScript中对于对象属性与Ҏ的引用，有两U情况：其一是说该对象是静态对象，卛_引用该对象的属性或Ҏ时不需要ؓ它创建实例；而另一U对象则在引用它的对象或Ҏ是必Mؓ它创Z个实例，卌对象是动态对象?br /> 对JavaScript内部对象的引用，以是紧紧围绕着它的属性与Ҏq行的。因而明对象的静动性对于掌握和理解JavaScript内部对象是具有非帔R要的意义?br />
Q?、串对象
o string对象Q内部静态性?br /> o 讉Kproperties和methodsӞ可用（.Q运符实现?br /> o 基本使用格式QobjectName.prop/methods
Q１Q串对象的属?br /> 该对象只有一个属性，即length。它表明了字W串中的字符个数Q包括所有符受?br /> 例：
mytest="This is a JavaScript"
mystringlength=mytest.length
最后mystringlengthq回mytest字串的长度ؓ20?br /> Q２Q串对象的方?br /> string对象的方法共有１Q个。主要用于有兛_W串在Web面中的昄、字体大、字体颜艌Ӏ字W的搜烦以及字符的大写转换?br /> 其主要方法如下：
o 锚点anchor()Q该Ҏ创徏如用Html文档中一Lanchor标记。用anchor如用Html?A Name="")一栗通过下列格式讉K:string.anchor(anchorName)?br /> o 有关字符昄的控制方?br /> big字体昄, Italics()斜体字显C，bold()_体字显C，blink()字符闪烁昄QsmallQ）字符用小体字昄Qfixed()固定高亮字显C、fontsize(size)控制字体大小{?br /> o 字体颜色ҎQfontcolor(color)
o 字符串大写转换
toLowerCase()Q小写{换，toUpperCase()大写转换。下列把一个给定的串分别{换成大写和小写格?
string=stringValue.toUpperCase和string=stringValue.toLowerCase?br /> o 字符搜烦QindexOf[charactor,fromIndex]
从指定formIndtx位置开始搜索charactorW一ơ出现的位置?br /> q回字串的一部分字串Qsubstring(start,end)
从start开始到end的字W全部返回?br />
Q?、算术函数的math对象
功能Q提供除加、减、乘、除以外的一引些自述q算。如ҎQ^Ҏ{??br /> 静动性：静态对?br /> Q１Q主要属?br /> math中提供了Q个属性，它们是数学中l常用到的常敎I、以Q０为底的自然对敎ͼQ１Q、以Qؓ底的自然ҎLN2?.14159的PI?/2的^ҎSQRT1-2,2的^Ҏ为SQRT2?br /> Q２Q主要方?br /> l对|abs()
正u余u|sin(),cos()
反正弦反余u :asin(), acos()
正切反正切：tan(),atan()
四舍五入Qround()
qx根：sqrt()
Z几方ơ的|Pow(base,exponent)
...
Q?、日期及旉对象
功能Q提供一个有x期和旉的对象?br /> 静动性：动态性，卛_M用Newq算W创Z个实例。例:
MyDate=New Date()
Date对象没有提供直接讉K的属性。只h获取和设|日期和旉的方法?br /> 日期起始?Q７Q０q_月１日０Q?Q０:Q０?br /> 1. 获取日期的时间方?br /> getYear(): q回q数
getMonth():q回当月h
getDate(): q回当日h
getDay():q回星期?br /> getHours():q回时?br /> getMintes(:q回分钟?br /> getSeconds():q回U数
getTime() : q回毫秒?br /> Q２Q设|日期和旉Q?br /> setYear();讄q?br /> setDate():讄当月h
setMonth():讄当月份数
setHours():讄时?br /> setMintes():讄分钟?br /> setSeconds():讄U数
setTime ():讄毫秒?br /> ...
2、JavaScript中的pȝ函数
JavaScript中的pȝ函数又称内部Ҏ。它提供了与M对象无关的系l函敎ͼ使用q些函数不需创徏M实例,可直接用?br /> 1Q返回字W串表达式中的|
Ҏ名：evalQ字串表辑ּQ，例：
test=eval("8+9+5/2");
2. q回字符串ASCI码：
Ҏ名：unEscape (string)
3Q返回字W的~码Q?br /> Ҏ名：escape(character)
4Q返回实敎ͼ
parseFloat(floustring);
5Q返回不同进制的敎ͼ
parseInt(numbestring ,rad.X)
其中radix是数的进Ӟnumbs字符串数
三、范?/strong>
下面是一个时钟显C的JavaScript文档。在文档中用了非常多的函数?br /> Test4_1.htm
| <html> <head> <style TYPE="text/css"> <style> </style> <title>旉</title> <script LANGUAGE="JavaScript"> function showClock() { } function hideClock() { } var timerID = null var timerRunning = false function stopClock() { if(timerRunning) clearTimeout(timerID); timerRunning = false document.clock.face.value = ""; } function showTime() { var now = new Date(); var year = now.getYear(); var month = now.getMonth() + 1; var date = now.getDate(); var hours = now.getHours(); var mins = now.getMinutes(); var secs = now.getSeconds(); var timeVal = ""; timeVal += ((hours <= 12) ? hours : hours - 12); timeVal += ((mins < 10) ? ":0" : ":") + mins; timeVal += ((secs <= 10) ? ":0" : ":") + secs; timeVal += ((hours < 12) ? "AM" : "PM"); timeVal += ((month < 10) ? " on 0" : " on ") + month + "-"; timeVal += date + "-" + year; document.clock.face.value = timeVal; timerID = setTimeout("showTime()", 1000); timerRunning = true } function startClock() { stopClock(); showTime(); } function windowOpener( indexnum ){ var loadpos="date.html"+"#"+indexnum; controlWindow=window.open(loadpos,"date","toolbar=no,location=no, directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes, width=620,height=400"); } </script> </head> <body onLoad="startClock()" > <p align="center"><big><span style="background-color: rgb(45,45,45)"> <font face="Arial">form</font> <font face="宋体">旉</font> </span></big></p> <p align="center"> </p> <div align="center"><center> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td width="100%"><form NAME="clock" onSubmit="0"> <div align="center"><center><p><input TYPE="text" NAME="face" size="20" VALUE style="background-color: rgb(192,192,192)"> </p> </center></div> </form> </td> </tr> </table> </center></div> </body> </html> |
]]>
一、程序控制流
在Q何一U语a中，E序控制是必须的，它能使得整个E序减小混ؕQ之顺利按其一定的方式执行。下面是JavaScript常用的程序控制流l构及语?
Q、if条g语句
基本格式
ifQ表q式Q?br /> 语句D１Q?br /> ......
else
语句D２Q?br /> .....
功能Q若表达式ؓtrueQ则执行语句D１Q否则执行语句段Q?br /> 说明Q?br /> if -else 语句是JavaScript中最基本的控制语句，通过它可以改变语句的执行序?br /> 表达式中必须使用关系语句Q来实现判断Q它是作Z个布值来估算的?br /> 它将零和非零的数分别转化成false和true?br /> 若if后的语句有多行，则必M用花括号其括v来?/font>
if语句的嵌?br /> ifQ布|语句Q；
elseQ布|语句Q；
else ifQ布|语句Q；
……
else 语句Q；
在这U情况下Q每一U的布尔表述式都会被计算Q若为真Q则执行其相应的语句Q否则执行else后的语句?br />
Q、For循环语句
基本格式
forQ初始化Q条Ӟ增量Q?br /> 语句集；
功能Q实现条件@环，当条件成立时Q执行语句集Q否则蟩出@环体?br /> 说明Q?br /> 初始化参数告诉@环的开始位|，必须赋予变量的初|
条gQ是用于判别循环停止时的条g。若条g满Q则执行循环体，否则 跛_?br /> 增量Q主要定义@环控制变量在每次循环时按什么方式变化?br /> 三个主要语句之间Q必M用逗号分隔?/font>
Q、while循环
基本格式
whileQ条Ӟ
语句集；
该语句与For语句一P当条件ؓ真时Q重复@环，否则退出@环?br /> For与while语句
两种语句都是循环语句Q用For语句在处理有x字时更易看懂Q也较紧凑；而while循环对复杂的语句效果更特别?br />
Q、break和continue语句
与C++语言相同Q用break语句使得循环从For或while中蟩出，continue使得跌循环内剩余的语句而进入下一ơ@环?br />
二、函?/strong>
函数为程序设计h员提供了一个丰常方便的能力。通常在进行一个复杂的E序设计ӞLҎ所要完成的功能Q将E序划分Z些相对独立的部分Q每部分~写一个函数。从而，使各部分充分独立QQ务单一Q程序清晎ͼ易懂、易诅R易l护。JavaScript函数可以装那些在程序中可能要多ơ用到的模块。ƈ可作Z仉动的l果而调用的E序。从而实C个函数把它与事g驱动相关联。这是与其它语言不样的地斏V?br />
Q、JavaScript函数定义
Function 函数?Q参?变元Q{
函数?.
Return 表达?
}
说明Q?br /> 当调用函数时,所用变量或字面量均可作为变元传递?br /> 函数由关键字Function定义?br /> 函数名：定义自己函数的名字?br /> 参数表，是传递给函数使用或操作的|其值可以是帔R Q变量或其它表达式?br /> 通过指定函数名（实参Q来调用一个函数?br /> 必须使用ReturnD回?br /> 函数名对大小写是敏感的?/font>
Q、函C的Ş式参敎ͼ
在函数的定义中，我们看到函数名后有参数表Q这些参数变量可能是一个或几个。那么怎样才能定参数变量的个数呢Q在JavaScript中可通过arguments .Length来检查参数的个数?br /> 例：
| Function function_Name(exp1,exp2,exp3,exp4) Number =function _Name . arguments .length; if (Number>1Q?br /> document.wrile(exp2); if (Number>2) document.write(exp3); if(Number>3) document.write(exp4); ... |
三、事仉动及事g处理
Q、基本概?/font>
JavaScript是基于对?object-based)的语a。这与Java不同,Java是面向对象的语言。而基于对象的基本特征Q就是采用事仉?event-driven)。它是在用Ş界面的环境下Q得一切输入变化简单化。通常鼠标或热键的动作我们UCZӞEventQ，而由鼠标或热键引发的一q串E序的动作，UCZ仉动（Event DriverQ。而对事gq行处理E序或函敎ͼ我们UCZ件处理程序（Event HandlerQ?br />
Q、事件处理程?/font>
在JavaScript中对象事件的处理通常由函?Function)担Q。其基本格式与函数全部一P可以前面所介绍的所有函CZ件处理程序?br /> 格式如下Q?br /> Function 事g处理名（参数表）{
事g处理语句集；
……
}
Q、事仉?/font>
JavaScript事g驱动中的事g是通过鼠标或热键的动作引发的。它主要有以下几个事Ӟ
Q１Q单M件onClick
当用户单击鼠标按钮时Q生onClick事g。同时onClick指定的事件处理程序或代码被调用执行。通常在下列基本对象中产生Q?br /> buttonQ按钮对象）
checkboxQ复选框Q或Q检查列表框Q?br /> radio Q单选钮Q?br /> reset buttonsQ重要按钮）
submit buttonsQ提交按钮）
例：可通过下列按钮Ȁzchange()文gQ?br />
| <Form> <Input type="button" Value=“ ” onClick="change()"> </Form> |
Q２QonChange改变事g
当利用text或texturea元素输入字符值改变时发该事gQ同时当在select表格中一个选项状态改变后也会引发该事件?br /> 例：
| <Form> <Input type="text" name="Test" value="Test" onCharge="check('this.test)"> </Form> |
当Text或Textarea对象中的文字被加亮后Q引发该事g?br /> Q４Q获得焦点事件onFocus
当用户单击Text或textarea以及select对象Ӟ产生该事件。此时该对象成ؓ前台对象?br /> Q５Q失ȝ点onBlur
当text对象或textarea对象以及select对象不再拥有焦点、而退到后台时Q引发该文gQ他与onFocas事g是一个对应的关系?br /> Q６Q蝲入文件onLoad
当文档蝲入时Q生该事g。onLoad一个作用就是在首次载入一个文档时cookie的|q用一个变量ؓ其赋|使它可以被源代码使用?br /> Q７Q卸载文件onUnload
当Web面退出时引发onUnload事gQƈ可更新Cookie的状态?br /> 四、范?br /> 范例1Q下例程序是一个自动装载和自动卸蝲的例子。即当装入HTML文档时调用loadform()函数,而退文档q入另一HTML文档时则首先调用unloadform()函数,认后方可进入?br />
| test3_1.htm <HTML> <HEAD> <script Language="JavaScript"> <!-- function loadform(){ alert("q是一个自动装载例?"); } function unloadform(){ alert("q是一个卸载例?"); } //--> </Script> </HEAD> <BODY OnLoad="loadform()" OnUnload="unloadform()"> <a href="test.htm">调用</a> </BODY> </HTML> |
范例2Q这是一个获取浏览器版本LE序。该E序首先昄一个L一提示信息。之后显C浏览器的版本号有关信息?br /> test3_2.htm
| <html> <head> <script language="JavaScript"><!-- // --> function makeArray(n){ this.length=n return this } function hexfromdec(num) { hex=new makeArray(1); var hexstring=""; var shifthex=16; var temp1=num; for(x=1; x>=0; x--) { hex[x]=Math.round(temp1/shifthex - .5); hex[x-1]=temp1 - hex[x] * shifthex; temp1=hex[x-1]; shifthex /= 16; } for (x=1; x>=0; x--) { hexstring+=getletter(hex[x]); } return (hexstring); } function getletter(num) { if (num < 10) { return num; } else { if (num == 10) { return "A" } if (num == 11) { return "B" } if (num == 12) { return "C" } if (num == 13) { return "D" } if (num == 14) { return "E" } if (num == 15) { return "F" } } } function rainbow(text){ var color_d1; var allstring=""; for(i=0;i<text.length;i=i+2){ color_d1=255*Math.sin(i/(text.length/3)); color_h1=hexfromdec(color_d1); allstring+="<FONT COLOR="+color_h1+"ff"+color_h1+">"+text.substring(i,i+2)+"</FONT>"; } return allstring; } function sizefont(text){ var color_d1; var allstring=""; var flag=0; for(i=0,j=0;i<text.length;i=i+1){ if (flag==0) { j++; if (j>=7) { flag=1;}} if (flag==1) { j=j-1; if (j<=0) { flag=0; }} allstring+="<FONT SIZE="+ j + ">" + text.substring(i,i+1) + "</FONT>"; } return allstring; } document.write("<font size=8><CENTER>") document.write("<BR><BR>") document.write( sizefont("q是一个获取WEB览器的E序")) document.write("</CENTER></font>") document.write("览器名U? "+navigator.appName+"<br>"); document.write("版本? "+navigator.appVersion+"<br>"); document.write("代码名字: "+navigator.appCodeName+"<br>"); document.write("用户代理标识: "+navigator.userAgent); </script> <body> </body> </html> |
?
本讲介绍了JavaScriptE序设计的有兛_宏V程序流、函数、事件是我们学习掌握JavaScript~程的重炏V?/span>
]]>
一、JavaScript代码的加?/font>
JavaScript的脚本包括在HTML中，它成为HTML文档的一部分。与HTML标识相结合，构成了一个功能强大的Internet|上~程语言。可以直接将JavaScript脚本加入文档Q?br />
| <Script Language ="JavaScript"> JavaScript语言代码Q?br /> JavaScript 语言代码; .... </Script> |
说明Q?nbsp;
通过标识<Script>...</Script>指明JavaScript脚本源代码将攑օ光?br /> 通过属性Language ="JavaScript"说明标识中是使用的何U语aQ这里是JavaScript语言, 表示在JavaScript中用的语言?/font>
下面是将JavaScript脚本加入Web文档中的例子:
Test2.html
| <HTML> <Head> <Script Language ="JavaScript"> document. Write("q是赛_|互动学?); document. close(); </Script> </Head> </HTML> |
在浏览器的窗口中调用test2.htmlQ则昄“q是赛_|互动学?#8221;字串。见?所C?br />
 ? |
说明: Document. write()是文档对象的输出函数Q其功能是将括号中的字符或变量D出到H口Qdocument. close()是将输出关闭?br /> 可将<Script>...</Script>标识攑օhead>.. </Head>?lt;Body> ...</Body>之间。将JavaScript标识攄<Head>... </Head>在头部之_使之在主和其余部分代码之前装蝲Q从而可使代码的功能更强大；可以JavaScript标识攄?lt;Body>... </Body>M之间以实现某些部分动态地创徏文档?/font> |
二、基本数据类?/strong>
JavaScript脚本语言同其它语a一P有它自n的基本数据类型、表辑ּ和算术运符以及E序的基本框架结构。JavaScript提供了四U基本的数据cd用来处理数字和文? 而变量提供存放信息的地方, 表达式则可以完成较复杂的信息处理?br />
1、基本数据类?/strong>
在JavaScript中四U基本的数据cdQ数|整数和实敎ͼ、字W串型（?#8220;”h‘’括v来的字符或数|、布型QTrue或False表示Q和I倹{在JavaScript的基本类型中的数据可以是帔RQ也可以变量。由于JavaScript采用q型的形式Q因而一个数据的变量或常量不必首先作声明Q而是在用或赋值时定其数据的cd的。当然也可以先声明该数据的类型，它是通过在赋值时自动说明其数据类型的?br />
2、常?nbsp;
整型帔R
JavaScript的常量通常又称字面帔RQ它是不能改变的数据。其整型帔R可以使用十六q制、八q制和十q制表示其倹{?br /> 实型帔R
实型帔R是由整数部分加小数部分表C，?2.32?93.98 。可以用科学或标准Ҏ表示Q?E7?e5{?br /> 布尔?br /> 布尔帔R只有两种状态：True或False?它主要用来说明或代表一U状态或标志Q以说明操作程。它与EQ＋是不一L,Q＋Q可以用Q或Q表C其状?而JavaScript只能用True或False表示其状态?br /> 字符型常?br /> 使用单引P‘Q或双引P“Q括h的一个或几个字符。如 "This is a book of JavaScript "?3245"?ewrt234234" {?br /> I?br /> JavaScript中有一个空值null,表示什么也没有。如试图引用没有定义的变?则返回一个Null倹{?br /> Ҏ字符
同E语言一PJavaScript中同样以有些以反斜杠Q／Q开头的不可昄的特D字W。通常UCؓ控制字符?br />
3、变?/strong>
变量的主要作用是存取数据、提供存放信息的容器。对于变量必L变量的命名、变量的cd、变量的声明及其变量的作用域?nbsp;
变量的命?br /> JavaScript中的变量命名同其计算a非常怼Q这里要注意以下两点Q?br /> Q、必L一个有效的变量Q即变量以字母开_中间可以出现数字如test1、text2{。除下划U（Q）作ؓq字W外Q变量名UC能有I格、（Q）、（Q）、（Q）或其它符受?br /> Q、不能用JavaScript中的关键字作为变量?br /> 在JavaScript中定义了Q０多个c键字，q些关键是JavaScript内部使用的，不能作ؓ变量的名U。如Var、int、double、true不能作ؓ变量的名U?br /> 在对变量命名Ӟ最好把变量的意义与其代表的意思对应v来，以免出现错误?nbsp;
变量的类?br /> 在JavaScript中，变量可以用命令Var作声?
var mytest;
该例子定义了一个mytest变量。但没有赋予它的倹{?br /> Var mytest=”This is a book”
该例子定义了一个mytest变量, 同时赋予了它的倹{?br /> 在JavaScript中，变量以可以不作声明，而在使用时再Ҏ数据的类型来其变量的类型?br /> 如：
x=100
y="125"
xy= True
cost=19.5{?br /> 其中x整数Qy为字W串Qxy为布型Qcost为实型?nbsp;
变量的声明及其作用域
JavaScript变量可以在用前先作声明Qƈ可赋倹{通过使用var关键字对变量作声明。对变量作声明的最大好处就是能及时发现代码中的错误Q因为JavaScript是采用动态编译的Q而动态编译是不易发现代码中的错误Q特别是变量命名的方面?br /> 对于变量q有一个重要性──那就是变量的作用域。在JavaScript中同h全局变量和局部变量。全局变量是定义在所有函C之外Q其作用范围是整个函敎ͼ而局部变量是定义在函C之内Q只对其该函数是可见的，而对其它函数则是不可见的?br />
三、表辑ּ和运符
Q、表辑ּ
在定义完变量后，可以对它们q行赋倹{改变、计等一pd操作Q这一q程通常又叫UC个叫表达式来完成Q可以说它是变量、常量、布及q算W的集合Q因此表辑ּ可以分ؓ术表述式、字串表辑ּ、赋D辑ּ以及布尔表达式等?br />
Q、运符
q算W完成操作的一pdW号Q在JavaScript中有术q算W，如＋???{；有比较运符?Q、＝Q等; 有逻辑布尔q算W如Q（取反Q、|、||; 有字串运如Q??Q＝{?br /> 在JavaScript主要有双目运符和单目运符。其双目q算W由下列l成Q?br /> 操作敎ͼ q算W?操作敎ͼ
即由两个操作数和一个运符l成。如50Q?0?This"+"that"{。单目运符Q只需一个操作数Q其q算W可在前或后?br /> Q１Q算术运符
JavaScript中的术q算W有单目q算W和双目q算W?br /> 双目q算W：
+Q加Q??Q减Q?*Q乘Q?/Q除Q?%Q取模） 、|Q按位或Q?amp;(按位??lt;<Q左U）?>>Q右U）?>>>Q右U，零填充）?br /> 单目q算W：
-Q取反）、~Q取补）?+Q递加1Q?-Q递减1Q?br /> Q２Q比较运符
比较q算W它的基本操作过E是Q首先对它的操作数进行比较，后再返回一个true或False|有８个比较运符:
<(于)?gt;(大于)?lt;=(于{于)?gt;=(大于{于)?=({于)?=(不等??br /> Q３Q布逻辑q算W?br /> 在JavaScript中增加了几个布尔逻辑q算W?
!Q取??amp;=Q与之后赋|?&Q逻辑与）?|=Q或之后赋|?|Q逻辑或）?^=Q异或之后赋|?^Q逻辑异或Q??:Q三目操作符Q、||Q或Q?=({于)、|=(不等??br /> 其中三目操作W主要格式如下：
操作敎ͼl果Q：l果Q?/strong>
若操作数的结果ؓ真，则表q式的结果ؓl果Q，否则为结果２?br />
四、范?/font>
下面是一个跑马灯效果的JavaScript文档?br />
Test2_1.html
| <html> <head> <script Language="JavaScript"> var msg="q是一个跑马灯效果的JavaScript文档"; var interval = 100; var spacelen = 120; var space10=" "; var seq=0; function Scroll() { len = msg.length; window.status = msg.substring(0, seq+1); seq++; if ( seq >= len ) { seq = spacelen; window.setTimeout("Scroll2();", interval ); } else window.setTimeout("Scroll();", interval ); } function Scroll2() { var out=""; for (i=1; i<=spacelen/space10.length; i++) out += space10; out = out + msg; len=out.length; window.status=out.substring(seq, len); seq++; if ( seq >= len ) { seq = 0; }; window.setTimeout("Scroll2();", interval ); } Scroll(); </script> <body> </body> </html> |
本文介绍了JavaScript脚本是如何加入Web面, q学习了JavaScript语言中的基本数据cd、变量、常量、操作运符{。可以看出，对于已经掌握Q＋Q语a的h来说Q学习JavaScript真是一仉常轻松愉快的事?/span>
]]>
一、什么是JavaScript
JavaScript是一U基于对?Object)和事仉?Event Driven)q具有安全性能的脚本语a。用它的目的是与HTML文本标记语a、Java 脚本语言QJava程序）一起实现在一个Web面中链接多个对象，与Web客户交互作用。从而可以开发客L的应用程序等。它是通过嵌入或调入在标准的HTML语言中实现的。它的出现I补了HTML语言的缺P它是Java与HTML折衷的选择Q具有以下几个基本特点：
脚本~写语言
JavaScript是一U脚本语aQ它采用程序段的方式实现编E。像其它脚本语言一?JavaScript同样已是一U解释性语aQ它提供了一个易的开发过E?nbsp;
它的基本l构形式与C、C++、VB、Delphi十分cM。但它不像这些语a一P需要先~译Q而是在程序运行过E中被逐行地解释。它与HTML标识l合在一P从而方便用L使用操作?nbsp;
Z对象的语a
JavaScript是一U基于对象的语言Q同时以可以看作一U面向对象的。这意味着它能q用自己已经创徏的对象。因此，许多功能可以来自于脚本环境中对象的方法与脚本的相互作用?br />
单?/strong>
JavaScript的简单性主要体现在Q首先它是一U基于Java基本语句和控制流之上的简单而紧凑的设计, 从而对于学习Java是一U非常好的过渡。其ơ它的变量类型是采用q型，q未使用严格的数据类型?nbsp;
安全?/strong>
JavaScript是一U安全性语aQ它不允许访问本地的盘Qƈ不能数据存入到服务器上Q不允许对网l文档进行修改和删除Q只能通过览器实C息浏览或动态交互。从而有效地防止数据的丢失?nbsp;
动态?/strong>
JavaScript是动态的Q它可以直接对用h客户输入做出响应Q无ȝqWeb服务E序。它对用L反映响应Q是采用以事仉动的方式q行的。所谓事仉动，是指在主页(Home Page)中执行了某种操作所产生的动作，q?#8220;事g”(Event)。比如按下鼠标、移动窗口、选择菜单{都可以视ؓ事g。当事g发生后，可能会引L应的事g响应?nbsp;
跨^台?/strong>
JavaScript是依赖于览器本w，与操作环境无养I只要能运行浏览器的计机Qƈ支持JavaScript的浏览器可正确执行。从而实C“~写一ơ，走遍天下”的梦惟?nbsp;
实际上JavaScript最杰出之处在于可以用很的E序做大量的事。无L高性能的电脑，软g仅需一个字处理软g及一览器，无须WEB服务器通道Q通过自己的电脑即可完成所有的事情?br /> l合所qJavaScript 是一U新的描q语aQ它可以被箝入到 HTML 的文件之中?JavaScript语言可以做到回应使用者的需求事?(如： form 的输? Q而不用Q何的|\来回传输资料Q所以当一位用者输入一资料时Q它不用l过传给伺服?(server)处理Q再传回来的q程Q而直接可以被客户?(client) 的应用程式所处理?br /> JavaScript ?Java 很类|但到底ƈ不一P Java 是一U比 JavaScript 更复杂许多的E式语言Q?JavaScript 则是相当Ҏ了解的语a。JavaScript 创作者可以不那麽注重E式技巧，所以许?Java 的特性在 Java Script 中ƈ不支援?nbsp;
二、JavaScript和Java的区?/font>
虽然JavaScript与Java有紧密的联系Q但却是两个公司开发的不同的两个品。Java是SUN公司推出的新一代面向对象的E序设计语言Q特别适合于Internet应用E序开发；而JavaScript是Netscape公司的品，其目的是Z扩展Netscape Navigator功能Q而开发的一U可以嵌入Web面中的Z对象和事仉动的解释性语aQ它的前w是Live ScriptQ而Java的前w是Oak语言。下面对两种语言间的异同作如下比较：
Z对象和面向对?/strong>
Java是一U真正的面向对象的语aQ即使是开发简单的E序Q必设计对象?nbsp;
JavaScript是种脚本语言Q它可以用来制作与网l无关的Q与用户交互作用的复杂Y件。它是一U基于对象（Object BasedQ和事g驱动QEvent DriverQ的~程语言。因而它本n提供了非怸富的内部对象供设计h员用?nbsp;
解释和编?/strong>
两种语言在其览器中所执行的方式不一栗Java的源代码在传递到客户端执行之前，必须l过~译Q因而客L上必d有相应^C的仿真器或解释器Q它可以通过~译器或解释器实现独立于某个特定的^台编译代码的束缚?br /> JavaScript是一U解释性编E语aQ其源代码在发往客户端执行之前不需l过~译Q而是文本格式的字符代码发送给客户~由览器解释执行?nbsp;
强变量和弱变?/strong>
两种语言所采取的变量是不一L?br /> Java采用强类型变量检查，x有变量在~译之前必须作声明。如:
Integer x;
String y;
x=1234;
x=4321;
其中X=1234说明是一个整敎ͼY=4321说明是一个字W串?br /> JavaScript中变量声明，采用其弱cd。即变量在用前不需作声明，而是解释器在q行时检查其数据cdQ如Q?br /> x=1234;
yQ?4321";
前者说明x为其数值型变量Q而后者说明y为字W型变量?br />
代码格式不一?/strong>
Java是一U与HTML无关的格式，必须通过像HTML中引用外媒体那么q行装蝲Q其代码以字节代码的形式保存在独立的文档中?br /> JavaScript的代码是一U文本字W格式，可以直接嵌入HTML文档中，q且可动态装载。编写HTML文档像~辑文本文g一hѝ?br />
嵌入方式不一?/strong>
在HTML文档中，两种~程语言的标识不同，JavaScript使用<Script>...</Script>来标识，而Java使用<applet>...</applet>来标识?nbsp;
静态联~和动态联~?/strong>
Java采用静态联~，即Java的对象引用必d~译时的q行Q以使编译器能够实现强类型检查?br /> JavaScript采用动态联~，即JavaScript的对象引用在q行时进行检查，如不l编译则无法实现对象引用的查?nbsp;
三、JavaScriptE序q行环境
Javaq行环境
软g环境Q?br /> Windows 95/98或Windows NT?br /> Netscape Navigator x.0或Internet Explorer x.0?br /> 用于~辑HTML文档的字W编辑器(WS、WPS、Notepad、WordPad{?或HTML文档~辑器?br /> g配置Q?br /> 首先必须具备q行Windows 95/98或Windows NT的基本硬仉|环境。推荐：
基本内存32M?br /> CRT只少需?56颜色Q分辨率?40X480以上?br /> CPU只少233以上?br /> 鼠标和其它外部设|（Ҏ需要选用Q?br />
四、编写第一个JavaScriptE序
下面我们通过一个例子，~写W一个JavaScriptE序。通过它可说明JavaScript的脚本是怎样被嵌入到HTML文档中的?br /> test1.html文档Q?br />
| <html> <head> <Script Language ="JavaScript"> // JavaScript Appears here. alert("q是W一个JavaScript例子!"); alert("Ƣ迎你进入JavaScript世界!"); alert("今后我们共同学习JavaScript知识Q?); </Script> </Head> </Html> |
在Internet Explore5.0中运行行后的l果见图1Q?所C?br />
图１Q１ E序q行的结?br />
说明Q?test.html是HTML文档Q其标识格式为标准的HTML格式Q?br /> 如同HTML标识语言一P JavaScriptE序代码是一些可用字处理软g览的文本，它在描述面的HTML相关区域出现?br /> JavaScript代码?<Script Language ="JavaScript">...</Script>说明。在标识<Script Language ="JavaScript">...</Script>之间可加入JavaScript脚本?br /> alert()是JavaScript的窗口对象方法，其功能是弹出一个具有OK对话框ƈ昄Q）中的字符丌Ӏ?br /> 通过<!-- ...//-->标识说明Q若不认识JavaScript代码的浏览器Q则所有在其中的标识均被忽略；若认识，则执行其l果。用注释这是一个好的编E习惯，它其他人可以读懂你的语a?br /> JavaScript ?</Script> 标签l束?nbsp;
从上面的实例分析中我们可以看出，~写一个JavaScriptE序实非常Ҏ的?/span>
]]>