在网页上动态修改与显示数据 - Javascript

12002

1. 本课介绍

在本课中，你将会学习使用JavaScript实现网页的动态效果。

在上一课里，你学会了创建一个简单的HTML页面，显示"Hello World"这句话。这个页面是静止的。

也就是说，每次你打开这个页面，看到的都是同样的内容。如果你想显示另一句话，就只能修改HTML文件。

实际上，我们常常看到网页会动态的显示不同的内容，例如：显示当前的时间、显示用户的名字等等。这不是通过直接修改HTML文件中的文字做到的，而是通过使用Javascript语言做到的。

JavaScript 是一种功能强大的编程语言，它可以与 HTML 和 CSS 配合使用，根据用户的操作，动态的显示不同的数据，或者让页面的长相发生变化，达到用户想要的效果。

本课的重要概念包括：

Javascript语言
变量与函数
模板、脚本与数据渲染

你会通过动手练习和阅读文档，来学习这些概念。

2. 最简单的Javascript：弹窗

最简单的动态效果，就是在页面显示一个弹窗。

在你的电脑上，创建一个HTML文件弹窗.html，把以下这段代码，粘贴进这个文件里：

<body>
  <button onclick="alert('我是一个弹窗！')">点我</button>
</body>

保存文件，然后在浏览器里打开。点击“点我”按钮，你会看到以下的页面：

002-03-弹窗.png

在上面这段代码当中：

alert()就是Javascript中用来显示弹窗的功能。只要使用了alert()，就可以在页面上显示一个弹窗了。
onclick 是<button>这个HTML标签的功能，表示当你用鼠标左键点击的时候应该有的效果。

你可以尝试修改弹窗.html，看看效果会有什么变化：

将“我是一个弹窗！”改成“Hello World”：你会看到弹窗的文字变成了“Hello World”
复制整个第2行，把它粘贴到第3行，然后把第2个“点我”改成“点我2”：你会看到点击“点我2”也能显示跟第一个按钮同样的弹窗
将onclick改成onclick2：你会看到现在点击按钮不会显示弹窗了。
将alert改成alert2：你会看到现在点击按钮不会显示弹窗了。

总结：

onclick是HTML用来决定点击鼠标左键应该有的效果的功能
alert是Javascript中用来显示弹窗的功能
修改alert()括号中的内容，弹窗可以显示。但显示的内容由alert()括号里面的内容决定
修改onclick和alert就会导致弹窗显示不出来。这说明我们不能随意改动HTML和Javascript中规定好的功能。

如果你在自己的电脑上编写HTML文件有困难，可以使用菜鸟教程上的这个动手练习。

3. Javascript的基本概念

Javascript是一种脚本语言，用来决定网页的动态效果。

学习Javascript，最重要的是理解两个概念：变量和函数。上面例子中的alert()实际上就是Javascript里的一个函数，功能就是显示弹窗。

我们可以通过下面的代码来认识变量和函数：

<body>
  <button onclick="myFunction()">点我</button>
  <script>
    var x = "我是一个弹窗！";
    function myFunction()
    {
      alert(x);
    }
  </script>
</body>

在你的电脑上，将上面这段代码保存为一个HTML文件 变量与函数.html，然后在浏览器里打开。点击“点我”，你会看到以下的效果：

002-03-变量与函数.png

这个页面同样显示了一个弹窗：“我是一个弹窗！”。

与第2节中的例子相比，在上面的代码中，我们可以看到：

由 <script></script> 标签包住的部分就是Javascript代码。
HTML代码中的 onclick 后面换成了 myfunction()。
myfunction() 起到了跟第2节例子中的 alert() 一样的作用：显示弹窗。
弹窗中显示的内容是由 var x = "我是一个弹窗！" 决定的。

在上面的代码中，用来决定弹窗内容的x，是一个变量。而用来显示弹窗的myfunction()则是一个函数。

变量，是用于存储信息的"容器"。当你看到var的时候，就表示它后面的单词是一个变量。
函数，则规定了对变量或其他数据的一系列操作，来实现页面上应有的效果。当你看到function的时候，就表示它后面的代码是一个函数。

变量的值可以随时修改。例如下面的代码：

<body>
  <button onclick="myFunction()">点我</button>
  <script>
    var x = "我是一个弹窗！";
    function myFunction()
    {
      x = "Hello World!";
      alert(x);
    }
  </script>
</body>

这段代码与上一段代码的区别是在函数 myFunction 中增加了一步：x = "Hello World!";。

尝试保存这段代码并在浏览器里打开。当你点击“点我”按钮，你会看到弹窗的文字变成了“Hello World!”

使用Javascript的变量和函数，我们就可以动态的来改变HTML页面的内容和长相了。阅读菜鸟教程上的 Javascript简介，你可以了解更多Javascript的用法。

4. 网页显示动态数据的原理：模板、脚本与渲染

我们来看下面这段代码：

<body>
  <p id="demo">
    JavaScript 能改变这段话的内容。
  </p>
  <button type="button" onclick="myFunction()">点我</button>
  <script>
    var y = "Hello World!";
    function myFunction()
    {
      var x=document.getElementById("demo");  // 找到元素
      x.innerHTML=y;    // 改变内容
    }
  </script>
