Search K
Appearance
01 JavaScript 简介
Xmind
JavaScript 介绍
- JavaScript 是什么？ JavaScript 是一种运行在客户端（浏览器）的编程语言
- JavaScript 组成是什么？ ECMAScript(基础语法）、web APIs（DOM、BOM)
- 权威网站 JavaScript | MDN (mozilla.org)
JavaScript 是什么
JavaScript（JS）是一种具有函数优先特性的轻量级、解释型或者说即时编译型的编程语言。虽然作为 Web 页面中的脚本语言被人所熟知，但是它也被用到了很多非浏览器环境中，例如 Node.js、Apache CouchDB、Adobe Acrobat 等。进一步说，JavaScript 是一种基于原型、多范式、单线程的动态语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。
JavaScript 的动态特性包括运行时对象的构造、变量参数列表、函数变量、动态脚本创建（通过 eval）、对象内枚举（通过 for…in 和 Object 工具方法）和源代码恢复（JavaScript 函数会存储其源代码文本，可以使用 toString() 进行检索）。
- JavaScript 是一种运行在客户端（浏览器）的编程语言，用于前端 Web 开发，实现人机交互效果。它可以通过添加交互性和动态功能来增强网站的用户体验。
- JavaScript 也可以用于服务器端编程（如 Node.js），数据库查询和移动应用程序开发。它支持面向对象、函数式和基于原型的编程范式，并且具有动态类型、自动内存管理和解释执行等特点。
- JavaScript 以 ECMAScript 标准为基础，同时还包括一些与浏览器相关的 API，例如 DOM（文档对象模型）和 BOM（浏览器对象模型），用于操作网页内容和浏览器窗口。
JavaScript 的作用
- 网页特效 (监听用户的一些行为让网页作出对应的反馈)
- 表单验证 (针对表单数据的合法性进行判断)
- 数据交互 (获取后台的数据，渲染到前端)
- 服务端编程 (node.js)
JavaScript 的组成
- ECMAScript（标准核心）：ECMAScript 是 JavaScript 语言的标准核心，定义了语言的基本语法、类型、关键字、保留字、操作符、对象和内置函数等。所有支持 JavaScript 的浏览器和环境都必须支持 ECMAScript。
- Web APIs：Web APIs 是指浏览器提供的一些内置对象，例如 DOM、BOM、XMLHttpRequest、Fetch 等。这些对象可以让 JavaScript 与浏览器进行交互，例如操作 DOM 元素、发送 HTTP 请求等。Web APIs 是浏览器提供的，不是 JavaScript 语言的一部分，因此不同的浏览器支持的 Web APIs 也不尽相同。
- DOM（文档对象模型）：DOM 是指文档对象模型，它是一种用于处理 HTML 或 XML 文档的 API。通过 DOM，JavaScript 可以访问和操作文档的内容、结构和样式，例如添加、删除、修改、移动或查询元素等操作。
- BOM（浏览器对象模型）：BOM 是指浏览器对象模型，它是一种用于处理浏览器窗口、菜单栏、工具栏、状态栏、历史记录等方面的 API。通过 BOM，JavaScript 可以控制浏览器的行为，例如弹出对话框、跳转页面、改变窗口大小和存储数据到浏览器等操作。
权威网站
JavaScript 书写位置
- JavaScript 三种书写位置？ 内部、外部、行内
- 书写的位置尽量写到文档末尾
</body>前面- 外部 js 标签中间不要写代码，否则会被忽略
JavaScript 程序不能独立运行，它需要被嵌入 HTML 中，然后浏览器才能执行 JavaScript 代码。通过 <script> 标签将 JavaScript 代码引入到 HTML 中。
内部方式
直接写在 html 文件里，通过 <script> 标签包裹 JavaScript 代码。
html
<!-- 内联形式：通过 script 标签包裹 JavaScript 代码 -->
<script>
alert("嗨，欢迎来传智播学习前端技术！");
</script>注意事项
- 我们将
<script>放在 HTML 文件的底部附近的原因是浏览器会按照代码在文件中的顺序加载 HTML。 - 如果先加载的 JavaScript 期望修改其下方的 HTML，那么它可能由于 HTML 尚未被加载而失效。
- 因此，将 JavaScript 代码放在 HTML 页面的底部附近通常是最好的策略。
外部形式
一般将 JavaScript 代码写在独立的以 .js 结尾的文件中，然后通过 <script> 标签的 src 属性引入。
html
<!-- 外部形式：通过 script 的 src 属性引入独立的 .js 文件 -->
<script src="demo.js"></script>js
document.write("嗨，欢迎来传智播学习前端技术！");注意事项
如果
<script>标签使用src属性引入了某.js文件，那么 标签的代码会被忽略！！！html<!-- 外部形式：通过 script 的 src 属性引入独立的 .js 文件 --> <script src="demo.js"> // 此处的代码会被忽略掉！！！！ alert(666); </script>外部 JavaScript 会使代码更加有序，更易于复用，且没有了脚本的混合，HTML 也会更加易读，因此这是个好的习惯。
内联方式
JS 代码直接嵌入到 HTML 标签中（此处作为了解即可，但是后面 vue 框架会用这种模式）。
html
<button onclick="alert('Hello World!')">Click me</button>JavaScript 的注释
- JavaScript 注释有那两种方式？ 单行注释
//多行注释/* */
通过注释可以屏蔽代码被执行或者添加备注信息，JavaScript 支持两种形式注释语法：单行注释和多行注释。
单行注释
使用 // 开头，表示从该符号后到行末都是注释内容。
js
// 这是一个单行注释
var x = 10; // 这是另一个单行注释
document.write("嗨，欢迎来传智播学习前端技术！");多行注释
使用 /* 开始，使用 */ 结束，表示这段注释内的所有内容都被视为注释。
js
/* 这是一个
多行注释 */
var y = 20; /*
这个变量定义也在
多行注释内
*/快捷键
VSCode 中的单行注释的快捷键为 ctrl + /，多行注释的快捷键为 shift + alt + A。
注意事项
在单行注释中不能换行，否则换行后的内容将不会被注释掉。而在多行注释中，可以任意换行，注释内容会一直到结束标记才会结束。
JavaScript 的结束符
- JavaScript 结束符注意点结束符是？ 英文分号
;- 结束符可以省略吗？ 可以省略。但为了风格统一，结束符要么每句都写，要么每句都不写
在 JavaScript 中 ; 代表一段代码的结束，多数情况下可以省略 ; 使用回车（enter）替代。
html
<script>
alert(1);
alert(2);
alert(1);
alert(2);
</script>实际情况
- 实际开发中，可写可不写。许多人主张书写 JavaScript 代码时省略结束符
;, 因为浏览器 (JavaScript 引擎) 可以自动推断语句的结束位置。 - 约定：为了风格统一，结束符要么每句都写，要么每句都不写（按照团队要求）。
输入和输出语法
- JavaScript 输入输出语句？ 输入：
prompt(）输出：alert()、document.write()、console.log()
输出和输入也可理解为人和计算机的交互，用户通过键盘、鼠标等向计算机输入信息，计算机处理后再展示结果给用户，这便是一次输入和输出的过程。
举例说明：如按键盘上的方向键，向上/下键可以滚动页面，按向上/下键这个动作叫作输入，页面发生了滚动了这便叫输出。
输出
JavaScript 可以接收用户的输入，然后再将输入的结果输出：
alert()：页面弹出警告对话框。document.write()：向<body>内输出内容。如果输出的内容是标签，也会被解析成网页元素。console.log()方法：将文本输出到控制台。
以数字为例，向 alert() 或 document.write() 或 console.log() 输入任意数字，他都会以弹窗形式展示（输出）给用户。
js
// 1. 输入的任意数字，都会以弹窗形式展示
document.write("要输出的内容");
console.log("要输出的内容");
alert("要输出的内容");输入
prompt() ：显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字。
js
// 2. 以弹窗形式提示用户输入姓名，注意这里的文字使用英文的引号
prompt("请输入您的姓名：");JavaScript 代码执行顺序
- 按 HTML 文档流顺序执行 JavaScript 代码
alert()和prompt()它们会跳过页面渲染先被执行（目前作为了解，后期讲解详细执行过程）