第一个JavaScript

作为计算机从业者，你肯定知道JavaScript是一种非二进制执行程序的解释型程序，依赖于解析起(WEB浏览器提供JavaScript解析器)运行。

OK，我也知道上述概念，但是怎么开始运行一段JavaScript脚本呢？

通常我们在浏览器中运行JavaScript，有两种方式:

  • 将脚本放在HTML文档中任意位置的 <script></script> 元素中

  • 将脚本放在外部带有 .js 扩展名的JavaScript文件中，然后在HTML文档中使用 <scc></src> 元素包含外部脚本

另外一种常见的运行方式是在控制台，例如服务器环境中运行JavaScript: 使用 Node.js Atlas

  • 我们现在创建一个简单的 index.js :

简单的终端打印 index.js ，使用index命名可以作为默认执行
console.log('hello world')

命令行运行js( Node.js Atlas )

安装nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash

  • 安装最新版本node:

nvm安装node.js
nvm install node

啊哈，我们现在就可以开始运行JavaScript了， so easy

node .

这里使用 . ，则默认运行 index.js

可以指定运行:

node index.js

都会在终端中打印出我们熟悉的 hello world

在浏览器中运行JavaScript

  • 创建一个 index.html 来包含上述的``index.js`` :

引入index.js的简单index.html
<html>
    <head>
        <script defer src="./index.js"></script>
    </head>
</html>

备注

HTML <script> defer 属性: 表示脚本和解析页面 并行下载 ，并在 页面解析完成后执行

src 外部脚本有三种执行方法:

  • defer 脚本和解析页面并行下载，并在页面解析完成后执行脚本

  • async 脚本和解析页面并行下载，但是脚本在可用时立即执行(在解析完成前)

  • 没有属性: 立即下载并执行脚本， 阻塞解析 直到脚本完成

  • 使用浏览器打开 index.html ，此时看到的是一个空白页面。这是因为上面这个简单的JavaScript脚本输出信息在 console 控制台，所以需要打开浏览器的 developer console ，例如在 chrome 中

../../_images/index_html.png

在框架内运行JavaScript( React )

上述在控制台输出信息，虽然方便调试，但是显然不是面向最终用户的。在 Real Atlas ，通常会使用框架来运行代码，这样能够不断迭代扩展运行

待续…

参考