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月前
|
JavaScript 前端开发
js教程——函数
js教程——函数
32 4
|
4月前
|
JavaScript
vue中使用 HotKeys.js 教程(按键响应、快捷键开发)
vue中使用 HotKeys.js 教程(按键响应、快捷键开发)
203 0
|
6月前
|
Web App开发 JavaScript 前端开发
《手把手教你》系列技巧篇(三十九)-java+ selenium自动化测试-JavaScript的调用执行-上篇(详解教程)
【5月更文挑战第3天】本文介绍了如何在Web自动化测试中使用JavaScript执行器(JavascriptExecutor)来完成Selenium API无法处理的任务。首先,需要将WebDriver转换为JavascriptExecutor对象,然后通过executeScript方法执行JavaScript代码。示例用法包括设置JS代码字符串并调用executeScript。文章提供了两个实战场景:一是当时间插件限制输入时,用JS去除元素的readonly属性;二是处理需滚动才能显示的元素,利用JS滚动页面。还给出了一个滚动到底部的代码示例,并提供了详细步骤和解释。
91 10
|
6月前
|
JavaScript 前端开发 网络安全
【网络安全 | 信息收集】JS文件信息收集工具LinkFinder安装使用教程
【网络安全 | 信息收集】JS文件信息收集工具LinkFinder安装使用教程
355 4
|
1月前
|
JavaScript 前端开发 Java
Node.js 教程
10月更文挑战第1天
40 0
|
3月前
|
JavaScript NoSQL 前端开发
|
4月前
|
JSON JavaScript 数据格式
vue 绘制波形图 wavesurfer.js (音频/视频) 【实用教程】
vue 绘制波形图 wavesurfer.js (音频/视频) 【实用教程】
395 3
|
4月前
|
JavaScript
vue 农历日期转公历日期(含插件 js-calendar-converter 使用教程)
vue 农历日期转公历日期(含插件 js-calendar-converter 使用教程)
236 0
|
4月前
|
开发框架 监控 JavaScript
企业级node.js开发框架 【egg.js】 实用教程
企业级node.js开发框架 【egg.js】 实用教程
70 0
|
4月前
命令行加载特效 【cli-spinner.js】 实用教程
命令行加载特效 【cli-spinner.js】 实用教程
46 0