首页 > 编程语言 >JavaScript 显示数据

JavaScript 显示数据

时间:2023-06-19 11:44:18浏览次数:73  
标签:显示 JavaScript 元素 alert HTML 使用 document 数据

JavaScript 显示数据

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

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

window.alert()

window.alert() 是一个 JavaScript 中的全局函数,用于向用户显示一条警告信息。调用 window.alert() 会在浏览器中显示一个对话框,其中包含一条消息和一个“确定”按钮。用户单击“确定”按钮后,对话框会关闭,JavaScript 代码将继续执行。

以下是 window.alert() 的使用示例:

<!DOCTYPE html>
<html>
<head>
  <title>Alert Example</title>
</head>
<body>
  <button onclick="showAlert()">按钮</button>

  <script>
    function showAlert() {
      window.alert('Hello, world!');
    }
  </script>
</body>
</html>

在这个例子中,定义了一个 showAlert() 函数,该函数在点击按钮时被调用。showAlert() 函数调用 window.alert() 并向用户显示一条消息。

请注意,由于 alert() 是一个阻塞函数,它会阻塞 JavaScript 代码的执行,直到用户关闭对话框。因此,使用过多的 alert() 可能会影响用户体验。如果需要向用户显示多个消息,请考虑使用其他方式,如在页面中添加一个消息区域或使用模态框等。

从 JavaScript 访问某个 HTML 元素

可以使用 document.getElementById(id) 方法从 JavaScript 访问 HTML 元素。该方法接受一个参数 id,该参数是要查找的元素的 ID,然后返回对该元素的引用。

以下是一个使用 document.getElementById() 方法访问 HTML 元素的示例:

<!DOCTYPE html>
<html>
<head>
  <title>使用 JavaScript 访问 HTML 元素</title>
</head>
<body>
  <div id="my-div">这是我的 div 元素。</div>

  <script>
    // 获取 ID 为 "my-div" 的元素的引用
    var myDiv = document.getElementById('my-div');

    // 更改元素的文本内容
    myDiv.textContent = 'Hello, world!';
     document.getElementById("my-div").innerHTML = "段落已修改。";
  </script>
</body>
</html>

在这个例子中,我们使用 document.getElementById('my-div') 方法获取一个对具有 ID “my-div”的 div 元素的引用。然后,我们使用 textContent 属性将元素的文本内容更改为“Hello, world!”。

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

请注意,如果没有具有指定 ID 的元素,则 document.getElementById() 方法将返回 null。因此,在使用返回的元素引用之前,请始终检查它是否为 null

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>修改测试</title>
</head>
<body>

<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<button onclick="myFunction()">点我</button>

<script>
// 定义名为 myFunction 的函数
function myFunction() {
    // 使用 document.write() 方法向文档中写入内容
    document.write("修改后");
}
</script>

</body>
</html>

这段代码创建了一个包含按钮的简单 HTML 页面,并使用 JavaScript 在单击按钮时向文档中写入文本。在 JavaScript 代码块中,我们定义了一个名为 myFunction() 的函数,它使用 document.write() 方法向文档中写入文本“修改后”。在 HTML 中,我们在按钮元素上使用 onclick 属性来指定单击按钮时要执行的 JavaScript 函数。

console.log()

console.log() 是一个 JavaScript 的内置方法,用于向浏览器的控制台输出信息。控制台是一个开发者工具,可以用于调试和测试 JavaScript 代码。使用 console.log() 可以帮助开发人员在代码中插入调试语句,以便在开发过程中输出变量值、错误信息等。

以下是一个使用 console.log() 的示例:

var x = 10;
var y = 20;
var z = x + y;

console.log(z); // 输出 30 到控制台

在这个示例中,我们定义了三个变量 xyz,并将 xy 相加存储到 z 中。然后,我们使用 console.log() 输出 z 的值到控制台。

控制台可以在大多数现代浏览器中通过按 F12 或使用浏览器开发工具打开。在控制台中,可以查看 JavaScript 输出、调试 JavaScript 代码、检查网络请求等。

