一周前端学习历程 分享一下&求指教

   最近用了1个星期的时间来学习html5,css3和js,学的当然不够系统，感触比较深的就是要想快速提高编程能力，多写代码和选择一本好书同等重要。

   我身边有许许多多的人整天就抱着一门语言的教程，厚的如同字典，翻来覆去的看啊看(大一的时候我也曾经这样过)，到头来问他们学的什么几乎都忘记了，不仅消耗了大量的时间，关键还做了无用功。

   关于html和css的学习建议在http://www.w3school.com.cn/学习，用较短的时间把基本概念浏览一下即可，剩下的就是实践，可以自己先写一个简单的blog 界面，把基本的元素堆叠好，然后再学习用css布局来改造自己的界面,css布局的精妙之处不是速成可以体会得到的，要多看优秀的设计作品，形成自己的设计风格，包括颜色的调配，自己设计界面，设计工具的应用等等，总之这些是需要时间来完成的.

    对我们现在来说，我们暂不考虑这些，仅仅要求我们的界面干净自然，不至于太拥挤，太空荡，主题要显著就可以了，而且我个人觉得在界面的设计上，如果没有能力驾驭太多的颜色，或者是本来就不喜欢驾驭太多颜色，反而不如用极少的颜色凸显设计的风格，一定不要滥用颜色渐变，渐变一点也不cool。

    另外如果大家喜欢刷人人网的话，推荐可以看一下一个叫意匠的小站，上面有不少平面设计或者手绘的东西。

    本篇文章不是要说明如何解决一些什么样的问题，仅仅是对像我一样的刚入门的新手的一篇或许有些许启迪作用的文章，当然，你如果已经在web混迹多年而且这篇文章你坚持看到了这里说明你是一个有耐心的读者，同时谢谢赏脸(｡◕‿◕｡)，

   下面的内容基本无代码所以读者们可以考虑自己的情况。

   html篇:切忌不要把大量的时间花费在读大部头的html语法书上，之前已经说过了，w3school已经足够现在的我们成长了。布局之类的我们尽可能的放手交给css来做，包括以后的js脚本等，都要做到实现分离，即我们需要在浏览器完全不支持css和js的时候(当然现在大部分浏览器还是可以的，当然我们也可以通过hack的方式去解决浏览器之间的问题)

   html5以来,大部分的浏览器已经支持了90%+的标准，不过还是建议大家用firefox或者chrome。至于原因大家自行google。

   自从有了html5,我们又多了一些好玩具，这里只说下我最感兴趣的canvas。

   创建一个canvas标签，加入id属性，我们即可通过js dom来对自己的canvas进行控制，随手涂鸦，可以绘制基本的线型，圆形矩形，线性渐变等等，进一步的我们可以制作图形组合，最后配合着js我们可以实现简单的动画，你可以试着做一个时钟。如果你对游戏感兴趣，当你学了js的时候就可以尝试着做一些小的游戏了。

  下面推荐一个canvasdemo的网站 www.canvasdemos.com/ 只能用amazing来形容。

  css篇:css中选择器十分重要，建议新手先熟悉class和id选择器，剩下的看到什么用到什么学什么即可。

       布局的话建议把css作为外部文件用link链接即可，以降低耦合度和减少重复代码。

       padding margin的掌握,以及相对布局，绝对布局，学会shadow的应用可以让自己的设计变得更美观，当然，同样不可滥用。

       接下来就是要看一下css3的动画，当然，一个好的动画会让web设计更加生动富有表现力，但是要用恰当并不简单。

  好了，我们最重要的地方开始了，javascript,

        与java没什么关系 一般来说，完整的JavaScript包括以下几个部分：

   ECMAScript，

        描述了该语言的语法和基本对象 文档对象模型（DOM），

        描述处理网页内容的方法和接口 浏览器对象模型（BOM），

        描述与浏览器进行交互的方法和接口

  它的基本特点如下：

是一种解释性脚本语言（代码不进行预编译）。

主要用来向HTML页面添加交互行为。

可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。

JavaScript常用来完成以下任务：

嵌入动态文本于HTML页面

对浏览器事件作出响应

读写HTML元素

在数据被提交到服务器之前验证数据

检测访客的浏览器信息

控制cookies，包括创建和修改等

  在这里我们也不讲基本语法什么，如果需要可以参考网上的教程或者什么，我们在这里只想让大家对js DOM有一个初步的认识，以及在写js的时候我们需要考虑什么。

  另外，我觉得在编程的学习中，有两种做法，第一种即是我们直接去解决问题，并不关心它的效率，优美程度等问题第二种是我们在写代码的时候考虑设计的优劣，算法的效率，耦合性等等问题，当然，两种都可，但是在第一条路上的人如果要成为优秀的程序员必然会过渡到第二条路上，所以不如我们索性就按照第二条路来走。

   接下来，进入正题： 首先我们对DOM进行解释，D,O,M分别代表document object model. document即把一个web页面转换为一个文档对象,如果你学过基本的数据结构，你会感觉像xml,xhtml,html这些东西都与树的 构造十分相似，大家可以简单的把dom理解成通过js来操纵文档对象的结点，无论是动态生成新的，或者对旧的进行属性更改，他们的本质都是类似的。

   通过在html中元素的id属性,我们可以通过getElementById一类的方法进行精确的定位，这个方法的返回值即是一个对象(或是一组对象)，我们可以通过改变属性来实现一些简单的效果，请注意，简单并不代表我们不需要，事实上，一个优秀的网站作品都是许许简单的组合，太复杂的效果不仅与我们的需求关系不大，毕竟我们需要的是网站本身的内容，因此大家在使用js的时候不要主次异位，这里，我们还是强调不要滥用技术。

  下边是几点建议:以后还会补充

js建议1：javascript 伪协议不要使用 我们经常会看到这样的东西，但是我们要考虑到我们的用户本身，因此不要去猜测用户本身，我们 要为用户做好一切的安排。

<下边部分引用自他人blog> 这是一个曾经被多次讨论过的问题，长期以来，我也一直是这样写的。读了 a href=”javascript:void(0);” — avoid the void 之后，我认同了作者的意见。下面的写法确实更合理：Link或者Link以往大家不使用"#"的问题是，这将导致点击链接时页面跳回页面顶部，但通过 return false 语句将使得浏览器忽略链接的默认动作，从而避免了此问题。youngpup 更有意思，他在How to Create Pop-Up Windows 中言辞激烈的倡导大家永远永远永远不要使用 javascript: 伪协议： Never, ever, ever use the javascript: pseudo-protocol for anything, ever ever ever ever again. Please. Pretty please. 他的解决方案是：这样的好处就是可以保存到书签或者收藏夹，可以左键单击，也可以右键使用！

js建议2:script 放在/body前 以便快速载入js建议

3:web平稳退化 结构与样式的分离。

推荐一本书 《javascript dom编程艺术》，十分适合初学者。