or

我的Web前端学习之旅-1

2018年8月22日
更新: 2019年5月4日
对于一门技术,兴趣决定你会不会遇上它,而坚持力决定你和它待多久

0. 开篇废话(可跳过)

凭借着兴趣,我学起了吉他,在网上各种搜教程自学入门,懂了点皮毛,并且在几天时间里成功把手按弦按出了茧子,但是,不知道是因为自学很迷茫,还是其它什么原因,很长一段时间没有练习了,然后就无声地终止了这个兴趣的培养。

后面一段时间,每次看到手上的茧子就内心一颤,但是始终没动力再次抱起吉他。我觉得并不是说你准备学什么的时候就一定要把它学会才算有所成就,倘若我们做的不是一些强制性的东西,那我们大可把它学成啥样就是啥样,不必在意是否有所成就,年青的我们重在多尝试,多探索不同的领域,只有尝遍了,才知道什么更好、更适合自己。(不过我还是很梦想会弹吉他的,那感觉很酷)

所以在自己时间还充足或者自己斗志依旧还在的时候,不要当一样东西学不好的时候就觉得自己不行,那是因为还没有找到让自己走着舒心的路而已,但路总在那里,我们也总会找到一条即使看起来坑坑洼洼但走起来总是那么带劲的一条路!

我的自学史很曲折,但也很美好,毕竟做的是自己喜欢的事情,所谓“痛并快乐着”。

我接触到web前端的缘由是在大一初加入了一个新媒体运营部。在编稿公众号文章的时候,我总想让文章看起来更加美观或更加绚丽,但是微信自带的文章编辑器功能有限(不清楚现在如何了)无法满足我,然后我就在网上找了很多的第三方微信文章编辑器,虽然它们的功能确实丰富了,但是当我想微调某处的时候却无从下手,毕竟提供的都是现成的模板。然后偶然发现有个“html源码编辑”的功能,点击它就切换到了当前文章的“代码版”,里面密密麻麻的英文字符,让我懵逼却又激动。现在的社会,啥不懂直接网上搜索咯,于是我搜索了html字眼,然后,我就慢慢的入坑了... 后来这个部门“扑街”了,微信号的运营结束了,但我的前端之路却悄然开始了。

1. 什么是“web前端”

刚开始学习时,并不知道什么是前端,这个名词也是在学习中慢慢才知道的。那什么是前端(frontend)?可以把它理解成一个领域,就像数学物理英语,前端这个领域就是编写出用户所使用的产品的长相、逻辑等,即开发出的东西是直接面向用户的,而web前端则明确了用户所使用的产品就是网页(当然了,这里应该写成“主要是网页”,因为现在的前端并不只是进行单纯的网页开发了,能做的事情太多了,现在有个名词叫“大前端”,即囊括了网页开发,各种小程序开发,移动应用开发等等)。

举个栗子:用户在浏览器里打开一个购物商场页面,呈现在用户眼前的缭乱的视图就是前端人员开发出来的,比如那些滚来滚去的图片(称之为“轮播图”,英文carousel),五颜六色的文字等。当用户点击了一个商品,页面跳转到了商品详情页面,这个过程中按钮点击特效、页面跳转、新页面内容的显示等都是前端实现的。对应的有个名词叫“后端”(backend),后端这个领域则是间接地与用户交互。网站页面里的很多数据都是来自后端的,比如用户的订单信息,物流信息,签到数据等。后端伙计们就是负责处理打理这些用户数据,并且把它们存在一个叫做“数据库”(database)的地方里,前端就是把这些枯燥的数据漂亮亮的以更直观的方式展示给用户,给用户提供一个图形化界面去操作它们。

2. 前端的大致学习体系是什么

从一个购物网站来说:购物网站的首页(即打开网站显示的第一个页面),里面有文字有图片并且都放置在不同的地方,比如顶部有轮播图,图片下方是图片的描述文字,轮播图下方又是一个搜索框等。这些内容是通过一个叫做html的标记语言被添加到页面之中的。比如下方一个十分简陋的页面,通过几行html,便有了以下内容(友情提示:目前大家不必太过追究到底html是啥,大家且先往下浏览即可):

欢迎光临小黄商城网

你看上面的页面,是不是太丑了:黑黑的文字,大大小小的图片,方方正正的的输入框。我们需要装饰他们,不然怎么拿得出手给用户呢!上吧 css

欢迎光临小黄商城网

通过css语言,我们不但能够调节字体大小颜色等,还可以改变图片大小,并给输入框一次精心的打扮。此时,页面些许生动了,但它安静的像个小女孩,我们需要让它“活跃”起来。Come on,我们的javascript语言隆重登场:

如上所示,有了javascript的灵魂注入,页面真是生动了不少啊 😄

至此,我们已经知道了前端需要学习的三大内容,具体文章会在Part2中

关于他们的难度系数:htmlcss的学习并不需要任何的额外储备,很容易入门,只要跟着教程走便是,对于javascript这门语言(后面简称js),如果有学过CC++等语言的童鞋,你们学js的时候一定会后悔先学了他们,因为js语言真的很“松”,会给你很自由的感觉,并且没有让人头晕的指针、内存管理、环境搭建等,上手起来会十分简单迅速。对于没有任何编程基础的童鞋也很友好,总之学习中不懂了一定要多问多交流js真的非常好学 😇

3. 可能疑惑的名词解释

在学习过程中,可能会碰到HTML、HTML5、CSS、CSS3、es5/es6/es2017/es2018等等的词汇(单词的大小写无影响),解释如下:

其中的数字都可理解为对应的版本号,就和游戏更新一样,每次更新都会出现新的版本号并给玩家带来新的内容,html5就是html的新版本,css3就是css的新版本,而es? 、es201? 就是js的新版本(?代表某个数字),其中es5和es2016同义,es6和es2017同义,依次类推。当然大家会疑惑为啥不是js5、js6而是es5、es6,感兴趣的小伙伴可以自行网上搜索或查阅此文(英文) (es来制定语言规范,js是其规范的一种语言实现)

4. 鸡汤灌输

兴趣决定你会不会开始,而毅力决定你到底能学多久,学习中必然会有枯燥的部分(我反正是在看学习视频时经常看睡着了),要学会给自己制造新鲜感,给自己制造主动学习的动力,比如产生一个小想法,我要做一个个人网站出来,然后在学习过程中就会强烈的留意到哪些内容能帮助我实现这个小想法。

对此文有任何疑惑,任何补充,任何吐槽,请随时邮箱骚扰或底部评论留言哦
or