JavaScript输出

西电卢本伟

已于 2022-04-07 21:54:25 修改

阅读量1.1k

点赞数 1

分类专栏： JavaScript笔记文章标签： javascript web

于 2022-04-07 21:53:10 首次发布

本文链接：https://blog.csdn.net/lbwnbnbnbnbnbnbn/article/details/124026791

版权

JavaScript笔记专栏收录该内容

2 篇文章

订阅专栏

文章目录

JavaScript简介
JavaScript输出

JavaScript简介

HTML 中的脚本必须位于 <script> 与 </script> 标签之间。
脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。

< script > 标签

在 HTML 页面中插入 JavaScript，需要使用 <script> 标签。<script> 和 </script> 之间的代码行包含了 JavaScript 内容

<script>
alert("我的第一个 JavaScript");
</script>

< head > 中的 JavaScript 函数

一个 JavaScript 函数可以放置到 HTML 页面的 <head> 部分

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</head>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">尝试一下</button>
</body>
</html>

< body > 中的 JavaScript 函数

一个 JavaScript 函数也可以放置到 HTML 页面的 <body> 部分

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">尝试一下</button>
<script>
function myFunction()
{
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</body>
</html>

外部的 JavaScript

如果外部文件通常包含被多个网页使用的代码，可以考虑把脚本保存到外部文件中。外部 JavaScript 文件的文件扩展名是 .js 。如需使用外部文件，需要在 <script> 标签的 “src” 属性中设置该 .js 文件

比如 html 中这么写：

<!DOCTYPE html>
<html>
<body>
<script src="MyFirstScript.js"></script>
</body>
</html>

包含的 MyFirstScript.js 就要这么写：

function myFunction()
{
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}

要注意的是：外部脚本不能包含 <script> 标签

从结果来看，这三者没有任何区别。可以分别类比成C语言中的函数、直接写在main函数里头以及头文件。

JavaScript输出

window.alert()

使用 window.alert()，可以弹出警告框来显示数据，window可省略

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
</head>
<html>
<body>

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

<script>
window.alert(114514);
alert('hahaha');
</script>

</body>
</html>

可以发现先后弹窗显示元素

document.write()

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

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
</head>
<html>
<body>

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

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

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

</body>
</html>

成功显示日期时间
在这里插入图片描述
要注意的是：如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。意思就是文档已经加载完成，后续如果要通过点击按钮等之类的操作执行 document.write ，HTML 页面就会消失只留下 document.write 的内容

比如：

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
</head>
<html>
<body>

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

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

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

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

</body>
</html>

点击按钮前后：
在这里插入图片描述

console.log()

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

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
</head>
<html>
<body>

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

<script>
a = 100000;
b = 14514;
c = a + b;
console.log(c);
</script>

</body>
</html>

可以在控制台看到
在这里插入图片描述

innerHTML

严格来说 innerHTML 并不属于 JavaScript 的输入，但是它可以操纵 HTML 。我们可以使用 innerHTML 写入到 HTML 元素标签中，要跟 document.write() 写入到 HTML 中区别开来

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
</head>
<html>
<body>

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

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

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

</body>
</html>

对这段代码的理解是，p标签被赋予 id 为 demo，而中document.getElementById() 函数是使用 id 属性来查找 HTML 元素的 JavaScript 代码。故此处就是寻找到了 id 为 demo 的 p标签，后面 innerHTML 会将 段落已修改。写入到 p 标签中，并覆盖之前的内容。
在这里插入图片描述