Home>Web design tutorial>Javascript tutorial

Example code details the various ways of outputting data in JavaScript

Author：Eve Cole Update Time：2022-08-05 09:45:26
This article brings you relevant knowledge about JavaScript. In JavaScript, unlike languages ​​such as Java, it does not have any printing or output methods. In js, four methods are used to output data. This article uses example code to Please introduce it in detail, I hope it will be helpful to everyone.

Preface

In JavaScript, unlike languages ​​such as Java, it does not have any printing or output methods. The following four methods are usually used to output data.

  • Use window.alert() to pop up a warning box.
    • Use document.write() to write the content to HTML.
  • Use innerHTML to write to HTML elements
  • document.write() the document.
  • Use console.log() to write to the browser's console.

Use them below. Let's show an example.

window.alert()

creates a new HTML file, and then uses VSCode to write the following code.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>window.alert()</title>
    </head>
    <body>
        <p>Pop-up window display</p>
        <script type="text/javascript">
            window.alert("This is a pop-up test!");
        </script>

    </body>
</html>

Then open the above file with a browser. When opening, the following pop-up window will be displayed. After clicking OK, the pop-up window will close and the content will be displayed on the web page.

document.write()

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>document.write()</title>
    </head>
    <body>
        <p>Write HTML document</p>
        <script type="text/javascript">
            document.write(Date());
        </script>

    </body>
</html>

After creating a new HTML file and writing the above content, the browser is opened and the page will display the following content. You can see that writing the current time using document.write() is successful. However, it should be noted that if document.write() is loaded at the same time as other content and before the content is loaded, it can be displayed together with other content. However, if document.write() is executed after the page content has been loaded, all the previously loaded content will be overwritten by the written content.

Display simultaneously

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>document.write()</title>
    </head>
    <body>
        <p>Write HTML document</p>
        <button onclick="showDate()">Show time</button>
        <script type="text/javascript">
            function showDate() {
                document.write(Date());
            }
        </script>
    </body>
</html>

The following is a comparison before and after executing document.write() after the page is loaded, indicating that calling document.write() after the page is loaded will overwrite the previous page content.

before and after

image-20220228153609330

innerHTML

JavaScript If you want to access a certain HTML element, you can use the document.getElementById(id) method, and then you can use innerHTML to get or insert the element content.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>innerHTML</title>
    </head>
    <body>
        <p id="inner">Manipulate HTML elements</p>
        <button onclick="changeContext()">Click to modify the above content</button>

        <script type="text/javascript">
            function changeContext() {
                document.getElementById("inner").innerHTML = "Modified content";
            }
        </script>

    </body>
</html>

Before modification After modification

console.log()

To use console.log() method, our browser needs to support debugging. Chrome is generally recommended. Then use the F12 shortcut key to open debugging mode and switch to the Console menu in the debugging window. Because I am using Edge here, the console is displayed. This choice of browser is mainly based on your own preferences, but Chrome is generally recommended.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>console.log</title>
    </head>
    <body>
        <p>View in browser debug mode</p>
        <script type="text/javascript">
            var num1 = 11;
            var num2 = 10;
            console.log(num1 + num2);
        </script>
    </body>
</html>

In summary

, the above is about the output in JavaScript. Although there is no System.out.println() method for printing and output like Java, the above four methods can basically meet the needs of daily development. .
Related Articles