1、为什么是Javascript作为编程入门的语言
作为一个小白，如果想选择一门语言作为学习编程的入门语言，选择什么语言比较合适呢？个人推荐Javascript语言作为编程学习语言，原因如下：
1、Javascript可以运行在浏览器中，结合HTML标记语言可以快速的开发出具备图形界面的程序；
2、Javascript语言的语法和当前主流的C语言、Java语言等语法接近，学习过Javascript后再学习其他语言更容易上手；
3、Javascript除了可以运行在浏览器中，还可以运行在nodejs虚拟机环境，利用nodejs虚拟机的能力，可用Javascript开发出轻量的服务器端程序，就是通常说的后端程序。
基于以上几点，推荐通过学习Javascript语言学习计算机编程。
2、学习Javascript的前提
为了让学习过程直观和有趣一些，我们通常都将程序的用户界面编写为图形界面。因为Javascript运行在浏览器中，而为了在浏览器中构建图形界面，你最好要有一些HTML的基础知识，这有利于我们更快速的编写出一些有趣的Javascript程序，这些有趣的程序会让自己成就感爆棚，这些成就感可以提升我们学习计算机编程的兴趣。当然，HTML语言不是必须的，笔者在后续的文章中会尽量把涉及到的HTML知识解释清楚。
3、搭建Javascript开发环境
其实开发Javascript程序只需要会使用文本编辑器（比如系统自带的记事本，或者开源的notepad++等）即可，但这种方式学习效率太低，因此还是请跟随笔者一起利用nodejs+VScode搭建一个Javascript的开发环境吧。
3.1、nodejs安装
nodejs下载地址：nodejs.org ，在首页我们一般选择LTS（Long Time Support）版即可，下载后，双击下载的.msi文件开始安装。具体安装教程参考这里。安装工程与普通的windows软件安装程序没有什么不同，选择默认安装即可。这里需要注意：nodejs安装后，会同时安装node.exe程序（解释运行Javascript程序的虚拟机程序）和npm（nodejs的包依赖管理工具，就当前阶段，你只要知道这是包依赖管理工具就可以了）。
安装完成后，可以在cmd中运行以下命令，看看nodejs虚拟机和包管理工具是否安装成功：
node -v
npm -version如果两行指令输出了对应工具的版本号，说明nodejs安装成功，如下图所示：
nodejs安装验证
3.2、VScode安装
下载地址：VScode VScode安装过程和nodejs类似。如果下载的是zip文件，则解压后即可使用。
3.3、安装live-server
由于Javascript运行在浏览器中，因此需要一个web server用于部署HTML及Javascript程序，这样才能通过在浏览器地址栏中输入对应HTML文件地址，通过浏览器访问这些HTML和Javascript，才能在浏览器中运行你编写完成的Javascript程序。你当然可以使用apache http server、nginx等流行的web server软件，但那过于复杂，不适合初学者。初学者可以使用用javascript编写的轻量级的web server：live-server。打开cmd，执行如下命令：
npm install -g live-server这里一定不要忘记添加-g选项，表示全局安装nodejs的live-server包，什么是全局安装，笔者留到以后解释。安装完live-server包后，在cmd中执行以下命令：
live-server -v如果正确输出live-server的版本号，说明live-servver安装成功。
至此，学习Javascript编程的依赖软件就安装完成了，接下来就和笔者一起编写Javascript程序吧。
4、编写第一个Javascript程序
4.1、创建Javascript源码存放目录
打开资源管理器，创建目录：D:\devtools\jssrc\jsdemo，这里jsdemo目录就是我们的HTML和Javascript程序的存放位置。当然，你可以创建任何一个空目录来保存学习过程中的HTML和Javascript源码文件。
4.2、在源码目录创建Javascript源码文件
1、双击VSCode安装目录下的code.exe文件，打开VSCode编辑器；
2、点击“文件-》打开文件夹...”菜单项，在文件选择对话框中选择D:\devtools\jssrc\jsdemo目录；
3、打开目录后，在资源管理器窗口中，点击创建文件工具按钮；
创建文件
4、在输入框中输入index.html，然后回车；
5、在右侧文本编辑器中输入!，然后选择代码块!，回车；
输入HTML代码
6、修改源码内容如下：
<!DOCTYPE html>
<html lang="zh"><!-- 修改后代码 -->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript练习</title><!-- 修改后代码 -->
</head>
<body>
</body>
<script type="text/javascript"><!-- 新增的代码 -->
alert("你好，Javascript！");//弹出提示信息
</script>
</html>这里主要的修改点如下：
1、将<title>标签中的文本修改为Javascript练习；
2、在</body>标签后增加了：
<script type="text/javascript">
alert("你好，Javascript！");//弹出提示信息
</script>
这里添加的代码就是Javascript代码，意思在页面加载后，浏览器弹出一个信息提示对话框，提示内容是：你好，Javascript！
修改完代码后，就可以运行代码了。
5、运行Javascript代码
1、在VSCode右下角的“终端”视图（如果该视图不存在，请点击主菜单“终端-》新建终端”的菜单项）中执行live-server命令；
启动live-server服务
2、浏览器访问live-server服务器地址，验证浏览器是否弹出提示信息窗口；
浏览器查看程序运行结果
启动live-server服务后，会打开系统默认浏览器并自动在地址栏输入index.html的访问地址。如果没有打开默认浏览器，请手动打开浏览器并根据终端提示的ip和端口信息在浏览器地址栏中输入地址访问以便在浏览器中运行我们刚刚编写的index.html文件中的javascript代码。
6、代码解析
6.1、Javascript代码嵌入到HTML中
这种HTML中嵌入浏览器的方式，是运行Javascript的常用方式，Javascript需要些在<script>和</script>标签之间，alert()函数是Javascript的函数，其作用是弹出浏览器提示对话框。
6.2、代码解析
部分HTML代码解释如下：
1、<title>标签和</title>（title标签的结束标签）标签之间的文字，在运行时会显示在浏览器窗口的窗口标题位置；
title标签对应的运行时效果
2、HTML主要用于构建UI，即用户界面，浏览器解析HTML然后在浏览器中构建web用户界面。为了让HTML具备运算（包括数学运算和逻辑运算）能力，就需要在HTML中嵌入Javascript代码。
3、当需要在页面显示文字内容时，需要在<body>和</body>两个标签之间添加对应的内容，比如在<body>和</body>之间添加<p>你好，世界！</p>，修改后的代码如下：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript练习</title>
</head>
<body>
<p>你好，世界！</p>
</body>
<script type="text/javascript">
alert("你好，Javascript！");//弹出提示信息
</script>
</html>
HTML源码与运行结果
从图中可以看出，浏览器显示的只是标签中的文字，而<p></p>则不会被浏览器显示。
完成环境搭建后，如果想学习如何调试Javascript程序，可以跳转到学编程从Javascript开始（八）调试Javascript程序一文来学习。毕竟通过单步执行程序，跟踪程序执行过程，是排除程序Bug，理解程序算法非常有效的手段，笔者强烈建议初学者要尽快学会调试自己的Javascript程序。
下一篇：学习编程从Javascript开始（二）猜数游戏 |
