Dynamically Modifying and Displaying Data on Web Pages - JavaScript

12002

1. Introduction to This Lesson

In this lesson, you will learn how to use JavaScript to achieve dynamic effects on web pages.

In the previous lesson, you learned how to create a simple HTML page that displays the phrase "Hello World." This page is static.

This means that every time you open this page, you see the same content. If you want to display a different phrase, you can only modify the HTML file.

In reality, we often see web pages dynamically displaying different content, such as showing the current time, displaying the user's name, and so on. This is not achieved by directly modifying the text in the HTML file, but rather by using the JavaScript language.

JavaScript is a powerful programming language that can be used in conjunction with HTML and CSS to dynamically display different data based on user actions or change the appearance of the page to achieve the desired effect.

The key concepts of this lesson include:

JavaScript language
Variables and functions
Templates, scripts, and data rendering

You will learn these concepts through hands-on exercises and reading documentation.

2. The Simplest JavaScript: Alert Box

The simplest dynamic effect is to display an alert box on the page.

On your computer, create an HTML file named alert.html and paste the following code into this file:

<body>
  <button onclick="alert('I am an alert box!')">Click me</button>
</body>

Save the file and open it in a browser. Click the "Click me" button, and you will see the following page:

In the above code:

alert() is the function in JavaScript used to display an alert box. As long as alert() is used, an alert box can be displayed on the page.
onclick is a feature of the <button> HTML tag, indicating the effect that should occur when you click with the left mouse button.

You can try modifying alert.html to see how the effects change:

Change "I am an alert box!" to "Hello World": you will see the text in the alert box change to "Hello World."
Copy the entire second line, paste it into the third line, and change the second "Click me" to "Click me 2": you will see that clicking "Click me 2" also displays the same alert box as the first button.
Change onclick to onclick2: you will see that clicking the button now does not display the alert box.
Change alert to alert2: you will see that clicking the button now does not display the alert box.

Summary:

onclick is the feature in HTML that determines the effect of clicking the left mouse button.
alert is the function in JavaScript used to display an alert box.
Modifying the content inside the parentheses of alert() allows the alert box to display. However, the displayed content is determined by what is inside the parentheses of alert().
Changing onclick and alert will cause the alert box not to display. This indicates that we cannot arbitrarily change the functions defined in HTML and JavaScript.

If you have difficulty writing HTML files on your own computer, you can use this hands-on exercise on the Runoob tutorial.

3. Basic Concepts of JavaScript

JavaScript is a scripting language used to determine the dynamic effects of web pages.

When learning JavaScript, the most important thing is to understand two concepts: variables and functions. The alert() in the above example is actually a function in JavaScript that displays an alert box.

We can understand variables and functions through the following code:

<body>
  <button onclick="myFunction()">Click me</button>
  <script>
    var x = "I am an alert box!";
    function myFunction()
    {
      alert(x);
    }
  </script>
</body>

On your computer, save the above code as an HTML file named variables_and_functions.html, and then open it in a browser. Click "Click me," and you will see the following effect:

This page also displays an alert box: "I am an alert box!"

Compared to the example in section 2, in the above code, we can see:

The part enclosed by the <script></script> tags is JavaScript code.
The onclick in the HTML code has been changed to myFunction().
myFunction() serves the same purpose as alert() in the example from section 2: to display an alert box.
The content displayed in the alert box is determined by var x = "I am an alert box!".

In the above code, x, which determines the content of the alert box, is a variable. The function myFunction() that displays the alert box is a function.

Variable: A "container" used to store information. When you see var, it indicates that the word following it is a variable.
Function: Specifies a series of operations on variables or other data to achieve the desired effect on the page. When you see function, it indicates that the code following it is a function.

The value of a variable can be modified at any time. For example, the following code:

<body>
  <button onclick="myFunction()">Click me</button>
  <script>
    var x = "I am an alert box!";
    function myFunction()
    {
      x = "Hello World!";
      alert(x);
    }
  </script>
</body>

The difference between this code and the previous one is that an additional step has been added in the function myFunction: x = "Hello World!";.

Try saving this code and opening it in a browser. When you click the "Click me" button, you will see the text in the alert box change to "Hello World!"

By using JavaScript's variables and functions, we can dynamically change the content and appearance of HTML pages. Read the Introduction to JavaScript on the Runoob tutorial to learn more about how to use JavaScript.

4. The Principle of Displaying Dynamic Data on Web Pages: Templates, Scripts, and Rendering

Let's look at the following code:

<body>
  <p id="demo">
    JavaScript can change the content of this paragraph.
  </p>
  <button type="button" onclick="myFunction()">Click me</button>

  <script>
    var y = "Hello World!";
    function myFunction()
    {
      var x=document.getElementById("demo");  // Find the element
      x.innerHTML=y;    // Change the content
    }
  </script>
