关于前端学习的小总结

记录一下近期的学习心得,由于参加一个比赛需要一个简单的web页面来展示结果,所以需要取学习一些前端的开发的技术。之前也看过一些 web 页面的知识,但没有亲自去尝试过,这次正好有机会去进行更深入的了解。

0x01 前端基本功

要说前端开发,首先得有一些基本功,就是我们平时说的 HTML CSS JavaScript。这些是构建一个网页的基础,之前搭博客我了解过一些HTML和JS的东西,只限于看得懂,也做过一些页面的修改,但是亲手编写的话,还是有一定的困难,不过好在可以查资料,照葫芦画瓢,还是能做出来一些。

之前尝试过开发一款微信小程序,好多东西都是参考着网上的教程一步一步的做,其中也涉及了大量的网页前端的知识,业务逻辑实现都是用的 JS 当时主要是参考了微信小程序的开发文档,它提供很多可以直接使用的API,如果是实现简单功能的话,会调用就行,当时做的是一款天气预报的小程序,数据来源是百度地图的API,比较有挑战的是 WXSS 样式设计,类比于Web页面的CSS,可以这么说页面好不好看取决于你的样式表设计和布局,因为没有系统学习过,当时还是花了很长时间去设计CSS,尽管如此,最后的页面还是惨目忍睹。

再说这次页面的编写,有了之前的基础,这次在JS 和 CSS 的设计和实现上感觉容易多了,也更加了解了一个页面的构成。一个 HTML 页面定义了整个网页的结构,把所有CSS 和 JS 都包含起来。当然大多数开发者是很少会直接在HTML里面定义CSS 和JS的,通常是将它们放在单独的文件夹,通过引入进行调用。

下面这个例子就是个简单的HTML页面,其中包含了页面布局的定义,CSS的定义,以及一个简单 JS 脚本。在HTML页面里CSS是通过<style></style>标签定义引用的,一般在HTML的<head></head>内引入,也可以直接在标签内进行定义,CSS 样式多变难记,不过十分容易理解,在使用时可以查找相关资料。JS脚本实现的逻辑功能,在页面里 JS 是通过<script></script> 标签定义引入的,一般情况 JS 在页面内定义位置不影响,是全局的,通过使用JavaScript 能够大大增强HTML的交互性。

对于HTML页面来说,整体结构就是head、body;整个页面需要<div></div>等各种标签进行组合,一个功能完善并且好看的页面是需要HTML,CSS,JS 共同协调构建的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html>
<head>
<title>这个是标题</title>
<style type="text/css">
body{
height: 100%;
width: 100%;
background-color: yellow;

}
/*标签选择器*/
p{
color:red;
}
/*类选择器*/
.first{
color:red;
}
/*id选择器*/
#first{
color:green;
}
</style>

</head>
<body>
<div>
<h1>这是一个一个简单的HTML,h1
<p id="test">Hello World!</p>
</h1>
<h2>这是一个一个简单的HTML,h2</h2>
<p style="color:orange;font-size:18px">在HTML中使用css样式</p>
</div>
</body>

<script type="text/javascript">
var mystr = document.getElementById("test")
document.write("p标签修改之前:"+mystr.innerHTML+ "</br>");
mystr.innerHTML="hello web!"
document.write("p标签修改之前:"+mystr.innerHTML + "</br>");
</script>
</html>

0x02 浅谈 JavaScript

对于前端开发来说,应该比较复杂的就是业务功能实现这部分了,我在刚接触 JS 的时候也是摸不着头脑,最开始连代码都看不太懂,更别说写。不过接触多了,慢慢的也就熟悉了。

首先需要了解什么是DOM(文档对象模型),它定义了访问 HTML 和 XML 文档的标准, 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。其中包含了大量的对象,通过对象调用可以实现一些特定的功能,比如常用的Document、Event 事件、Form表单等。

在这次网页编写时我还使用了 jQuery,它属于 JavaScript 的一个库,可以极大的简化 JS 编程,功能也十分强大,如果有前面说的基础,那也很容易学。在使用 jQuery 的时候需要使用<script> 标签将 jQuery 添加到网页中,<script> 标签应该位于页面的<head>部分。src 可以是下载到本地js,也可以是远程当然 jquery.js 链接。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
</body>
</html>

为实现与服务器交换数据并更新部分网页,我还去了解一些 AJAX。异步的 JavaScript 和 XML,这是一种用于创建快速动态网页的技术,其最主要的优势是可以在不重新加载整个网页的情况下,对网页的某部分进行更新,更能体现 Web 应用的动态性和实时性。

AJAX 虽然看起来比较复杂,但还是比较容易理解,整个创建过程的格式都是固定的,需要考虑的主要是事件的触发以及元素的更改,也就是什么时候调用 ajax,以及修改那些数据,通常使用的方法是使用 document.querySelector() 属性选择器来进行操作的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<script >
//1.建立xmlHttpRequest对象
//2.使用OPEN方法与服务器建立连接此步注意设置http的请求方式(post/get)
//3.设置回调函数,在回调函数中针对不同的响应状态进行处理
//4.向服务器端发送数据, 如果是POST方式就不为空

