本文介绍了JavaScript在Web开发中的地位，解释了与Java的区别，概述了HTML、CSS和JS在网页构成中的角色，详细阐述了JS的核心语法、DOM和BOM的概念，以及其特点如简单易用、跨平台和面向对象。还提到了JS开发工具和常见用法，如弹窗操作、代码嵌入和异步加载，以及基础的JS函数如alert、prompt和confirm。
什么是JavaScript
Java和JavaScript的关系就好像老婆和老婆饼的关系，没有关系。
非要说关系：都是编程语言。
JavaScript是Web开发领域中的一种功能强大的编程语言，主要用于开发交互式的网页。
简称JS
网页的组成
一个完整的网页由三部分组成：
- HTML （网页的主体部分）
- CSS （美化的主体部分）
- JavaScript （实现业务逻辑和页面控制）
以上的举例说明：
网页中最常见的无非就是登陆页面。
HTML无非就是账号框，密码框，登陆按钮。
CSS无非就是美化上述内容。
JS就是当用户点击登陆按钮，获取账号和密码框的内容，去后台进行校验，判断是否账号密码匹配，然后做出相对于的反馈。
JS的三大组成：
第一部分：核心语法 （JS代码）
第二部分：DOM文档对象模型 （JS可以控制HTML元素进行相关的操作）
第三部分：BOM 浏览器对象模型（JS可以控制浏览器元素进行相关的操作）
浏览器元素：弹窗。浏览器的宽高，滚动条等等。
ECMAScript：规定了JavaScript的编程语法和基础核心内容，是所有浏览器厂商共同遵守的一套JavaScript语法工业标准。
DOM：文档对象模型，是W3C组织制定的用于处理HTML文档和XML文档的编程接口，它提供了对文档的结构化表述，并定义了一种方式使程序可以对该结构进行访问，从而改变文档的结构、样式和内容。
BOM：浏览器对象模型，是一套编程接口，用于对浏览器进行操作，如刷新页面、弹出警告框、控制页面跳转等。
JS的特点：
- 简单易用 （只需要用户安装浏览器即可使用）
- JavaScript是一门脚本语言（Script Language），语法规则比较松散，使开发人员能够快速完成程序的编写工作。这里所说的脚本语言是编程语言的一种类型，常见的脚本语言有JavaScript、TypeScript、PHP、Python等。
- 跨平台 和上述一样。
- 支持面向对象 （面向对象是软件开发中的一种重要的编程思想，JavaScript能够通过面向对象思想进行编程。）
JS常见的开发工具
学习JavaScript开发需要准备以下工具。 浏览器：用于执行、调试
JavaScript代码。 代码编辑器：用于编写代码。
| 常见的两大开发工具 | VSCode | HBuilderX |
| 优点 | 1什么语言都可以用它编写 | 1.专注于前台设计 |
| 缺点 | 1.第一个优点导致的问题：界面设计不合理，安装的插件需要很多。需要联网等 | 2.功能较少 |
第一个拥有JS代码的HTML网页
案例1：打开网页，弹出一个警告框提示用户“请输入正确格式”;
| <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> 我的第一个HTML页面 <script> alert("请输入正确的格式"); </script> </body> </html> |
上面的案例的总结分析
总结1：JS代码必须放在<script>标签内部。
总结2：script不能交叉嵌套。
总结3：script标签的摆放的顺序可以随意。但是推荐放在body标签内部的最下方。
分析总结3的原因
如果HTML页面中有大量的JS代码。导致需要加载时间较长。
由于JS代码的执行是从上到下。如果将JS代码放在HTML页面的上方。就会导致。执行JS的代码时间过长，导致JS下方的HTML代码未被加载。所以总结3的原因。
HTML页面书写JS代码的常见两种方式
JS代码和CSS代码非常类似，都可以在一个网页中拥有多个代码标签片段。
- 嵌入式：就是刚刚讲解的方法。将JS代码放在script标签中，将script标签放在HTML页面中。（和CSS代码很类似）适用于：JS代码较少。不会影响到我们阅读HTML代码。
- 外链式：适用于JS代码非常多，不适合放在HTML页面中，不然导致不方便阅读HTML代码。
如何使用外链式：
- 也是在适当的位置（body标签的最低部）引入script标签。
- 禁止在标签内部书写JS代码了
- 创建一个外部的JS文件了（后缀为.js文件）
- 这个外部js文件，就不要放script标签了。直接写代码
- 在A步骤中添加src=”xxx.js”路径即可使用。
多学一招：JavaScript异步加载
为了减小JavaScript阻塞问题对页面造成的影响，可以使用HTML5为<script>标签新增的两个可选属性async和defer实现异步加载。
所谓异步加载，指的是浏览器在执行加载JavaScript文件时不阻塞页面的加载和渲染。
该知识点仅做了解：
原因1：浏览器和计算机的执行速度已经非常快了，人的肉眼区分不了一丢丢时间差异带来的视觉效果。
原因2：即使退一万步讲，真的影响到了，使用上述方法也无法得到有效解决。
我们常见的处理方式：生成一个加载页面，提示用户“正在加载中…”。
JS最基础的几行代码
- alert(“xxx”);作用：生成一个警告的弹窗
- prompt(“xxxx”); 生成一个询问框，用户可以输入值。然后点击确定和取消。
点击确定：JS需要收集用户输入的信息（第二章讲解）。点击取消：无事发生。
- confirm(“xxx”); 生成一个询问框,但是不需要输入，只需要选择确定或取消。
以上三个就是JS内置的3个弹窗。（只有3个）
根据不同场合使用不同的弹窗
- document.write(“xxxx”); 作用：在HTML页面输入一段内容。一般使用场景：用户执行了什么操作，才会显示什么内容。
- console.log(“xxx”); 需要按一下F12才能打开浏览器的控制台。常用于调试BUG。
第一章的注意事项：
转义符：如果遇到特殊符号：需要对其进行转义操作。
/是斜杠,挨着shift的
\是反斜杠：挨着回车上面的 作为转义符使用
JS中的注释
分为单行注释： //xxx
和
多行注释：
/*
Xxx
Xxx
*/
扫一扫
2945
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
