符合中小企业对网站设计、功能常规化式的企业展示型网站建设
本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...
商城网站建设因基本功能的需求不同费用上面也有很大的差别...
手机微信网站开发、微信官网、微信商城网站...
j入门还是比较容易的,想要深入的话就需要一点时间,
我们提供的服务有:网站设计制作、网站建设、微信公众号开发、网站优化、网站认证、宁国ssl等。为上千多家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的宁国网站制作公司
系统的方法还是根据w3c的入门步骤去学,边学边做,
要经常写才行,当然没有人指导的话会走不少弯路。
你可以找一些视频教程来跟着学习,
也可以向身边的前端工程师朋友请教。
这个是我的博客网页链接里面有入门教程,
是经过我的系统分类了的,当然如果你一点基础都没有的话
还是去w3c网站上看教程
学习JavaScript,不需要英语很好,只需要能看懂基本的语法单词就可以了。学习JavaScript更加重要的事对于js语法、HTML语法的理解。英语不是重点,只是基本的语法单词基础。
ECMAScript和JavaScript有比较明显的区别,ECMAScript是标准,而JavaScript是实现。
JavaScript一种通用目的的脚本语言,遵循 ECMAScript 规范。并且它是 ECMAScript 语言的一个分支版本。ECMAScript是一种由Ecma国际(前身为欧洲计算机制造商协会)通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛,它往往被称为JavaScript或JScript,但实际上后两者是ECMA-262标准的实现和扩展。
ECMAScript的主要特点是:
在ECMA-262中,ECMAScript符合性有明确的定义。一个脚本语言必须满足一下四项基本原则:
1、符合的实现必须按照ECMA-262中所描述的支持所有的“类型、值、对象、属性、函数和程序语言及语义”;
2、符合的实现必须支持Unicode字符标准(UCS);
3、符合的实现可以增加没有在ECMA-262中指定的“额外的类型、值、对象、属性和函数”。ECMA-262将这些增加面熟为规范中未定给的新对象或对象的新属性;
4、符合的实现可以支持没有在ECMA-262中定义的“程序和正则表达式语法”。
JavaScript的主要特点是:
由三部分组成:ECMAScript、BOM以及DOM
1、核心——ECMAScript:提供核心语言功能
2、文档对象模型——DOM:提供访问和操作网页内容的方法和接口针对XML但经过扩展 用 于HTML的应用程序编程接口(API)。DOM把页面映射成一个多层节点结构。为什么使用DOM?Netscape和微软在开发DHTML方面各持己见,为避免两强割据,浏览器互不兼容的局面,保持Web跨平台的天性,DOM应运而生。
DOM1级:由DOM Core和DOM HTML两部分组成。DOM Core规定如何映射基于XML的文档结构,DOM HTML在DOM Core的基础上扩展,增加了针对HTML的对象和方法。
DOM2级:在原来DOM的基础上扩充了鼠标和用户界面事件、范围、遍历(迭代DOM文档的方法),且通过对象接口增加了对CSS的支持,DOM1级中的DOM Core也经过扩展开始支持XML命名空间。引入了新模块:DOM Views——定义了跟踪不同文档视图的接口;DOM Events——定义了事件和事件处理的接口;DOM Style——定义了基于CSS为元素应用样式的接口;DOM Traversal and Range——定义了遍历和操作文档树的接口。
DOM3级:引入了以统一方式加载和保存文档的方法——在DOM加载和保存(DOM Load and Save)模块中定义;新增了验证文档的方法——在DOM验证(DOM Validation)模块中定义。对DOM Core进行了扩展,开始支持XML 1.0规范,涉及XML Infoset、XPath和XML Base。
3、浏览器对象模型——BOM:提供与浏览器交互的方法和接口
BOM可以访问和操作浏览器窗口,使用BOM可以控制浏览器显示的页面以外的部分。HTML5致力于把很多BOM功能写入正式规范。从根本上讲,BOM只处理浏览器窗口和框架,但习惯把所有针对浏览器的JavaScript扩展算作BOM的一部分,包括弹出新浏览器窗口的功能,移动、缩放和关闭浏览器窗口的功能,提供浏览器详细信息的navigator对象,提供浏览器所加载页面的详细信息的location对象,提供用户显示器分辨率详细信息的screen对象,对cookie的支持,像XMLHttpRequest和IE的ActiveXObject这样的自定义对象。BOM是由navigator、history、screen、location、document五个对象组成的。
补充拓展:
JavaScript引擎
理解并执行JavaScript代码的解释器
浏览器中会有JavaScript引擎,比如Chrome有V8,Firefox有SpiderMonkey,Edge有Chakra。JavaScript引擎处理JavaScript代码,类似于人对语言的处理。
人对语言的处理存在差异,那么就不难理解浏览器处理JavaScript的差异了。
浏览器性能差异
假设两个人都可以理解”jump”指令,其中1个人也许会反应快一些,因为他可以更快的理解和处理”jump”。同样的,两个浏览器都可以理解JavaScript代码,但是其中1个浏览器会快一些,因为它的JavaScript引擎的实现方式更加高效。
浏览器支持差异
我们都知道,不同人对同一种语言的了解和使用是存在差异的。比如,许多人都使用英语,有些人知道的单词、短语和语法,其他人未必都知道。浏览器也是一样的。尽管浏览器的JavaScript引擎都能理解JavaScript,但是有些浏览器的理解能力更强,它们对JavaScript的支持是不一样的。
每个函数负责的任务都不一样,你也不拿个函数出来怎么给你读啊,
其实跟普通函数没什么两样,就是自己调用自己,无限循环调用,直到遇见 return
学javascript的话确实有C语言基础比较好,因为javascript从C-minus发展到ECMAscript,最终才是javascript,但是javascript的难点不在它的语法上,而是在他的浏览器兼容性上,这点是万恶的微软搞出来的。javascript和C的难点是不一致的,所以没必要去学C语言。javascript要记住的东西非常多,而且条例不是很清楚,一般感觉比C语言用起来还麻烦。
既然做web前端的话,美工比javascript重要的多,毕竟有时候前端代码都有现成的模板可以使用。相比之下javascript很多代码都是通过后台脚本直接嵌入到html页面中的,比如Ajax代码等。所以前端的话,初期只要会dom编程即可,能看懂框架代码,慢慢理解就是了。
最难的部分是CSS,布局这点比javascript难的多,浏览器兼容性更令人伤心,毕竟javascript还有jquery等框架可以使用,但是css就没这么幸运了,除了某些css属性可以通过jquery等框架屏蔽兼容之外,必须要手动调试。
反正到最后你都必须精通HTML+CSS+javascript,内容很少,但是很杂论,作为吃饭的工具,你不得不精通。甚至到最后你还得回后台代码才行比如,PHP 、java、C#等,因为单单是做前端的很少的,大部分公司都是混合前后台的,除了某些大公司,专门找美术专业的做前台设计。
本人在开发工作中就曾与不按规范来开发的同事合作过,与他合作就不能用"愉快"来形容了。现在本人撰写此文的目的除了与大家分享一点点经验外,更多的是希望对未来的合作伙伴能够起到一定的借鉴作用。当然,如果我说的有不科学的地方还希望各路前辈多多指教。下面分条目列出各种规范要求,这些要求都是针对同事编码毛病提出来的,好些行业约定的其它规范可能不会再提及。1. 保证代码压缩后不出错对于大型的JavaScript项目,一般会在产品发布时对项目包含的所有JavaScript文件进行压缩处理,比如可以利用Google Closure Compiler Service对代码进行压缩,新版jQuery已改用这一工具对代码进行压缩,这一般会去掉开发时写的注释,除去所有空格和换行,甚至可以把原来较长的变量名替换成短且无意义的变量名,这样做的目的是加快文件的下载速度,同时也减小网站访问带来的额外数据流量,另外在代码保护上也起到了一点点作用,至少压缩后的代码即使被还原还是没那么容易一下读懂的。要想代码能正确通过压缩,一般要求语句都要以分号正常结束,大括号也要严格结束等,具体还要看压缩工具的要求。所以如果一开始没有按标准来做,等压缩出错后再回去找错误那是浪费时间。2. 保证代码能通过特定IDE的自动格式化功能一般较为完善的开发工具(比如Aptana Studio)都有代码"自动格式"化功能,这一功能帮助实现统一换行、缩进、空格等代码编排,你可以设置自己喜欢的格式标准,比如左大括号{是否另起一行。达到这个要求的目的在于方便你的开发团队成员拿你代码的一个副本用IDE自动格式化成他喜欢或熟悉的风格进行阅读。你同事需要阅读你的代码,可能是因为你写的是通用方法,他在其它模块开发过程中也要使用到,阅读你的代码能最深入了解方法调用和实现的细节,这是简单API文档不能达到的效果。3. 使用标准的文档注释这一要求算是最基本的,这有利于在方法调用处看到方法的具体传参提示,也可以利用配套文档工具生成html或其它格式的开发文档供其他团队成员阅读,你可以尝试使用jsdoc-toolkit。如果你自动生成的API是出自一个开放平台,就像facebook.com应用,那么你的文档是给天下所有开发者看的。另外编写完整注释,也更方便团队成员阅读你的代码,通过你的参数描述,团队成员可以很容易知道你编写的方法传参与实现细节。当然也方便日后代码维护,这样即使再大的项目,过了很长时间后,回去改点东西也就不至于自己都忘记了当时自己写的代码是怎么一回事了。4. 使用规范有意义的变量名使用规范有意义的变量名可以提高代码的可读性,作为大项目开发成员,自己写的代码不仅仅要让别人容易看懂。开发大项目,其实每个人写的代码量可能都比较大,规范命名,日后自己看回自己的代码也显的清晰易懂,比如日后系统升级或新增功能,修改起代码来也轻松多了。如果到头发现自己当初写的代码现在看不太懂了,那还真是天大的笑话了。当然,使用有意义的变量名也尽量使用标准的命名,比如像这里:var me = this也许没有var self = this好,因为self是Python中的关键字,在Python中self就是通常语言this的用法。再看下面一个例子,加s显然比没有加来的科学些,这样可以知道这个变量名存的是复数,可能是数组等: var li = document.getElementsByTagName('li') var lis = document.getElementsByTagName('li') 5. 不使用生偏语法JavaScript作为一门动态脚本语言,灵活性既是优点也是缺点,众所周知,动态语言不同层次开发人员对实现同样一个功能写出来的代码在规范或语法上会存在较大的差别。不管怎么样,规范编码少搞怪,不把简单问题复杂化,不违反代码易读性原则才是大家应该做的。比如这语句:typeof(b) == 'string' alert(b)应该改为:if (typeof(b) == 'string') alert(b),像前面那种用法,利用了运算符解析机制:如果检测到前语句返回false就不再检测后面语句,在代码优化方面也有提到把最可能出现的情况首先判断,像这种写法如果条件少还好,如果条件较多而且语句也长,那代码可读性就相当差。又比如:+function(a){var p = a;}( 'a')应该改为:(function(a){var p = a;})( 'a'),其实function前面的+号与包含function的()括号作用是一样的,都是起运算优先作用,后者是常见且容易看明白的防止变量污染的做法,比如好些流行JavaScript框架就是采用后面这种方式。再说个降低代码可读性的例子,如:function getPostionTxt(type){return type == 2 ? "野外" : (type == 3 ? "商城" : (type == 4 ? "副本" : null));}应该改成:function getPostionTxt(type){var typeData={"2":"野外","3":"商城","4":"副本"};if (typeData[type]) return typeData[type]; else return null;}。如果type是从0开始不间断的整数,那么直接使用数组还更简单,这种结果看起来就清晰多了,看到前面那种多层三元表达式嵌套头不晕吗。6. 不在语句非赋值地方出生中文语句中不应该出现中文我想一般人都知道,虽然这样做不影响程序运行,但是显然有背行业标准要求,当然我们也不是在使用"易语言"做开发。关于这一个问题,我本来不想把它拿出来说的,但我确实遇到有人这样做的,也不知道是不是因为他的英语实在太烂了,至少还可以用拼音吧,另外寻求翻译工具帮忙也不错的选择。我举例如下,像以下写法出现在教学中倒还可以理解:this.user['名字'] = '张三' 或者 this.user.名字 = '张三'7. 明确定义函数固定数量的参数固定数量参数的函数内部不使用arguments去获取参数,因为这样,你定义的方法如果包含较多的脚本,就不能一眼看到这个方法接受些什么参数以及参数的个数是多少。比如像下面: var $ = function(){return document.getElementById(arguments[0]);}应该改成:var $ = function(elemID){return document.getElementById(elemID);} 8. 不必热衷动态事件绑定虽然知道事件可以动态绑定,比如使用addEventListener或者使用jQuery的bind方法,也知道采用动态事件绑定可以让XHTML更干净,但是一般情况下我还是建议直接把事件写在DOM节点上,我认为这样可以使代码变得更容易维护,因为这样做,我们在查看源代码的时候就可以容易地知道什么Element绑定了什么方法,简单说这样更容易知道一个按钮或链接点击时调了什么方法脚本。9. 降低代码与XHTML的耦合性不要过于依赖DOM的一些内容特征来调用不同的脚本代码,而应该定义不同功能的方法,然后在DOM上调用,这样不管DOM是按钮还是链接,方法的调用都是一样的,比如像下面的实现显然会存在问题: function myBtnClick(obj) { if (/确定/.test(obj.innerHTML)) alert('OK'); else if (/取消/.test(obj.innerHTML)) alert('Cancel'); else alert('Other'); } a herf="javascript:;" onclick="myBtnClick(this)"确定/aa herf="javascript:;" onclick="myBtnClick(this)"取消/a 上面例子其实在一个函数内处理了两件事情,应该分成两个函数,像上面的写法,如果把链接换成按钮,比如改成这样:input type="button" onclick="myBtnClick(this)" value="确定" /,那么myBtnClick函数内部的obj.innerHTML就出问题了,因为此时应该obj.value才对,另外如果把按钮名称由中文改为英文也会出问题,所以这种做法问题太多了。10. 一个函数应该返回统一的数据类型因为JavaScrip是弱类型的,在编写函数的时候有些人对于返回类型的处理显得比较随便,我觉得应该像强类型语言那样返回,看看下面的两个例子: function getUserName(userID) { if (data[userID]) return data[userID]; else return false; } 应该改为: function getUserName(userID) { if (data[userID]) return data[userID]; else return ""; } 这个方法如果在C#中定义,我们知道它准备返回的数据类型应该是字符串,所以如果没有找到这个数据我们就应该返回空的字符串,而不是返回布尔值或其它不合适的类型。这并没有影响到函数将来的调用,因为返回的空字符串在逻辑判断上可被认作"非",即与false一样,除非我们使用全等于"==="或typeof进行判断。11. 规范定义JSON对象,补全双引号使用标准肯定是有好处的,那么为什么还是有人不使用标准呢?我想这可能是懒或习惯问题。也许还会有人跟我说,少写引号可以减轻文件体积,我认为这有道理但不是重点。对于服务器返回的JSON数据,使用标准结构可以利用Firefox浏览器的JSONView插件方便查看(像查看XML那样树形显示),另外你如果使用jQuery做开发,最新版本jQuery1.4+是对JSON格式有更高要求的,具体的可以自己查阅jQuery更新文档。比如:{name:"Tom"}或{'name':'Tom'}都应该改成{"name":"Tom"}。12. 不在文件中留下未来确定不再使用的代码片段当代码调整或重构后,之前编写的不再使用的代码应该及时删除,如果认为这些代码还有一定利用价值可以把它们剪切到临时文件中。留在项目中不仅增加了文件体积,这对团队其它成员甚至自己都起到一定干扰作用,怕将来自己看回代码都搞不懂这方法是干什么的,是否有使用过。当然可以用文档注释标签@deprecated把这个方法标识为不推荐的。13. 不重复定义其他团队成员已经实现的方法对于大型项目,一般会有部分开发成员实现一些通用方法,而另外一些开发成员则要去熟悉这些通用方法,然后在自己编写模块遇到有调用的需要就直接调用,而不是像有些开发者喜欢"单干",根本不会阅读这些通用方法文档,在自己代码中又写了一遍实现,这不仅产生多余的代码量,当然也是会影响团队开发效率的,这是没有团队合作精神的表现,是重复造轮子的悲剧。比如在通用类文件Common.js有定义function $(elemID){return document.getElementById(elemID)}那么就不应该在Mail.js中再次出现这一功能函数的重复定义,对于一些复杂的方法更应该如此。14. 调用合适的方法当有几个方法都可以实现同类功能的时候,我们还是要根据场景选择使用最合适的方法。下面拿jQuery框架的两个AJAX方法来说明。如果确定服务器返回的数据是JSON应该直接使用$.getJSON,而不是使用$.get得到数据再用eval函数转成JSON对象。如果因为本次请求要传输大量的数据而不得以使用$.post也应该采用指定返回数据类型(设置dataType参数)的做法。如果使用$.getJSON,在代码中我们一眼能看出本次请求服务器返回的是JSON。温馨提示:jQuery1.4后,如果服务器有设置数据输出的ContentType,比如ASP.NET C#设置 Response.ContentType = "application/json",那么$.get将与$.getJSON的使用没有什么区别。15. 使用合适的控件存储合适的数据曾发现有人利用DIV来保存JSON数据,以待页面下载后将来使用,像这样:div id="json"{ "name":"Tom"}/div,显然这个DIV不是用来界面显示的,如果非要这样做,达到使用HTML文件进行数据缓存的作用,至少改成用隐藏域来存这数据更合理,比如改成:input type="hidden" value=" { "name":"Tom"}" /。其实也可以利用window对象来保存一些数据,像上面的例子,我们可以在AJAX请求页直接包含这样的脚本块:scriptwindow.userData = { "name":"Tom"};/script,当在AJAX请求回调函数中执行完$( "#MyDiv ").html(data)后,在window上就马上有了这一变量。如果采用第一种方法,将不可避免eval(document.getElementById("UserData").innerHTML)。如果在window对象存放大量数据的话,这些数据不用时要及时手动清理它们,它们是要等浏览器刷新或重启后才会消失的,这就会增加内存开销。16. 永远不要忽略代码优化工作代码最优化是每个程序员应该努力达到的目标,也应该成为程序员永远的追求。写代码的时候,不应该急着把功能实现出来,要想一下如何写代码,代码的执行效率才是较好的。举个例子:假设有定义getElementById的快捷方法functoin $(elemID){return document.getElementById(elemID)},那么有人可能会写出这样的代码$("MyDiv").parentNode.removeChild($("MyDiv")),其实这里执行了两次getElementById DOM查找,如果改成这样将更好:var myDiv = $("MyDiv"); myDiv.parentNode.removeChild(myDiv)。还好getElementById的DOM查找算比较快,如果换成getElementsByTagName则更应该注重优化了。jQuery开发团队也有提醒大家要注意这方面的问题。当然,代码优化技巧也是需要个人不断积累的。曾有朋友跟我说他写网站后台代码从来不用考虑优化的,因为他们网站用的是至强四核服务器,我觉得这是很可笑的。17. 会分析策划文档,能用面向对象方法进行接口定义和代码组织这一能力对于每一个程序员来说都是非常重要的,这也是决定一个程序员水平高低的一个重要因素。能够把需求细化并抽象出不同的类,然后有条理地编写代码,使代码结构清晰,可读性高,代码易于维护,不至于太过程化而且杂乱无章,这样才算是一个优秀的程序员。