</body>

将这段代码保存为 HTML 文件 模板与脚本.html，然后在浏览器里打开。你会看到这样的页面：

002-03-模板与脚本-点击前.png

点击“点我”按钮，你会看到页面上的段落内容变成了“Hello World!”：

002-03-模板与脚本-点击后.png

上面的代码的结构可以分为两部分：

HTML代码，包括 <p></p>标签表示的段落和 <button></button> 标签表示的按钮。
Javascript代码，主要包括变量 y 和函数 myFunction()。

这两部分代码，分别对应着页面的模板和脚本：

模板：是网页上内容的结构、样式和布局，决定了网页的基本框架。HTML和CSS就是网页的模板语言。
脚本：是一系列规定好的操作指令，告诉网页应该如何根据用户操作进行动态变化。Javascript就是这样一种脚本。

简单来说，模板决定页面的长相，脚本控制页面的动态效果。

实际应用中，网页上的数据往往是会动态变化的。例如：不同的用户登录同样的系统后，会看到不同的个人信息，比如用户名、用户ID、注册时间等等。类似个人信息等内容，就是网页的数据。

在同一个网页上，模板和脚本基本不变，但数据通常会发生改变。这种会改变的数据，就是动态数据。

网页显示动态数据的原理，就是将动态数据填入到模板的指定位置，来显示出最终的网页内容。这个过程就叫做渲染。

模板、脚本和渲染就是网页显示动态数据的原理中最重要的概念。

5. 阅读文档，学习Javascript

网上有很多学习Javascript的教程和文档，资源非常丰富。我们最常用的一个教程是菜鸟教程上的 Javascript教程。

阅读菜鸟教程上的Javascript教程，留意以下的内容：

快速浏览左边栏的标题，建立初步的印象
选几个标题，点开阅读一下文档，尝试理解概念。可以通过"尝试一下"的的实例，改一改，试一试。这会帮助你理解文档的内容。

学完这一课，你最需要重点阅读并理解的内容包括：

Javascript 用法
Javascript 变量
Javascript 函数
Javascript 事件

## 1. 本课介绍
在本课中， 你将会学习使用JavaScript实现网页的动态效果。

在上一课里，你学会了创建一个简单的HTML页面，显示"Hello World"这句话。这个页面是静止的。

也就是说，每次你打开这个页面，看到的都是同样的内容。如果你想显示另一句话，就只能修改HTML文件。

实际上，我们常常看到网页会动态的显示不同的内容，例如：显示当前的时间、显示用户的名字等等。这不是通过直接修改HTML文件中的文字做到的，而是通过使用Javascript语言做到的。

JavaScript 是一种功能强大的编程语言，它可以与 HTML 和 CSS 配合使用，根据用户的操作，动态的显示不同的数据，或者让页面的长相发生变化，达到用户想要的效果。

本课的重要概念包括：
- Javascript语言
- 变量与函数
- 模板、脚本与数据渲染

你会通过动手练习和阅读文档，来学习这些概念。

## 2. 最简单的Javascript：弹窗

最简单的动态效果，就是在页面显示一个弹窗。

在你的电脑上，创建一个HTML文件`弹窗.html`，把以下这段代码，粘贴进这个文件里：

```
<body>
  <button onclick="alert('我是一个弹窗！')">点我</button>
</body>
```

保存文件，然后在浏览器里打开。点击“点我”按钮，你会看到以下的页面：

![002-03-弹窗.png](/__appId__/upload/articleMaterial/12051/002-03-弹窗.png)

在上面这段代码当中：

- `alert()`就是Javascript中用来显示弹窗的功能。只要使用了`alert()`，就可以在页面上显示一个弹窗了。
- `onclick` 是`<button>`这个HTML标签的功能，表示当你用鼠标左键点击的时候应该有的效果。

你可以尝试修改`弹窗.html`，看看效果会有什么变化：

- 将“我是一个弹窗！”改成“Hello World”：你会看到弹窗的文字变成了“Hello World”
- 复制整个第2行，把它粘贴到第3行，然后把第2个“点我”改成“点我2”：你会看到点击“点我2”也能显示跟第一个按钮同样的弹窗
- 将`onclick`改成`onclick2`：你会看到现在点击按钮不会显示弹窗了。
- 将`alert`改成`alert2`：你会看到现在点击按钮不会显示弹窗了。

总结：
- `onclick`是HTML用来决定点击鼠标左键应该有的效果的功能
- `alert`是Javascript中用来显示弹窗的功能
- 修改`alert()`括号中的内容，弹窗可以显示。但显示的内容由`alert()`括号里面的内容决定
- 修改`onclick`和`alert`就会导致弹窗显示不出来。这说明我们不能随意改动HTML和Javascript中规定好的功能。

