03JavaScript 输出
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 输出的更多相关文章
- mapreduce多文件输出的两方法
mapreduce多文件输出的两方法 package duogemap; import java.io.IOException; import org.apache.hadoop.conf ...
- Android Studio 多个编译环境配置 多渠道打包 APK输出配置
看完这篇你学到什么: 熟悉gradle的构建配置 熟悉代码构建环境的目录结构,你知道的不仅仅是只有src/main 开发.生成环境等等环境可以任意切换打包 多渠道打包 APK输出文件配置 需求 一般我 ...
- nodejs进阶(1)—输出hello world
下面将带领大家一步步学习nodejs,知道怎么使用nodejs搭建服务器,响应get/post请求,连接数据库等. 搭建服务器页面输出hello world var http = require ...
- .NET Core的日志[2]:将日志输出到控制台
对于一个控制台应用,比如采用控制台应用作为宿主的ASP.NET Core应用,我们可以将记录的日志直接输出到控制台上.针对控制台的Logger是一个类型为ConsoleLogger的对象,Consol ...
- WebApi接口 - 响应输出xml和json
格式化数据这东西,主要看需要的运用场景,今天和大家分享的是webapi格式化数据,这里面的例子主要是输出json和xml的格式数据,测试用例很接近实际常用情况:希望大家喜欢,也希望各位多多扫码支持和点 ...
- node中子进程同步输出
管道 通过"child_process"模块fork出来的子进程都是返回一个ChildProcess对象实例,ChildProcess类比较特殊无法手动创建该对象实例,只能使用fo ...
- Java程序：从命令行接收多个数字，求和并输出结果
一.设计思想:由于命令行接收的是字符串类型,因此应先将字符串类型转化为整型或其他字符型,然后利用for循环求和并输出结果 二.程序流程图: 三.源程序代码: //王荣荣 2016/9/23 ...
- 【夯实PHP基础】nginx php-fpm 输出php错误日志
本文地址 原文地址 分享提纲: 1.概述 2.解决办法(解决nginx下php-fpm不记录php错误日志) 1. 概述 nginx是一个web服务器,因此nginx的access日志只有对访问页面的 ...
- 【SAP业务模式】之ICS（六）：发票输出类型
这篇开始主要讲述发票输出类型: 首先我们新建一个发票类型,用于公司间的发票MIV,而标准的发票类型还是F2保持不变: 一.新建发票类型: 目录:SPRO-销售与分销-出具发票-开票凭证-定义出具发票类 ...
随机推荐
- HBuilder自定义格式化代码
对于代码格式到底为两个空格还是四个空格,可能大家喜欢的都不同,如果你是在使用HBuilder编辑器,那么恭喜你,这两种代码格式你可以轻易的更换.下面贴步骤 1.打开工具—>选项 2.选择HBui ...
- QT 编译遇到重定义；不同的基类型&在QT中使用C++ lib库
最近在使用osg和qt开发,在集成osg时候因为我使用的qt版本为非opengl的版本,导致qt自己封了一遍opengl的一些基类变量如double 这时候就会跟osg中声明的opengl的类型冲突, ...
- python全栈学习笔记（二）网络基础之子网划分
阅读目录 一.ip地址基本知识 1.1 ip地址的结构和分类 1.2 特殊ip地址 1.3 子网掩码 1.4 ip地址申请 二.子网划分 2.1 子网划分概念 2.2 c类子网划分初探 2.3 子网划 ...
- July 12th 2017 Week 28th Wednesday
No way is impossible to courage. 勇敢面前没有通不过的路. Without faith and courage, nothing is possible. With t ...
- June 19th 2017 Week 25th Monday
Everyone is dissatisfied with his own fortune. 人对自己的命运总是感到不满足. We always want more, even when we hav ...
- CSV 文件读写
转自:http://www.cnblogs.com/Clin/archive/2013/03/14/2959022.html public class CSVFileHelper { /// < ...
- C++中类与结构体的区别
相信有一点专业知识的人都知道,C语言是一种结构化语言.它层次清晰,便于按模块化方式组织程序,易于调试和维护.在很大程度上,标准C++是标准C的超集.实际上,所有C程序也是C++程序,然而,两者之间有少 ...
- 150行JavaScript代码实现增强现实
增强现实技术(Augmented Reality,简称 AR),是一种实时地计算摄影机影像的位置及角度并加上相应图像.视频.3D模型的技术,这种技术的目标是在屏幕上把虚拟世界套在现实世界并进行互动.这 ...
- C#图解教程读书笔记（第3章 类型、存储及变量）
1.C#的中的数值不具有bool特性. 2.dynamic在使用动态语言编写的程序集时使用,这个不太明白,看到后面需要补充!! 动态化的静态类型 3.对于引用类型,引用是存放在栈中,而数据是存放在堆里 ...
- Vue组件绑定自定义事件
Vue组件使用v-on绑定自定义事件: 可以分为3步理解: 1.在组件模板中按照正常事件机制绑定事件: template: '<button v-on:click="increment ...