学习前端,要从学习HTML和CSS开始着手。关于这部分的学习,网上可选择的资料就太多了,这里不一一列举,题主百度搜索栏搜索 HTML 教程,或者css 教程,就可找到相关资料。
接着是学习前端的一个难点、也是重点,就是JavaScript。
首先,初学一门语言,要秉承一个原则:“能动手的,尽量别吵吵”
另外,你需要一个能够从简到难的知识体系,一步一步跟下来。
下面是干货。
体系:上图。
说明一下这张图,题主提问如何有效学习JS,我这里理解为JS原生,所以关于框架、工作流的内容,没有具体展开,题主有兴趣可以自行搜索。
一、文档资料
红宝书(基础):https://book.douban.com/subject/10546125/
蝴蝶书(进阶):https://book.douban.com/subject/11874748/
阮一峰老师ES6: http://es6.ruanyifeng.com/
权威官方文档MDN:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/
二、学习步骤
语法和基本类型
控制流
循环
表达式和操作符
日期对象
正则表达式
对象
上面这些搞定,就已经掌握了ES5的最基本的内容了,接着,我们就可以来操作页面了。毕竟这是一个看脸的社会,我们在搞页面的同时,还要注意一下页面的样式。
8.DOM操作
1>DOM树的概念
2>从DOM树取节点
3>操作这个DOM树(节点的添加、删除、修改)
4>访问节点(parentNode, children, 等等)
5>属性操作(id, className)
9. 事件处理
1>鼠标事件(mouseove)
2>键盘事件(keyup)
3>浏览器事件(load)
好,到这里,基本上静态页面,你就可以随意玩耍了。这里我们最好降上面思维导图提到的例子,都撸一遍。一是加深上面知识点印象,二是锻炼一下编程的逻辑思维能力。具体实现,网上有一堆堆的。(这里让题主自己搜索,是因为编码的一项重要能力,就是搜索)一定要谨记,多敲代码。
10. 面向对象:原型式继承、原型链
11. ES6:
ES6跟ES5还是有较大的区别,所以建议你能系统的过一遍,将上面的练习,改为使用ES6再来一遍
三、调试
1、JS编程的调试非常简单,打开浏览器控制台(我个人比较钟爱Chrome)。如图:
1> console标签:这个标签,可以打印我们开发时,JS引擎为我们抛出的异常。我们可以根据这个异常的信息,来分析错误原因。另外,我们也可以在代码中使用console.log() 输出程序运行时的环境变量信息。
2> 右红框1:错误提示。说明当前页有一个error发生,点击他,可以跳转到console来查看错误具体信息
3>右红框2:警告信息。提示了我们程序潜在的危险。
4> source,我们进行单步调试的地方。具体见下图
(四)、工作流(跟JS原生关系不大,不详细展开了)
webpack
gulp
上面的内容结束后,就可以进入前端框架的海洋中畅游了。
自学很辛苦,若你没有坚持下去的毅力,很难成功!
我给你推荐一个方法及学习路线,可以参考一下,看看自己是否能学进去:
自学方法:
1、作为一个初学者,你必须明确系统的学习方案,我建议一定有一个指导的人,全靠自己学,放弃的几率非常大,在你对于web前端还没有任何概念的时候,需要一个人领进门,之后就都靠自己钻研,第一步就是确定web前端都需要哪些内容,并且在多少时间内学完,建议时间6个月保底。
2、视频为主,书为辅。很多初学者在学习前端的时候非常喜欢去买书,但是最后的结果是什么?看来看去什么都不会写,所以在这里给大家提醒,书可以看,但是是在建立于你已经对于某个知识点有了具体操作的执行后,在用书去巩固概念,这样更加利于你对于知识的理解。
3、对于学习技术来讲,掌握一个学习方法是非常重要的,其实对于学习web前端来讲,学习方法确实很多都是相通的,一旦学习方法不对,可能就会造成“方法不对,努力白费”。其实关于这方面还是很多的,我就简单说个例子,有的人边听课边跟着敲代码,这样就不对,听课的时候就专心听,做题的时候就专心做题,这都是过来人的经验,一定要听。根据每个人的不同,可能学习方法也会有所出路,找到适合你自己的学习法方法是学习的前提。
4、不建议自己一个人瞎学,在我了解学习编程的这些人来看,从零基础开始学并且最后成功做这份工作的其实并没有几个,我觉得大部分原因就是因为他们都不了解web前端是干什么的,学什么的,就盲目的买书看,到处找视频看,最后看着看着就放弃了,所以我建议初学者在没有具体概念之前,还是找有经验的人请教一下,聊过之后你就会知道web前端具体是干什么的,该怎么学,这是我个人的小建议,可以不采纳。
自学路线:
第1阶段:前端页面重构(4周)
内容包含了:(PC端网站布局项目、HTML5+CSS3基础项目、WebApp页面布局项目)
第2阶段:JavaScript高级程序设计(5周)
内容包含:(原生JavaScript交互功能开发项目、面向对象进阶与ES5/ES6应用项目、JavaScript工具库自主研发项目)
第3阶段:PC端全栈项目开发(3周)
内容包含:(jQuery经典交互特效开发、HTTP协议、Ajax进阶与PHP/JAVA开发项目、前端工程化与模块化应用项目、PC端网站开发项目、PC端管理信息系统前端开发项目)
第4阶段:移动端项目开发(6周)
内容包含:(Touch端项目、微信场景项目、应用Angular+Ionic开发WebApp项目、应用Vue.js开发WebApp项目、应用React.js开发WebApp项目)
第5阶段:混合(Hybrid,ReactNative)开发(1周)
内容包含:(微信小程序开发、ReactNative、各类混合应用开发)
第6阶段:NodeJS全栈开发(1周)
内容包括:(WebApp后端系统开发、一、NodeJS基础与NodeJS核心模块二、Express三、noSQL数据库)
相关的视频教程如果你需要,可以加我的前端学习和交流群,里面有很多志同道合的前端小伙伴跟你一起学习,一起进步。
一 · 前端零基础入门
从前端基础入门知识学起,掌握基本的HTML+CSS网页布局,以及简单的JS特效,最终可以独立开发出前端PC网页。
注:CSS是一种定义样式结构如字体、颜色、位置等样式的语言,被用于为页面添加效果。需要全面了解CSS的基础语法、选择器、文本、背景、列表、盒子模型、浮动、定位以及网页的布局方式。
二 · 响应式开发与常用框架
使用H5+CSS3实现网页动态特效,通过Bootstrap框架学习,从原生编码过渡到框架使用,更高效的开发出适配各个设备的响应式网页。
注:需要全面了解主要包括CSS3的选择器、边框、圆角、背景、渐变、文本、字体、转换、过渡、动画、多列布局以及用户界面。
三 · 组件化思想开发电商网页
学会H5进阶内容:svg、canvas、H5存储、拖拽上传等,对JS、jQuery进行提升,学习企业开发模式——组件化开发,在企业项目团队中协同合作,实现“高内聚、低耦合”的网页搭建。
四 · 热门框架Vue开发WebApp
学习JS的最新版本ES6,前端流行框架Vue.js, 结合最流行的打包工具Webpack,掌握一个项目上线前的所有开发流程,真正成为一个能够满足企业需求的前端工程师。