JavaScript 没有任何打印或者输出的函数。

㈠JavaScript 显示数据

⑴使用 window.alert() 弹出警告框。

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

⑶使用 innerHTML 写入到 HTML 元素。

⑷使用 console.log() 写入到浏览器的控制台。

㈡使用 window.alert()

举例示范如下:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>警告框</title>
  6. </head>
  7. <body>
  8. <h1>弹出警告框来显示数据</h1>
  9. <p>计算简单的加法运算</p>
  10. <script>
  11. window.alert(5 + 6);
  12. </script>
  13. </body>
  14. </html>

效果图:

 

㈢操作 HTML 元素

如果需要从 JavaScript 访问某个 HTML 元素,可以使用 document.getElementById(id) 方法。

使用 "id" 属性来标识 HTML 元素,并 innerHTML 来获取或插入元素内容:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>操作HTML元素</title>
  6. </head>
  7. <body>
  8. <h1>静夜思</h1>
  9. <p id="demo">床前明月光</p>
  10. <script>
  11. document.getElementById("demo").innerHTML="段落已修改。";
  12. </script>
  13. </body>
  14. </html>

效果图:

★解析:

以上 JavaScript 语句(在 <script> 标签中)可以在 web 浏览器中执行:

document.getElementById("demo") 是使用 id 属性来查找 HTML 元素的 JavaScript 代码 。

innerHTML = "段落已修改。" 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。

 

㈣写到 HTML 文档

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>写到 HTML 文档</title>
  6. </head>
  7. <body>
  8. <h1>实时时间</h1>
  9. <p>此时此刻是何年何月何时何分何秒。</p>
  10. <script>
  11. document.write(Date());
  12. </script>
  13. </body>
  14. </html>

效果图:

注意:

使用 document.write() 仅仅向文档输出写内容。

如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖。

 

ps:突然觉得这个时刻神圣,以后再来看的时候也能看到是什么时刻敲下的这行代码,意义重大啊~~~

㈤写到控制台

浏览器中使用 F12 来启用调试模式, 在调试窗口中点击 "Console" 菜单。

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h1>在控制台进行呀</h1>
  5. <p>浏览器使用F12来启用调试模式</p>
  6. <script>
  7. a = 5;
  8. b = 6;
  9. c = a + b;
  10. console.log(c);
  11. </script>
  12. </body>
  13. </html>

效果图:

JavaScript 输出的四种方法的更多相关文章

  1. JavaScript确定一个字符串是否包含在另一个字符串中的四种方法

    一.indexOf() 1.定义 indexOf()方法返回String对象第一次出现指定字符串的索引,若未找到指定值,返回-1.(数组同一个概念) 2.语法 str.indexOf(searchVa ...

  2. JavaScript数据类型判断的四种方法

    码文不易啊,转载请带上本文链接呀,感谢感谢 https://www.cnblogs.com/echoyya/p/14416375.html 本文分享了JavaScript类型判断的四种方法:typeo ...

  3. JavaScript数组去重的四种方法

    今天,洗澡的想一个有趣的问题,使用js给数组去重,我想了四种方法,虽然今天的任务没有完成,5555: 不多说,po代码: //方法一:简单循环去重    Array.prototype.unique1 ...

  4. 两个变量交换的四种方法(Java) 七种方法(JS)

    两个变量交换的四种方法(Java)   对于两种变量的交换,我发现四种方法,下面我用Java来演示一下. 1.利用第三个变量交换数值,简单的方法. (代码演示一下) 1 class TestEV 2 ...

  5. 两个变量交换的四种方法(Java)

    对于两种变量的交换,我发现四种方法,下面我用Java来演示一下. 1.利用第三个变量交换数值,简单的方法. (代码演示一下) class TestEV //创建一个类 { public static ...

  6. Javascript函数调用的四种模式

    一 前言 Javascript一共有四种调用模式:方法调用模式.函数调用模式.构造器调用模式以及apply调用模式.调用模式不同,对应的隐藏参数this值也会不同. 二 方法调用模式 函数作为对象的属 ...

  7. PHP读写XML文件的四种方法

    PHP对XML文件进行读写操作的方法一共有四种,分别是:字符串方式直接读写.DOMDocument读写. XMLWrite写和XMLReader读.SimpleXML读写,本文将依次对这四种方法进行介 ...

  8. 解析Xml四种方法

    关键字:Java解析xml.解析xml四种方法.DOM.SAX.JDOM.DOM4j.XPath [引言] 目前在Java中用于解析XML的技术很多,主流的有DOM.SAX.JDOM.DOM4j,下文 ...

  9. java环境变量配置四种方法

    原文:java环境变量配置四种方法 Java编程首要工作就是安装JDK(Java Development Kit).一通“NEXT”点完安装后就是最重要的环境变量设置了.也许有人会问为什么要设置环境变 ...

随机推荐

  1. 第三周课程总结&实验报告一

    实验一 Java开发环境与简单Java程序 一.实验目的 熟悉JDK开发环境 熟练掌握结构化程序设计方法 二.实验内容 1.在此处输入标题打印输出所有的"水仙花数",所谓" ...

  2. codeforces 816B Karen and Coffee (差分思想)

    题目链接 816B Karen and Coffee 题目分析 题意:有个人在学泡咖啡,因此看了很多关于泡咖啡温度的书,得到了n种推荐的泡咖啡温度范围[L1,R1] ,此人将有k种做法推荐的温度记为可 ...

  3. APP_测试流程(测试点)

    1 APP测试基本流程 1.1流程图 1.2测试周期 测试周期可按项目的开发周期来确定测试时间,一般测试时间为两三周(即15个工作日),根据项目情况以及版本质量可适当缩短或延长测试时间. 1.3测试资 ...

  4. Java NIO浅析 转至 美团技术团队

    出处: Java NIO浅析 NIO(Non-blocking I/O,在Java领域,也称为New I/O),是一种同步非阻塞的I/O模型,也是I/O多路复用的基础,已经被越来越多地应用到大型应用服 ...

  5. springboot拦截中自动注入的组件为null问题解决方法

    一.写SpringUtil类来获取Springh管理的类实例,判断是否注入成功,如果没有注入成功重新获取注入 package com.util; import org.springframework. ...

  6. try catch和finally

    在C#中这三个关键字用于处理异常. 这三个关键字try是必定要用的,要不然就失去了意义.然后catch和finally可以不用但是要注意遵循原则. 存在一个或多个catch的时可以不用finally, ...

  7. c# ListView 简单操作

    1. 添加数据 listView1.Items.Clear(); for (int i = 0; i < 50; i++) { ListViewItem lv = new ListViewIte ...

  8. 分布式的几件小事(四)dubbo负载均衡策略和集群容错策略

    1.dubbo负载均衡策略 ①random loadbalance 策略 默认情况下,dubbo是random loadbalance 随机调用实现负载均衡,可以对provider不同实例设置不同的权 ...

  9. 一个页面两个div(一个柱状图或者折线图一个饼图)

    需求是一个页面中两个图,一个饼图一个折线图,接口用的是一个接口,柱状图的图例要隐藏掉,X轴为月份,每月份都有两个数据,也就是图例是两个(进口和出口)的意思饼图需要显示最新月份数据,并且有一个下拉框可以 ...

  10. JQuery事件(2)

    jQuery 事件 下面是 jQuery 中事件方法的一些例子: Event 函数 绑定函数至 $(document).ready(function) 将函数绑定到文档的就绪事件(当文档完成加载时) ...