</body>

Save this code as an HTML file named templates_and_scripts.html, and then open it in a browser. You will see a page like this:

Click the "Click me" button, and you will see the paragraph content on the page change to "Hello World!":

The structure of the above code can be divided into two parts:

HTML code, including the paragraph represented by the <p></p> tags and the button represented by the <button></button> tags.
JavaScript code, mainly including the variable y and the function myFunction().

These two parts of code correspond to the template and script of the page:

Template: The structure, style, and layout of the content on the web page, determining the basic framework of the web page. HTML and CSS are the template languages of web pages.
Script: A series of predefined operational instructions that tell the web page how to dynamically change based on user actions. JavaScript is such a script.

In simple terms, the template determines the appearance of the page, while the script controls the dynamic effects of the page.

In practical applications, the data on web pages often changes dynamically. For example, different users logging into the same system will see different personal information, such as username, user ID, registration time, etc. Content like personal information is the data of the web page.

On the same web page, the template and script generally remain unchanged, but the data usually changes. This changing data is called dynamic data.

The principle of displaying dynamic data on web pages is to fill the dynamic data into specified positions in the template to display the final web page content. This process is called rendering.

Templates, scripts, and rendering are the most important concepts in the principle of displaying dynamic data on web pages.

5. Reading Documentation to Learn JavaScript

There are many tutorials and documents available online for learning JavaScript, and the resources are abundant. One of the most commonly used tutorials is the JavaScript tutorial on Runoob.

When reading the JavaScript tutorial on Runoob, pay attention to the following content:

Quickly browse the titles in the left sidebar to establish a preliminary impression.
Select a few titles, click to read the documentation, and try to understand the concepts. You can modify and experiment with the "Try it out" examples. This will help you understand the content of the documentation.

After completing this lesson, the key content you need to focus on and understand includes:

JavaScript usage
JavaScript variables
JavaScript functions
JavaScript events

## 1. Introduction to This Lesson  
In this lesson, you will learn how to use JavaScript to achieve dynamic effects on web pages.

In the previous lesson, you learned how to create a simple HTML page that displays the phrase "Hello World." This page is static.

This means that every time you open this page, you see the same content. If you want to display a different phrase, you can only modify the HTML file.

In reality, we often see web pages dynamically displaying different content, such as showing the current time, displaying the user's name, and so on. This is not achieved by directly modifying the text in the HTML file, but rather by using the JavaScript language.

JavaScript is a powerful programming language that can be used in conjunction with HTML and CSS to dynamically display different data based on user actions or change the appearance of the page to achieve the desired effect.

The key concepts of this lesson include:  
- JavaScript language  
- Variables and functions  
- Templates, scripts, and data rendering

You will learn these concepts through hands-on exercises and reading documentation.

## 2. The Simplest JavaScript: Alert Box

The simplest dynamic effect is to display an alert box on the page.

On your computer, create an HTML file named `alert.html` and paste the following code into this file:

```
<body>
  <button onclick="alert('I am an alert box!')">Click me</button>
</body>
```

Save the file and open it in a browser. Click the "Click me" button, and you will see the following page:

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

In the above code:

- `alert()` is the function in JavaScript used to display an alert box. As long as `alert()` is used, an alert box can be displayed on the page.  
- `onclick` is a feature of the `<button>` HTML tag, indicating the effect that should occur when you click with the left mouse button.

You can try modifying `alert.html` to see how the effects change:

- Change "I am an alert box!" to "Hello World": you will see the text in the alert box change to "Hello World."  
- Copy the entire second line, paste it into the third line, and change the second "Click me" to "Click me 2": you will see that clicking "Click me 2" also displays the same alert box as the first button.  
- Change `onclick` to `onclick2`: you will see that clicking the button now does not display the alert box.  
- Change `alert` to `alert2`: you will see that clicking the button now does not display the alert box.

Summary:  
- `onclick` is the feature in HTML that determines the effect of clicking the left mouse button.  
- `alert` is the function in JavaScript used to display an alert box.  
- Modifying the content inside the parentheses of `alert()` allows the alert box to display. However, the displayed content is determined by what is inside the parentheses of `alert()`.  
- Changing `onclick` and `alert` will cause the alert box not to display. This indicates that we cannot arbitrarily change the functions defined in HTML and JavaScript.

