JS基础教程3——输出

简介: 在js中每句话的结尾最好加上;(同java等语言),不加也能运行,但是建议加上。

JS基础教程3——输出


JS基础教程3——输出


在js中每句话的结尾最好加上;(同java等语言),不加也能运行,但是建议加上。


JavaScript显示方式


JavaScrpit可以通过不同的方式显示数据。


  • 使用 window.alert() 写入警告框
  • 使用 document.write() 写入 HTML 输出
  • 使用 innerHTML 写入 HTML 元素
  • 使用 console.log() 写入浏览器控制台


读取HTML文件内容


想要获取HTML文件内容可以用document.getElementById(id),id属性定义HTML元素。


使用innerHTML


innerHTML属性定义HTML内容。

<!DOCTYPE html>
<html>
<body>
<p>第一个段落</p>
<p id="one"></p>
<script>
 document.getElementById("one").innerHTML = "这是通过innerHTML属性添加的内容";
</script>
</body>
</html>

innerHTML可以给已经有的内容进行修改。


使用document.write()


如果不需要进行修改,可以使用document.write()方法进行测试,该方法测试也更方便。

<!DOCTYPE html>
<html>
<body>
<p>第一个段落</p>
<script>
    document.write("这是通过document.write属性添加的内容");
</script>
</body>
</html>


使用 window.alert()


在需要弹窗对用户进行提示或者警告是,可以使用window.alert()方式,例如用户登入或者注册时密码错误或者长度不对之类的都可以先获取HTML表单元素,然后进行判断是否弹窗,也可以不进行判断直接弹窗(用户一进入浏览器就进行提示)。

<!DOCTYPE html>
<html>
<body>
<p>第一个段落</p>
<script>
    window.alert("请正确的浏览网页");
</script>
</body>
</html>


使用 console.log()


主要是提供给开发人员测试使用~~~


在浏览器中,您可使用 console.log() 方法来显示数据,通过 F12 来激活浏览器控制台,并在菜单中选择“控制台”。

1.png

相关文章
|
1月前
|
Web App开发 JavaScript 前端开发
2024年5月node.js安装(winmac系统)保姆级教程
本篇博客为2024年5月版Node.js安装教程,适用于Windows和Mac系统。作者是一名熟悉JavaScript与Vue的大一学生,分享了Node.js的基本介绍、下载链接及简单安装步骤。安装完成后,通过终端命令`node -v`验证版本即可确认安装成功。欢迎关注作者,获取更多技术文章。
29 2
2024年5月node.js安装(winmac系统)保姆级教程
|
5月前
|
JavaScript
vue中使用 HotKeys.js 教程(按键响应、快捷键开发)
vue中使用 HotKeys.js 教程(按键响应、快捷键开发)
222 0
|
2月前
|
JavaScript 前端开发
js教程——函数
js教程——函数
44 4
|
7月前
|
JavaScript 前端开发 网络安全
【网络安全 | 信息收集】JS文件信息收集工具LinkFinder安装使用教程
【网络安全 | 信息收集】JS文件信息收集工具LinkFinder安装使用教程
392 4
|
2月前
|
JavaScript 前端开发 Java
Node.js 教程
10月更文挑战第1天
54 0
|
4月前
|
JavaScript NoSQL 前端开发
|
5月前
|
JSON JavaScript 数据格式
vue 绘制波形图 wavesurfer.js (音频/视频) 【实用教程】
vue 绘制波形图 wavesurfer.js (音频/视频) 【实用教程】
458 3
|
5月前
|
JavaScript
vue 农历日期转公历日期(含插件 js-calendar-converter 使用教程)
vue 农历日期转公历日期(含插件 js-calendar-converter 使用教程)
249 0
|
5月前
|
开发框架 监控 JavaScript
企业级node.js开发框架 【egg.js】 实用教程
企业级node.js开发框架 【egg.js】 实用教程
74 0
|
5月前
命令行加载特效 【cli-spinner.js】 实用教程
命令行加载特效 【cli-spinner.js】 实用教程
55 0