当前位置: 首页 > news >正文

JS基础:输出信息的5种方式详解

你好,我是云桃桃。

一个希望帮助更多朋友快速入门 WEB 前端的程序媛。

云桃桃-大专生,一枚程序媛,感谢关注。回复 “前端基础题”,可免费获得前端基础 100 题汇总,回复 “前端基础路线”,可获取完整web基础路线导图。

300篇原创内容-更多前端系列内容可以go公众.h:云桃桃

后台回复“前端基础路线”可获取前端基础学习路线

后台回复“前端基础题”可得到前端基础100题汇总,持续更新中

后台回复“前端电子书”可获取20+本精选电子书

前言

在 JavaScript 中,有多种输出方案可以将我们想要的信息展示给用户。就像我们有不同的方式来表达自己的想法一样。

下面让我们来详细了解一下5种常见的输出方案,以及它们的适用场景吧。

5 种输出方式

一、 console.log()

这是最常用的输出方法之一,它将信息输出到浏览器的控制台。适用于在开发过程中调试代码、查看变量的值或打印一些临时的消息。比如。

console.log('Hello, 桃!')

那这个信息,我们如何查看呢?

首先,英文不好的,可以在浏览器预览时候,按 F12,按如下 2 张图的顺序,把开发者工具,设置成中文。

图片

图片

然后,我们可以按照以下步骤进行查看输出:

图片

  1. 打开浏览器开发者工具。不同的浏览器可能有不同的打开方式,一般可以通过按 F12 键或右键点击页面选择“检查”来打开。

  2. 在开发者工具中,找到“控制台”选项卡。这个选项卡通常标有“Console”或类似的名称。

  3. 在控制台中,你将看到所有通过 console.log 输出的信息。它们按照输出的顺序排列。如图。

使用时要注意以下几点:

  • 主要用于开发调试,输出的信息不会在页面上显示,而是在浏览器的控制台中。

  • 可以输出各种类型的数据,包括字符串、数字、对象等。

  • 在生产环境中,尽量减少使用 console.log(),以免影响性能。

二、 alert()

弹出一个包含信息的对话框。适用于向用户展示一些重要的提示或警告消息,需要用户立即注意并进行操作。

<button id="button">点击我</button>
<script>button.addEventListener('click', function () {alert('你点击了按钮!')})
</script>

点击按钮后,效果如下图:

图片

使用时要注意以下几点:

  • 会弹出一个模态对话框,打断用户当前的操作。

  • 通常用于向用户展示重要的提示或警告信息。

  • 由于它会打断用户体验,所以只是在新手期或者做项目时排查疑难问题阶段需要使用,在正常项目下通常都会以更好体验的,更符合项目的UI形式出现。

三、 prompt()

弹出一个输入框,要求用户输入信息。适用于获取用户的输入,例如在表单中获取用户的姓名或密码。

如下代码,点击按钮,就会弹出输入框。

<button id="button2">点击我,弹出输入框</button>
<script>button2.addEventListener('click', function () {var name = prompt('请输入你的名字:')console.log('你输入的名字是:' + name)})
</script>

效果如图:

图片

使用时要注意以下几点:

  • 弹出一个输入框,要求用户输入文本。

  • 用于获取用户的输入,但在移动设备上可能不太方便。

  • 要处理用户可能取消输入或输入无效数据的情况。

  • 这个方法通常在新手期被使用,但在实际开发中很少被用到。

四、document.write()

将信息直接写入文档的内容中。

document.write('欢迎来到我们的网站!')

图片

使用时要注意以下几点:

  • 直接将内容写入文档流,会覆盖页面上已有的内容。

  • 应该在页面加载完成后使用,否则可能会导致页面布局混乱。

  • 由于它会动态修改页面内容,可能会影响页面的效果和性能,通常只在新手阶段使用它。

五、innerHTML 属性

通过修改元素的 innerHTML 属性来更改元素的内容。适用于动态更新页面的部分内容。比如:

<h1 id="h1"></h1>
<script>document.getElementById('h1').innerHTML = '我是通过js写入的标题呀!'
</script>

效果如下:

图片

OK,你学会了么?本文完。

相关文章:

JS基础:输出信息的5种方式详解

你好&#xff0c;我是云桃桃。 一个希望帮助更多朋友快速入门 WEB 前端的程序媛。 云桃桃-大专生&#xff0c;一枚程序媛&#xff0c;感谢关注。回复 “前端基础题”&#xff0c;可免费获得前端基础 100 题汇总&#xff0c;回复 “前端基础路线”&#xff0c;可获取完整web基础…...

教你解决PUBG绝地求生延迟高 网络延迟高的问题

在《绝地求生》&#xff08;PUBG&#xff09;这款备受全球玩家追捧的战术竞技游戏中&#xff0c;其逼真的战场环境和心跳加速的生存竞赛无不让人为之痴迷。不过&#xff0c;有些玩家在经历了一场惊心动魄的对局后&#xff0c;却面临了一个不大不小的麻烦&#xff1a;比赛圆满落…...

