JavaScript_输出

来源：互联网发布：linux镜像站编辑：程序博客网时间：2024/05/03 12:53

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> 的末尾，这样不会打乱代码的可读性

阅读全文

0 0