Web教程:JavaScript输出

开课吧开课吧锤锤2021-03-18 15:55

    Web前端是随着移动互联网的发展而兴起的新兴行业,入门简单、应用广泛,吸引了人们的广泛加入。然而随着互联网技术的革新以及企业用人标准的不断提升,Web前端人员需要掌握的技能也在不断增多.今天为大家讲解的是JavaScript输出。

    JavaScript输出

    JavaScript没有任何打印或者输出的函数。

    JavaScript显示数据

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

    使用window.alert()弹出警告框。

    使用document.write()方法将内容写到HTML文档中。

    使用innerHTML写入到HTML元素。

    使用console.log()写入到浏览器的控制台。

    使用window.alert()

    你可以弹出警告框来显示数据:

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个页面</h1>
<p>我的第一个段落。</p>

<script>
window.alert(5 + 6);
</script>

</body>
</html>

    操作HTML元素

    如需从JavaScript访问某个HTML元素,您可以使用document.getElementById(id)方法。

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

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个 Web 页面</h1>

<p id="demo">我的第一个段落</p>

<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>

</body>
</html>

    以上JavaScript语句(在<script>标签中)可以在web浏览器中执行:

    document.getElementById("demo")是使用id属性来查找HTML元素的JavaScript代码。

    innerHTML="段落已修改。"是用于修改元素的HTML内容(innerHTML)的JavaScript代码。

    在本教程中

    在大多数情况下,在本教程中,我们将使用上面描述的方法来输出:

    上面的例子直接把id="demo"的<p>元素写到HTML文档输出中:

    写到HTML文档

    出于测试目的,您可以将JavaScript直接写在HTML文档中:

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个 Web 页面</h1>

<p>我的第一个段落。</p>

<script>
document.write(Date());
</script>

</body>
</html>

    请使用document.write()仅仅向文档输出写内容。

    如果在文档已完成加载后执行document.write,整个HTML页面将被覆盖。

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个 Web 页面</h1>

<p>我的第一个段落。</p>

<button onclick="myFunction()">点我</button>

<script>
function myFunction() {
    document.write(Date());
}
</script>

</body>
</html>

    写到控制台

    如果您的浏览器支持调试,你可以使用console.log()方法在浏览器中显示JavaScript值。

    浏览器中使用F12来启用调试模式,在调试窗口中点击"Console"菜单。

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个 Web 页面</h1>

<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>

</body>
</html>

    实例console截图:

web

    以上就是JavaScript输出的解析,如果你对面试题感兴趣不妨点击图片,免费获得课程。

web

    如何才能在同等水平竞争中脱颖而出,除了过硬的技术,那么嗨哟一个方法就是面试资料,不是网上千篇一律的,这是你进大厂的关键。

有用1
分享
全部评论快来秀出你的观点
登录 后可发表观点…
发表
暂无评论,快来抢沙发!
云开发实战特训营