web前端开发入门提高 js书籍


WEB前端研发工程师
,在国内算是一个朝阳职业,这个领域没有学校的正规教育,大多数人都是靠自己自学成才。本文主要介绍一些web开发的书籍,目的是给想了解JavaScript或者是刚接触JavaScript的朋友,介绍如何通过循序渐进的看书来学习javascript。

一. 入门级 :就是有一定的基础(比如最常见的HTML标签及其属性、事件、方法;最常见的CSS属性;基础的JavaScript编程能力),能够完成一些简单的WEB前端需求。

  推荐:《JavaScript dom 编程艺术

  理由:此书绝对是入门的好书,本人也是在接触JS一段时间后才看的这本书。此书从JS的历史 – JS基础语法知识 – DOM介绍和简单的使用。

  评价:简洁,实用,详细,易懂,书不厚,相信很快就能看完。

下载地址:http://www.kuaipan.cn/file/id_66867997939073035.html

二.初级开发:不要苛责代码的对错严谨,毕竟每个程序员都有这样的一个过程,就是这个级别的特征。

  推荐:《javascript高级程序设计》(第二版)

  理由:这本书的作者是 Nicholas C.Zakas ,博客地址是 http://www.nczonline.net/ ,大家可以去多关注,雅虎的前端工程师,是YUI的代码贡献者,可想而知这本书得含金量,他出的书都广受好评。这本书已经出了第二版,而且与第一版相比内容更新很大,直接第二版就行。不要被书名的“高级”唬住,只要有JS基础语法知识和DOM基础知识就行,而且本书开始阶段还是介绍JS和DOM的语法知识。

  评论:重点推荐一下第五章(类型),第六章(OOP),第七章(匿名),多看几遍,至少要完全看明白,能为以后进阶打好基础,个人感觉这几章是本书的精华所在。这本书在入门的时候看节奏会快了一些,所以不建议初学者看,可是相对于我一会要介绍的书又算基础一点,所以建议先阅读完这本书,对浏览器兼容和语法知识有一定了解之后再往下阅读。

下载地址:http://www.kuaipan.cn/file/id_66867997939073036.htm

  推荐:《高性能 JavaScript》《JavaScript语言精粹》

  理由:先看的是《高性能JS》,这本书还是 Nicholas C.Zakas 所著,经典之作,书中大量举例了各种不同写法的JavaScript在浏览器中的性能情况,对规范JavaScript代码和提升性能有很好的帮助,最后提到了很多工具和性能测试的方法,都是灰常灰常有实际作用的,看得出作者很厚道(好吧,偶承认了,偶是他的粉丝)^_^,记忆最深的一句话:”如果 JavaScript 执行了几秒钟,那么很可能是你做错了什么”;;

    《语言精髓》和《高性能》有少部分关键知识都重复提到了,可是为什么要推荐这本书,因为本书对JS语言本质的描述太棒了,这是一本介绍JavaScript语言本质的权威书籍,从 “对象”,“函数”,“继承”,“数组”等等多个重要知识着手。我补一句话 – 本书需要反复阅读。

  评论:都是好书,都很薄,而且所说的内容只要有基础都不难。相信读完之后会对JS又有新的认识,且对以后的代码规范和浏览器差异性等高级问题有了新的认识,如果读完之后会有种被灌顶的感觉,那么恭喜你,你离中级不远了。

下载地址:http://www.kuaipan.cn/file/id_66867997939073044.html

三.中级开发:“中级开发人员的标志就是在高级开发或架构师较少的指导下高质量的完成工作,并对产品或项目有自己的想法与理解”。

  强烈推荐:《JavaScript DOM高级程序设计》

  理由:此书灰常犀利,本人一共看了近半年的时间,已反复阅读多次。说实话,这本书的翻译一般,代码也有少许错误,可是这不影响这本书的强大,通过学习本书,可以理解一个JS的库如何产生,自己动手写一个简单的自己的JS库,如果你打算研究其他的JS库或者正在研究其他的JS库,那么这本书会使你的理解达到新的高度,进阶高级必读,写库必读。

  评论:异常强大的一本JS巨作,此书不薄,强烈推荐。

下载地址: 收集中

  强烈推荐:《JavaScript设计模式》

  理由:异常生猛的一本书,看书名带“设计模式”就知道,这本书想要读明白有点困难,本人自己感觉,只要某书一带“模式”这两字,反正就简单不了。本书对JS的“模仿接口”,“封装”,“继承”,“链式调用”,“工厂模式”等各种具体的设计模式及其在JavaScript 语言中的应用进行了详细的介绍,运用设计模式使代码更模块化、更高效并且更易维护。

  评论:书不厚,可真的是内容丰富且高深,强烈建议购买。

