JavaScript 输出

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

先来一点DOM的小知识点:

DOM 解释:

  • 您会经常看到 document.getElementById("id")。
  • 这个方法是 HTML DOM 中定义的。
  • DOM (Document Object Model)(文档对象模型)是用于访问 HTML 元素的正式 W3C 标准。
  • 格式<script>
  • 那些老旧的实例可能会在 <script> 标签中使用 type="text/javascript"。
  • 现在已经不必这样做了。
  • JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言

JavaScript 显示数据

JavaScript 可以通过不同的方式来输出数据:

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

1.使用 window.alert()

实例:

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Yubaba</title>
</head>
<body> <h1>我的第一个页面</h1>
<p>我的第一个段落。</p>
<script>
window.alert("有新的公告,请注意查看!");
</script> </body>
</html>

2.操作 HTML 元素

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

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

(document.write是直接写入到页面的内容流,如果在写之前没有调用document.open, 浏览器会自动调用open。每次写完关闭之后重新调用该函数,会导致页面被重写。innerHTML则是DOM页面元素的一个属性,代表该元素的html内容。你可以精确到某一个具体的元素来进行更改。如果想修改document的内容,则需要修改document.documentElement.innerElement。 innerHTML很多情况下都优于document.write,其原因在于其允许更精确的控制要刷新页面的那一个部分。)

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Yubaba丶</title>
</head>
<body> <h1>我的第一个 Web 页面</h1>
<p id="demo">我的第一个段落。</p>
<script>
document.getElementById("demo").innerHTML="段落已修改。";
</script> </body>
</html>

3.写到控制台

如果您的浏览器支持调试,你可以使用 console.log() 方法在浏览器中显示 JavaScript 值。

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

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Yubaba丶</title>
</head>
<body> <h1>我的第一个 Web 页面</h1>
<p>
浏览器中(Chrome, IE, Firefox) 使用 F12 来启用调试模式, 在调试窗口中点击 "Console" 菜单。
</p>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script> </body>
</html>

03JavaScript 输出的更多相关文章

  1. mapreduce多文件输出的两方法

    mapreduce多文件输出的两方法   package duogemap;   import java.io.IOException;   import org.apache.hadoop.conf ...

  2. Android Studio 多个编译环境配置 多渠道打包 APK输出配置

    看完这篇你学到什么: 熟悉gradle的构建配置 熟悉代码构建环境的目录结构,你知道的不仅仅是只有src/main 开发.生成环境等等环境可以任意切换打包 多渠道打包 APK输出文件配置 需求 一般我 ...

  3. nodejs进阶(1)—输出hello world

    下面将带领大家一步步学习nodejs,知道怎么使用nodejs搭建服务器,响应get/post请求,连接数据库等. 搭建服务器页面输出hello world var  http  =  require ...

  4. .NET Core的日志[2]:将日志输出到控制台

    对于一个控制台应用,比如采用控制台应用作为宿主的ASP.NET Core应用,我们可以将记录的日志直接输出到控制台上.针对控制台的Logger是一个类型为ConsoleLogger的对象,Consol ...

  5. WebApi接口 - 响应输出xml和json

    格式化数据这东西,主要看需要的运用场景,今天和大家分享的是webapi格式化数据,这里面的例子主要是输出json和xml的格式数据,测试用例很接近实际常用情况:希望大家喜欢,也希望各位多多扫码支持和点 ...

  6. node中子进程同步输出

    管道 通过"child_process"模块fork出来的子进程都是返回一个ChildProcess对象实例,ChildProcess类比较特殊无法手动创建该对象实例,只能使用fo ...

  7. Java程序:从命令行接收多个数字,求和并输出结果

    一.设计思想:由于命令行接收的是字符串类型,因此应先将字符串类型转化为整型或其他字符型,然后利用for循环求和并输出结果 二.程序流程图: 三.源程序代码:   //王荣荣 2016/9/23     ...

  8. 【夯实PHP基础】nginx php-fpm 输出php错误日志

    本文地址 原文地址 分享提纲: 1.概述 2.解决办法(解决nginx下php-fpm不记录php错误日志) 1. 概述 nginx是一个web服务器,因此nginx的access日志只有对访问页面的 ...

  9. 【SAP业务模式】之ICS(六):发票输出类型

    这篇开始主要讲述发票输出类型: 首先我们新建一个发票类型,用于公司间的发票MIV,而标准的发票类型还是F2保持不变: 一.新建发票类型: 目录:SPRO-销售与分销-出具发票-开票凭证-定义出具发票类 ...

随机推荐

  1. 《一马当先 O2O创业真人秀》阿里云创客+项目提交报名中

    传统行业与互联网的相互融合,线上与线下的互通,正在掀起一股“互联网+”新风潮和创业热潮.支付宝钱包.快的打车.淘点点……这些耳熟能详的应用早已成为人们生活的一部分.而越来越多的“互联网+”创新项目,将 ...

  2. VC++ 6.0如何创建与调用动态链接库

    原文:http://blog.csdn.net/wanghaihao_1/article/details/51098451 1.静态链接库与动态链接库区别: 静态链接库:lib中的指令被直接包含在最终 ...

  3. 使用C++11实现完美资源管理

    1.资源管理包括内存管理.文件句柄等等需要进行打开(申请).关闭(释放)操作的过程 2.VS2010使用的C++规范,严格说来不是C++11,而是C++0x,但是一脉相承的 一:管理数组 相较于aut ...

  4. 树的各种操作java

    package mystudy; import java.io.UnsupportedEncodingException; import java.util.LinkedList; import ja ...

  5. Linux->apt-包的位置和变更

    ubuntu中由apt-get获得的文件包保存在/var/cache/apt/archives: 通过apt-get命令下载的软件包,放在/var/cache/apt/archives 目录下: 下载 ...

  6. DevExpress之ChartControl实现时间轴实例 z

    using System; using System.Data; using System.Windows.Forms; using DevExpress.XtraCharts; namespace ...

  7. July 20th 2017 Week 29th Thursday

    The darkness is no darkness with you. 有了你,黑暗将不再是黑暗. The darkness will not be driven out if we failed ...

  8. hbase hfilev2

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/u014393917/article/details/25508809 HFileV2文件 HFile ...

  9. luogu P1522 Cow Tours

    嘟嘟嘟 题面挺绕的,“翻译”一下: 1.牧区是一个点,牧场是所有直接相连的点构成的联通块. 2.两个牧区之间的距离是这两个距离之间的最短路,只有直接相连的两个牧区之间的距离是欧几里得距离. 3.牧场的 ...

  10. 安装最新版的wampserver,可以兼容php5和php7

    本文介绍的wamp是Windows+Apache+MySQL+PHP+phpMyAdmin,主要应用于开发环境[一键安装包,简单好用]. 这是运行在Windows系统下的官方安装包,可以快速的搭建属于 ...