写在前面的话

本系列文章是百步梯技术部面向新人的教程,本人也很辣鸡,所以如果报道出现了偏差,还请及时指正。本文也会有着比较强烈的个人偏好因素(逃),如果你有自己的开发或者学习习惯,请相信你自己并坚持下去!

什么是 Web 前端

用比较“官方”的话来说,就是运行于浏览器上的客户端程序,怎么理解呢?浏览器每个人都有用过,当我们浏览网页时,就是在享受前端程序员的成果,当然大部分网站也要依靠于强有力的后端。网页如何排版,是由一种叫做 HTML 的标记语言和 css 样式表共同控制的;点击网页上的元素会发生怎样的反应,网页上部分动画效果的生成,是由叫做 Javascript 的脚本语言所控制的。当然,这些只是前端的冰山一角,从狭义上来说,编写以上几种语言的代码并将其分发在浏览器中运行就是前端开发的过程,而以上几种语言就是 Web 前端的主要成分与生态基础。

至于为什么是这几种语言而不是大家所熟悉的C/C++或其他语言呢?这里不详细展开,简要的来说历史原因的成分比较大,如果有兴趣可以尝试阅读为什么Web前端语言只有JavaScript?,其中你会得到一些思考与答案。

认识前端,先从浏览器开始

你之前或许已经听说过许多浏览器的名字,或许也自己尝试过一些浏览器。但是用于开发我更偏好于使用 Chrome 浏览器。请记住,在你开发时请避开所谓的国产浏览器,即使它们有可能是基于 Chromium 二次开发的,原因如下:

  • 受限的插件安装:我们做前端开发时,或许是为了方便,或许是为了调试第三方库,多少会用到一些开发者插件,这些插件可能不能正常在你的国产浏览器中正确安装。
  • 过于老旧的内核:国产浏览器对 Chromium 的版本号跟进不佳,且有可能尝试在 Trident(IE) 内核下渲染你的网页,造成不必要的麻烦。
  • 开发者工具的缺失或不完整:浏览器的开发者工具是前端开发的基础工具,如果这些工具缺失或者不完整、不好用将直接影响你开发的心情与效率。

如果你还没有听说过 Chrome 浏览器,或者没有安装,我这里就安利一下,当然你不喜欢那就算了,如果你觉得并不好用,那也没关系,你可以选择日常使用你喜欢的浏览器,开发时使用 Chrome 即可,这个系列的文章都会在 Debian 9 Buster + Gnome 3 + Chrome 61 下截图讲解说明的。以后版本号或许会随着更新而变化,但大体上不会改变,在 Windows 上 Chrome 的 UI 也不会有太大的差异。

虽然本文是在 Firefox 中编写的

Chrome 浏览器因为 Google 在中国的尴尬地位,从官方源下载时可能并不会太顺利,这里提供离线安装包:
Chrome 61 for Windows x64
Chrome 61 for Debian/Ubuntu/... x64 (deb)
Chrome 61 for Fedora/openSUSE/... x64 (rpm)

认识开发者工具

上面提到开发者工具是开发的基础,同时呢也是我们入门前端和学习前端的基础,所以我们首先了解这个东西。

一般情况下,Windows/Linux 中在 Chrome 内按下F12,Mac 用户按下command + option(alt) + i即可打开开发者工具。

你完全可以放心大胆的在这个页面上打开控制台做这个教程里面的所有的操作,这不会对部署在服务器上的数据产生任何影响。

看到这里是不是顿时觉得头大233333,接下来慢慢说明这里的东西,当然只介绍新手会用到的部分。

元素

切换到元素(Elements)选项卡,可以看到

devtool

左边就是 HTML 文档的内容啦(其实是 DOM 树),此时你完全看不懂这些代码的含义是什么都没关系,你只需要照着做体验一下即可,等你学了后面的内容之后会有恍然大悟的感觉(我猜的)

先试着点击左上角的ElementSelector,这时将鼠标移入网页内部,你会发现你鼠标悬浮区域的元素被框选起来了,这可以是一段文字,或者是一张图片,或者是其他任何你看到的东西。

Hover

此时留意下方的代码区域,被选中的那行代码从字面上来看是不是看起来和你网页中鼠标正在悬浮的区域相对应?没错!你发现啦!就是这行代码控制生成了网页上那个元素。

