前言
本视频教学作用仅限于0基础需要入门的同学，后期博主会规划其它课程
视频有不懂的地方或者有哪些问题可直接联系我，我给解答
课件资料可以找我要会公开在csdn，也可以加入自学学习群，有同伴一起学，交流也更方便
vx搜公众号【前端新气象】有我的微信，请务必填写备注（b站-姓名）
课件代码地址https://github.com/haojiey/js-Introductory-courseware
可以学习到的内容
- 输出控制台信息
- 输出html内容
- 浏览器的警告框
- 浏览器的提问框
JavaScript 可以通过不同的方式来输出数据：
- 使用 alert() 弹出警告框。
- 使用 confirm() 函数来弹出一个对话框；
- 使用 document.write() 方法将内容写到 HTML 文档中。
- 使用 innerHTML 写入到 HTML 元素。
- 使用 console.log() 写入到浏览器的控制台。
alert()
alert() 函数可以在浏览器中弹出一个提示框，在提示框中我们可以定义要输出的内容
alert() 函数是 window 对象下的一个函数
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个页面</h1>
<p>我的第一个段落。</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>
confirm()
J在浏览器窗口弹出一个提示框，在提示框中，包含一个“确定”，“取消”按钮。如果点击“确定”按钮，那么 confirm() 函数会返回一个布尔值 true，如果点击“取消”按钮，那么 confirm() 函数会返回一个布尔值 false。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<script type="text/javascript">
var res = window.confirm("这里是要显示的内容");
if(res == true){
alert("点击了“确定”按钮");
}else{
alert("点击了“取消”按钮");
}
</script>
</body>
</html>
innerHTML
innerHTML表示从 JavaScript 访问某个 HTML 元素，然后给元素插入内容
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<p id="demo">我的第一个段落</p>
<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>
</body>
</html>
document.getElementById(“demo”) 是使用 id 属性来查找 HTML 元素的 JavaScript 代码 。
innerHTML = “段落已修改。” 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。
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()
浏览器中使用 F12 来启用调试模式， 在调试窗口中点击 “Console” 菜单。
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
</body>
</html>