下载地址:http://www.kuaipan.cn/file/id_66867997939073049.html

  推荐:《高性能网站建设指南》《高性能网站建设进阶指南》

  理由:在读完前几本书之后我们对前端的性能和自己的代码的效率已经达到相当的高度了,然后我们在接触一些前端工程师的一些精髓。本书对HTTP请求,CDN,内容缓存和一些web开发中常见问题进行讲解。

  评论:书都不厚,可是说的都是比较实用的东西,可是用不用的上还得看个人和项目需要了。

  以上就是整理WEB前端开发前辈们的一些JS相关书籍,朋友会问,为什么就只介绍的中级的,那么高级看的书在哪?有木有高级的书?进阶高级程序员之路又在哪?说下我自己的看法和对年轻朋友的建议吧,说的不好或不对请原谅,其实我也才真正工作两年多:

    1.主要是工作经验问题。达到一定程度以后真的合适的书很难找了,更多只有在工作中总结和积累。工作的越久碰到过的问题也就越多,^_^。所以一般说高级程序员一般都是至少都3年以上的工作经验,没办法,实践才出真理。

    2.我觉得高级web前端灰常有必要总结一个自己的JS库,不管大小,总归有一套自己的东西(嘿嘿,如果认真的实践过《JS DOM高级》的内容,估计有一套JS库的原型了)。

    3.前端有必要懂得和熟悉一本服务端语言,其实计算机语言很多语法大致都差不多,不同的就是内置的方法和属性,所以去熟悉一门语言并不难。

    4.许多年轻人都有眼高手低的毛病,我也一样,例如,有的人认为自己编起程序来很顺手,不用查手册,说写就写,很熟练,几乎什么程序都能编出来,就认为自己对这种语言很精通了。其实对于一门语言的掌握程度是不可深测的,对于语言掌握其实是一个无止尽的过程,没有终点。编写时间的长短和编写熟练程度,仅仅是精通语言表现的一个方面。更重要的是程序员要掌握这个语言的适用范围,整体构架,语法规则、功能分类等基础理论方面的知识,并能利用这方面的知识,用最科学的方法去解决现实中各种项目的各个问题。


 

原文链接

2012-11-12-CSS剪贴图像的几种方法

在不改变原来图片大小的情况下,剪切有几个方法(每种方法都要把img包在一个元素内来定位):

1.用margin给img切图

<style>
p{
width:400px;
height:300px;
margin-right:20px;
border: 5px lightblue solid;
float: left;
overflow: hidden;/设置溢出隐藏/
}
img#usemargin{
margin:-40px -40px -40px -40px;
}
</style>

demo1

2.用absolute给img切图

<style>
p{
width:400px;
height:300px;
margin-right:20px;
border: 5px lightblue solid;
float: left;
overflow: hidden;/设置溢出隐藏,必需/
position: relative;/必需!/
}
img#useabsolute{
position:absolute;/必需!/
top:-40px;
right:-50px;
}
</style>

demo2

3.用clip给img切图

<style>
p{
width:400px;
height:300px;
margin-right:20px;
border: 5px lightblue solid;
float: left;

position: relative;/必需!/
}
img#useclip{
position:absolute;/必需!/
clip: rect(20px 225px 200px 55px);

}
img#withoutclip{
opacity:0.4;
}
</style>

demo3

4.用clip给背景切图

<style>

div{
float:left;
margin-right: 20px;
}
div#noclip{
background:url(2.jpg) no-repeat;
width:400px;
height:300px;
opacity:0.5;

}
div#clip{
background:url(2.jpg);
width:400px;
height:300px;
text-align: center;
line-height: 130px;
border:1px solid white;
opacity:1;
/使用clip的条件是position:absolute,父元素则为position:relative/
position: absolute;
clip:rect(50px 250px 150px 50px);
/注意,在IE8以及其以下的版本,在使用clip属性时需要注意语法:clip (top,right,bottom,left);/
}

</style>

demo4

 

 

5.显然,最好用的就是clip方法了

2012-11-11-CSS3几个新属性的测试

CSS3中过渡、圆角、阴影等的测试,只在chrome下测试,没写其他浏览器下的Hack代码。

核心代码:



.ease{
-webkit-transition:all 4s ease;
}

.ease-in{
-webkit-transition:all 4s ease-in;
}

.ease-out{
-webkit-transition:all 4s ease-out;
}

.ease-in-out{
-webkit-transition:all 4s ease-in-out;
}

.linear{
-webkit-transition:all 4s linear;
}

#trs:hover .trs{
margin-left: 400px;/向右偏移/
-webkit-transform:rotate(25deg);/旋转/
color:red;/更换字体颜色/
font-size: 1.5em;/更换字体大小/
background:-webkit-gradient(linear, left bottom, left top,color-stop(0, #b6ebf7), color-stop(0.80, #fff));/背景平滑过渡/
border-radius: 25px;/增加圆角/
}

 

demo

2012-11-03-网页中间弹出文本框

 

核心代码是:

$(“#button”).click(function(){
var curwidth = document.body.scrollWidth;//获得当前屏幕可见部分的宽和高
var curheight = document.body.scrollHeight;//思考用了哪种高宽!
var tipswidth = $(“.tips”).width(); //获得通知栏的宽和高
var tipsheight = $(“.tips”).height();
var left = (curwidth - tipswidth) / 2 ; //计算通知栏应在的位置
var top = (curheight - tipsheight) / 2 ;
$(“.tips”).css(“left”,left);
$(“.tips”).css(“top”,top);

$(“.tips”).fadeTo(4000,1).delay(5000).fadeTo(3000,0);
});
});

 

各种宽度高度,不一一allert加上草稿纸上多加画画,还真搞不懂分不清:

网页可见区域宽: document.body.clientWidth
网页可见区域高: document.body.clientHeight
网页可见区域宽: document.body.offsetWidth (包括边线的宽)
网页可见区域高: document.body.offsetHeight (包括边线的高)
网页正文全文宽: document.body.scrollWidth
网页正文全文高: document.body.scrollHeight
网页被卷去的高: document.body.scrollTop
网页被卷去的左: document.body.scrollLeft
网页正文部分上: window.screenTop
网页正文部分左: window.screenLeft
屏幕分辨率的高: window.screen.height
屏幕分辨率的宽: window.screen.width
屏幕可用工作区高度: window.screen.availHeight
屏幕可用工作区宽度: window.screen.availWidth

CSS3很强大,能做出很炫的效果。

点击按钮就可以弹出像信封的提示框,见Demo.