轻松学习JavaScript.doc

什么是JavaScript发布人 ： IT专家 发布时间 ： 2009-10-21 07:25:21.0 什么是JavaScriptJavaScript是一种基于对象和事件驱动的客户端脚本语言。JavaScript最初的设计是为了检验HTML表单输入的正确性。JavaScript起源于Netscape公司的LiveScript语言。JavaScript的历史JavaScript最初起源于LiveScript语言，当互联网开始流行时，越来越多的网站开始使用HTML表单与用户交互，然而表单交互却成了制约网络发展的重大瓶颈(用户总是痛苦的等待数据传送到服务器端检测，并传回是否正确，仅仅的表单检测，就产生了多次客户端与服务器端交互)。于是Netscape公司推出了LiveScript语言，最后Netscape与Sun将LiveScript命名为JavaScript(当时JAVA是很时髦的互联网名词)，随后微软开始了其野心勃勃的浏览器计划，并且推出了JScript，于是网络上出现了几种类似的JavaScript语言，但是没有统一的特性与语法(当时的JavaScript开发被看做是一场噩梦，因此很多程序员并不看好JavaScript)。最终JavaScript被提交到欧洲计算机制造商协会(ECMA)，做为中立的ECMA开始了标准化脚本语言之路，并将其命名为ECMAScript。JavaScript的组成:完整的JavaScript是由ECMAScript（语法）、Browser Objects（DOM、BOM）（特性）组成的。几个问题为:1：什么要学JavaScript？因为你别无选择，只有JavaScript可以控制所有常用的浏览器，而且JavaScript是世界上最重要的编程语言之一，学习web技术必须学会JavaScript。JavaScript是一种优美的语言，它很好，所以我们要学:)2：JavaScript与Java相同吗？javascript与java没有任何关系，他们本身就是两种语言，取成差不多的名字，主要是由于商业上的原因。javascript是一种客户端脚本语言java是服务器端语言。(是SUN公司的产品.)3：JavaScript难学吗？不难，JavaScript入门很简单，你只要学过小学数学就可学好JavaScript，但是你要先学好HTML语言。4：JavaScript能做什么？JavaScript可以检测表单的正确性，实现Ajax，读、写、改变HTML页面的架构DOM，对事件做出响应，检测浏览者所使用的设备，产生很酷很炫的网页效果DHTML等。5：学习JavaScript需要什么软件？只要windows的记事本与浏览器(IE,Firefox,Opera)就可以了 为什么要学习JavaScript发布人 ： IT专家 发布时间 ： 2009-10-21 07:26:22.0 学习JavaScript好处很多，因为只有JavaScript可以控制所有常用的浏览器，而且JavaScript是世界上最重要的编程语言之一，学习web技术必须学会JavaScript。JavaScript是一种优美的语言，它很好， javascript与java没有任何关系，他们本身就是两种语言，取成差不多的名字，主要是由于商业上的原因。javascript是一种客户端脚本语言,java是服务器端语言。所以javaScript与Java是不相同. JavaScript学习推荐用书发布人 ： IT专家 发布时间 ： 2009-10-21 07:28:57.0 Javascript高级程序设计：不要被“高级”这两个字吓到，这个书其实是本很不错的入门的书，因为这本书也很详细的介绍了javascript的全部内置对象和语法，并且介绍了面向对象的思想，DOM、BOM的知识，正则表达式，高级的DOM处理。Ajax的知识，还是很全面的。而且个人认为这本书对基础知识的介绍并不比其他的同类书逊色。比起Javascript权威指南（我当时买点的是第4版）,我觉得更详细些和更清楚些。在指南的第4版中，我觉得那本书中讲的东西有点混乱。感觉一个知识点还没有讲清楚，就给你一个什么类，看得不明不白的。因为没有看指南的第五版，所以这里不推荐给大家。而且高级程序设计这本书要比指南便宜不少。高级程序设计中也提出了采用功能(future)探测来取代浏览器版本探测来处理脚本兼容性的处理。个人觉得指南有的，这本书也都说了。还有我前面提到的，这本书的作者是YAHOO的资深的前端工程师，你可以在他的网站下载到相关的代码。 Javascript DOM 编程艺术：我个人的感觉是学习DOM编程的经典入门书籍，作者是的创始人之一，书中以浅显易懂的语言，教你一步一步的来讲解DOM编程，一点点地提升网站的用户体验。书中一直强调不唐突的脚本开发，网站要向后兼容，强调网站的可访问性。这个也是大家在做前端开发时应当努力追求的，也是必须要有的开发指导思想。可惜很多的后台开发的程序员，根本没有这个概念，所以你在开发的时候，一定要给你的程序员多洗脑。呵呵！ CSS权威指南第三版：做前端开发，你必须要了解CSS，书中对CSS2的介绍很详细了。仔细的看吧，我每次看的时候，有会有新的收获。 网站重构、CSS网站布局实录（唯一一本推荐的国人写的书）：看完了，你会知道为什么学WEB标准？你会知道前端工程师的工作很重要。 提高阶段： Javascript DOM 高级编程：这本书里不光详细的介绍的DOM编程的技巧，也讲了使用面向对象编程的方法，使用命名空间来管理书中所写的开发库，在不断的学习中，你的个人DOM Javascript库也不断的充实。呵呵，就像我前面说的，你可以写出自己的库了。当然书中的代码比较松散，还不能运用到实际的企业级的开发中。但是书中对闭包的介绍和面向对象的开发思想，会使你对JS的认识又提高了一个层次，虽然对面向对象开发的讲解还不够深。 XML技术手册：我们知道ajax,其中X就是指的XML，所以要了解XML的相关知识，你这本书，是一定要看的。看了之后你会发现XML要了解的东西实在太多了，可能跟你了解的东西相比，你才知道点皮毛。对了，这里说下，我并不推荐你使用XML来作为你的Ajax的程序的数据的载体。为什么？因为很不经济。你先把数据转换成XML文档，然后再通过Javascript把XML文档中的数据提出来，把文档转成数据。而浏览器对XPath处理的兼容性的处理，你会很发狂的。现在我们有一个代替他的东西JSON。但是由于XML已经是很多标准的默认数据通讯载体，比如RSS等，所以你还是得掌握。 个人觉得学Javascript看这些书基本差不多了。 精通Javascript:名字起的太玄了，书不怎么样，什么都讲了点，就是不讲他怎么用jQuery来实现那些高级功能的。 PPK 谈 Javascript感觉跟精通差不多，什么都讲点，不过多点。还有起码不像精通起那么臭屁的名字，作者的网站确实很推荐大家去看看，/。 CSS高级技巧介绍了很多HACK技巧，也很有用，是本好书，就是翻译得比较烂。 Ajax in Action、Ajax高级编程介绍AJAX的内容，主要看看XMLHTTPRequest的介绍把，里面的例子，很多在高级编程中都看过了。 JavaScript王者归来我上当了，自己也SB了一回。 JavaScript:The Good Parts(影印版）好书，你会知道JAVASCIRPT这闷语言什么东西是好的，什么东西不好？ 其中，讲的内容都是大同小异。看完这些书，你了解了Javascript的相关知识，了解了CSS（你会知道CSS都有哪些选择器），你了解了XML的知识。呵呵，基础的开发你应该都可以自己解决了。而且你对Javascript的面向对象的开发也有了了解，有着向后兼容的开发思想。显然你看完这些书，你对WEB标准也会有一个更深层次的理解。 转自：/clpzpc/blog/item/d1e9c00068782bdf267fb590.html JavaScript学习网站发布人 ： IT专家 发布时间 ： 2009-10-21 07:29:56.0 JavaScript基础教程 /jiaocheng/javascript-jiaocheng-352.html 这是一个JavaScript的基本教程，它从零开始说起，为大家提供逐步的学习过程！本教程为未接触过js脚本的读者提供了比较完善的初级知识。 Javascript视频教程 /jiaocheng/javascript-shipin-jiaocheng-405.html 张孝祥的Javascript视频教程。教程中用到的代码网上可以找到。本教程从HTML基础入门讲解到JvaaScript高级进阶，不失为一套好的入门Javascript视频教程。 其他知识，请看：/jiaocheng/index.html 给JavaScript新手的24条实用建议发布人 ： IT专家 发布时间 ： 2009-10-21 07:34:23.0 为JavaScript做一点性能小提升吧！ 本文列出了24条能让你的代码编写过程更为轻松高效的建议。也许您还是JavaScript初学者，刚刚写完自己的Hello World，那这里有很多对您的工作将十分有用的小贴士；也许有些技巧您已经知道，那就试试快速浏览一下，看能不能发现一点新东西吧！ 注：本文多次用到Firebug的console对象，请参考Firebug Console API 。关于firebug的更详细介绍，请猛击这里: /developerworks/cn/web/wa-aj-firebug/ 1. 用 = 代替 = JavaScript里有两种不同的相等运算符：=|!= 和=|!=。相比之下，前者更值得推荐。请尽量使用前者。 引用: “如果两个比较对象有着同样的类型和值，=返回true，!=返回false。” JavaScript: The Good Parts 不过，如果使用=和!=，在操作不同数据类型时, 你可能会遇到一些意想不到的问题。在进行相等判断前，JavaScript会试图将它们转换为字符串、数字或 Boolean量。 2. 避免使用Eval函数 Eval函数把一个字串作为参数，并把字串作为JavaScript语句执行，返回结果（参考）。 此函数不仅会降低你脚本的执行效率，而且还大大增加了安全风险，因为它赋予了作为文本的参数太大的权利。千万别用！ 3. 不要使用快速写法 技术上说，你可以省略掉大部分花括弧和句尾分号，绝大多数浏览器都能正确执行以下语句： 代码: if(someVariableExists) x = false 不过，如果是这样的呢： 代码: if(someVariableExists) x = false anotherFunctionCall(); 你可能会认为它和下面的语句相等： 代码: if(someVariableExists) x = false; anotherFunctionCall(); 不幸的是，事实并非如此。现实情况是它等价于： 代码: if(someVariableExists) x = false;anotherFunctionCall(); 如您注意到的，再漂亮的缩进也不能代替这华丽的花括弧。在所有情况下都请写清楚花括号和句尾分号。在只有一行语句的时候能偶尔省略掉，虽然下这么做也是极度不被推荐的： 代码: if(2 + 2 = 4) return nicely done; 多考虑下将来吧，孩子 假设，在将来的开发过程中，你需要为这个 if 语句添加更多的命令呢？到时候你还不是得把括号给加上？ 4. 好好利用JS Lint JSLint 是由 Douglas Crockford 编写的一个调试器。你只需要贴上你的代码，它就能快速为您扫描出任何明显的错误和问题。 引用: “JSLint扫描接收的代码。发现问题，描述问题，并给出其在源码中的大概位置。可发现的问题包括但不限于语法错误，虽然语法错误确实是最常见的。JSLint也会用 约定俗成的习惯检查代码的格式化风格，以及结构错误。通过JSLint的扫描并不能保证你的程序就完全正确。它只是为您提供了额外一双发现错误的眼睛。” JSLint 文档 完成代码之前，把它放到JSLint里检查一下，快速消灭你的无心之过。 5. 在页面底部加载脚本 请记住 我们要千方百计保证客户端的页面载入速度尽可能的快。而脚本没载入完成，浏览器就没法加载页面的剩余部分。 如果你的JS文件只是添加一些额外功能例如，为点击某链接绑定事件那大可以等页面加载基本完成后再做。把JS文件放到页面最后，body的结束标签之前，这样做最好了。 更好的写法是 代码: 超哥是世界上最帅的人。是世界上最好看的博客。 6. 在 For 语句外部声明变量 当需要执行冗长的for语句时，不要让JavaScript引擎每次都重复那些没有必要的操作。例如： 这样不好 代码: for(var i = 0; i someArray.length; i+) var container = document.getElementById(container); container.innerHtml += my number: + i; console.log(i); 这段代码每次都重新定义数组长度，每次都在遍历DOM寻找container元素 太傻了！ 这样好多了 代码: var container = document.getElementById(container);for(var i = 0, len = someArray.length; i len; i+) container.innerHtml += my number: + i; console.log(i); 7. 快速构建字串 要对一个数组或对象做循环操作时，不要老惦记着一表人才的for语句，拿点创意出来嘛！明明就还有很多更快的办法： 代码: var arr = item 1, item 2, item 3, .;var list = + arr.join() + ; 8. 减少全局变量 代码: var name = Jeffrey;var lastName = Way;function doSomething() .console.log(name); / Jeffrey - or 更好的写法 代码: var DudeNameSpace = name : Jeffrey, lastName : Way, doSomething : function() .console.log(DudeNameS); / Jeffrey 注意看，我们是如何戏剧化地把“乱七八糟的脚印”都归到“DudeNameSpace”这对象之下的。 9. 写好注释 可能一开始你会觉得并无必要，但相信我，你将来会主动想要尽可能写好代码的注释的。当你几个月后再回看某项目时，结果却发现很难想起当时写某句东西时脑子在想的什么了，是不是很让人沮丧呢？或者，如果有同事要修订你的代码呢？一定，一定要为你代码里的重要部分加上注释。 代码: / 遍历数组，输出各自名称for(var i = 0, len = array.length; i 0; x-)console.timeEnd(MyTimer); 20. 读，读，读Read, Read, Read 虽然我是Web开发博客（就像这个！）的超级粉丝，但吃饭和睡觉前除了看书好像也别无选择 在你的床头柜上摆一本Web开发的好书吧！下列书单都是我的最爱： Object-Oriented JavaScript（暂无中文版） JavaScript: The Good Parts（中文版） Learning jQuery 1.3（暂无中文版，但你可以看看老版本的中文版） Learning JavaScript（中文版） 阅读他们 反复阅读很多次！我现在都还在读。 21. 自决的函数 相比于调用函数，让函数在页面载入或者某一父函数被调用时自动执行，是十分简单方便的做法。你只需要把你的函数包在父辈之内，然后添上一个额外的括号，本质上这括号就触发了你定义的函数（了解更多）。 代码: (function doSomething() return name: jeff, lastName: way ;)(); 22. 原生 JavaScript 总是会比使用代码库来的快 诸如jQuery和Mootools这样的JavaScript库，能为你写代码的过程省下不少时间尤其是当需要 AJAX 操作时。不过你可得记住，只要你的代码写得恰当，原生JavaScript总是会比利用代码库的写法执行得快一些。 jQuery的“each” 方法对于循环操作十分便利，但是使用原生态的for语句总归会快很多。 23. Crockford 的 JSON.Parse 尽管 JavaScript 2会内建JSON处理器，但写这篇文章之时，我们还是需要自己实现。Douglas Crockford，JSON的创建者，已经为我们创作出能直接使用的处理器了。您可以在这里下载。 导入这段代码，你就能新建 JSON 全局对象，然后处理你的 .json 文件。 代码: var response = JSON.parse(xhr.responseText); var container = document.getElementById(container);for(var i = 0, len = response.length; i len; i+) container.innerHTML += + + : + response.email + ; 关于JSON，请查看更多介绍。 24. 移去“Language” 很多年前，language还是每段script标签必备属性： 代码: . 不过现在，这属性已经没啥用很久了 所以，删掉算啦！ 就这些了，朋友们 javascript技巧全集（一）发布人 ： IT专家 发布时间 ： 2009-10-21 07:42:26.0 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcElement.releaseCapture(); 事件按键 event.keyCode event.shiftKey event.altKey event.ctrlKey 事件返回值 event.returnValue 鼠标位置 event.x event.y 窗体活动元素 document.activeElement 绑定事件 document.captureEvents(Event.KEYDOWN); 访问窗体元素 document.all(txt).focus(); document.all(txt).select(); 窗体命令 document.execCommand 窗体COOKIE document.cookie 菜单事件 document.oncontextmenu 创建元素 document.createElement(SPAN); 根据鼠标获得元素： document.elementFromPoint(event.x,event.y).tagName=TD document.elementFromPoint(event.x,event.y).appendChild(ms) 窗体图片 document.images索引 窗体事件绑定 document.onmousedown=scrollwindow; 元素 document.窗体.elements索引 对象绑定事件 document.all.xxx.detachEvent(onclick,a); 插件数目 navigator.plugins 取变量类型 typeof($js_libpath) = undefined 下拉框 下拉框.options索引 下拉框.options.length 查找对象 document.getElementsByName(r1); document.getElementById(id); 定时 timer=setInterval(scrollwindow(),delay); clearInterval(timer); UNCODE编码 escape() ,unescape 父对象 obj.parentElement(dhtml) obj.parentNode(dom) 交换表的行 TableID.moveRow(2,1) 替换CSS document.all.csss.href = a.css; 并排显示 display:inline 隐藏焦点 hidefocus=true 根据宽度换行 style=word-break:break-all 自动刷新 简单邮件 快速转到位置 obj.scrollIntoView(true) 锚 anchors 网页传递参数 location.search(); 可编辑 obj.contenteditable=true 执行菜单命令 obj.execCommand 双字节字符 /x00-xff/ 汉字 /u4e00-u9fa5/ 让英文字符串超出表格宽度自动换行 word-wrap: break-word; word-break: break-all; 透明背景 获得style内容 obj.style.cssText HTML标签 document.documentElement.innerHTML 第一个style标签 document.styleSheets0 style标签里的第一个样式 document.styleSheets0.rules0 防止点击空链接时，页面往往重置到页首端。 word 上一网页源 asp: request.servervariables(HTTP_REFERER) javascript: document.referrer 释放内存 CollectGarbage(); 禁止右键 document.on_contextmenu = function() return false; 禁止保存 禁止选取 favicon.ico 名字最好不变16*16的16色,放虚拟目录根目录下 收藏栏图标 查看源码 关闭输入法 自动全选 ENTER键可以让光标移到下一个输入框 文本框的默认值 title换行 obj.title = 123 sdfs 获得时间所代表的微秒 var n1 = new Date(2004-10-10.replace(/-/g, /).getTime() 窗口是否关闭 win.closed checkbox扁平 获取选中内容 document.selection.createRange().duplicate().text 自动完成功能 打开该功能 关闭该功能 窗口最大化 无关闭按钮IE window.open(aa.htm, meizz, fullscreen=7); 统一编码/解码 alert(decodeURIComponent(encodeURIComponent(http:/你好.com?as= hehe) encodeURIComponent对:、/、; 和 ?也编码 转自网络 javascript技巧全集（二） 发布人 ： IT专家 发布时间 ： 2009-10-21 07:41:35.0 /各种尺寸 s += rn网页可见区域宽：+ documen