• 前端入门指南(菜鸟篇-上)


    前前后后,从对前端一无所知开始自学三个月,到如今作为前端开发工程师工作了三个月,这总共半年的时间里,我是怎么学的。

    一、前言

    1.为什么要学前端开发?

    我本来是想学java的,买了一堆java书籍,但怎么变成了学前端,已经无从根究,我自己也是没答案。不过既然已经走上了这条路,而且前端还算有趣,那就接着走下去吧。一个优秀的程序员不会只懂一门语言,因此,java什么的,早晚会接触到。也许,那不是java,而会是Haskell、Phython等任何编程语言。

    2.前端开发是做什么的?

    老实说,这问题我倾向于复制粘贴网上答案来应付了事。可想想逢年过节时,亲朋好友们百分百会问到这个问题,我就说一下吧。

    敷衍的A:“做网站,搞网页开发的”。

    偏科的B:“做UI设计的,做微信公众号的”。

    装逼的C:“改变世界的”。

    认真的D:“前端开发有许多方向,比如网站重构,UI设计,web应用开发,物联前端,前端AR...(省略一千字)”。

    兼容性最强的万能答案:“写代码的,对,就是传说中的程序员!坐办公室用电脑的!”。

    3.前端开发有钱途吗?

    当然有,做啥没前途?乞讨乞到极致,也能乞成千万富翁。

    一般来说,刚入门的新人,工资都高不到哪儿去,从1k到1w都有。注意,是刚入门,不是刚入行!管理层以下,绝大多数情况都是技术实力正比于薪资!

    互联网发达地区的薪资水平会高一截,如北京上海深圳广州杭州,互联网公司会比其他行业公司的薪资水平高一截。同等能力下,牛逼的小公司比大公司的薪资要高一点。

    4.我该怎么学前端?

    这是个很大的问题。从学习方式来说,有自学与培训。从学习方法来讲,那真是没法数,每个人都有属于自己的合适的自己的方法,有的人觉得看看视频就能学会,有的是觉得光看书就完全get技能了,还有的人觉得在群里多和大佬们聊聊吹吹水就可以掌握想要的知识。

    做梦吧。

    前端有三大基础JavaScript、CSS、HTML。光HTML就不是上述方法能掌握的,更遑论JavaScript?JavaScript是门直译型的语言,是面向对象的。对象是啥,一只喵星人一个手机一个你就是一个对象。当然,JavaScript里的对象是代码组成的,而在JavaScript里,几乎一切都是对象。

    但凡是对象,那肯定是复杂的。你复杂吗?为什么复杂?对象的复杂性,很大程度取决于它自身与其依赖的周围环境。人在陆地上可以活得好好的,扔进水里,能活几分钟?水陆环境的不同,增加了人的复杂些。换成你手机也一样,把它丢进火里或水里试试。

    这跟JavaScript有什么关系?

    没关系。

    才怪。JavaScript是脚本语言,是条寄生虫,不寄生在宿主身上就没生命力的东西。它的宿主是什么?浏览器 or Node。

    本质上,浏览器和Node都给JavaScript提供了运行时的环境,所以,这个东西,才是JavaScript的幕后老板。我们称之为JavaScript Interpreter,当然,不止这么一种叫法,还有什么Redering Engine等等,总之,它们都可以将JavaScript代码翻译成机器码,供计算机认识与使用。

    没有灵魂的人,跟死人没什么两样。

    JavaScript被翻译成机器码后,就有了灵魂,活过来了。

    你看,JavaScript其实也是个对象。这么复杂的东西,光看书看视频听人说,能真正懂它吗?不能。这些行为最多帮我们知道它,了解它的知识体系与底层原理,顺便拓展一下眼界。要真正懂它,得不断地去使用它,以各种方式去使用它。

    就像你跟一个姑娘谈恋爱,光看照片看她日志有什么用,你要牵她的手,亲吻她,拥抱她,爱她,跟她交流,做各种羞羞的事,才会真正懂她。不是么?

    JavaScript尚且如此,包含它的整个前端还用说吗?

    Just do it!

    5.从哪里开始前端的第一步?

    废话了一堆,来点干货。首先,回答问题前,我们来趟时空旅行。

    1993年,超文本标记语言HTML(Hyper Text Markup Language)第一版面世,它只支持超链接的纯文本html文档。纯到什么地步?纯文本!超链接!没了。

    纯文本是什么概念?在你的电脑桌面新建一个txt文档,在里面写上

    hello world

    保存文档为html类型。然后双击打开它,你就可以在浏览器里看到hello world了!

    这就是纯文本html文档,纯的不能再纯的一个网页。

    超链接呢?以记事本方式打开刚才的文档,把hello world替换成

    <a href="http://www.baidu.com">hello world</a>

    保存。双击打开这文档,你会在浏览器里看到带下划线的hello world,点击它,如果你能上网,那么毫无疑问,它会跳转到百度的首页。这么一个简单的文档,居然可以链接到百度,神奇吗?这就是超链接。链接互联网上的所有。

    时间往前走。

    1994年,层叠样式表CSS(Cascading Style Sheets)问世,这时它还没成为标准,直到1996才有第一版标准。CSS做了什么?回答这个问题得先知道HTML干了什么。HTML定义了文档的类型与内容。CSS,则决定了这些内容该如何展现。如果把HTML文档比喻成一幅纸画,那么CSS就是造物主的神力,它可以让纸画上的猫咪隐身,也可以让纸画上的鲜花变换颜色,甚至能让里面的小鸟飞出来,让高山变成平地,让沧海变成桑田。梦幻吧。

    打开刚才的文档,把内容替换成

    <a href="http://www.baidu.com" style="color: red">hello world</a>

    保存。双击打开它,你会在浏览器里看到红色的hello world。这里,style引入了CSS样式,color给这些文字打开了颜色的大门,red,涌入了进来,把它们染成了红色。

    1996年,JavaScript第一版诞生。只有HTML与CSS的世界太单调,鸟会飞,却无法互相交流,猫咪看不到老鼠,老鼠也看不到猫,它们过着孤独的生活。这样的世界不真实,于是,JavaScript来了。JavaScript赋予了这些生命思考、感知与交流的能力,从此这世界变得无比精彩,无数文明诞生与消亡,演绎宇宙洪荒。

    再次打开我们的文档,把内容替换成

    <a href="http://www.baidu.com" style="color: red">hello world</a>
    <script>
    alert('ni hao');
    </script>

    保存。双击打开它,你会在浏览器里看到一个弹出的提示框,上面写着,ni hao。这里,script引入了JavaScript代码,alert表示弹出一个提示框,括号里的是提示的内容。没错,人类,你被浏览器发现了!它在向你打招呼!

    好了。

    回到开始的问题上来,在哪开始前端的第一步?

    如果你刚才跟着我敲了一遍例子,那么你已经踏出了第一步。接下来的学习,是把HTML,CSS,JavaScript的所有基础知识快速泛读一遍(不求甚解,只求心中有个印象,大概知道都有些什么知识,真正要了解那些知识,应该放在后面的实践中学习,如此,效率极高),你可以在W3C或者菜鸟上面翻阅这些资料,或者在MND里阅读更详细的内容。相信MDN以后会是你经常光顾的一个地方,它就像前端的百科全书,网络图书馆,你想要的了解的,基本都能在里找到。

    这个过程,集中精力不受干扰,可能需要花费大约2~3个小时的时间。

    然后,让我们来玩游戏吧。

    6.在游戏中学前端?

    没几个人会不喜欢玩游戏的,除非他没有童年。

    我们要玩的,是一个闯关游戏。只要按照游戏规则,完成指定的任务,就可以进入下一关。完成任务的方式,没错,就是写代码。

    不用担心,有足够多的提示能让十足的前端菜鸟轻易完成前面的一些挑战。嗯,别告诉我你是十二足的....

    先看个例子,如下图所示:

    图中演示了游戏中的两个简单关卡,看不懂不要紧,实际去挑战,就明白了。相信这是个非常有趣,并且富有成就感的过程。

    这免费游戏出自FreeCodeCamp,当今世界上最受欢迎最流行的技术类开源项目,粉丝遍布上百个国家,你可以在GitHub上找到它的组织,当然,它在中国也有分支,简称FCC中文社区

     上图的例子,便是在FCC中文社区完成的。笔者当初就是在FCC学习了一段时间,还没完成前端的所有挑战,便已找到一份满意的工作,并且认识了许多前端小伙伴们,他们都非常友善,乐于分享,互帮互助,其中不乏非常厉害的大佬大神们。

    游戏过程中,多多查阅MDN,你会学到很多知识。关卡挑战成功与否不是最重要的,最重要的,是我们在这过程中,学会了什么。知识,方法,思维方式,编程思想,and so on...

    如果你完成了游戏里所有前端的挑战还没找到工作,那么我百分百敢肯定,要么就是你目标太高,要么,必定是你没认真挑战,恐怕,谷歌百度抄了不少答案吧。有用吗?自欺欺人而已。

    请尽量自己独立完成。

    完成FCC前端挑战大概需要一到两个月时间,牛人不到十天可以搞定(请收下我的膝盖...)。

    假设你已经完成了挑战,让我们进入下一个话题,前端究竟在干什么。

  • 相关阅读:
    python的进程与线程
    推荐一个GOLANG入门很好的网址
    为什么Python 3.6以后字典有序并且效率更高?
    git实用指南
    常用正则总结
    简单小结密码学入门知识点
    什么是k8s
    win10下apache superset的使用
    Maven工作记录
    JDK下载地址和安装
  • 原文地址:https://www.cnblogs.com/miyosan/p/7066701.html
Copyright © 2020-2023  润新知