一、什么是JS：
① ：JS是一种运行在客户端（浏览器）的编程语言，可以通过控制网页上的内容用来响应用户的各种行为，让网页动起来。
②：JS体验：通过js可以快速将页面上的图标一次性增加到购物车中 [：(www.iconfont.cn/collections…)]
二、在网页中JS如何写
①： 内部样式：通过 script 标签包裹 JavaScript 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 引入方式</title>
</head>
<body>
<!-- 内联形式：通过 script 标签包裹 JavaScript 代码 -->
<script>
alert('嗨，我们一起学习前端+鸿蒙技术！')
</script>
</body>
</html>
②： 外部样式：一般将 JavaScript 代码写在独立的以 .js 结尾的文件中，然后通过 script 标签的 src 属性引入。
1.创建demo.js文件
// demo.js
document.write('嗨，我们一起学习前端+鸿蒙技术！')
2.引入demo.js文件执行js代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 引入方式</title>
</head>
<body>
<!-- 外部形式：通过 script 的 src 属性引入独立的 .js 文件 -->
<script src="demo.js"></script>
</body>
</html>
💣 注意： 如果 script 标签使用 src 属性引入了某 .js 文件，那么 标签的代码会被忽略！！！如下代码所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 引入方式</title>
</head>
<body>
<!-- 外部形式：通过 script 的 src 属性引入独立的 .js 文件 -->
<script src="demo.js">
// 此处的代码会被忽略掉！！！！
alert(666);
</script>
</body>
</html>
三、输入和输出语句
输出和输入也可理解为人和计算机的交互，用户通过键盘、鼠标等向计算机输入信息，计算机处理后再展示结果给用户，这便是一次输入和输出的过程。
①: 输出语句的三种方式
// 1. 输出语句
// 1.1 alert 页面弹出警示框
alert('你好,js')
// 1.2 document.write 向页面文档输入内容 显示到页面body标签之内, 可以正常的解析标签
document.write('今日特价')
document.write('<h4>今日特价</h4>')
// 1.3 console.log 给我们程序员调试使用的 console 控制台
console.log('给咱们程序员使用的')
document.write案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li {
color: red;
list-style: none; /* 表示将li标签前面的小点移除 */
}
</style>
</head>
<body>
<!-- 技术选型：
1. 输出语句选择 document.write() 原因是这首诗输出到网页上的
2. 输出的内容使用的 ul + li 来进行包裹
3. 颜色使用的是css中的元素选择器结合color属性来完成
-->
<script>
document.write('<ul>')
document.write('<li>红豆生南国</li>')
document.write('<li>春来发几枝</li>')
document.write('<li>愿君多采撷</li>')
document.write('<li>此物最相思</li>')
document.write('</ul>')
</script>
</body>
</html>
效果图
②: 输入语句
向 prompt() 输入任意内容会以弹窗形式出现在浏览器中，一般提示用户输入一些内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 输入输出</title>
</head>
<body>
<script>
// 1. 以弹窗形式提示用户输入姓名，注意这里的文字使用英文的引号
prompt('请输入您的姓名:')
</script>
</body>
</html>
