??xml version="1.0" encoding="utf-8" standalone="yes"?>
它最初叫 MochaQ?接着改名?LiveScriptQ最后才定命名?JavaScriptQ根据历史记录,Java 的命名与
Netscape ?Sun 之间的合作有养I作ؓ交换条gQNetscape 在他们备受欢q的览器中创徏?Java
q行时。值得一提的是,q个名字的出台几q一个玩W,要知道,LiveScript ?Java 在客L脚本斚w存在敌对关系?br />
不管怎么_Z后来不得不一再澄清的一件事是QJavaScript ?Java 毫无关系?br />
2. Null 是个对象Q?
看看q段代码Q它q回的是 object?br />
q实在o解,假如 null 表示I|它怎么可以是对象?单说Q它?JavaScript 最初版本的错误Q这个错误甚臌微Y?
JScript 直接借用?br />
3. NaN !== NaN
NaNQ表CZ个非数字的|然而问题是QNaN不等于Q何东西,甚至不等于它自己?br />
q显然不对,事实上,如果要判断一个值确实是 NaNQ你需要用 isNaN() 函数?br />
4. 全局变量
对全局变量的依赖一直被视ؓ JavaScript 最坏的部分QECMA ?JavaScript 5 已经L了全局变量Q请参阅 ECMA
推出 JavaScript 5 - 译者注Q。对单的面Q这无所谓,但复杂的面Q如果包含大?JavaScript
脚本Q你很难知道某个全局变量是在哪里声明的,如果几个全局变量不小心重名,׃引发错误?br />
5. 那些l统被探ؓ Mozilla User-Agent 的浏览器
必须承认Q事实上Q这不是 JavaScript 的错Q是各个览器有意ؓ之。比如,以下是用 JavaScript 探测 Safari
时得到的l果Q?br />
是否注意到其中的W一个单?Mozilla/5.0Qؓ什?Safari 会被探测?MozillaQ尽?
Safari 后来已经U正q一问题Q但仍然不能解释Z么它们要q样误导开发者。事实上Q你会发玎ͼl大多数览器把他们?User Agent
讄?MozillaQ答案要回到10q前Q这更多是一U策略?br />
User Agent 是一D는来标识当前浏览器w䆾的字W串Q世界上W一个浏览器 MosaicQ?曾这h志自己:
q很合理Q因此当 Netscape 出来的时候,它保留了 Mosaic q个传统Q还在后面添加了一个加密方式部分?br />
到目前ؓ止,一切安好,直到 IE3 发布Q当 IE3 发布的时候,Netscape
正如日中天,那时Q很多服务器和程序已l部|了客户端探机Ӟ以便认出 NetscapeQ虽然现在看来,q很值得争议Q但当时q没什么。当 IE
初次推出它们?User Agent 标志的时候,是这个样子:
q让 IE 很被动,因ؓ Netscape 已经能被很多服务器识别,因此Q开发者们q脆希望 IE 被误认ؓ MozillaQ然后,再单独加一?
IE 的标{?br />
如今Q几乎所有浏览器都步 IE 后尘Q将自己标识?MozillaQ这大概是一U连锁反应?br />
6. 不一致的函数范围
参看以下代码Q?br />
foo(bar.method) q回l果不同原因是,method 函数是被当作 windows 对象Q而不?bar
下的对象调用的。要解决q个问题Q我们必M传递的匿名函数中调?bar.method() ?br />
7. 位操作符
JavaScript ?Java 有不共同之处,如位操作?br />
概要
|络是不断的q化? 新的和有创意的网站每天都在出? 从各斚w都在冲击着HTML的边? HTML 4来到我们w边已经差不多有10q了, 发行者们不断的寻求提供更强大的功能的新技? 但是怼因ؓ标记语言和浏览器的约束而\途坎?
Zl作者们提供更灵z? 更具互操作? 能有更多交互性ƈ令h振奋的网站和应用E序, HTML 5 引入q加Z一pd功能, 包括表单控制, 应用E序接口(APIs), 多媒? l构化和语义?
HTML 5的工? 开始于2004q? ?W3C HTML WG ?WHATWG 的共同努力下现在正在全面贯彻落实. 很多关键角色参与了W3C的努? 最具代表性的?大浏览器厂商: Apple, Mozilla, Opera, Microsoft; q有一pd的有着不同利益和专业技术的其他机构以及个h.
~写详细规范的工作还在进行中, d成还有很长的路要? 同样? 在这文章中讨论的功能不排除在未来有所改动的可? q篇文章只是以大U的形式介绍一些在当前的草案中的主要的Ҏ?
l构
HTML 5 引入了一整套全新的元素来让构建页面变得更加简? 大多数基于HTML 4的页面的包含多种常用l构, 比如说页?header), 脚(footer)和纵?column). 现阶D|们通常会用div元素标记q些区块, 然后为它们定义一个描q性的id或是class.
图表说明一个典型的用div元素带上id和class属性标记的2栏布局. 其中包括首(header)和页?footer), 在页首下面是一个水q_航条, M内容又包含了文章(article)和它双的侧Ҏ(sidebar).
大量的用div元素是因为目前的HTML 4版本~少更明的语义描述q些区块所? HTML 5 Z表现q些不同的区块而引入了新的元素.
那些div元素可以被新的元素代替了: header, nav, section, article, aside以及footer.
用这些新元素会有一些优?相对于HTML 4). 当和标题元素(h1 - h6)一同用时, 可以标记出嵌套的章节标题层次, 越之前版本的HTML仅有的六个层? 规范中包含了一份生成大U的详细法. 把结构化q些内容U_考虑范围, q仍旧向后兼容先前的版本. q样可以在编辑工具以及浏览器中生成目录来帮助用户来浏览这个文?
举例说明, 下面的标记结构用了嵌套的章节和h1元素构成:
q里要注? Z更好的兼容现在的览? 它也能在适当的位|利用其它的标题元素(h2 - h6)来代替h1元素.
通过辨别面中的章节使用Ҏ章节元素的确切目? 辅助的技术能帮助用户更容易的览q个面. 举例, 他们能不费力的略q导航区块或者能快速的从一文章直接蟩C一而不需要作者提供蟩转链? 对于创作者来? 在文档中L多余的div, 而用一些更明显的元素代替它? 会让源代码更清楚而且更容易书?
header元素表示一个区块的头部, "头部" 可能包含不只是区块的标题, 比如头部包含了副标题, 历史版本信息或是|名都是合理?
footer元素表示用上它的那个区块的脚? 一个具代表性的 "脚部" 包括了这个区块的一些信? 比如谁写了它, 链接到相关的文档, 版权信息{等.
nav元素表示一个导航链接的区块. 它同旉用于站点导航和目录.
aside元素Z存放和主要内Ҏ有太大关pȝ内容, 是典型的标记提要内容Ҏ.
section元素表示了一份文档或是一个应用程序一般意义上的区? 比方说章?
article元素表示一份文? 站点的页面中独立的区? 它适用于类似新? blog文章, 论坛帖子或者个人注释这L内容.
视频和音?/strong>
在最q几q? |络上的视频和音频日益增? 像是youtube, Viddler, Revver, MySpace, q有其他很多可以让Q何一个h更容易的发布视频和音频的|站. 然? 因ؓ当前的HTML~少必要的方法顺利的插入q控制多媒体, 很多|站都依赖Flash来提供这L功能. 管可能可以用各U各L插g (像是QuickTime, Windows Media{等) 嵌入多媒? 但是Flash是当前唯一被广泛应用的, 提供了开发者们所渴望的跨览器兼容解x案的插g.
对于各种ZFlash的媒体播攑֙, 创作者们Ҏ供他们自q用户定制设计的界? 那一般都允许用户控制播放, 暂停, 停止, 查找或调整音? 为浏览器提供插入视频和音频ƈ提供DOM接口让Script控制播放的功能要通过安装本地E序支持.
视频和音频的新元素让q个工作变得更加? q两者之间的大部分API都是׃n? 唯一区别关pd可视和不可视媒体之间的固有区?
Opera和Webkit已经攑և了一个部分支持视频元素的版本, 你可以到 experimental build of Opera ( http://dev.opera.com/articles/view/a-call-for-video-on-the-web-opera-vid/ ) 或者最新的 nightly build of WebKit ( http://nightly.webkit.org/ ) M载ƈ试验一下这些示? Opera支持Ogg Theora, Webkit支持所有QuickTime支持的媒体格? 包括W三方的解码?
插入视频最单的Ҏ是用video元素, 它会允许览器提供一个默认的用户界面, 其中controls属性是一个boolean值属? q个属性是让创作者决定用L面是否要昄(默认是不昄).
可选择的poster属性可以指定在视频播放前用来显C的囑փ. 管有一些视频格式有它们Ҏ的预览图格式, 像是MPEG-4, 它提供了一个可以不依赖于视频格式的可选择Ҏ.
用audio元素在页面内插入音频文g也非常容? audio和video元素的大部分属性都是共用的, 但非常显而易见的, audio元素没有width, height以及poster属?
HMTL 5 提供了source 元素, 让浏览器Ҏ媒体cd或编码器的支持来指定视频或音频文? media属性会Ҏ讑֤的局限性和被指定的媒体的类型和~码器来指定一个媒体选择查询. 当在使用 source 元素? 上元素( video或audio )的src属性需要省略掉, 不然 source 元素中的src属性会被忽略掉.
Z那些需要给用户界面更多一Ҏ制来W合面的总设计的创作者以方便, q泛的API提供了一些方法和事g让scripts来控制媒体文? 最单的Ҏ是?play(), pause(), 然后可以通过讄 currentTime 来进行@? 接下ȝ例子会解释怎么?
q有很多q里没有讨论到的属性以及API可以被用到视频音频元? 如果想知道更? 你可以参?current draft specification (http://www.whatwg.org/specs/web-apps/current-work/multipage/section-video.html#video).
文档l承?/strong>
不像先前版本?HTML ?XHTMLҎ它们的语法来定义, HTML 5 是根据文档对象模?DOM)来定义的 - 览器中用来描述文档的的l承型树l构. 例如, 构成一个由 名称(title), 标题(heading) 和段?paragraph) 的文? 那么, q个DOM 树可能看h是这L:
q个DOM树包? head中的title元素, body中的h1和p元素.
ҎDOM定义的HTML 5的优Ҏq种语言可以不依赖于它自q语法. 有两个主要的语法用来表现HTML文档: HTML的序列和XML的序?.
HTML 序列从HTMLE早版本的SGML语法中得到灵感而引入的一U语? 但是却定义成更适合览器在真实环境下处理HTML的方?
你会注意? q看h很像是前个版本的HTML, 有些标签会自动闭?
XML 序列引入了XML 1.0的语法和命名I间, 像?XHTML 1.0.
除了间隔和xmls属? q两个例子几乎是相同?
览器通过使用MIMEcd来区别两? Mtext/html形式的文档必ȝ?HTML 序列, MMIMEcd是XML的文?像是 application/xhtml+xml 必须W合XML 序列.
创作者可能要Ҏ需要哪些功能来军_使用哪种序列. 没有使用它们的强制性的条g, 他们在不同情形下都可能是最优方?
用HTML的好?/strong>
* 向后兼容现有的浏览器
* 创作者已l非常熟悉语?br />
* 宽容和仁慈的语法, 不会因为无意中的一个错误而对M对用h不友好的 "Yellow Screen of Death".
* 语法相当Ҏ记忆, 举例? 创作者可以省略掉一些标{或是属性?
用XHTML的好?/strong>
* 严格的XML语法鼓励创作者书写完整的标签, 有些用户会发现这hҎl护.
* 能直接的和其它XML词表l合, 比如 SVG ?MathML.
* 允许使用XML的处理过E? 有些创作者把q个q程作ؓ他们~辑和发布过E的一部分.
如何贡献
HTML 5的工作进展很? 但是׃要出C测试用例ƈ实现互操作? 它预期还会持l数q? 目前要完成的工作可能?0?5q的旉. 在这个过E中, 从各式各L人都会有反馈, 在他们中? web设计师和开发? CMS和编辑工L厂商和浏览器的厂商是保成功的关? M人都不只是欢q? 更积极的是鼓׃ؓHTML 5提供反馈.
除了规范之外, q有更多相关的努力来帮助Z更好地理解这个工?
The Differences from HTML 4 (http://www.w3.org/html/wg/html5/diff/) 描述了和前一版本的HTML的不?
The HTML Design Principles (http://www.w3.org/TR/html-design-principles/) 讨论一些原理来帮助作出军_, q也会帮助你了解在众多的设计l果背后的原?
The Web Developer’s Guide to HTML 5 (http://dev.w3.org/html5/html-author/) q是最q才开始做? q是Z帮助web设计师和开发者理解要书写W合规范的HTML 5的文档所需要知道的一? q且提供了指? 也提供了描述得相当完整的试验.
你可以在很多的方面做A? 你可以加?W3C’s HTML WG , 订阅和A?HTML WG邮g列表, 或者完善它(wiki). 你也可以订阅或A献其他的 WHATWG邮g列表, 在WHATWG 论坛发表文章, 在WHATWG 博客上留a或写文章.
现在各大门户|站的新闅R?/p>
游戏、体肌ӀYg{页面都有一个类似Flash播放器的动态图片切换效果,
是一张张的焦Ҏd图不断切换,囄下面的文字也随着囄的切换而变化,
而且我们q可以手动点d片下面的“1???”{手动切换,效果相当不错Q让面时生色?
例如Q?a target="_blank">http://games.sina.com.cn/ 新浪游戏频道
http://sports.sohu.com/ 搜狐体育频道
http://www.yesky.com/ 天极|首?
l心的朋友可能发玎ͼ当我们在q个囄上面单击右键的时候就会发C是一个Flash格式Q?/p>
很多朋友以ؓ他真是一个FlashQ其实它是一个javascript+XML的特效,
外加一个Flash外壳Q通过javascript动态读取XML中的数据Q时刻能自动更新囄和图片的标题?/p>
下面l出代码供大家参考。其中的focus.swf需要到|上M载, 下蝲地址Q?a target="_blank">http://www.webjx.com/js/focus.swf
<script type="text/javascript">
<!--
imgUrl1="囄链接地址1";
imgtext1="囄文字昄内容1"
imgLink1=escape("链接|页地址1");
imgUrl2="囄链接地址2";
imgtext2="囄文字昄内容2"
imgLink2=escape("链接|页地址2");
imgUrl3="囄链接地址3";
imgtext3="囄文字昄内容3"
imgLink3=escape("链接|页地址3");
var focus_width=180//囄?
var focus_height=220//囄?
var text_height=18//文字昄高度
var swf_height = focus_height+text_height
var pics=imgUrl1+"|"+imgUrl2+"|"+imgUrl3
var links=imgLink1+"|"+imgLink2+"|"+imgLink3
var texts=imgtext1+"|"+imgtext2+"|"+imgtext3
document.write('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
width="'+ focus_width +'" height="'+ swf_height +'">');
document.write('<param name="allowScriptAccess" value="sameDomain">
<param name="movie" value="focus.swf"><param name="quality" value="high">
<param name="bgcolor" value="#F0F0F0">');
document.write('<param name="menu" value="false"><param name=wmode value="opaque">');
document.write('<param name="FlashVars" value="pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth
='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'">');
document.write('<embed
src="pixviewer.swf" wmode="opaque"
FlashVars="pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight
='+focus_height+'&textheight='+text_height+'" menu="false"
bgcolor="#F0F0F0" quality="high" width="'+ focus_width +'" height="'+
focus_height +'" allowScriptAccess="sameDomain"
type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />'); document.write('</object>');
</script>
http://bolm.cn/designonline/10_js_img/1/
http://bolm.cn/designonline/10_js_img/2/
http://bolm.cn/designonline/10_js_img/3/
http://bolm.cn/designonline/10_js_img/4/
http://bolm.cn/designonline/10_js_img/5/
http://bolm.cn/designonline/10_js_img/6/
http://bolm.cn/designonline/10_js_img/7/
http://bolm.cn/designonline/10_js_img/8/
http://bolm.cn/designonline/10_js_img/9/
http://bolm.cn/designonline/10_js_img/10/
[源码下蝲]