1、代码位置
- HTML内部：
位于 <script> 与 </script> 标签之间。可被放置在 HTML 页面的 <body> 和 <head> 部分中。 - 外部单独文件中，不需要 <script></script>标签，外部文件通常包含被多个网页使用的代码。
外部 JavaScript 文件的文件扩展名是 .js。
如需使用外部文件，请在 <script> 标签的 "src" 属性中设置该 .js 文件：
外部.js文件
<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</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>标签中：
<!DOCTYPE html>
<html>
<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>
2、输出
JavaScript 输出：
JavaScript 没有任何打印或者输出的函数。
JavaScript 可以通过不同的方式来输出数据：
-
使用 window.alert() 弹出警告框。
-
使用 document.write() 方法将内容写到 HTML 文档中。
可以直接写到html页面。也可以通过函数，整个页面加载完成后执行，会覆盖整个html页面。 -
使用 innerHTML 写入到 HTML 元素。
要访问某个元素，可以在标签中指定id="id name"，然后使用document.getElementById("id name")获取标签内容。
document.getElementById("demo") 是使用 id 属性来查找 HTML 元素的 JavaScript 代码 。该方法是 [HTML DOM]中定义的。
innerHTML = "Paragraph changed." 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。 -
使用 console.log() 写入到浏览器的控制台。
通过浏览器的调试工具查看，F12，console。相比alert的方式，通过控制台不会再打断正常的显示效果。
代码demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScript输出</title>
</head>
<body>
<h1>JavaScript输出示例</h1>
<p id="demo">段落示例</p>
<p>如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。</p><br>
<button type="button" onclick="over()">点击覆盖整个html页面</button><br>
<script>
window.alert("使用window.alert()弹出警告框来显示数据");
document.getElementById("demo").innerHTML="修改指定元素来获取或插入数据";
document.write("使用document.write()写入数据到html页面上");
function over()
{
document.write("已执行over函数中的document.write()");
}
a = 5;
b = 6;
c = a+b;
console.log(c+"使用console.log()写到浏览去控制台");
</script>
</body>
</html>
效果展示：
弹窗警告框.png
指定元素已修改.png
加载完成后覆盖效果.png
console写到控制台.png
网友评论