JavaScript 输出

news2025/1/17 23:06:54

文章目录

  • JavaScript 输出
    • JavaScript 显示数据
    • 使用 window.alert()
    • 操作 HTML 元素
    • 在本教程中
    • 写到 HTML 文档
    • 写到控制台
    • 您知道吗?


JavaScript 输出

在这里插入图片描述

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


JavaScript 显示数据

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

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

使用 window.alert()

你可以弹出警告框来显示数据:

实例

<!DOCTYPE html>
<html>
<body>
 
<h1>我的第一个页面</h1>
<p>我的第一个段落。</p>
 
<script>
window.alert(5 + 6);
</script>
 
</body>
</html>

操作 HTML 元素

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

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

实例

<!DOCTYPE html>
<html>
<body>
 
<h1>我的第一个 Web 页面</h1>
 
<p id="demo">我的第一个段落</p>
 
<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>
 
</body>
</html>

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

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

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


在本教程中

在大多数情况下,在本教程中,我们将使用上面描述的方法来输出:

下面的例子直接把 id=“demo” 的 <p> 元素写到 HTML 文档输出中:


写到 HTML 文档

出于测试目的,您可以将JavaScript直接写在HTML 文档中:

实例

<!DOCTYPE html>
<html>
<body>
 
<h1>我的第一个 Web 页面</h1>
 
<p>我的第一个段落。</p>
 
<script>
document.write(Date());
</script>
 
</body>
</html>

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

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

实例

<!DOCTYPE html>
<html>
<body>
 
<h1>我的第一个 Web 页面</h1>
 
<p>我的第一个段落。</p>
 
<button onclick="myFunction()">点我</button>
 
<script>
function myFunction() {
    document.write(Date());
}
</script>
 
</body>
</html>

写到控制台

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

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

实例

<!DOCTYPE html>
<html>
<body>
 
<h1>我的第一个 Web 页面</h1>
 
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
 
</body>
</html>

您知道吗?

注:程序中调试是测试,查找及减少bug(错误)的过程。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/144891.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

TiDB 6.5 LTS 发版

在 2023 伊始&#xff0c;我们很高兴向大家宣布&#xff0c;TiDB 6.5 LTS 版本已经发布了。这是 TiDB V6 的第二个长期支持版&#xff08;上一个是 TiDB 6.1&#xff09;&#xff0c;除了携带了诸多备受期待的新特性&#xff0c;同时也将得到 TiDB 开发社区的长期维护&#xff…

设计模式(一):DDD领域驱动设计

DDD重架构&#xff0c;轻业务&#xff01; – 从单体架构开始快速验证DDD设计模式 贫血模型充血模型防腐层 DDD四层架构规范DDD单体架构和微服务架构隔离 本地单体SPI 插拔式扩展业务模式Nacos 插拔式扩展业务模式 ---- 服务名作为服务service code DDD清晰架构 – 构建领域仓库…

加解密与HTTPS(5)

您好&#xff0c;我是湘王&#xff0c;这是我的CSDN博客&#xff0c;欢迎您来&#xff0c;欢迎您再来&#xff5e;咱们大学读完之后有毕业证书&#xff0c;并且这个证书可以在学信网查询。专业上有注会、CCIE、律师证等&#xff0c;可以在国家职业认证机构或委托机构的网站上查…

【UCIe】UCIe DLP/DLLP 介绍

&#x1f525;点击查看精选 UCIe 系列文章&#x1f525; &#x1f525;点击进入【芯片设计验证】社区&#xff0c;查看更多精彩内容&#x1f525; &#x1f4e2; 声明&#xff1a; &#x1f96d; 作者主页&#xff1a;【MangoPapa的CSDN主页】。⚠️ 本文首发于CSDN&#xff0…

DNS协议——域名解析

DNS协议 DNS协议是一个应用层协议&#xff0c;作用是域名解析   使用DNS协议的原因&#xff0c;就是因为哪怕是点分十进制&#xff0c;对于我们都不太友好&#xff0c;因此使用域名来代替IP地址&#xff0c;比如www.baidu.com   最开始的时候&#xff0c;DNS系统只是一个普…

java基于ssm的个人博客系统个人博客网站个人博客项目源码

简介 Java ssm开发的个人博客系统&#xff0c;可以发布博客&#xff0c;照片&#xff0c;站长留言。 演示视频 https://www.bilibili.com/video/BV1sf4y1y7Ne/?share_sourcecopy_web&vd_sourceed0f04fbb713154db5cc611225d92156 技术 mysql,SSM,css,js,jq 功能 简单…

laravel5.5之laravel-admin的使用

目录 一、首先确保安装好了laravel&#xff0c;并且数据库连接设置正确 二、运行下面的命令来发布资源 三 、后台项目文件 四、静态文件 五、访问后台 六、参考文档 一、首先确保安装好了laravel&#xff0c;并且数据库连接设置正确 composer require encore/laravel-adm…

Verilog语法笔记(夏宇闻第三版)-简单的Verilog HDL模块

目录 简单的Verilog HDL程序介绍&#xff1a; 模块的结构 &#xff1a; 模块的端口定义&#xff1a; 模块内容&#xff1a; I/O说明的格式&#xff1a; 内部信号说明&#xff1a; 功能定义&#xff1a; 简单的Verilog HDL程序介绍&#xff1a; 下面先介绍几个简单的Veri…

