编程不难,人人都是“程序猿”-2从框框开始的编程

我在第一篇文章里曾经说过,我做了一家互联网公司。所以,我主要接触的代码是网站类的。

在我看来:

网建类代码就是最适合入门的一种编程方式。

为什么这么说?因为人的热情其实是建立在成就感之上的。网建类代码初学时没有复杂的编译工具,没有繁多的编译环境,很容易能看到的结果给人带来的成就感爆棚,更有让人进一步入坑的动力。从傻瓜式的框框开始(HTML),到涉及美观的样式表(CSS),再到特效(CSS、Flash、AS、JS),到需要互联网通信基础的Ajax(JS),甚至到复杂计算的后端代码(ASP、.net、PHP、JSP、Python、JS、Perl、Go等等)。对没错,JS不单单可以做前端,后端一样可以,因为我们有一个强大的东西叫Node。

如果你想深入,协议、漏洞、端口、策略、服务器、Apache、SSL……各位大神在向你招手示意,如同古代的烟花之地,呼喊着你:“大爷来玩儿呀!”。一旦你入了坑,保证你欲仙欲死,欲罢不能。

今天开始,我就从网建类代码开始给各位谈谈怎么入坑编程,怎么培养兴趣。我会在其中穿插部分代码的解析,但是不会做代码教程,那是另一个系列的事情了,并且网上的教程那么多,如果有兴趣,大家也可以自行寻找。同时我也准备花上一些时间(三个月到半年),做一个稳定的网站、空间开放给大家,随时可以让大家一起学习交流。

一、今天开始画框框

HTML,一种超文本标记语言。或许从严格意义上来讲,不应该算是一个完整的编程语言。因为它并不涉及到变量和计算,有的仅仅是一些约定俗成的显示方法。从某种意义上讲,我更喜欢叫它“积木”。

为什么叫它积木?因为HTML只是把内容放在了约定好的位置发给浏览器,然后浏览器通过解析,显示出来。并且在没有样式表的帮助下,积木的形状只能是方的。你仿佛会听到CSS的嘲讽:“想要圆的,来求我啊。”

记得刚开始做网页的时候,那个时候H5和CSS3还没流行起来,当时的网站上的活泼形状,大都以PNG图片的形式展现出来。这就造成了一个网页数据量巨大的问题。所以那时候的网站,很少有图片、多媒体的内容在。并且为了方便,那个时候做网站基本上是表格的嵌套。结构是规整了,但是太过死板,解析力也较差,每次回想当时的情况。我总觉得,我的命是DW给的。因为当时很少有所见即所得的工具。给你一个记事本做一个网站,说起来很牛,但是,要死人的。

后来随着CSS的逐步兴起,div被广泛使用。可以看看现在的网站,div就像一个个的小积木(当然还包括了诸如img、p、video等等元素),逐渐堆积起来。

来看一下html的基本结构。每一个标签,我们认为它为一个节点。那么整个Html代码都是被html节点包含在内的。在下面一般有两个节点:head和body。head里面包含着一堆奇奇怪怪的东西,初学者或许不用太多了解,只需要知道网站的标题要改title就可以了。而浏览器最大的面积,都留给了body,在body节点里,你可以写入各种各样的积木。剩下的任务就是浏览器的事情了。具体怎么写,网上搜html,多的是。百度还是很强大的。

二、我的框框要美观

如果大家尝试了html的编写,尤其是使用了div之后,你会发现所有你想展示的内容,全部堆在一起,毫无美观可言。想要美观怎么办?CSS就能解决你的问题。我们可以从内联式的代码做起。写在标签里,但是很直观,添加上浮动(float),限定宽(width)高(height),做好定位方式(position),摆好位置(top、left、right、bottom),加上背景(background),改改字体颜色(color),换换字体(font-family),字体大小(font-size),调整一下边框(border),间距(margin),内间距(padding)。看看,整体是不是顺眼了许多?

如果想了解更多,可以研究一下CSS的参考手册,这种东西,百度会提供很多给你。

当然,有个很好玩的东西,如果我们在CSS里加入如下代码:

*

你就会发现你的网页出现了很多奇奇怪怪的东西(默认隐藏的所有信息全部被显示出来,包括并不限于head节、link节、script节)。

三、让框框动起来

就算加入了样式信息,我们总会觉得网页太过死板了,不活泼。所有东西都死死地呆在那里,死气沉沉。

我们总想加入一些效果,比如点击弹出,比如指上去变色,比如下拉菜单。

ok,CSS可以帮你完成一些,各式各样的伪类选择器会满足你,或许animate和transition也是一种不错的方案。当然你也可以尝试一下“~”。

但是最好的效果,还是JS来完成。JS这个东西,从万人嫌弃到众人追捧,从单单的前端代码到辐射到服务器端,鬼知道它经历了什么。

但是JS着玩意儿,的确不太适合初学者。但是没关系,jQuery帮你解决了很多烦恼。好多功能性的东西已经被封装好了。几百行的代码变成了一两行,也就没那么麻烦。刚开始,特效可以研究一些show、hide之类的(包括slide、toggle等等),方法可以有click、hover等等。对于对象的把握,jQuery的选择器和css联合起来,很方便。

四、没有内容的框框是没有灵魂的

当我们积木基本搭好,我们会发现我们的内容盖起来很麻烦,增加内容就要写一个页面,天啊,不会站长都要这样吧?那不是很烦?

当然不是,我们有CMS呀。没有这东西,真的要死人了。CMS(Content Management System,内容管理系统),着玩意说来就厉害了,我们可以管理我们的图片、文字、上传的文件等等。就是管理员和数据库的桥。

数据库怎么选?Access、MySQL、SQLserver、SQLite等等各有优缺点。最好要配合后端代码选择。

但是数据库和前端的桥在哪里?我们就要选择一个服务端代码了,ASP、.net、PHP、JSP、Python、JS、Perl、Go等等。乱七八糟的看起来很烦,但是主流的还是集中在ASP、.net、PHP、JSP这四个。个人建议,如果做小规模的部署,可以考虑ASP+Access,简单快速,但是技术略显陈旧。如果做一些规模大一点的,还是建议PHP+MySql,可以做到费用最低,服务器系统,可以用linux,发布用Apache,代码PHP,数据库MySQL,全部是免费。同时PHP和MySQL总在更新,安全方面,都是可以保证的。

五、怎么让乱七八糟的代码好看

当我们对代码的了解差不多以后,看着手上的乱七八糟的代码,总会感觉到头疼。尤其是写下了各种内联样式,JS代码以及加上了混编的服务器代码。天知道要怎么办。

这个时候我们就要做代码的整理和注释了。同时,还要有MVC(Model View Controller,是模型-视图-控制器),讲内联样式表整理归纳,做成类、ID等等。JS代码检出做成单个文件并压缩。限制文件数量,MVC模型引入。这时候,你就已经彻底入坑了。

代码的坑很大,进来,不好出去。 网建,成就感随时随地会出现,如果你愿意,学习一下,经常给自己一点小惊喜。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20181019A27E5Q00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券