公司做网站需要准备什么材料,长春网长春网站设计站建设,东莞大朗网站建设哪家口碑好,wordpress oss 水印你好#xff0c;我是云桃桃。
一个希望帮助更多朋友快速入门 WEB 前端的程序媛。 云桃桃-大专生#xff0c;一枚程序媛#xff0c;感谢关注。回复 “前端基础题”#xff0c;可免费获得前端基础 100 题汇总#xff0c;回复 “前端基础路线”#xff0c;可获取完整web基础…你好我是云桃桃。
一个希望帮助更多朋友快速入门 WEB 前端的程序媛。 云桃桃-大专生一枚程序媛感谢关注。回复 “前端基础题”可免费获得前端基础 100 题汇总回复 “前端基础路线”可获取完整web基础路线导图。
300篇原创内容-更多前端系列内容可以go公众.h云桃桃
后台回复“前端基础路线”可获取前端基础学习路线
后台回复“前端基础题”可得到前端基础100题汇总持续更新中
后台回复“前端电子书”可获取20本精选电子书
前言
在 JavaScript 中有多种输出方案可以将我们想要的信息展示给用户。就像我们有不同的方式来表达自己的想法一样。
下面让我们来详细了解一下5种常见的输出方案以及它们的适用场景吧。
5 种输出方式
一、 console.log()
这是最常用的输出方法之一它将信息输出到浏览器的控制台。适用于在开发过程中调试代码、查看变量的值或打印一些临时的消息。比如。
console.log(Hello, 桃!)那这个信息我们如何查看呢
首先英文不好的可以在浏览器预览时候按 F12按如下 2 张图的顺序把开发者工具设置成中文。 然后我们可以按照以下步骤进行查看输出 打开浏览器开发者工具。不同的浏览器可能有不同的打开方式一般可以通过按 F12 键或右键点击页面选择“检查”来打开。 在开发者工具中找到“控制台”选项卡。这个选项卡通常标有“Console”或类似的名称。 在控制台中你将看到所有通过 console.log 输出的信息。它们按照输出的顺序排列。如图。
使用时要注意以下几点 主要用于开发调试输出的信息不会在页面上显示而是在浏览器的控制台中。 可以输出各种类型的数据包括字符串、数字、对象等。 在生产环境中尽量减少使用 console.log()以免影响性能。
二、 alert()
弹出一个包含信息的对话框。适用于向用户展示一些重要的提示或警告消息需要用户立即注意并进行操作。
button idbutton点击我/button
scriptbutton.addEventListener(click, function () {alert(你点击了按钮)})
/script点击按钮后效果如下图 使用时要注意以下几点 会弹出一个模态对话框打断用户当前的操作。 通常用于向用户展示重要的提示或警告信息。 由于它会打断用户体验所以只是在新手期或者做项目时排查疑难问题阶段需要使用在正常项目下通常都会以更好体验的更符合项目的UI形式出现。
三、 prompt()
弹出一个输入框要求用户输入信息。适用于获取用户的输入例如在表单中获取用户的姓名或密码。
如下代码点击按钮就会弹出输入框。
button idbutton2点击我弹出输入框/button
scriptbutton2.addEventListener(click, function () {var name prompt(请输入你的名字)console.log(你输入的名字是 name)})
/script效果如图 使用时要注意以下几点 弹出一个输入框要求用户输入文本。 用于获取用户的输入但在移动设备上可能不太方便。 要处理用户可能取消输入或输入无效数据的情况。 这个方法通常在新手期被使用但在实际开发中很少被用到。
四、document.write()
将信息直接写入文档的内容中。
document.write(欢迎来到我们的网站)使用时要注意以下几点 直接将内容写入文档流会覆盖页面上已有的内容。 应该在页面加载完成后使用否则可能会导致页面布局混乱。 由于它会动态修改页面内容可能会影响页面的效果和性能通常只在新手阶段使用它。
五、innerHTML 属性
通过修改元素的 innerHTML 属性来更改元素的内容。适用于动态更新页面的部分内容。比如
h1 idh1/h1
scriptdocument.getElementById(h1).innerHTML 我是通过js写入的标题呀
/script
效果如下 OK你学会了么本文完。
