编写你的第一个 JavaScript 代码

图片来自

Opensource.com

JavaScript 是一种充满惊喜的编程语言。许多人最初接触 JavaScript 是作为一种 Web 语言。所有主流浏览器中都有 JavaScript 引擎，还有流行的框架（如 JQuery、Cash 和 Bootstrap）来帮助简化 Web 设计，甚至还有用 JavaScript 编写的编程环境。它似乎在互联网上无处不在，但事实证明，它也是诸如 Electron 之类的项目的有用语言，Electron 是一个用于使用 JavaScript 构建跨平台桌面应用程序的开源工具包。

JavaScript 是一种用途广泛的语言，拥有大量的库，用途远不止制作网站。学习该语言的基础知识很容易，并且它是构建您所想象的任何东西的入门。

安装 JavaScript

随着 JavaScript 的进步，您可能会发现自己需要高级 JavaScript 库和运行时。但是，当您刚开始时，根本不需要安装 JavaScript。所有主要的 Web 浏览器都包含一个 JavaScript 引擎来运行代码。您可以使用您喜欢的文本编辑器编写 JavaScript，将其加载到您的 Web 浏览器中，看看您的代码会做什么。

开始使用 JavaScript

要编写您的第一个 JavaScript 代码，请打开您喜欢的文本编辑器，例如 Notepad++、Atom 或 VSCode。因为 JavaScript 是为 Web 开发的，所以它与 HTML 配合良好，所以首先，只需尝试一些基本的 HTML

<html>
  <head>
    <title>JS</title>
  </head>
  <body>
    <p id="example">Nothing here.</p>
  </body>
</html>

保存文件，然后在 Web 浏览器中打开它。

图片来自

^{（Seth Kenlon，CC BY-SA 4.0）}

要将 JavaScript 添加到这个简单的 HTML 页面，您可以创建一个 JavaScript 文件并在页面的 head 中引用它，或者只需使用 <script> 标签将您的 JavaScript 代码嵌入到 HTML 中。在此示例中，我嵌入了代码

<html>
  <head>
    <title>JS</title>
  </head>
  <body>
    <p id="example">Nothing here.</p>

    <script>
      let myvariable = "Hello world!";

      document.getElementById("example").innerHTML = myvariable;
    </script>
    
  </body>
</html>

在浏览器中重新加载页面。

HTML with JavaScript displayed in browser

图片来自

^{（Seth Kenlon，CC BY-SA 4.0）}

正如您所看到的，<p> 标签按原样仍然包含字符串“Nothing here”，但是当它被渲染时，JavaScript 会更改它，使其包含“Hello world”代替。是的，JavaScript 具有重建（或只是帮助构建）网页的能力。

这个简单的脚本中的 JavaScript 做了两件事。首先，它创建一个名为 myvariable 的变量，并将字符串“Hello world!”放入其中。最后，它在当前文档（浏览器渲染的网页）中搜索 ID 为 example 的任何 HTML 元素。当它找到 example 时，它使用 innerHTML 函数将 HTML 元素的内容替换为 myvariable 的内容。

当然，使用自定义变量不是必需的。用动态创建的东西填充 HTML 元素同样容易。例如，您可以填充一个时间戳

<html>
  <head>
    <title>JS</title>
  </head>
  <body>
    <p id="example">Date and time appears here.</p>

    <script>
      document.getElementById("example").innerHTML = Date();
    </script>
    
  </body>
</html>

重新加载页面以查看在页面渲染时生成的时间戳。多次重新加载以观看秒数递增。

JavaScript 语法

在编程中，语法指的是句子（或“行”）的编写规则。在 JavaScript 中，每行代码必须以分号 (;) 结尾，以便运行您的代码的 JavaScript 引擎了解何时停止读取。

单词（或“字符串”）必须用引号 (") 括起来，而数字（或“整数”）则不用。

几乎所有其他内容都是 JavaScript 语言的约定，例如变量、数组、条件语句、对象、函数等等。

在 JavaScript 中创建变量

变量是数据的容器。您可以将变量视为一个盒子，您可以在其中放置数据以与您的程序共享。在 JavaScript 中创建变量是通过两个关键字完成的，您根据打算如何使用变量来选择这两个关键字：let 和 var。 var 关键字表示一个旨在供您的整个程序使用的变量，而 let 创建用于特定目的的变量，通常在函数或循环内部。

JavaScript 的内置 typeof 函数可以帮助您识别变量包含的数据类型。使用第一个示例，您可以通过修改显示的文本来找出 myvariable 包含的数据类型

<string>
let myvariable = "Hello world!";
document.getElementById("example").innerHTML = typeof(myvariable);
</string>

这将在您的 Web 浏览器中呈现“string”，因为该变量包含“Hello world!”。在 myvariable 中存储不同类型的数据（例如整数）将导致不同的数据类型打印到您的示例网页。

在 JavaScript 中创建函数

编程中的函数是独立的、数据处理器。它们使编程模块化。正是因为函数的存在，程序员才能编写通用的库，例如，调整图像大小或跟踪时间流逝，供其他程序员（如您）在他们自己的代码中使用。

您可以通过为您的函数提供一个自定义名称，后跟用大括号括起来的任意数量的代码来创建函数。

这是一个简单的网页，其中包含一个调整大小的图像和一个按钮，该按钮分析图像并返回真实的图像尺寸。在此示例代码中，<button> HTML 元素使用内置的 JavaScript 函数 onclick 来检测用户交互，这将触发一个名为 get_size 的自定义函数

<html>
  <head>
    <title>Imager</title>
  </head>
  <body>

    <div>
      <button onclick="get_size(document.getElementById('myimg'))">
        Get image size
    </button>
    </div>
    
    <div>
      <img style="width: 15%" id="myimg" src="https://open-source.net.cn/penguin.png" />
    </div>
   
    <script>
      function get_size(i) {
        let w = i.naturalWidth;
        let h = i.naturalHeight;
        alert(w + " by " + h);
      }
    </script>
    
  </body>
</html>

保存文件并将其加载到您的 Web 浏览器中以尝试代码。

Custom get_size function returns image dimensions

图片来自

^{（Seth Kenlon，CC BY-SA 4.0）}

使用 JavaScript 的跨平台应用程序

您可以从代码示例中看到 JavaScript 和 HTML 如何紧密协作以创建有凝聚力的用户体验。这是 JavaScript 的强大优势之一。当您用 JavaScript 编写代码时，无论平台如何，您都继承了现代计算中最常见的用户界面之一：Web 浏览器。您的代码本质上是跨平台的，因此您的应用程序（无论是简单的图像尺寸分析器还是复杂的图像编辑器、视频游戏或您想到的任何其他东西）都可以被每个拥有 Web 浏览器（或桌面，如果您交付 Electron 应用程序）的人使用。

学习 JavaScript 既简单又有趣。有很多网站提供教程。还有超过一百万个 JavaScript 库可以帮助您与设备、外围设备、物联网、服务器、文件系统以及更多内容进行交互。并且在您学习时，请将我们的 JavaScript 速查表 放在手边，以便您记住语法和结构的精细细节。

接下来阅读什么