如果你在自己的电脑上编写HTML文件有困难，可以使用菜鸟教程上的这个[动手练习](https://www.runoob.com/try/try.php?filename=tryjs_intro_alert "动手练习")。

## 3. Javascript的基本概念

Javascript是一种脚本语言，用来决定网页的动态效果。

学习Javascript，最重要的是理解两个概念：变量和函数。上面例子中的`alert()`实际上就是Javascript里的一个函数，功能就是显示弹窗。

我们可以通过下面的代码来认识变量和函数：

```
<body>
  <button onclick="myFunction()">点我</button>
  <script>
    var x = "我是一个弹窗！";
    function myFunction()
    {
      alert(x);
    }
  </script>
</body>
```

在你的电脑上，将上面这段代码保存为一个HTML文件 `变量与函数.html`，然后在浏览器里打开。点击“点我”，你会看到以下的效果：

![002-03-变量与函数.png](/__appId__/upload/articleMaterial/12051/002-03-变量与函数.png)

这个页面同样显示了一个弹窗：“我是一个弹窗！”。

与第2节中的例子相比，在上面的代码中，我们可以看到：

- 由 `<script></script>` 标签包住的部分就是Javascript代码。
- HTML代码中的 `onclick` 后面换成了 `myfunction()`。
- `myfunction()` 起到了跟第2节例子中的 `alert()` 一样的作用：显示弹窗。
- 弹窗中显示的内容是由 `var x = "我是一个弹窗！"` 决定的。

在上面的代码中，用来决定弹窗内容的`x`，是一个变量。而用来显示弹窗的`myfunction()`则是一个函数。

- **变量**，是用于存储信息的"容器"。当你看到`var`的时候，就表示它后面的单词是一个变量。
- **函数**，则规定了对变量或其他数据的一系列操作，来实现页面上应有的效果。当你看到`function`的时候，就表示它后面的代码是一个函数。

变量的值可以随时修改。例如下面的代码：

```
<body>
  <button onclick="myFunction()">点我</button>
  <script>
    var x = "我是一个弹窗！";
    function myFunction()
    {
      x = "Hello World!";
      alert(x);
    }
  </script>
</body>
```

这段代码与上一段代码的区别是在函数 `myFunction` 中增加了一步：`x = "Hello World!";`。

尝试保存这段代码并在浏览器里打开。当你点击“点我”按钮，你会看到弹窗的文字变成了“Hello World!”

使用Javascript的变量和函数，我们就可以动态的来改变HTML页面的内容和长相了。阅读菜鸟教程上的 [Javascript简介](https://www.runoob.com/js/js-intro.html "Javascript简介")，你可以了解更多Javascript的用法。

## 4. 网页显示动态数据的原理：模板、脚本与渲染

我们来看下面这段代码：
```
<body>
  <p id="demo">
    JavaScript 能改变这段话的内容。
  </p>
  <button type="button" onclick="myFunction()">点我</button>

将这段代码保存为 HTML 文件 `模板与脚本.html`，然后在浏览器里打开。你会看到这样的页面：

![002-03-模板与脚本-点击前.png](/__appId__/upload/articleMaterial/12051/002-03-模板与脚本-点击前.png)

点击“点我”按钮，你会看到页面上的段落内容变成了“Hello World!”：

![002-03-模板与脚本-点击后.png](/__appId__/upload/articleMaterial/12051/002-03-模板与脚本-点击后.png)

上面的代码的结构可以分为两部分：

- HTML代码，包括 `<p></p>`标签表示的段落 和 `<button></button>` 标签表示的按钮。
- Javascript代码，主要包括变量 `y` 和函数 `myFunction()`。

这两部分代码，分别对应着页面的**模板**和**脚本**：

- **模板**：是网页上内容的结构、样式和布局，决定了网页的基本框架。HTML和CSS就是网页的模板语言。
- **脚本**：是一系列规定好的操作指令，告诉网页应该如何根据用户操作进行动态变化。Javascript就是这样一种脚本。

简单来说，模板决定页面的长相，脚本控制页面的动态效果。

实际应用中，网页上的数据往往是会动态变化的。例如：不同的用户登录同样的系统后，会看到不同的个人信息，比如用户名、用户ID、注册时间等等。类似个人信息等内容，就是网页的数据。

在同一个网页上，模板和脚本基本不变，但数据通常会发生改变。这种会改变的数据，就是动态数据。

网页显示动态数据的原理，就是将动态数据填入到模板的指定位置，来显示出最终的网页内容。这个过程就叫做**渲染**。

模板、脚本和渲染就是网页显示动态数据的原理中最重要的概念。

## 5. 阅读文档，学习Javascript

网上有很多学习Javascript的教程和文档，资源非常丰富。我们最常用的一个教程是菜鸟教程上的 [Javascript教程]( https://www.runoob.com/js/js-tutorial.html) 。

阅读菜鸟教程上的Javascript教程，留意以下的内容：

- 快速浏览左边栏的标题，建立初步的印象
- 选几个标题，点开阅读一下文档，尝试理解概念。可以通过"尝试一下"的的实例，改一改，试一试。这会帮助你理解文档的内容。

学完这一课，你最需要重点阅读并理解的内容包括：

- Javascript 用法
- Javascript 变量
- Javascript 函数
- Javascript 事件