标签:显示,JavaScript,元素,alert,HTML,使用,document,数据
From: https://www.cnblogs.com/zhuoblog/p/17490779.html

相关文章

  • (三)元素的显示与隐藏、溢出与浮动、定位、美化与修饰
    一、元素的显示与隐藏 二、元素的溢出与浮动三、定位    四、浮动与定位总结 五、元素的美化与修饰  ......
  • 关于数据治理的读书笔记 - 数据治理路线图规划
    数据治理成熟度评估为企业提供了一个数据治理的切入点,通过发现企业数据治理中存在的问题,找到目前和业界领先企业的差距,绘制出符合企业现状和需求的数据治理路线图。路线图是指描述技术变化步骤或技术相关环节之间逻辑关系的简洁的图形、表格、文字等形式。数据治理路线图则是对企业......
  • 三种数据库架构的介绍
    从数据库架构设计的角度,主要有三种,SharedEverything、SharedDisk以及SharedNothing。1. SharedEverything一般指的是单个主机的环境,完全透明共享的CPU/内存/硬盘,并行处理能力是最差的,典型代表就是SQLServer、单机版Oracle和MySQL,一般不考虑大规模的并发需求,架构比较简单,一般......
  • android连接本地数据库sqlite,实现增删改查
    前言Android应用数据存储简单来说有这么几种:文件存储、SharedPreference存储、SQLite数据库存储、网络服务器存储、ContentProvider等。如果需要存储的数据量大的时候,那么使用文件存储会有很大的弊端,例如:你想修改其中很微小的项就要先读取整个文件的内容,修改后再全部保存,非常耗时。......
  • Python爬虫与数据可视化(前程无忧网)
    1、前言最初我写过一篇相同的文章发表到了CSDN中,因为写的比较早,2019年吧,8万多访问量,所以后来也有很多网友反馈各种问题,包括网站反爬、数据爬取失败、网络异常等等,所以那篇文章也经过了多次的修改。不过目前因为CSDN规则更改,爬虫类文章因违反社区规定被下架了,然后我也很久没有去......
  • 20230227 0. 数据结构-浙大【归档】
    前言这个视频是大学教学内容,之前也学习过尚硅谷的视频课程,相对于尚硅谷的,内容要更全面一些,有对应的教材,但是语言是C,尚硅谷的实例更多一些。对于入门来说,这个视频教程更好一些目录概论202302271.1.什么是数据结构202302271.2.什么是算法202302271.3.应用实例线......
  • MySQL数据字典提示1146不存在的问题解决
    最近某套MySQL因为磁盘挂载问题,异常宕机,拉起后,数据库能正常访问了,但是在error.log一直提示这个错误,[ERROR]InnoDB:Table`mysql`.`innodb_table_stats`notfound.2021-09-03T08:26:52.446564Z2[ERROR]InnoDB:Fetchofpersistentstatisticsrequestedfortable`jira`.`c......
  • 小白学习MySQL - 随机插入测试数据的工具
    我们日常做一些MySQL测试的时候,经常要造数据,通常就写个循环插入数据的存储过程。前两天碰巧看文章说,mysql_random_data_load程序能向MySQL随机插入大量数据,于是了解一下。mysql_random_data_load是个开源的项目,github路径如下,https://github.com/Percona-Lab/mysql_random_data_loa......
  • Windows调试Oracle数据库问题的一些手段
    最近需要在Windows的跳板机上访问远程的Oracle数据库进行调试。Windows中只有个精简版OracleClient,以及PLSQLDeveloper客户端。如果用惯了Linux,再用Windows,确实不知所措。但这就是个从生疏到熟练的事儿,最近看的一本书中描述得很恰当,Themosteffectivewaytodealwithaworry......
  • 实测有效:Win11关闭右键默认显示更多
    1、管理员运行cmd2、输入reg.exeadd"HKCU\Software\Classes\CLSID\{86ca1aa0-34aa-4e8b-a509-50c905bae2a2}\InprocServer32"/f/ve3、重启资源管理器输入taskkill/f/imexplorer.exe&startexplorer.exe......