从编程小白到全栈开发:从最容易的开始

简介: 学习编程,重要的一点就是要进行思考,而更重要的一点是进行动手实践。简单的代码逻辑,我们可能想想就能在脑子里建立出这个代码的样子来,但是别以为你能永远这样人肉运行代码,不写下来,你就不知道你想象的代码的bug有多多。

学习编程,重要的一点就是要进行思考,而更重要的一点是进行动手实践。简单的代码逻辑,我们可能想想就能在脑子里建立出这个代码的样子来,但是别以为你能永远这样人肉运行代码,不写下来,你就不知道你想象的代码的bug有多多。

代码还是让电脑来运行吧!

所以,要在我们的电脑上,先准备一个代码编写与运行的环境,我们叫做开发环境。其实也就是几个用来编写代码,以及运行这些编写好的代码的软件。

这里有几个我们学习的第一阶段需要使用到的软件,请下载并安装吧:

我们一般用浏览器来运行我们的前端代码,浏览器有很多种,有IE,火狐(FireFox),谷歌(Chrome)等等,我们在这里挑对开发人员来说最好用的谷歌Chrome浏览器。

我们的后端代码,会通过Node.js来运行。

而我们平时用来编写代码的工具,也是种类繁多,眼花缭乱。为统一起见,我为大家推荐使用Visual Studio Code(我们以后简称它为VS Code),它简单易用而功能强大,非常适合JS全栈开发者使用。

当你安装好这样一个开发环境后,我们来学写一个最简单的代码,主要来验证你的这个环境是否已安装正确可以开始工作。

一个最简单的前端程序

打开你的VS Code,通过菜单中的“文件”->“新建”,来创建我们的第一个代码文件,并把它通过菜单中的“文件”->“新建”,保存为test.html(可以把它放到你电脑里的任意文件夹中去)。

菜单

(我的VS Code是英文版的,中文版的同学请自行对照)

然后,我们来在test.html中写点代码,如下:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>第一个前端页面程序</title>
</head>

<body>
    <h1>你好,各位!</h1>

    <script>
        alert("测试成功");
    </script>
</body>

</html>

然后,打开你的谷歌浏览器,把test.html直接拖放进浏览器中,或者通过谷歌浏览器的菜单“文件”->"打开文件"找到test.html并打开,程序运行正确的话,你就能看到如下的运行结果:

image.png

至此,我们的前端开发环境就已经算是准备就绪了。

一个最简单的后端程序

接着,我们来写一个后端代码测试一下。

第一步,先在你的磁盘上任意一个地方建一个文件夹,比较叫做test。然后,打开你的VS Code,在菜单里面通过'打开'菜单,然后找到并选择打开你刚建立的那个名为test文件夹:

接着,使用VS Code在test文件夹下新建一个名为test.js的文件:

然后,在这个文件中编写如下代码:

var os = require('os');
var msg = "你电脑的CPU是" + os.cpus().length + "核的";

console.log(msg);

我们可以有若干种方法来运行这个后端程序,这次我先介绍一种通过VS Code来直接运行它的方式。点击VS Code的菜单“调试”->"开始调试",如下图所示,VS Code可以自动使用Node.js来执行我们的这个test.js代码文件:

VS Code中执行Node.js代码

我们可以看到,VS Code下方的调试控制台中,打印出了一条你电脑的CUP是4核的的消息。

这样一来,我们的后端开发环境也算测试通过了。

小结

目前,你可以先不用理解这些代码是什么意思,但是请你一定要实际操作一遍,并保证能出现它们应该出现的运行结果。

实践,是学习编程最好的方式。
欢迎关注一斤代码的系列课程《从编程小白到全栈开发》

目录
相关文章
|
4月前
|
人工智能 前端开发 程序员
程序员:全栈的痛你不知道
我这里说的全栈,不只是IT技术栈,还有更多的是产品运营思维。任何时候全栈人都应该用解决问题、推动事情往前发展的思维去做事。
|
5月前
|
前端开发
全栈技术实践问题之全栈开发带来的主要好处是什么
全栈技术实践问题之全栈开发带来的主要好处是什么
|
存储 开发框架 小程序
【全栈小程序开发路线】手把手教你入门小程序开发,小白必看!
以下内容是结合我项目中实战经验,踩坑记录,大量时间学习小程序的积累,总结分享给大家。 学习路线包括前端基础、小程序开发框架、UI组件库、云开发、周边生态以及插件这几个纬度,学完这些,你也能全栈开发一个属于自己的产品。
581 0
|
移动开发 运维 前端开发
【深入浅出全栈开发】全栈是什么?- 课前必读 #154
【深入浅出全栈开发】全栈是什么?- 课前必读 #154
606 0
|
移动开发 前端开发 Java
|
敏捷开发 运维 监控
全栈软件测试工程师宝典连载(3)
全栈软件测试工程师宝典连载(3)
213 0
全栈软件测试工程师宝典连载(3)
|
机器学习/深度学习 人工智能 前端开发
前端已死?全栈当立?取法于中,仅得其下。
开篇明义,前端已死?根本就是扯淡。前端技术精微渊深,驳杂宽广,除了基础的 HTML、CSS 和 JavaScript 技术外,前端技术还涉及到许多其他相关技术和工具,比如前端框架、UI 库、自动化构建工具、代码管理工具等等。这些技术并没有死,反而生态圈愈发健壮,但为什么前端已死的论调甚嚣尘上?
前端已死?全栈当立?取法于中,仅得其下。
|
存储 监控 Java
全栈软件测试工程师宝典连载(12)
全栈软件测试工程师宝典连载(12)
170 0
全栈软件测试工程师宝典连载(12)
|
敏捷开发 监控 Devops
全栈软件测试工程师宝典连载(2)
全栈软件测试工程师宝典连载(2)
158 0
全栈软件测试工程师宝典连载(2)
|
缓存 监控 Devops
全栈软件测试工程师宝典连载(5)
全栈软件测试工程师宝典连载(5)
102 0