JavaScript 中的输出数据多种方式

前言

在 JavaScript 中，不像 Java 等语言，它没有任何打印或者输出方法的，通常使用如下 4 种方式来输出数据。

  • 使用 window.alert() 用于弹出警告框
  • 使用 document.write() 将内容写入到 HTML 文档中
  • 使用 innerHTML 写入到 HTML 元素
  • 使用 console.log() 写入到浏览器的控制台

以下分别使用它们来展示一个实例。

window.alert()

新建一个 HTML 文件，然后用 VSCode 写入如下代码。

<!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>弹窗显示</p>
        <script type="text/javascript">
            window.alert("这是一条弹窗测试！");
        </script>

    </body>
</html>

接着用浏览器打开上述文件，打开时就会显示如下弹窗，点击确定后弹窗关闭，然后在网页中显示内容。

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>写入 HTML 文档</p>
        <script type="text/javascript">
            document.write(Date());
        </script>

    </body>
</html>

新建 HTML 文件并写入上述内容后，浏览器打开，页面会显示如下内容，可以看到用 document.write() 写入当前时间是成功的。但是需要注意的是，如果 document.write() 是和其他内容同时在内容加载完之前加载，则可以和其他内容一起显示。但如果等页面内容已经完成加载后执行 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>写入 HTML 文档</p>
        <button onclick="showDate()">展示时间</button>
        <script type="text/javascript">
            function showDate() {
                document.write(Date());
            }
        </script>
    </body>
</html>

以下则是等页面加载完成之后，执行 document.write() 前后对比，说明等页面加载完成后调用 document.write() 将覆盖之前的页面内容。

前后

innerHTML

JavaScript 如果要访问某一个 HTML 元素，此时可以使用 document.getElementById(id) 方法，然后就可以利用 innerHTML 来获取或插入元素内容。

<!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">操纵 HTML 元素</p>
        <button onclick="changeContext()">点击修改上述内容</button>

        <script type="text/javascript">
            function changeContext() {
                document.getElementById("inner").innerHTML = "修改后的内容";
            }
        </script>

    </body>
</html>

修改前修改后

console.log()

要使用 console.log() 方法，需要我们的浏览器支持调试，一般推荐使用 Chrome。然后使用 F12 快捷键打开调试模式，在调试窗口中切换到 Console 菜单。我这里因为使用的是 Edge，所以显示的是控制台，这个主要根据自己的喜好进行浏览器的选择，但是一般更加推荐 Chrome。

<!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>浏览器调试模式查看</p>
        <script type="text/javascript">
            var num1 = 11;
            var num2 = 10;
            console.log(num1 + num2);
        </script>
    </body>
</html>

总结

以上就是关于 JavaScript 中输出的有关内容了，虽然不像 Java 那样有类似 System.out.println() 方法来进行打印和输出，但利用上述的 4 种方式，也能基本满足日常开发中的需求了。

