【JavaScript】一、JS的引入与输入输出
文章目录
- 1、常用工具与插件
- 1.1 Snipaste
- 1.2 Error Lens
- 1.3 One Dark Pro
- 1.4 Live Server
- 2、JavaScript
- 2.1 JS介绍
- 2.2 JS的组成
- 3、JS初体验
- 4、JS的书写位置
- 4.1 内部JS
- 4.2 外部JS
- 4.3 内联JS
- 5、JS中的注释与结束符号
- 6、JS的输出
- 6.1 语法1：document.write
- 6.2 语法2：alert(' ')
- 6.3 语法3：console.log
- 7、JS的输入
- 8、JS代码执行顺序
1、常用工具与插件
1.1 Snipaste
一个前端截图软件：
常用快捷键（搭配Fn）：
- 截图：F1
- 截图定在屏幕上：F3 ，选中后ESC退出
- 取颜色：截图时，鼠标定到想要颜色的区域，看到颜色值，按shift切换成GBG/HEX格式，按C复制
1.2 Error Lens
一个报错提示插件：Error Lens
效果：
1.3 One Dark Pro
一个代码颜色插件：
安装后，设置自己喜欢的颜色主题：
1.4 Live Server
一个左边写代码，右边预览的分屏插件
安装完成后，右键Open with Live Server，然后Win + ➡️，出现在右边
2、JavaScript
2.1 JS介绍
JavaScript是一种运行在客户端(浏览器) 的编程语言，实现人机交互效果，相比，HTML则是一种标记语言。JavaScript可以实现：
- 网页特效 ：监听用户的一些行为让网页作出对应的反馈，如轮播图
- 表单验证 ：针对表单数据的合法性进行判断
- 数据交互 ：获取接口返回的数据, 渲染到前端页面
- 服务端编程 ：node.js
<!--JS参考网站：MDN-->
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript
2.2 JS的组成
JS有两部分：
- ECMAScript：规定了js基础语法，比如：变量、分支语句、循环语句、对象等
- Web APIs ：
- DOM ， 操作文档，比如对页面元素进行移动、大小、添加删除等操作
- BOM，操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器
3、JS初体验
以下，用三件套，做一个点击哪个按钮，哪个按钮变黄的效果：
<!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>
.yellow {
color: #fc0;
}
</style>
</head>
<body>
<button class="yellow">按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<script>
let bts = document.querySelectorAll('button')
for (let i = 0; i < bts.length; i++) {
bts[i].addEventListener('click', function () {
document.querySelector('.yellow').className = ''
this.className = 'yellow'
})
}
</script>
</body>
</html>
4、JS的书写位置
和CSS对应，JS也有三种书写位置：
4.1 内部JS
直接写在html文件里，用script标签包住，位置在</body>上面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 行内JS -->
<script>
// 页面弹出警示框
alert('Hello World!')
</script>
</body>
</html>
将 <script> 放在HTML文件的body底部附近的原因是让浏览按照代码在文件中的顺序先加载 HTML，否则上来就是JS，像前面入门案例中的document.querySelectorAll('button')就会有问题
4.2 外部JS
代码写.js结尾的文件里，通过script标签，引入到html页面中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 外部JS -->
<script src="./js/my.js"></script>
</body>
</html>
注意，使用外部JS的方式后，script标签中间无需写代码，否则会被忽略，相比前面的行内JS，JS代码很多时，外部JS代码结构更清晰
4.3 内联JS
代码写在标签内部
<body>
<button onclick="alert('逗你的~~')">点我月入百万</button>
</body>
5、JS中的注释与结束符号
注释：
- 单行，//，Ctrl + /
- 多行，/* */，shift + alt + A
结束符号：
- 封号；结尾
- 封号可省略，浏览器可以自动推断语句的结束位置，要么都加，要么都不加（建议不加）
6、JS的输出
6.1 语法1：document.write
- document.write
- 作用：向html的body内输出内容，且如果输出的内容写的是标签，也会被解析成网页元素
<body>
<script>
// document.write可以输出文字，也可以输出标签
document.write('输出普通文字')
document.write('<h1>输出h1标签</h1>')
</script>
</body>
6.2 语法2：alert(’ ')
- alert
- 作用:页面弹出警告对话框
<body>
<script>
alert('弹出内容')
</script>
</body>
6.3 语法3：console.log
- console.log
- 作用：控制台输出语法，调试代码使用
<body>
<script>
console.log("debug")
console.log('debug')
</script>
</body>
7、JS的输入
prompt，翻译：提示，显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字
<body>
<script>
prompt('请输入你的姓名')
</script>
</body>
8、JS代码执行顺序
JavaScript 代码执行顺序：
-
按HTML文档流顺序执行JavaScript代码
-
alert() 和 prompt() 它们会跳过页面渲染先被优先执行