高可用Keepalived在Linux中的应用

一、高可用 1.高可用介绍 &#xff08;1&#xff09;普通理解 两台服务器启动相同的业务系统&#xff0c;当有一台机器宕机&#xff0c;另外一台服务器快速接管服务&#xff0c;对于用户来讲是无感知的。 &#xff08;2&#xff09;专业理解 高可用是分布式系统架构设计中必…

Linux安装Docker与基本使用

Docker 常用于服务部署的一种方案 准备 1.云服务器或者虚拟机 2.Centos 系统 3.下载XFtp 和 XShell 安装Docker 首先删除系统中旧版本Docker或者残留文件 #卸载所有 yum remove docker docker-client docker-client-latest docker-common docker-latest docker-latest-lo…

Spring从入门到精通 | 动力节点老杜

目录 一、Spring启示录 1、OCP开闭原则 2、依赖倒置原则&#xff08;DIP原则&#xff09; 3、控制反转&#xff08;重点&#xff09; 4、Spring框架&#xff08;重点&#xff09; 二、Spring概述 Spring的8大模块 ​编辑 Spring特点 1、轻量 2、控制反转IOC 3、面向…

Qt Mac阻止和启用休眠

阻止电脑休眠&#xff0c;在win下是使用win api实现的&#xff0c;用Qt跨平台开发&#xff0c;实现Mac的阻止休眠&#xff0c;也需要Mac本身的api来实现。经过网上查资料&#xff0c;找到了一个能用的&#xff0c;链接如下。原生mac开发用的是Object-c&#xff0c;所以该实现用…

Kyligence 客户案例“泰康集团精细化经营分析与运营平台”获评数据智能最佳实践案例

近日&#xff0c;“2022 爱分析中国数据智能最佳实践案例”评选结果正式揭晓。Kyligence 携手泰康集团申报的“泰康集团精细化经营分析与运营平台”项目经过多轮角逐脱颖而出&#xff0c;最终获评“中国数据智能最佳实践案例”。同时&#xff0c;Kyligence 通过综合能力评估&am…

Linux Shell脚本编程提高

Shell是一个命令解释器,它解释由用户输入的命令并且把它们送到内核,不仅如此,Shell有自己的编程语言用于对命令的编辑,它允许用户编写由shell命令组成的程序.Shel编程语言具有普通编程语言的很多特点,比如它也有循环结构和分支控制结构等,用这种编程语言编写的Shell程序与其他应…

保姆级教程 | 将Oxylabs住宅代理和数据中心代理与MultiLogin集成的操作步骤

MultiLogin是一款集多账户管理、浏览器指纹隐藏等功能于一体的实用解决方案。在您抓取所需公共数据时&#xff0c;将MultiLogin与值得信赖的代理结合使用&#xff0c;可以大幅降低被网站阻止情况发生的概率。 在本篇教程中&#xff0c;将带您学习简单的集成流程&#xff0c;手把…

数说热点 | 2022商业地产的“破局”与“新生”——逆境之下探索新兴可能

2022年&#xff0c;受国内新冠肺炎疫情因素影响&#xff0c;我国经济下行压力明显加大&#xff0c;尤其是部分产业链、供应链受到冲击&#xff1b;部分区域接触型、聚集型特征明显的线下消费表现低迷&#xff0c;给实体商业经营带来挑战。从市场表现看&#xff0c;2022年1-9月&…

数据架构之数据血缘:数据从哪里来,到哪里去

为了直观的感受数据血缘&#xff0c;先从网上找了两张典型的数据血缘的图。下图特点是按照数据仓库数据管理模型给出了基于表&#xff08;实体&#xff09;的数据血缘图。 此图是截取Solidatus软件生成的数据血缘图&#xff0c;该图与上图的区别在于给出了基于属性的数据血缘图…

【纯净题目版】笔试题-2023禾赛-FPGA

题目背景 笔试时间&#xff1a;2022.06.22应聘岗位&#xff1a;FPGA开发工程师 题目评价 难易程度&#xff1a;★★☆☆☆知识覆盖&#xff1a;★☆☆☆☆超纲范围&#xff1a;☆☆☆☆☆值得一刷&#xff1a;★☆☆☆☆ 文章目录1. 使用最少的电路实现二分频&#xff0c;给出…

ubuntu20.04 arm-linux-gnueabihf交叉编译opencv4.7.0 与opencv-contrib-4.7.0

安装交叉编译工具链编译的目标硬件是RV1126&#xff0c;编译工具链为32位的arm-linux-gnueabihf&#xff0c;本次使用的是8.3版本&#xff0c;可在Downloads | GNU-A Downloads – Arm Developer进行下载。下载后&#xff0c;解压到自己的安装目录&#xff0c;比如解压到/opt目…

Seata客户端

一个调用链中的所有微服务都是seata的客户端&#xff0c;都必须走下面的步骤 第一步&#xff1a;创建undo_log表 下载地址&#xff1a;https://github.com/seata/seata/tree/develop/script/client/at/db -- for AT mode you must to init this sql for you business databa…