学习编程,重要的一点就是要进行思考,而更重要的一点是进行动手实践。简单的代码逻辑,我们可能想想就能在脑子里建立出这个代码的样子来,但是别以为你能永远这样人肉运行代码,不写下来,你就不知道你想象的代码的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并打开,程序运行正确的话,你就能看到如下的运行结果:
至此,我们的前端开发环境就已经算是准备就绪了。
一个最简单的后端程序
接着,我们来写一个后端代码测试一下。
第一步,先在你的磁盘上任意一个地方建一个文件夹,比较叫做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下方的调试控制台中,打印出了一条你电脑的CUP是4核的
的消息。
这样一来,我们的后端开发环境也算测试通过了。
小结
目前,你可以先不用理解这些代码是什么意思,但是请你一定要实际操作一遍,并保证能出现它们应该出现的运行结果。
实践,是学习编程最好的方式。
欢迎关注一斤代码的系列课程《从编程小白到全栈开发》