其实当你没有打开开发者工具时,有一个比起打开开发者工具再点击选择元素工具更快捷的定位元素代码的方法,那就是在元素上右键,点击审查元素(检查)。试一下你就会发现两者效果是完全一致的。

这时,我们对下方代码区域你想尝试修改的地方双击,文本变成了可编辑的状态,试着改动一下吧!网页上对应的内容也会跟着改变。是不是很神奇呢?和以往你接触的 C++ 等其他语言是不是有所不同?

EditedDom

聚焦到右侧的 Styles 选项卡

这里就是控制你当前选中的元素样式的代码。随意选择一个属性的键或值单击,都可以进入编辑状态,你可以随意的改动试试这个功能,当然结果也会直接在网页上展现出来。

到这里,我认为你已经学会了最基本的元素和样式的调试功能。这对你刚开始编写和理解前端代码非常有帮助,关于元素选项卡下的其他功能,我们会在接下来的教程中当你有一定的知识储备后再进行介绍。

控制台

切换到控制台(Console)选项卡。

ConsoleTab

(请务必无视那条 Error)

或许你已经听说过 Javascript 这门语言的名字,这个 Console 就是与浏览器的 Javascript 引擎直接交互的地方,如果你之前曾接触过 Python 等解释型语言,你可能对这种代码的执行方式有所了解。简单说明起来就是:你每在这里输入一段 Javascript 代码,它都会被动态的执行,不必等所有代码都编写完毕再运行,也不需先编译再运行。

一般情况下,我们习惯于在一个文件中编写 Javascript 代码,然后通过 <script> 标签引入网页,但其实你可以将文件中所有的 Javascript 代码粘贴到控制台中,回车运行,一般也可以得到一样的结果。

同时,这个控制台还会起到监控信息和错误的作用,网络请求错误、JS 代码运行错误、你的或框架的调试信息,都会被输出到这里。

我们尝试一下如何运行一行 JS 代码吧。

输入以下代码并按下回车

document.write("这将会破坏整个页面!");

ConsoleCode

原来的网页没有了?别担心,刷新即可重新恢复原来的内容。

想必你已经发现了,当你输入一个对象名按下 . 的瞬间会出现自动补全列表,按下 Tab 即可将选中项自动补全。

ConsoleAutoComplete

有个小技巧就是,当你手上不方便查询文档或资料的时候,你可以来这里查看一个对象有哪些成员,以及试探他们的用法。

此处并不会详细探讨 JS 这个语言,以后的教程中会指导 JS 的入门。

网络

切换到网络(Network)选项卡。

NetworkTab

如果在你打开控制台之后,页面没有发起网络请求,那么这里应该是空的。按下 F5 刷新页面就可以看到密密麻麻的网络请求了。

NetwordWithRequest

一般来说,对于新手我们只关注这几个东西:

  • Name(请求名):表示请求的文件名和附加参数
  • Status(状态):表示请求是否成功的一个 HTTP 状态码
  • Size(大小):表示请求对象的大小,如果是 from cache 则说明根据缓存规则匹配到了本地的缓存,没有发起真正的请求。
  • Time(时间):表示请求传输持续的时间
  • Waterfall(瀑布流):图形化的表示了请求的发起时间和持续时间,用于网络性能优化。

当点击某一个请求之后可以看到详情

NetworkDetail

现在看不懂没关系,随着以后学习 HTTP 协议时,你会逐渐理解里面的信息是干什么的,记住一下这些信息能在这里被找到就行了。

  • Headers(头部):这里能看到 HTTP 请求的元信息。你的请求的负载 (Payload) 也能在这里看到。
  • Preview(预览):这里根据返回数据的类型对返回的数据进行可视化或可阅读化的展示。
  • Response(响应):这里能看到服务器返回数据的原始内容。
  • Timing(计时):这里能看到一个请求花在每一步上的时间。

以上就是关于 Chrome 开发者工具的基本介绍。我相信这些知识会在以后的学习或者开发中对你有很大的帮助。如果你对此感兴趣,可以在开发者工具中多多探索,多观察别人站点的代码结构,能起到举一反三的效果。

开发环境的搭建

代码编辑器

不同于编写其他的语言,编写前端代码往往不需要安装庞大而复杂的 IDE (集成开发环境,如 Visual Studio 等),一个简单的文本编辑器就可以解决我们编写代码的绝大部分问题。因为前端代码的调试是在浏览器中进行的,与你用何种代码编辑器进行开发无太多关系。

