JavaScript_输出

最新推荐文章于 2021-06-15 15:55:10 发布

dzkqstranger

最新推荐文章于 2021-06-15 15:55:10 发布

阅读量288

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/dzkqstranger/article/details/74737275

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

JavaScript通过以下方法显示数据：
- 使用 window.alert() 弹出警告框。
- 使用 document.write() 方法将内容写到 HTML 文档中。
- 使用 innerHTML 写入到 HTML 元素。
- 使用 console.log() 写入到浏览器的控制台。

下面简单介绍使用方法：
- 使用 window.alert() 弹出警告框

<!DOCTYPE html>

<html>
    <head>
        <meta charset = "utf-8">
        <title>My Javascript 01</title>
    </head>

    <body>
        <h1>My First JavaScript Program</h1>
        <p>This is a paragraph!</p>
        <script>
            window.alert("Welcom!^-^")
        </script>
    </body>
</html>

运行效果：

- 使用 document.write() 方法将内容写到 HTML 文档中

<!DOCTYPE html>

<html>
    <head>
        <meta charset = "utf-8">
        <title>My Javascript 01</title>
    </head>

    <body>
        <h1>My First JavaScript Program</h1>
        <p>This is a paragraph!</p>     
        <script>
            document.write(Date())
        </script>
    </body>
</html>

运行效果：

注意：请使用 document.write() 仅仅向文档输出写内容。
如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。具体例子如下

<!DOCTYPE html>

<html>
    <head>
        <meta charset = "utf-8">
        <title>My Javascript</title>
        <script>
            function displayDate()
            {
                document.getElementById("demo").innerHTML = Date() ;
            }
        </script>
    </head>

    <body>
        <h1>我的第一个JavaScript程序</h1>
        <p id = "demo">This is a paragraph!</p>

        <button type = "button" onclick = "displayDate()">显示日期</button>
    </body>
</html>

运行效果：
运行效果-1
点击显示日期之后，原内容被覆盖：
运行效果-2

使用 innerHTML 写入到 HTML 元素

<!DOCTYPE html>

<html>
    <head>
        <meta charset = "utf-8">
        <title>My Javascript 01</title>
    </head>

    <body>
        <h1>My First JavaScript Program</h1>
        <p id = "demo">This is a paragraph!</p>

        <script>
            document.getElementById("demo").innerHTML = "Welcome to the new world!!" ;
        </script>
    </body>
</html>

运行效果：

- 使用 console.log() 写入到浏览器的控制台
如果浏览器支持调试，你可以使用 console.log() 方法在浏览器中显示 JavaScript 值。浏览器中使用 F12 来启用调试模式，在调试窗口中点击 “控制台” 菜单。

<!DOCTYPE html>

<html>
    <head>
        <meta charset = "utf-8">
        <title>My Javascript 01</title>
    </head>

    <body>
        <h1>My First JavaScript Program</h1>
        <p>This is a paragraph!</p>

        <p>浏览器中(Chrome, IE, Firefox) 使用 F12 来启用调试模式， 在调试窗口中点击 "Console" 菜单。</p>
        <script>
            a = 5;
            b = 6;
            c = a + b;
            console.log(c);
        </script>
    </body>
</html>

运行效果

PS：
HTML 中的脚本必须位于<script> 与 </script> 标签之间。
脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。
习惯上将函数放在<head> 中或者 <body> 的末尾，这样不会打乱代码的可读性

dzkqstranger

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript_输出

JavaScript通过以下方法显示数据： - 使用 window.alert() 弹出警告框。 - 使用 document.write() 方法将内容写到 HTML 文档中。 - 使用 innerHTML 写入到 HTML 元素。 - 使用 console.log() 写入到浏览器的控制台。下面简单介绍使用方法： - 使用 window.alert() 弹出警告框<!DOCTYPE h
复制链接

扫一扫

专栏目录