从零到独自开发一个网站(前端)

2015-10-08 05:21:48

本博客采用创作共用版权协议, 要求署名、非商业用途和保持一致. 转载本博客文章必须也遵循署名-非商业用途-保持一致的创作共用协议

上次写完后端就一直没再动笔,这次顺道地把前端也给写了吧,因为部里面也要纳新了,也算是给他们一个指导,把我这一年有关前端的经历算是简单地记录下来吧。

首先,什么是前端?

前端其实就是存在于浏览器的那一堆代码工程,我们称他为前端,对前端人员,通常要掌握html,css,javascript(包括ajax),这只是笼统的说,而且现在看来,整个web开发领域,前端的发展是最为迅猛的,前端的工资好像也是最为吃香的,详情: http://lagou.com

好吧,那都说了包括这三种代码,拿着三种代码是干什么的呢?

html


html是HyperText Markup Language (超级文本标记语言)的简称 ,你可以简单的理解它为一种文档表示形式

我们思考一下,当我们打开一个网页,里面包括有 超链接,大字体的标题图片等等,这些丰富的”功能形“组件构造了我们丰富的网络生活,但是!我们怎么告诉浏览器,哪个是哪个呢?所以我们就需要一种默认的标准来告诉浏览器,就好比摩尔斯密码是按照不同排序一样,html使用 <>来表示特殊的表达,例如 <p> hello,i am a passage </p>这样就表达了一段文字,而网页就是由html文档组成的,例如,以下是我的个人博客的html的部分截图:

pic

好的吧,我们来实战一下html就知道是怎么回事了

首先在自己的桌面上新建一个 xxx.html文件,然后用记事本打开

再在里面输入如下:

<h1>I am biggest header</h1>

<h2>i am not biggest</h2>

<p>i am a passage</p>

<p><strong>i am bold</strong></p>

<a href="http://baidu.com">i am a link</a>

<img src="your image path">

再用浏览器打开,就可以看到:

pic

可以看到,尖括号被浏览器编译省略了,换以不同的形式表现出来,而事实上这样的 标签 还有很多,详情请见: http://www.w3school.com.cn/html/index.asp

css


css是Cascading Style Sheets (层叠样式表 )的缩写,那它是干什么的呢?

看到刚刚的html代码以及表现之后,有没有觉得很丑啊?现在的网页如此多彩多姿,光靠这些已经定义好样式的 老标签 并没有什么卵用对吧,所以啊,这时候人们就开始寻找新的办法来装饰原有的样式。

好,话不多说,我们来实战便知1,2

在刚刚的文件里输入:

    ..........

<style type="text/css">
h1{
    color:red;
    background-color:blue; 
}
h2{
    color:green;
}
a{
    text-decoration:none;
    color: blue;
}
img{
    display: block;
}
</style>

然后我们再用浏览器打开我们原来的文件,就会看到:

pic

虽然还是不是那么好看,但至少我们的这些样式都是可以改的了,这样美妙的想法才能成就美妙的网页啊~

css的写法都是

key:value

这样就可以定义下一堆堆的样式,而且样式其实很多。详情

http://www.w3school.com.cn/css/index.asp

也可以打开浏览器的控制台看看别人写的样式,比如看看我博客我写的样式~~~

javascript


首先我先来回答一个著名的问题

Q:”javascript和java什么关系啊?“

A:”雷锋和雷锋塔的关系“

他们两个是没有什么关系的哦,以后注意,不要再问出这种问题了

好了,回归正题,javascript的出现其实是当年网景公司为了和微软公司在浏览器领域抗衡匆忙推出的一个产品,但他却爆发了巨大的成长性,他的出现是为了在前端,也就是浏览器端能够写逻辑代码来控制dom(入门时你可以理解为控制那一个个html标签),javascript的历史非常有趣,感兴趣的人推荐一读,那么在浏览器端写代码有什么意义呢?

话不多说,直接上代码:

重新创建一个文件 xxx2.html,添加下面的语句:

<style type="text/css">
div{
    height:100px;
    width: 100px;
    background-color: grey;
}
h1{
    color:red;
    text-align: center;

}
</style>

<script type="text/javascript">
    function changeFontColor(){
        document.getElementById("pas").style.color="green";
    }
</script>

<div onmouseover="changeFontColor()">
    <h1 id="pas">i am red</h1>
</div>

好,你再打开你的网页,可以看到:

pic

当你的鼠标在那个灰色的色块上移过后,你就会发现,网页变成了这样:

pic

可以看到我们的代码,触发了 onmouseover 函数的话,就会运行 changeFontColor函数,所以我们从这里可以看出,javascript使得网友可以运行某些逻辑,并且能让网页变得更动态,事实上,到了今天,几乎所有的网页都会有一堆大量的javascript代码,因为现在的主流是让网页和用户有大量的交互,使得网页和桌面上的应用的使用感觉相差无几,事实上很多互联网公司都接受了”webpage==native app“的理念,如谷歌就在前几年推出了基本上是基于他的chorme浏览器的系统,但是,事实胜于雄辩,谷歌的方案失败了

