web前端学习之路（1）Javascript DOM编程艺术总结

    昨天写好的草稿准备改一下格式结果一不小心就没了。坑爹啊！好在我心态良好，所以打算重新写一遍，这次就不啰嗦了，直接写重点。

    到今天为止已经学习前端一周了，把JavaScript DOM编程艺术作为入门书籍，看了一个星期终于看完了，这本书不愧是入门级神书，看完以后我立马就知道HTML/CSS/JavaScript/DOM/Ajax/JQuery是干什么的了，他利用简单的例子不仅可以使我们快速提起兴趣而且还教会了我们编程思想以及基本的常用的知识点，强烈推荐，入门必看书籍。

    总结：

    1、学习前端不得不考虑的问题就是浏览器兼容的问题。

    2、HTML：用写内容的

         CSS：给文本布局，比如设置字体颜色大小等

         JavaScript：利用DOM来支配页面的行为

         DOM：一种API（应用编程接口），简单地说，API就是一组已经得到有关各方共同认可的基本约定。（摘抄自原书）

         Ajax：异步加载页面内容，该技术的核心是XMLHTTPRequest对象，他充当客户端与服务器中间人的角色。使用他可以 做到只加载页面一小部分内容，其他内容都不会更新。

         jQuery：是一个简洁的JavaScript库，就是可以重复使用的JavaScript代码，别人写好的，你直接拿过来用就可以了。

    3、编程思想：

         平稳退化：如果用户浏览器禁用了JavaScript，你的网站仍然能顺利的浏览全部重要信息，不能出现访问页面不存在之类的问题。

         渐进增强：用一些额外的信息去包裹原始信息，

         对象检测：为了安全起见，应该多用if()检测浏览器是否支持你所使用的方法。（但是也不可以过多）

         三者分离：内容，布局，行为三者分离，只需要少量 的“钩子”使他们联系起来。

     4、书中一些函数比较常用可以记下来比如addLoadEvent();addClass();insertAfter();highlightRows();

function addLoadEvent(func) {  var oldonload = window.onload;  if (typeof window.onload != 'function') {    window.onload = func;  } else {    window.onload = function() {      oldonload();      func();    }  }}function insertAfter(newElement,targetElement) {  var parent = targetElement.parentNode;  if (parent.lastChild == targetElement) {    parent.appendChild(newElement);  } else {    parent.insertBefore(newElement,targetElement.nextSibling);  }}function addClass(element,value) {  if (!element.className) {    element.className = value;  } else {    newClassName = element.className;    newClassName+= " ";    newClassName+= value;    element.className = newClassName;  }}function highlightRows() {  if(!document.getElementsByTagName) return false;  var rows = document.getElementsByTagName("tr");  for (var i=0; i<rows.length; i++) {    rows[i].oldClassName = rows[i].className    rows[i].onmouseover = function() {      addClass(this,"highlight");    }    rows[i].onmouseout = function() {      this.className = this.oldClassName    }  }}

    5、学习前端肯定会遇到页面无法按照预想的结果显示，这可能不是你的代码的问题（绝大多数都是代码的问题），还有可能是你没有对浏览器进行高级设置，如下图1所示，把该勾上勾上，该去掉的去掉，但是或许你还是不行，那可能是没有看到图2这个小坑，你应该点击允许阻止的内容。（我用的是IE11）

（1）

（2）

     6、this的使用，我觉得this这个关键字非常的神奇，但是我现在掌握的不多，大概知道本书中的使用套路大致为

           function（）{

                for（）{

                       xxx.[i].onchick/onmouseover/onmouseout/onfocus/onblur=function(){

                               this.getAttribute();//一系列的行为           

                            }

                   }

             }

    7、本书中遇到Ajax的例子，我用IE测试都行不通，如果你也是不妨尝试一下Firefox。

    8、利用DOM改变布局有时候会比CSS简单很多，JavaScript擅长将复杂繁重的任务变得简单（while、for）。

    9、一定要认真读代码，一行一行的读，否则连自己哪里错了都不知道。

要说的差不多就这么多了，有什么问题欢迎批评指正，我的学习之路还很长，另外如果有人看到这篇文章，想和我一起学习的话可以加我qq:2461890083。