【GISer小O】JAVA后台的小白之路（一）_2
——分分合合三剑客
本文简单介绍Web开发中的三剑客：HTML/CSS/Javascript，阐述其关系。然后用示例demo讲解三者的分分合合。相关资源的百度云盘链接为：链接：http://pan.baidu.com/s/1jIab1I2 密码：vue1
《JAVA后台的小白之路》是以掌握SSM框架进行实战后台开发为核心目的，那么为什们要讨论Web前端（HTML/CSS/JavaScript）的东西呢？在小Ｏ看来，后台必须要懂点前台的东西，才能更好的进行后台开发。不需要太精通，但是需要了解一些。这样一方面可以理解整个前后台的交互，另一方面，自己写后台程序的时候，可以简单方便地把结果显示在前端进行测试。最后，下一阶段的JSP必须要有HTML的基础才可以进一步进行。来，让我们放出炫酷的Web三剑客图镇楼。
Part one 三剑客的合
这一节从遵循纯html，html+css，html+css+javascript的顺序，逐步介绍完整的网页前端三剑客。
HTML简述
HTML，更确切的说是HTML5，小O在《JAVA后台的小白之路（一）_1 ——奔跑吧进击的Sublime》中已经阐明。这里小O在sublime里写个demo，只用一点点之前没有提到的知识，就是表格。表格的相关标签，小O在这里列出来了。想了解标签的具体属性值，就戳到菜鸟网里面去看吧：http://www.runoob.com/tags/ref-byfunc.html。
| name | age |
|---|---|
<table> | 定义一个表格 |
<caption> | 定义表格标题 |
<th> | 定义表格中的表头单元格 |
<tr> | 定义表格中的行 |
<td> | 定义表格中的单元 |
<thead> | 定义表格中的表头内容 |
<tbody> | 定义表格中的主体内容 |
<tfoot> | 定义表格中的表注内容（脚注） |
<tfoot> | 定义表格中一个或多个列的属性值 |
<tfoot> | 定义表格中供格式化的列组 |
下面这段代码实现了非常简单的表格html，表格被放在一个div标签中方便之后的处理。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table border=1>
<div>
<tr >
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>喜欢的颜色</td>
<td>不喜欢的颜色</td>
<td>身高</td>
</tr>
<tr>
<td>小O</td>
<td>20+</td>
<td>男</td>
<td>柠檬黄</td>
<td>shit黄</td>
<td>177+</td>
</tr>
<tr>
<td>老王</td>
<td>30+</td>
<td>男</td>
<td>黑色</td>
<td>彩色</td>
<td>160+</td>
</tr>
</div>
</table>
</body>
</html>这样的代码已经把网页骨架搭建出来了，但是讲真，小O认为它实在是太丑了。别和小O说这是极简风，明明就是简陋啊。小O想要这个表格占满整个页面，想让它变得漂亮一点。那么这个时候，小O就需要CSS了。
CSS简述
层叠样式表（英语：Cascading Style Sheets，简写 CSS）,目前的版本是CSS3，CSS 最主要的目的是将文件的内容与显示分隔开来。简单来说，html是骨架是血肉之躯，css是衣服是化妆师，让html内容变的漂亮起来。万千解释，顶不上一张效果图。来，让我们瞅瞅给上述的html里加入CSS会有什么效果。
有没有，有没有，加入样式后，瞬间高大上起来了。让我们贴上完整的代码（初看跳过代码）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html,body{
width:100%;
height:100%;
margin: 0px;
padding: 0px;
background-color: #1e2b3a;
}
#divtest{
width:100%;
height:30%;
text-align: center;
background-color: yellow;
margin: 0px;
padding: 0px;
}
table,th,td
{
border:2px solid #1e2b3a;
vertical-align: center;
margin:0 auto;
}
#tabletest{
border-collapse:collapse;
width:80%;
height:50px;
color: #1e2b3a;
position: relative;
}
.trclass1{
background-color: orange;
font-weight: bold;
}
.trclass2{
background-color: #158e71;
color:white;
}
</style>
</head>
<body>
<div id="divtest">
<h2>小O的测试表</h1>
<table id="tabletest" border=1>
<tr class="trclass1" >
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>喜欢的颜色</td>
<td>不喜欢的颜色</td>
<td>身高</td>
</tr>
<tr class="trclass2">
<td>小O</td>
<td>20+</td>
<td>男</td>
<td>柠檬黄</td>
<td>shit黄</td>
<td>177+</td>
</tr>
<tr class="trclass2">
<td>老王</td>
<td>30+</td>
<td>男</td>
<td>黑色</td>
<td>彩色</td>
<td>160+</td>
</tr>
</table>
</div>
</body>
</html>小O这一长串代码看不懂啊，啊，啊，啊！！！！！！！！Smilecrying，那咱拆开看吧。
使用CSS，要做的事情就两件，第一，说明这一段代码是给哪个或哪些元素用的>指定对象。形象地说，就是衣服或者裤子的问题。这一段CSS代码是内裤，修饰名为test的div标签，那一段CSS代码是外套，修饰类型为testclass的的table标签。第二，说明和指定元素的各种属性>编辑属性。形象的说，就是给具体衣物选择不同的花纹，比如这件外套是黑白条纹状L码，那条内裤是个花裤衩。
STEP1 : 指定对象。首先在body中，给各个标签加上id或者class属性，然后在head部分加入style标签，在里面用名称加花括号的形式指定要给谁加上样式。其中”#”对应的是id属性，”.”对应的是class属性。
<head>
<style>
#divtest{
.............
}
</head>
<body>
<div id="testdiv">
......
<div>
<div class="testclass">
......
<div>
<div class="testclass">
......
<div>
</body>STEP2 : 编辑属性。 无非就是在花括号中填补各种属性罢了。形式是“属性名：属性值;”。
border-collapse:collapse;
width:80%;
height:50px;
color: #1e2b3a;
position: relative;分开讲了，我们再合起来看看完整的CSS代码到底是什么。喏，就是下面这段小东西：
.trclass1{
background-color: orange;
font-weight: bold;
}到这里，恭喜你已经双剑合璧了。CSS可以实现你想要的几乎所有效果，也可以做出动画来。想要进一步学习，可以去菜鸟网又或者w3cschool的CSS专栏学习。基础知识在这些地方真的已经很详尽了。
其实，另一种更好的学习方式是哪里不懂问哪里，有什么语法或者想实现的效果不会的可以直接在度娘或者谷歌上查。
另外，可以在网上找html/css模版，只要能看懂，你就能改能用。方便快捷，而且能迅速提高你的实战能力。
Javascript简述
之前说，HTML是躯体，CSS是衣物。那么在这种类比下，JavaScript又是什么？JavaScript是大脑！！只有HTML的话，这个人是个浑身赤裸的植物人。不堪入目不说，戳他他还没反应。加上CSS，她就变成了睡美人。你想吻醒她，就需要给她注入JavaScript，让她有意识，能对外界刺激做出反应。
感性认知后，我们再来看看稍微正式点的说明：下面的说明分别来自W3school，菜鸟网和廖雪峰的官方网站。
简而言之，统而言之，JS，JavaScript是可以直接被浏览器直接解析，用在Web里面的轻量级脚本语言。简单易学，应用广泛。接下来我们在上面CSS的代码里面稍做修改，加入一点点JS代码，实现点击按钮后表上标题变换和表格颜色变换。
按照惯例，先上效果图：
然后贴上完整版的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html,body{
width:100%;
height:100%;
margin: 0px;
padding: 0px;
background-color: #1e2b3a;
}
#divtest{
width:100%;
height:30%;
text-align: center;
background-color: yellow;
margin: 0px;
padding: 0px;
}
table,th,td
{
border:2px solid #1e2b3a;
vertical-align: center;
margin:0 auto;
}
#tabletest{
border-collapse:collapse;
width:80%;
height:50px;
color: #1e2b3a;
position: relative;
}
#trclass1{
background-color: orange;
font-weight: bold;
}
.trclass2{
background-color: #158e71;
color:white;
}
</style>
<script>
i=0;
function changeTitle(){
i=i+1;
document.getElementById('htest').innerHTML="小O的测试表 No/."+i;
}
function changeStyle()
{
if(i%2==1)
document.getElementById('trclass1').style.background="blue";
else
document.getElementById('trclass1').style.background="white";
}
</script>
</div>
</head>
<body>
<div id="divtest">
<h id="htest">小O的测试表</h>
<table id="tabletest" border=1>
<tr id="trclass1" >
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>喜欢的颜色</td>
<td>不喜欢的颜色</td>
<td>身高</td>
</tr>
<tr class="trclass2">
<td>小O</td>
<td>20+</td>
<td>男</td>
<td>柠檬黄</td>
<td>shit黄</td>
<td>177+</td>
</tr>
<tr class="trclass2">
<td>老王</td>
<td>30+</td>
<td>男</td>
<td>黑色</td>
<td>彩色</td>
<td>160+</td>
</tr>
</table>
<br>
<div id="buttonbox">
<input type="button" value="换标题" onClick="changeTitle()">
<input type="button" value="换颜色" onClick="changeStyle()">
</div>
</body>
</html>根据惯例，我们拆开来一点点看。重要的点有两个，第一，js长什么样，第二，如何用js。
<script>
XXX xxxxx; //脚本，直接执行
.......
function XXX(){ //函数，需要调用
........
}
</script>当JavaScript直接写在Html文档里的时候，JavaScript程序应该位于script标签之中。作为一种脚本语言，js用起来当然是既有直接执行的脚本，又有间接执行的函数了。如果看官对Matlab这样的东西比较熟悉，那么JavaScript也就毫无问题了。
在HTML中用js，要么是写脚本它自己跑，要么就是在html里面设置响应事件。比如在html里给按钮注册一个onClick事件，该事件的响应是change()函数。
STEP 1: 注册事件
<input type="button" value="测试" onClick="change()">
STEP 2: 完成响应函数
function change()
{
alert("小O你好，我是js测试函数");
}JavaScript 能够实现的东西实在是多，在这种篇幅有限的情况下，小Ｏ就不需要仔仔细细讲细节了。细节上的问题请去菜鸟网看吧。
对了，为了看懂JavaScript中的如下代码，看官还需要去简单的了解一下DOM对象，其实也很简单。
document.getElementById('trclass1').style.background="white";恭喜你，小伙子，你达成了三剑合璧的成就。
补充：
看客们可能存在一个疑问，就是在HTML页面中，CSS样式代码和js脚本代码应该放在哪里？答案是你爱放在哪里放在哪里。你要你把对应代码放在<style></style>之间，放在<script></script>之间就好。这些片段在HTML中的具体哪个地方并没有什么影响。
不过，小O的个人习惯是如果要把CSS还有JavaScript写在HTML文档里，那就把他们放在<head>部分因为这样相对容易管理、理解。`
Part two 三剑客的分
这一节阐述对HTML、CSS、Javascript的进一步理解，并将一个.html拆分成.html+.css+.js的形式。
谈理解
小Ｏ曾经傻傻地学着html，css，还有js。但是一直没有一个整体的把握，因此学习起来的感觉就是书上有什么示例代码就敲一敲，敲完就忘记了。不知道自己想要的是什么。那么在这里，就让小O来形象地理一理三剑客间的关系，三剑客与后台大佬又是个什么样的联系。
牧云流同学的博客里面向新手简单总结了HTML,CSS,JavaScript之间的关联，小O也从中得到了一定的帮助。这里同样推荐大家阅读：《新手理解HTML、CSS、javascript之间的关系》。
STEP 1: 小O说要有人，结果法力过差，只出现了个白白的骷髅架子。——小O现在只写了HTML标签。
小O没办法，开始玩泥巴，把骷髅架子的缝隙都用泥巴填好，于是小O有了一个有骨骼奇特的泥巴人。——小O现在在HTML标签内部加上了内容，让HTML丰满起来了。
小Ｘ说这泥巴人太丑了，于是小Ｏ下深海上九天，采来各种珍奇装饰。淡妆浓抹总相宜，于是小Ｏ有了个五彩泥塑，看上去微妙微翘。——小O这个时候给HTML加上了CSS代码，来控制显示效果。
小X不要小O了，小Ｏ很孤单，天天和泥塑说话。可那泥塑不理小O，小O想让它活过来陪伴小O，于是分出一缕精魂，注入泥塑。泥塑有了心，也有了脑，从它变成了她。从此和小O过上了没羞没躁的快乐生活。——小O有加入了javascript代码，使得html页面能够良好交互。至此，前端完成。
这个社会发展的太快，小O需要一个智囊在身边，帮助小O分析局势把握机会。人脑毕竟有限，她已经无法仅仅依靠自己的力量就满足小O的需求了。幸好已经进入了超算时代，小O给她买了最新的人工智能辅助设施，那是一台有智慧的超级计算机，能够帮助她实现很多她凭借人脑完全无法胜任的计算与分析。——小O给前端程序配上了对应的后台程序，完成了整个项目。
总而言之，前台是人，后台是辅助人工智能。人有三层，其一曰骨肉，其二曰衣冠，其三曰思想。
我们的后台语言是ＪＡＶＡ,那么JAVA与JavaScript又有什么区别呢？
一句话总结，印度与印度尼西亚的关系。二者名称相似有点历史因素，但并不相同、也不类似。想进一步理清这个问题，推荐阅读下面阮一峰的《JavaScript诞生记》。
一分为三
JavaScript和CSS代码除了可以写在HTML文档里，还可以单独成文件，然后在HTML文档中进行调用。
调用语句写在head标签内，关键语句形式如下。前者是引入外部css文件，后退着是引入外部js文件：
<link href="Tinycircle_seperate.css" rel="stylesheet" type="text/css" />
<script src="Tinycircle_seperate.js" type="text/javascript"></script>把三剑客分开，是为了代码的条理性更加清晰和方便维护，是一种良好的编码习惯。也有利于后期向后台开发转型。那么分开后的三个文件如下所示：
Tineycircle_seperate.html文件内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="Tinycircle_seperate.css" rel="stylesheet" type="text/css" />
<script src="Tinycircle_seperate.js" type="text/javascript"></script>
</head>
<body>
<div id="divtest">
<h id="htest">小O的测试表</h>
<table id="tabletest" border=1>
<tr id="trclass1" >
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>喜欢的颜色</td>
<td>不喜欢的颜色</td>
<td>身高</td>
</tr>
<tr class="trclass2">
<td>小O</td>
<td>20+</td>
<td>男</td>
<td>柠檬黄</td>
<td>shit黄</td>
<td>177+</td>
</tr>
<tr class="trclass2">
<td>老王</td>
<td>30+</td>
<td>男</td>
<td>黑色</td>
<td>彩色</td>
<td>160+</td>
</tr>
</table>
<br>
<div id="buttonbox">
<input type="button" value="换标题" onClick="changeTitle()">
<input type="button" value="换颜色" onClick="changeStyle()">
</div>
</body>
</html>Tineycircle_seperate.css文件内容
html,body{
width:100%;
height:100%;
margin: 0px;
padding: 0px;
background-color: #1e2b3a;
}
#divtest{
width:100%;
height:30%;
text-align: center;
background-color: yellow;
margin: 0px;
padding: 0px;
}
table,th,td
{
border:2px solid #1e2b3a;
vertical-align: center;
margin:0 auto;
}
#tabletest{
border-collapse:collapse;
width:80%;
height:50px;
color: #1e2b3a;
position: relative;
}
#trclass1{
background-color: orange;
font-weight: bold;
}
.trclass2{
background-color: #158e71;
color:white;
}Tineycircle_seperate.js文件内容
i=0;
function changeTitle(){
i=i+1;
document.getElementById('htest').innerHTML="小O的测试表 No/."+i;
}
function changeStyle()
{
if(i%2==1)
document.getElementById('trclass1').style.background="blue";
else
document.getElementById('trclass1').style.background="white";
}如果想要仔细研究CSS和JavaScript引入到HTML里，可以参考如下两个链接：
①CSS引入：http://www.lvyestudy.com/les_cj/cj_1.3.aspx
②JavaScript引入：http://www.lvyestudy.com/les_js/js_1.3.aspx
有了从三剑合璧到三剑分离的过程和理解，之后再理解掌握诸如openlayers、D3、echarts这样的js库就会方便许多，也更容易上手。
最后放上一张相关图片作为本文的结束：
update 2017080６ by Giser Tinycircle
扫一扫
1650
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
