JS基础教程3——输出

67 阅读1分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第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 来激活浏览器控制台,并在菜单中选择“控制台”。

捕获.PNG

(点击进入专栏查看详细教程)