代码编辑器有许多不同的选择,你可以选择足够轻量启动速度媲美系统自带记事本的 Notepad++,这款编辑器提供了简单的代码高亮和基于上下文的代码补全,但该软件的作者似乎发表了一些支持藏独的言论,大家自己心里有个判断就行了;你也可以选择同样轻量、大名鼎鼎的 Sublime Text,提供了良好的代码高亮和更高级的代码补全和提示;如果你仍然追求使用如 Visual Studio 那样的完整的工具链来编写前端代码,那么 WebStorm 是不二之选,它提供强大的项目管理能力和强大的 Javascript 推断提示能力;又或是你动手能力强大,将 Vim 配置成一个适用于 Web 的编辑器也不是不可以。

但是以上的所有文本编辑器都不是我的主力开发编辑器,我主要使用 Visual Studio Code 进行代码编写,理由如下:

  • 丰富且易于获得的插件:VS Code 作为微软亲儿子,拥有良好的社区生态。直接从插件面板中就可以获取成千上万的插件,让简单的文本编辑器瞬间变身高达(逃。基本上就是觉得缺什么功能,觉得用起来不爽,原生不支持某种文件类型,装插件基本都能解决你的问题。
  • 基于 Typescript 的代码提示:写 JS 的时候能做简单的类型推断得到比较智能的代码提示,如果将来你接触 TS 会体验到这个推断引擎的强大。
  • 高度可定制:配色、图标、背景……你能看到的东西都能简单替换。
  • Git 的集成:init/commit/push一气呵成
  • 终端和调试的集成:再也不需要在终端和编辑器直接切来切去了,终端就在界面的底下。调试功能在写 Node (一种脱离浏览器的 Javascript 运行环境)的时候用起来非常舒服。
  • 跨平台体验一致:无论你使用 Windows、Linux 或是 MacOS,VS Code 都提供一致的体验,包括外观、插件等等。
  • 与前端的紧密联系:可能听到接下的东西你会感到意外,整个 VS Code 其实就是一个特殊的网页,它基于 Electron,其允许 Web 开发者开发本地应用,整个 VS Code 也是由大量的 HTML, CSS 和 Javascript(Typescript) 代码构成的。也就是说,你以后可以凭借自己的 Web 领域的知识参与到 VS Code 的插件或本体的开发中来。

如何安装呢?前往官方网站 Visual Studio Code 并按照推荐下载安装包安装即可。

VSCode

关于插件,此处列举我个人用到的插件(无关具体语言):

  • Auto-open Markdown Preview: 当你打开或编辑一个 Markdown(一种用标识符格式化文本的语言) 文件时,可以在右侧打开即时更新的预览。本文也是使用 Markdown 编写的,以后编写接口文档时也常用该语言。
  • Beautify:提供更多语言的代码格式化支持,觉得自己的代码写得很丑,都没对齐或者空格数不一致吗?右键格式化一下就好。
  • Path Intellisense:当你代码中需要输入文件路径时,这个插件会自动提示补全你的路径。
  • Settings Sync:当你在多台设备上使用 VS Code 时可以保持这些 VS Code 的插件、设置一致。

其他更针对特定语言开发的插件会在接下来的教程需要的时候再推荐。

搭建本地 Web 服务器

在以往,你或许总以为服务器离我们遥不可及,但是现在你要改变这个想法,你的电脑可以同时充当服务器和客户端的角色。何谓一个 Web 服务器呢?简单来说就是接受浏览器的请求,如果浏览器请求一个静态文件,那么就去对应的目录中寻找那个文件发送给浏览器;如果请求一个非静态文件,那么就把请求转发给对应的处理程序(例如 php 等),再返回给浏览器;要是上面两点都不满足,那就返回错误给浏览器。

你或许会问,一个网页编写出来不是直接双击文件就会自动打开浏览器了吗,为什么还要搭建 Web 服务器?这个问题不好解释,我也只能尝试着解释:

  • 作为一个前端程序员,你需要了解 Web 的工作机理,直接双击一个文件,你会发现 url 中的协议是 file://,这意味着这根本不是一个 http 请求,那你还怎么深入学习下去呢?
  • 现代浏览器都对使用 file:// 打开网页有着严格的安全策略,这意味着你的代码很可能根本无法正确执行,尤其是涉及网络操作的部分。
  • 你将来很有可能要要在本地部署 php 代码或其他后端代码来调试你的前端项目,那么没有一个 Web 服务器,这些都是空谈。
  • 将来你也会有你自己的远程服务器,你也会去部署你的代码,这是个极好的练习机会。

总之,直接双击文件打开是一个十分粗暴的调试代码的方式,应该避免这种行为的发生。

如何在本机部署一个 Web 服务器呢?一个 Web 服务器通常有这几个部分:

  • HTTP 服务器:如 Apache、Nginx 等,负责监听端口,处理 HTTP 请求。
  • 后端语言运行环境:如 php, node, python 等。
  • 数据库:如 MySQL, MariaDB 等。

以上软件一一安装部署和配置过于繁琐和复杂,对新手也不够友好。那么有没有一种一键安装,自动配置的工具呢?有!

我在这里推荐 XAMPP ,所谓 XAMPP,就是 Apache + MariaDB + PHP + Perl 的首字母缩写,老版本中的 MySQL 在新版本中被替换成了 MariaDB,不过不用担心,两者在新手阶段不会有太大的区别。

在其官方网站 XAMPP 上可获得 Windows, Linux, MacOS 平台的安装包,可按照其默认配置直接安装无需改动任何设置。(其实在 Linux 上,我更推荐你自己动手去装一下这些环境,可能相比使用 XAMPP 会减少更多麻烦,也能学到更多东西。更具体的 Linux 下的部署配置教程可能会有别的百步梯的成员去撰写,我就不献丑了)

安装完成后打开你的 XAMPP Control Panel,因系统而异,Windows 平台可在开始菜单中找到快捷方式。(我的 Debian 下 XAMPP 的 Panel 无法打开,所以截图中使用 Wine 打开 Windows 下的 XAMPP Control Panel)

XAMPPControlPanel

点击 Apache 和 MySQL 后面的 Start,你的电脑就会变成一个 Web 服务器啦。

在浏览器中访问

http://localhost/

localhost 一般情况就指向这台电脑本身,所以可以看见你的机器已经在顺利的履行作为一个 Server 的职责了。

WebServer

点击右上角的 PHPinfo,可以看到 PHP 输出的调试信息:

PHPInfo

事实上,phpinfo.php 这个文件只包含一行代码:

PHPInfoInner

是不是觉得很惊讶很神奇?以后神奇的事情还会有更多。由此我们可以看到 php 有在好好的工作了。

到此 Web 服务器的搭建也就告一段落了。

HelloWorld

那如何让自己的代码在这种方式下工作呢?很简单,XAMPP 安装目录下的 htdocs 文件夹,就是用来存放源代码和其他静态文件的,如果你观察一下这个目录下的文件结构,再对比浏览器里面的地址,你会发现其中的映射关系。

或许你现在并不会任何的 HTML 或 PHP,没关系,跟着做一遍就行了,以后自己动手写代码时依照这个步骤来创建项目即可,

在 Windows 下点击 XAMPP Control Panel 中的 Explorer 即可打开 XAMPP 的安装目录,Linux 和 MacOS 下你可能需要自己去找一找 XAMPP 的目录。这个目录下就有那个叫做 htdocs 的文件夹。我们进入 htdocs 文件夹,新建一个文件夹叫做 helloworld。

在 VSCode 中打开这个文件夹,在左侧资源管理器的空白处的右键新建一个文件,命名为index.htmlindex.html在 Web 服务器中有着特殊的含义,当访问一个目录但不指定文件名时,默认就是访问这个文件)

粘贴以下代码:

<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <title>Hello World</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    html {
      background: linear-gradient(to bottom right, #1D1D1D, #747474);
      height: 100%;
      width: 100%;
    }
    .text {
      text-align: center;
      font-size: 64px;
      font-family: "Consolas";
      color: white;
      animation: fade ease 5s infinite;
    }
    @keyframes fade {
      0% {
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
      100% {
        opacity: 0;
      }
    }
  </style>
</head>

<body>
  <p class="text">Hello, World!</p>
</body>

</html>

HelloWorldCode

接着在浏览器中访问 http://localhost/helloworld/ 就可以看到一个呼吸效果的 Hello, World! 了。

HelloWorldWeb

小结

这个教程作为这个系列的第一弹,希望能对你前端提起了兴趣,也对其有了一些基本的了解。接下来的一篇会是关于学习路线的一个指南,还请多多关注。谢谢!

Delbertbeta
2017-9-24 22:44