If you have difficulty writing HTML files on your own computer, you can use this [hands-on exercise](https://www.runoob.com/try/try.php?filename=tryjs_intro_alert "hands-on exercise") on the Runoob tutorial.

## 3. Basic Concepts of JavaScript

JavaScript is a scripting language used to determine the dynamic effects of web pages.

When learning JavaScript, the most important thing is to understand two concepts: variables and functions. The `alert()` in the above example is actually a function in JavaScript that displays an alert box.

We can understand variables and functions through the following code:

```
<body>
  <button onclick="myFunction()">Click me</button>
  <script>
    var x = "I am an alert box!";
    function myFunction()
    {
      alert(x);
    }
  </script>
</body>
```

On your computer, save the above code as an HTML file named `variables_and_functions.html`, and then open it in a browser. Click "Click me," and you will see the following effect:

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

This page also displays an alert box: "I am an alert box!"

Compared to the example in section 2, in the above code, we can see:

- The part enclosed by the `<script></script>` tags is JavaScript code.  
- The `onclick` in the HTML code has been changed to `myFunction()`.  
- `myFunction()` serves the same purpose as `alert()` in the example from section 2: to display an alert box.  
- The content displayed in the alert box is determined by `var x = "I am an alert box!"`.

In the above code, `x`, which determines the content of the alert box, is a variable. The function `myFunction()` that displays the alert box is a function.

- **Variable**: A "container" used to store information. When you see `var`, it indicates that the word following it is a variable.  
- **Function**: Specifies a series of operations on variables or other data to achieve the desired effect on the page. When you see `function`, it indicates that the code following it is a function.

The value of a variable can be modified at any time. For example, the following code:

```
<body>
  <button onclick="myFunction()">Click me</button>
  <script>
    var x = "I am an alert box!";
    function myFunction()
    {
      x = "Hello World!";
      alert(x);
    }
  </script>
</body>
```

The difference between this code and the previous one is that an additional step has been added in the function `myFunction`: `x = "Hello World!";`.

Try saving this code and opening it in a browser. When you click the "Click me" button, you will see the text in the alert box change to "Hello World!"

By using JavaScript's variables and functions, we can dynamically change the content and appearance of HTML pages. Read the [Introduction to JavaScript](https://www.runoob.com/js/js-intro.html "Introduction to JavaScript") on the Runoob tutorial to learn more about how to use JavaScript.

## 4. The Principle of Displaying Dynamic Data on Web Pages: Templates, Scripts, and Rendering

Let's look at the following code:  
```
<body>
  <p id="demo">
    JavaScript can change the content of this paragraph.
  </p>
  <button type="button" onclick="myFunction()">Click me</button>

Save this code as an HTML file named `templates_and_scripts.html`, and then open it in a browser. You will see a page like this:

![002-03-templates_and_scripts-before_click.png](/__appId__/upload/articleMaterial/12051/002-03-templates_and_scripts-before_click.png)

Click the "Click me" button, and you will see the paragraph content on the page change to "Hello World!":

![002-03-templates_and_scripts-after_click.png](/__appId__/upload/articleMaterial/12051/002-03-templates_and_scripts-after_click.png)

The structure of the above code can be divided into two parts:

- HTML code, including the paragraph represented by the `<p></p>` tags and the button represented by the `<button></button>` tags.  
- JavaScript code, mainly including the variable `y` and the function `myFunction()`.

These two parts of code correspond to the **template** and **script** of the page:

- **Template**: The structure, style, and layout of the content on the web page, determining the basic framework of the web page. HTML and CSS are the template languages of web pages.  
- **Script**: A series of predefined operational instructions that tell the web page how to dynamically change based on user actions. JavaScript is such a script.

In simple terms, the template determines the appearance of the page, while the script controls the dynamic effects of the page.

In practical applications, the data on web pages often changes dynamically. For example, different users logging into the same system will see different personal information, such as username, user ID, registration time, etc. Content like personal information is the data of the web page.

On the same web page, the template and script generally remain unchanged, but the data usually changes. This changing data is called dynamic data.

The principle of displaying dynamic data on web pages is to fill the dynamic data into specified positions in the template to display the final web page content. This process is called **rendering**.

Templates, scripts, and rendering are the most important concepts in the principle of displaying dynamic data on web pages.

## 5. Reading Documentation to Learn JavaScript

There are many tutorials and documents available online for learning JavaScript, and the resources are abundant. One of the most commonly used tutorials is the [JavaScript tutorial](https://www.runoob.com/js/js-tutorial.html) on Runoob.

When reading the JavaScript tutorial on Runoob, pay attention to the following content:

- Quickly browse the titles in the left sidebar to establish a preliminary impression.  
- Select a few titles, click to read the documentation, and try to understand the concepts. You can modify and experiment with the "Try it out" examples. This will help you understand the content of the documentation.

After completing this lesson, the key content you need to focus on and understand includes:

- JavaScript usage  
- JavaScript variables  
- JavaScript functions  
- JavaScript events