【QT教程】QT6与C++17 QT与C++新特性

QT6与C17 使用AI技术辅助生成 QT界面美化视频课程 QT性能优化视频课程 QT原理与源码分析视频课程 QT QML C扩展开发视频课程 免费QT视频课程 您可以看免费1000个QT技术视频 免费QT视频课程 QT统计图和QT数据可视化视频免费看 免费QT视频课程 QT性能优化视频免费看 免费QT视频…...

多线程三种实现

多线程 线程 线程是操作系统能够进行运算调度的最小单位。它被包含在进程之中&#xff0c;是进程中的实际运作单位。 &#xff08;理解&#xff1a;应用软件中互相独立&#xff0c;可以同时运行的功能&#xff09; 进程 进程是程序的基本执行实体。&#xff08;理解&#…...

【前端】HTML实现个人简历信息填写页面

文章目录 前言一、综合案例&#xff1a;个人简历信息填写页面 前言 这篇博客仅仅是对HTML的基本结构进行了一些说明&#xff0c;关于HTML的更多讲解以及CSS、Javascript部分的讲解可以关注一下下面的专栏&#xff0c;会持续更新的。 链接&#xff1a; Web前端学习专栏 下面我对…...

岩点×数说故事×小红书 | 发布《中国攀岩行业分析报告》

从下班健身到下班攀岩&#xff0c;从“鸡娃”到岩馆“溜娃”&#xff0c;被奥运“正名”的攀岩运动&#xff0c;在国内熬过了萌芽阶段&#xff0c;悄然开出了花。2023年&#xff0c;各类重磅攀岩赛事重启、线下岩馆疯狂扩张&#xff0c;小众攀岩正式进入大众视野&#xff0c;风…...

DPDK+PKTGEN环境搭建

【环境准备】 1、python python版本,需要3.6以上版本,若存在3.6版本,可以通过软链接指明目标。 ln -sf /usr/bin/python3.6 /usr/bin/python 2、meson sudo pip3 install meson==0.63.3 【代码下载】 1、dpdk https://fast.dpdk.org/rel/dpdk-22.11.4.tar.xz 2、dpdk-kmo…...

【面试干货】HTTP和HTTPS之间的主要区别

【面试干货】HTTP和HTTPS之间的主要区别 1、URL前缀2、安全性3、端口4、工作层级5、加密6、证书 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; 1、URL前缀 HTTP 的URL以http://开头&#xff0c;而 HTTPS 的URL以https://开头&#xff0c;…...

04、Kafka集群安装

1、准备工作 首先准备一台虚拟机&#xff0c;centos7系统&#xff0c;先在一台上配置安装后&#xff0c;最后克隆成多台机器。 1.1 安装JDK &#xff08;1&#xff09;下载JDK&#xff0c;上传到 /root/software 路径 下载地址&#xff1a;https://www.oracle.com/cn/java/…...

Vue自定义封装音频播放组件(带拖拽进度条)

Vue自定义封装音频播放组件&#xff08;带拖拽进度条&#xff09; 描述 该款自定义组件可作为音频、视频播放的进度条&#xff0c;用于控制音频、视频的播放进度、暂停开始、拖拽进度条拓展性极高。 实现效果 具体效果可以根据自定义内容进行位置调整 项目需求 有播放暂停…...

php中常见的运算符和使用方法

PHP中常见的运算符包括算术运算符、赋值运算符、比较运算符、逻辑运算符、位运算符、字符串运算符、三元条件运算符&#xff08;也称为三目运算符&#xff09;、递增/递减运算符等。以下是这些运算符的简要说明和使用方法&#xff1a; 算术运算符&#xff1a; &#xff1a;加法…...

信息与未来2017真题笔记

T1. 龟兔赛跑 题目描述 兔子又来找乌龟赛跑啦&#xff01;同样的错误兔子不会犯两次&#xff0c;所以兔子提出赛跑的时候&#xff0c;乌龟就觉得这场比赛很不公平。于是兔子进一步放宽了条件&#xff0c;表示他可以在比赛开始以后先睡 t t t 分钟再开始追乌龟。 乌龟这下没…...

前端基础知识-ES6解构赋值(将数组内元素、字符串内字符、对象内属性值快速赋值给其他变量)

前言&#xff1a; 将数组、字符串、对象进行展开&#xff0c;并将展开的数据赋值给指定变量&#xff0c;以达到语法简化的目的&#xff0c;日常开发中可以大大提升我们的效率。 主要语法&#xff1a; 一、[变量1,变量2。。。]目标数组 将数组里面的内容赋给其他变量 场景1…...

【SpringBoot整合系列】SpringBoot整合RabbitMQ-消息可靠性

目录 确保消息的可靠性RabbitMQ 消息发送可靠性分析解决方案开启事务机制发送方确认机制单条消息处理消息批量处理 失败重试自带重试机制业务重试 RabbitMQ 消息消费可靠性如何保证消息在队列RabbitMQ 的消息消费&#xff0c;整体上来说有两种不同的思路&#xff1a;确保消费成…...

