写给在学WEB前端开发新手的几个建议
1、想要从事web开发的朋友，首先要想清楚自己开发的侧重点，是web前端开发，还是后端开发。定位好自己的角色再有针对性的学习。当然，既然是web开发，做前端的就不可避免的会与后端有联、系，因此了解后端制、作技术是有必要的，当然，你若目标就只是能找到工作，没有更高的要求，那么你仅仅会一些简单的前端技术就可以了，但那是没有前途是，也就是你只会停留在前端的最低层次。要知道，web前端开发，也分三六、九等，职位有比如网页设计师，前端工程师、JS研发师等等，当然你的技术与你的薪水也是挂钩的，有的只是普普通通的两三千的月薪，而有的则上5位数，这就是差距，看你有没有那个继续前行的动力了。
2、关于学习。前端开发的技术，主要靠自学应该，可能有些大学开的课有相关方面的课程，但新技术还是要自己去学习。另外，知识学的好，不如东西做的好，要多练习多多练习多总结经验，做出来东西摆出来让别人看，且看着是那个样，看着舒服，才是王、道，而你懂的多，但就是动手能力不行，让你做个东西，做半天做不出来，那别人会怎么想，可想而知。
如果你你热爱WEB前端，热爱这个行业就应该持续走下去，如果你看到这里欢迎一起来学习交流617327703还有大神解答问题分享学习资料
分享一篇挺有意思的一段代码。马上520就要到了
某程序员写给女友的清新页面
/*
网上发现了一个某程序员写给女友的清新页面
项目主页：http://love.hackerzhou.me
*/
// variables
var$window = $(window), gardenCtx, gardenCanvas, $garden, garden;
varclientWidth = $(window).width();
varclientHeight = $(window).height();
$(function() {
// setup garden
$loveHeart = $("#loveHeart");
varoffsetX = $loveHeart.width() / 2;
varoffsetY = $loveHeart.height() / 2 - 55;
$garden = $("#garden");
gardenCanvas = $garden[0];
gardenCanvas.width = $("#loveHeart").width();
gardenCanvas.height = $("#loveHeart").height()
gardenCtx = gardenCanvas.getContext("2d");
gardenCtx.globalCompositeOperation ="lighter";
garden =newGarden(gardenCtx, gardenCanvas);
$("#content").css("width", $loveHeart.width() + $("#code").width());
$("#content").css("height", Math.max($loveHeart.height(), $("#code").height()));
$("#content").css("margin-top", Math.max(($window.height() - $("#content").height()) / 2, 10));
$("#content").css("margin-left", Math.max(($window.width() - $("#content").width()) / 2, 10));
// renderLoop
setInterval(function() {
garden.render();
}, Garden.options.growSpeed);
});
$(window).resize(function() {
varnewWidth = $(window).width();
varnewHeight = $(window).height();
if(newWidth != clientWidth && newHeight != clientHeight) {
location.replace(location);
}
});
functiongetHeartPoint(angle) {
vart = angle / Math.PI;
varx = 19.5 * (16 * Math.pow(Math.sin(t), 3));
vary = - 20 * (13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t));
returnnewArray(offsetX + x, offsetY + y);
}
functionstartHeartAnimation() {
varinterval = 50;
varangle = 10;
varheart =newArray();
varanimationTimer = setInterval(function() {
varbloom = getHeartPoint(angle);
vardraw =true;
for(vari = 0; i < heart.length; i++) {
varp = heart[i];
vardistance = Math.sqrt(Math.pow(p[0] - bloom[0], 2) + Math.pow(p[1] - bloom[1], 2));
if(distance < Garden.options.bloomRadius.max * 1.3) {
draw =false;
break;
}
}
if(draw) {
heart.push(bloom);
garden.createRandomBloom(bloom[0], bloom[1]);
}
if(angle >= 30) {
clearInterval(animationTimer);
showMessages();
}else{
angle += 0.2;
}
}, interval);
}
(function($) {
$.fn.typewriter =function() {
this.each(function() {
var$ele = $(this), str = $ele.html(), progress = 0;
$ele.html('');
vartimer = setInterval(function() {
varcurrent = str.substr(progress, 1);
if(current =='<') {
progress = str.indexOf('>', progress) + 1;
}else{
progress++;
}
$ele.html(str.substring(0, progress) + (progress & 1 ?'_':''));
if(progress >= str.length) {
clearInterval(timer);
}
}, 75);
});
returnthis;
};
})(jQuery);
functiontimeElapse(date){
varcurrent = Date();
varseconds = (Date.parse(current) - Date.parse(date)) / 1000;
vardays = Math.floor(seconds / (3600 * 24));
seconds = seconds % (3600 * 24);
varhours = Math.floor(seconds / 3600);
if(hours < 10) {
hours ="0"+ hours;
}
seconds = seconds % 3600;
varminutes = Math.floor(seconds / 60);
if(minutes < 10) {
minutes ="0"+ minutes;
}
seconds = seconds % 60;
if(seconds < 10) {
seconds ="0"+ seconds;
}
varresult =""+ days +" days "+ hours +" hours "+ minutes +" minutes "+ seconds +" seconds";
$("#elapseClock").html(result);
}
functionshowMessages() {
adjustWordsPosition();
$('#messages').fadeIn(5000,function() {
showLoveU();
});
}
functionadjustWordsPosition() {
$('#words').css("position","absolute");
$('#words').css("top", $("#garden").position().top + 195);
$('#words').css("left", $("#garden").position().left + 70);
}
functionadjustCodePosition() {
$('#code').css("margin-top", ($("#garden").height() - $("#code").height()) / 2);
}
functionshowLoveU() {
$('#loveu').fadeIn(3000);
}
3，关于学习：前端开发的技术，主要靠自学应该，可能有些大学开的课有相关方面的课程，但新技术还是要自己去学习。另外，知识学的好，不如东西做的好，要多练习多多练习多总结经验，做出来东西摆出来让别人看，且看着是那个样，看着舒服，才是王道，而你懂的多，但就是动手能力不行，让你做个东西，做半天做不出来，那别人会怎么想，可想而知。
4. 关于代码编写：建议初学者脱离可视化编辑器（推荐sublime text），练习手写代码能力，这样看似麻烦，笨拙，但坚持下去，真正到你进行设计时就会体会到其中甜头。手写代码，对于你对代码的理解是很有帮助的，同时也会便于编写更具有语义的代码。
5.关于学习方法:自己不理解的实在想不明白就百度一下，或者到各大论坛去提问，请高手帮你解决，不要不好意思，当然去的时候尽量提些有技术含量的问题，基础知识不懂了就去翻翻书。要经常逛论坛，向高手学习经验，推荐蓝色理想，有机会大家可以去看看，里面高手很多。
关于，参考书籍，我个人认为，应该选择国外经典著作，毕竟国内目前状况还处在web标准化起始阶段，推荐《精通css与html设计模式》、《web编程入门经典：html、xtml和css》、《html与xtml权威指南》、《css权威指南》、《JavaScript权威指南》。需要指明的是，目前国内图书市、场这方面的书比较多，建议大家不要盲、目购买，最好读一读国外设计师的经、典著作，更重要的人家写的都是比较有条理，循序渐进。如果能读懂原著，最好看原著，看不懂的就看翻译过的也好。
如果你你热爱WEB前端，热爱这个行业就应该持续走下去，如果你看到这里欢迎一起来学习交流617327703还有大神解答问题分享学习资料