到此这篇关于JavaScript 中的输出数据多种方式的文章就介绍到这了,更多相关JavaScript输出数据内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 基于js实现逐步显示文字输出代码实例

    今天清理chrome书签,突然就点到了一个关于 知乎五周年的网页,这帮程序员的脑子真有趣,就算是保存一年后再看也还是觉得好有趣,下边是一个截图图片描述 这个网页展示了一个类似ide接口的小窗口,文字逐步输入,并且还伴随一些有点炫的css动画,为个人生成专属数据.当然这个展示还包括了其他一些数据的传输啦,特殊效果(类似触发一个标签的js回调啦),css那个一堆波浪的动画啦等等一些有意思的,这些暂时不管,我们今天就来看看这个逐步显示的文字是怎么做到的,我首先想到的就是做一个简单的demo 由于没有读

  • JavaScript用document.write()输出换行的示例代码

    JavaScript用document.write()输出换行的示例代码

    当我们想用document.write()输出换行时,可能会第一时间想到加"\n",但是其实不能达到我们的想要效果,只会得到一个空格的效果. 正确的方法是使用:</br> 样例代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> // 使用 \n 换行 ---> 错误的方法 document.write(&quo

  • javaScript 实现重复输出给定的字符串的常用方法小结

    本文实例讲述了javaScript 实现重复输出给定的字符串的常用方法.分享给大家供大家参考,具体如下: 实现功能:重复输出字符串 (重要的事情说3遍)   重复一个指定的字符串 num次,如果num是一个负数则返回一个空字符串. 方法1:for循环重复输出 function repeat(str, num) { if(num > 0) { var repeatStr = ""; for (var i = 0; i < num; i++) { repeatStr += st

  • JavaScript输出斐波那契数列的实现方法

    题目 有这么一道题目需要我们来解答: 试输出斐波那契数列的前10项,即 1.1.2.3.5.8.13.21.34.55. 分析 有些人看到题目中出现了"斐波那契数列"这个概念后,可能脑袋就蒙圈了,其实大可不必! 对于这道题,可以不用理会这个陌生概念,我们只需要关心后面它给出的数字规律即可. 我们可以看到,规律总结起来就一句话:从第三位开始,后面每项的值等于前两项之和,用式子表示的话就是:an = an-1 + an-2(n ≥ 2) . 根据题目要求,其实就是要我们做两件事: 生成每一

  • JavaScript 中的输出数据多种方式

    JavaScript 中的输出数据多种方式

    前言 在 JavaScript 中,不像 Java 等语言,它没有任何打印或者输出方法的,通常使用如下 4 种方式来输出数据. 使用 window.alert() 用于弹出警告框 使用 document.write() 将内容写入到 HTML 文档中 使用 innerHTML 写入到 HTML 元素 使用 console.log() 写入到浏览器的控制台 以下分别使用它们来展示一个实例. window.alert() 新建一个 HTML 文件,然后用 VSCode 写入如下代码. <!DOCTY

  • Javascript中的几种继承方式对比分析

    开篇 从'严格'意义上说,javascript并不是一门真正的面向对象语言.这种说法原因一般都是觉得javascript作为一门弱类型语言与类似java或c#之类的强型语言的继承方式有很大的区别,因而默认它就是非主流的面向对象方式,甚至竟有很多书将其描述为'非完全面向对象'语言.其实个人觉得,什么方式并不重要,重要的是是否具有面向对象的思想,说javascript不是面向对象语言的,往往都可能没有深入研究过javascript的继承方式,故特撰此文以供交流. 为何需要利用javascript实现

  • 在JavaScript中使用JSON数据

    JSON 是 JavaScript 原生格式,这意味着 在 JavaScript 中处理 JSON 数据不需要任何特殊的 API 或工具包. JSON语法 JSON建构于两种结构: 对象--名称/值对的集合.不同的语言中,它被理解为对象,纪录,结构,字典,哈希表,有键列表(keyed list),或者关联数组.一个对象以"{"(左括号)开始,"}"(右括号)结束.每个"名称"后跟一个":"(冒号):"'名称/值' 对

  • 利用JS十分钟判断数组中存在元素的多种方式

    前言 在前端开发中,经常会遇到要判断数组中是否存在某个元素.其实判断的方式有很多种,我们一个一个来了解下. 我们先来定义一个数组: const arr = [ 13, false, 'abcd', undefined, 13, null, NaN, [1, 2], { a: 123 }, () => Date.now(), new Date('2021/03/04'), new RegExp('abc', 'ig'), Symbol('sym'), ]; 在这个数组中,我们包含了好几种类型:nu

  • 详解JavaScript 中 if / if...else...替换方式

    说说烂大街的if/if...else...,程序中用得最多的流程判断语句. 对着曾经满屏的if/if...else...,心想能不能搞点事情,折腾点浪花浪里呀浪. 对顶着"这个需求很简单,怎么实现我不管,明天上线"的程序猿,答案必须YES. "Write Less, Do More",学习进步的本质就是为了更有效率地偷懒. 废话说完,直接上方法汇总,让我们来一窥究竟: switch改写if // if 版本 var a = 1; if(a > 1 &&

  • 分享JavaScript 中的几种继承方式

    目录 一.原型链 1.1 原型链的问题 二.盗用构造函数 2.1 基本思想 2.2 可向父类构造函数传参 2.3 盗用构造函数的问题 三.组合继承(伪经典继承) 3.1 基本思想 3.2 组合继承的问题 四.原型式继承 4.1 基本思想 4.2 Object.create() (1)语法 (2)示例 (3)手动实现 五.寄生式继承 5.1 基本思想 5.2 寄生式继承 六.寄生式组合继承 6.1 基本思想 前言: 说到JavaScript中的继承,与之密切相关的就是原型链了,JavaScript

  • Javascript中匿名函数的多种调用方式总结

    Javascript中定义函数的方式有多种,函数直接量就是其中一种.如var fun = function(){},这里function如果不赋值给fun那么它就是一个匿名函数.好,看看匿名函数的如何被调用. 方式1,调用函数,得到返回值.强制运算符使函数调用执行 复制代码 代码如下: (function(x,y){     alert(x+y);     return x+y; }(3,4)); 方式2,调用函数,得到返回值.强制函数直接量执行再返回一个引用,引用再去调用执行 复制代码 代码如

  • JavaScript中判断整数的多种方法总结

    之前记录过JavaScript中判断为数字类型的多种方式,这篇看看如何判断为整数类型(Integer). JavaScript中不区分整数和浮点数,所有数字内部都采用64位浮点格式表示,和Java的double类型一样.但实际操作中比如数组索引.位操作则是基于32位整数. 方式一.使用取余运算符判断 任何整数都会被1整除,即余数是0.利用这个规则来判断是否是整数. 复制代码 代码如下: function isInteger(obj) {     return obj%1 === 0 } isIn

  • 实现JavaScript中继承的三种方式

    一.原型链继承 在原型链继承方面,JavaScript与java.c#等语言类似,仅允许单父类继承.prototype继承的基本方式如下: 复制代码 代码如下: function Parent(){} function Child(){} Child.prototype = new Parent(); 通过对象Child的prototype属性指向父对象Parent的实例,使Child对象实例能通过原型链访问到父对象构造所定义的属性.方法等. 构造通过原型链链接了父级对象,是否就意味着完成了对象

  • 详细分析Javascript中创建对象的四种方式

    前言 使用Javascript创建对象的方式有很多,现在就来列举一下其中的四种方式,并且罗列出了每种方式的优缺点,可以让大家进行选择使用,下面来看看. 工厂模式 function createPerson(name, age){ var obj = new Object(); obj.name = name; obj.age = age; return obj; //一定要返回,否则打印undefined:undefined } var person1 = new createPerson('Y

随机推荐