Hbase 常用shell操作

目录 1、创建表 1.1、启动HBase Shell 1.2、创建表 1.3、查看表 1.4、删除表 2、插入数据 2.1、put命令 3、查看数据 3.1、get命令 3.2、查询数据中文显示 4、更新数据 4.1、使用put来更新数据 5、删除数据 5.1、delete命令 5.2、删除指定列的数据 5.3、delete…...

数据库被攻击后出现1044 - access denied for user ‘root‘@‘% ‘ to database table

MySQL数据库被攻击后&#xff0c;数据库全部被删除&#xff0c;并且加一个一个勒索的数据&#xff0c;向我索要btc&#xff0c; 出现这个问题就是我的数据库密码太简单了&#xff0c;弱密码&#xff0c;被破解了&#xff0c;并且把我权限也给修改了 导致我操作数据库时&#…...

在哪里打印资料比较便宜

在数字时代&#xff0c;我们常常需要在各种文档、资料之间穿梭&#xff0c;然而&#xff0c;有时候我们需要的并不是数字版&#xff0c;而是纸质版。那么&#xff0c;在哪里打印资料比较便宜呢&#xff1f; 琢贝云打印以其超低的价格&#xff0c;优质的打印服务&#xff0c;赢…...

leetcode 2606.找到最大开销的子字符串

思路&#xff1a;dp 这道题是不是很像最大子数组和那道题呢?从这里我们其实能看出来一类题的蹊跷规律来&#xff1a; 也就是说&#xff0c;在涉及到子字符串&#xff0c;子数组这样的字眼的时候&#xff0c;并且有最值问题&#xff0c;我们可以基本上确定是动态规划&#xf…...

超标量处理器设计:重排序缓存(ROB)

★超标量处理器的很多地方用到了重排序缓存&#xff0c;但是我对它不是很了解&#xff0c;所以我整理一下重排序缓存的知识点。 重排序缓存(ROB)在确保乱序执行的指令能够正确地完成和提交(Commit)&#xff0c;也可以用来寄存器重命名。 ROB是一个先进先出的表&#xff0c;每个…...

nginx常用内置变量

名称说明$arg_name请求中的name参数$args请求中的参数$content_lengthhttp请求信息里的"Content-Length"$content_type请求信息里的"Content-Type"$host请求信息中的"Host"&#xff0c;如果请求中没有Host&#xff0c;则等于设置的服务器名$host…...

Android Wi-Fi 连接失败日志分析

1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分&#xff1a; 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析&#xff1a; CTR…...

从WWDC看苹果产品发展的规律

WWDC 是苹果公司一年一度面向全球开发者的盛会&#xff0c;其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具&#xff0c;对过去十年 WWDC 主题演讲内容进行了系统化分析&#xff0c;形成了这份…...

江苏艾立泰跨国资源接力:废料变黄金的绿色供应链革命

在华东塑料包装行业面临限塑令深度调整的背景下&#xff0c;江苏艾立泰以一场跨国资源接力的创新实践&#xff0c;重新定义了绿色供应链的边界。 跨国回收网络&#xff1a;废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点&#xff0c;将海外废弃包装箱通过标准…...

P3 QT项目----记事本(3.8)

3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

GC1808高性能24位立体声音频ADC芯片解析

1. 芯片概述 GC1808是一款24位立体声音频模数转换器&#xff08;ADC&#xff09;&#xff0c;支持8kHz~96kHz采样率&#xff0c;集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器&#xff0c;适用于高保真音频采集场景。 2. 核心特性 高精度&#xff1a;24位分辨率&#xff0c…...

Pinocchio 库详解及其在足式机器人上的应用

Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库&#xff0c;专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性&#xff0c;并提供了一个通用的框架&…...

安全突围:重塑内生安全体系:齐向东在2025年BCS大会的演讲

文章目录 前言第一部分&#xff1a;体系力量是突围之钥第一重困境是体系思想落地不畅。第二重困境是大小体系融合瓶颈。第三重困境是“小体系”运营梗阻。 第二部分&#xff1a;体系矛盾是突围之障一是数据孤岛的障碍。二是投入不足的障碍。三是新旧兼容难的障碍。 第三部分&am…...

HubSpot推出与ChatGPT的深度集成引发兴奋与担忧

上周三&#xff0c;HubSpot宣布已构建与ChatGPT的深度集成&#xff0c;这一消息在HubSpot用户和营销技术观察者中引发了极大的兴奋&#xff0c;但同时也存在一些关于数据安全的担忧。 许多网络声音声称&#xff0c;这对SaaS应用程序和人工智能而言是一场范式转变。 但向任何技…...

华为OD机试-最短木板长度-二分法(A卷,100分)

此题是一个最大化最小值的典型例题&#xff0c; 因为搜索范围是有界的&#xff0c;上界最大木板长度补充的全部木料长度&#xff0c;下界最小木板长度&#xff1b; 即left0,right10^6; 我们可以设置一个候选值x(mid)&#xff0c;将木板的长度全部都补充到x&#xff0c;如果成功…...