不过javascript这个语言他的诞生本就很匆忙,而且他的创造者也没有想到它会有今天这般的成就,所以javascript很多地方被人诟病,到现在很多人看到javascript的兴衰史都会觉得这是一种奇迹

另外很多javascript的爱好者也非常愿意改善javascript很多被诟病的地方,推出了如 coffeescript(能够像写 python,ruby之类的动态语言般写javascript),underscore.js(是一个 JavaScript 工具库,它提供了一整套函数式编程的实用功能,但是没有扩展任何 JavaScript 内置对象。 他解决了这个问题:“如果我面对一个空白的 HTML 页面,并希望立即开始工作,我需要什么?”),以及大名鼎鼎的 jquery(一个用来操作dom的神器),等等的还有很多很多,

甚至于还有个外国人基于谷歌的v8引擎写的 nodejs可以用来写后台,而且因为javascript天生就是对事件友好的,nodejs性能非常优异,最近可算是红遍半边天。

javascript现在作为github上面最受欢迎的语言,我感觉是有大原因的,特别是近期es6出了之后,我很期待javascript今后的发展

ajax


ajax是Asynchronous Javascript And XML的缩写,xml是一种数据传输形式,详情请戳: http://www.w3school.com.cn/x.asp

在05年左右,有一项新的技术对javascript的发展起了至关重要的因素,那就是 ajax,原本我们的浏览器要刷新我们的浏览器上面的数据,我们必须要刷新页面,这是互联网协议决定的东西,那我们想想,若是我们点个赞(要做后台的数据库交互)都要刷新一次页面的话,这个体验太差,很多互联网公司会损失大量的用户的,但是,05年出了一个新技术,我们可以使用javascript的 XMLHttpRequest对象对后台进行访问,并且这个可以传递一定的数据,这使得我们不用刷新就可以进行数据交互,这个技术使得互联网得到了极大的发展。

早前的网站就是主要是用来浏览的,和一个餐馆的菜单没什么区别,所以用户使用电脑还是主要用的自己桌面的应用,想想你0几年时是怎么使用电脑的,但是如果有了强大的数据交互能力,用户把数据存储在服务器端而不是保存在本地,加上javascript本来就可以像c语言一样写用户的数据处理逻辑,那么网页就可以越来越变的像本地应用一般,这样用户需要做什么不再需要下载app,下载应用到本地,而是直接打开浏览器,输入网址,这也是为什么谷歌当年想做一个完全基于浏览器的操作系统的基本想法吧

而这个博客的“ aboutme ”页面的 点“like ”功能就是基于的ajax写的

相应式布局框架


这个有很多,其中最为著名的当属 bootstrap,以及 fondation了,他们的相应式体现在一个 栅格系统 ,他们都是用来解决一个问题: 现在的移动端设备越来越多,但是当年的网页是拿来给pc开发的,难免会出现体验上的不爽,如果用手机浏览网页。所以需要一种相应式的布局,来兼容很多的屏幕的大小,让web app和native app更加的相近

我的这个博客就是基于 bootstrap开发的

pic


以下我将写下我接触到的javascript库


最近看过一起调查,只有48%的前端开发者愿意在自己的网页写 native javascript ,其他的开发者都愿意使用很多的javascript的库,最著名的当属jquery了,它使得原本我们需要写大量代码的工程,变得很简单,jquery的开发者的那句著名的 do more,write less 我也一直奉为我互联网开发的基础想法。

jquery


pic

jquery的语法非常简单,特别是它调用ajax简单的只有一句话,我的这个博客的一些效果就是基于的jquery,比如使用jquery获取鼠标事件来改变阴影,来改变某些节点,某些块的样式。其实jquery的使用已经非常广泛,在你打开百度时你就已经加载了jquery,而且jquery压缩后只有差不多80k的大小和网页图片比起来简直不能比。

angularjs


pic

还记得我在后端的那篇有一个库的ranking吗?里面一百分的就是这个 angularjs ,它是由谷歌开发的,用来解决前端的事件流,他是一个mvvm的框架,即是一个双向绑定数据,通过controller来操作数据,用models来做数据的保存,然后在网页上输出数据,因为他对ajax的一层封装,使得他非常的好使,他的唯一的明显的问题就是数据都在models里面(js里面),这让他的seo很难做,比较著名的使用可angularjs的例子在国内就得是微信的网页版了吧。

pic

d3.js


pic

这个是用来操作文档可视化的javascript库,它是由一个报社的人员编写的,初衷是想把记者传回来的数据做成可视化在网页上,例如:

https://github.com/mbostock/d3/wiki/Gallery

以上为我现在使用过的大量的javascript库,也是觉得比较好的,其实还有很多用过,但是这个行业发展快,我不敢说那些库的思想代表未来,所以就不多说了~

web开发 返回首页

Designed and built with all the love in the world by the Mr.ALJUN.

@SERVER BY NGINX AND POWER BY DIGITALOCEAN.

© COPYRIGHT BY GAGASALAMER 2015