// 可以简写为 var xmlHttp = new XMLHttpRequest();
if(window.XMLHttpRequest) {
// 建立xmlHttpRequest对象
var xmlHttp = new XMLHttpRequest();
if(xmlHttp.overrideMimeType) {
xmlHttp.overrideMimeType("text/xml");
}
}
else if(window.ActiveXobject) {
var activeName = ["MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];
for(var i = 0; i < activeName.length; i++) {
try {
xmlHttp = new ActiveXobject(activeName[i]);
break;
} catch(e) {}
}
}
if(!xmlHttp) {
alert("创建xmlhttprequest对象失败");
}
else {}

// 如果是POST方式,注意设置请求头信息, GET方式可以不设置
// xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
xmlHttp.open("get","getData.php?name="+ name,true)

// 设置回调函数
xmlHttp.onreadystatechange= callback;
function callback(){
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
//判断交互是否成功获取服务器返回的数据
var responseText =xmlHttp.responseText;
document.getElementById("info").innerHTML = responseText;
}
}
//向服务器端发送数据
xmlHttp.send(null);
</script>

通过实际上手,自己也尝试了一些 JS 的编写,其实大多数编程的一个套路,只要思想了解了,稍微了解一些语法就能实现一些简单的功能,重要的是多尝试和多实践。

0x03 Bootstrap 框架

Bootstrap 是目前最受欢迎的前端框架,是基于HTML,CSS, JavaScript的。开发框架最主要的目的就是方便开发,提供一些列通过模板,开发者可以通过引用修改,完成自己的功能,不需要自己重复早轮子。

之前我也重来没有接触过前端框架,也不知道该如何使用,通过这次亲手实践,对前端框架有了一个更深入的了解。在使用Bootstrap的时候只需要访问它的官网,可以下载源码,也可以直接使用BootstrapCDN将预编译的 CSS 或 JS 文件引入页面。网站还提供了一些样式,自己可以选择自己需要的进行修改使用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>在线尝试 Bootstrap 实例</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<h1>Hello, world!</h1>

</body>
</html>

0x04 XML和JSON

在 Web 开发中不可避免需要与数据进行交互,最典型的两种数据格式是xml 和 json。xml 实际上是一种扩展性标记语言,可以标记数据和定义数据类型。而json则是一种轻量级的数据交换格式,可在不同平台之间进行数据交换。两者各有优缺点,但是在对数据进行解析时 json 要稍微容易些,可读性也更强。

在实际开发中,包括后端开发中数据格式也常常为JSON。下面通过两个实例进行比较一下:

<1>.用XML表示中国部分省市数据如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?xml version="1.0" encoding="utf-8" ?>
<country>
<name>中国</name>
<province>
<name>云南</name>
<citys>
<city>保山</city>
<city>昆明</city>
</citys>   
</province>
<province>
<name>四川</name>
<citys>
 <city>成都</city>
 <city>乐山</city>
</citys> 
</province>
<province>
<name>新疆</name>
<citys>
<city>乌鲁木齐</city>
</citys>
</province>
</country>

<2>.用JSON表示中国部分省市数据如下:

1
2
3
4
5
6
7
8
9
var country =
{
name: "中国",
provinces: [
{ name: "云南", citys: { city: ["保山", "昆明"]} },
{ name: "四川", citys: { city: ["成都", "乐山"]} },
{ name: "新疆", citys: { city: ["乌鲁木齐"]} }
]
}

0x05 PHP 真好!

在进行Web开发时,前端的问题解决了,就需要考虑后端服务器的问题,如果构建动态网页的话,不可避免的需要与服务器进行数据交互,一般情况下后端代码都是后端程序员编写,然后会留出一些接口给前端程序员调用。

这次网页的编写因为需要进行数据交互,所以我尝试了最容易上手的服务器脚本语言PHP,毕竟它是最好的编程语言嘛,虽然之前一直在说这个梗,但一直没有去接触了解,现在尝试了一些,果然是好用啊。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php
//第一个PHP代码
//设置页面编码格式
header('content-type:text/html;charset=utf-8');

echo "hello PHP";
echo '<br>';

echo "PHP 是世界上最好的语言!";
echo '<br>';

$name = "ppd";
echo "name: $name";

for($i = 0; $i < 10; $i++){
echo "666";
echo "<br>";
}
?>

0x06 小结一下

经过不断踩坑尝试,了解和学到了很多东西,其实很多东西比想象中的要容易,在没有动手做之前总觉得什么都太难,也不想去尝试,其实迈出第一步,后面会好很多。

解决问题的能力很重要,要把学习和解决问题划分开,学习需要的循序渐进,系统掌握。而解决问题更重的是针对问题本身,找到其解决的办法,最常用的方法莫过于搜索查找。前者是理论基础,后者是实践经验,二者都需要培养提高。

差不多根据自己了解的前端开发做了一个总结,内容都是很基础很简单的,如果深入的学习了解可能会有更多的发现和感悟。